/* L'Air Frais — main.css
   Design tokens + components, extracted from design-system.md (locked 2026-10-26).
   Source of truth for all colors/type/spacing: G:\lefair\design\design-system.md */

:root{
  --ivory:#FBF7F1;
  --ivory-deep:#F3ECE2;
  --ink:#2B2420;
  --ink-soft:#6B6158;
  --gold:#B08A4E;
  --gold-text:#84673A; /* darker than --gold — passes WCAG AA (4.94:1) for small text on ivory; --gold itself is 2.99:1 and fails, so it stays decorative-only (buttons, borders, backgrounds) */
  --gold-soft:#D9C49C;
  --clay:#C97B63;
  --sage:#5B6B4F;
  --sage-soft:#E4E9DD;
  --line:#E4DCCE;
  --white:#FFFFFF;
  --container-max:1320px;
}

*, *::before, *::after{ box-sizing:border-box; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link.screen-reader-text:focus{
  position:fixed !important; top:12px; left:12px; width:auto; height:auto;
  clip:auto; white-space:normal; z-index:100000;
  background:var(--ink); color:var(--ivory); padding:14px 20px;
  border-radius:2px; font-size:13px; font-weight:600; text-decoration:none;
}

body{
  margin:0;
  background:var(--ivory);
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  margin:0;
}

a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--gold-text); }
button{ font-family:'Inter', sans-serif; cursor:pointer; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-text);
  font-weight:600;
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--ink);
  color:var(--ivory);
  padding:15px 32px;
  border-radius:2px;
  border:none;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
}
.btn-primary:hover{ background:var(--gold); color:var(--ink); }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--ink);
  padding:14px 30px;
  border-radius:2px;
  border:1px solid var(--ink);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
}
.btn-outline:hover{ background:var(--ink); color:var(--ivory); }

.btn-quick-add{
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--ink);
  background:transparent;
  padding:7px 12px;
  border-radius:2px;
  cursor:pointer;
}

/* ---------- Site header ---------- */
.site-announcement{
  background:var(--ink);
  color:var(--ivory);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
}
.site-announcement-row{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:10px 0; position:relative;
}
.site-announcement-text{ margin:0; text-align:center; }
/* Icons sit absolutely on the right so the promo text stays perfectly
   centered regardless of icon-row width (matches the pre-split layout). */
