/* ==========================================================================
   ECOSENSE — LIGHT PREMIUM COMMERCE SYSTEM
   --------------------------------------------------------------------------
   Presentation layer for the native WooCommerce commerce experience: product
   page, cart, checkout, My Account and auth.

   This file is loaded AFTER style.css and changes appearance only. Every
   commerce mechanism — the attribute_colour variation state, the quantity
   field, Add to cart, Buy now, the Woo cart/checkout/order path — is untouched
   and still lives in single-product.php, functions.php and main.js.

   Palette and type are deliberately identical to the approved Next.js
   marketing tokens in app/globals.css, so the two halves of the future
   unified site are one design system rather than two.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- surfaces ---- */
  --eco-bg:            #fbf9f4;   /* PAGE BACKGROUND — warm white */
  --eco-surface:       #ffffff;   /* CARD */
  --eco-surface-alt:   #f2efe7;   /* SECONDARY BACKGROUND — cream */
  --eco-surface-tint:  #e9efe4;   /* pale green wash, used sparingly */
  --eco-stage:         #f4f1ea;   /* product media stage */

  /* ---- text ---- */
  --eco-text:          #10241a;   /* HEADING — deep EcoSense green */
  --eco-text-2:        #43574b;   /* BODY */
  --eco-text-muted:    #6c7d72;   /* MUTED */
  --eco-text-inverse:  #fbf9f4;

  /* ---- lines ---- */
  --eco-border:        rgba(16, 36, 26, 0.12);
  --eco-border-subtle: rgba(16, 36, 26, 0.07);
  --eco-border-strong: rgba(16, 36, 26, 0.22);

  /* ---- brand ---- */
  --eco-green:         #4fb94d;   /* brand green — action */
  --eco-green-hover:   #45a843;
  --eco-green-dark:    #17583a;   /* deep green — primary button, headings */
  --eco-green-deeper:  #10402a;
  --eco-green-dim:     rgba(79, 185, 77, 0.12);
  --eco-gold:          #e8b84b;   /* fill only */
  --eco-gold-text:     #8a6410;   /* gold as text on light */
  --eco-gold-dim:      rgba(232, 184, 75, 0.16);

  /* ---- states ---- */
  --eco-error:         #b4322a;
  --eco-error-bg:      rgba(180, 50, 42, 0.07);
  --eco-success:       #1f6b3f;
  --eco-success-bg:    rgba(31, 107, 63, 0.08);
  --eco-warning:       #8a6410;
  --eco-warning-bg:    rgba(232, 184, 75, 0.14);

  /* ---- radius ---- */
  --eco-radius-sm:  8px;
  --eco-radius-md:  12px;
  --eco-radius-lg:  18px;
  --eco-radius-xl:  24px;
  --eco-radius-pill: 999px;

  /* ---- shadow ---- */
  --eco-shadow-soft:  0 1px 2px rgba(16, 36, 26, 0.04);
  --eco-shadow-card:  0 1px 2px rgba(16, 36, 26, 0.04), 0 10px 30px rgba(16, 36, 26, 0.06);
  --eco-shadow-float: 0 2px 6px rgba(16, 36, 26, 0.06), 0 18px 44px rgba(16, 36, 26, 0.10);

  /* ---- space ---- */
  --eco-space-xs:  4px;
  --eco-space-sm:  8px;
  --eco-space-md:  16px;
  --eco-space-lg:  24px;
  --eco-space-xl:  40px;
  --eco-space-2xl: 72px;

  /* ---- type ---- */
  --eco-font-head: 'Inter', system-ui, -apple-system, sans-serif;
  --eco-font-body: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- control geometry, shared by every form control ---- */
  --eco-control-h:      48px;
  --eco-control-pad-x:  14px;
  --eco-tap:            44px;

  /* ---- re-point the v2.6 variables so untouched rules inherit the system --- */
  --cream:    #fbf9f4;
  --card:     #ffffff;
  --forest:   #17583a;
  --forest-d: #10402a;
  --leaf:     #2f8f4e;
  --sage:     #9cae90;
  --sage-soft:#e9efe4;
  --ink:      #10241a;
  --mute:     #6c7d72;
  --line:     rgba(16, 36, 26, 0.12);
  --red:      #b4322a;
  --gold:     #8a6410;
  --disp:     'Inter', system-ui, sans-serif;
  --body:     'Manrope', 'Inter', system-ui, sans-serif;
  --wrap:     1240px;
  --radius:   18px;
}

/* --------------------------------------------------------------------------
   2. FOUNDATION
   -------------------------------------------------------------------------- */
body {
  background: var(--eco-bg);
  color: var(--eco-text-2);
  font-family: var(--eco-font-body);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -0.002em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--eco-font-head);
  color: var(--eco-text);
  letter-spacing: -0.021em;
  line-height: 1.14;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
h4, h5 { font-weight: 600; }

.wrap { max-width: var(--wrap); padding-left: var(--eco-space-lg); padding-right: var(--eco-space-lg); }

