/* Storefront skeleton — conversion-focused design.
   Brand vars come from header.php's <style> block (per-store branding).
   Section ordering on home: promo → header → hero → trust ribbon →
   bestsellers grid → cat strip → callout → new arrivals → reviews →
   seo content → faq → footer → mobile sticky CTA.
*/

:root{
  /* Per-store palette (overridden in header.php inline style) */
  --c-bg:        #fdfbf7;
  --c-surface:   #ffffff;
  --c-ink:       #1f1d1b;
  --c-ink-soft:  #4a4640;
  --c-ink-muted: #8c857d;
  --c-accent:    #ff7a59;
  --c-accent-deep:#e85f40;
  --c-pastel-1:  #ffe4d6;
  --c-pastel-2:  #d8e7d3;
  --c-pastel-3:  #e6e0f4;
  --c-pastel-4:  #fdf1c9;
  --c-line:      #ece7df;
  --c-star:      #f0b400;
  --c-cream:     #fbf7ee;
  --c-success:   #2f6e47;
  --c-sale:      #e84a3a;
  --c-card:      #ffffff;

  --f-display: 'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-body:    'Inter',system-ui,-apple-system,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --pad:20px;
  --max-w:1320px;

  --ease:    cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --h-promo:36px; --h-header:68px; --h-header-condensed:56px;
}
@media(min-width:700px){:root{--pad:24px}}
@media(min-width:1200px){:root{--pad:40px}}

/* RESET / BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not :hidden) on html+body — `hidden` would force
   overflow-y:auto per spec, turning <body> into a scroll container,
   which traps the .site-header position:sticky inside it (sticky binds
   to the nearest scroll ancestor) and the header would scroll away with
   the page. `clip` prevents horizontal overflow visually without
   creating a scroll context, so sticky still resolves to the viewport. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;width:100%}
body{
  font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--c-ink);
  background:var(--c-bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip;width:100%;max-width:100vw;
}
@media(max-width:700px){body{padding-bottom:env(safe-area-inset-bottom)}}
img,video,iframe,svg{max-width:100%;display:block}

/* Mobile overflow safety net — long URLs in legal pages, oversized
   product titles, and unbreakable strings in copy can blow past the
   viewport edge on phones. These rules force them to wrap rather than
   force the page to scroll horizontally. */
p,h1,h2,h3,h4,li,dt,dd,figcaption,blockquote{overflow-wrap:break-word}
.seo-copy,.faq-a-inner,.legal-page,.tab-panel,.review-body{overflow-wrap:anywhere;word-break:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--f-display);margin:0;line-height:1.05;letter-spacing:-.02em;font-weight:700}
p{margin:0}
svg{flex-shrink:0}
::selection{background:var(--c-accent);color:#fff}

/* UTILITIES */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--c-ink-muted)}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);margin-bottom:8px;font-family:var(--f-body)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--r-pill);
  font-family:var(--f-display);font-size:14px;font-weight:600;
  transition:transform .2s,background .25s,color .25s,box-shadow .3s,border-color .25s;
  min-height:48px;white-space:nowrap;
}
.btn-primary,.btn-cta{background:var(--c-ink);color:var(--c-cream);border:0}
.btn-primary:hover,.btn-cta:hover{background:var(--c-accent);color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(255,122,89,.5)}
.btn-secondary{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.btn-secondary:hover{background:var(--c-ink);color:var(--c-cream)}
.btn-ghost{color:var(--c-ink)}
.btn-ghost:hover{background:rgba(0,0,0,.06)}
.btn svg{width:14px;height:14px;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}

.cta-link{font-size:13px;font-weight:600;color:var(--c-ink);border-bottom:1.5px solid var(--c-ink);padding-bottom:3px;transition:color .2s,border-color .2s,gap .2s;display:inline-flex;gap:6px}
.cta-link:hover{color:var(--c-accent);border-color:var(--c-accent);gap:10px}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in-view,.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* PROMO BAR */
.promo-bar{background:var(--c-ink);color:var(--c-cream);padding:6px 0;overflow:hidden;margin:0}
.promo-track{display:flex;gap:32px;width:max-content;animation:scroll-x 38s linear infinite}
.promo-track span{display:inline-flex;align-items:center;gap:32px;font-size:12px;font-weight:500;white-space:nowrap}
.promo-track .dot{width:4px;height:4px;border-radius:50%;background:var(--c-accent);display:inline-block}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:90;background:var(--c-bg);
  border-bottom:1px solid transparent;
  transition:background .3s,backdrop-filter .3s,padding .3s,border-color .3s;
}
/* WP admin bar sits at viewport top:0 with z-index:99999. Without this
   offset, the sticky storefront header would slide under it on scroll
   for logged-in admins. Standalone storefront (no admin-bar class) is
   unaffected. */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
.site-header.is-condensed{
  background:rgba(253,251,247,.85);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--c-line);
}
/* Two-row header. .header-top = logo + search + icons, .header-nav =
   category links + Shop-all CTA. Stacking at ≤900px collapses to a
   single utility row (logo + icons) and hides .header-nav entirely so
   the drawer takes over. */
.header-top{display:flex;align-items:center;gap:14px;padding:clamp(8px,1.4vw,12px) 0;transition:padding .3s}
.header-nav{display:none;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--c-line);transition:padding .3s}
@media(min-width:900px){.header-nav{display:flex}}
.site-header.is-condensed .header-top{padding:8px 0}
.site-header.is-condensed .header-nav{padding:6px 0}
/* Backward-compat: header-inner still emitted by some legacy callers. */
.header-inner{display:flex;align-items:center;gap:14px;padding:clamp(8px,1.4vw,12px) 0;transition:padding .3s}
.site-header.is-condensed .header-inner{padding:8px 0}

/* Always-visible search pill in the top row. Borrowed visual language
   from .col-hero-search (hero-page search input) so they read as
   siblings: rounded pill, soft surface, accent-ring on focus. Hidden
   ≤900px in favor of the search-toggle icon. */
.header-search-bar{display:none;align-items:center;gap:10px;flex:1;max-width:560px;margin:0 auto;padding:10px 16px;background:var(--c-pastel-2);border:1px solid transparent;border-radius:999px;transition:background .2s,border-color .2s,box-shadow .2s}
@media(min-width:900px){.header-search-bar{display:flex}}
.header-search-bar:focus-within{background:var(--c-card,#fff);border-color:var(--c-line);box-shadow:0 6px 18px -8px rgba(0,0,0,.12)}
.header-search-bar-icon{width:18px;height:18px;color:var(--c-ink-muted);flex-shrink:0;transition:color .2s}
.header-search-bar:focus-within .header-search-bar-icon{color:var(--c-ink)}
/* appearance:none kills the browser's default search-input styling that
   normalize/Storefront re-enables via `input[type=search]{-webkit-
   appearance:textfield}` — without this, the WP-side header-search-bar
   shows a visible UA-default rectangle inside our rounded pill. padding
   reset + box-sizing match prevent theme padding from shoving the input
   off-center inside the pill. */
.header-search-bar input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--c-ink);padding:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;-webkit-box-shadow:none;box-shadow:none}
.header-search-bar input::-webkit-search-cancel-button,.header-search-bar input::-webkit-search-decoration,.header-search-bar input::-webkit-search-results-button,.header-search-bar input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
.header-search-bar input::placeholder{color:var(--c-ink-muted)}
.header-search-toggle{display:inline-flex}
@media(min-width:900px){.header-search-toggle{display:none}}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--c-ink);margin-right:auto;text-decoration:none}
.logo:hover{color:var(--c-ink)}
.logo-mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--c-accent),#FFB199);flex-shrink:0}
.logo img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--c-pastel-1)}
.logo sup{font-family:var(--f-body);font-weight:500;font-size:11px;color:var(--c-accent);letter-spacing:0;margin-left:-4px}
.logo-text{display:inline-block}

.nav{display:none;gap:2px}
@media(min-width:900px){.nav{display:flex;margin-right:auto;flex-wrap:nowrap;min-width:0}}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;font-size:14px;font-weight:500;color:var(--c-ink);border-radius:var(--r-sm);transition:color .2s,background .2s;white-space:nowrap}
.nav-link:hover{color:var(--c-accent);background:var(--c-pastel-1)}
.nav-link.is-cta{background:var(--c-ink);color:var(--c-cream);font-weight:600;padding:0 18px;height:40px}
.nav-link.is-cta:hover{background:var(--c-accent);color:#fff}
.nav-link.is-hot{color:var(--c-accent);font-weight:600}
.nav-link.is-hot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c-accent);margin-right:4px;animation:pulse-dot 1.6s ease-in-out infinite}
.nav-link.is-accent{color:#D97706;font-weight:600}
.nav-arrow{width:12px;height:12px;color:var(--c-ink-muted);transition:transform .25s var(--ease),color .25s;flex-shrink:0}
.nav-item.has-dropdown:hover .nav-arrow,
.nav-item.has-dropdown.is-open .nav-arrow{transform:rotate(180deg);color:var(--c-accent)}
.nav-item.has-dropdown.is-open > .nav-link{color:var(--c-accent);background:var(--c-pastel-1)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}

.nav-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;
  transform:translateY(-6px);
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);box-shadow:0 24px 60px -12px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.04);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;
  /* Default min-width is intentionally tight (single-card width) so
     featured-only dropdowns shrink to fit. The wider mega-menu variants
     (.dropdown-mega-featured, .dropdown-mega--3col, .dropdown-tax-grid)
     declare their own min-widths and override. */
  min-width:240px;
  /* Cap to viewport width so a wide mega menu opening near the right
     edge of the nav can't punch past the screen. */
  max-width:calc(100vw - (var(--pad) * 2));
  z-index:100;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* Hover bridge — fills the 4px gap between trigger and dropdown so the
   cursor doesn't drop the open state when traveling down. Wider than the
   gap to be tolerant of diagonal motion. */
.nav-dropdown::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
/* Right-anchor — when a dropdown would overflow the nav row's right edge,
   JS adds .is-anchor-right and the dropdown grows leftward instead. */