.site-announcement-row .header-icons{ position:absolute; right:0; top:50%; transform:translateY(-50%); gap:10px; }
.site-announcement-row .icon-circle{ width:30px; height:30px; border-color:rgba(251,247,241,0.3); color:var(--ivory); }
.site-announcement-row .icon-circle.cart{ background:var(--gold); border-color:var(--gold); }
.site-announcement-row .cart-count{ width:14px; height:14px; font-size:9px; }

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(251,247,241,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header-main{
  padding-top:16px;
  padding-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.site-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  white-space:nowrap;
}
.site-logo-main{
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.site-logo-sub{
  font-family:'Fraunces', serif;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.primary-nav{
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
}
.primary-nav a.current{ color:var(--gold-text); }

/* ---------- Mega menu (desktop) ---------- */
.mega-nav{ display:flex; gap:28px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.mega-nav-item{ position:relative; }
.mega-nav-link{
  display:flex; align-items:center; gap:5px;
  padding:10px 0;
  color:var(--ink);
}
.mega-chevron{ transition:transform 0.15s ease; }
.mega-nav-item:hover .mega-chevron,
.mega-nav-item:focus-within .mega-chevron,
.mega-nav-item.mega-open .mega-chevron{ transform:rotate(180deg); }
.mega-nav-item:hover .mega-nav-link,
.mega-nav-item:focus-within .mega-nav-link,
.mega-nav-item.mega-open .mega-nav-link{ color:var(--gold-text); }

.mega-panel{
  display:none;
  position:absolute;
  top:100%; left:0;
  min-width:460px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 12px 32px rgba(44,38,30,0.12);
  padding:20px 0;
  z-index:60;
}
.mega-nav-item:hover .mega-panel,
.mega-nav-item:focus-within .mega-panel,
.mega-nav-item.mega-open .mega-panel{ display:flex; }
.mega-nav-link:focus-visible,
.mega-group-tab:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.mega-col-left{
  flex:0 0 180px;
  display:flex; flex-direction:column;
  border-right:1px solid var(--line);
  padding:0 8px;
}
.mega-group-tab{
  text-align:left; background:none; border:none; cursor:pointer;
  padding:10px 16px;
  font-size:12px; letter-spacing:0.03em; text-transform:uppercase; font-weight:600;
  color:var(--ink); border-radius:3px;
}
.mega-group-tab.active, .mega-group-tab:hover{ background:var(--ivory-deep); color:var(--gold-text); }

.mega-col-right{ flex:1; padding:0 24px; min-width:0; }
.mega-product-list{ display:none; flex-direction:column; gap:10px; }
.mega-product-list.active{ display:flex; }
.mega-product-list a{
  font-size:12px; text-transform:none; letter-spacing:normal; font-weight:500;
  color:var(--ink-soft); line-height:1.4;
}
.mega-product-list a:hover{ color:var(--gold-text); }
.mega-view-all{ margin-top:4px; padding-top:10px; border-top:1px solid var(--line); font-weight:700 !important; color:var(--ink) !important; text-transform:uppercase; letter-spacing:0.04em; font-size:11px !important; }

/* ---------- Mobile nav drawer ---------- */
.mobile-nav-drawer{ display:none; }
.lf-filters-backdrop{ display:none; }
.lf-filters-sidebar-close{ display:none; }
.mobile-nav-drawer.open{
  display:block; position:fixed; inset:0; z-index:80;
}
.mobile-nav-drawer-backdrop{
  position:absolute; inset:0; background:rgba(26,22,18,0.4);
}
.mobile-nav-drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:84%; max-width:340px;
  background:var(--white); overflow-y:auto;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
}
/* Logged-in users (admin preview, shop managers, account holders) get the
   WP admin toolbar fixed on top of everything — push the drawer down so
   its close button isn't hidden underneath it. */
body.admin-bar .mobile-nav-drawer-panel{ padding-top:calc(24px + 46px); }
@media (min-width: 783px){
  body.admin-bar .mobile-nav-drawer-panel{ padding-top:calc(24px + 32px); }
}
.mobile-nav-drawer-close{
  border:none; background:none; font-size:26px; line-height:1; color:var(--ink);
  margin-bottom:12px;
}
.mobile-nav-group{ border-bottom:1px solid var(--line); }
.mobile-nav-group summary{
  display:flex; align-items:center; justify-content:space-between;
  list-style:none; cursor:pointer;
  padding:14px 0;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
}
.mobile-nav-group summary::-webkit-details-marker{ display:none; }
.mobile-nav-group summary::after{ content:"+"; font-size:18px; color:var(--ink-soft); margin-left:8px; }
.mobile-nav-group[open] summary::after{ content:"\2212"; }
.mobile-nav-sublist{ display:flex; flex-direction:column; gap:10px; padding:0 0 16px 4px; }
.mobile-nav-sublist a{ font-size:13px; color:var(--ink-soft); }
.mobile-nav-view-all{ font-weight:700; color:var(--ink) !important; text-transform:uppercase; font-size:11px !important; letter-spacing:0.04em; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:2px; }
.mobile-nav-flat{ display:block; padding:14px 0; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; border-bottom:1px solid var(--line); color:var(--ink); }

.header-icons{ display:flex; align-items:center; gap:14px; }
.icon-circle{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  position:relative;
}
.icon-circle.cart{ background:var(--ink); border-color:var(--ink); }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  background:var(--gold); color:var(--ink);
  font-size:10px; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Mobile header — hamburger + centered logo */
.mobile-header{ display:none; }
.hamburger{ display:none; }

/* ---------- Product card (shared: home, category, cart cross-sell, account wishlist) ---------- */
.product-card{ display:flex; flex-direction:column; gap:14px; }
.product-card .card-media{
  position:relative;
  aspect-ratio:1/1;
  border-radius:3px;
  background:var(--ivory-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-card .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.product-card .card-media:hover img{ transform:scale(1.04); }
.product-card .card-tag{
  position:absolute; top:12px; left:12px;
  background:var(--ink); color:var(--ivory);
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
}
.product-card .card-tag.baby{ background:var(--sage); }
.product-card .card-tag-oos{ background:var(--ink-soft); }
.product-card .card-media-oos img{ opacity:0.55; }
.product-card .btn-quick-add-disabled{
  background:var(--ivory-deep); color:var(--ink-soft); border:1px solid var(--line);
  cursor:not-allowed; pointer-events:none;
}
.lf-recommended-for{ font-size:13px; color:var(--ink-soft); margin:8px 0 4px; }
.lf-recommended-label{ font-weight:600; color:var(--ink); }
.lf-recommended-for a{ color:var(--gold-text); text-decoration:underline; }
/* On the PDP, right under the title — a bold one-line subheading (Juicy
   Chemistry's "For Dandruff, Itchy Scalp and Flakiness" pattern), not a
   small muted tag like the grid-card version of this same component. */
.summary .lf-recommended-for{
  font-size:16px; color:var(--ink); margin:2px 0 16px; font-weight:500;
}
.summary .lf-recommended-label{ font-weight:500; color:var(--ink); }
.summary .lf-recommended-for a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--gold); }
.summary .lf-recommended-for a:hover{ color:var(--gold-text); }
.lf-stock-notify-form{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.lf-stock-notify-form .lf-stock-notify-email{
  flex:1; min-width:160px; border:1px solid var(--line); border-radius:2px;
  padding:11px 14px; font-size:13px; font-family:'Inter',sans-serif; background:var(--white);
}
.lf-stock-notify-form .btn-primary{ white-space:nowrap; }
.lf-stock-notify-form .lf-stock-notify-message{ width:100%; font-size:12px; margin-top:2px; }
.lf-stock-notify-form .lf-stock-notify-message.success{ color:var(--sage); }
.lf-stock-notify-form .lf-stock-notify-message.error{ color:#A1544E; }
.lf-stock-notify-form--compact{ margin-top:8px; }
.lf-stock-notify-form--compact .lf-stock-notify-email{ padding:9px 12px; font-size:12px; }
.lf-stock-notify-form--compact .btn-primary{ padding:9px 16px; font-size:11px; }
.lf-outofstock-badge{
  display:inline-block; margin-left:10px; padding:4px 10px; border-radius:2px;
  background:var(--ink-soft); color:var(--ivory); font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; font-weight:600; vertical-align:middle;
}

/* Empty cart state */
.cart-empty-state{
  text-align:center; max-width:420px; margin:72px auto; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cart-empty-state h1{ font-size:26px; margin:0; }
.cart-empty-state p{ font-size:14px; color:var(--ink-soft); margin:0; }
.cart-empty-state .btn-primary{ margin-top:8px; }
.cart-empty-categories{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px;
  margin-top:32px; padding-top:28px; border-top:1px solid var(--line); width:100%;
}
.cart-empty-categories a{
  font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid transparent;
}
.cart-empty-categories a:hover{ color:var(--ink); border-color:var(--ink); }

.no-products-found-state{
  text-align:center; max-width:420px; margin:48px auto; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.no-products-found-state h2{ font-size:22px; margin:0; }
.no-products-found-state p{ font-size:14px; color:var(--ink-soft); margin:0; }
.no-products-found-state .btn-primary{ margin-top:8px; }

/* Respect OS-level reduced-motion preference — disable hover zoom and
   dropdown/chevron transitions for anyone who's asked for less motion. */
@media (prefers-reduced-motion: reduce){
  .product-card .card-media img,
  .mega-chevron{ transition:none !important; }
  .product-card .card-media:hover img{ transform:none !important; }
}
.product-card .card-name{ font-size:14px; font-weight:600; line-height:1.3; }
.product-card .card-meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.product-card .card-price-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px;
}
.product-card .card-price{
  font-family:'Fraunces',serif; font-size:16px; font-weight:600;
}
/* WooCommerce wraps a sale price in <ins> (browsers underline it by
   default) and the original price in <del> (struck through, which is
   correct) — only the PDP summary price (`.summary .price ins`, below)
   ever stripped that underline, so every shop/category card price with
   an active sale showed the real (discounted) price underlined, looking
   broken (user-flagged 2026-10-27, live /product-category/combo/
   screenshot: "why underline"). Same fix, same reasoning, card scope. */
.product-card .card-price del{ color:var(--ink-soft); font-weight:400; font-size:0.78em; }
.product-card .card-price ins{ text-decoration:none; }

/* Cart/Checkout/My Account are real WordPress Pages rendered through the
   generic page.php template (same one About/FAQ use), whose inline
   <style> block underlines every link inside `.lf-page-content` in gold
   — the right call for prose links, wrong for the real WooCommerce
   markup (cart table, "You May Also Like" cards, account forms) nested
   inside that same div on these specific pages: every product name in
   the cart table and every upsell card title rendered gold and
   underlined (user: "what is a fetish with underline everywhere", live
   /cart/ screenshots). `.woocommerce` wraps all of that real content, so
   scoping the reset to the actual broken areas (the cart item table and
   the upsell grid) rather than every `.woocommerce` link — a blanket
   `.lf-page-content .woocommerce a` would also catch the "Undo?" / "View
   Cart" links inside `.woocommerce-message`, which are DELIBERATELY
   underlined everywhere else on the site, and stripping that only on
   Cart/Checkout specifically would be its own inconsistency. */
.lf-page-content .woocommerce-cart-form a,
.lf-page-content .lf-cart-upsell a{ text-decoration:none; color:var(--ink); }

/* ---------- Trust badge row ---------- */
.trust-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0;
}
.trust-item{
  display:flex; align-items:center; gap:12px; justify-content:center;
  font-size:13px; font-weight:600;
}

/* ---------- Section rhythm ---------- */
.section{ padding-top:88px; }
.section-label{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:32px; flex-wrap:wrap; gap:12px;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C9C1B6; padding:64px 32px 28px; }
.site-footer a{ color:#C9C1B6; }
.site-footer a:hover{ color:var(--gold-soft); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:36px; }
.footer-col-title{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ivory); font-weight:600; margin-bottom:16px;
}
.footer-links{ display:flex; flex-direction:column; gap:10px; font-size:13px; }
.footer-bottom{
  border-top:1px solid #4A443C; margin-top:48px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:#9E968C;
}

/* ---------- WooCommerce integration overrides ---------- */
.filter-group{ margin-bottom:0; }
.filter-group-label{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); margin-bottom:12px;
}
.woocommerce-result-count{ font-size:13px; color:var(--ink-soft); margin:0; }
.woocommerce-ordering select{
  font-family:'Inter',sans-serif; font-size:13px; border:1px solid var(--line);
  border-radius:2px; padding:9px 12px; background:var(--white); color:var(--ink);
}
.woocommerce-ordering{ margin:0; }
.product-card .btn-quick-add{ white-space:nowrap; }
.woocommerce-no-products-found{ font-size:14px; color:var(--ink-soft); }

/* Category hero banner: full-bleed (width:100%) is correct up to normal
   desktop widths, but past that the box keeps growing far wider than the
   ~2000px source photos while aspect-ratio keeps it short — object-fit:cover
   then has to crop huge amounts off the top/bottom (through faces) to fill
   the now-extreme-wide box. Cap the width past 2000px instead, centered,
   so the box ratio never drifts far from the source photos' own ratio and
   nothing gets upscaled or vertically crushed (found 2026-10-27, user
   tested at real 4K width — a fixed-height-only attempt still cropped
   faces, since the box was still disproportionately wide). */
@media (min-width: 2000px){
  .category-hero-banner{ max-width:2000px; margin:0 auto; }
}

/* Price filter widget (jQuery UI slider) */
.price_slider_wrapper{ margin-top:4px; }
.price_slider{
  position:relative; height:3px; margin:16px 2px 20px;
  background:var(--line); border-radius:2px;
}
.price_slider .ui-slider-range{ position:absolute; height:100%; background:var(--ink); border-radius:2px; }
.price_slider .ui-slider-handle{
  position:absolute; top:50%; width:14px; height:14px; margin-left:-7px;
  background:var(--white); border:2px solid var(--ink); border-radius:50%;
  transform:translateY(-50%); cursor:pointer; outline:none;
}
.price_slider_amount{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.price_slider_amount .button{
  border:1px solid var(--ink); background:var(--ink); color:var(--ivory);
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  padding:8px 16px; border-radius:2px; cursor:pointer;
}
.price_slider_amount .button:hover{ background:transparent; color:var(--ink); }
.price_label{ font-size:12px; color:var(--ink-soft); }
.widget_price_filter .filter-group-label{ margin-bottom:4px; }

/* Concern / Ingredient checkbox filters */
.lf-checkbox-filter{ display:flex; flex-direction:column; gap:10px; }
.lf-filter-checkbox{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; }
.lf-filter-checkbox input{ width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }

/* Single product (PDP) — WooCommerce's default single-product structure
   already puts .images and .summary as siblings inside .product, so no
   template override needed: just lay them out as the Phase 2.3 mockup does. */
/* .product renders inside <main class="site-main container">, which
   already caps width at --container-max and adds 32px side padding — the
   side padding here was redundant on top of that (double-padded the PDP,
   stealing 64px of gallery width versus every other page), so only the
   top spacing (breadcrumb gap) stays. */
.woocommerce div.product{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:56px;
  padding:28px 0 0;
}
/* Gallery gets the dominant share of the width, summary stays a narrow
   fixed-ish column — matches the ~72/28 split measured on The Ordinary's
   PDP (2026-10-27 research), not an even 50/50 split. */
.woocommerce div.product div.images{ flex:1 1 520px; min-width:0; width:auto !important; }
.woocommerce div.product div.summary{
  flex:0 1 380px; min-width:280px; max-width:400px; width:auto !important;
  background:var(--ivory-deep); border:1px solid var(--line); border-radius:6px;
  padding:28px 28px 32px;
}
/* Key Benefits reads as a section within the one panel (divider only),
   not its own boxed-off card — per spec, 2026-10-27: "remove the separate
   white background from the benefits box... use spacing or a thin divider
   to distinguish sections" instead. */
.summary .lf-key-benefits-box{
  background:none; border-top:1px solid var(--line); border-radius:0;
  padding:18px 0 0; margin:4px 0 0;
}
.woocommerce div.product div.images img{ border-radius:4px; }
.woocommerce-product-gallery__image{ background:var(--ivory-deep); border-radius:4px; }

/* PDP gallery — vertical thumbnail rail + single large image, main image
   swaps on thumbnail click (Phase 3.32, replaces the earlier mosaic grid
   after benchmarking The Ordinary's PDP, 2026-10-27). */
.lf-pdp-gallery{ display:flex; align-items:flex-start; gap:12px; }
.lf-pdp-thumbs{
  display:flex; flex-direction:column; gap:10px; flex:0 0 128px; width:128px;
}
.lf-pdp-thumb{
  border:1px solid var(--line); padding:0; margin:0; background:var(--ivory-deep); border-radius:4px;
  overflow:hidden; cursor:pointer; aspect-ratio:1/1; display:block; flex:0 0 auto;
}
.lf-pdp-thumb.active{ border-color:var(--ink); border-width:2px; }
.lf-pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lf-pdp-main{ flex:1; min-width:0; }
.lf-pdp-main-btn{
  display:block; width:100%; border:none; padding:0; margin:0; background:var(--ivory-deep);
  border-radius:4px; overflow:hidden; cursor:zoom-in; aspect-ratio:1/1;
}
.lf-pdp-main-btn img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mobile: full-width hero image first, thumbnails become a horizontal
   scroll strip below it (audit finding F01, 2026-10-27) — the desktop
   vertical-rail-beside-hero layout left only ~203×203px for the hero on a
   390px-wide screen, pushing the product name and buy box far down the
   page behind a wall of thumbnails and empty space. */
@media (max-width:782px){
  .lf-pdp-gallery{ flex-direction:column; }
  .lf-pdp-main{ width:100%; order:1; }
  .lf-pdp-thumbs{
    flex-direction:row; width:100%; flex:0 0 auto; order:2;
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
  }
  .lf-pdp-thumb{ flex:0 0 72px; width:72px; }
}

/* Simple built-in lightbox for the mosaic — no external library */
.lf-lightbox{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(26,22,18,0.92); align-items:center; justify-content:center; padding:32px;
}
.lf-lightbox.open{ display:flex; }
.lf-lightbox img{ max-width:100%; max-height:100%; border-radius:4px; }
.lf-lightbox-close{
  position:absolute; top:20px; right:24px; border:none; background:none;
  color:var(--ivory); font-size:36px; line-height:1; cursor:pointer;
}
.summary .product_title{ font-size:32px; margin:0 0 6px; }
.lf-pdp-eyebrow{ display:block; margin-bottom:8px; }
.lf-trust-row{ display:flex; gap:20px; padding-top:16px; border-top:1px solid var(--line); margin-top:24px; }
.lf-trust-row span{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
.summary .price{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--ink); display:inline-block; margin:8px 12px 16px 0; }
.summary .price del{ color:var(--ink-soft); font-weight:400; font-size:0.7em; }
.summary .price ins{ text-decoration:none; }
.lf-bottle-size{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.05em;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:3px; padding:4px 9px;
  vertical-align:middle; margin-bottom:16px;
}
.lf-key-benefits-box{
  background:var(--ivory-deep); border-radius:4px; padding:20px 22px; margin:4px 0 20px;
}
.lf-key-benefits-box h3{ font-family:'Fraunces',serif; font-size:16px; margin:0 0 12px; }
.lf-key-benefits-box ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.lf-key-benefits-box li{ font-size:13px; line-height:1.5; color:var(--ink-soft); display:flex; align-items:flex-start; gap:8px; }
.woocommerce-product-details__short-description p{ margin:0; }
form.cart{ display:flex; gap:12px; align-items:stretch; margin-top:20px; }

/* YITH "Add to wishlist" link — give it the same quiet, small-print
   treatment as the trust row instead of sitting flush under Add to Bag. */
.yith-add-to-wishlist-button-block{ margin-top:14px; }
.yith-wcwl-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button,
.yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button{
  font-size:13px; color:var(--ink-soft);
}

/* Category meta line now renders after the trust row (and after
   "Recommended for" when present) — give it the same small-print
   treatment instead of crowding straight under them. */
.summary .product_meta{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.summary .product_meta a{ color:var(--ink-soft); }
form.cart .quantity{ display:flex; align-items:center; border:1px solid var(--line); border-radius:2px; flex:0 0 auto; }
/* `.woocommerce form input.input-text{ width:100% }` (added later for the
   checkout/My Account form pass) has higher specificity than the plain
   `form.cart .qty` rule above and was winning — the quantity box
   stretched to fill all available flex space (221px instead of 50px),
   squeezing the real Add to Bag button down to ~87px and wrapping its
   text onto 3 lines ("ADD" / "TO" / "BAG") on every PDP (user-flagged
   2026-10-27, live screenshot on Ultra Repair Body Moisturizer).
   `.input-text.qty` matches both classes so it wins on specificity
   without needing `!important`. */
.woocommerce form input.input-text.qty{ width:50px; border:none; text-align:center; font-size:14px; padding:12px 0; }
form.cart .single_add_to_cart_button{ white-space:nowrap; }
.woocommerce form.cart button.single_add_to_cart_button.button.alt,
.woocommerce #respond input#submit.single_add_to_cart_button,
form.cart button.single_add_to_cart_button{
  flex:1 !important; background:var(--ink) !important; color:var(--ivory) !important; border:none !important; padding:0 24px !important;
  font-size:13px !important; letter-spacing:0.08em !important; text-transform:uppercase !important; font-weight:600 !important;
  border-radius:2px !important; cursor:pointer !important; box-shadow:none !important; text-shadow:none !important;
}
.woocommerce form.cart button.single_add_to_cart_button.button.alt:hover{ background:var(--gold) !important; color:var(--ink) !important; }

/* WooCommerce ships a default purple accent via :root custom props — override at the source */
.woocommerce{
  --wc-primary: var(--ink);
  --wc-primary-text: var(--ivory);
  --wc-secondary: var(--ivory-deep);
  --wc-secondary-text: var(--ink);
  --wc-highlight: var(--gold);
  --wc-highlight-text: var(--ink);
  --wc-content-bg: var(--white);
  --wc-subtext: var(--ink-soft);
}
.woocommerce-product-details__short-description{ font-size:15px; line-height:1.65; color:var(--ink-soft); }
/* PDP info accordion (Overview / Key Ingredients / Usage Details) — real
   <details>/<summary>, no JS, matches the collapsible pattern on The
   Ordinary's PDP (2026-10-27). Reviews is deliberately NOT part of this —
   see .lf-reviews-section below. */
.lf-accordion-tab{ border-bottom:1px solid var(--line); }
.lf-accordion-tab:first-child{ border-top:1px solid var(--line); }
/* The last accordion tab (FAQs) already ends with its own last FAQ
   item's `.lf-faq-item{ border-bottom }` line, then 28px of dead padding
   from `.woocommerce-tabs .panel` below, THEN this tab's own closing
   border — two hairlines of the identical color ~28px apart read as an
   empty collapsed row (user: "what is this empty or something is hidden
   here", live PDP screenshot). `.lf-reviews-section` right after already
   supplies its own `border-top`, so this tab's trailing border is
   redundant — drop just this one, not the dividers between tabs. */
.lf-accordion-tab:last-child{ border-bottom:none; }
.lf-accordion-tab summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--ink);
}
.lf-accordion-tab summary::-webkit-details-marker{ display:none; }
.lf-accordion-chevron{ flex:0 0 auto; color:var(--ink-soft); transition:transform 0.2s ease; }
.lf-accordion-tab[open] .lf-accordion-chevron{ transform:rotate(180deg); }
.lf-accordion-tab[open] summary{ color:var(--gold-text); }
@media (prefers-reduced-motion: reduce){
  .lf-accordion-chevron{ transition:none !important; }
}
.woocommerce-tabs .panel{ padding:0 0 28px; font-size:14px; line-height:1.7; color:var(--ink-soft); max-width:720px; }

/* Reviews — always visible, not collapsible, sits after every accordion
   tab (user asked for this placement/behavior 2026-10-27). Same visual
   language as the accordion headers so it still reads as part of the set. */
.lf-reviews-section{ border-top:1px solid var(--line); padding-top:4px; }
.lf-reviews-section-title{
  font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--gold-text);
  padding:20px 0 0; margin:0;
}
.lf-reviews-section .woocommerce-Tabs-panel{ padding-top:20px; }
/* Key Ingredients + Usage Details need more room than the 720px text cap
   — the ingredient card grid and the 4 usage items read better wider. */
.woocommerce-Tabs-panel--lf_key_ingredients.panel,
.woocommerce-Tabs-panel--lf_usage_details.panel{ max-width:none; }

/* Usage Details — 4 real image cards, each opening a slide-in flyout
   (matches The Ordinary's PDP pattern). */
.lf-usage-cards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.lf-usage-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  border:none; background:none; padding:0; cursor:pointer; text-align:left; font-family:'Inter',sans-serif;
}
.lf-usage-card-img{ display:block; width:100%; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--ivory-deep); }
.lf-usage-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s ease; }
.lf-usage-card:hover .lf-usage-card-img img{ transform:scale(1.04); }
.lf-usage-card-title{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink);
}
.lf-usage-card-title svg{ color:var(--ink-soft); transition:transform 0.15s ease; }
.lf-usage-card:hover .lf-usage-card-title svg{ transform:translateX(3px); }
.lf-usage-card-link{ font-size:12px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .lf-usage-card-img img, .lf-usage-card-title svg{ transition:none !important; }
  .lf-usage-card:hover .lf-usage-card-img img, .lf-usage-card:hover .lf-usage-card-title svg{ transform:none !important; }
}
@media (max-width:900px){
  .lf-usage-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .lf-usage-cards{ grid-template-columns:1fr; }
}

