/* ==========================================================================
   Green Foods Import — WooCommerce shop styles
   Restyles WooCommerce defaults to match the brand design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHOP ARCHIVE
   -------------------------------------------------------------------------- */

.woocommerce-products-header { margin: 2.4rem 0 1.6rem; }
.woocommerce-products-header__title { margin: 0 0 .8rem; font-size: clamp(2.4rem, 2.4vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; }
.term-description { max-width: 70rem; color: rgba(var(--color-foreground), .78); font-size: 1.5rem; }

.woocommerce-result-count,
.woocommerce-ordering { margin: 0 0 2rem; font-size: 1.4rem; }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: .1rem solid var(--color-border);
}
.shop-toolbar .woocommerce-result-count,
.shop-toolbar .woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { min-height: 4.2rem; padding: .8rem 1.2rem; font-size: 1.4rem; }

/* Category page banner */
.term-banner {
  position: relative;
  margin-bottom: 3.2rem;
  background: var(--color-cream);
  padding: 4rem 2rem;
  text-align: center;
}
.term-banner h1 { margin: 0; font-weight: 800; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   2. SINGLE PRODUCT
   -------------------------------------------------------------------------- */

/* The single product layout is built by content-single-product.php and
   styled in assets/css/product.css (.gfi-product__top / __bottom).
   Do NOT put a grid on div.product here: it would make the description
   block a grid column instead of a full-width row. */

.woocommerce-product-gallery { position: relative; }

/* WooCommerce floats the gallery and summary at 48% each. We lay the product
   page out with CSS grid instead, so the floats must go. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery {
  float: none;
  width: auto;
  margin: 0;
}

/* WooCommerce ships the gallery with an inline `opacity: 0` and relies on its
   slider script to fade it in. Verified on WooCommerce 11.2 that the inline
   value can survive (the slider starts, but the fade-in never runs), leaving
   the product photo invisible. This is the same override WooCommerce itself
   emits inside <noscript>, promoted to the stylesheet so the main product
   image can never disappear. */
.woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}

/* Flexslider hides every slide until its script marks one active. If that
   script is blocked or slow the product photo disappears completely, so the
   first slide is always shown as a fallback. */
.woocommerce-product-gallery .flexslider .slides > li:first-child,
.woocommerce-product-gallery .flexslider .slides > li.flex-active-slide { display: block; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image {
  background: var(--color-media-bg);
  margin-bottom: 1.2rem;
}
.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 2.2rem;
}
/*
 * Gallery thumbnails.
 *
 * These selectors deliberately repeat WooCommerce's own chain
 * (`.woocommerce div.product div.images ...`) instead of using a short
 * `.flex-control-thumbs` one. WooCommerce ships
 *   .woocommerce div.product div.images .flex-control-thumbs li { width:25%; float:left }
 * which outranks a short selector and squeezed every thumbnail into 25% of its
 * grid cell — the images rendered 25px wide inside 98px cells.
 */
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
  margin: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: .6rem;
  background: var(--color-media-bg);
  border: .1rem solid transparent;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--transition), border-color var(--transition);
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; }

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: rgb(var(--color-foreground));
  opacity: 1;
}

@media screen and (max-width: 749px) {
  .woocommerce div.product div.images .flex-control-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .8rem;
  }
}

.product_title {
  margin: 0 0 1.2rem;
  font-size: clamp(2.4rem, 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.single-product .price {
  display: block;
  margin: 0 0 1.6rem;
  font-size: 2.6rem;
  font-weight: 750;
  color: rgb(var(--color-foreground));
}
.single-product .price del { color: rgba(var(--color-foreground), .55); font-size: 1.8rem; font-weight: 500; margin-right: .8rem; }
.single-product .price ins { color: var(--color-sale); text-decoration: none; }

.woocommerce-product-details__short-description {
  margin: 0 0 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: .1rem solid var(--color-border);
  font-size: 1.6rem;
  color: rgba(var(--color-foreground), .82);
}

.single-product .product_meta {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: .1rem solid var(--color-border);
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), .7);
}
.single-product .product_meta a { color: inherit; }