.nav-item.is-anchor-right .nav-dropdown{left:auto;right:0}
.dropdown-mega{display:grid;gap:32px;padding:28px;grid-template-columns:repeat(2,1fr)}
.dropdown-mega--3col{grid-template-columns:1fr 1fr 260px;min-width:720px}
.dropdown-mega--simple,.dropdown-simple{grid-template-columns:1fr;padding:18px}
.dropdown-section-title{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-muted);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--c-line)}
/* padding/margin/list-style explicit so the WP theme can't add the
   default browser ul indent (~40px). The standalone frontend's *{} reset
   covers this; on WP pages, theme rules beat the universal selector and
   would otherwise push the dropdown links right of the section title. */
.dropdown-links{display:flex;flex-direction:column;gap:0;padding:0;margin:0;list-style:none}
.dropdown-links li{margin-bottom:10px}
.dropdown-links a{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--c-ink);transition:color .2s,padding-left .2s}
.dropdown-links a:hover{color:var(--c-accent);padding-left:4px}
.dropdown-badge{display:inline-block;background:var(--c-pastel-2);color:var(--c-success);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.dropdown-browse-all{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line)}
.dropdown-browse-all a{font-size:13px;color:var(--c-ink-muted);font-weight:500}
.dropdown-browse-all a:hover{color:var(--c-accent)}
.dropdown-featured{background:var(--c-pastel-1);border-radius:var(--r-md);padding:18px;text-align:center;transition:transform .25s}
.dropdown-featured:hover{transform:translateY(-2px)}
.featured-badge{display:inline-block;background:var(--c-ink);color:var(--c-cream);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.featured-image{width:100%;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;background:var(--c-cream)}
.featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.dropdown-featured:hover .featured-image img{transform:scale(1.05)}
.featured-title{font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.3;margin-bottom:4px;color:var(--c-ink)}
.featured-price{font-family:var(--f-display);font-weight:700;color:var(--c-accent);font-size:15px}
.dropdown-tax-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:24px;min-width:720px}
.tax-card{text-align:center;padding:12px 6px;border-radius:var(--r-md);transition:background .2s,transform .25s}
.tax-card:hover{background:var(--c-pastel-2);transform:translateY(-2px)}
.tax-avatar{width:64px;height:64px;margin:0 auto 8px;border-radius:50%;background-size:cover;background-position:center top;background-color:var(--c-pastel-1);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:border-color .25s}
.tax-card:hover .tax-avatar{border-color:var(--c-accent)}
.tax-name{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--c-ink)}

.header-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1000px){.header-actions{gap:4px}}
/* background:transparent and padding:0 are explicit because the WP
   Storefront theme sets `button{background-color:#43454b;padding:.618em…}`
   on /shop/cart, which would otherwise paint our outline icon-btns as
   solid dark-gray discs. .icon-btn (0,1,0) beats button (0,0,1) by
   specificity so no !important is needed. */
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink);background:transparent;border:0;padding:0;position:relative;transition:background .2s,transform .2s}
.icon-btn:hover{background:var(--c-pastel-1)}
@media(min-width:1000px){.icon-btn:hover{transform:rotate(-3deg)}}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* WP Storefront theme paints child <circle>/<path> with currentColor fill,
   turning our outline icons into solid black blobs on /shop/cart, /shop/
   checkout, and /shop/my-account. !important is the cheapest way to win
   against the theme's body-scoped svg rules without rewriting every icon
   path with inline style. */
.icon-btn svg,.icon-btn svg circle,.icon-btn svg path{fill:none !important;stroke:currentColor !important}
.cart-badge,.hdr-cart-count{
  position:absolute;top:6px;right:6px;background:var(--c-accent);color:#fff;
  font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.hdr-cart-count[hidden]{display:none}
.header-cta{display:none}
@media(min-width:1000px){.header-cta{display:inline-flex;margin-left:8px;padding:10px 18px;min-height:0;font-size:13px}}
.hamburger{display:inline-flex}
@media(min-width:900px){.hamburger{display:none}}

/* "Shop all <Brand>" CTA button anchored on the right of the nav row.
   Hidden ≤900px because the nav row itself is hidden — the same call to
   action lives in the drawer-foot for mobile. */
.nav-cta-shop-all{display:none;flex-shrink:0;margin-left:auto;padding:10px 22px;font-size:13px;min-height:0;white-space:nowrap}
@media(min-width:900px){.nav-cta-shop-all{display:inline-flex}}

/* Two-column mega-menu: subcategory list on the left, featured bestseller
   card on the right. Width auto-fits the content; left ~50%, right ~50%
   capped so the featured-card image doesn't grow past a typical product
   thumbnail. The dropdown anchors under the nav row, NOT the nav-item
   itself — that prevents per-item dropdowns from being clipped or
   misaligned when categories are short. */
.dropdown-mega-featured{display:grid;grid-template-columns:1fr;gap:0;padding:0;min-width:280px;max-width:720px;width:max-content}
@media(min-width:700px){.dropdown-mega-featured{grid-template-columns:minmax(280px,1fr) minmax(220px,260px)}}
/* Featured-only mode (category has no subcategories) — collapse to a
   single column so the right card doesn't float beside an empty left
   pane. */
.dropdown-mega-featured.is-featured-only{grid-template-columns:1fr;min-width:240px;max-width:300px}
@media(min-width:700px){.dropdown-mega-featured.is-featured-only{grid-template-columns:1fr}}
.dropdown-mega-cols{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dropdown-mega-cols .dropdown-section-title{margin:0 0 4px;border-bottom:0;padding-bottom:0}
.dropdown-mega-cols .dropdown-links{display:grid;gap:10px 28px;margin:0}
.dropdown-mega-cols .dropdown-links[data-cols="2"]{grid-template-columns:1fr 1fr}
.dropdown-mega-cols .dropdown-links[data-cols="1"]{grid-template-columns:1fr}
.dropdown-mega-cols .dropdown-links li{margin:0}
.dropdown-mega-cols .dropdown-links a{padding:2px 0;border-radius:4px}
.dropdown-mega-cols .dropdown-browse-all{margin-top:6px;padding-top:14px;border-top:1px solid var(--c-line)}
.dropdown-mega-cols .dropdown-browse-all a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--c-ink);transition:color .2s,gap .2s}
.dropdown-mega-cols .dropdown-browse-all a:hover{color:var(--c-accent);gap:10px}
/* Featured card sits flush in its own column with a hairline divider
   from the link list. Padding matches the link side (22px) so the two
   halves baseline together at the top edge. */
.dropdown-mega-featured > .dropdown-featured{margin:0;padding:22px;background:transparent;border-radius:0;text-align:center}
@media(min-width:700px){
  .dropdown-mega-featured:not(.is-featured-only) > .dropdown-featured{border-left:1px solid var(--c-line)}
}
.dropdown-mega-featured .featured-image{aspect-ratio:1/1;background:var(--c-pastel-1);border-radius:var(--r-md)}
/* Sale price + strikethrough original. Sale price uses the accent token,
   the struck-through original sits in muted ink. */
.featured-price-sale{color:var(--c-accent);font-weight:700;margin-right:6px}
.featured-price-strike{color:var(--c-ink-muted);text-decoration:line-through;font-weight:500;font-size:.85em}

/* SEARCH OVERLAY (drops below header on icon-click) */
.hdr-search-overlay{
  position:absolute;left:0;right:0;top:100%;
  background:var(--c-bg);border-bottom:1px solid var(--c-line);
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  animation:sf-overlay-down .25s var(--ease-out);
  z-index:55;
}
.hdr-search-overlay[hidden]{display:none}
@keyframes sf-overlay-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.hdr-search-overlay-inner{padding:16px 0 18px;position:relative}
.hdr-search-form{
  position:relative;display:flex;align-items:center;
  background:rgba(0,0,0,.04);border:1px solid transparent;
  border-radius:var(--r-pill);padding:0 6px 0 44px;gap:6px;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.hdr-search-form:focus-within{background:#fff;border-color:var(--c-ink);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.hdr-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--c-ink-muted);pointer-events:none;transition:color .18s}
.hdr-search-form:focus-within .hdr-search-icon{color:var(--c-ink)}
.hdr-search-input{flex:1;padding:14px 4px;border:0;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--c-ink);min-width:0}
.hdr-search-input::placeholder{color:var(--c-ink-muted)}
.hdr-search-input::-webkit-search-cancel-button,.hdr-search-input::-webkit-search-decoration,.hdr-search-input::-webkit-search-results-button,.hdr-search-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
.hdr-search-spinner{
  width:16px;height:16px;border-radius:999px;
  border:2px solid var(--c-line);border-top-color:var(--c-ink);
  flex-shrink:0;opacity:0;transition:opacity .15s;
  animation:sf-spin .8s linear infinite;
}
.hdr-search-form.is-loading .hdr-search-spinner{opacity:1}
.hdr-search-close{width:44px;height:44px;flex-shrink:0}
.hdr-search-close svg{width:18px;height:18px}
@keyframes sf-spin{to{transform:rotate(360deg)}}
.hdr-search-results{
  position:relative;margin-top:14px;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.10),0 4px 14px rgba(0,0,0,.04);
  max-height:460px;overflow-y:auto;animation:sf-pop-in .2s ease-out;
}
.hdr-search-results[hidden]{display:none}
@keyframes sf-pop-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.hdr-search-result{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:10px 14px;color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-line);transition:background .15s ease}
.hdr-search-result:last-of-type{border-bottom:0}
.hdr-search-result:hover,.hdr-search-result.is-active{background:var(--c-pastel-1);color:var(--c-ink)}
.hdr-search-thumb,.hdr-search-thumb-empty{width:52px;height:52px;border-radius:8px;background:var(--c-pastel-1)}
.hdr-search-thumb{object-fit:cover}
.hdr-search-name{font-size:14px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.hdr-search-price{font-size:14px;font-weight:700;color:var(--c-ink);white-space:nowrap}
.hdr-search-empty{padding:24px 16px;text-align:center;color:var(--c-ink-muted);font-size:14px;line-height:1.5}
.hdr-search-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;background:var(--c-pastel-1);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink);border-top:1px solid var(--c-line);position:sticky;bottom:0;transition:background .15s,color .15s}
.hdr-search-more:hover{background:var(--c-ink);color:var(--c-bg)}

