/*====================================================
    GANDUM WOOCOMMERCE CUSTOM CSS
    Theme: Astra Free
    Builder: Elementor Free

    COLOR SYSTEM (only these are used anywhere below):
    --gold  #F2DBB2  -> background gold  = text dark  (#153D38)
    --dark  #153D38  -> background dark  = text gold  (#F2DBB2) or white
    --white #FFFFFF  -> used as the alternate text option on dark backgrounds

    Hover states are only ever a slight tint/shade of --gold or --dark,
    never a new color.
====================================================*/

:root {
  --gold: #f2dbb2;
  --dark: #153d38;
  --dark-green: #153d38;
  --white: #ffffff;

  /* slight variants for hover / layering, derived from the two base colors only */
  --gold-hover: #e8cc98; /* slightly darker gold */
  --dark-hover: #1c4941; /* slightly lighter dark green */

  /* Product grid card (glassmorphism) — reuses --gold/--dark above,
     plus a few translucent/off-white values specific to the glass effect */
  --gc-glass-bg: rgba(255, 255, 255, 0.06);
  --gc-glass-bg-hover: rgba(255, 255, 255, 0.1);
  --gc-glass-border: rgba(255, 255, 255, 0.14);
  --gc-title: #f7f2e7; /* warm off-white for card titles */
  --gc-text-muted: rgba(247, 242, 231, 0.72);
  --gc-btn-bg-hover: #f0b955; /* NOTE: distinct from --gold-hover, see comment below */
  --gc-btn-text: #1f2b23; /* NOTE: distinct from --dark, see comment below */
  --gc-radius: 20px;
  --gc-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --gc-shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.38);
}

/*====================================================
    GENERAL
====================================================*/

.woocommerce,
.woocommerce-page {
  color: var(--white);
}

.woocommerce a {
  color: var(--gold);
  text-decoration: none;
}

.woocommerce a:hover {
  color: var(--gold-hover);
}

.woocommerce-order-details mark,
.woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--gold) !important;
}

/*====================================================
    TABLES
====================================================*/

.woocommerce table.shop_table {
  background: var(--dark) !important;
  color: var(--white);
  border: 1px solid var(--gold) !important;
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  background: var(--dark-hover) !important;
  color: var(--gold) !important;
  font-weight: 600;
  border: 1px solid var(--gold) !important;
}

.woocommerce table.shop_table td {
  background: transparent !important;
  color: var(--white);
  border: 1px solid var(--gold) !important;
}

/*====================================================
    CART TOTALS
====================================================*/

.woocommerce .cart_totals {
  background: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 12px;
  overflow: hidden;
  padding: 25px;
  color: var(--white);
}

.woocommerce .cart_totals h2 {
  background: var(--dark-hover) !important;
  color: var(--gold) !important;
  margin: -25px -25px 20px;
  padding: 18px 25px;
}

.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table tr {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid var(--gold) !important;
}

/*====================================================
    NOTICES
====================================================*/

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--dark);
  color: var(--white);
  border-top: 4px solid var(--gold);
}

/*====================================================
    INPUT FIELDS
====================================================*/

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select {
  background: var(--dark);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px;
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.woocommerce label {
  color: var(--gold);
  font-weight: 500;
}

/*====================================================
    BUTTONS
====================================================*/

.woocommerce button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce a.button,
#place_order {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  transition: 0.3s;
}

.woocommerce button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
#place_order:hover {
  background: var(--gold-hover) !important;
  color: var(--dark) !important;
}

/*====================================================
    QUANTITY
====================================================*/

.quantity input.qty {
  background: var(--dark);
  color: var(--white);
  border: 1px solid var(--gold);
}

.quantity .plus,
.quantity .minus,
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
  background: var(--dark) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.quantity .plus:hover,
.quantity .minus:hover {
  background: var(--dark-hover) !important;
  color: var(--gold) !important;
}

/*====================================================
    CHECKOUT
====================================================*/

.woocommerce-checkout-review-order {
  background: var(--dark);
  padding: 25px;
  border-radius: 12px;
}