/* Focus is a promise, not decoration. Never remove it. */
:focus-visible {
  outline: 2px solid var(--eco-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Section rhythm: three density tiers, nothing arbitrary. */
.sec { padding: var(--eco-space-2xl) 0; }
.sec.alt {
  background: var(--eco-surface-alt);
  border-top: 1px solid var(--eco-border-subtle);
  border-bottom: 1px solid var(--eco-border-subtle);
}
.h2c { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: var(--eco-space-md); }
.sub { color: var(--eco-text-muted); font-size: 16px; max-width: 54ch; margin-bottom: var(--eco-space-xl); }

.eyebrow, .badge-c {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-green-dark);
}
.badge-c {
  background: var(--eco-surface-tint);
  border-radius: var(--eco-radius-pill);
  padding: 6px 15px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.site-nav {
  background: rgba(251, 249, 244, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--eco-border-subtle);
}
.nav-in { height: 68px; gap: var(--eco-space-lg); }
.brand {
  font-family: var(--eco-font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--eco-text);
}
.brand b { color: var(--eco-green-dark); font-weight: 800; }
.nav-menu { gap: 30px; }
.nav-menu a {
  font-family: var(--eco-font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--eco-text-2);
  padding: 6px 0;
  position: relative;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--eco-green-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nav-menu a:hover { color: var(--eco-text); }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-right { gap: var(--eco-space-sm); }
.nav-account, .nav-cart {
  width: var(--eco-tap);
  height: var(--eco-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eco-radius-md);
  color: var(--eco-text);
  transition: background 0.16s ease;
}
.nav-account:hover, .nav-cart:hover { background: var(--eco-surface-alt); }
.nav-cart .count {
  top: 4px; right: 3px;
  background: var(--eco-green-dark);
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 10px;
  min-width: 17px; height: 17px;
  border: 2px solid var(--eco-bg);
  border-radius: var(--eco-radius-pill);
}
.nav-toggle {
  width: var(--eco-tap); height: var(--eco-tap);
  align-items: center; justify-content: center;
  border-radius: var(--eco-radius-md);
}

/* --------------------------------------------------------------------------
   4. PDP — TITLE BLOCK
   -------------------------------------------------------------------------- */
.hero { padding: var(--eco-space-xl) 0 var(--eco-space-2xl); }
@media (min-width: 980px) {
  /* The purchase card is naturally much shorter than the media column, and it
     always will be: the delivery, dispatch, returns and warranty rows are empty
     Customizer figures and nothing may be invented to fill them. So the columns
     are NOT equalised. Instead the purchase side is narrowed until it reads as a
     deliberate compact decision panel rather than a wide box that ran out of
     content, and the width it gives up goes to the product, which is the hero. */
  .hero-grid { grid-template-columns: minmax(0, 1.34fr) minmax(330px, 0.66fr); gap: 64px; align-items: stretch; }
  /* The card DECLARED position:sticky but never actually stuck: align-items
     start shrink-wrapped its grid area to the card's own height, leaving the
     sticky element no room to travel, so the price and both CTAs scrolled away
     and never came back. The area now spans the full row while the card keeps
     its natural height inside it — sticky works, and the height is NOT forced
     to match the media column. */
  .hero-grid > aside.buy { align-self: stretch; height: fit-content; }
}
.store-eyebrow {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-green-dark);
  margin-bottom: var(--eco-space-md);
}
.hero h1 {
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--eco-text);
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-bottom: var(--eco-space-md);
  max-width: 19ch;
}
.rating { gap: var(--eco-space-md); margin-bottom: var(--eco-space-lg); }
.newtag {
  background: var(--eco-surface-tint);
  color: var(--eco-green-dark);
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--eco-radius-pill);
}
.rating a { color: var(--eco-text-muted); font-size: 14px; }
.rating a:hover { color: var(--eco-text); }

/* --------------------------------------------------------------------------
   5. PDP — MEDIA STAGE
   The product is the hero object: a calm neutral stage, generous padding and
   contain-fit so no foot, lid or control panel is ever cropped away.
   -------------------------------------------------------------------------- */
.gallery { margin-bottom: var(--eco-space-xl); }
.gallery-main { gap: var(--eco-space-md); border-radius: var(--eco-radius-xl); }
/* The product renders are opaque 1254x1254 squares with their own cream studio
   backdrop already baked in. So the stage takes NO padding: contain lets the
   asset fill the square edge to edge instead of drawing a second, smaller box
   inside the first. The stage colour is matched to the asset backdrop so the
   rounded corners blend rather than showing a seam. */
.gallery-main figure {
  background: #f6efe7;
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* never crop the feet or lid, never stretch */
  object-position: center;
  border-radius: 0;
}
.gbadge {
  background: var(--eco-surface);
  color: var(--eco-text);
  border: 1px solid var(--eco-border);
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11px;
  box-shadow: var(--eco-shadow-soft);
}

.thumbs { gap: var(--eco-space-sm); margin-top: var(--eco-space-md); padding: 2px; }
.thumbs button {
  flex: 0 0 74px;
  height: 74px;
  border-radius: var(--eco-radius-md);
  border: 1px solid var(--eco-border);
  background: #f6efe7;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.thumbs button img { object-fit: contain; }
.thumbs button:hover { border-color: var(--eco-border-strong); }
.thumbs button.active {
  border-color: var(--eco-green-dark);
  box-shadow: 0 0 0 1px var(--eco-green-dark);
}
.thumbs button:focus-visible {
  outline: 2px solid var(--eco-green-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. PDP — PITCH AND FEATURES
   -------------------------------------------------------------------------- */
.pitch {
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 21px;
  color: var(--eco-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--eco-space-sm);
}
.lede { color: var(--eco-text-2); font-size: 15.5px; line-height: 1.68; max-width: 56ch; margin-bottom: var(--eco-space-md); }

.usps {
  gap: var(--eco-space-md);
  margin: var(--eco-space-lg) 0;
  padding: var(--eco-space-lg);
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-lg);
}
.usp { font-size: 14.5px; color: var(--eco-text-2); font-weight: 500; }
.usp .ic { color: var(--eco-green-dark); width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   7. PDP — COLOUR SWATCHES
   Selection is never signalled by colour alone: the label changes, the ring
   appears and the selected swatch carries a tick.
   -------------------------------------------------------------------------- */
.swatch-row {
  gap: var(--eco-space-md);
  padding: var(--eco-space-md) 0;
  flex-wrap: wrap;
}
.swatch-row .lbl {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-text-muted);
}
.swatch-row .cur {
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--eco-text);
  margin-right: var(--eco-space-xs);
}
.sw {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--eco-border-strong);
  box-shadow: inset 0 1px 2px rgba(16, 36, 26, 0.14);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.sw:hover { transform: translateY(-1px); }
.sw.active {
  outline: none;
  box-shadow: 0 0 0 2px var(--eco-bg), 0 0 0 4px var(--eco-green-dark);
}
/* tick, so selection is not colour-only */
.sw.active::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 6px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: translate(-50%, -68%) rotate(-45deg);
}
.sw[data-colour="white"].active::after { color: var(--eco-green-dark); }
.sw[data-colour="black"].active::after { color: #ffffff; }
.sw:focus-visible {
  outline: 2px solid var(--eco-green-dark);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. PDP — PURCHASE CARD
   -------------------------------------------------------------------------- */
.buy {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-lg) var(--eco-space-lg) var(--eco-space-md);
  box-shadow: var(--eco-shadow-card);
}
/* one coherent decision cluster: price, availability, quantity, both CTAs and
   the reassurance line, with no separator doing nothing */
.buy .rowline:first-of-type { border-top: none; padding-top: 0; }
.buy .stockline { padding: var(--eco-space-sm) 0 var(--eco-space-md); }
.buy .qty-row { padding-top: var(--eco-space-md); padding-bottom: var(--eco-space-md); }
.buy .secure { margin: var(--eco-space-sm) 0 var(--eco-space-md); padding-top: var(--eco-space-md); }
@media (min-width: 980px) { .buy { position: sticky; top: 92px; } }

.price-line { text-align: left; margin-bottom: var(--eco-space-md); }
.price-line .price,
.price-line .amount,
.price-line .woocommerce-Price-amount {
  font-family: var(--eco-font-head);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.03em;
  color: var(--eco-text);
}
.price-was { text-align: left; }

.rowline {
  border-top: 1px solid var(--eco-border-subtle);
  padding: var(--eco-space-md) 0;
  font-size: 14px;
  color: var(--eco-text-2);
}
.rowline .ic { color: var(--eco-green-dark); }

.stockline {
  text-align: left;
  border-top: 1px solid var(--eco-border-subtle);
  padding: var(--eco-space-md) 0;
  font-family: var(--eco-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--eco-success);
  display: flex;
  align-items: center;
  gap: var(--eco-space-sm);
}
.stockline::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--eco-green);
  flex: none;
}