/* MOBILE DRAWER */
.drawer-backdrop{position:fixed;inset:0;background:rgba(31,29,27,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:200}
.drawer-backdrop.is-open,.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;left:0;width:min(86vw,380px);height:100%;
  background:var(--c-bg);transform:translateX(-100%);
  transition:transform .35s var(--ease-out);z-index:201;
  display:flex;flex-direction:column;overflow-y:auto;padding-top:env(safe-area-inset-top);
}
.drawer.is-open,.drawer.open{transform:translateX(0)}
.drawer.right{left:auto;right:0;transform:translateX(100%)}
.drawer.right.is-open,.drawer.right.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);border-bottom:1px solid var(--c-line)}
.drawer-search{padding:14px var(--pad);border-bottom:1px solid var(--c-line)}
.drawer-search form{display:flex;align-items:center;gap:10px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:999px;padding:10px 16px}
.drawer-search svg{width:18px;height:18px;fill:none;stroke:var(--c-ink-muted);stroke-width:1.8;stroke-linecap:round}
.drawer-search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;font-family:inherit;color:var(--c-ink)}
.drawer-nav{display:flex;flex-direction:column;padding:6px 0;flex:1;overflow-y:auto}
.drawer-nav>a,.drawer-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px var(--pad);font-family:var(--f-display);font-size:17px;font-weight:500;color:var(--c-ink);border-bottom:1px solid var(--c-line);text-align:left}
.drawer-nav>a:hover{color:var(--c-accent)}
.drawer-nav-toggle .drawer-nav-chevron{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .25s}
.drawer-nav-item.is-open .drawer-nav-chevron{transform:rotate(180deg)}
.drawer-nav-panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.drawer-nav-section{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-muted);padding:12px var(--pad) 4px}
.drawer-nav-sublist{padding:0}
.drawer-nav-sublist a{display:block;padding:10px var(--pad);font-size:14px;color:var(--c-ink-soft)}
.drawer-nav-sublist a:hover{color:var(--c-accent)}
.drawer-tax-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px var(--pad) 14px}
.drawer-tax-grid .tax-card{padding:6px 4px}
.drawer-tax-grid .tax-avatar{width:52px;height:52px;margin-bottom:6px}
.drawer-tax-grid .tax-name{font-size:11px}
.drawer-foot{margin-top:auto;padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--c-line);display:grid;gap:10px}
.drawer-filters{padding:14px var(--pad) 24px;flex:1;overflow-y:auto}
.drawer-filters .filter-group{background:transparent;border:0;border-bottom:1px solid var(--c-line);border-radius:0;margin:0}

/* HERO — full-bleed background image with overlay */
.hero{position:relative;background-color:var(--c-pastel-2);min-height:clamp(440px,72vh,680px);display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;isolation:isolate}
/* Stack bg image + overlay + content in a single grid cell. We avoided
   `display:flex` here because iOS Safari occasionally fails to size an
   absolutely-positioned child of a flex parent — the symptom is gray
   bands above and below the hero image on mobile. Grid + grid-area:1/1
   for every child gets a reliable stack across browsers without needing
   `position:absolute` on the bg/overlay. */
.hero > .hero-bg,
.hero > .hero-overlay,
.hero > .hero-inner{grid-column:1;grid-row:1}
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:0}
.hero-overlay{z-index:1;background:linear-gradient(120deg,rgba(15,12,10,.62) 0%,rgba(15,12,10,.42) 55%,rgba(15,12,10,.22) 100%)}
.hero-inner{position:relative;z-index:2;padding:64px 0;width:100%;align-self:center}
@media(min-width:700px){.hero-inner{padding:88px 0}}
@media(min-width:1000px){.hero-inner{padding:112px 0}}
.hero-copy{max-width:640px;color:#fff;animation:hero-rise .8s var(--ease-out,cubic-bezier(.16,1,.3,1)) both}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);padding:7px 12px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;border:1px solid rgba(255,255,255,.2)}
.hero-eyebrow::before{content:'✨';font-size:13px}
.hero-title{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,6.5vw,64px);line-height:1.02;letter-spacing:-.03em;color:#fff;margin-bottom:14px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-title .accent{color:var(--c-accent)}
.hero-rating{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;color:#fff}
.hero-rating .stars{color:var(--c-star);font-size:15px;letter-spacing:1px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hero-rating .rating-text{font-size:13px;color:rgba(255,255,255,.85);font-weight:500}
.hero-rating .rating-text strong{color:#fff;font-weight:700}
.hero-sub{font-size:15px;color:rgba(255,255,255,.88);line-height:1.55;max-width:480px;margin-bottom:22px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media(min-width:700px){.hero-sub{font-size:16px}}
.hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:600px){.hero-ctas{display:flex;flex-wrap:wrap}}
.hero-ctas .btn-secondary{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px)}
.hero-ctas .btn-secondary:hover{background:#fff;color:var(--c-ink)}

/* TRUST RIBBON (replaces statement marquee) */
.trust-ribbon{background:var(--c-pastel-1);padding:14px 0;overflow:hidden}
.trust-list{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin:0;padding:0}
.trust-list span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--c-ink)}
.trust-list svg{width:16px;height:16px;fill:none;stroke:var(--c-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:700px){
  .trust-list{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--pad);justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:24px}
  .trust-list::-webkit-scrollbar{display:none}
  .trust-list span{white-space:nowrap;flex-shrink:0;font-size:11px}
}

/* SECTION SHARED */
.section{padding:48px 0}
@media(min-width:700px){.section{padding:64px 0}}
@media(min-width:1000px){.section{padding:80px 0}}
.section-head{margin-bottom:24px;display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(min-width:700px){.section-head{margin-bottom:32px}}
.section-head h2,h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,4.5vw,42px);line-height:1.05;letter-spacing:-.025em;color:var(--c-ink)}

/* PRODUCT CARDS (new visible-add-button design) */
.product-card{display:block;position:relative;color:var(--c-ink)}
.product-card-img{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--c-pastel-1);margin-bottom:10px}
@media(min-width:700px){.product-card-img{border-radius:var(--r-lg);margin-bottom:12px}}
.product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .3s}
.product-card-img img.alt{position:absolute;inset:0;opacity:0}
@media(hover:hover){
  .product-card:hover .product-card-img img.primary{opacity:0;transform:scale(1.04)}
  .product-card:hover .product-card-img img.alt{opacity:1;transform:scale(1.04)}
}
.product-tag{position:absolute;top:8px;left:8px;background:#fff;color:var(--c-ink);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;z-index:2}
@media(min-width:700px){.product-tag{top:12px;left:12px;font-size:10px;padding:5px 9px}}
.product-tag.accent{background:var(--c-accent);color:#fff}
.product-tag.sale{background:var(--c-ink);color:#fff}
.product-tag.lowstock{background:#FFF3CD;color:#7A5C00}
.product-add-btn{
  position:absolute;bottom:8px;right:8px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--c-ink);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:background .2s,color .2s,transform .2s;
  font-size:20px;font-weight:300;line-height:1;border:0;
}
@media(min-width:700px){.product-add-btn{bottom:12px;right:12px;width:40px;height:40px}}
.product-add-btn:hover{background:var(--c-accent);color:#fff;transform:scale(1.08)}
.product-add-btn:active{transform:scale(.94)}
/* Grid-card markup: .product-card > .product-info { name+meta+price row }.
   Scoped to .product-card so the PDP's top-level <form class="product-info">
   doesn't accidentally inherit a flex-row layout meant for tiny cards. */
.product-card .product-info{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.product-name{font-family:var(--f-display);font-weight:500;font-size:13px;color:var(--c-ink);line-height:1.3}
@media(min-width:700px){.product-name{font-size:14px}}
.product-card .product-meta{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.product-stars{color:var(--c-star);font-size:11px;letter-spacing:1px}
.product-reviews{font-size:11px;color:var(--c-ink-muted)}
.product-price{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--c-ink);white-space:nowrap}
@media(min-width:700px){.product-price{font-size:15px}}
.product-price del{color:var(--c-ink-muted);font-weight:400;margin-right:4px;font-size:12px}
.product-price ins{color:var(--c-accent);text-decoration:none}

/* PRODUCTS GRID (home + collection page) */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px}
@media(min-width:700px){.products-grid{grid-template-columns:repeat(3,1fr);gap:24px 18px}}
@media(min-width:1000px){.products-grid{grid-template-columns:repeat(4,1fr);gap:30px 24px}}

/* CATEGORY STRIP */
.cat-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:700px){.cat-strip{grid-template-columns:repeat(3,1fr);gap:18px}}
.cat-card{position:relative;aspect-ratio:5/6;border-radius:var(--r-lg);overflow:hidden;background:var(--c-pastel-3);transition:transform .35s;display:block;color:#fff}
.cat-card:hover{transform:translateY(-3px)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.cat-card:hover img{transform:scale(1.06)}
.cat-card-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--c-pastel-3),var(--c-pastel-1))}
.cat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(31,29,27,.7))}
.cat-info{position:absolute;bottom:14px;left:14px;right:14px;color:#fff;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:10px}
.cat-info strong{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.01em}
@media(min-width:700px){.cat-info strong{font-size:24px}.cat-info{bottom:18px;left:18px;right:18px}}
.cat-info .count{font-size:11px;opacity:.85;display:block;margin-top:2px}
.cat-arr{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--c-ink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s}
.cat-arr svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;transition:transform .25s;fill:none}
.cat-card:hover .cat-arr{background:var(--c-accent);color:#fff}
.cat-card:hover .cat-arr svg{transform:rotate(-45deg)}

/* COLLECTION CALLOUT (replaces dark billboard) */
.callout{background:var(--c-pastel-2);border-radius:var(--r-xl);padding:36px 24px;text-align:center;position:relative;overflow:hidden}
@media(min-width:700px){.callout{padding:56px 40px;text-align:left;display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}}
.callout-copy{position:relative;z-index:1}
.callout-copy .eyebrow{color:var(--c-success)}
.callout-copy h2{color:var(--c-ink);margin-bottom:14px}
.callout-copy p{color:var(--c-ink-soft);font-size:15px;line-height:1.65;max-width:440px;margin:0 auto 22px}
@media(min-width:700px){.callout-copy p{margin:0 0 22px}}
.callout-img{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:#fff;max-width:380px;margin:24px auto 0}
@media(min-width:700px){.callout-img{margin:0;max-width:none}}
.callout-img img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease-out}
.callout-img:hover img{transform:scale(1.04)}
.callout-img-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--c-pastel-1),var(--c-pastel-3))}