.woocommerce-checkout-review-order table {
  background: transparent;
}

#payment {
  background: var(--dark) !important;
  border-radius: 12px;
}

#payment div.payment_box {
  background: var(--dark-hover) !important;
  color: var(--white);
}

/*====================================================
    MY ACCOUNT
====================================================*/

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--dark);
  padding: 20px;
  border-radius: 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  color: var(--white);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  color: var(--gold);
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--dark);
  color: var(--white);
  padding: 30px;
  border-radius: 12px;
}
/* My Account sidebar nav — active/hover tab background */
.woocommerce-MyAccount-navigation-link a {
  color: var(--white, #ffffff);
}
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
  background-color: var(--dark-green) !important;
  color: var(--gold) !important;
}

/* Billing/Shipping address column titles */
.woocommerce-column__title,
.woocommerce-Address-title {
  background-color: var(--dark-green) !important;
  color: var(--gold) !important;
  padding: 0.5em 0.75em !important;
  font-size: 25px !important;
  line-height: 1.3 !important;
}

.woocommerce-order-details__title {
  background-color: var(--dark-green) !important;
  color: var(--gold) !important;
  padding: 0.5em 0.75em !important;
}

/* Safety net: any other Woo heading that ships with a white/light background
   inside an order or account context falls back to dark text instead of invisible */
.woocommerce-order-details h2,
.woocommerce-order-details h3,
.woocommerce-order-details h4,
.woocommerce-thankyou-order-details h2,
.woocommerce-thankyou-order-details h3 {
  background-color: transparent;
  color: var(--dark-green);
}

/*====================================================
    ADDRESS BOXES
====================================================*/

.woocommerce-address-fields,
.woocommerce-column {
  background: var(--dark);
  padding: 20px;
  border-radius: 12px;
}

/*====================================================
    FORMS
====================================================*/

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout,
.woocommerce form.edit-account {
  background: var(--dark);
  padding: 30px;
  border-radius: 12px;
}

/*====================================================
    PRODUCT LINKS
====================================================*/

.woocommerce-cart .product-name a,
.woocommerce-checkout .product-name,
.woocommerce-table__product-name a {
  color: var(--white);
}

/*====================================================
    COUPON
====================================================*/

.coupon {
  display: flex;
  gap: 10px;
}

.coupon input {
  flex: 1;
}

/*====================================================
    REMOVE BUTTON
====================================================*/

a.remove {
  color: var(--gold) !important;
}

a.remove:hover {
  color: var(--white) !important;
  background: transparent !important;
}

/*====================================================
    GLOBAL ROUNDED CORNERS
====================================================*/

.woocommerce table.shop_table,
.woocommerce input,
.woocommerce textarea,
.woocommerce select,
.woocommerce button,
.cart_totals,
.woocommerce form,
#payment {
  border-radius: 12px;
}

/*====================================================
    RESPONSIVE
====================================================*/

@media (max-width: 768px) {
  .cart_totals,
  .woocommerce-checkout-review-order,
  .woocommerce-account .woocommerce-MyAccount-content {
    margin-top: 20px;
  }
}

/*=========================================
    CHECKOUT - PAYMENT METHODS
=========================================*/

.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box * {
  color: var(--white) !important;
}

.woocommerce-checkout #payment ul.payment_methods label {
  color: var(--white) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  color: var(--white) !important;
}

/*====================================================
    MY ACCOUNT - ADDRESS CARDS
====================================================*/

.woocommerce-Address {
  background: var(--dark);
  border: 1px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dark-hover);
  padding: 18px 22px;
  border-bottom: 1px solid var(--gold);
}

.woocommerce-Address-title h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  text-transform: none;
}

.woocommerce-Address-title .edit {
  color: var(--gold) !important;
  font-size: 15px !important;
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-Address-title .edit:hover {
  color: var(--white) !important;
}

.woocommerce-Address address {
  padding: 20px 22px;
  margin: 0;
  color: var(--white);
  font-style: normal;
  line-height: 1.7;
}

/*====================================================
    GANDUM FIXES - TEXT COLORS
====================================================*/

/* ---------- Product Tabs ---------- */

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--white) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gold) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
  color: var(--gold-hover) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: var(--gold) !important;
}