/* ---- quantity ---- */
.qty-row {
  justify-content: space-between;
  padding: var(--eco-space-sm) 0 var(--eco-space-lg);
  border-top: 1px solid var(--eco-border-subtle);
  padding-top: var(--eco-space-md);
}
.qty-row .lbl {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-text-muted);
}
.stepper {
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  overflow: hidden;
}
.stepper button {
  width: var(--eco-tap);
  height: var(--eco-tap);
  background: var(--eco-surface);
  color: var(--eco-green-dark);
  font-size: 19px;
  line-height: 1;
  transition: background 0.14s ease;
}
.stepper button:hover { background: var(--eco-surface-alt); }
.stepper button:focus-visible { outline-offset: -2px; }
.stepper input {
  width: 56px;                       /* two digits without a layout jump */
  height: var(--eco-tap);
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--eco-text);
  background: var(--eco-surface);
  border-left: 1px solid var(--eco-border);
  border-right: 1px solid var(--eco-border);
}

/* ---- CTA hierarchy: Buy now is primary, Add to cart is secondary ---- */
.cta {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  min-height: 52px;
  padding: 15px 20px;
  border-radius: var(--eco-radius-md);
  margin-bottom: var(--eco-space-sm);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cta:hover { filter: none; }

.cta-cart {                            /* SECONDARY */
  background: var(--eco-surface);
  color: var(--eco-green-dark);
  border: 1.5px solid var(--eco-green-dark);
}
.cta-cart:hover { background: var(--eco-surface-tint); }

.cta-buy {                             /* PRIMARY */
  background: var(--eco-green-dark);
  color: #ffffff;
  border: 1.5px solid var(--eco-green-dark);
}
.cta-buy:hover { background: var(--eco-green-deeper); border-color: var(--eco-green-deeper); }

.secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--eco-font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eco-text-muted);
  margin: var(--eco-space-md) 0;
  padding-top: var(--eco-space-md);
  border-top: 1px solid var(--eco-border-subtle);
}
.txn { font-size: 12.5px; color: var(--eco-text-muted); line-height: 1.8; }
.txn b { color: var(--eco-text-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. PDP — FOUR STEPS
   -------------------------------------------------------------------------- */
.steps { gap: var(--eco-space-lg); }
.step .ph {
  background: var(--eco-stage);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-lg);
  margin-bottom: var(--eco-space-md);
}
.step .ph .slot-img { object-fit: cover; }   /* process photography — intentional cover */
.step .n {
  top: 14px; left: 14px;
  width: 32px; height: 32px;
  background: var(--eco-surface);
  color: var(--eco-green-dark);
  border: 1px solid var(--eco-border);
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--eco-shadow-soft);
}
.step .sn {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-green-dark);
  margin-bottom: 6px;
}
.step h4 { font-size: 16.5px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--eco-text-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. PDP — SPECIFICATIONS
   -------------------------------------------------------------------------- */
@media (min-width: 820px) { .specs-grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; } }
/* This slot holds an isolated product render that carries its own cream
   backdrop, so the frame takes no padding and no border: otherwise the asset's
   own edge reads as a second box drawn inside the first. */