/* Quantity + add to cart */
form.cart { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; margin: 0 0 2rem; }
form.cart .quantity { display: flex; }
form.cart .qty {
  width: 9rem;
  min-height: 5rem;
  padding: 1rem;
  border: .1rem solid #cfcfcf;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
}
form.cart .single_add_to_cart_button {
  flex: 1 1 20rem;
  min-height: 5rem;
  padding: 1.2rem 3rem;
  border: 0;
  background: var(--color-green);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .04rem;
}
form.cart .single_add_to_cart_button:hover { background: var(--color-green-dark); color: #fff; }
form.cart .single_add_to_cart_button.disabled { background: #999; }

/* Variations */
.variations { width: 100%; margin-bottom: 2rem; border: 0; }
.variations th,
.variations td { border: 0; padding: 0 0 1.2rem; vertical-align: middle; }
.variations .label label { margin: 0; font-size: 1.4rem; font-weight: 700; }
.variations select { min-height: 4.6rem; }
.woocommerce-variation-price { margin-bottom: 1.6rem; font-size: 2rem; font-weight: 750; }
.reset_variations { font-size: 1.3rem; }

/* Tabs */
.woocommerce-tabs { margin: 5.6rem 0; }
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin: 0 0 2.4rem;
  padding: 0 0 1.2rem;
  border-bottom: .1rem solid var(--color-border);
  list-style: none;
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .4rem 0;
  color: rgba(var(--color-foreground), .6);
  font-size: 1.55rem;
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: rgb(var(--color-foreground)); box-shadow: inset 0 -.2rem 0 var(--color-green); }
.woocommerce-Tabs-panel { max-width: 88rem; font-size: 1.5rem; }
.woocommerce-Tabs-panel h2 { font-size: 2rem; font-weight: 800; }
.woocommerce-Tabs-panel table { font-size: 1.4rem; }
.shop_attributes th { width: 32%; }

/* Related / upsells */
.related.products,
.upsells.products { margin: 5.6rem 0; }
.related.products > h2,
.upsells.products > h2 { margin-bottom: 2.4rem; font-size: clamp(2.2rem, 2vw, 3rem); font-weight: 800; letter-spacing: -.02em; }

/* Reviews */
#reviews .commentlist { margin: 0; padding: 0; list-style: none; }
#reviews .comment_container { display: flex; gap: 1.6rem; padding: 1.6rem 0; border-bottom: .1rem solid var(--color-border); }
#reviews .comment_container img.avatar { width: 4.8rem; height: 4.8rem; border-radius: 50%; }
#reviews .comment-text { flex: 1; }
#reviews .star-rating { color: rgb(var(--color-star)); }

.star-rating { color: rgb(var(--color-star)); font-size: 1.6rem; }
.woocommerce-product-rating { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; font-size: 1.4rem; }

/* --------------------------------------------------------------------------
   3. CART & CHECKOUT
   -------------------------------------------------------------------------- */

.woocommerce-cart-form { margin-bottom: 3.2rem; }
.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.shop_table th {
  padding: 1.2rem 1rem;
  border: 0;
  border-bottom: .2rem solid rgb(var(--color-foreground));
  background: transparent;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .06rem;
  text-transform: uppercase;
}
.shop_table td {
  padding: 1.6rem 1rem;
  border: 0;
  border-bottom: .1rem solid var(--color-border);
  vertical-align: middle;
}
.shop_table .product-thumbnail img { width: 7rem; height: auto; background: var(--color-media-bg); padding: .4rem; }
.shop_table .product-name a { font-weight: 700; }

.cart_item .quantity .qty { width: 7rem; min-height: 4rem; padding: .6rem; text-align: center; }

.actions .coupon { display: flex; gap: .8rem; flex-wrap: wrap; }
.actions .coupon input[type="text"] { max-width: 22rem; }
.actions .button { min-height: 4.4rem; }

.cart-collaterals { display: grid; grid-template-columns: 1fr minmax(32rem, 40rem); gap: 4rem; }
.cart_totals { width: 100%; }
.cart_totals h2 { font-size: 2rem; font-weight: 800; }
.cart_totals .shop_table th { text-transform: none; letter-spacing: 0; border-bottom: .1rem solid var(--color-border); }
.cart_totals .order-total td,
.cart_totals .order-total th { font-size: 1.9rem; font-weight: 800; }
.wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: 5rem;
  border: 0;
  background: var(--color-green);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--color-green-dark); color: #fff; }

@media screen and (max-width: 749px) {
  .cart-collaterals { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; }
#customer_details { margin-bottom: 3.2rem; }
#order_review_heading { margin-top: 1.6rem; }
.woocommerce-checkout-review-order { margin-top: 1.6rem; }
#payment { background: transparent; }
#payment ul.payment_methods { padding: 0; border: 0; list-style: none; }
#payment ul.payment_methods li { margin-bottom: .8rem; }
#payment div.form-row { padding: 0; }
#place_order {
  width: 100%;
  min-height: 5.2rem;
  border: 0;
  background: var(--color-green);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
}
#place_order:hover { background: var(--color-green-dark); }