/* ---------- Product Description ---------- */

.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
.woocommerce-Tabs-panel strong,
.woocommerce-Tabs-panel span {
  color: var(--white) !important;
}

/* ---------- Additional Information Table ---------- */

.woocommerce table.shop_attributes {
  border-color: var(--gold) !important;
}

.woocommerce table.shop_attributes th {
  color: var(--gold) !important;
  background: var(--dark-hover) !important;
}

.woocommerce table.shop_attributes td {
  color: var(--white) !important;
}

/* ---------- Product Meta ---------- */

.product_meta,
.product_meta span,
.product_meta a,
.product_meta strong,
.product_meta sku_wrapper,
.product_meta posted_in,
.product_meta tagged_as {
  color: var(--white) !important;
}

.product_meta a:hover {
  color: var(--gold) !important;
}

/* ---------- Related Products ---------- */

.related.products h2 {
  color: var(--gold) !important;
}

/* ---------- Cart Totals ---------- */

.cart-subtotal th,
.cart-subtotal td,
.order-total th,
.order-total td,
.shipping th,
.shipping td,
.tax-rate th,
.tax-rate td {
  color: var(--white) !important;
}

.cart-subtotal strong,
.order-total strong {
  color: var(--white) !important;
}

.woocommerce-Price-amount {
  color: var(--gold) !important;
  font-weight: 600;
}

/* ---------- Checkout Totals ---------- */

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: var(--white) !important;
}

.woocommerce-checkout-review-order-table .product-name {
  color: var(--white) !important;
}

.woocommerce-checkout-review-order-table .product-total {
  color: var(--gold) !important;
}

/* ---------- Product Name ---------- */

.woocommerce td.product-name,
.woocommerce td.product-name a,
.woocommerce-cart td.product-name,
.woocommerce-cart td.product-name a {
  color: var(--white) !important;
}

/* ---------- Labels ---------- */

.woocommerce label,
.woocommerce legend {
  color: var(--white) !important;
}

/* ---------- Breadcrumb ---------- */

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--white) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--gold) !important;
}

/* ---------- Stock ---------- */

.stock {
  color: var(--gold) !important;
}

/* ---------- SKU & Categories ---------- */

.product_meta {
  border-top: 1px solid var(--gold);
  padding-top: 15px;
  margin-top: 20px;
}

/* ---------- Reviews ---------- */

.comment-form label,
.comment-text,
.comment-text p,
.commentlist li {
  color: var(--white) !important;
}

.star-rating {
  color: var(--gold) !important;
}

/* ---------- Pagination ---------- */

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--dark);
  color: var(--white);
  border-radius: 8px;
  margin: 3px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--dark-hover);
  color: var(--gold);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold);
  color: var(--dark);
}

/* ---------- Sale Badge ---------- */

.woocommerce span.onsale {
  background: var(--gold);
  color: var(--dark);
  border-radius: 30px;
}

/* ---------- Messages ---------- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  color: var(--white) !important;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: var(--gold) !important;
}

/* ---------- Empty Cart ---------- */

.cart-empty,
.return-to-shop {
  color: var(--white) !important;
}

/* ---------- Select2 ---------- */

.select2-container--default .select2-selection--single {
  background: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  color: var(--white) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--white) !important;
}

.select2-dropdown {
  background: var(--dark) !important;
  color: var(--white) !important;
}

/* ---------- Password Strength ---------- */

.woocommerce-password-strength {
  color: var(--white) !important;
}

/* ---------- Checkout: Order Notes Textarea Fix ---------- */
/* Astra/Elementor field styling was overriding the generic
   textarea rule with a white background, making the white
   text invisible. Target it directly with higher specificity. */

.woocommerce-additional-fields textarea,
.woocommerce-input-wrapper textarea,
.woocommerce form textarea#order_comments,
textarea#order_comments {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
}