.specs-img {
  background: #efe7dd;
  border: none;
  border-radius: var(--eco-radius-xl);
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.specs-img .slot-img { object-fit: contain; padding: 0; border-radius: var(--eco-radius-xl); }
.spec-tbl { background: var(--eco-surface); border: 1px solid var(--eco-border-subtle); border-radius: var(--eco-radius-lg); overflow: hidden; }
.spec-tbl tr { border-bottom: 1px solid var(--eco-border-subtle); }
.spec-tbl tr:last-child { border-bottom: none; }
.spec-tbl tr:nth-child(odd) { background: rgba(16, 36, 26, 0.015); }
.spec-tbl th {
  font-family: var(--eco-font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--eco-text-muted);
  padding: 15px 20px;
}
.spec-tbl td {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--eco-text);
  padding: 15px 20px;
}
@media (max-width: 560px) {
  .spec-tbl, .spec-tbl tbody, .spec-tbl tr, .spec-tbl th, .spec-tbl td { display: block; width: 100%; }
  .spec-tbl tr { padding: 13px 16px; }
  .spec-tbl th { padding: 0 0 3px; font-size: 13px; }
  .spec-tbl td { padding: 0; text-align: left; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   11. PDP — SUPPORTING SECTIONS
   No prominent dark bands anywhere in commerce.
   -------------------------------------------------------------------------- */
.statsband {
  background: var(--eco-surface-tint);
  color: var(--eco-text);
  padding: var(--eco-space-2xl) 0;
  border-top: 1px solid var(--eco-border-subtle);
  border-bottom: 1px solid var(--eco-border-subtle);
}
.statsband b { font-family: var(--eco-font-head); font-weight: 800; font-size: 40px; color: var(--eco-green-dark); letter-spacing: -0.03em; }
.statsband span { color: var(--eco-text-2); font-size: 14.5px; }

.ring-center, .lc .ph {
  background: var(--eco-stage);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
}
.ring-feat .ic { background: var(--eco-surface-tint); color: var(--eco-green-dark); border-radius: var(--eco-radius-md); }
.ring-feat span { font-family: var(--eco-font-head); font-weight: 600; }
.tri .cell.mid { border-color: var(--eco-border-subtle); }
.tri b { font-family: var(--eco-font-head); font-weight: 800; color: var(--eco-green-dark); }

.pillar, .gc, .rev-note, .pkg {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  box-shadow: var(--eco-shadow-soft);
}
.gc .ic { background: var(--eco-surface-tint); color: var(--eco-green-dark); }
.impact {
  background: var(--eco-surface-tint);
  color: var(--eco-text);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-lg);
}
.impact h4 { color: var(--eco-text); }
.impact ul { color: var(--eco-text-2); }

.news { background: var(--eco-surface-alt); border-top: 1px solid var(--eco-border-subtle); }
.news h2 { color: var(--eco-text); }
.news-form input {
  height: var(--eco-control-h);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  font-family: var(--eco-font-body);
}
.news-form button {
  height: var(--eco-control-h);
  background: var(--eco-green-dark);
  border-radius: var(--eco-radius-md);
  font-family: var(--eco-font-head);
}

/* --------------------------------------------------------------------------
   12. PDP — FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; }
.q { border-bottom: 1px solid var(--eco-border-subtle); }
.q summary {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--eco-text);
  padding: var(--eco-space-lg) 48px var(--eco-space-lg) 0;
  border-radius: var(--eco-radius-sm);
}
.q summary:hover { color: var(--eco-green-dark); }
.q summary:focus-visible { outline: 2px solid var(--eco-green-dark); outline-offset: 2px; }
.q summary::after {
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--eco-green-dark);
}
.q p { font-size: 15px; color: var(--eco-text-2); line-height: 1.7; padding-bottom: var(--eco-space-lg); }

/* --------------------------------------------------------------------------
   13. PDP — MOBILE STICKY PURCHASE BAR
   Price and one action only. It reads the same Woo state as the card above;
   it does NOT carry a second quantity control.
   -------------------------------------------------------------------------- */
.stickybar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--eco-border);
  padding: 10px var(--eco-space-md) calc(10px + env(safe-area-inset-bottom, 0px));
  gap: var(--eco-space-md);
  box-shadow: 0 -2px 24px rgba(16, 36, 26, 0.08);
}
.stickybar .sp {
  font-family: var(--eco-font-head);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--eco-text);
  flex: none;
}
.stickybar .cta { min-height: 48px; padding: 13px 18px; flex: 1; }
/* the page must never end underneath the bar */
@media (max-width: 979px) { body.single-product .site-foot { padding-bottom: 96px; } }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--eco-surface-alt);
  color: var(--eco-text-2);
  border-top: 1px solid var(--eco-border-subtle);
  padding: var(--eco-space-2xl) 0 var(--eco-space-lg);
}
.foot-brand .brand { color: var(--eco-text); }
.foot-brand .brand b { color: var(--eco-green-dark); }
.foot-brand p { color: var(--eco-text-muted); }
.foot-social a {
  width: 38px; height: 38px;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-md);
  color: var(--eco-text-2);
}
.foot-social a:hover { background: var(--eco-surface-tint); color: var(--eco-green-dark); }
.foot-col h4 { color: var(--eco-text); font-family: var(--eco-font-head); letter-spacing: 0.01em; }
.foot-col a { color: var(--eco-text-muted); font-size: 14px; }
.foot-col a:hover { color: var(--eco-green-dark); }
.foot-bottom { border-top: 1px solid var(--eco-border-subtle); color: var(--eco-text-muted); }
/* these were written for a dark footer and became near-invisible on cream */
.foot-contact { color: var(--eco-text-muted); }
.foot-contact a { color: var(--eco-text-2); }
.foot-contact a:hover { color: var(--eco-green-dark); }
.foot-bottom .links a { color: var(--eco-text-muted); }
.foot-bottom .links a:hover { color: var(--eco-green-dark); }

/* ==========================================================================
   15. NATIVE WOOCOMMERCE — shared systems
   ========================================================================== */
