/* ==========================================================================
   03 — WOOCOMMERCE
   Maps WooCommerce's own markup onto the component language in layer 02.
   Loaded only when WooCommerce is active (see functions.php).
   Depends on: 00-tokens.css, 01-base.css, 02-components.css
   ========================================================================== */

/* --- Product loop grid ---------------------------------------------------- */
/* WooCommerce core still floats loop items and sets percentage widths. Those
   have to be unset before CSS Grid can take over — hence the explicit
   float/width/margin resets rather than just declaring display:grid. */

.woocommerce ul.products,
ul.products {
  display: grid;
  gap: var(--mo-gutter-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Woo's float-clearing pseudo-elements become phantom grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  clear: none;
  position: relative;
  text-align: left;
}

/* --- Storefront column-width override ------------------------------------- */
/*
 * Storefront sizes loop items with percentage widths at (0,4,2) specificity:
 *   .site-main ul.products.columns-4 li.product { width: 22.05% }
 * Our generic reset is (0,3,2), so it loses on specificity no matter what order
 * the files load in. Inside a grid container that percentage resolves against
 * the TRACK, not the row — 22.05% of a 182px track is a 40px card, which looks
 * like broken thumbnails and titles wrapping one letter per line.
 *
 * [class*="columns-"] counts as a class, bringing these to (0,4,2) and (0,5,2)
 * — matching Storefront's two variants exactly. Equal specificity, and ours
 * loads later (see the dependency chain in functions.php), so ours wins.
 * Matching the attribute rather than each columns-N keeps this robust if the
 * shortcode is called with a different column count.
 */
@media (min-width: 768px) {
  .site-main ul.products li.product,
  .site-main ul.products[class*="columns-"] li.product,
  .page-template-template-fullwidth-php .site-main ul.products li.product,
  .page-template-template-fullwidth-php .site-main ul.products[class*="columns-"] li.product {
    width: auto;
    float: none;
    margin: 0;
  }
}

@media (min-width: 750px) {
  .woocommerce ul.products,
  ul.products { gap: var(--mo-gutter); }

  .woocommerce ul.products.columns-3,
  ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 990px) {
  .woocommerce ul.products.columns-4,
  ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .woocommerce ul.products.columns-5,
  ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Loop card ------------------------------------------------------------ */

/* .mo-card__media is injected around the sale flash + thumbnail by the hooks in
   functions.php. It is the positioning context for the discount badge and the
   clipping box for the hover zoom — Woo's own markup provides neither. */

.woocommerce ul.products li.product .mo-card__media,
ul.products li.product .mo-card__media {
  position: relative;
  overflow: hidden;
  margin: 0 0 .625rem;
  border: var(--mo-border-w) solid var(--mo-border);
  border-radius: var(--mo-radius);
  /* Dark container: the reference's product shots sit on deep green, and this
     keeps transparent PNGs and slow-loading images on-palette. */
  background: var(--mo-green-950);
  aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product .mo-card__media img,
ul.products li.product .mo-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform var(--mo-dur-l) var(--mo-ease);
}

.woocommerce ul.products li.product:hover .mo-card__media img,
ul.products li.product:hover .mo-card__media img { transform: scale(1.04); }

/* Fallback for any loop that renders before the hooks apply (third-party
   widgets, some page builders) — keeps the image square rather than raw. */
.woocommerce ul.products li.product > a img:not(.mo-card__media img),
ul.products li.product > a img:not(.mo-card__media img) {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 .625rem;
  border-radius: var(--mo-radius);
  background: var(--mo-green-950);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 .25em;
  font-family: var(--mo-font-heading);
  font-size: var(--mo-fs-h3);
  font-weight: var(--mo-fw-heading);
  line-height: 1.27;
  letter-spacing: var(--mo-ls-heading);
  color: var(--mo-heading);
}

/* Category tiles from [product_categories] get the trailing arrow. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title::after,
ul.products li.product-category .woocommerce-loop-category__title::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--mo-dur) var(--mo-ease);
}

.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title::after,
ul.products li.product-category:hover .woocommerce-loop-category__title::after {
  transform: translateX(4px);
}

/* Woo prints the product count in a <mark>; the reference has no such thing. */
.woocommerce ul.products li.product-category mark {
  background: none;
  color: var(--mo-text);
  font-size: var(--mo-fs-small);
}

/* --- Price ---------------------------------------------------------------- */
/* Woo renders sale prices as <del>old</del> <ins>new</ins>. */

.woocommerce ul.products li.product .price,
ul.products li.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  color: var(--mo-heading);
  font-size: var(--mo-fs-small);
  font-weight: 400;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
  opacity: 1;
  color: var(--mo-ink-muted);
  text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
  background: none;
  color: var(--mo-heading);
  text-decoration: none;
  font-weight: 500;
}

/* "From Rs ..." range prefix. */
.woocommerce ul.products li.product .price .from {
  color: var(--mo-ink-muted);
  font-size: .8125rem;
}

/* --- Sale badge ----------------------------------------------------------- */

/* Bottom-left, sitting on the photo — hence the .mo-card__media wrapper.
   The !important on `top` is load-bearing: Woo core ships `top:0` at a higher
   specificity than this rule on several themes, and without it the badge
   silently jumps back to the corner. */
.woocommerce span.onsale,
span.onsale {
  position: absolute;
  top: auto !important;
  bottom: .625rem;
  left: .625rem;
  right: auto;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: .1875rem .5rem;
  margin: 0;
  border-radius: var(--mo-radius);
  background: var(--mo-sale);
  color: var(--mo-white);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- Buttons -------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .625rem 1.875rem;
  border: var(--mo-border-w) solid var(--mo-btn-bg);
  border-radius: var(--mo-radius);
  background: var(--mo-btn-bg);
  color: var(--mo-btn-text);
  font-family: var(--mo-font-body);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .0667em;
  text-transform: none;
  transition: background-color var(--mo-dur) var(--mo-ease),
              border-color var(--mo-dur) var(--mo-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--mo-btn-bg-hover);
  border-color: var(--mo-btn-bg-hover);
  color: var(--mo-btn-text);
}

/* Loop "Add to cart" sits below the price with a little air. */
.woocommerce ul.products li.product .button,
ul.products li.product .button { margin-top: .75rem; }

/* After an AJAX add, WooCommerce injects
   <a class="added_to_cart wc-forward">View cart</a> straight after the button.
   Nothing here styled it, so it inherited Storefront's solid-button look and
   sat BESIDE "Add to cart" — two buttons on one line, overflowing the card.

   Demote it to a quiet link on its own row. The affordance is worth keeping
   (people do want to jump to the cart after adding), but it should not compete
   with the primary action, and the header cart count already confirms the add.
   Reset the inherited button box explicitly: Storefront sets background,
   border, padding and min-height, and any one left behind reintroduces the
   button shape. */
.woocommerce ul.products li.product a.added_to_cart,
ul.products li.product a.added_to_cart {
  display: block;
  width: 100%;
  min-height: 0;
  margin-top: .5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mo-link);
  font-family: var(--mo-font-body);
  font-size: var(--mo-fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: left;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce ul.products li.product a.added_to_cart:hover,
ul.products li.product a.added_to_cart:hover {
  background: none;
  color: var(--mo-green-700);
}

/* --- Notices -------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--mo-green-700);
  border-radius: var(--mo-radius);
  background: var(--mo-bg-alt);
  color: var(--mo-heading);
}

.woocommerce-error { border-top-color: #B3261E; }

.woocommerce-message::before,
.woocommerce-info::before { color: var(--mo-green-700); }

/* --- Cart / checkout (classic shortcode pages) ---------------------------- */
/* DELIBERATELY MINIMAL. Structural CSS on checkout is how stores break —
   Woo and payment gateways inject markup here at runtime. Restyle only
   colour and radius; leave layout, widths and display modes alone. */

.woocommerce table.shop_table {
  border-radius: var(--mo-radius);
  border-color: var(--mo-border);
}

.woocommerce table.shop_table th { color: var(--mo-heading); font-weight: 500; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border: var(--mo-border-w) solid rgba(37, 37, 37, .55);
  border-radius: var(--mo-radius);
  font-family: var(--mo-font-body);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--mo-green-700);
  outline-offset: 1px;
}

/* --- Cart / Checkout BLOCKS ----------------------------------------------- */
/* Modern Woo ships Cart and Checkout as blocks with a wholly different DOM
   from the [woocommerce_cart] shortcode. These target the block markup; the
   rules above cover the classic pages. Confirm which your store actually
   uses before tuning further. */

.wc-block-components-button:not(.is-link) {
  border-radius: var(--mo-radius);
  background: var(--mo-btn-bg);
  color: var(--mo-btn-text);
  font-family: var(--mo-font-body);
  font-weight: 500;
}

.wc-block-components-button:not(.is-link):hover {
  background: var(--mo-btn-bg-hover);
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
  border-radius: var(--mo-radius);
  font-family: var(--mo-font-body);
}

.wc-block-components-title {
  font-family: var(--mo-font-heading);
  font-weight: var(--mo-fw-heading);
}

/* ==========================================================================
   LOOP IMAGE FIT
   Product photography is a mix of square soap shots (1254x1254) and portrait
   bottle shots (1024x1536). `cover` inside a square card crops the portrait
   ones top and bottom, which decapitated every pump handle.

   `contain` shows the whole product in every case. Square sources still fill
   the card edge to edge, so only the portrait bottles letterbox — and the
   loop now requests the uncropped `woocommerce_single` size (see
   mom_organic_loop_thumbnail_size in functions.php) so there is a full image
   to contain in the first place.
   ========================================================================== */

.woocommerce ul.products li.product .mo-card__media,
ul.products li.product .mo-card__media {
  /* Soft neutral so the letterboxed margin around a tall bottle reads as
     studio space rather than a black bar. */
  background: #F3F4F1;
}

.woocommerce ul.products li.product .mo-card__media img,
ul.products li.product .mo-card__media img {
  object-fit: contain;
  padding: 6px;
}

/* ==========================================================================
   BLURRED BACKDROP FOR LETTERBOXED IMAGES
   A flat grey band either side of a portrait bottle reads as a mistake. A
   defocused copy of the same photograph reads as depth of field, and the seam
   between image and card disappears.

   --mo-card-backdrop is set inline per card in functions.php, using the 150px
   thumbnail — it is blurred past recognition, so a larger file would be pure
   waste on a mobile connection.
   ========================================================================== */

.woocommerce ul.products li.product .mo-card__media,
ul.products li.product .mo-card__media {
  /* Now only visible for a product with no image at all. */
  background: #F3F4F1;
}

.mo-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--mo-card-backdrop);
  background-size: cover;
  background-position: center;
  /* scale() pushes the blur radius beyond the edges so no soft border shows. */
  filter: blur(22px) saturate(1.15);
  transform: scale(1.25);
}

/* Square sources cover the card completely, so the backdrop never shows for
   them — this only does work for the portrait bottle shots. */
.woocommerce ul.products li.product .mo-card__media img,
ul.products li.product .mo-card__media img {
  position: relative;
  z-index: 1;
  padding: 0;
}