/* Slide-in flyout panel, shared instance filled by JS. */
.lf-usage-flyout{ display:none; position:fixed; inset:0; z-index:200; }
.lf-usage-flyout.open{ display:block; }
.lf-usage-flyout-backdrop{ position:absolute; inset:0; background:rgba(26,22,18,0.4); }
.lf-usage-flyout-panel{
  position:absolute; top:0; right:0; bottom:0; width:92%; max-width:440px;
  background:var(--white); overflow-y:auto; padding:40px 32px;
  transform:translateX(100%); transition:transform 0.3s ease;
}
.lf-usage-flyout.open .lf-usage-flyout-panel{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  .lf-usage-flyout-panel{ transition:none !important; }
}
.lf-usage-flyout-close{
  position:absolute; top:16px; right:20px; border:none; background:none;
  font-size:28px; line-height:1; color:var(--ink-soft); cursor:pointer;
}
.lf-usage-flyout-body h3{ font-family:'Fraunces',serif; font-size:22px; margin:0 0 20px; padding-right:24px; }
.lf-usage-flyout-body p{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px; }
.lf-usage-panel-content{ display:none; }
/* Labeled sections within the Description tab (Description/Key Benefits/
   Ingredients are real content headings — give them real visual separation
   instead of just inline bold text, per the rubric's PDP-hierarchy ask). */