.woo-wrap { max-width: var(--wrap); padding: var(--eco-space-2xl) var(--eco-space-lg) var(--eco-space-2xl); }
.woo-wrap > h1,
.woocommerce-products-header__title,
.woocommerce-account h1,
.entry-title {
  font-family: var(--eco-font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.028em;
  color: var(--eco-text);
  margin-bottom: var(--eco-space-lg);
}
.woo-wrap h2 { font-size: 21px; color: var(--eco-text); margin-bottom: var(--eco-space-md); }

/* ---- 15.1 buttons ------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button,
.wp-element-button {
  background: var(--eco-green-dark) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--eco-green-dark) !important;
  border-radius: var(--eco-radius-md) !important;
  font-family: var(--eco-font-head) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  min-height: 50px !important;
  padding: 14px 24px !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  transition: background 0.16s ease, border-color 0.16s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover,
.wp-element-button:hover {
  background: var(--eco-green-deeper) !important;
  border-color: var(--eco-green-deeper) !important;
  filter: none !important;
}
/* secondary buttons: outlined */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce .return-to-shop a.button,
.wc-block-cart__submit-container ~ * .wc-block-components-button {
  background: var(--eco-surface) !important;
  color: var(--eco-green-dark) !important;
  border-color: var(--eco-green-dark) !important;
}
.woocommerce button[name="update_cart"]:disabled { opacity: 0.45; }
/* destructive / remove */
.woocommerce a.remove,
.wc-block-cart-item__remove-link {
  color: var(--eco-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background: none !important;
  border: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.woocommerce a.remove:hover,
.wc-block-cart-item__remove-link:hover { color: var(--eco-error) !important; background: none !important; }

/* ---- 15.2 forms --------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.wc-block-components-text-input input,
.wc-block-components-select__select,
.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector__input {
  background: var(--eco-surface) !important;
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--eco-radius-md) !important;
  min-height: var(--eco-control-h) !important;
  padding: 12px var(--eco-control-pad-x) !important;
  font-family: var(--eco-font-body) !important;
  font-size: 15px !important;
  color: var(--eco-text) !important;
  box-shadow: none !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account input.input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus {
  border-color: var(--eco-green-dark) !important;
  box-shadow: 0 0 0 3px var(--eco-green-dim) !important;
  outline: none !important;
}
.woocommerce form .form-row label,
.wc-block-components-text-input label,
.woocommerce-account label {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--eco-text-2);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row label .required,
.wc-block-components-text-input label .required {
  color: var(--eco-error);
  text-decoration: none;
  margin-left: 2px;
}
.woocommerce form .form-row { margin-bottom: var(--eco-space-md); padding: 0; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 620px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: calc(50% - 8px); float: left; }
  .woocommerce form .form-row-last { float: right; }
}
/* Woo's block checkout floats the label INSIDE the control. A uniform padding
   makes the label sit on top of the value, so these inputs get their own
   top-weighted padding and a taller box rather than the shared one. */
.wc-block-components-text-input { position: relative; }
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
  min-height: 58px !important;
  padding: 24px var(--eco-control-pad-x) 8px !important;
}
.wc-block-components-text-input label {
  top: 15px;
  left: var(--eco-control-pad-x);
  font-size: 15px;
  color: var(--eco-text-muted);
  font-family: var(--eco-font-body);
  font-weight: 400;
  margin: 0;
}
.wc-block-components-text-input.is-active label {
  top: 9px;
  font-size: 11.5px;
  font-family: var(--eco-font-head);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--eco-text-muted);
}
.wc-block-components-select {
  min-height: 58px;
}
.wc-block-components-select .wc-block-components-select__container { height: 58px; }
.wc-block-components-select__select { padding: 24px var(--eco-control-pad-x) 8px !important; min-height: 58px !important; }
.wc-block-components-select__label { top: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; }

/* ---- 15.3 notices ------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--eco-surface) !important;
  border: 1px solid var(--eco-border) !important;
  border-left: 4px solid var(--eco-success) !important;
  border-radius: var(--eco-radius-md) !important;
  color: var(--eco-text) !important;
  font-family: var(--eco-font-body) !important;
  font-size: 14.5px !important;
  padding: 15px 18px 15px 46px !important;
  box-shadow: var(--eco-shadow-soft) !important;
  margin-bottom: var(--eco-space-md) !important;
}
.woocommerce-info,
.wc-block-components-notice-banner.is-info { border-left-color: var(--eco-green-dark) !important; }
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left-color: var(--eco-error) !important;
  background: var(--eco-error-bg) !important;
  color: var(--eco-error) !important;
  font-weight: 500 !important;
}
.woocommerce-error::before { color: var(--eco-error) !important; }
.woocommerce-message::before { color: var(--eco-success) !important; }
.woocommerce-info::before { color: var(--eco-green-dark) !important; }
/* validation must never read as helper text */
.woocommerce-invalid input.input-text,
.wc-block-components-text-input.has-error input {
  border-color: var(--eco-error) !important;
  box-shadow: 0 0 0 3px var(--eco-error-bg) !important;
}
.wc-block-components-validation-error,
.woocommerce-error li {
  color: var(--eco-error) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* ---- 15.4 shop / catalog ------------------------------------------------ */
.woocommerce ul.products { gap: var(--eco-space-lg); display: grid; margin: 0; }
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-lg);
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  box-shadow: var(--eco-shadow-soft);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--eco-shadow-card); transform: translateY(-2px); }
.woocommerce ul.products li.product img {
  background: var(--eco-stage);
  border-radius: var(--eco-radius-lg);
  object-fit: contain;
  aspect-ratio: 1 / 1;
  padding: var(--eco-space-md);
  margin-bottom: var(--eco-space-md);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--eco-text);
  padding: 0 0 6px;
}
.woocommerce ul.products li.product .price {
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--eco-text);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--eco-text-muted); font-size: 14px; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  padding: 10px 14px;
  background: var(--eco-surface);
  font-family: var(--eco-font-body);
  font-size: 14px;
  color: var(--eco-text);
}

/* ==========================================================================
   16. CART
   ========================================================================== */
.woocommerce-cart .woo-wrap,
.woocommerce-checkout .woo-wrap { max-width: 1180px; }

/* --- classic cart --- */
.woocommerce table.shop_table {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-text-muted);
  background: var(--eco-surface-alt);
  padding: 15px 18px;
  border: none;
}
.woocommerce table.shop_table td {
  padding: var(--eco-space-md) 18px;
  border-top: 1px solid var(--eco-border-subtle);
  font-size: 14.5px;
  color: var(--eco-text-2);
  vertical-align: middle;
}
.woocommerce table.shop_table .product-name a { font-family: var(--eco-font-head); font-weight: 600; color: var(--eco-text); }
.woocommerce table.shop_table .variation,
.wc-block-components-product-details {
  font-size: 13px;
  color: var(--eco-text-muted);
  margin: 4px 0 0;
}
.woocommerce table.shop_table .variation dt,
.woocommerce table.shop_table .variation dd { display: inline; margin: 0; font-weight: 500; }
.woocommerce table.shop_table img {
  width: 68px !important;
  border-radius: var(--eco-radius-md);
  background: var(--eco-stage);
  object-fit: contain;
  padding: 4px;
}
/* Exactly ONE card around the totals. Woo nests
   sidebar > order-summary-block > totals-wrapper, and boxing each of them
   produced three borders inside one another. */