/* REVIEWS */
.reviews-headline{text-align:center;max-width:900px;margin:0 auto 36px}
.reviews-headline .stars-big{color:var(--c-star);font-size:24px;letter-spacing:6px;margin-bottom:14px;display:inline-block}
.reviews-headline .quote{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,3vw,28px);line-height:1.3;letter-spacing:-.015em;color:var(--c-ink);margin-bottom:18px}
.reviews-headline .author{display:inline-flex;align-items:center;gap:12px}
.author-avatar{width:42px;height:42px;border-radius:50%;background:var(--c-pastel-2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--c-ink);font-size:14px;font-family:var(--f-display)}
.reviews-headline .author strong{font-family:var(--f-display);font-size:14px;display:block}
.reviews-headline .author span{font-size:12px;color:var(--c-ink-muted)}
.reviews-cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.reviews-cards{grid-template-columns:repeat(3,1fr);gap:18px}}
.review-card{background:#fff;border:1px solid var(--c-line);padding:20px;border-radius:var(--r-lg);transition:transform .3s,box-shadow .3s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(0,0,0,.08)}
.review-card .stars{color:var(--c-star);font-size:13px;letter-spacing:1px;margin-bottom:10px}
.review-card-product{font-family:var(--f-display);font-weight:600;font-size:12px;color:var(--c-accent);margin-bottom:6px}
.review-card p{font-size:14px;color:var(--c-ink-soft);line-height:1.6;margin-bottom:12px}
.review-card .who{font-size:12px;color:var(--c-ink-muted)}

/* SEO + FAQ */
.seo-grid{display:grid;gap:32px;align-items:start}
@media(min-width:1000px){.seo-grid{grid-template-columns:1fr 1fr;gap:60px}}
.seo-images{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.seo-images>div{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--c-pastel-1)}
.seo-images>div:nth-child(2){aspect-ratio:1/1;margin-top:32px}
.seo-images img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease-out}
.seo-images>div:hover img{transform:scale(1.04)}
.seo-images-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--c-pastel-1),var(--c-pastel-3))}
.seo-copy h2{margin-bottom:18px}
.seo-copy>p{font-size:15px;color:var(--c-ink-soft);line-height:1.7;margin-bottom:14px}
.seo-copy strong{color:var(--c-ink);font-weight:600}
.seo-points{display:grid;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--c-line)}
.seo-point{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.seo-point .num{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--c-accent);padding-top:2px;flex-shrink:0}
.seo-point h4{font-family:var(--f-display);font-weight:600;font-size:14px;margin-bottom:3px}
.seo-point p{font-size:13px;color:var(--c-ink-muted);line-height:1.55}

.faq-grid{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.faq-grid{grid-template-columns:.4fr .6fr;gap:60px}}
.faq-title{position:static}
@media(min-width:900px){.faq-title{position:sticky;top:90px}}
.faq-title h2{margin-bottom:12px}
.faq-title p{font-size:14px;color:var(--c-ink-muted);line-height:1.6}
.faq-title a{color:var(--c-accent);text-decoration:underline}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--c-line)}
.faq-item:last-child{border-bottom:1px solid var(--c-line)}
.faq-q{width:100%;text-align:left;padding:18px 0;font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--c-ink);display:flex;align-items:center;justify-content:space-between;gap:18px;transition:color .2s;min-height:60px;background:none;border:0;cursor:pointer}
@media(min-width:700px){.faq-q{padding:22px 0;font-size:16px}}
.faq-q:hover{color:var(--c-accent)}
.faq-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--c-pastel-1);position:relative;transition:background .25s}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--c-ink);top:50%;left:50%;transition:transform .35s,background .25s}
.faq-icon::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.faq-icon::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.faq-item.is-open .faq-icon{background:var(--c-ink)}
.faq-item.is-open .faq-icon::before,.faq-item.is-open .faq-icon::after{background:var(--c-cream)}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 0 18px;font-size:14px;color:var(--c-ink-soft);line-height:1.65;max-width:600px}

/* FOOTER */
.site-footer.footer{background:var(--c-ink);color:var(--c-cream);padding:48px 0 0;margin-top:32px}
.footer-newsletter{display:grid;gap:18px;padding-bottom:36px;border-bottom:1px solid rgba(251,247,238,.12)}
@media(min-width:800px){.footer-newsletter{grid-template-columns:1fr auto;align-items:end;gap:48px;padding-bottom:48px}}
.footer-news-eyebrow{color:var(--c-accent);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.footer-news-title{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,4vw,40px);line-height:1.05;letter-spacing:-.025em;color:var(--c-cream)}
.footer-news-form{display:flex;gap:8px;align-items:end;min-width:0}
@media(min-width:800px){.footer-news-form{min-width:340px}}
/* Selector chained to .footer-news-form to bump specificity to (0,2,0)
   so it beats Storefront-theme's input[type=email] rule (0,1,1) on
   /shop/cart, which otherwise paints the input theme-grey. */
.footer-news-form .footer-news-input{flex:1;min-width:0;padding:13px 16px;background:var(--c-cream);border:0;border-radius:999px;color:var(--c-ink);font-family:var(--f-body);font-size:14px;outline:none}
.footer-news-form .footer-news-input:focus{box-shadow:0 0 0 2px var(--c-accent)}
.footer-news-form .footer-news-input::placeholder{color:var(--c-ink);opacity:.55}
.footer-news-submit{padding:11px 20px;background:var(--c-cream);color:var(--c-ink);border-radius:999px;font-size:12px;font-weight:700;transition:background .25s,color .25s;white-space:nowrap;min-height:44px;border:0;cursor:pointer}
.footer-news-submit:hover{background:var(--c-ink);color:var(--c-cream)}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;padding:40px 0}
@media(min-width:1000px){.footer-cols{grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding:56px 0}}
.footer-brand-block{grid-column:1 / -1}
@media(min-width:1000px){.footer-brand-block{grid-column:auto}}
.footer-brand-block .logo{color:var(--c-cream)}
.footer-brand-text{margin-top:12px;font-size:13px;line-height:1.7;color:rgba(251,247,238,.6);max-width:320px}
.footer-col-title{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-cream);margin-bottom:14px}
/* Same reason as .dropdown-links above — explicit list reset so theme
   ul rules can't indent footer column links off-axis from the title. */
.footer-col-list{padding:0;margin:0;list-style:none}
.footer-col-list li{margin-bottom:9px}
.footer-col-list a{font-size:13px;color:var(--c-cream);transition:color .2s}
.footer-col-list a:hover{color:var(--c-accent)}
.footer-bottom{display:flex;flex-direction:column;gap:14px;padding:20px 0 calc(20px + env(safe-area-inset-bottom) + 60px);border-top:1px solid rgba(251,247,238,.12);font-size:12px;color:rgba(251,247,238,.5);text-align:center}
@media(min-width:700px){.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;padding:20px 0;text-align:left}}
.footer-social{display:flex;gap:4px;justify-content:center}
.footer-social a{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--c-cream);transition:background .25s}
.footer-social a:hover{background:var(--c-accent);color:#fff}
.footer-social svg{width:16px;height:16px;fill:currentColor}

/* MOBILE STICKY CTA BAR */
.sticky-cta-bar{
  position:fixed;bottom:0;left:0;right:0;background:var(--c-ink);color:var(--c-cream);
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;z-index:80;
  transform:translateY(100%);transition:transform .35s var(--ease-out);
  box-shadow:0 -4px 20px rgba(0,0,0,.12);
}
.sticky-cta-bar.is-visible{transform:translateY(0)}
.sticky-cta-bar .text{flex:1;min-width:0}
.sticky-cta-bar .top{font-family:var(--f-display);font-weight:700;font-size:14px;line-height:1.1}
.sticky-cta-bar .sub{font-size:11px;opacity:.7;margin-top:2px}
.sticky-cta-bar .btn-cta{background:var(--c-accent);color:#fff;padding:11px 18px;border-radius:999px;font-family:var(--f-display);font-size:13px;font-weight:600;flex-shrink:0;min-height:42px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.sticky-cta-bar .btn-cta:active{transform:scale(.96)}
.sticky-cta-close{width:30px;height:30px;flex-shrink:0;color:var(--c-cream);opacity:.6;display:inline-flex;align-items:center;justify-content:center;background:none;border:0}
.sticky-cta-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(min-width:1000px){.sticky-cta-bar{display:none}}

/* ──────────────────────────────────────────────────────────
   SECONDARY PAGES (preserved from collection design)
   ────────────────────────────────────────────────────────── */

/* COLLECTION PAGE — col-hero, toolbar, sidebar filters */
.col-hero{background:var(--c-accent);color:#fff;position:relative;overflow:hidden}
/* Slimmer than the homepage hero — these are list pages where the goal
   is to push products above the fold. Padding + h1 sized to fit the
   eyebrow / breadcrumb / heading in roughly half the height of the
   original full-bleed homepage hero. */
.col-hero-inner{display:grid;grid-template-columns:1fr;align-items:center;gap:10px;padding:clamp(20px,3.2vw,36px) 0;text-align:center}
.col-hero h1{font-size:clamp(26px,4.8vw,44px);letter-spacing:-.02em;font-weight:800;text-transform:uppercase}
/* Breadcrumbs in the col-hero (category/search). The PDP uses the same
   .breadcrumbs class with its own scoped styles further down. */
.col-hero .breadcrumbs{font-size:13px;opacity:.9;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;color:#fff;padding:0}
.col-hero .breadcrumbs a{color:inherit}
.col-hero .breadcrumbs a:hover{text-decoration:underline}
.col-hero .breadcrumbs .sep{opacity:.65}
.col-hero .breadcrumbs .current{color:inherit;font-weight:500}
/* Centered under the H1 — col-hero-inner is text-align:center, but the
   <p>'s max-width:60ch needs `margin:0 auto` to actually horizontal-
   center within the grid cell on desktop. */
.col-hero p{margin:8px auto 0;opacity:.95;max-width:60ch}
.col-hero-search{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;margin:18px auto 0;background:#fff;border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 12px 32px -10px rgba(0,0,0,.18)}
.col-hero-search svg{width:18px;height:18px;color:var(--c-ink-muted);flex-shrink:0}
.col-hero-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--c-ink);padding:10px 4px}
.col-hero-search input::placeholder{color:var(--c-ink-muted)}
.col-hero-search .btn{min-height:40px;padding:0 18px;font-size:13px}
@media(min-width:720px){.col-hero-inner{padding:clamp(26px,3.6vw,48px) 0}}

/* Sub-category strip — sits between the col-hero and the product grid
   on parent category pages. Real on-page links into children for both
   shoppers and crawlers (parent → child internal link equity). Designed
   slim so it doesn't eat the fold the way the hero did. */
.subcat-strip{padding:14px 0 0;background:transparent}
.subcat-strip-heading{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-muted);margin:0 0 10px}
.subcat-strip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.subcat-strip-list a{display:inline-flex;align-items:center;padding:8px 14px;background:var(--c-pastel-1);color:var(--c-ink);border-radius:var(--r-pill);font-size:13px;font-weight:500;transition:background .2s,color .2s,transform .2s}
.subcat-strip-list a:hover{background:var(--c-ink);color:var(--c-cream);transform:translateY(-1px)}
@media(max-width:700px){
  .subcat-strip{padding:12px 0 0}
  .subcat-strip-list{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subcat-strip-list::-webkit-scrollbar{display:none}
  .subcat-strip-list a{flex-shrink:0;padding:7px 12px;font-size:12px}
}

.toolbar{display:flex;gap:12px;align-items:center;padding:clamp(20px,3vw,28px) 0 16px;flex-wrap:wrap}
.pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;flex:1;min-width:0}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--c-card);border:1px solid var(--c-line);font-size:14px;font-weight:500;white-space:nowrap;color:var(--c-ink);transition:background .2s,color .2s,border-color .2s}
.pill:hover{border-color:var(--c-ink)}
.pill.is-active{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
.toolbar-right{display:flex;gap:8px;align-items:center}
.sort-wrap{position:relative}
.sort{appearance:none;-webkit-appearance:none;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-pill);height:40px;padding:0 36px 0 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--c-ink)}
.sort-wrap::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--c-ink);border-bottom:1.6px solid var(--c-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.filter-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--c-card);border:1px solid var(--c-line);font-size:14px;font-weight:500;color:var(--c-ink);cursor:pointer}
.filter-btn svg{width:16px;height:16px;stroke:var(--c-ink);fill:none;stroke-width:1.8}
.filter-btn:hover{border-color:var(--c-ink)}
.results-meta,.result-meta{font-size:13px;color:var(--c-ink-muted);margin-bottom:12px}