@media screen and (max-width: 749px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. NOTICES / MY ACCOUNT / PAGINATION
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 2rem;
  padding: 1.4rem 1.6rem;
  border: 0;
  border-left: .4rem solid var(--color-green);
  background: var(--color-cream);
  color: rgb(var(--color-foreground));
  font-size: 1.5rem;
  list-style: none;
}
.woocommerce-error { border-left-color: var(--color-sale); }
.woocommerce-info { border-left-color: rgb(var(--color-foreground)); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; min-height: 3.8rem; padding: .6rem 1.6rem; font-size: 1.35rem; }

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 3.2rem 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 .8rem;
  border: .1rem solid var(--color-border);
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: rgb(var(--color-foreground)); color: #fff; }

.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 2.4rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .8rem 1.4rem; background: var(--color-cream); font-size: 1.4rem; font-weight: 600; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: rgb(var(--color-foreground)); color: #fff; }

/* Empty states */
.cart-empty,
.woocommerce-info.empty-cart { text-align: center; }
.return-to-shop { text-align: center; margin: 2rem 0 4rem; }

/* Onsale / stock badges in WooCommerce loops */
.woocommerce span.onsale {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  min-width: 5.8rem;
  min-height: 0;
  padding: .8rem 1rem;
  border-radius: 0;
  background: var(--color-sale);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.stock.out-of-stock { display: inline-block; padding: .6rem 1.2rem; background: #eee; font-size: 1.3rem; font-weight: 700; }

/* ==========================================================================
   5. OVERRIDING WOOCOMMERCE'S OWN DEFAULTS
   WooCommerce ships `.woocommerce button.button.alt` style rules that outrank
   plain class selectors. The rules below match or beat that specificity so the
   brand palette wins everywhere.
   ========================================================================== */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border-radius: var(--radius-button);
  font-weight: 700;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #2b2b2b;
  color: #fff;
}

/* Add to cart: the primary green action */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.alt {
  background-color: var(--color-green);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 800;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.alt:hover {
  background-color: var(--color-green-dark);
  color: #fff;
}

/* Loop "BUY NOW" inside the product card */
.woocommerce ul.products li.product .product-card__quick-add .button,
.woocommerce ul.products li.product .product-card__quick-add .button.alt,
.woocommerce ul.products li.product .product-card__quick-add button {
  background-color: var(--color-green);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 800;
}

.woocommerce ul.products li.product .product-card__quick-add .button:hover,
.woocommerce ul.products li.product .product-card__quick-add button:hover {
  background-color: var(--color-green-dark);
  color: #fff;
}

/* Checkout / proceed buttons stay green */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt {
  background-color: var(--color-green);
  color: #fff;
}
.woocommerce #payment #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-green-dark);
}

/* Strip WooCommerce's boxed card chrome inside our own product card */
.woocommerce ul.products li.product .product-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { display: none; }

/* WooCommerce adds its own star/price markup we replace — hide leftovers */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .price { display: none; }

/* Onsale badge inside our card is rendered by the theme, not WooCommerce. */
.woocommerce ul.products li.product span.onsale { display: none; }

/* Notices keep the brand accent */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* --------------------------------------------------------------------------
   THE SHOP LOOP GRID
   WooCommerce ships `ul.products li.product { float: left; width: 22.05% }`.
   Those rules outrank a bare `.product-grid` class, which collapsed the
   archive into narrow slivers. These overrides restore the 4-up grid used
   everywhere else on the site.
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 3.2rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  clear: none;
  overflow: visible;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none; content: none; }

/* WooCommerce also ships per-column rules such as
   `.woocommerce ul.products.columns-4 li.product { width: 22.05% }`.
   Those outrank a plain class selector, so the layout properties are forced
   here — this is our grid, not WooCommerce's float grid. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products.product-grid > li {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  position: relative;
}

/* WooCommerce adds a clearing <li> style rule for "first"/"last" items. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none !important; }

/* WooCommerce wraps the loop in its own container; keep it inside page width. */
.woocommerce .woocommerce-products-header,
.woocommerce .term-description { max-width: 80rem; }

@media screen and (max-width: 989px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.2rem;
    row-gap: 2.4rem;
  }
}