.woocommerce-tabs .panel h2{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  color:var(--gold-text); font-family:'Inter',sans-serif; margin:0 0 14px;
}
.woocommerce-tabs .panel h3,
.woocommerce-tabs .panel h4{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  color:var(--gold-text); font-family:'Inter',sans-serif;
  margin:32px 0 14px; padding-top:28px; border-top:1px solid var(--line);
}
.woocommerce-tabs .panel h3:first-child,
.woocommerce-tabs .panel h4:first-child{ padding-top:0; border-top:none; margin-top:0; }
.woocommerce-tabs .panel ul{ padding-left:18px; margin:0; }
.woocommerce-tabs .panel li{ margin-bottom:6px; }
.lf-claim-disclosure{ font-size:11px; color:var(--ink-soft); margin-top:24px !important; padding-top:0 !important; border-top:none !important; }

/* FAQ tab — nested accordion (reuses the outer tab's details/summary
   pattern at a smaller scale). */
.lf-faq-list{ display:flex; flex-direction:column; gap:0; }
.lf-faq-item{ border-bottom:1px solid var(--line); }
.lf-faq-item:first-child{ border-top:1px solid var(--line); }
.lf-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none;
}
.lf-faq-item summary::-webkit-details-marker{ display:none; }
.lf-faq-chevron{ flex-shrink:0; color:var(--ink-soft); transition:transform 0.2s ease; }
.lf-faq-item[open] .lf-faq-chevron{ transform:rotate(180deg); }
.lf-faq-answer{ padding:0 0 18px; }
.lf-faq-answer p{ font-size:13px; line-height:1.7; color:var(--ink-soft); margin:0; }
.lf-faq-answer a{ color:var(--gold-text); text-decoration:underline; }
/* margin-bottom mirrors margin-top — without it the product grid ran
   straight into the footer with zero gap (user-flagged 2026-10-27). */
/* div.product is display:flex (gallery + summary columns); anything
   appended after it via woocommerce_after_single_product_summary — this,
   and our own newsletter section — becomes a flex item too and shrinks to
   its own content width instead of spanning the row, unless forced full
   width here (user-flagged 2026-10-27: the newsletter section rendered as
   a narrow box with dead space beside it, not full-width like the
   Forest Essentials reference). */
.related.products{ margin-top:72px; margin-bottom:72px; flex:1 1 100%; width:100%; }

/* Newsletter — real signup (inc/newsletter.php), two layouts sharing one
   look: --split (homepage, lifestyle image) and --compact (PDP, after
   Related Products, no image — just the signup). */
.lf-newsletter-section{ background:var(--ivory-deep); }
.lf-newsletter-section--split{ margin-top:96px; }
.lf-newsletter-split{ display:flex; flex-wrap:wrap; align-items:center; gap:0; min-height:360px; }
.lf-newsletter-split-text{ flex:1 1 420px; min-width:0; padding:72px 32px; display:flex; flex-direction:column; gap:16px; }
.lf-newsletter-split-text h2{ font-size:30px; margin:0; }
.lf-newsletter-split-text > p{ font-size:14px; color:var(--ink-soft); margin:0; max-width:420px; }
.lf-newsletter-split-image{ flex:1 1 420px; min-width:280px; align-self:stretch; }
.lf-newsletter-split-image img{ width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
.lf-newsletter-split-placeholder{
  width:100%; height:100%; min-height:360px; background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink-soft); font-family:'Fraunces',serif;
}

/* Full-bleed (same width:100vw + negative-margin technique used for the
   trust-badges section elsewhere) — a centered band spanning the whole
   viewport, matching the premium-competitor reference (Forest Essentials)
   the user pointed to, not a narrow boxed card with dead space beside it. */
.lf-newsletter-section--compact{
  margin-top:72px; padding:80px 32px; text-align:center;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.lf-newsletter-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:520px; margin:0 auto; }
.lf-newsletter-inner h2{ font-size:30px; margin:0; }
.lf-newsletter-inner > p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:440px; }

.lf-newsletter-form{
  display:flex; width:100%; max-width:420px; margin-top:8px;
  border:1px solid var(--ink); border-radius:2px; overflow:hidden;
}
.lf-newsletter-email{
  flex:1; min-width:0; border:none; background:transparent; padding:14px 16px;
  font-size:14px; font-family:'Inter',sans-serif; outline:none;
}
.lf-newsletter-form button{
  border:none; background:var(--ink); color:var(--ivory); padding:14px 24px;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  cursor:pointer; flex-shrink:0;
}
.lf-newsletter-form button:disabled{ opacity:0.6; cursor:not-allowed; }
.lf-newsletter-message{ font-size:13px; margin-top:4px; min-height:18px; }
.lf-newsletter-message.success{ color:var(--sage); }
.lf-newsletter-message.error{ color:var(--clay); }
.related.products h2{ font-size:28px; margin-bottom:28px; }
.related.products ul.products{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
/* WooCommerce's bundled stylesheet puts a float-clearfix ::before/::after
   (content:" "; display:table) on ul.products for its old float-based grid.
   Once this is display:grid, that pseudo-element becomes a real grid item
   occupying column 1, pushing every actual product into column 2+ — found
   2026-10-27 (single related product rendering in column 2 with a phantom
   empty column 1). Clearfix is meaningless for grid layouts anyway. */
.related.products ul.products::before,
.related.products ul.products::after{ content:none; display:none; }

/* Cart — real 2-column grid (user pointed at The Ordinary's cart layout
   specifically, 2026-10-27): items + upsell in the left column, order
   summary fixed in the right column at the same starting height, not
   everything stacked in one column with totals pushed far down the page. */
.lf-cart-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start; }
.lf-cart-grid > *{ grid-column:1; }
.lf-cart-grid > .woocommerce-cart-form{ grid-column:1; grid-row:1; }
/* Was pinned to column 1 only (828px on a 1320px container) — the order
   summary box in column 2 is only ever one row tall, so everything below
   it in that column sat permanently empty once the upsell row started,
   a visibly dead ~380px-wide strip right beside the product cards (user:
   "why the fuck you are not using this space", live /cart/ screenshot,
   2026-10-27). Spanning both columns lets the upsell row use the real
   full cart-grid width instead of just the left one. */
.lf-cart-grid > .lf-cart-upsell{ grid-column:1 / -1; grid-row:2; }
.lf-cart-grid > .cart-collaterals{ grid-column:2; grid-row:1; margin-top:0; }
@media (max-width:900px){
  .lf-cart-grid{ grid-template-columns:1fr; gap:0; }
  .lf-cart-grid > .woocommerce-cart-form,
  .lf-cart-grid > .lf-cart-upsell,
  .lf-cart-grid > .cart-collaterals{ grid-column:1; }
  .lf-cart-grid > .woocommerce-cart-form{ grid-row:1; }
  .lf-cart-grid > .cart-collaterals{ grid-row:2; margin-top:40px; }
  .lf-cart-grid > .lf-cart-upsell{ grid-row:3; }
}

/* Cart "You May Also Like" — same card grid pattern as Related Products.
   First pass (2026-10-27) capped this at 2 columns + max-width:640px to
   give each card more room, reasoning the 4-across row was too narrow —
   but that cap was the real mistake: it artificially shrank the grid to
   640px and left a big dead strip of unused space to the right of it on
   any real desktop width (user, correctly: "why 2x2 why not 1x4 when we
   have space clearly"). The actual fix is to let 4 columns use the FULL
   real width of the left column (no cap) — `minmax(0,1fr)` sizes each
   card off the genuinely available space (~190-210px+ on a 1320px
   container, not the ~150px measured on a narrower view), one row of 4,
   same row The Ordinary's cart uses. */