.woocommerce-additional-fields textarea::placeholder,
textarea#order_comments::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/*====================================================
    ASTRA SINGLE PRODUCT BACKGROUND FIX
====================================================*/

.ast-article-single,
.ast-woocommerce-container,
.single-product .ast-container,
.single-product #primary,
.single-product #content,
.single-product .site-main,
.single-product .summary,
.single-product .woocommerce-product-gallery {
  background: var(--dark) !important;
}

/* ==========================================================================
   PRODUCT GRID CARD (glassmorphism) — shop/menu page cards
   Reuses --gold / --dark from the shared :root above; !important is kept
   throughout to survive Astra's own card styling.
   ========================================================================== */

/* ---------- Grid ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 32px;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Card shell (glass) ---------- */
.woocommerce ul.products li.product {
  background: var(--gc-glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: var(--gc-radius) !important;
  box-shadow: var(--gc-shadow) !important;
  overflow: hidden;
  text-align: left !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.woocommerce ul.products li.product:hover {
  background: var(--gc-glass-bg-hover) !important;
  transform: translateY(-7px);
  box-shadow: var(--gc-shadow-hover) !important;
}

/* ---------- Image ---------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  margin: 0 !important;
  overflow: hidden;
  position: relative;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.06);
}

/* thin divider between image and content */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gc-glass-border) !important;
}

/* Quick-add overlay icon */
.woocommerce
  ul.products
  li.product
  .astra-shop-thumbnail-wrap
  a.ast-select-options-trigger {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--gold) !important;
  color: var(--gc-btn-text) !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
  font-size: 0;
  z-index: 2;
}

.woocommerce
  ul.products
  li.product:hover
  .astra-shop-thumbnail-wrap
  a.ast-select-options-trigger {
  opacity: 1;
  transform: translateY(0);
}

/* Sale badge — product grid card (positioned over the thumbnail;
   distinct from the generic .woocommerce span.onsale rule above,
   which covers the single-product page badge) */
.woocommerce ul.products li.product .onsale {
  background: var(--gold) !important;
  color: var(--gc-btn-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  top: 12px;
  left: 12px;
  right: auto;
  min-height: unset;
  min-width: unset;
  line-height: normal;
  position: absolute;
  z-index: 2;
}

/* ---------- Content area ---------- */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  padding: 20px 22px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1;
  background: transparent !important;
}

/* Category badge — hidden per your call, kept here in case you want it back later */
.woocommerce ul.products li.product .ast-woo-product-category {
  display: none !important;
}

/* Title — forced off-white so theme's gold link color can't win */
.woocommerce ul.products li.product a.ast_loop_product_link {
  text-align: left !important;
  display: block !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  text-align: left !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--gc-title) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.28;
}