.shop-layout{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:clamp(48px,7vw,80px)}
.sidebar{display:none}
.filter-group{background:var(--c-card);border-radius:var(--r-lg);border:1px solid var(--c-line);margin-bottom:12px;overflow:hidden}
.filter-group-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink);text-align:left;background:none;border:0;cursor:pointer}
.filter-group-head .chev{width:10px;height:10px;border-right:1.8px solid var(--c-ink);border-bottom:1.8px solid var(--c-ink);transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.filter-group.is-open .filter-group-head .chev{transform:rotate(-135deg)}
.filter-group-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
.filter-group.is-open .filter-group-body{max-height:600px}
.filter-group-body ul{padding:0 18px 16px;margin:0;list-style:none}
.filter-group-body li{margin:0}
.checkbox{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;cursor:pointer;min-height:36px;color:var(--c-ink)}
.checkbox input{display:none}
.checkbox .box{width:18px;height:18px;border:1.5px solid var(--c-line);border-radius:5px;background:var(--c-bg);position:relative;flex-shrink:0;transition:background .15s,border-color .15s}
.checkbox input:checked + .box{background:var(--c-ink);border-color:var(--c-ink)}
.checkbox input:checked + .box::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border-right:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(45deg)}
.checkbox .label{flex:1}
.checkbox .count{color:var(--c-ink-muted);font-size:12px}
.checkbox:hover .box{border-color:var(--c-ink)}
.filter-clear-row{margin-bottom:14px}
.filter-clear-row a{font-size:13px;color:var(--c-ink-muted);text-decoration:underline}
.filter-clear-row a:hover{color:var(--c-ink)}
/* The "Clear all filters" row sits flush against the sidebar edge by
   default — pad it slightly so the link doesn't read as part of the
   filter group above it. */
.filter-clear-row-all{padding:0 4px}

/* Drawer head title — was an inline style on the filter drawer's <strong>. */
.drawer-head-title{font-family:var(--f-display);font-size:18px}

/* Variant <select> fallback (PDP). Visual parity with size buttons + swatches
   so a non-color/non-size attribute (e.g. "Material") still feels native. */