.lf-cart-upsell{ margin-top:48px; }
.lf-cart-upsell h2{ font-size:22px; margin:0 0 20px; font-family:'Fraunces',serif; }
.lf-cart-upsell-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.lf-cart-upsell-grid::before, .lf-cart-upsell-grid::after{ content:none; display:none; }
@media (max-width:900px){
  .lf-cart-upsell-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .lf-cart-upsell-grid{ grid-template-columns:1fr; }
}

/* "Our Ingredients" page — each card links to the shop pre-filtered by
   that ingredient (reuses the real ?ingredient= filter already built for
   the Concern/Ingredient sidebar, Phase 3.30). */
.lf-ingredient-card{ transition:box-shadow 0.2s ease, transform 0.2s ease; }
.lf-ingredient-card:hover{ box-shadow:0 8px 24px rgba(43,36,32,0.1); transform:translateY(-2px); }
.lf-ingredient-found-in{
  font-size:11px; font-weight:600; color:var(--gold-text); white-space:nowrap;
  border:1px solid var(--gold-soft); border-radius:20px; padding:4px 10px;
}
.lf-ingredient-card:hover .lf-ingredient-found-in{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
@media (prefers-reduced-motion: reduce){
  .lf-ingredient-card{ transition:none !important; }
  .lf-ingredient-card:hover{ transform:none !important; }
}

.lf-review-location{ font-size:12px; color:var(--ink-soft); }
.lf-review-location::before{ content:'· '; }

/* Reviews — real-data styling pass (spacing, initial-letter avatars,
   hide-by-default review form), user-reported 2026-10-27. Overrides
   WooCommerce's bundled generic comment-list styling. */
/* The review-count link jumps straight to #reviews; without this the
   sticky header (position:sticky, always on top) landed right over the
   "N reviews for..." heading (audit finding F07, 2026-10-27). */
#reviews{ scroll-margin-top:100px; }
.woocommerce-Reviews-title{
  font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:var(--ink);
  margin:24px 0 28px;
}
.woocommerce-Reviews-title span{ color:var(--gold-text); }
.lf-rating-distribution{ max-width:320px; margin:0 0 32px; display:flex; flex-direction:column; gap:6px; }
.lf-rating-distribution-row{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-soft); }
.lf-rating-distribution-label{ width:24px; flex-shrink:0; }
.lf-rating-distribution-bar{ flex:1; height:6px; background:var(--ivory-deep); border-radius:3px; overflow:hidden; }
.lf-rating-distribution-bar span{ display:block; height:100%; background:var(--gold); border-radius:3px; }
.lf-rating-distribution-count{ width:22px; text-align:right; flex-shrink:0; }
.commentlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.commentlist .comment{ border:1px solid var(--line); border-radius:4px; padding:18px 20px; }
.comment_container{ display:flex; gap:14px; align-items:flex-start; }
.lf-review-avatar{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ivory); font-family:'Fraunces',serif; font-size:16px; font-weight:600;
}
.comment-text{ flex:1; min-width:0; }
.comment-text .meta{ display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; margin:0 0 6px; font-size:13px; }
.comment-text .star-rating{ margin-bottom:8px; }
.comment-text .description p{ margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--ink); }
.comment-text .description p:last-child{ margin-bottom:0; }

/* "Write a Review" — form hidden by default, revealed on click, instead
   of always showing inline. */
.lf-write-review-btn{
  margin-top:28px; padding:12px 28px; background:none; border:1px solid var(--ink);
  border-radius:2px; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink); cursor:pointer;
}
.lf-write-review-btn:hover{ background:var(--ink); color:var(--ivory); }
.lf-review-form-wrapper{ margin-top:24px; max-width:560px; }
#review_form .comment-reply-title{ font-family:'Fraunces',serif; font-size:18px; display:block; margin-bottom:16px; }
#review_form .comment-form-rating select,
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea{
  width:100%; border:1px solid var(--line); border-radius:2px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:14px; margin-top:4px;
}
#review_form p{ margin:0 0 16px; }
#review_form label{ font-size:13px; font-weight:600; color:var(--ink); }
#review_form .form-submit input{
  background:var(--ink); color:var(--ivory); border:none; padding:12px 28px;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:2px; cursor:pointer;
}
#review_form .form-submit input:hover{ background:var(--gold); color:var(--ink); }

/* Our Ingredients page — search + sort toolbar, plus real-data use filters
   (Skin/Hair/Baby/Anti-Aging), derived from which real product categories
   each ingredient's products actually belong to. */
.lf-ingredient-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.lf-ingredient-search-wrap{
  display:flex; align-items:center; gap:10px; flex:1 1 280px; max-width:360px;
  border:1px solid var(--line); border-radius:4px; padding:10px 14px; background:var(--white);
  color:var(--ink-soft);
}
.lf-ingredient-search-wrap:focus-within{ border-color:var(--gold); }
.lf-ingredient-search-wrap input{
  border:none; outline:none; font-size:14px; font-family:'Inter',sans-serif; flex:1; background:transparent; color:var(--ink);
}
.lf-ingredient-sort{ display:flex; gap:4px; }
.lf-ingredient-sort-btn{
  border:none; background:none; color:var(--ink-soft); font-size:12px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase; padding:8px 12px; cursor:pointer; border-radius:4px;
}
.lf-ingredient-sort-btn:hover{ color:var(--ink); }
.lf-ingredient-sort-btn.active{ color:var(--ink); background:var(--ivory-deep); }
.lf-ingredient-count{ font-size:12px; color:var(--ink-soft); margin-left:auto; }
.lf-ingredient-filter-btn{
  border:1px solid var(--line); background:var(--white); color:var(--ink-soft);
  font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  padding:9px 18px; border-radius:20px; cursor:pointer;
}
.lf-ingredient-filter-btn:hover{ border-color:var(--gold); color:var(--ink); }
.lf-ingredient-filter-btn.active{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

/* PDP Hero Ingredients cards — real per-product data imported from the
   live site. */
.lf-hero-ingredients{ margin-top:64px; }
.lf-hero-ingredients .eyebrow{ display:block; margin-bottom:8px; }
.lf-hero-ingredients h2{ font-family:'Fraunces',serif; font-size:28px; margin:0 0 28px; max-width:420px; }
.lf-hero-ingredients-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 24px; }
.lf-hero-ingredient-card{ display:flex; flex-direction:column; }
.lf-hero-ingredient-img{
  width:100%; aspect-ratio:1/1; border-radius:4px; object-fit:cover;
  background:var(--ivory-deep); margin-bottom:18px;
}
.lf-hero-ingredient-card h3{ font-size:18px; font-weight:700; margin:0 0 8px; }
.lf-hero-ingredient-card p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }
.lf-hero-ingredients-viewall{
  display:inline-flex; align-items:center; gap:8px; margin-top:28px;
  font-size:14px; font-weight:700; color:var(--ink); text-decoration:none;
}
.lf-hero-ingredients-viewall svg{ color:var(--ink); transition:transform 0.15s ease; }
.lf-hero-ingredients-viewall:hover svg{ transform:translateX(3px); }
.lf-hero-ingredients-viewall{ border:none; background:none; padding:0; cursor:pointer; font-family:inherit; }

/* "View All Ingredients" popup — real per-product full INCI list. */
.lf-ingredients-modal{
  display:none; position:fixed; inset:0; z-index:210;
  align-items:center; justify-content:center; padding:24px;
}
.lf-ingredients-modal.open{ display:flex; }
.lf-ingredients-modal-backdrop{ position:absolute; inset:0; background:rgba(26,22,18,0.5); }
.lf-ingredients-modal-panel{
  position:relative; background:var(--white); border-radius:6px; max-width:560px; width:100%;
  max-height:80vh; overflow-y:auto; padding:40px 36px;
}
.lf-ingredients-modal-close{
  position:absolute; top:16px; right:18px; border:none; background:none;
  color:var(--ink-soft); font-size:28px; line-height:1; cursor:pointer;
}
.lf-ingredients-modal-panel h3{ font-family:'Fraunces',serif; font-size:22px; margin:0 0 6px; }
.lf-ingredients-modal-product{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-text); margin:0 0 18px; }
.lf-ingredients-modal-text{ font-size:13px; line-height:1.8; color:var(--ink-soft); margin:0; }

/* Search overlay — real product search (desktop header icon + mobile tab bar). */
.lf-search-overlay{
  display:none; position:fixed; inset:0; z-index:220;
  align-items:flex-start; justify-content:center; padding:0;
}
.lf-search-overlay.open{ display:flex; }
.lf-search-overlay-backdrop{ position:absolute; inset:0; background:rgba(26,22,18,0.5); }
.lf-search-overlay-panel{
  position:relative; background:var(--white); width:100%; max-width:640px;
  margin-top:0; padding:28px 60px 28px 28px; box-shadow:0 8px 24px rgba(26,22,18,0.12);
}
.lf-search-form{ display:flex; align-items:center; gap:12px; }
.lf-search-input{
  flex:1; border:none; border-bottom:2px solid var(--line); background:none;
  font-family:'Fraunces',serif; font-size:22px; color:var(--ink); padding:8px 0; outline:none;
}
.lf-search-input:focus{ border-bottom-color:var(--gold); }
.lf-search-submit{
  flex-shrink:0; border:none; background:var(--ink); color:var(--ivory);
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lf-search-submit:hover{ background:var(--ink-soft); }
.lf-search-overlay-close{
  position:absolute; top:24px; right:24px; border:none; background:none;
  color:var(--ink-soft); font-size:28px; line-height:1; cursor:pointer;
}
@media (max-width:600px){
  .lf-search-overlay-panel{ padding:22px 50px 22px 20px; }
  .lf-search-input{ font-size:18px; }
}
@media (max-width:900px){
  .lf-hero-ingredients-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .lf-hero-ingredients-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 14px; }
}