.woocommerce .cart-collaterals .cart_totals,
.wc-block-cart__sidebar {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-lg) !important;   /* Woo zeroes the sidebar padding */
  box-shadow: var(--eco-shadow-soft);
}
/* one card around the whole line-item table; the rows themselves stay a real
   table so Woo's own column layout keeps working */
.wc-block-cart__main {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-sm) var(--eco-space-lg) var(--eco-space-md) !important;
  box-shadow: var(--eco-shadow-soft);
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper { border-top: 1px solid var(--eco-border-subtle); padding: var(--eco-space-md) 0 0; margin-top: var(--eco-space-md); }
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-of-type { border-top: none; margin-top: 0; }
.wc-block-cart__totals-title {
  font-family: var(--eco-font-head) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--eco-text-muted) !important;
  padding: 0 0 var(--eco-space-sm) !important;
  margin: 0 !important;
}

/* Woo's own sidebar-layout only splits into two columns inside a wide enough
   container, and the theme wrapper is narrower than its breakpoint, so the
   summary dropped under the items. State the grid explicitly. */
@media (min-width: 900px) {
  .wc-block-cart.wc-block-components-sidebar-layout,
  .wc-block-checkout.wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 396px;
    gap: var(--eco-space-xl);
    align-items: start;
  }
  /* Woo's flex layout adds its own gutter padding here. The grid supplies the
     gap instead, so this restates the CARD padding rather than zeroing it —
     zeroing pushed the table and the totals hard against the card edge. */
  .wc-block-components-main,
  .wc-block-components-sidebar {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  .wc-block-cart__main { padding: var(--eco-space-sm) var(--eco-space-lg) var(--eco-space-md) !important; }
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar { padding: var(--eco-space-lg) !important; }
  .wc-block-cart__sidebar { position: sticky; top: 92px; }
}
.woocommerce .cart_totals h2 { font-size: 17px; margin-bottom: var(--eco-space-md); }

/* --- block cart --- */
.wc-block-cart { gap: var(--eco-space-xl); }
.wc-block-cart-items,
.wp-block-woocommerce-cart-line-items-block { background: transparent; }
.wc-block-cart-items__header {
  font-family: var(--eco-font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-text-muted);
  border-bottom: 1px solid var(--eco-border-subtle);
}
.wc-block-cart-items__row { background: transparent; }
.wc-block-cart-items__row td {
  border: none !important;
  border-top: 1px solid var(--eco-border-subtle) !important;
  padding-top: var(--eco-space-md) !important;
  padding-bottom: var(--eco-space-md) !important;
}
.wc-block-cart-items__row:first-child td { border-top: none !important; }
.wc-block-cart-item__image img {
  border-radius: var(--eco-radius-md);
  background: var(--eco-stage);
  object-fit: contain;
  padding: 6px;
}
.wc-block-components-product-name {
  font-family: var(--eco-font-head) !important;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  color: var(--eco-text) !important;
  text-decoration: none !important;
}
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
  font-family: var(--eco-font-head);
  font-weight: 600;
  color: var(--eco-text);
}
.wc-block-components-quantity-selector {
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--eco-radius-md) !important;
  background: var(--eco-surface) !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector__button {
  color: var(--eco-green-dark) !important;
  min-width: 40px !important;
  min-height: 42px !important;
  background: var(--eco-surface) !important;
  border: none !important;
}
.wc-block-components-quantity-selector__button:hover { background: var(--eco-surface-alt) !important; }
.wc-block-components-quantity-selector__input {
  min-height: 42px !important;
  border: none !important;
  font-family: var(--eco-font-head) !important;
  font-weight: 700 !important;
  color: var(--eco-text) !important;
}
.wc-block-components-totals-item {
  font-family: var(--eco-font-body);
  font-size: 14.5px;
  color: var(--eco-text-2);
  padding: 9px 0;
}
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--eco-font-head) !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  color: var(--eco-text) !important;
  letter-spacing: -0.02em;
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

/* --- empty cart --- */
.cart-empty,
.wc-block-cart__empty-cart__title,
.woocommerce-info.cart-empty {
  font-family: var(--eco-font-head) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--eco-text) !important;
  text-align: center;
}
.wp-block-woocommerce-empty-cart-block,
.woocommerce .return-to-shop {
  text-align: center;
  padding: var(--eco-space-xl) var(--eco-space-lg);
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
}

/* ==========================================================================
   17. CHECKOUT
   ========================================================================== */
.woocommerce-checkout h3,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--eco-font-head) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--eco-text) !important;
  letter-spacing: -0.015em;
}
.wc-block-components-checkout-step {
  padding-bottom: var(--eco-space-lg);
  margin-bottom: var(--eco-space-lg);
  border-bottom: 1px solid var(--eco-border-subtle);
}
.wc-block-components-checkout-step:last-child { border-bottom: none; }
.wc-block-components-checkout-step__description { color: var(--eco-text-muted); font-size: 14px; }

.woocommerce-checkout #order_review,
.wc-block-checkout__sidebar {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-lg) !important;
  box-shadow: var(--eco-shadow-soft);
}
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--eco-border-subtle);
  padding-top: var(--eco-space-md);
  margin-top: var(--eco-space-md);
}
/* The empty ruled band. WooCommerce wraps the money rows in
   ...order-summary-totals-block, which draws a rule of its own, and its first
   child (the Subtotal wrapper) then drew a SECOND rule 16px lower — two lines
   with dead space between them, reading as an empty section. The parent's rule
   is enough, so the first child inside it drops its own border and top margin.
   Nothing is hidden: Subtotal, Discount, Fee and Total all still render. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child {
  border-top: none;
  margin-top: 0;
}
.wc-block-components-order-summary__title,
.wc-block-checkout__sidebar .wc-block-components-title {
  font-family: var(--eco-font-head) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--eco-text) !important;
  margin-bottom: var(--eco-space-sm) !important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: 14.5px !important;
  line-height: 1.4 !important;
}
/* Woo emits a totals wrapper per line even when shipping and tax are switched
   off, which left two empty ruled bands between Subtotal and Total. */