.variant-select{padding:12px 14px;border:1.5px solid var(--c-line);border-radius:var(--r-sm);font:inherit;background:#fff;outline:0;font-size:14px;color:var(--c-ink);width:100%;max-width:280px}
.variant-select:focus{border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(31,29,27,.08)}

/* Gallery empty state — shown only when a product has zero images. */
.gallery-empty{display:flex;align-items:center;justify-content:center;color:var(--c-ink-muted);font-size:14px}

/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES (refunds & shipping, terms, privacy, dmca)
   Two-column layout: sticky in-page TOC on the left, content on the
   right; a single mobile dropdown TOC under 860px. .dl-* prefix
   preserved because these classes are tightly scoped to the legal
   layout — nothing else uses them.
   ════════════════════════════════════════════════════════════════ */
.dl-wrap{font-family:var(--f-body);color:var(--c-ink);line-height:1.7;font-size:15.5px;-webkit-font-smoothing:antialiased}
.dl-wrap *,.dl-wrap *::before,.dl-wrap *::after{box-sizing:border-box}
.dl-layout{display:flex;max-width:1120px;margin:0 auto;gap:0}
.dl-sidebar{width:270px;flex-shrink:0;padding:32px 0 32px 24px;position:sticky;top:80px;max-height:calc(100vh - 80px);overflow-y:auto;align-self:flex-start}
.dl-sidebar nav{padding-right:24px}
.dl-sidebar .nav-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-muted);margin-bottom:16px;padding-left:14px}
.dl-sidebar a{display:block;text-decoration:none;color:var(--c-ink-soft);font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:8px;transition:background .15s,color .15s;margin-bottom:2px}
.dl-sidebar a:hover{background:var(--c-pastel-1);color:var(--c-ink)}
.dl-sidebar a.is-active{background:var(--c-pastel-1);color:var(--c-accent);font-weight:600}
.dl-main{flex:1;min-width:0;padding:40px 48px 80px;max-width:820px}
.dl-section{margin-bottom:56px}
.dl-section:last-child{margin-bottom:0}
.dl-section-title{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:var(--c-ink);padding-bottom:12px;border-bottom:2px solid var(--c-accent);margin-bottom:28px;display:inline-block}
.dl-sub{margin-bottom:28px}
.dl-sub:last-child{margin-bottom:0}
.dl-sub-title{font-size:16px;font-weight:700;color:var(--c-ink);margin-bottom:8px}
.dl-sub p{color:var(--c-ink-soft);margin-bottom:12px}
.dl-sub p:last-child{margin-bottom:0}
.dl-sub ol{color:var(--c-ink-soft);margin:12px 0 12px 22px}
.dl-sub ol li{margin-bottom:8px}
.dl-callout{background:var(--c-pastel-1);border-left:3px solid var(--c-accent);padding:16px 20px;border-radius:0 12px 12px 0;margin:16px 0;font-size:14.5px;color:var(--c-ink-soft)}
.dl-callout strong{color:var(--c-ink)}
.dl-email{color:var(--c-accent);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s}
.dl-email:hover{border-bottom-color:var(--c-accent)}
.dl-divider{height:1px;background:var(--c-line);margin:48px 0}
.dl-contact{background:#fff;border:1px solid var(--c-line);border-radius:12px;padding:24px 28px;display:flex;align-items:center;gap:16px;margin-top:48px}
.dl-contact .dl-icon{width:42px;height:42px;background:var(--c-pastel-1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dl-contact .dl-icon svg{width:20px;height:20px;color:var(--c-accent)}
.dl-contact .dl-ctext{font-size:14px;color:var(--c-ink-soft);line-height:1.5}
.dl-contact .dl-ctext strong{color:var(--c-ink);display:block;margin-bottom:2px;font-size:15px}
.dl-mobile-toc{display:none}
@media(max-width:860px){
  .dl-sidebar{display:none}
  .dl-main{padding:32px 20px 64px}
  .dl-layout{display:block}
  .dl-mobile-toc{display:block;background:#fff;border-bottom:1px solid var(--c-line);padding:16px 20px;position:sticky;top:0;z-index:100}
  .dl-mobile-toc select{width:100%;padding:10px 14px;font:inherit;font-size:14px;font-weight:600;border:1px solid var(--c-line);border-radius:8px;background:var(--c-bg);color:var(--c-ink);appearance:none}
}
.load-more-wrap{text-align:center;margin-top:clamp(28px,5vw,48px)}
.load-more{background:var(--c-ink);color:var(--c-bg);border-radius:var(--r-pill);padding:0 36px;min-height:52px;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:background .25s,color .25s,transform .25s;text-decoration:none}
.load-more:hover{background:var(--c-accent);color:#fff;transform:translateY(-1px)}
/* Ghost variant — used as the "Back to start" link on subsequent pages. */
.load-more.is-ghost{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-ink)}
.load-more.is-ghost:hover{background:var(--c-ink);color:var(--c-bg)}

/* PAGE-LEVEL: PAGE HEAD, PAGINATION (breadcrumbs styled in PDP block below). */
.page-head{padding:14px 0 24px}
.page-head h1{margin:0 0 8px}
.page-head p{color:var(--c-ink-soft);margin:0;max-width:62ch}
.empty-state{text-align:center;padding:48px 24px;background:var(--c-pastel-1);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:14px;align-items:center}
.empty-state h3{margin:0}
.cat-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:32px 0}
.pagination a{padding:10px 18px;border:1px solid var(--c-line);border-radius:8px;color:var(--c-ink);font-weight:500;font-size:14px}
.pagination a:hover{background:var(--c-pastel-1)}
.page-curr{color:var(--c-ink-muted);font-size:13px}

/* ════════ PRODUCT DETAIL PAGE ════════ */
.breadcrumbs{font-size:12px;color:var(--c-ink-muted);padding:18px 0 8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.breadcrumbs a{transition:color .2s}
.breadcrumbs a:hover{color:var(--c-accent)}
.breadcrumbs .sep{opacity:.5}
.breadcrumbs .current{color:var(--c-ink);font-weight:500}

.product-detail{display:grid;grid-template-columns:1fr;gap:24px;padding:8px 0 32px}
@media(min-width:900px){.product-detail{grid-template-columns:1.15fr 1fr;gap:48px;padding:16px 0 64px}}
@media(min-width:1100px){.product-detail{gap:64px;padding:20px 0 80px}}

/* Gallery */
.gallery{position:relative}
@media(min-width:900px){.gallery{position:sticky;top:80px;align-self:start;display:flex;gap:14px}}
.thumbs{display:none}
@media(min-width:900px){
  .thumbs{display:flex;flex-direction:column;gap:10px;flex-shrink:0;max-height:540px;overflow-y:auto;padding-right:4px;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
}
.thumb{width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;background:var(--c-pastel-1);cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .2s;flex-shrink:0;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--c-line)}
.thumb.is-active{border-color:var(--c-ink)}

.gallery-main{flex:1;position:relative}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-lg);background:var(--c-pastel-1);aspect-ratio:1/1;-webkit-overflow-scrolling:touch}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track > div{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/1;overflow:hidden}
.gallery-track img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .gallery-track{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden}
  .gallery-track > div{display:none}
  .gallery-track > div.is-active{display:block;flex-basis:100%}
}
.gallery-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
@media(min-width:900px){.gallery-dots{display:none}}
.gallery-dots span{width:6px;height:6px;border-radius:50%;background:var(--c-line);transition:background .25s,width .25s}
.gallery-dots span.is-active{background:var(--c-ink);width:22px;border-radius:999px}
.gallery-badge{position:absolute;top:14px;left:14px;background:var(--c-accent);color:#fff;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;z-index:2}

/* Product info */
.product-info{display:flex;flex-direction:column;gap:18px}
@media(min-width:900px){.product-info{gap:20px}}
.cat-link{font-size:12px;font-weight:600;color:var(--c-accent);letter-spacing:.08em;text-transform:uppercase}
.cat-link:hover{text-decoration:underline}
.product-title{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-0.025em;color:var(--c-ink)}
.product-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.product-rating .stars{color:var(--c-star);font-size:15px;letter-spacing:1px}
.product-rating .rating-num{font-weight:700;color:var(--c-ink)}
.product-rating a{font-size:13px;color:var(--c-ink-soft);border-bottom:1px solid var(--c-line);padding-bottom:1px;transition:color .2s,border-color .2s}
.product-rating a:hover{color:var(--c-accent);border-color:var(--c-accent)}

.price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-current{font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:-0.02em;color:var(--c-ink)}
.price-orig{font-size:18px;color:var(--c-ink-muted);text-decoration:line-through;font-weight:500}
.price-save{background:var(--c-pastel-1);color:var(--c-accent-deep,#E85F40);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.price-tax{font-size:12px;color:var(--c-ink-muted);width:100%}

.product-short{font-size:15px;line-height:1.65;color:var(--c-ink-soft)}

.variant-group{display:flex;flex-direction:column;gap:10px}
.variant-label{display:flex;justify-content:space-between;align-items:center}
.variant-label strong{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-ink)}
.variant-label .value{font-size:13px;color:var(--c-ink-muted)}
.variant-label a{font-size:12px;color:var(--c-ink-soft);border-bottom:1px solid var(--c-line);padding-bottom:1px}
.variant-label a:hover{color:var(--c-accent);border-color:var(--c-accent)}

.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;position:relative;border:2px solid transparent;transition:border-color .2s,transform .2s;padding:3px;background-clip:content-box;background-color:transparent}
.swatch::before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--swatch-color);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.swatch:hover{border-color:var(--c-line)}
.swatch.is-active{border-color:var(--c-ink)}

.size-buttons{display:flex;flex-wrap:wrap;gap:8px}
.size-btn{min-width:54px;padding:10px 14px;border-radius:var(--r-sm);background:#fff;border:1.5px solid var(--c-line);font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--c-ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.size-btn:hover{border-color:var(--c-ink)}
.size-btn.is-active{background:var(--c-ink);color:var(--c-cream);border-color:var(--c-ink)}
.size-btn.disabled{color:var(--c-ink-muted);cursor:not-allowed;text-decoration:line-through;opacity:.55;background:transparent}
.size-btn.disabled:hover{border-color:var(--c-line)}

.stock-indicator{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.stock-indicator.in-stock{color:var(--c-success,#2F6E47)}
.stock-indicator.low-stock{color:var(--c-warn,#B5891F)}
.stock-indicator.out-stock{color:var(--c-ink-muted)}
.stock-indicator::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse-dot 1.6s ease-in-out infinite}

.shipping-estimate{background:var(--c-pastel-2);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px}
.shipping-estimate svg{flex-shrink:0;width:22px;height:22px;fill:none;stroke:var(--c-success,#2F6E47);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shipping-estimate .ship-text{font-size:13px;color:var(--c-ink);line-height:1.4}
.shipping-estimate .ship-text strong{font-family:var(--f-display);font-weight:700}
.shipping-estimate .ship-text small{display:block;color:var(--c-ink-muted);font-size:12px;margin-top:1px}

.atc-row{display:flex;gap:10px;align-items:stretch}
.qty-stepper{display:flex;align-items:center;background:#fff;border:1.5px solid var(--c-line);border-radius:999px;overflow:hidden;flex-shrink:0}
.qty-stepper button{width:44px;height:54px;color:var(--c-ink);transition:background .2s;font-size:18px;font-weight:300;background:none;border:0;cursor:pointer}
.qty-stepper button:hover{background:var(--c-pastel-1)}
.qty-stepper button:disabled{opacity:.4;cursor:not-allowed}
.qty-stepper input{width:36px;border:0;outline:0;text-align:center;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--c-ink);background:transparent;height:54px;-moz-appearance:textfield}
.qty-stepper input::-webkit-inner-spin-button,.qty-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.atc-btn{flex:1;height:54px;background:var(--c-ink);color:var(--c-cream);border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:15px;transition:background .25s,transform .2s,box-shadow .25s;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer}
.atc-btn:hover{background:var(--c-accent);transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(255,122,89,.5)}
.atc-btn:active{transform:translateY(0)}
.atc-btn .price-in-btn{opacity:.85;font-weight:500}

.trust-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:18px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);margin-top:8px}
@media(min-width:500px){.trust-badges{grid-template-columns:repeat(4,1fr)}}
.trust-badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.trust-badge svg{width:22px;height:22px;fill:none;stroke:var(--c-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust-badge span{font-size:11px;font-weight:600;color:var(--c-ink);line-height:1.3}

.product-meta{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--c-line);font-size:12px;color:var(--c-ink-muted)}
.product-meta strong{color:var(--c-ink);font-weight:500}
.product-meta a{color:var(--c-ink);text-decoration:underline;transition:color .2s}
.product-meta a:hover{color:var(--c-accent)}

/* Tabs / accordion */
.tabs-section{padding:48px 0;border-top:1px solid var(--c-line)}
@media(min-width:900px){.tabs-section{padding:64px 0}}
.tab-nav{display:none}
@media(min-width:700px){
  .tab-nav{display:flex;gap:32px;border-bottom:1px solid var(--c-line);margin-bottom:32px}
  .tab-btn{padding:14px 0;font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--c-ink-muted);position:relative;transition:color .2s;background:none;border:0;cursor:pointer}
  .tab-btn::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--c-ink);transform:scaleX(0);transition:transform .25s var(--ease,cubic-bezier(.65,0,.35,1))}
  .tab-btn.is-active{color:var(--c-ink)}
  .tab-btn.is-active::after{transform:scaleX(1)}
  .tab-panel{display:none}
  .tab-panel.is-active{display:block}
  .tab-mobile-trigger{display:none}
}
.tab-panel{font-size:15px;line-height:1.7;color:var(--c-ink-soft);max-width:760px}
.tab-panel p{margin-bottom:14px}
.tab-panel strong{color:var(--c-ink);font-weight:600}
.tab-panel a{color:var(--c-accent);text-decoration:underline}
@media(max-width:699px){
  .tab-panel{display:none}
  .tab-panel.is-active{display:block;padding:0 0 18px}
  .tab-mobile-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--c-ink);text-align:left;border-top:1px solid var(--c-line);background:none;cursor:pointer}
  .tab-mobile-trigger:first-of-type{border-top:0}
  .tab-mobile-trigger .acc-icon{width:24px;height:24px;flex-shrink:0;position:relative}
  .tab-mobile-trigger .acc-icon::before,.tab-mobile-trigger .acc-icon::after{content:'';position:absolute;background:var(--c-ink);top:50%;left:50%;transition:transform .3s var(--ease,cubic-bezier(.65,0,.35,1))}
  .tab-mobile-trigger .acc-icon::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
  .tab-mobile-trigger .acc-icon::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
  .tab-mobile-trigger.is-open .acc-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
}

/* FBT */
.fbt-section{padding:32px 0 48px}
@media(min-width:900px){.fbt-section{padding:48px 0 80px}}
.fbt-section h2{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-0.02em;margin-bottom:6px}
.fbt-section .sub{font-size:14px;color:var(--c-ink-muted);margin-bottom:24px}
.fbt-grid{display:grid;gap:24px}
@media(min-width:700px){.fbt-grid{grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}}
.fbt-stack{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.fbt-stack::-webkit-scrollbar{display:none}
.fbt-product{flex-shrink:0;width:36%;min-width:140px;max-width:200px}
@media(min-width:700px){.fbt-product{width:auto;flex:1;min-width:0;max-width:none}}
.fbt-product .img{aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--c-pastel-1);margin-bottom:10px}
.fbt-product .img img{width:100%;height:100%;object-fit:cover}
.fbt-product .name{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-ink);line-height:1.3;margin-bottom:3px}
.fbt-product .price{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--c-accent)}
.fbt-plus{font-size:24px;color:var(--c-ink-muted);font-weight:300;flex-shrink:0}
.fbt-summary{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:20px}
.fbt-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.fbt-list label{display:flex;align-items:center;gap:10px;cursor:pointer}
.fbt-list input[type=checkbox]{width:20px;height:20px;accent-color:var(--c-accent);flex-shrink:0;cursor:pointer}
.fbt-list .row-name{flex:1;font-size:14px;color:var(--c-ink)}
.fbt-list .row-name span{font-size:12px;color:var(--c-ink-muted)}
.fbt-list .row-price{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--c-ink)}
.fbt-totals{padding-top:16px;border-top:1px solid var(--c-line);margin-bottom:14px}
.fbt-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.fbt-row.total{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--c-ink);margin-top:8px}
.fbt-row .save{font-size:11px;font-weight:700;color:var(--c-success,#2F6E47);background:var(--c-pastel-2);padding:3px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.fbt-cta{width:100%;height:48px;background:var(--c-ink);color:var(--c-cream);border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:14px;transition:background .25s,transform .2s;border:0;cursor:pointer}
.fbt-cta:hover{background:var(--c-accent);transform:translateY(-1px)}

/* Reviews */
.reviews-section{padding:48px 0;border-top:1px solid var(--c-line)}
@media(min-width:900px){.reviews-section{padding:64px 0}}
.reviews-header{display:grid;gap:24px;margin-bottom:32px}
@media(min-width:700px){.reviews-header{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.reviews-header h2{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.5vw,32px);letter-spacing:-0.02em;margin-bottom:6px}
.rating-summary{display:flex;align-items:center;gap:18px}
.rating-big{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-0.04em;color:var(--c-ink)}
.rating-meta .stars{color:var(--c-star);font-size:16px;letter-spacing:1px;margin-bottom:2px}
.rating-meta .total{font-size:13px;color:var(--c-ink-muted)}
.rating-bars{display:flex;flex-direction:column;gap:5px}
.rating-bar-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:12px;color:var(--c-ink-muted)}
.rating-bar-row .star-label{font-weight:600;color:var(--c-ink)}
.rating-bar{height:8px;background:var(--c-line);border-radius:999px;overflow:hidden}
.rating-bar > span{display:block;height:100%;background:var(--c-star);border-radius:999px;transition:width .8s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.reviews-actions{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.review-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-pill{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--c-line);font-size:12px;font-weight:500;color:var(--c-ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.filter-pill:hover{border-color:var(--c-ink)}
.filter-pill.is-active{background:var(--c-ink);color:var(--c-cream);border-color:var(--c-ink)}
.write-review-btn{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-ink);padding:8px 16px;border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:13px;transition:background .2s,color .2s;cursor:pointer}
.write-review-btn:hover{background:var(--c-ink);color:var(--c-cream)}
.reviews-list{display:flex;flex-direction:column;gap:24px}
.review{padding-bottom:24px;border-bottom:1px solid var(--c-line)}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review-avatar{width:38px;height:38px;border-radius:50%;background:var(--c-pastel-2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--c-ink);font-size:14px;flex-shrink:0}
.review-name{display:flex;flex-direction:column;gap:1px}
.review-name strong{font-family:var(--f-display);font-size:14px;color:var(--c-ink)}
.review-name .meta-row{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--c-ink-muted)}
.verified-badge{display:inline-flex;align-items:center;gap:3px;color:var(--c-success,#2F6E47);font-weight:600}
.verified-badge::before{content:'✓';font-size:10px}
.review-stars{color:var(--c-star);font-size:13px;letter-spacing:1px;margin-left:auto}
.review-title{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink);margin:6px 0 6px}
.review-body{font-size:14px;line-height:1.6;color:var(--c-ink-soft);margin-bottom:10px}
.review-photos{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.review-photos img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);cursor:pointer;transition:transform .25s}
.review-photos img:hover{transform:scale(1.05)}
.review-foot{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--c-ink-muted);flex-wrap:wrap}
.helpful-btn{background:transparent;color:var(--c-ink-muted);display:inline-flex;align-items:center;gap:5px;transition:color .2s;border:0;cursor:pointer}
.helpful-btn:hover{color:var(--c-accent)}
.helpful-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.reviews-load-more{display:block;margin:32px auto 0;padding:12px 28px;background:transparent;border:1.5px solid var(--c-line);border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--c-ink);transition:background .2s,border-color .2s;cursor:pointer}
.reviews-load-more:hover{background:var(--c-pastel-1);border-color:var(--c-ink)}
.reviews-empty{padding:48px 0;text-align:center;color:var(--c-ink-muted);font-size:14px}

/* Related */
.related-section{padding:48px 0 64px;border-top:1px solid var(--c-line)}
@media(min-width:900px){.related-section{padding:64px 0 96px}}
.related-section h2{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.5vw,32px);letter-spacing:-0.02em;margin-bottom:24px}