/* PDP trust badges + philosophy — real, site-wide (same badge set and
   wording on every product page on the live site). Background is
   deliberately full-bleed (breaks out of the page's constrained content
   width) so the colored box doesn't visually stop short of the viewport
   edge on wide screens — the site-wide content-width cap stays, this is
   just the background color, same "full-bleed section, constrained
   content inside" pattern used by the dark announcement bar and header.
   Content itself (badges row, philosophy text) keeps its own max-width. */
.lf-trust-badges{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:64px; padding:48px 32px; background:var(--ivory-deep); text-align:center;
}
.lf-trust-badges h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 32px; }
.lf-trust-badges-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:36px;
  max-width:1060px; margin:0 auto;
}
.lf-trust-badge{ display:flex; flex-direction:column; align-items:center; gap:10px; width:96px; }
.lf-trust-badge img{ width:28px; height:28px; display:block; }
.lf-trust-badge span{ font-size:12px; color:var(--ink-soft); line-height:1.3; }
.lf-philosophy{ max-width:680px; margin:48px auto 0; }
.lf-philosophy h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 16px; }
.lf-philosophy p{ font-size:14px; line-height:1.75; color:var(--ink-soft); margin:0; }

/* Cart + Checkout
   Rebuilt 2026-10-27 after fully dequeuing WooCommerce's own default
   stylesheet (user: "not a single WooCommerce default styling left") —
   that stylesheet was quietly doing all the real layout work (column
   widths, the remove-button circle, the coupon/update-cart row, the
   totals box positioning); killing it without replacing that structural
   CSS broke the page outright, so everything below is real replacement
   layout, not just color/font polish. */
.woocommerce-cart-form table, .shop_table{ width:100%; border-collapse:collapse; }
.shop_table th{ text-align:left; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); padding:12px 16px 12px 0; border-bottom:1px solid var(--line); }
.shop_table td{ padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.shop_table th:last-child, .shop_table td:last-child{ padding-right:0; }

.woocommerce-cart-form table th.product-remove,
.woocommerce-cart-form table td.product-remove{ width:32px; padding-right:0; }
.woocommerce-cart-form table th.product-thumbnail,
.woocommerce-cart-form table td.product-thumbnail{ width:72px; }
.woocommerce-cart-form table td.product-thumbnail img{
  width:64px; height:64px; object-fit:cover; border-radius:3px; display:block;
}
.woocommerce-cart-form table td.product-name a{ color:var(--ink); font-weight:600; }
.woocommerce-cart-form table th.product-price,
.woocommerce-cart-form table td.product-price,
.woocommerce-cart-form table th.product-subtotal,
.woocommerce-cart-form table td.product-subtotal{ text-align:right; white-space:nowrap; }
.woocommerce-cart-form table th.product-quantity,
.woocommerce-cart-form table td.product-quantity{ text-align:center; }

a.remove{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  color:var(--ink-soft) !important; font-size:16px; line-height:1; text-decoration:none !important;
}
a.remove:hover{ background:var(--clay); border-color:var(--clay); color:var(--white) !important; }

.quantity{ display:inline-flex; }
.quantity .qty, input.qty{
  width:56px; border:1px solid var(--line); border-radius:2px; padding:9px 10px;
  font-size:14px; font-family:'Inter',sans-serif; text-align:center;
}

/* display:flex directly on a <td> breaks the table's colspan width
   calculation in this browser (confirmed live: a colspan="6" actions row
   collapsed to ~200px instead of the full table width) — floats on the
   cell's children + a clearfix on the cell sidestep that quirk entirely. */
tr td.actions{ border-bottom:none; padding-top:20px; overflow:hidden; }
.coupon{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; float:left; }
#coupon_code{ border:1px solid var(--line); border-radius:2px; padding:11px 14px; font-size:13px; min-width:200px; }
button[name="apply_coupon"], button[name="update_cart"]{
  border:1px solid var(--ink); background:transparent; padding:0 18px; height:40px;
  font-size:12px; font-weight:600; text-transform:uppercase; border-radius:2px; cursor:pointer; white-space:nowrap;
}
button[name="update_cart"]{ float:right; }
.checkout-coupon-note{ font-size:11px; color:var(--ink-soft); clear:both; display:block; margin:12px 0 0; }

.cart-collaterals{ display:flex; justify-content:flex-end; margin-top:40px; }
.cart-collaterals .cart_totals{ background:var(--white); border:1px solid var(--line); border-radius:3px; padding:28px; width:100%; max-width:400px; }
.cart_totals h2{ font-family:'Fraunces',serif; font-size:19px; margin:0 0 20px; padding:0; }
.cart_totals table{ width:100%; border-collapse:collapse; }
.cart_totals table th, .cart_totals table td{ padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; text-align:left; }
.cart_totals table th{ font-weight:500; color:var(--ink-soft); text-transform:none; letter-spacing:normal; }
.cart_totals table td{ text-align:right; }
.cart_totals .order-total th, .cart_totals .order-total td{ border-bottom:none; }
.cart_totals .order-total th{ font-weight:600; color:var(--ink); }
.cart_totals .order-total .amount{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; }
.wc-proceed-to-checkout{ margin-top:20px; }
.wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; text-align:center; padding:16px 24px; }
@media (max-width:600px){
  .cart-collaterals{ justify-content:stretch; }
  .cart-collaterals .cart_totals{ max-width:none; }
}

/* Catch-all: every WooCommerce button (Proceed to Checkout, Place Order,
   Apply Coupon, Update Cart, etc.) uses the design-system ink/gold pair,
   not WooCommerce's default purple. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-proceed-to-checkout a.checkout-button{
  background:var(--ink) !important; color:var(--ivory) !important; border:none !important;
  border-radius:2px !important; font-weight:600 !important; text-transform:uppercase !important;
  letter-spacing:0.06em !important; box-shadow:none !important; text-shadow:none !important;
  text-decoration:none !important; display:inline-block !important; cursor:pointer;
  padding:12px 22px !important; font-size:12px !important; line-height:1.4 !important; vertical-align:middle;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--gold) !important; color:var(--ink) !important;
}
.cart_totals h2{ padding:0 0 0 0; }

/* Form-row/input/select styling applies to every WooCommerce form
   site-wide — checkout, My Account addresses, account details, register —
   not just the checkout page. Scoping this to .woocommerce-checkout only
   (the original version) left every other WC form on the site completely
   unstyled: labels and inputs running together with no line break
   (user-flagged 2026-10-27, found on My Account → Addresses). */
/* Checkout — real 2-column layout (user asked for this directly,
   2026-10-27, after seeing it work on Cart): Billing details + Additional
   information in the left column, "Your order" pinned in the right
   column at the same height — same technique as the Cart grid (no
   template override, just placing the form's own real direct children
   via CSS Grid). Replaces the earlier flat max-width cap, which is no
   longer the right fix now that there's a real right column to fill. */
.woocommerce-checkout form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:start; }
.woocommerce-checkout form.checkout > *{ grid-column:1; }
/* "Your order" heading + #order_review used to be placed as two SEPARATE
   grid items (row 1 + row 2). Since row 1 was shared with the much
   taller Billing-details column, row 1's auto height stretched to match
   it, and the order table (row 2) only started after that — a huge
   empty gap under "Your order" (user-flagged 2026-10-27, live
   screenshot). They're now wrapped server-side into one `.lf-checkout-
   order-col` element (see functions.php) so both sit together, pinned
   to row 1 at the same height as Billing details. */
.woocommerce-checkout form.checkout > .lf-checkout-order-col{ grid-column:2; grid-row:1; }
.woocommerce-checkout form.checkout > .lf-checkout-order-col #order_review_heading{ margin-top:0; }
@media (max-width:900px){
  .woocommerce-checkout form.checkout{ grid-template-columns:1fr; gap:0; }
  /* The ID-selector rule above out-specificities a universal `*` reset,
     so "Your order" stayed pinned to column 2 even inside this media
     query and rendered above Billing details on mobile (found via real
     device-width testing, 2026-10-27) — matching the same selector here
     to actually win the cascade. */
  .woocommerce-checkout form.checkout > *,
  .woocommerce-checkout form.checkout > .lf-checkout-order-col{ grid-column:1; grid-row:auto; }
}
/* Stacked (Additional information below Billing details), not side by
   side — with the new left/right checkout grid above, a 3rd inner column
   here left "Your order" stranded in a third lane with dead space under
   the order-notes box instead of reading as one clean 2-column page. */