/* Short description */
.woocommerce ul.products li.product .gc-short-desc {
  order: 3 !important;
  color: var(--gc-text-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.55;
  margin: 0 0 16px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price bdi {
  color: var(--gold) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

.woocommerce ul.products li.product .price {
  order: 4 !important;
  margin: auto 0 16px 0 !important;
  display: block;
}

.woocommerce ul.products li.product .price del {
  color: var(--gc-text-muted) !important;
  opacity: 0.7;
  font-weight: 400 !important;
  margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* Add to cart button — solid gold pill, pops against the glass card */
.woocommerce ul.products li.product a.button.add_to_cart_button {
  order: 5 !important;
  display: inline-block !important;
  align-self: flex-start;
  background: var(--gold) !important;
  color: var(--gc-btn-text) !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 !important;
  box-shadow: 0 4px 14px rgba(217, 164, 65, 0.35) !important;
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

.woocommerce ul.products li.product a.button.add_to_cart_button:hover {
  background: var(--gc-btn-bg-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(217, 164, 65, 0.45) !important;
}

.woocommerce ul.products li.product a.button.add_to_cart_button.loading {
  opacity: 0.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding: 14px 14px 18px 14px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
  }
  .woocommerce ul.products li.product .gc-short-desc {
    font-size: 12px !important;
  }
  .woocommerce ul.products li.product .price {
    font-size: 16px !important;
  }
  .woocommerce ul.products li.product a.button.add_to_cart_button {
    padding: 10px 22px !important;
    font-size: 12px !important;
  }
}

span.ast-on-card-button.ast-onsale-card {
  background-color: var(--dark) !important;
  color: var(--gold) !important;
}

/* Hide quick add-to-cart on card — redirects to product page anyway due to min-guest rule */
.ast-on-card-button.ast-select-options-trigger,
.ast-on-card-button.add_to_cart_button {
  display: none !important;
}

/* Chef's Pick badge — same circle spot the cart icon used to occupy */
/* Chef star — icon only, no circle, no background */
.gc-chef-badge {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  color: #ffd700; /* prominent yellow */
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65); /* keeps it visible against any photo */
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Diet badge — spacing so image zoom doesn't overlap/clip it */

.gc-diet-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 4px 0 8px;
  position: relative;
  z-index: 5;
  margin: 12px 0 8px 16px;
}
/* Diet badges — semantic colors instead of brand palette */
.gc-diet-badge.gc-diet-veg {
  background-color: #8bc34a; /* leaf green */
  color: #1b3b0f; /* dark green text for contrast */
}
.gc-diet-badge.gc-diet-nonveg {
  background-color: #c0392b; /* meat red */
  color: #ffffff;
}
.product_meta .tagged_as {
  display: none !important;
}

/* On-page zoom trigger (magnifying glass circle) */
.woocommerce-product-gallery__trigger {
  background-color: var(--dark-green) !important;
  opacity: 1 !important;
}
.woocommerce-product-gallery__trigger::before {
  color: var(--gold) !important;
}

.gc-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gc-chef-badge--inline {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  width: auto;
  height: auto;

  background: transparent;
  box-shadow: none;

  color: #ffd700;
  font-size: 14px;
  font-weight: 600;
}

/*====================================================
    PHOTOSWIPE GALLERY – FIXED (top buttons + arrows)
====================================================*/

/* Darker backdrop so the controls stand out */
.pswp__bg {
  background: rgba(21, 61, 56, 0.94) !important;
}

/* Counter */
.pswp__counter {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* --------------------------------------------------
   TOP-BAR BUTTONS (zoom, fullscreen, close, share)
   Woo forces transparent bg + sprite – we override both
-------------------------------------------------- */
button.pswp__button {
  background-color: var(--dark) !important; /* solid circle */
  background-image: url(/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.png) !important;
  background-size: 264px 88px !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  opacity: 1 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55) !important;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease !important;
}

button.pswp__button:hover,
button.pswp__button:focus {
  background-color: var(--dark-hover) !important;
  opacity: 1 !important;
  transform: scale(1.1);
}

/* Correct sprite positions for each top button */
button.pswp__button--close {
  background-position: 0 -44px !important;
}
button.pswp__button--share {
  background-position: -44px -44px !important;
}
button.pswp__button--fs {
  background-position: -44px 0 !important;
}
.pswp--fs button.pswp__button--fs {
  background-position: -44px 0 !important;
}
button.pswp__button--zoom {
  background-position: -88px 0 !important;
}
.pswp--zoomed-in button.pswp__button--zoom {
  background-position: -132px 0 !important;
}

/*====================================================
    PHOTOSWIPE GALLERY – FINAL
====================================================*/

/* Backdrop */
.pswp__bg {
  background: rgba(21, 61, 56, 0.94) !important;
}

/* Counter */
.pswp__counter {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* --------------------------------------------------
   TOP-BAR BUTTONS (zoom, fullscreen, close)
   Dark circle + white icons – stay white on hover
-------------------------------------------------- */
button.pswp__button {
  background-color: var(--dark) !important;
  background-image: url(/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.png) !important;
  background-size: 264px 88px !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  opacity: 1 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55) !important;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease !important;
  filter: none !important; /* keep icons white */
}

button.pswp__button:hover,
button.pswp__button:focus {
  background-color: var(--dark-hover) !important;
  opacity: 1 !important;
  transform: scale(1.08);
  filter: none !important; /* no green / colour change */
}

/* Sprite positions */
button.pswp__button--close {
  background-position: 0 -44px !important;
}
button.pswp__button--share {
  background-position: -44px -44px !important;
}
button.pswp__button--fs {
  background-position: -44px 0 !important;
}
.pswp--fs button.pswp__button--fs {
  background-position: -44px 0 !important;
}
button.pswp__button--zoom {
  background-position: -88px 0 !important;
}
.pswp--zoomed-in button.pswp__button--zoom {
  background-position: -132px 0 !important;
}

/* --------------------------------------------------
   LEFT / RIGHT ARROWS – no background, only white arrows
-------------------------------------------------- */
button.pswp__button--arrow--left,
button.pswp__button--arrow--right {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 70px !important; /* original hit area */
  height: 100px !important;
  margin-top: -50px !important;
  opacity: 1 !important;
}

button.pswp__button--arrow--left:hover,
button.pswp__button--arrow--right:hover {
  background: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* White arrow icons only */
button.pswp__button--arrow--left::before,
button.pswp__button--arrow--right::before {
  background-image: url(/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.png) !important;
  background-size: 264px 88px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  width: 44px !important;
  height: 44px !important;
  opacity: 1 !important;
  filter: none !important;
}

button.pswp__button--arrow--left::before {
  background-position: -138px -44px !important;
}
button.pswp__button--arrow--right::before {
  background-position: -94px -44px !important;
}

/* Caption */
.pswp__caption {
  background: rgba(21, 61, 56, 0.88) !important;
  color: var(--gold) !important;
}
.pswp__caption__center {
  color: var(--gold) !important;
}

/* Checkout custom fields – match your theme */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
}

.woocommerce-checkout label,
.woocommerce-checkout .form-row label {
  color: var(--gold) !important;
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  color: var(--gold) !important;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 8px;
}
/*====================================================
    SELECT2 DROPDOWNS – dark theme fix (checkout)
====================================================*/

/* The main input box */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
  color: var(--white) !important;
  min-height: 42px !important;
}

/* Text inside the box */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  color: var(--white) !important;
  line-height: 40px !important;
  padding-left: 12px !important;
}

/* Placeholder text */
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* The little × clear button */
.select2-container--default
  .select2-selection--single
  .select2-selection__clear,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__clear {
  color: var(--gold) !important;
}

/* Selected tags (the blue/white pills you see) */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--dark-hover) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  margin-top: 6px !important;
}