/* Sticky mobile ATC (product page) */
.sticky-atc{position:fixed;bottom:0;left:0;right:0;background:var(--c-bg);border-top:1px solid var(--c-line);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;z-index:80;transform:translateY(100%);transition:transform .3s var(--ease-out,cubic-bezier(.16,1,.3,1));box-shadow:0 -4px 20px rgba(0,0,0,.05)}
.sticky-atc.is-visible{transform:translateY(0)}
.sticky-atc img{width:48px;height:48px;border-radius:var(--r-sm);object-fit:cover;flex-shrink:0;background:var(--c-pastel-1)}
.sticky-atc .info{flex:1;min-width:0}
.sticky-atc .info strong{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-ink);display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc .info span{font-size:13px;font-weight:700;color:var(--c-accent)}
.sticky-atc .info span del{color:var(--c-ink-muted);font-weight:400;margin-right:4px;font-size:12px}
.sticky-atc .add{background:var(--c-ink);color:var(--c-cream);padding:11px 18px;border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:13px;flex-shrink:0;min-height:44px;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer}
.sticky-atc .add:active{transform:scale(.96)}
@media(min-width:1000px){.sticky-atc{display:none}}
@media(max-width:999px){body.has-sticky-atc{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}

/* SEARCH PAGE */
.search-large{display:flex;gap:8px;margin-top:14px;max-width:640px}
.search-large input{flex:1;padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--r-sm);font-size:15px;outline:none;font-family:inherit}
.search-large input:focus{border-color:var(--c-ink)}
.search-large button{padding:12px 24px;background:var(--c-ink);color:#fff;border:0;border-radius:var(--r-sm);cursor:pointer;font-weight:600}

/* DESKTOP-ONLY tweaks */
@media(min-width:980px){
  .filter-btn{display:none}
  .shop-layout{grid-template-columns:264px 1fr;gap:32px}
  .sidebar{display:block;align-self:start;position:sticky;top:calc(var(--h-header-condensed) + 16px)}
}
/* (Old `.sticky-atc{display:block}` rule removed — the .sticky-atc class
   is now reserved for the PDP sticky add-to-cart bar; visibility is driven
   by JS `is-visible` toggling, not breakpoint display.) */

/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE — its own hero variant + section layouts. The home page
   hero is full-bleed with a background image; the about page hero is
   an editorial 2-column split (copy left, image right). Both share
   the .hero class root, so .hero-split neutralizes the bg-image
   styles and adds a neutral pastel surface instead.
   ════════════════════════════════════════════════════════════════ */
.hero.hero-split{background-color:var(--c-bg);min-height:0;display:block;overflow:visible}
.hero.hero-split .hero-bg,.hero.hero-split .hero-overlay{display:none}
.hero.hero-split .hero-copy{max-width:none;color:inherit;animation:none;padding:0}
.hero.hero-split .hero-eyebrow{background:var(--c-pastel-1);color:var(--c-accent);border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.hero-split .hero-title{color:var(--c-ink);text-shadow:none}
.hero.hero-split .hero-sub{color:var(--c-ink-soft);text-shadow:none}
.hero.hero-split .hero-ctas .btn-secondary{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.hero-split .hero-ctas .btn-secondary:hover{background:var(--c-ink);color:var(--c-cream)}

.hero-grid{display:grid;gap:28px;align-items:center;padding:36px 0}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr;gap:56px;padding:56px 0}}
.hero-visual{aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--c-pastel-2);position:relative}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--c-pastel-1),var(--c-pastel-3))}
.hero-title .line{display:block}

/* About — editorial section (image + copy alternating). */
.section.editorial,.section.reveal{}
.editorial-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.editorial-grid{grid-template-columns:1fr 1fr;gap:56px}}
.editorial-img{aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--c-pastel-2);position:relative}
.editorial-img img{width:100%;height:100%;object-fit:cover;display:block}
.editorial-img-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--c-pastel-1),var(--c-pastel-3))}
.editorial-copy h2{margin-bottom:14px}
.editorial-copy p{color:var(--c-ink-soft);font-size:15px;line-height:1.7;margin-bottom:14px}
.editorial-copy .cta-link{display:inline-flex;align-items:center;gap:6px;color:var(--c-accent);font-weight:600;font-size:14px;margin-top:8px}

/* About-page pillars — editorial card grid. Tonal pastel bg per card,
   oversized numeric eyebrow on top, title + body below. Same visual
   family as .billboard / .editorial but at card scale. Auto-fits 1→4
   columns based on width. */
.pillars-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:600px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pillars-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.pillar-card{padding:28px 24px 26px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:10px;min-height:200px;transition:transform .25s,box-shadow .25s}
.pillar-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(0,0,0,.08)}
.pillar-num{font-family:var(--f-display);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--c-ink);opacity:.55}
.pillar-icon{width:36px;height:36px;color:var(--c-ink);margin-top:-4px}
.pillar-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pillar-title{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--c-ink);margin-top:auto}
.pillar-body{font-size:14px;line-height:1.55;color:var(--c-ink-soft)}

/* About — billboard CTA strip. */
.billboard{background:var(--c-pastel-2);border-radius:var(--r-xl);padding:36px 24px;text-align:center;position:relative;overflow:hidden}
@media(min-width:700px){.billboard{padding:56px 40px}}
.billboard-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.billboard-grid{grid-template-columns:1fr 1fr;gap:48px;text-align:left}}
.billboard-copy h2{margin-bottom:14px}
.billboard-copy p{color:var(--c-ink-soft);font-size:15px;line-height:1.65;max-width:480px;margin:0 auto 22px}
@media(min-width:900px){.billboard-copy p{margin:0 0 22px}}

/* Modifier: single-column centered final-CTA billboard (about page). */
.billboard.is-centered .billboard-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
.billboard.is-centered .billboard-copy{max-width:64ch}
.billboard.is-centered .billboard-copy p{margin-left:auto;margin-right:auto}

/* Generic horizontal button row — centered, wrapping. */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Section-head modifier: centered title + subhead row (used by stats). */
.section-head.stats-heading{justify-content:center;text-align:center}

/* About — stats row. */
.stats-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;text-align:center}
@media(min-width:700px){.stats-list{grid-template-columns:repeat(4,1fr);gap:28px}}
.stats-list .num{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--c-ink);line-height:1}
.stats-list .label{font-size:12px;color:var(--c-ink-muted);margin-top:6px;letter-spacing:.04em}