.woocommerce-checkout .col2-set{ display:block; }
.woocommerce-checkout .col2-set .col-1{ margin-bottom:32px; }
.woocommerce form .form-row label{ font-size:12px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
.woocommerce form input.input-text, .woocommerce form select,
.woocommerce form textarea{
  width:100%; border:1px solid var(--line); border-radius:2px; padding:12px 14px; font-size:14px; font-family:'Inter',sans-serif;
  display:block;
}
.woocommerce form textarea{ min-height:90px; resize:vertical; }
.woocommerce form .form-row{ margin-bottom:18px; }
.woocommerce form .form-row-wide{ clear:both; }
/* Real WooCommerce field-pairing classes (form-row-first/-last) — these
   already exist on First/Last name, and on City/State/PIN/Phone after the
   re-pairing filter below — restoring the side-by-side layout WooCommerce's
   own (now-removed) default stylesheet used to provide, so two related
   fields share one row instead of the whole form being one field per row
   top to bottom (user: "we can have two columns"). */
.woocommerce form .form-row-first{ float:left; width:calc(50% - 12px); clear:both; }
.woocommerce form .form-row-last{ float:right; width:calc(50% - 12px); }
@media (max-width:500px){
  .woocommerce form .form-row-first, .woocommerce form .form-row-last{ float:none; width:100%; }
}
.woocommerce .select2-container .select2-selection--single{
  height:auto !important; border:1px solid var(--line) !important; border-radius:2px !important;
  padding:12px 14px !important;
}
.woocommerce .select2-container .select2-selection__rendered{ padding:0 !important; line-height:1.4 !important; font-size:14px; }
.woocommerce .select2-container .select2-selection__arrow{ height:100% !important; }
.woocommerce-address-fields .form-row-first, .woocommerce-address-fields .form-row-last{ width:100%; }

/* Coupon toggle link + form on checkout (separate from the cart's own
   coupon row). This used to strip out the shared .woocommerce-info box
   styling (padding:0, background:none) while its border stayed, leaving
   a bare, cramped, half-styled line (user-flagged 2026-10-27: "coupon
   styling is so fucked up") — right above a properly-boxed "added to
   cart" message, so the mismatch was obvious. Now just inherits the
   same real notice-box look (padding, background, border-radius) as
   every other .woocommerce-info on the site instead of a one-off. */
.woocommerce-form-coupon-toggle a.showcoupon{ color:var(--ink); font-weight:600; text-decoration:underline; }
.woocommerce-form-coupon .form-row{ display:inline-block; margin-right:12px; vertical-align:top; }
.woocommerce-form-coupon .form-row-first{ width:260px; }

/* Checkboxes (ship to different address, terms, etc.) */
.woocommerce form label.checkbox{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-soft); font-weight:400; cursor:pointer; }
.woocommerce form input.input-checkbox{ width:auto; margin-top:2px; accent-color:var(--ink); }

/* Payment methods list — was a bare, unstyled <ul><li> (user-flagged
   2026-10-27, "not a single WooCommerce default styling left"). */