/* Only wrappers with NO element children at all. An earlier attempt keyed on
   the absence of a totals-item and wrongly hid the order line items too. */
.wc-block-components-totals-wrapper:empty,
.wc-block-components-totals-wrapper:not(:has(*)) { display: none !important; }
/* the combobox fields shipped a heavier, darker border than the text inputs */
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-combobox-control input,
.wc-block-components-country-input .components-form-token-field__input-container,
.wc-block-components-state-input .components-form-token-field__input-container {
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--eco-radius-md) !important;
  min-height: 58px !important;
  padding: 24px var(--eco-control-pad-x) 8px !important;
  background: var(--eco-surface) !important;
  box-shadow: none !important;
}
.wc-block-components-combobox .components-form-token-field__input-container:focus-within {
  border-color: var(--eco-green-dark) !important;
  box-shadow: 0 0 0 3px var(--eco-green-dim) !important;
}
@media (min-width: 900px) {
  .wc-block-checkout.wc-block-components-sidebar-layout { grid-template-columns: minmax(0, 1fr) 420px; }
  .wc-block-checkout__sidebar { position: sticky; top: 92px; }
}
.wc-block-components-order-summary-item {
  padding: var(--eco-space-md) 0;
  border-bottom: 1px solid var(--eco-border-subtle);
}
.wc-block-components-order-summary-item:last-child { border-bottom: none; }
.wc-block-components-order-summary-item__image img {
  border-radius: var(--eco-radius-md);
  background: var(--eco-stage);
  object-fit: contain;
  padding: 4px;
}
.wc-block-components-order-summary-item__quantity {
  background: var(--eco-green-dark) !important;
  border-color: var(--eco-green-dark) !important;
  color: #ffffff !important;
  font-family: var(--eco-font-head);
  font-weight: 700;
}

/* payment area — an empty, honest shell until a real gateway is configured */
.woocommerce #payment,
.wp-block-woocommerce-checkout-payment-block,
.wc-block-checkout__payment-method {
  background: var(--eco-surface-alt);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-lg);
  padding: var(--eco-space-lg);
}
.woocommerce #payment ul.payment_methods {
  border: none;
  padding: 0;
  margin: 0 0 var(--eco-space-md);
  background: transparent;
}
.woocommerce #payment ul.payment_methods li {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  padding: var(--eco-space-md);
  margin-bottom: var(--eco-space-sm);
  list-style: none;
}
.woocommerce #payment div.form-row { padding: var(--eco-space-md) 0 0; }
.woocommerce-privacy-policy-text, .wc-block-components-checkout-policies {
  font-size: 12.5px;
  color: var(--eco-text-muted);
}

/* ==========================================================================
   18. MY ACCOUNT + AUTH
   ========================================================================== */
.woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--eco-space-lg); }
@media (min-width: 860px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: var(--eco-space-xl);
    align-items: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; margin: 0; }
  /* The theme injects a profile-completion prompt as a sibling of the nav and
     the content, so auto-placement pushed everything one cell along. Pin the
     three regions explicitly and let anything else span the full width. */
  .woocommerce-account.logged-in .woocommerce > * { grid-column: 1 / -1; }
  .woocommerce-account.logged-in .eco-profile-prompt { grid-column: 1 / -1; grid-row: 1; }
  .woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
  .woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
}
.eco-profile-prompt {
  background: var(--eco-surface-tint);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-lg);
  margin-bottom: var(--eco-space-lg);
}
.eco-profile-prompt strong {
  display: block;
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--eco-text);
  margin-bottom: 6px;
}
.eco-profile-prompt p { color: var(--eco-text-2); font-size: 14.5px; margin-bottom: var(--eco-space-md); max-width: 52ch; }
.eco-profile-prompt .cta { margin-bottom: 0; }
/* the navigation reads as a real sidebar rather than loose links */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-sm);
  box-shadow: var(--eco-shadow-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--eco-surface-tint);
  border-color: transparent;
  box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { color: var(--eco-text-muted); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--eco-radius-md);
  padding: 12px var(--eco-space-md);
  margin: 0;
  min-height: var(--eco-tap);
  display: flex;
  align-items: center;
  font-family: var(--eco-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--eco-text-2);
  transition: background 0.14s ease, color 0.14s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--eco-surface); color: var(--eco-text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--eco-surface);
  border-color: var(--eco-border-subtle);
  color: var(--eco-green-dark);
  font-weight: 600;
  box-shadow: var(--eco-shadow-soft);
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-xl);
  box-shadow: var(--eco-shadow-soft);
}
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--eco-text-2); font-size: 15px; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-bottom: var(--eco-space-md); }

/* orders + addresses tables */
.woocommerce-orders-table, .woocommerce-MyAccount-orders { font-size: 14.5px; }
.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--eco-surface-alt);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-lg);
  padding: var(--eco-space-lg);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2 { font-size: 16px; }
.woocommerce-MyAccount-content address { font-style: normal; color: var(--eco-text-2); line-height: 1.8; font-size: 14.5px; }
.woocommerce .addresses .col-1, .woocommerce .addresses .col-2 { margin-bottom: var(--eco-space-md); }

/* ---- logged-out account entry ---- */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 960px; }
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border-subtle);
  border-radius: var(--eco-radius-xl);
  padding: var(--eco-space-xl);
  max-width: 460px;
  box-shadow: var(--eco-shadow-card);
  margin: 0 auto;
}
.woocommerce-account:not(.logged-in) h2 {
  font-family: var(--eco-font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--eco-text);
  text-align: center;
  margin-bottom: var(--eco-space-lg);
}
.woocommerce-form-login__rememberme { font-size: 14px; color: var(--eco-text-2); display: flex; align-items: center; gap: 8px; margin: var(--eco-space-md) 0; }
.woocommerce-form-login__rememberme input { width: 18px; height: 18px; accent-color: var(--eco-green-dark); }
/* The theme prints a "New to EcoSense? Create an account" toggle after the
   login form. It is href="#" plus a JS panel switch, so with WooCommerce
   registration switched off (woocommerce_enable_myaccount_registration = no)
   there is no register panel for it to reveal and the link goes nowhere.
   Presentation follows the actual configuration: show the switch only when a
   register form is genuinely on the page. Turning registration back on makes
   it reappear by itself. No auth mechanics are touched. */