/* About — pillars (4-up small cards). */
.pillars-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:600px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.pillars-grid{grid-template-columns:repeat(4,1fr)}}
.pillar-card{background:var(--c-card);border:1px solid var(--c-line);padding:22px;border-radius:var(--r-lg)}
.pillar-card .icon{width:36px;height:36px;border-radius:50%;background:var(--c-pastel-1);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.pillar-card h3{font-size:16px;margin-bottom:6px}
.pillar-card p{font-size:14px;color:var(--c-ink-soft);line-height:1.55}

/* About — `.trending-grid` is the legacy class name the about page uses
   for the pillars / "what we believe" cards. Style it the same as the
   home callout cards so the about page reads cohesively. */
.trending-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:0 var(--pad)}
@media(min-width:600px){.trending-grid{grid-template-columns:repeat(2,1fr);gap:18px;padding:0}}
@media(min-width:900px){.trending-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.trending-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.trending-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.08)}
.tc-media{display:flex;align-items:center;justify-content:center;background:var(--c-pastel-1)}
.tc-no{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;border-radius:var(--r-sm)}
.tc-name{font-family:var(--f-display);font-weight:700;font-size:16px;padding:18px 18px 6px;color:var(--c-ink)}
.tc-blurb{padding:0 18px 20px;font-size:14px;line-height:1.55;color:var(--c-ink-soft)}

/* About — statement marquee (between hero + story). */
.statement{background:var(--c-ink);color:var(--c-cream);padding:14px 0;overflow:hidden}
.statement-track{display:flex;align-items:center;gap:32px;width:max-content;animation:scroll-x 38s linear infinite;padding-left:var(--pad)}
.statement-track span{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.statement-track .dot{width:5px;height:5px;border-radius:50%;background:var(--c-accent);display:inline-block;flex-shrink:0}

/* About — stats row (count-up numbers). */
.stats{padding:48px var(--pad)}
@media(min-width:700px){.stats{padding:64px var(--pad)}}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center;max-width:var(--max-w);margin:0 auto}
@media(min-width:700px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:32px}}
.stat .num{font-family:var(--f-display);font-size:clamp(32px,6vw,52px);font-weight:800;color:var(--c-ink);line-height:1;letter-spacing:-.03em}
.stat .label{font-size:12px;color:var(--c-ink-muted);margin-top:8px;letter-spacing:.06em;text-transform:uppercase}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH — final pass after every other rule above. Lives at
   the bottom so it wins specificity ties without !important. The
   goal: every page reads cleanly on a 360-414px viewport without
   horizontal scroll, with breathing room on the edges and headlines
   that don't dominate the fold.
   ════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* Wider gutters on phones than the original 16px — text shouldn't kiss
     the screen edge. Header + hero get extra inner padding on top of this
     since their content is denser (logo + 4 icons + hamburger / overlay
     text against a busy background). */
  :root{--pad:24px}

  /* Header — explicit larger inset so logo + icon row breathes. The
     icons themselves stay at 44px hit-targets but the row as a whole
     pulls in from screen edge. */
  .header-inner{padding-left:6px;padding-right:6px}

  /* Hero — full-bleed bg image with dark overlay text means the visual
     edge feels closer to the screen than for normal sections. .container
     gives 24px on mobile (--pad above); we bump to 32px so the eyebrow,
     headline, rating, and CTAs visibly breathe from the screen edge.
     Note: longhand padding-left/right replaces .container's `padding:0
     var(--pad)` shorthand — these are NOT additive. Set the desired
     final value directly. */
  .hero-inner{padding-left:32px;padding-right:32px}

  /* Trust ribbon — make it obvious it's a horizontal slider. Adds:
     1. fade-mask on right edge so the cut-off chip hints at more
     2. small chevron in the eyebrow that taps to scroll
     3. minimum overscroll-bounce on iOS */
  .trust-ribbon{padding:14px 0;position:relative}
  .trust-ribbon::after{content:'';position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(90deg,transparent,var(--c-pastel-1));pointer-events:none}
  .trust-list{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--pad);justify-content:flex-start;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:24px}
  .trust-list::-webkit-scrollbar{display:none}
  .trust-list span{white-space:nowrap;flex-shrink:0;font-size:12px;scroll-snap-align:start}
  .trust-list svg{width:14px;height:14px}

  /* Category page sibling-cat pills are too narrow to read on mobile
     and don't read as scrollable. Hide them — filter button + sort
     dropdown remain. */
  .toolbar .pills{display:none}

  /* Headlines — clamp() mins were tuned for desktop; shrink on phone
     so the heaviest 800-weight + uppercase combos don't visually
     overflow. */
  .hero-title{font-size:clamp(30px,8vw,44px);margin-bottom:12px}
  .hero-eyebrow{margin-bottom:12px;font-size:10px;padding:6px 10px}
  .hero-sub{font-size:14px;margin-bottom:20px}
  .col-hero h1{font-size:clamp(22px,6vw,30px);letter-spacing:-.02em}
  .col-hero p{font-size:13px}
  .product-title{font-size:clamp(24px,7vw,32px)}
  .section-head h2,h2{font-size:clamp(22px,6vw,30px)}

  /* Section vertical rhythm — tighter so a phone scroll covers more
     than just two sections of empty space + heading. */
  .section{padding:40px 0}
  /* Vertical-only — longhand intentionally so it doesn't reset the
     horizontal padding set above (32px) via the same selector. */
  .hero-inner{padding-top:56px;padding-bottom:56px}
  .col-hero-inner{padding:20px 0}
  .tabs-section,.reviews-section{padding:36px 0}
  .related-section{padding:40px 0 56px}
  .fbt-section{padding:28px 0 40px}
  .product-detail{padding:8px 0 24px}

  /* Hero CTAs — labels can be long ("Shop now — $39.99") so stack
     vertically on tight phones instead of squeezing 2-up. */
  .hero-ctas{grid-template-columns:1fr;gap:8px}
  .hero-ctas .btn{width:100%}

  /* Newsletter form — input + button stack so neither is cramped. */
  .footer-news-form{flex-direction:column;align-items:stretch;gap:12px}
  .footer-news-submit{width:100%}
  .footer-newsletter{padding-bottom:28px}

  /* In-page search bar (search/category col-hero) — stack on tight
     phones so the button doesn't squish and lose its label. */
  .col-hero-search{flex-wrap:wrap;padding:8px 8px 8px 14px;gap:6px}
  .col-hero-search input{padding:8px 4px;flex:1 1 auto;min-width:0}
  .col-hero-search .btn{width:100%;margin-top:4px}

  /* Box-style content blocks — tighter internal padding on phones so
     their content doesn't cascade through too many layers of pad. */
  .callout{padding:28px 20px}
  .empty-state{padding:32px 18px}
  .trust-badges{padding:14px}
  .shipping-estimate{padding:12px 14px}
  .fbt-summary{padding:16px}

  /* Promo marquee — smaller text + tighter gaps on phones. */
  .promo-track{gap:18px}
  .promo-track span{font-size:11px;gap:18px}

  /* Footer cols — 1 column on the tightest phones to avoid cramped
     2-column lists where a long category name wraps awkwardly. */
  .footer-cols{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .footer-bottom{padding:18px 0 calc(18px + env(safe-area-inset-bottom))}

  /* Drawer / mobile menu polish */
  .drawer-foot{padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom))}

  /* Reviews — bars + summary stack with a small gap rather than
     the 24px desktop gap; phones see them sequentially. */
  .reviews-header{gap:18px;margin-bottom:24px}
  .rating-big{font-size:46px}

  /* Tabs section — mobile triggers should have looser padding so
     they're tap-friendly without hugging the edge. */
  .tab-mobile-trigger{padding:16px 0}

  /* PDP: keep the qty-stepper compact + ensure ATC button can shrink
     gracefully when the price-in-button label appends a 5-6 char price. */
  .qty-stepper button{width:38px;height:50px}
  .qty-stepper input{width:30px;height:50px;font-size:14px}
  .atc-btn{height:50px;font-size:14px;min-width:0}
  .atc-btn .price-in-btn{display:none}

  /* PDP: review actions row — let the "Write a review" button wrap
     under the filter pills on tight phones so neither truncates. */
  .reviews-actions{flex-direction:column;align-items:stretch;gap:12px}
  .review-filters{justify-content:flex-start}
  .write-review-btn{align-self:flex-start}

  /* PDP: gallery thumbs already hidden < 900px (mobile shows the
     swipeable carousel + dots). Keep the badge readable on narrow phones. */
  .gallery-badge{top:10px;left:10px;font-size:9px;padding:5px 10px}

  /* PDP: ratings + meta tighter on phones. */
  .rating-summary{gap:14px}

  /* Search/category toolbar: wraps already; pills get a small bottom pad
     so they don't visually merge with the results meta line below. */
  .toolbar{padding:14px 0 10px}
  .results-meta{margin-bottom:14px}

  /* Breadcrumbs: keep the sep separator from wrapping ugly — small font
     on phones is fine. */
  .breadcrumbs{font-size:11px;padding:14px 0 6px}
}

/* Ultra-tight phones (≤380px — older iPhones, small Androids). */
@media(max-width:380px){
  :root{--pad:18px}
  .hero-title{font-size:clamp(26px,8vw,38px)}
  .product-title{font-size:clamp(22px,7vw,28px)}
  .col-hero h1{font-size:clamp(26px,8vw,36px)}
  .product-rating{font-size:12px;gap:8px}
  .price-current{font-size:28px}

  /* Trust badges → 2 cols (already default at tight) but make sure
     the centered text stays readable. */
  .trust-badge span{font-size:10px}

  /* PDP variant labels — tighten the row so "Color: Choose color" fits */
  .variant-label strong{font-size:12px}
  .variant-label .value{font-size:12px}

  /* Keep icon buttons at WCAG 2.1 AA minimum tap target (44×44) on mobile
     so the search/account/cart/hamburger row stays thumb-friendly. The
     row tightens via reduced gap rather than shrunken buttons. */
  .icon-btn{width:44px;height:44px}
  .header-actions{gap:0}
}

/* PDP and the general sticky-cta-bar both anchor at the viewport bottom
   on mobile — without this they stack on top of each other on a product
   page. The PDP sticky always wins because it's contextually more useful
   ("Add to cart" beats "Shop now"). */
body:has(.sticky-atc) .sticky-cta-bar{display:none !important}