ul.wc_payment_methods{ list-style:none; margin:0 0 20px; padding:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
ul.wc_payment_methods li.wc_payment_method{ border-bottom:1px solid var(--line); padding:16px; }
ul.wc_payment_methods li.wc_payment_method:last-child{ border-bottom:none; }
ul.wc_payment_methods input.input-radio{ margin-right:10px; accent-color:var(--ink); }
ul.wc_payment_methods label{ font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }
ul.wc_payment_methods .payment_box{
  margin-top:12px; padding:14px; background:var(--ivory-deep); border-radius:2px;
  font-size:13px; color:var(--ink-soft); line-height:1.6;
}
ul.wc_payment_methods .payment_box p{ margin:0; }
.woocommerce-terms-and-conditions-wrapper{ margin-bottom:20px; font-size:13px; color:var(--ink-soft); }

#order_review{ background:var(--white); border:1px solid var(--line); border-radius:3px; padding:28px; }
.woocommerce-checkout-review-order-table{ margin-bottom:20px; }

/* Star ratings — used WooCommerce's own icon font (@font-face "star"/
   "WooCommerce", star glyphs "s"/"S"), which disappeared entirely when we
   dequeued WooCommerce's default stylesheet (user-flagged 2026-10-27,
   found on a PDP: "Rated 5.00 out of 5..." with zero visible stars).
   Re-declared here pointing at the plugin's own still-present font files
   (never removed, just no longer enqueued) rather than reinventing star
   rendering — same real glyphs, our own gold instead of WC's default. */
@font-face{
  font-family:'WooCommerce';
  src:url('../../../../plugins/woocommerce/assets/fonts/WooCommerce.woff2') format('woff2'),
      url('../../../../plugins/woocommerce/assets/fonts/WooCommerce.woff') format('woff'),
      url('../../../../plugins/woocommerce/assets/fonts/WooCommerce.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:block;
}
.star-rating{
  display:inline-block; overflow:hidden; position:relative; height:1em; line-height:1;
  font-size:1.1em; width:5.4em; font-family:'WooCommerce';
}
.star-rating::before{ content:"sssss"; color:var(--line); float:left; top:0; left:0; position:absolute; }
.star-rating span{ overflow:hidden; float:left; top:0; left:0; position:absolute; padding-top:1.5em; }
.star-rating span::before{ content:"SSSSS"; top:0; position:absolute; left:0; color:var(--gold); }
p.stars a{ position:relative; height:1em; width:1em; text-indent:-999em; display:inline-block; }

/* Notice boxes (errors, success messages, info) — were bare bulleted text
   with zero background/border (user-flagged 2026-10-27, found via a real
   checkout validation error: "Billing ZIP Code is not a valid postcode").
   Used site-wide: checkout validation, "added to cart", login errors, etc. */
.woocommerce-error, .woocommerce-message, .woocommerce-info{
  list-style:none; margin:0 0 24px; padding:16px 20px; border-radius:3px;
  font-size:14px; line-height:1.6; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li{ list-style:none; }
.woocommerce-error{ background:#FBEAE6; color:#8A3B2B; border:1px solid #E8B6A8; }
.woocommerce-message{ background:var(--sage-soft); color:#3A4A30; border:1px solid #BFCDAE; }
.woocommerce-info{ background:var(--ivory-deep); color:var(--ink); border:1px solid var(--line); }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a{ color:inherit; text-decoration:underline; }
.woocommerce-message .button, .woocommerce-info .button{ margin-left:auto; }
#place_order{
  background:var(--ink); color:var(--ivory); border:none; padding:17px 32px; width:100%;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; border-radius:2px; cursor:pointer;
}
#place_order:hover{ background:var(--gold); color:var(--ink); }
body.woocommerce-checkout .site-header{ box-shadow:none; }

/* My Account */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-MyAccount-navigation a{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:2px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
}
.woocommerce-MyAccount-navigation .is-active a{ background:var(--ivory-deep); color:var(--ink); }
.woocommerce-MyAccount-content{ flex:1; }
.woocommerce-account .container{ display:flex; gap:48px; padding-top:40px; padding-bottom:96px; align-items:flex-start; }
.woocommerce-orders-table__cell-order-status{ font-size:10px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; padding:5px 10px; border-radius:20px; background:var(--ivory-deep); }
.woocommerce-form-login, .woocommerce-form-register{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:40px; width:420px; max-width:100%;
}
.woocommerce-form-login input, .woocommerce-form-register input{
  width:100%; border:1px solid var(--line); border-radius:2px; padding:12px 14px; font-size:14px; margin-bottom:4px;
}
/* WordPress core's own "show password" toggle button (unrelated to
   WooCommerce — injected by WP core on every password field) — rendered
   as an empty, unstyled pill because its eye icon depends on the
   dashicons font, which isn't loaded on the frontend. Styled as a plain
   text toggle instead of chasing an icon-font dependency. */
.password-input{ position:relative; display:block; }
.password-input input{ padding-right:60px !important; }
.show-password-input{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:none; background:none; width:auto; height:auto; padding:4px;
  font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-soft); cursor:pointer;
}
.show-password-input::before{ content:"Show"; }
.show-password-input[aria-label="Hide password"]::before{ content:"Hide"; }

.woocommerce-form-login .button, .woocommerce-form-register .button{
  background:var(--ink); color:var(--ivory); border:none; padding:15px 32px; width:100%;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; border-radius:2px; cursor:pointer; margin-top:8px;
}

/* =========================================================
   MOBILE — app-like system (Phase 2.7)
   ========================================================= */
@media (max-width: 782px){
  .container{ padding:0 16px; }

  .primary-nav{ display:none; }
  .site-header-main{ justify-content:space-between; }
  /* Search/Wishlist/Cart already live in the bottom app-tab-bar on mobile
     — showing them here too would be pure duplication. Account has no
     other mobile entry point, so that one alone stays, as a small link in
     its own row under the promo text (too narrow to overlay without
     collision). */
  .site-announcement-row{ flex-direction:column; gap:6px; padding:10px 0 8px; }
  .site-announcement-text{ font-size:10px; letter-spacing:0.06em; padding:0 16px; }
  .site-announcement-row .header-icons{ position:static; transform:none; }
  .site-announcement-row .icon-circle:not([aria-label="Account"]){ display:none; }
  .mobile-header{
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
  }
  .hamburger{
    border:none; background:none; display:flex; flex-direction:column; gap:5px;
    width:40px; height:40px; align-items:center; justify-content:center;
  }
  .hamburger span{ display:block; width:20px; height:1.5px; background:var(--ink); }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }

  .trust-row{ grid-template-columns:1fr 1fr; }

  /* Product grids collapse 4→2 / 3→1 */
  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .grid-3{ grid-template-columns:1fr !important; }

  /* Subcategory card row (archive-product.php) sets its column count
     inline as min(5, count($children)) for the real desktop row — with
     no mobile override at all, so a page with 5-6 subcategories (e.g.
     /shop/) rendered 5 columns on a 375px screen: each card ~65px wide,
     the "Body Care" / "Combo" / "Concern" labels truncated to "Care" /
     "Comb" / "Conc" and photos cropped down to a sliver (found
     2026-10-27, live /shop/ screenshot). `!important` needed to beat the
     inline style, same reasoning as `.category-filters-sidebar` above. */
  .subcat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  /* My Account: `.woocommerce-account .container` is `display:flex` for
     the real desktop nav+content side-by-side layout. On mobile its only
     child (the login form, or the account nav + content once logged in)
     kept its full desktop intrinsic width instead of shrinking — a flex
     item's default `min-width:auto` floor ignores `max-width:100%` once
     every ancestor up the chain is itself auto-sized, so the login form's
     real `width:420px` (main.css) pushed the WHOLE page out to 420px+
     on a 375px screen: labels, the password field and the "Remember me"
     row all bled off the right edge (found 2026-10-27, live /my-account/
     screenshot — confirmed via computed widths, not just a screenshot
     crop: document.documentElement.scrollWidth was really 452 against a
     375 viewport). Stacking the flex row and letting items shrink fixes
     both the login form today and the logged-in nav+content layout. */
  .woocommerce-account .container{ flex-direction:column; gap:32px; }
  .woocommerce-account .container > *{ min-width:0; width:100%; }

  /* /categories/ (page-categories.php) sets its two grids inline as a
     fixed repeat(3,...) and repeat(5,...) for the real desktop layout,
     same issue as .subcat-grid above — on a 375px screen the 5-col
     "Shop by Concern" row squeezed each card to ~60px and the 3-col
     category row clipped "Concern" to an illegible sliver (found
     2026-10-27, live /categories/ screenshot). */
  .lf-categories-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .lf-concern-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  /* At ~159px card width (2-up grid on a 375px screen), the price text +
     a nowrap "Quick Add" button side by side with justify-content:space-
     between overflowed the card's own width (flex items don't shrink
     below their content size by default) and visually bled into the
     next card over, cutting off both the price and the button (found
     2026-10-27, real mobile-audit screenshot on the homepage combo
     grid). Stacking them removes the horizontal squeeze entirely. */
  .product-card .card-price-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .product-card .btn-quick-add{ align-self:stretch; text-align:center; }

  /* Fixed bottom tab bar — the core app-like mechanism */
  .mobile-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--white); border-top:1px solid var(--line);
    padding:10px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    min-height:44px; justify-content:center;
    color:var(--ink-soft); text-decoration:none;
  }
  .mobile-tabbar .tab span{ font-size:9px; font-weight:600; }
  .mobile-tabbar .tab.active{ color:var(--ink); }

  body.has-mobile-tabbar{ padding-bottom:76px; }
  /* On PDPs the sticky Add to Bag bar stacks ON TOP of the tab bar (71px +
     65px), so the generic 76px reserve above left the final ~60px of
     every product page — the footer's last line, in practice — hidden
     behind the bar stack (audit finding F07, 2026-10-27). Reserve the
     combined height here instead. */
  body.single-product.has-mobile-tabbar{ padding-bottom:148px; }

  /* Sticky Add to Bag on PDP, sits above tab bar */
  .sticky-add-to-cart{
    display:flex; position:fixed; left:0; right:0; bottom:70px; z-index:49;
    background:var(--white); border-top:1px solid var(--line);
    padding:12px 16px; align-items:center; gap:10px;
    box-shadow:0 -4px 12px rgba(43,36,32,0.06);
  }
  /* Hidden (via main.js IntersectionObserver) while the real inline
     quantity/Add to Bag form is in view, so the two controls don't sit
     on top of each other (known finding, rechecked 2026-10-27). */
  .sticky-add-to-cart.lf-hidden{ display:none; }

  /* Checkout: tab bar dims, fewer distractions */
  body.woocommerce-checkout .mobile-tabbar{ opacity:0.4; pointer-events:none; }

  /* Category filters become a bottom-sheet trigger, not an inline sidebar.
     archive-product.php renders the sidebar with an INLINE `display:flex`
     (needed for the real desktop side-by-side layout), which always beats
     a plain stylesheet rule regardless of media query — so this never
     actually hid the sidebar on mobile. It sat beside the product grid
     at full desktop width, squeezing products into a narrow column that
     visually overlapped the filter checkboxes (found 2026-10-27, live
     mobile-audit screenshot on /shop/). `!important` is the real, minimal
     fix (same pattern already used for `.grid-4` above, for the same
     inline-style-override reason). */
  .category-filters-sidebar{ display:none !important; }
  .filters-sort-trigger{
    display:flex; position:fixed; left:16px; right:16px; bottom:86px; z-index:48;
    background:var(--ink); color:var(--ivory); border-radius:24px;
    padding:12px; text-align:center; font-size:12px; font-weight:600;
    letter-spacing:0.04em; justify-content:center;
    border:none; font-family:'Inter',sans-serif; cursor:pointer; width:auto;
  }

  /* "Filters & Sort" used to be a bare, un-scripted <div> — tapping it did
     nothing (no real way to reach the filters on mobile at all, since the
     sidebar above is hidden). Now a real bottom-sheet drawer: same open/
     close/backdrop/Escape/focus-trap pattern as the mobile nav drawer and
     Usage Details flyout elsewhere in this theme (see main.js). */
  .lf-filters-backdrop{ display:none; }
  .lf-filters-backdrop.open{
    display:block; position:fixed; inset:0; background:rgba(26,22,18,0.4); z-index:75;
  }
  .category-filters-sidebar.is-open{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:76;
    max-height:80vh; overflow-y:auto; background:var(--white);
    border-radius:16px 16px 0 0; box-shadow:0 -8px 24px rgba(43,36,32,0.18);
    padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .lf-filters-sidebar-close{
    display:block; align-self:flex-end; border:none; background:none;
    font-size:26px; line-height:1; color:var(--ink); margin-bottom:4px; cursor:pointer;
  }
}

@media (min-width: 783px){
  .mobile-tabbar, .sticky-add-to-cart, .filters-sort-trigger{ display:none !important; }
}

/* Desktop sticky add-to-cart — hidden by default, slides down from the top
   once the real add-to-cart button scrolls out of view (JS toggles .visible). */
.sticky-add-to-cart-desktop{ display:none; }
@media (min-width: 783px){
  .sticky-add-to-cart-desktop{
    display:block; position:fixed; top:0; left:0; right:0; z-index:45;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 4px 12px rgba(43,36,32,0.06);
    transform:translateY(-100%); transition:transform 0.25s ease;
  }
  .sticky-add-to-cart-desktop.visible{ transform:translateY(0); }
}

/* Homepage hero carousel — 5 real slides (Body/Face/Hair/Mom & Baby/
   Ingredients), replacing the old single static hero (2026-10-27).
   Transition style "A" (user picked this after comparing 3 live demo
   options): text slides vertically, image wipes horizontally, on
   independent stacks so each axis animates on its own timeline — see
   main.js for the actual transform/opacity choreography. */
.lf-hero-carousel{ padding-top:72px; position:relative; }
.lf-hero-row{ display:flex; align-items:center; gap:56px; flex-wrap:wrap; }

.lf-hero-text-stack{ flex:1 1 440px; min-width:0; position:relative; min-height:340px; }
.lf-hero-slide-text{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:22px;
  opacity:0; pointer-events:none;
}
.lf-hero-slide-text.active{ opacity:1; pointer-events:auto; position:relative; }
.lf-hero-slide-text h1{
  font-size:58px; line-height:1.08; font-weight:500; letter-spacing:-0.01em; margin:0;
  font-family:'Fraunces',serif; color:var(--ink);
}
.lf-hero-slide-text p{ font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:460px; margin:0; }
.lf-hero-slide-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }

.lf-hero-image-stack{
  flex:1 1 440px; min-width:0; position:relative; aspect-ratio:4/5;
  border-radius:4px; overflow:hidden;
  background:linear-gradient(160deg, var(--gold-soft) 0%, var(--ivory-deep) 100%);
}
.lf-hero-slide-image{
  position:absolute; inset:0; opacity:0; display:flex; align-items:center; justify-content:center;
}
.lf-hero-slide-image.active{ opacity:1; }
.lf-hero-slide-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.lf-hero-slide-placeholder{
  font-family:'Fraunces',serif; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}

.lf-hero-dots{
  display:flex; justify-content:center; gap:10px; margin-top:28px;
}
.lf-hero-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--line);
}
.lf-hero-dot.active{ background:var(--ink); }
@media (max-width:600px){
  .lf-hero-carousel{ padding-top:40px; }
  .lf-hero-text-stack{ min-height:300px; }
  .lf-hero-slide-text h1{ font-size:38px; }
  .lf-hero-slide-text p{ font-size:15px; }
}
@media (prefers-reduced-motion: reduce){
  .lf-hero-slide-text, .lf-hero-slide-image{ transition:none !important; }
}