/* × on the selected tags */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: var(--gold) !important;
  margin-right: 4px !important;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  color: var(--white) !important;
}

/* Dropdown list that opens */
.select2-dropdown {
  background-color: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
  color: var(--white) !important;
}

/* Options inside the dropdown */
.select2-container--default .select2-results__option {
  background-color: var(--dark) !important;
  color: var(--white) !important;
  padding: 10px 14px !important;
}

/* Highlighted / hovered option */
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--dark-hover) !important;
  color: var(--gold) !important;
}

/* Already selected option in the list */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--dark-hover) !important;
  color: var(--gold) !important;
}

/* Search box inside the dropdown (if multi-select has search) */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
}


/*====================================================
    SQUARE CREDIT CARD – fix typing / sandbox
====================================================*/

/* Do NOT force color on Square’s iframe containers */
.woocommerce-checkout #payment .payment_method_square_credit_card *,
.woocommerce-checkout #payment #wc-square-credit-card-container,
.woocommerce-checkout #payment #wc-square-credit-card-container *,
.woocommerce-checkout #payment .wc-square-credit-card-new-payment-method-form,
.woocommerce-checkout #payment .wc-square-credit-card-new-payment-method-form * {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make sure the Square form area is visible and clickable */
#wc-square-credit-card-container,
.wc-square-credit-card-new-payment-method-form {
  min-height: 60px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Optional – give a little breathing room so the form looks clean */
.payment_method_square_credit_card .payment_box {
  padding: 15px 0 !important;
}