.woocommerce-account .woocommerce:not(:has(form.woocommerce-form-register)) .eco-switch { display: none; }
.eco-switch {
  text-align: center;
  margin-top: var(--eco-space-md);
  padding-top: var(--eco-space-md);
  border-top: 1px solid var(--eco-border-subtle);
  font-size: 14px;
  color: var(--eco-text-muted);
}
.eco-switch a { color: var(--eco-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.woocommerce-LostPassword { text-align: center; margin-top: var(--eco-space-md); font-size: 14px; }
.woocommerce-LostPassword a { color: var(--eco-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit { width: 100%; margin-top: var(--eco-space-sm) !important; }
.woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--eco-text-muted); }

/* ==========================================================================
   19. CART DRAWER
   ========================================================================== */
.eco-drawer { background: var(--eco-bg); }
.eco-drawer .drawer-head { border-color: var(--eco-border-subtle); padding: var(--eco-space-lg); }
.eco-drawer .drawer-head h3 { font-family: var(--eco-font-head); font-size: 18px; }
.eco-drawer .eco-close { width: var(--eco-tap); height: var(--eco-tap); border-radius: var(--eco-radius-md); }
.eco-drawer .cart-item .thumb { background: var(--eco-stage); border: 1px solid var(--eco-border-subtle); }
.eco-drawer .cart-item .thumb img { object-fit: contain; padding: 3px; }
.eco-drawer .cart-item b { font-family: var(--eco-font-head); }
.eco-drawer .cart-item .ci-ctrl button { width: 30px; height: 30px; border-radius: var(--eco-radius-sm); }
.eco-drawer .drawer-foot { background: var(--eco-surface); border-color: var(--eco-border-subtle); }
.eco-drawer .subtotal { font-family: var(--eco-font-head); }
.eco-drawer .cta-view { background: var(--eco-surface); color: var(--eco-green-dark); border: 1.5px solid var(--eco-green-dark); }

/* ==========================================================================
   20. VISIBILITY SAFETY, MOTION, RESPONSIVE
   ========================================================================== */

/* Commerce content is visible by DEFAULT. Nothing here may start at opacity 0
   and depend on JavaScript to become readable — a script failure must never
   hide a price or a button. */
.buy, .cta, .sw, .stepper, .gallery, .thumbs, .swatch-row, .stickybar .cta {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* A square stage at the desktop column width runs ~690px tall and pushes the
   thumbnails off the first screen. A 4:3 stage keeps title, product and
   thumbnails together in the opening view. The product still contains at full
   height, and the letterboxing is invisible because the stage colour matches
   the render's own baked-in backdrop. Mobile keeps the square. */
@media (min-width: 980px) {
  .gallery-main figure { aspect-ratio: 4 / 3; }
}

/* A 40px circle is fine for a mouse but under the 44px touch minimum, so any
   width that is plausibly a touch device gets the larger target. */
@media (max-width: 1023px) {
  .sw { width: var(--eco-tap); height: var(--eco-tap); }
}

/* ---- tablet ---- */
@media (max-width: 979px) {
  .hero { padding: var(--eco-space-lg) 0 var(--eco-space-xl); }
  .buy { position: static; }
  .sec { padding: var(--eco-space-xl) 0; }
}

/* ---- mobile ---- */
@media (max-width: 767px) {
  .wrap { padding-left: var(--eco-space-md); padding-right: var(--eco-space-md); }
  .hero h1 { font-size: clamp(25px, 7vw, 31px); max-width: none; }
  .gallery-main figure { padding: 18px; }
  .thumbs button { flex: 0 0 66px; height: 66px; }
  .usps { grid-template-columns: 1fr; gap: var(--eco-space-md); padding: var(--eco-space-md); }
  .swatch-row { gap: var(--eco-space-md); padding: var(--eco-space-lg) 0; }
  .buy { padding: var(--eco-space-lg) var(--eco-space-md) var(--eco-space-md); border-radius: var(--eco-radius-lg); }
  .price-line .price,
  .price-line .woocommerce-Price-amount { font-size: 32px; }
  .woo-wrap { padding: var(--eco-space-xl) var(--eco-space-md) var(--eco-space-2xl); }
  .woocommerce-account .woocommerce-MyAccount-content { padding: var(--eco-space-lg) var(--eco-space-md); }
  .woocommerce form.woocommerce-form-login,
  .woocommerce form.woocommerce-form-register,
  .woocommerce form.woocommerce-ResetPassword { padding: var(--eco-space-lg) var(--eco-space-md); }
  .sec { padding: var(--eco-space-xl) 0; }
  .h2c { font-size: clamp(24px, 6.4vw, 30px); }

  /* classic cart table -> stacked rows, so nothing scrolls sideways */
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td { display: block; width: 100%; }
  .woocommerce table.shop_table tr {
    background: var(--eco-surface);
    border: 1px solid var(--eco-border-subtle);
    border-radius: var(--eco-radius-lg);
    margin-bottom: var(--eco-space-md);
    padding: var(--eco-space-md);
  }
  .woocommerce table.shop_table td { border: none; padding: 5px 0; text-align: left; }
  .woocommerce table.shop_table td::before {
    content: attr(data-title);
    display: block;
    font-family: var(--eco-font-head);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eco-text-muted);
    margin-bottom: 2px;
  }
}

/* Nothing may push the document sideways — but this must be `clip`, not
   `hidden`. `overflow-x: hidden` on html/body turns them into a scroll
   container, and position:sticky then anchors to that instead of the viewport,
   which silently killed the sticky purchase card introduced in 408ea1e.
   `clip` prevents the same overflow without creating a scroll container. */
html, body { max-width: 100%; overflow-x: clip; }