/* ===========================================================
   VDG Ashvi — shared site design system
   Palette + type + components used by index.php and product.php

   2026-08-20 palette redesign: moved off the cream/gold "boutique
   clothing brand" look to a cooler graphite + steel-blue system that
   reads as a multi-industry manufacturing group, not a single-category
   apparel label (see memory/vdgb2b-multi-industry-landing-page.md).
   Token NAMES are kept as-is (--gold, --cream, etc.) since they are
   referenced across index.php/product.php/site.css — only the VALUES
   changed, so nothing downstream needed touching. --deal/--deal-soft
   are new: a semantic "offer" color, deliberately distinct from the
   brand accent, used only for deal/discount badges.
   =========================================================== */

/* Phase B1, 2026-09-17 — Bemount alignment. Token base ported from Bemount's DESIGN-SYSTEM.md v1.2:
   black-and-white primary; red (--deal) narrowed to semantic sale/discount-only; gold (--gold-star)
   narrowed to ratings-only; warm-neutral raised surfaces; near-sharp 2px radii (circular elements
   stay 999px). The B2B keeps its blue as the trade-transactional accent (bulk-rate/sample CTAs read
   as actions, not decoration) — Bemount's --ink fills that role on retail. Dark mode kept per the
   user's decision: a warm-neutral dark derived from the same DNA, not Bemount's cool slate. */
:root{
  --cream:#F5F4F0;
  --paper:#FFFFFF;
  --bg-raised:#F5F4F0;
  --bg-sunk:#EDEBE4;
  --ink:#17171A;
  --ink-muted:#59564E;
  --ink-faint:#93908A;
  --line:#E6E3DB;
  --line-strong:#D3CFC6;
  --gold:#2F5FDD;            /* B2B trade action accent (kept) */
  --gold-deep:#1E3FA8;
  --gold-soft:#E8EFFE;
  --accent:#D8321F;          /* Bemount red — sale/discount only */
  --accent-dark:#B02717;
  --accent-tint:#FBE3DE;
  --gold-star:#C99A2E;       /* ratings only */
  --placeholder:#EDEBE4;
  --placeholder-2:#E3E0D8;
  --good:#2E8B57; --good-soft:#E6F4EC;
  --deal:#D8321F; --deal-soft:#FBE3DE;
  --shadow-drawer:0 2px 6px rgba(23,23,26,.05), 0 12px 30px rgba(23,23,26,.08);
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-num:"Archivo","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,.84,.32,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --r-lg:2px; --r-md:2px; --r-sm:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1A1917; --paper:#232220; --bg-raised:#232220; --bg-sunk:#2C2A27;
    --ink:#F0EEEA; --ink-muted:#B4AFA6; --ink-faint:#837E75;
    --line:#332F2B; --line-strong:#45403A;
    --gold:#6D93F2; --gold-deep:#8FADF5; --gold-soft:#1D2740;
    --accent:#E8563F; --accent-dark:#F0725C; --accent-tint:#3A1D18;
    --gold-star:#D9B05C;
    --placeholder:#2C2A27; --placeholder-2:#332F2B; --good:#5FBE83; --good-soft:#152A1D;
    --deal:#E8563F; --deal-soft:#3A1D18;
    --shadow-drawer:0 2px 6px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --cream:#1A1917; --paper:#232220; --bg-raised:#232220; --bg-sunk:#2C2A27;
  --ink:#F0EEEA; --ink-muted:#B4AFA6; --ink-faint:#837E75;
  --line:#332F2B; --line-strong:#45403A;
  --gold:#6D93F2; --gold-deep:#8FADF5; --gold-soft:#1D2740;
  --accent:#E8563F; --accent-dark:#F0725C; --accent-tint:#3A1D18;
  --gold-star:#D9B05C;
  --placeholder:#2C2A27; --placeholder-2:#332F2B; --good:#5FBE83; --good-soft:#152A1D;
  --deal:#E8563F; --deal-soft:#3A1D18;
  --shadow-drawer:0 2px 6px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; color:var(--ink-muted); }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--gold-soft); }

.wrap{ max-width:1360px; margin:0 auto; padding-inline:24px; }
@media (max-width:768px){ .wrap{ padding-inline:18px; } }

/* ---------- Motion ----------
   .reveal is visible by default (opacity:1) so content never depends on
   JS running or the user scrolling to exist, only its keyframe animation
   is JS-gated. A crawler, a slow connection, or scripting disabled all
   still get the full page.

   2026-08-21: distances roughly doubled and a spring/overshoot variant
   (.reveal-jump) added, per direct feedback that the first motion pass
   read as too subtle — "start jumping and sliding up and down". */
@keyframes revealIn{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:translateY(0); } }
.reveal{ opacity:1; }
.reveal.in{ animation:revealIn .75s var(--ease) both; }

/* Reveal variants — each section family gets its own entrance language
   instead of one repeated fade-up. Elements carry both .reveal (base, for
   the JS observer selector) and one variant class — the variant rule is
   declared after .reveal.in so it wins on equal specificity. */
@keyframes revealScale{ from{ opacity:0; transform:scale(.86) translateY(26px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes revealLeft{ from{ opacity:0; transform:translateX(-56px); } to{ opacity:1; transform:translateX(0); } }
@keyframes revealRight{ from{ opacity:0; transform:translateX(56px); } to{ opacity:1; transform:translateX(0); } }
@keyframes revealMask{ from{ opacity:0; clip-path:inset(0 0 100% 0); } to{ opacity:1; clip-path:inset(0 0 0% 0); } }
/* revealJump: a genuine "pop into place" — overshoots past its resting
   position (translateY goes negative mid-animation, i.e. bounces slightly
   above the baseline) before settling, via --ease-bounce. */
@keyframes revealJump{ 0%{ opacity:0; transform:translateY(52px) scale(.9); } 55%{ opacity:1; transform:translateY(-10px) scale(1.03); } 80%{ transform:translateY(4px) scale(.99); } 100%{ opacity:1; transform:translateY(0) scale(1); } }
.reveal-scale.in{ animation:revealScale .65s var(--ease) both; }
.reveal-left.in{ animation:revealLeft .7s var(--ease) both; }
.reveal-right.in{ animation:revealRight .7s var(--ease) both; }
.reveal-mask.in{ animation:revealMask .7s var(--ease) both; }
.reveal-jump.in{ animation:revealJump .85s var(--ease-bounce) both; }

/* Ambient floating motion — continuous, not scroll-gated, for a handful of
   small accent elements so the page still feels alive between scrolls. */
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.float{ animation:floatY 3.2s ease-in-out infinite; }
.float-slow{ animation:floatY 4.4s ease-in-out infinite; animation-delay:.5s; }

/* Scroll parallax targets (site.js) — always a different element than any
   .reveal-* animation on the same photo, so the two transforms never fight:
   animation-fill-mode:both would otherwise pin the element's transform and
   silently swallow the inline style the parallax script sets. */
[data-parallax]{ will-change:transform; }
/* Photos being parallaxed need headroom so the translate never reveals the
   frame's edge — oversize slightly and recentre. */
.photo img[data-parallax]{ position:relative; height:118%; top:-9%; }

@media (prefers-reduced-motion: reduce){
  .reveal.in, .reveal-scale.in, .reveal-left.in, .reveal-right.in, .reveal-mask.in, .reveal-jump.in{ animation:none; }
  .float, .float-slow{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Utility bar ---------- */
.utility{ background:var(--ink); color:var(--cream); }
.utility .wrap{ display:flex; justify-content:space-between; align-items:center; padding-block:7px; font-size:0.75rem; letter-spacing:.03em; gap:16px; }
.utility a{ opacity:.85; }
.utility a:hover{ opacity:1; }
@media (max-width:700px){ .utility .wrap > span:last-child{ display:none; } }

/* ---------- Header ---------- */
.nav{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; gap:16px; height:66px; }
.nav-icons{ flex-shrink:0; }
.brand{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.brand .mark{ width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.brand .wordmark{ font-size:1.05rem; font-weight:800; letter-spacing:.1em; }
.brand small{ display:block; font-size:0.75rem; letter-spacing:.15em; color:var(--ink-faint); font-weight:700; margin-top:1px; }
/* V4-4f: measured at 1440 — brand 266 + nav 665 + icons 395 = 1326px inside a 1245px content
   box, so the "Create business account" button was pushed past the right edge and clipped. The
   nav grew when "For Retailers" joined it. Tightened the gap and tracking, and let the nav shrink
   before the actions do: the CTA is the one thing in that row that must never be cut off. */
.nav-links{ display:flex; align-items:center; gap:16px; margin-inline:auto; min-width:0; flex-shrink:1; }
.nav-links a, .nav-link-mega{ font-size:0.75rem; font-weight:700; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; }
.nav-links a{ color:var(--ink-muted); padding-block:4px; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.is-active{ color:var(--ink); border-bottom-color:var(--accent); }
.nav-icons{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink); position:relative; flex:0 0 auto; }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .badge{ position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:var(--gold); color:#fff; font-size:0.75rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
/* 2026-09-16: display:flex above beat the hidden attribute, so an empty basket always showed "0". */
.icon-btn .badge[hidden]{ display:none; }
.ham{ display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line-strong); align-items:center; justify-content:center; color:var(--ink); }
.namebar{ display:none; }

@media (max-width:960px){
  .nav-row{ height:60px; }
  .nav-links{ display:none; }
  .ham{ display:flex; order:-1; }
  /* Only the header's logo gives way to the name bar; the sign-in cards keep theirs (2026-09-16). */
  .nav-row .brand{ display:none; }
  .nav-icons{ gap:8px; }
  .nav-icons .icon-btn[aria-label="Account"],
  .nav-icons .btn-gold{ display:none; }
  .namebar{ display:flex; justify-content:center; align-items:center; gap:9px; padding:10px 0; border-top:1px solid var(--line); }
  .namebar .mark{ width:26px; height:26px; }
  .namebar .wordmark{ display:block; font-size:1.02rem; }
}

/* ---------- Mega menu (Industries) ----------
   Desktop: click/tap to open (hover is a progressive enhancement on
   fine-pointer devices only, per ui-ux-pro-max's hover-vs-tap guidance —
   trackpads/touch always work via click). Large per-industry image panel
   on the right, list on the left; image crossfades on selection. */
.nav-link-mega{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; font:inherit; color:var(--ink-muted); cursor:pointer; padding:0; }
.nav-link-mega:hover{ color:var(--ink); }
.nav-link-mega svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.nav-link-mega[aria-expanded="true"] svg{ transform:rotate(180deg); }

.mega{ position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 28px 50px -30px rgba(21,25,32,.35); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; z-index:39; }
.mega.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.mega-inner{ display:grid; grid-template-columns:340px 1fr; gap:0; min-height:420px; }
.mega-list{ padding:22px 18px 22px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.mega-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-radius:var(--r-sm); color:var(--ink); transition:background .2s var(--ease), transform .2s var(--ease); }
.mega-item-name{ font-size:.92rem; font-weight:600; }
.mega-item-badge{ font-size:0.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--placeholder-2); color:var(--ink-muted); white-space:nowrap; flex:0 0 auto; }
.mega-item-badge.live{ background:var(--gold); color:#fff; }
.mega-item:hover, .mega-item:focus-visible, .mega-item.is-active{ background:var(--gold-soft); transform:translateX(6px); }
.mega-item.is-active .mega-item-name{ color:var(--gold-deep); }

.mega-visual{ position:relative; padding:22px; display:flex; flex-direction:column; gap:14px; }
.mega-visual-frame{ position:relative; flex:1; border-radius:var(--r-md); overflow:hidden; background:var(--placeholder); min-height:280px; }
.mega-visual-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s var(--ease); }
.mega-visual-frame img.is-shown{ opacity:1; }
.mega-visual-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,25,32,.78) 0%, rgba(21,25,32,.05) 55%); }
.mega-visual-copy{ position:absolute; left:24px; right:24px; bottom:20px; z-index:1; color:#fff; }
.mega-visual-copy span{ font-size:1.14rem; font-weight:800; display:block; }
.mega-visual-copy p{ font-size:.82rem; color:rgba(255,255,255,.85); margin-top:6px; max-width:46ch; }
.mega-visual-subs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mega-visual-subs.is-visible{ display:grid; }
.mega-visual-subs:not(.is-visible){ display:none; }
.mega-visual-sub{ position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:var(--placeholder); }
.mega-visual-sub img{ width:100%; height:100%; object-fit:cover; display:block; }
.mega-visual-sub span{ position:absolute; left:6px; bottom:6px; font-size:0.75rem; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

@media (max-width:960px){ .mega{ display:none; } }

/* ---------- Mobile drawer ----------
   .ham toggles .open on #mobileMenu (site.js). Off-canvas panel slides in
   from the right over a scrim; Industries collapses into a native
   <details> accordion (free, accessible expand/collapse, no JS needed). */
.mmenu{ position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none; }
.mmenu::before{ content:""; position:absolute; inset:0; background:rgba(21,25,32,.5); opacity:0; transition:opacity .3s var(--ease); }
.mmenu-panel{ position:absolute; top:0; right:0; bottom:0; width:min(340px,86vw); background:var(--paper); transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; display:flex; flex-direction:column; }
.mmenu.open{ visibility:visible; pointer-events:auto; }
.mmenu.open::before{ opacity:1; }
.mmenu.open .mmenu-panel{ transform:translateX(0); }
.mmenu-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.mmenu-head .wordmark{ font-size:1.05rem; font-weight:800; letter-spacing:.02em; }
.mmenu-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; background:none; color:var(--ink); flex:0 0 auto; }
.mmenu-close svg{ width:16px; height:16px; }
.mmenu-links{ display:flex; flex-direction:column; padding:8px 20px 28px; gap:0; }
.mmenu-links > a{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:.92rem; font-weight:600; color:var(--ink); }
.mmenu-links > a.btn{ margin-top:16px; border-bottom:none; border-radius:2px; }
.mmenu-industries summary{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.mmenu-industries summary::-webkit-details-marker{ display:none; }
.mmenu-industries summary::after{ content:""; width:8px; height:8px; border-right:2px solid var(--ink-muted); border-bottom:2px solid var(--ink-muted); transform:rotate(45deg); transition:transform .25s var(--ease); flex:0 0 auto; }
.mmenu-industries[open] summary::after{ transform:rotate(-135deg); }
.mmenu-industry-list{ display:flex; flex-direction:column; padding:2px 0 12px 12px; }
.mmenu-industry-list a{ display:flex; align-items:center; justify-content:space-between; padding:11px 4px; font-size:.85rem; color:var(--ink-muted); }
.mmenu-industry-list .badge-live, .mmenu-industry-list .badge-soon{ position:static; }
@media (min-width:961px){ .mmenu{ display:none; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:2px; font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; cursor:pointer; transition:transform .15s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.btn:active{ transform:scale(.97); }
/* Phase B1 tune: .btn-gold is the primary CTA everywhere, so it renders Bemount's btn-ink
   (solid --ink per DESIGN-SYSTEM.md §2.2) — blue stays an accent, not a button fill. */
.btn-gold{ background:var(--ink); color:var(--cream); }
.btn-gold:hover{ background:color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.btn-sm{ padding:10px 18px; font-size:.76rem; }
.btn-block{ width:100%; }

/* ---------- Placeholder media ---------- */
.ph{
  background:repeating-linear-gradient(45deg, var(--placeholder) 0 12px, var(--placeholder-2) 12px 24px);
  border:1px solid var(--line-strong); display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ink-muted); text-align:center; gap:6px; padding:16px;
}
.ph b{ font-size:0.75rem; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; }
.ph span{ font-size:0.75rem; max-width:22ch; }
.ph svg{ width:28px; height:28px; opacity:.5; }

/* ---------- Real photography (replaces .ph once generated/shot) ---------- */
.photo{ display:block; position:relative; overflow:hidden; background:var(--placeholder); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo.scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,13,.05) 40%, rgba(20,17,13,.72) 100%); }

/* ---------- Hero (video, poster image stands in until footage is shot) ---------- */
.hero{ position:relative; height:88vh; min-height:560px; max-height:820px; overflow:hidden; background:var(--ink); }
.hero video, .hero .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .hero-bg{ opacity:.78; animation:heroKenBurns 22s ease-in-out infinite alternate; }
.hero .ph{ position:absolute; inset:0; border:none; border-radius:0; color:rgba(255,255,255,.6); background:
    repeating-linear-gradient(45deg, #2A241C 0 12px, #221D16 12px 24px); }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.4) 100%); }
.hero-tag{ position:absolute; top:20px; right:20px; z-index:2; background:rgba(0,0,0,.5); color:rgba(255,255,255,.8); font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.hero-copy{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(20px,5vw,64px) clamp(40px,6vw,72px); color:#fff; }

/* Hero entrance choreography — plays once on load (hero is always above the
   fold, so it doesn't need IntersectionObserver gating like the rest of the
   page); each element staggers in on its own delay. */
@keyframes heroKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
@keyframes heroRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.hero-eyebrow, .hero-copy h1, .hero-copy p, .hero-ctas{ opacity:0; animation:heroRise .8s var(--ease) both; }
.hero-eyebrow{ font-size:0.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:rgba(255,255,255,.92); display:inline-flex; padding:6px 12px; border-radius:2px; width:fit-content; margin-bottom:18px; animation-delay:.15s; }
.hero-copy h1{ font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1.04; color:#fff; max-width:16ch; animation-delay:.3s; }
.hero-copy p{ margin-top:16px; color:rgba(255,255,255,.86); font-size:1.02rem; max-width:48ch; animation-delay:.45s; }
.hero-ctas{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; animation-delay:.6s; }
@media (prefers-reduced-motion: reduce){
  .hero .hero-bg{ animation:none; }
  .hero-eyebrow, .hero-copy h1, .hero-copy p, .hero-ctas{ opacity:1; animation:none; }
}

/* ---------- Stats strip ---------- */
.stats{ border-bottom:1px solid var(--line); background:var(--paper); }
.stats-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding-block:26px; }
@media (max-width:900px){ .stats-row{ grid-template-columns:repeat(3,1fr); gap:20px 0; } }
@media (max-width:560px){ .stats-row{ grid-template-columns:repeat(2,1fr); } }
.stat{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border-right:1px solid var(--line); padding-inline:10px; }
.stat:last-child{ border-right:none; }
@media (max-width:900px){ .stat{ border-right:none; } }
.stat svg{ width:22px; height:22px; color:var(--gold); }
.stat b{ font-family:var(--font-num); font-size:1.3rem; font-weight:800; font-variant-numeric:tabular-nums; }
.stat span{ font-size:0.75rem; color:var(--ink-muted); }
/* Each .stat carries .reveal individually (like the industry cards) rather
   than the row triggering its children — keeps the "visible without JS"
   guarantee: a .stat never sits at opacity:0 waiting on an ancestor class
   that JS might not add in time. */
.stats-row .stat:nth-child(1).in{ animation-delay:0ms; }
.stats-row .stat:nth-child(2).in{ animation-delay:70ms; }
.stats-row .stat:nth-child(3).in{ animation-delay:140ms; }
.stats-row .stat:nth-child(4).in{ animation-delay:210ms; }
.stats-row .stat:nth-child(5).in{ animation-delay:280ms; }

/* ---------- Section shell ---------- */
section{ padding-block:80px; }
@media (max-width:768px){ section{ padding-block:52px; } }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:38px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.55rem,2.8vw,2.2rem); }
.section-head p{ margin-top:8px; font-size:.95rem; max-width:52ch; }
.section-head .more{ font-size:.78rem; font-weight:700; color:var(--gold-deep); white-space:nowrap; display:flex; align-items:center; gap:6px; }
/* B1 tune: eyebrows are neutral micro-labels in Bemount's system, not accent-colored. */
.eyebrow{ display:block; font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px; }

/* ---------- Category / product grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:1000px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
.cat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -18px rgba(28,25,23,.25); }
.cat-card .ph, .cat-card .photo{ aspect-ratio:1/1; border-radius:0; border:none; border-bottom:1px solid var(--line); }
.cat-info{ padding:14px 16px 16px; }
.cat-info b{ display:block; font-size:.92rem; }
.cat-info .designs{ font-size:0.75rem; color:var(--ink-muted); margin-top:2px; display:block; }
.cat-info .price{ font-size:.86rem; font-weight:800; margin-top:8px; display:block; }
.cat-info .moq{ font-size:0.75rem; color:var(--ink-muted); display:block; }
.cat-info .explore{ margin-top:10px; font-size:.76rem; font-weight:700; color:var(--gold-deep); display:flex; align-items:center; gap:5px; }

/* ---------- Shared horizontal rail ----------
   One reusable sliding-carousel shell, used identically by the Trending
   Products rail and the Browse-by-Category rail (per the user's explicit
   "exactly the same" component-reuse request, 2026-08-20). Only the card
   partial nested inside .rail-track changes (.product-card / .category-card). */
.rail{ position:relative; }
.rail-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -4px;
  padding:4px 4px 6px;
}
.rail-viewport::-webkit-scrollbar{ display:none; }
.rail-track{ display:flex; gap:18px; }
.rail-card{ scroll-snap-align:start; flex:0 0 auto; }
/* Individual card stagger — cards enter from the right, echoing the rail's
   own scroll direction, instead of the whole rail fading in as one block. */
.rail-track .rail-card:nth-child(1).in{ animation-delay:0ms; }
.rail-track .rail-card:nth-child(2).in{ animation-delay:70ms; }
.rail-track .rail-card:nth-child(3).in{ animation-delay:140ms; }
.rail-track .rail-card:nth-child(4).in{ animation-delay:210ms; }
.rail-track .rail-card:nth-child(5).in{ animation-delay:280ms; }
.rail-track .rail-card:nth-child(6).in{ animation-delay:350ms; }

.rail-controls{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; }
.rail-progress{ position:relative; flex:1; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.rail-progress span{ position:absolute; top:0; left:0; height:100%; width:100%; background:var(--gold); border-radius:2px; transform-origin:left center; transition:transform .3s var(--ease); will-change:transform; }
.rail-arrows{ display:flex; gap:8px; flex:0 0 auto; }
.rail-arrows button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease), transform .15s var(--ease); }
.rail-arrows button:hover{ background:var(--gold-soft); border-color:var(--gold); }
.rail-arrows button:active{ transform:scale(.94); }
.rail-arrows button:disabled{ opacity:.32; cursor:default; pointer-events:none; }
.rail-arrows svg{ width:17px; height:17px; }

/* Product card — Trending Right Now rail */
.product-card{ width:clamp(240px, 27vw, 292px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(21,25,32,.3); border-color:var(--line-strong); }
.product-card .pc-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--placeholder); }
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.product-card:hover .pc-media img{ transform:scale(1.06); }
.product-card .pc-rank{ position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:0.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.product-card .pc-rank.deal{ background:var(--deal); }
.product-card .pc-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:5px; flex:1; }
.product-card .pc-tag{ font-size:0.75rem; font-weight:700; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.06em; }
.product-card h4{ font-size:.98rem; letter-spacing:-.005em; }
.product-card .pc-price{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.product-card .pc-price .now{ font-size:1.06rem; font-weight:800; font-family:var(--font-num); }
.product-card .pc-price .was{ font-size:.76rem; color:var(--ink-muted); text-decoration:line-through; font-family:var(--font-num); }
.product-card .pc-price .qty-note{ font-size:0.75rem; color:var(--ink-muted); }
.product-card .pc-link{ margin-top:auto; padding-top:10px; font-size:.8rem; font-weight:700; color:var(--gold-deep); display:inline-flex; align-items:center; gap:5px; }
.product-card .pc-link svg{ width:10px; height:10px; transition:transform .25s var(--ease); }
.product-card:hover .pc-link svg{ transform:translate(2px,-2px); }

/* Category card — Browse by Category rail (same .rail shell as products) */
.category-card{ width:clamp(190px, 20vw, 236px); border-radius:var(--r-md); }
.category-card .cc-media{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-md); background:var(--placeholder); }
.category-card .cc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.category-card:hover .cc-media img{ transform:scale(1.07); }
.category-card .cc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,25,32,0) 45%, rgba(21,25,32,.72) 100%); }
.category-card .cc-cap{ position:absolute; left:14px; bottom:14px; z-index:1; display:flex; flex-direction:column; gap:5px; }
.category-card .cc-cap b{ color:#fff; font-size:.85rem; letter-spacing:.02em; }
.category-card .cc-cap span{ color:var(--gold-soft); font-size:0.75rem; font-weight:700; display:flex; align-items:center; gap:4px; }
.category-card.soon .cc-media{ display:flex; align-items:flex-end; background:repeating-linear-gradient(135deg, var(--placeholder) 0 14px, var(--placeholder-2) 14px 28px); }
.category-card.soon .cc-media::after{ display:none; }
.category-card.soon .cc-cap{ position:static; padding:14px; }
.category-card.soon .cc-cap b{ color:var(--ink); }
.category-card.soon .cc-cap span{ color:var(--ink-muted); }

@media (max-width:640px){
  .product-card{ width:74vw; }
  .category-card{ width:56vw; }
  .rail-track{ gap:14px; }
}

/* ---------- Private label split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } }
.feat-list{ display:grid; gap:14px; margin-top:22px; }
.feat-row{ display:flex; align-items:center; gap:12px; font-size:.9rem; }
.feat-row svg{ width:18px; height:18px; color:var(--gold); flex:0 0 auto; }
.split .ph, .split .photo{ aspect-ratio:4/3; border-radius:var(--r-lg); }

/* ---------- Configurator ---------- */
.configurator{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px); }
.config-grid{ display:grid; grid-template-columns:.7fr 1.2fr .9fr 1fr; gap:30px; }
@media (max-width:1100px){ .config-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .config-grid{ grid-template-columns:1fr; } }
.config-steps{ display:flex; flex-direction:column; gap:2px; }
.config-step{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:.82rem; font-weight:700; color:var(--ink-muted); }
.config-step.active{ color:var(--ink); }
.config-step .n{ font-family:var(--font-num); font-size:0.75rem; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.config-step.active .n{ background:var(--gold); border-color:var(--gold); color:#fff; }
.config-main .ph, .config-main .photo{ aspect-ratio:3/4; border-radius:var(--r-md); }
.config-thumbs{ display:flex; gap:8px; margin-top:10px; }
.config-thumbs .ph{ width:52px; height:52px; border-radius:8px; flex:0 0 auto; padding:4px; }
.config-thumbs .photo{ width:52px; height:52px; border-radius:8px; flex:0 0 auto; cursor:pointer; border:2px solid transparent; }
.config-thumbs .photo.active{ border-color:var(--gold); }
.config-preview{ display:grid; gap:10px; align-content:start; }
.opt-row{ display:flex; justify-content:space-between; font-size:.82rem; border-bottom:1px dashed var(--line); padding-bottom:8px; }
.opt-row b{ color:var(--ink-muted); font-weight:600; }
.config-price h5{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin-bottom:10px; }
.tier-list{ display:grid; gap:6px; margin-bottom:16px; }
.tier-list > div{ display:flex; justify-content:space-between; font-size:.8rem; padding:7px 10px; border-radius:6px; border:1px solid var(--line); }
.tier-list > div.active{ border-color:var(--gold); background:var(--gold-soft); font-weight:700; }
.config-field{ margin-bottom:12px; }
.config-field label{ display:block; font-size:0.75rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.select-wf, .stepper{ width:100%; height:40px; border:1px solid var(--line-strong); border-radius:6px; }
.select-wf{ padding-inline:10px; background:var(--paper); color:var(--ink); font-size:.84rem; }
.stepper{ display:flex; align-items:center; }
.stepper button{ width:40px; height:100%; border:none; background:var(--gold-soft); color:var(--ink); font-size:1rem; cursor:pointer; }
.stepper input{ flex:1; text-align:center; border:none; background:transparent; font-family:var(--font-num); font-weight:700; font-variant-numeric:tabular-nums; }
.config-totals{ display:grid; gap:6px; margin:14px 0; font-size:.82rem; }
.config-totals > div{ display:flex; justify-content:space-between; }
.config-totals .grand{ font-size:1rem; font-weight:800; border-top:1px solid var(--line); padding-top:8px; margin-top:4px; }

/* ---------- Channel partner ---------- */
.partner-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
@media (max-width:900px){ .partner-wrap{ grid-template-columns:1fr; } }
.partner-hero .ph, .partner-hero .photo{ aspect-ratio:16/10; border-radius:var(--r-lg); }
.flow-row{ display:flex; align-items:center; gap:0; flex-wrap:wrap; margin-top:20px; }
.flow-step{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; width:100px; }
.flow-step .dot{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.flow-step span{ font-size:0.75rem; font-weight:700; }
.flow-arrow{ flex:1; min-width:16px; height:1px; background:var(--line-strong); margin-inline:2px; }
.wallet-card{ background:var(--ink); color:var(--cream); border-radius:var(--r-lg); padding:26px; }
.wallet-card .label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep); }
.wallet-card .amt{ font-family:var(--font-num); font-size:2rem; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums; }
.wallet-mini{ display:flex; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); font-size:.8rem; }
.wallet-mini b{ display:block; font-size:1rem; }

/* ---------- AI + WhatsApp connected ---------- */
.connect-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
@media (max-width:900px){ .connect-cards{ grid-template-columns:1fr; } }
.mock-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; }
.connect-cards .mock-card:nth-child(1).in{ animation-delay:0ms; }
.connect-cards .mock-card:nth-child(2).in{ animation-delay:100ms; }
.connect-cards .mock-card:nth-child(3).in{ animation-delay:200ms; }
.mock-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:.8rem; font-weight:700; }
.mock-head svg{ width:18px; height:18px; color:var(--good); }
.mock-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bubble{ max-width:85%; padding:9px 13px; border-radius:12px; font-size:.78rem; }
.bubble.user{ align-self:flex-end; background:var(--gold-soft); border-bottom-right-radius:2px; }
.bubble.ai{ align-self:flex-start; background:var(--placeholder); border-bottom-left-radius:2px; }
.mock-product{ display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:8px; align-items:center; }
.mock-product .ph, .mock-product .photo{ width:44px; height:44px; border-radius:6px; flex:0 0 auto; }
.mock-product .mp-info{ flex:1; }
.mock-product .mp-info b{ display:block; font-size:.76rem; }
.mock-product .mp-info span{ font-size:0.75rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; font-size:0.75rem; }
.mock-cart-row{ display:flex; gap:10px; align-items:center; }
.mock-cart-row .ph, .mock-cart-row .photo{ width:40px; height:40px; border-radius:6px; flex:0 0 auto; }
.mock-total{ display:flex; justify-content:space-between; font-weight:800; font-size:.9rem; border-top:1px solid var(--line); padding-top:10px; margin-top:auto; }

/* ---------- Brand partner wall ---------- */
.partner-wall{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center; }
@media (max-width:900px){ .partner-wall{ grid-template-columns:repeat(3,1fr); } }
.partner-wall .ph{ aspect-ratio:2.4/1; border-radius:8px; font-size:0.75rem; }

/* ---------- Final CTA ---------- */
.final{ background:var(--ink); color:var(--cream); border-radius:var(--r-lg); padding:clamp(36px,6vw,64px); text-align:center; }
.final h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.4rem); max-width:20ch; margin-inline:auto; }
.final p{ color:rgba(255,255,255,.75); margin-top:12px; max-width:44ch; margin-inline:auto; }
.final .hero-ctas{ justify-content:center; margin-top:26px; }
.final .btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.final .btn-outline:hover{ background:#fff; color:var(--ink); }
.final .script{ margin-top:20px; font-family:Georgia,serif; font-style:italic; color:var(--gold-deep); font-size:1.1rem; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding-block:56px 30px; background:var(--paper); }
.foot-grid{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:32px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
.foot-brand p{ margin-top:14px; font-size:.84rem; max-width:32ch; }
.foot-col h2{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); margin-bottom:14px; font-weight:800; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-col a{ font-size:.84rem; color:var(--ink-muted); }
.foot-col a:hover{ color:var(--gold-deep); }
.foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.76rem; color:var(--ink-muted); }

/* ---------- Breadcrumb ---------- */
.crumb{ padding-block:16px; font-size:.8rem; color:var(--ink-muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumb a{ color:var(--ink-muted); }
.crumb a:hover{ color:var(--gold-deep); }
.crumb code{ font-family:var(--font-num); background:var(--placeholder); padding:1px 6px; border-radius:5px; font-size:0.75rem; }

/* ---------- Product page ---------- */
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; padding-block:8px 60px; align-items:start; }
@media (max-width:960px){ .pdp{ grid-template-columns:1fr; gap:30px; } }
.gallery{ position:sticky; top:100px; }
@media (max-width:960px){ .gallery{ position:static; } }
.gmain{ aspect-ratio:4/5; border-radius:var(--r-lg); position:relative; }
.gnav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.85); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.gnav.prev{ left:14px; } .gnav.next{ right:14px; }
.gthumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.gthumb{ aspect-ratio:1; border-radius:10px; cursor:pointer; font-size:0.75rem; padding:6px; }
.gthumb.active{ border-color:var(--gold); }

.pname-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pname{ font-size:clamp(1.6rem,2.6vw,2.1rem); }
.price-row{ display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.price-now{ font-family:var(--font-num); font-size:1.9rem; font-weight:800; font-variant-numeric:tabular-nums; }
.moq-note{ font-size:.84rem; margin-top:6px; }

.spec-list{ display:flex; flex-direction:column; margin-top:8px; }
.spec-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.86rem; }
.spec-row:last-child{ border-bottom:1px solid var(--line); }
.spec-row .si{ width:30px; height:30px; border-radius:50%; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); flex:0 0 auto; }
.spec-row .si svg{ width:15px; height:15px; }
.spec-row .sk{ color:var(--ink-muted); width:110px; flex:0 0 auto; }
.spec-row .sv{ font-weight:700; flex:1; }
.spec-row .chev{ width:14px; height:14px; color:var(--ink-muted); }

.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.pack-card{ border:1px solid var(--line-strong); border-radius:10px; padding:12px; text-align:center; cursor:pointer; }
.pack-card.active{ border-color:var(--gold); background:var(--gold-soft); }
.pack-card b{ display:block; font-size:.82rem; }
.pack-card span{ display:block; font-size:0.75rem; margin-top:2px; }

.color-row{ display:flex; gap:10px; margin-top:10px; }
.color-chip{ width:52px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid transparent; }
.color-chip.active{ border-color:var(--gold); }
.color-chip .ph, .color-chip .photo{ aspect-ratio:1; border-radius:0; border:none; }

.price-breakup{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; margin-top:22px; }
.pb-row{ display:flex; justify-content:space-between; font-size:.84rem; padding-block:6px; }
.pb-row span:last-child{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.pb-row.discount span:last-child{ color:var(--good); }
.pb-row.total{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:1.05rem; font-weight:800; }

.cta-row{ display:flex; gap:12px; margin-top:22px; }
.ai-bubble{ position:fixed; bottom:26px; right:26px; width:56px; height:56px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -10px rgba(0,0,0,.4); z-index:30; cursor:pointer; }
.ai-bubble svg{ width:24px; height:24px; color:var(--gold); }

.sticky-cta{ display:none; }
@media (max-width:960px){
  .sticky-cta{ display:flex; align-items:center; gap:14px; position:sticky; bottom:0; background:var(--paper); border-top:1px solid var(--line); padding:12px 18px; z-index:20; }
  .sticky-cta .price-now{ font-size:1.2rem; }
}

/* ---------- Data-driven catalog pages (app/Views/catalog/*.php) ---------- */
.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:22px; }

.pdp-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
@media (max-width:900px){ .pdp-split{ grid-template-columns:1fr; gap:28px; } }

.pdp-attrs .spec-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.pdp-packages-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; margin-bottom:26px; }
.pdp-tier-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.pdp-tier-table th{ text-align:left; padding:6px 0; color:var(--ink-muted); }
.pdp-tier-table td{ padding:8px 0; border-top:1px solid var(--line); }
.pdp-tier-table td:last-child{ font-weight:700; }

/* Phase P5, 2026-09-01 audit: found live-verifying D2C checkout — this class pair is used across
   several public pages (checkout, error banners) but was only ever defined in admin.css, which
   public pages never load, so it rendered as unstyled plain text. */
.admin-alert{ padding:10px 12px; border-radius:var(--r-sm); font-size:.85rem; margin-bottom:14px; }
.admin-alert-error{ background:#F6E3E0; color:#8A3B2E; }
.admin-alert-success{ background:var(--good-soft); color:var(--good); }

/* ---------- Industries showcase (landing page, multi-industry redesign) ----------
   3 columns x 3 rows for the current 9 industries — chosen specifically so
   every row fills completely (Bento Cell Count discipline: N items, N
   cells, no dangling gap in a trailing row).

   2026-08-21: trimmed from 9 shallow cards to 3 deep ones (Clothing,
   Electronics & Appliances, FMCG) per direct feedback — each card now
   shows its own real sub-category range instead of a generic one-liner.
   The other 6 verticals stay fully reachable from the Industries mega
   menu (nav) — they're just no longer duplicated as thin cards here. */
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .industry-grid{ grid-template-columns:1fr; } }

.industry-card{ position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--paper); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.industry-card:hover{ transform:translateY(-8px); box-shadow:0 28px 50px -26px rgba(21,25,32,.34); border-color:var(--gold); }
.industry-card .industry-media{ aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--placeholder); }
.industry-card .industry-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.industry-card:hover .industry-media img{ transform:scale(1.1); }
.industry-card .industry-body{ padding:18px 20px 22px; }
.industry-card .industry-body b{ display:block; font-size:1.05rem; letter-spacing:-.005em; transition:color .3s var(--ease); }
.industry-card:hover .industry-body b{ color:var(--gold-deep); }
.industry-card .industry-body>span{ display:block; font-size:.8rem; color:var(--ink-muted); margin-top:4px; }

.industry-card.soon .industry-media{ display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, var(--placeholder) 0 14px, var(--placeholder-2) 14px 28px); }
.industry-card.soon .industry-media svg{ width:34px; height:34px; color:var(--line-strong); transition:color .4s var(--ease), transform .4s var(--ease); }
.industry-card.soon:hover .industry-media svg{ color:var(--gold); transform:scale(1.12) rotate(-4deg); }
.industry-card.soon{ opacity:.92; }

/* Sub-category strip — now shared by all 3 industry cards (was
   Electronics-only). auto-fit so it naturally wraps to however many chips
   a given industry has (4 for Clothing, 3 for FMCG, 6 for Electronics)
   without a different rule per card. Trailing "+More" chip acknowledges
   there's more range than fits here without fabricating fake categories. */
.industry-subs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; margin-top:14px; }
.industry-sub{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.industry-sub img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; transition:transform .3s var(--ease-bounce); }
.industry-sub:hover img{ transform:scale(1.12) rotate(-2deg); }
.industry-sub em{ font-style:normal; font-size:0.75rem; color:var(--ink-muted); text-align:center; line-height:1.2; }
.industry-sub-more{ aspect-ratio:1; border-radius:8px; border:1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); font-weight:800; font-size:.82rem; background:var(--gold-soft); transition:transform .3s var(--ease-bounce); }
.industry-sub:hover .industry-sub-more{ transform:scale(1.12); }

/* Staggered bounce-in wave — each card carries .reveal individually (see
   index.php) so IntersectionObserver in site.js fires them one by one as
   the row scrolls into view; the delay below turns that into a cascade. */
.industry-grid .industry-card:nth-child(1).in{ animation-delay:0ms; }
.industry-grid .industry-card:nth-child(2).in{ animation-delay:110ms; }
.industry-grid .industry-card:nth-child(3).in{ animation-delay:220ms; }

.badge-live, .badge-soon{ position:absolute; top:12px; left:12px; font-size:0.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; z-index:2; }
.badge-live{ background:var(--gold); color:#fff; }
.badge-soon{ background:rgba(21,25,32,.72); color:#fff; }

/* ---------- Offers band ---------- */
.offers-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .offers-band{ grid-template-columns:1fr; } }
.offer-card{ background:var(--deal-soft); border:1px solid color-mix(in srgb, var(--deal) 30%, transparent); border-radius:var(--r-md); padding:22px; }
.offer-card .offer-tag{ display:inline-flex; font-size:0.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--deal); padding:5px 10px; border-radius:999px; margin-bottom:12px; }
.offer-card h4{ font-size:1.02rem; margin-bottom:6px; }
.offer-card p{ font-size:.84rem; color:var(--ink); opacity:.78; }
.offer-card{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.offer-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -20px rgba(21,25,32,.24); }
.offers-band .offer-card:nth-child(1).in{ animation-delay:0ms; }
.offers-band .offer-card:nth-child(2).in{ animation-delay:100ms; }
.offers-band .offer-card:nth-child(3).in{ animation-delay:200ms; }

/* Site-wide floating AI assistant (2026-09-01 audit, Phase P1) — not on index.php, which already
   has its own full "Always Connected" section with the same assistant inline. */
.ai-widget{ position:fixed; right:20px; bottom:20px; z-index:80; }
.ai-widget-toggle{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(21,25,32,.4); transition:transform .2s var(--ease);
}
.ai-widget-toggle:hover{ transform:scale(1.06); }
.ai-widget-toggle svg{ width:24px; height:24px; }
.ai-widget-icon-close{ display:none; }
.ai-widget.is-open .ai-widget-icon-open{ display:none; }
.ai-widget.is-open .ai-widget-icon-close{ display:block; }
.ai-widget-panel{
  position:absolute; right:0; bottom:70px; width:min(340px, calc(100vw - 40px)); max-height:min(480px, calc(100vh - 120px));
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 24px 48px -16px rgba(21,25,32,.35); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.98); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.ai-widget.is-open .ai-widget-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ai-widget-head{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:.88rem; }
.ai-widget-head svg{ width:18px; height:18px; color:var(--gold); }
.ai-widget-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:320px; }
.ai-widget-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.ai-widget-form input{ flex:1; padding:9px 11px; border:1px solid var(--line-strong); border-radius:8px; font-size:.86rem; background:var(--paper); color:var(--ink); }
.ai-widget-form button{ width:38px; height:38px; border-radius:8px; border:none; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.ai-widget-form button svg{ width:16px; height:16px; }
@media (max-width:480px){ .ai-widget{ right:14px; bottom:14px; } }

/* -----------------------------------------------------------
   Phase LC, 2026-09-13: customer order, track and account pages.
   Built on the storefront's tokens so dark mode and the gold accent follow automatically.
   ----------------------------------------------------------- */
.co-section{ padding-block:40px 64px; }
.co-page{ max-width:880px; display:flex; flex-direction:column; gap:18px; }
.co-narrow{ max-width:520px; }
.co-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; display:flex; flex-direction:column; gap:10px; }
.co-card h2{ font-size:1.02rem; }
.co-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.co-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.co-head h1{ font-size:clamp(1.5rem, 3.4vw, 2.1rem); margin:4px 0 6px; }
.co-eyebrow{ font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.co-muted{ color:var(--ink-muted); font-size:.84rem; }
.co-strong{ color:var(--ink); font-weight:700; }
.co-help{ margin-top:4px; }
.co-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.co-num{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink); }
.co-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; align-items:start; }

.co-placed{ display:flex; flex-direction:column; gap:3px; padding:14px 18px; border-radius:var(--r-md); background:var(--good-soft); color:var(--good); }
.co-placed strong{ font-size:1rem; }
.co-placed span{ color:var(--ink); font-size:.88rem; }

.co-pill{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:0.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; background:var(--placeholder); color:var(--ink-muted); }
.co-pill-pending_payment{ background:var(--deal-soft); color:var(--deal); }
.co-pill-paid, .co-pill-dispatched{ background:var(--gold-soft); color:var(--gold-deep); }
.co-pill-delivered{ background:var(--good-soft); color:var(--good); }

/* Progress: a row of five on wide screens, a vertical list on a phone. The connecting line is a
   pseudo-element on each step so it never needs measuring in JS. */
.co-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); }
.co-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:0 4px; }
.co-steps li::before{ content:""; position:absolute; top:7px; right:50%; width:100%; height:2px; background:var(--line-strong); }
.co-steps li:first-child::before{ display:none; }
.co-steps li.is-done::before{ background:var(--gold); }
.co-dot{ position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2px solid var(--line-strong); }
.co-steps li.is-done .co-dot{ background:var(--gold); border-color:var(--gold); }
.co-step-label{ font-size:.8rem; font-weight:700; color:var(--ink-muted); }
.co-steps li.is-done .co-step-label{ color:var(--ink); }
.co-step-at{ font-size:0.75rem; color:var(--ink-muted); }
@media (max-width:640px){
  .co-head .co-pill{ display:none; } /* the heading already says it; on a phone the pill is a repeat */
  .co-steps{ grid-template-columns:1fr; gap:14px; }
  .co-steps li{ flex-direction:row; align-items:center; text-align:left; gap:12px; padding:0; }
  .co-steps li::before{ top:auto; bottom:50%; right:auto; left:7px; width:2px; height:calc(100% + 14px); }
  .co-step-at{ margin-left:auto; }
}

.co-pay{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; border-color:var(--gold); }
.co-pay-status{ flex-basis:100%; }
.co-keep{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.co-keep > div{ flex:1 1 260px; }

.co-events{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; }
.co-events li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink); }
.co-events time{ color:var(--ink-muted); font-size:.8rem; white-space:nowrap; font-variant-numeric:tabular-nums; }

.co-items{ width:100%; border-collapse:collapse; }
.co-items td{ padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top; }
.co-items td:first-child span{ display:block; margin-top:2px; }
.co-totals{ margin:6px 0 0; display:flex; flex-direction:column; gap:6px; }
.co-totals div{ display:flex; justify-content:space-between; gap:12px; font-size:.88rem; }
.co-totals dt{ color:var(--ink-muted); }
.co-totals dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--ink); }
.co-totals .co-total{ padding-top:8px; border-top:1px solid var(--line-strong); font-size:1rem; font-weight:800; }
.co-totals .co-total dt{ color:var(--ink); }

.co-order-list{ list-style:none; margin:0; padding:0; }
.co-order-list a{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
.co-order-list li:first-child a{ border-top:none; }
.co-order-list a:hover .co-order-main strong{ color:var(--gold-deep); }
.co-order-main{ display:flex; flex-direction:column; gap:2px; }
.co-order-main strong{ color:var(--ink); }
@media (max-width:520px){
  .co-order-list a{ grid-template-columns:1fr auto; }
  .co-order-list .co-pill{ grid-column:1; justify-self:start; }
}

.co-points{ font-size:2rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.co-points span{ font-size:.84rem; font-weight:600; color:var(--ink-muted); }
.co-empty h1{ font-size:1.5rem; }
.co-empty-inline{ display:flex; flex-direction:column; gap:4px; padding:10px 0; }

.co-form{ display:flex; flex-direction:column; gap:12px; }
.co-form label{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:700; color:var(--ink); }
.co-form input{ min-height:46px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font-size:16px; font-family:inherit; background:var(--paper); color:var(--ink); }
.co-form input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
/* Inline links in running text on the order pages; whole-row links (order list) and buttons excluded. */
.co-help a, .co-card p > a:not(.btn), .co-empty-inline a{ color:var(--gold-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* ===========================================================
   Phase M1, 2026-09-14 — wholesale product listing
   The category page previously had no card of its own: it reused .ph
   placeholder boxes because the controller passed no image or price.
   These classes are scoped with the pcard-/listing- prefixes so they
   cannot collide with .cat-card, which the homepage still uses.
   =========================================================== */

.crumbs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.78rem; color:var(--ink-muted); margin-bottom:20px; }
.crumbs a{ color:var(--ink-muted); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span[aria-current]{ color:var(--ink); font-weight:600; }

.listing-count{ font-size:.82rem; color:var(--ink-muted); margin:0; }
.listing-count strong{ color:var(--ink); font-size:1.05rem; }

.listing-toolbar{
  display:flex; flex-wrap:wrap; gap:18px 32px; align-items:flex-start;
  padding:16px 18px; margin-bottom:28px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.filter-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.filter-sort{ margin-left:auto; }
.filter-label{
  font-size:0.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted);
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px; border:1px solid var(--line-strong);
  font-size:.76rem; color:var(--ink); text-decoration:none; background:var(--paper);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip-n{ font-size:0.75rem; opacity:.6; font-variant-numeric:tabular-nums; }
.chip.is-on .chip-n{ opacity:.75; }
.sort-select{
  padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink); font-size:.8rem; font-family:inherit; max-width:100%;
}

.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:20px;
}
.pcard{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover{ border-color:var(--line-strong); }
.pcard-media{
  position:relative; display:block; aspect-ratio:3/4; background:var(--bg-raised);
  overflow:hidden; border-bottom:1px solid var(--line);
}
.pcard-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease); }
.pcard:hover .pcard-media img{ transform:scale(1.05); }
.pcard-noimg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center; font-size:0.75rem; color:var(--ink-muted);
}
.pcard-count,
.pcard-flag{
  position:absolute; top:10px; padding:3px 8px; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.pcard-count{ right:10px; background:rgba(21,25,32,.72); color:#fff; }
.pcard-flag{ left:10px; background:var(--deal-soft); color:var(--deal); }

.pcard-body{ display:flex; flex-direction:column; gap:9px; padding:14px 15px 16px; flex:1; }
.pcard-name{ margin:0; font-size:.84rem; line-height:1.32; font-weight:600; color:#37436B; text-wrap:balance; }
/* B1 bugfix: the forced-dark rule was an empty selector, so a user forcing dark on a
   light-OS device got navy names on charcoal. Both dark paths now share the tint. */
:root[data-theme="dark"] .pcard-name{ color:#C9D2F2; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pcard-name{ color:#C9D2F2; } }
.pcard-name a{ color:inherit; text-decoration:none; }
.pcard-name a:hover{ color:var(--ink); }
.pcard-spec{ margin:0; font-size:0.75rem; color:var(--ink-muted); line-height:1.45; }

.pcard-price{ display:flex; gap:18px; margin:2px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.pcard-price div{ display:flex; flex-direction:column; gap:2px; }
.pcard-price dt{
  font-size:0.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted);
}
.pcard-price dd{ margin:0; font-size:.88rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.pcard-price dd small{ font-size:0.75rem; font-weight:500; color:var(--ink-muted); margin-left:1px; }
/* B1 tune: Bemount's price row is bold ink (§2.3) — the old accent-colored rate fought the
   card title's navy treatment. */
.pcard-rate{ color:var(--ink); }
.pcard-quote{ font-size:.78rem; font-weight:600; color:var(--ink-muted); }
.pcard-terms{ margin:0; font-size:0.75rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.pcard-body .btn{ margin-top:auto; }

/* ===========================================================
   Phase B3, 2026-09-17 — editorial home bands + PDP rails
   =========================================================== */

/* Rating breakdown bars (PDP reviews) — classes used by the view */
.pdp-rating-summary{ display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  margin:0 0 22px; padding:20px 22px; background:var(--placeholder); border:1px solid var(--line);
  border-radius:var(--r-md); }
.pdp-rating-score{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.pdp-rating-score strong{ font-size:2rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.pdp-rating-score small{ color:var(--ink-muted); font-size:0.75rem; }
.pdp-rating-bars{ display:flex; flex-direction:column; gap:5px; }
.pdp-rating-bar{ display:grid; grid-template-columns:34px 1fr 36px; align-items:center; gap:10px;
  font-size:0.75rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.pdp-rating-bar-stars{ color:var(--gold-star); }
.pdp-rating-bar-track{ display:block; height:8px; background:var(--line); border-radius:2px; overflow:hidden; }
.pdp-rating-bar-fill{ display:block; height:100%; background:var(--gold-star); transform-origin:left; }
@media(max-width:640px){ .pdp-rating-summary{ grid-template-columns:1fr; } }

/* Frequently-bought-together bundle */
.fbt{ display:grid; grid-template-columns:1fr 250px; gap:28px; align-items:center;
  background:var(--placeholder); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; }
.fbt-items{ display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.fbt-plus{ align-self:center; color:var(--ink-faint); font-size:1.25rem; padding:0 4px; }
.fbt-item{ display:flex; flex-direction:column; gap:6px; min-width:120px; max-width:165px;
  text-decoration:none; color:inherit; }
.fbt-item img, .fbt-item-ph{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-sm);
  background:var(--line); }
.fbt-item strong{ font-size:.8rem; color:var(--ink); line-height:1.3; }
.fbt-item span:last-child{ font-size:0.75rem; color:var(--ink-muted); }
.fbt-cta{ border-left:1px solid var(--line); padding-left:24px; display:flex; flex-direction:column;
  gap:8px; align-items:flex-start; }
.fbt-cta p{ margin:0; font-size:0.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.fbt-total{ font-size:1.7rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.fbt-cta small{ color:var(--ink-muted); font-size:0.75rem; line-height:1.5; }
@media(max-width:900px){ .fbt{ grid-template-columns:1fr; } .fbt-cta{ border-left:0; padding-left:0;
  border-top:1px solid var(--line); padding-top:16px; } }

/* Home hero row — 3-up editorial tiles */
.hero-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hero-row .tile{ display:block; position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r-md); text-decoration:none; background:var(--placeholder); }
.hero-row .tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.hero-row .tile:hover img{ transform:scale(1.04); }
.hero-row .tile span{ position:absolute; left:14px; bottom:12px; color:#fff; font-weight:600;
  font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.45); }
@media(max-width:800px){ .hero-row{ grid-template-columns:1fr; } .hero-row .tile{ aspect-ratio:16/9; } }

/* Shop-the-edit band */
.edit-band{ margin:44px 0; background:var(--placeholder); border:1px solid var(--line);
  border-radius:var(--r-md); padding:36px 28px; }
.edit-band-grid{ display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:center; }
.edit-band-copy h2{ margin:0 0 8px; }
.edit-band-copy p{ color:var(--ink-muted); margin:0 0 16px; }
.edit-band .product-grid{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .edit-band-grid{ grid-template-columns:1fr; }
  .edit-band .product-grid{ grid-template-columns:repeat(2,1fr); } }

/* Editorial trio (Journal / Staples / New collection) */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:44px 0; }
.trio-tile{ position:relative; aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden;
  display:block; text-decoration:none; background:var(--placeholder); }
.trio-tile>img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.trio-tile:hover>img{ transform:scale(1.04); }
.trio-tile>div{ position:absolute; inset:auto 0 0 0; padding:18px;
  background:linear-gradient(transparent, rgba(12,12,14,.82)); color:#fff; }
.trio-tile h3{ margin:0; font-size:1rem; letter-spacing:.04em; }
.trio-tile p{ margin:4px 0 0; font-size:0.75rem; opacity:.85; }
@media(max-width:800px){ .trio{ grid-template-columns:1fr; } }

.pager{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:36px; }
.pager-link{
  min-width:38px; padding:8px 12px; text-align:center; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); color:var(--ink); text-decoration:none; font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.pager-link:hover{ border-color:var(--gold); color:var(--gold); }
.pager-link.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:700; }

@media (max-width:640px){
  .product-grid{ grid-template-columns:repeat(auto-fill, minmax(155px, 1fr)); gap:12px; }
  .listing-toolbar{ gap:14px 18px; padding:14px; }
  .filter-sort{ margin-left:0; width:100%; }
  .sort-select{ width:100%; }
  .pcard-body{ padding:11px 12px 13px; gap:7px; }
  .pcard-name{ font-size:.82rem; }
  .pcard-price{ gap:12px; }
}

/* ===========================================================
   Phase M5, 2026-09-14 — wholesale product page
   Two calculators are the point of this page, so they carry the
   visual weight; the spec sheet is dense and quiet beneath them.
   =========================================================== */

.pdp-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; }
.pdp-gallery{ position:sticky; top:90px; }
.pdp-hero-img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--placeholder);
}
.pdp-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pdp-thumb{
  padding:0; border:1px solid var(--line); border-radius:var(--r-sm);
  background:none; cursor:pointer; line-height:0; overflow:hidden;
}
.pdp-thumb.is-on{ border-color:var(--gold); }
.pdp-thumb img{ width:72px; height:90px; object-fit:cover; display:block; }
.pdp-video{ width:100%; margin-top:12px; border-radius:var(--r-md); border:1px solid var(--line); }
.pdp-videolink{ margin-top:12px; font-size:.88rem; }

.pdp-title{ font-size:clamp(1.5rem,2.8vw,2.1rem); margin:0 0 10px; line-height:1.2; text-wrap:balance; }
.pdp-lede{ font-size:.94rem; color:var(--ink-muted); margin:0 0 14px; max-width:56ch; }
.pdp-rating{ margin:0 0 16px; font-size:.86rem; }
.pdp-rating strong{ font-size:1.05rem; }
.pdp-rating span{ color:var(--ink-muted); margin-left:5px; }

.pdp-headline{
  display:flex; gap:26px; flex-wrap:wrap; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px;
}
.pdp-headline > div{ display:flex; flex-direction:column; gap:3px; }
.pdp-headline-l{ font-size:0.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.pdp-headline-n{ font-size:1.32rem; font-weight:750; color:var(--gold); font-variant-numeric:tabular-nums; }
.pdp-headline-n small{ font-size:0.75rem; font-weight:500; color:var(--ink-muted); margin-left:2px; }
.pdp-headline-alt{ color:var(--ink); }

.pdp-credit{
  margin:0 0 18px; padding:10px 13px; border-radius:8px; font-size:.83rem;
  background:var(--good-soft); color:var(--good); border:1px solid var(--good);
}

.pdp-calc{ border:1px solid var(--line-strong); border-radius:var(--r-md); padding:16px; background:var(--paper); margin-bottom:18px; }
.pdp-calc-modes{ display:flex; gap:4px; margin-bottom:14px; }
.pdp-mode{
  flex:1; padding:9px 12px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink-muted); font:inherit; font-size:.82rem; font-weight:650; cursor:pointer;
}
.pdp-mode.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.pdp-calc-inputs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:14px; }
.pdp-field{ display:flex; flex-direction:column; gap:5px; }
.pdp-field label{ font-size:0.75rem; font-weight:650; color:var(--ink-muted); }
.pdp-field input, .pdp-field select{
  padding:9px 11px; border:1px solid var(--line-strong); border-radius:8px;
  font:inherit; font-size:.9rem; background:var(--paper); color:var(--ink); width:100%;
}
.pdp-field input:focus-visible, .pdp-field select:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.pdp-quote{ display:flex; flex-direction:column; gap:0; margin:0; }
.pdp-quote > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.pdp-quote dt{ font-size:.82rem; color:var(--ink-muted); }
.pdp-quote dd{ margin:0; font-size:.88rem; font-weight:650; font-variant-numeric:tabular-nums; }
.pdp-quote .is-total{ border-bottom:none; padding-top:11px; }
.pdp-quote .is-total dt{ color:var(--ink); font-weight:700; font-size:.88rem; }
.pdp-quote .is-total dd{ font-size:1.22rem; font-weight:780; color:var(--gold); }
.pdp-quote .is-sub dt, .pdp-quote .is-sub dd{ font-size:.76rem; color:var(--ink-muted); font-weight:500; }
.pdp-quote .is-credit dd{ color:var(--good); }
.pdp-calc-loading{ margin:0; font-size:.84rem; color:var(--ink-muted); }
.pdp-quote-note{ margin:10px 0 0; font-size:.76rem; color:var(--ink-muted); line-height:1.5; }
.pdp-quote-next{
  margin:10px 0 0; padding:9px 12px; border-radius:7px; font-size:.79rem; font-weight:600;
  background:var(--gold-soft); color:var(--gold-deep);
}
.pdp-quote-warn{ margin:0; font-size:.83rem; color:var(--deal); font-weight:600; }

.pdp-details{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:18px; }
.pdp-details summary{ cursor:pointer; font-weight:650; font-size:.88rem; }
.pdp-ladder{ width:100%; border-collapse:collapse; margin-top:12px; }
.pdp-ladder th, .pdp-ladder td{ padding:7px 0; text-align:left; border-bottom:1px solid var(--line); font-size:.84rem; }
.pdp-ladder th{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); }
.pdp-ladder td:last-child, .pdp-ladder th:last-child{ text-align:right; font-variant-numeric:tabular-nums; font-weight:650; }
.pdp-note{ font-size:.76rem; color:var(--ink-muted); margin:10px 0 0; line-height:1.55; }

.pdp-forms{ margin-top:6px; border:1px solid var(--line); border-radius:var(--r-md); padding:20px; background:var(--cream); }
.pdp-actions{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pdp-save{
  display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line-strong);
  border-radius:999px; padding:9px 16px; font:inherit; font-size:.86rem; cursor:pointer; color:var(--ink);
}
.pdp-save:hover{ border-color:var(--gold); color:var(--gold); }

.pdp-docs{ margin-top:22px; }
.pdp-docs h2{ font-size:.95rem; margin:0 0 9px; }
.pdp-docs ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.pdp-docs a{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 13px; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.85rem; font-weight:600;
}
.pdp-docs a:hover{ border-color:var(--gold); color:var(--gold); }
.pdp-docs a span{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:700; }

.pdp-band{ background:var(--paper); border-top:1px solid var(--line); }
.pdp-two{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:start; }
.pdp-two h2{ font-size:1.15rem; margin:0 0 12px; }
.pdp-two p{ font-size:.9rem; line-height:1.65; margin:0 0 12px; max-width:62ch; }
.pdp-subhead{ font-size:.95rem; margin:22px 0 10px; }
.pdp-spec{ margin:0; display:flex; flex-direction:column; gap:1px; }
.pdp-spec > div{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:8px 11px; background:var(--cream); border-radius:6px;
}
.pdp-spec dt{ font-size:.78rem; color:var(--ink-muted); flex:0 0 auto; }
.pdp-spec dd{ margin:0; font-size:.83rem; font-weight:600; text-align:right; }

.profit-calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:start; }
.profit-inputs{ display:flex; flex-direction:column; gap:14px; }
.profit-figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.profit-figures > div{
  display:flex; flex-direction:column; gap:3px; padding:15px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
}
.profit-figures span{ font-size:0.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); }
.profit-figures strong{ font-size:1.34rem; font-weight:770; font-variant-numeric:tabular-nums; }
.profit-figures small{ font-size:0.75rem; color:var(--ink-muted); }
.profit-figures .is-profit{ border-color:var(--good); background:var(--good-soft); }
.profit-figures .is-profit strong{ color:var(--good); }

.mfg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; }
.mfg-card{
  display:flex; flex-direction:column; gap:4px; padding:15px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--cream);
}
.mfg-l{ font-size:0.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.mfg-card strong{ font-size:1.02rem; font-weight:700; }
.mfg-card strong small{ font-size:0.75rem; font-weight:500; color:var(--ink-muted); }
.mfg-card .is-good{ color:var(--good); }

.pdp-related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.pdp-related-card{
  display:flex; flex-direction:column; gap:4px; padding:15px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  text-decoration:none; color:inherit;
}
.pdp-related-card:hover{ border-color:var(--gold); }
.pdp-related-card strong{ font-size:.88rem; line-height:1.35; }
.pdp-related-card span{ font-size:0.75rem; color:var(--ink-muted); }

.pdp-reviews{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.pdp-review{ padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); }
.pdp-review-stars{ margin:0 0 8px; color:var(--gold-star); font-size:.95rem; letter-spacing:.08em; }
.pdp-review-stars span{ color:var(--line-strong); }
.pdp-review-text{ margin:0 0 9px; font-size:.86rem; line-height:1.55; }
.pdp-review-when{ margin:0; font-size:0.75rem; color:var(--ink-muted); }

@media (max-width:900px){
  .pdp-split, .pdp-two, .profit-calc{ grid-template-columns:1fr; gap:28px; }
  .pdp-gallery{ position:static; }
}
@media (max-width:640px){
  .pdp-headline{ gap:18px; }
  .pdp-headline-n{ font-size:1.15rem; }
  .pdp-forms{ padding:15px; }
  .pdp-spec > div{ flex-direction:column; gap:2px; }
  .pdp-spec dd{ text-align:left; }
}

/* ===========================================================
   Phase M6b, 2026-09-15 — create an account
   A photograph of the real product on the left (desktop only)
   and the form on the right. Account type is a set of tiles that
   say what each account is for, because "Dealer - distribute
   products in your market" in a dropdown asked a new visitor to
   classify themselves in words they may not use.
   =========================================================== */

.su-body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font); }
.su{ display:grid; grid-template-columns:1fr; min-height:100dvh; }

.su-side{ display:none; }
.su-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.04em; font-size:.95rem; }
.su-brand img{ border-radius:6px; }

.su-main{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:22px 16px 40px; }
.su-brand-mobile{ align-self:flex-start; }

.su-card{
  width:100%; max-width:560px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 20px;
}
.su-card h1{ margin:0 0 6px; font-size:clamp(1.45rem, 4.5vw, 1.9rem); line-height:1.2; }
.su-lede{ margin:0 0 18px; font-size:.9rem; color:var(--ink-muted); }

.su-note, .su-error{ margin:0 0 16px; padding:10px 13px; border-radius:9px; font-size:.84rem; line-height:1.45; }
.su-note{ background:var(--placeholder); color:var(--ink-muted); }
.su-note-good{ background:var(--good-soft); color:var(--good); }
.su-error{ background:#FBE9E7; color:#B23B2E; font-weight:600; }

#signupForm{ display:flex; flex-direction:column; gap:16px; }

.su-roles{ border:none; margin:0; padding:0; min-width:0; }
.su-roles legend{ font-size:.86rem; font-weight:700; margin:0 0 10px; padding:0; }
.su-role-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
.su-channel-grid{ grid-template-columns:1fr 1fr; }
.su-role{ position:relative; display:block; cursor:pointer; }
.su-role input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.su-role-body{
  display:flex; flex-direction:column; gap:3px; padding:12px 14px 12px 40px; height:100%;
  border:1.5px solid var(--line-strong); border-radius:11px; background:var(--paper);
  transition:border-color .15s var(--ease), background .15s var(--ease);
  position:relative;
}
.su-role-body::before{
  content:""; position:absolute; left:14px; top:15px; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:var(--paper);
}
.su-role input:checked + .su-role-body{ border-color:var(--gold); background:var(--gold-soft); }
.su-role input:checked + .su-role-body::before{ border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--paper); }
.su-role input:focus-visible + .su-role-body{ outline:2px solid var(--gold); outline-offset:2px; }
.su-role:hover .su-role-body{ border-color:var(--gold); }
.su-role-title{ font-size:.9rem; font-weight:700; }
.su-role-blurb{ font-size:.76rem; color:var(--ink-muted); line-height:1.4; }

.su-row{ display:grid; grid-template-columns:1fr; gap:16px; }
.su-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.su-field[hidden]{ display:none; }
.su-field label{ font-size:.8rem; font-weight:650; }
.su-optional{ font-weight:400; color:var(--ink-muted); font-size:0.75rem; }
.su-field input{
  width:100%; padding:12px 13px; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:1rem;
}
.su-field input:focus-visible{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

.su-password{ position:relative; }
.su-password input{ padding-right:74px; }
.su-reveal{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  padding:7px 11px; border:none; border-radius:7px; background:var(--placeholder);
  font:inherit; font-size:.76rem; font-weight:650; color:var(--ink); cursor:pointer;
}
.su-hint{ margin:0; font-size:0.75rem; color:var(--ink-muted); }
.su-hint.is-good{ color:var(--good); }

.su-submit{ margin-top:2px; padding:15px 20px; font-size:.86rem; }
.su-alt{ margin:16px 0 0; text-align:center; font-size:.86rem; }
.su-alt-muted{ margin-top:6px; font-size:.8rem; color:var(--ink-muted); }
.su-alt a{ color:var(--gold); font-weight:650; }

@media (min-width:560px){
  .su-card{ padding:30px 30px; }
  .su-role-grid{ grid-template-columns:1fr 1fr; }
  .su-row{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1000px){
  .su{ grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .su-side{
    display:flex; flex-direction:column; position:sticky; top:0; height:100dvh;
    overflow:hidden; background:var(--ink); color:#fff;
  }
  .su-side .su-brand{ position:absolute; top:26px; left:30px; z-index:2; color:#fff; }
  .su-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; opacity:.9; }
  .su-side::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,15,20,.86) 0%, rgba(12,15,20,.1) 55%, rgba(12,15,20,.35) 100%); }
  .su-side-copy{ position:relative; z-index:2; margin-top:auto; padding:34px 36px 40px; }
  .su-side-title{ margin:0 0 14px; font-size:1.55rem; font-weight:780; line-height:1.2; max-width:22ch; }
  .su-side-copy ul{ margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:.9rem; opacity:.92; }
  .su-main{ justify-content:center; padding:40px 44px; }
  .su-brand-mobile{ display:none; }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .su-error{ background:#3A1E1B; color:#F0A49A; }
}
:root[data-theme="dark"] .su-error{ background:#3A1E1B; color:#F0A49A; }

/* Phase M6b fix from the 1440px render: the site-wide paragraph colour dimmed the headline over the
   photograph. Text on the photo panel is always white, whatever the theme. */
.su-side .su-side-title, .su-side .su-side-copy li{ color:#fff; }

/* ==========================================================================================
   Trade checkout (checkout/index.php) — Phase M6c, 2026-09-16.
   Two columns on a desk: what you are ordering and where it goes, with the money pinned beside
   it. One column on a phone, with the amount and the Pay button held at the bottom of the screen.
   ========================================================================================== */
.tco{ padding-bottom:96px; }
.tco-head{ max-width:62ch; margin-bottom:22px; }
.tco-eyebrow{ font-size:0.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; }
.tco-head h1{ font-size:clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom:8px; }
.tco-head p{ font-size:.92rem; }

.tco-blocked{ max-width:560px; padding:36px 0 20px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.tco-blocked h1{ font-size:1.7rem; }

.tco-notice{
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between;
  padding:14px 16px; margin-bottom:14px; border-radius:var(--r-sm);
  background:var(--deal-soft); border:1px solid color-mix(in srgb, var(--deal) 45%, transparent);
}
.tco-notice[hidden]{ display:none; }
.tco-notice p{ color:var(--ink); font-size:.88rem; max-width:70ch; }
.tco-alert{
  margin-bottom:14px; padding:12px 14px; border-radius:var(--r-sm); font-size:.88rem; font-weight:600;
  background:#FDECEA; color:#A4271B; border:1px solid #F3B8B0;
}

.tco-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.tco-grid[hidden]{ display:none; }
.tco-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.tco-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column; gap:16px; }
.tco-card h2{ font-size:1.05rem; }
.tco-sub{ font-size:.82rem; margin-top:-10px; }

.tco-item{ display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center; }
.tco-thumb{ width:84px; height:112px; object-fit:cover; border-radius:8px; background:var(--placeholder); }
.tco-thumb-empty{ background:linear-gradient(135deg, var(--placeholder), var(--placeholder-2)); }
.tco-item-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.tco-item-text h2{ font-size:1.08rem; }
.tco-item-text p{ font-size:.82rem; }
.tco-link{ font-size:.8rem; font-weight:650; color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

.tco-seg{ border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tco-seg legend{ font-size:0.75rem; font-weight:650; color:var(--ink-muted); margin-bottom:6px; }
.tco-seg label{ position:relative; }
.tco-seg input{ position:absolute; opacity:0; inset:0; }
.tco-seg span{
  display:block; text-align:center; padding:10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-strong); font-size:.86rem; font-weight:650; color:var(--ink-muted);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tco-seg input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tco-seg input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.tco-by{ display:grid; grid-template-columns:1fr; gap:12px; }
.tco-by[hidden]{ display:none; }
.tco-stepper{ display:grid; grid-template-columns:44px 1fr 44px; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--paper); }
.tco-stepper button{
  border:0; background:var(--cream); color:var(--ink); font-size:1.15rem; font-weight:700; cursor:pointer;
  transition:background .2s var(--ease);
}
.tco-stepper button:hover{ background:var(--gold-soft); }
.tco-stepper button:active{ transform:scale(.96); }
.pdp-field .tco-stepper input{
  border:0; border-radius:0; text-align:center; font-size:1rem; font-weight:700;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield;
}
.tco-stepper input::-webkit-outer-spin-button, .tco-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tco-optional{ font-weight:500; opacity:.8; }
.tco-hint{ font-size:.78rem; color:var(--ink-muted); }
.tco-hint-warn{ color:var(--deal); font-weight:600; }
.tco-credit-note{ font-size:.82rem; padding:10px 12px; border-radius:8px; background:var(--good-soft); color:var(--good); }

.tco-ladder{ display:flex; flex-wrap:wrap; gap:6px; }
.tco-tier{
  display:flex; flex-direction:column; gap:1px; padding:7px 11px; border-radius:8px;
  border:1px solid var(--line); font-size:0.75rem; color:var(--ink-muted); line-height:1.3;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.tco-tier b{ font-size:.86rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.tco-tier.is-on{ border-color:var(--gold); background:var(--gold-soft); }
.tco-tier.is-on b{ color:var(--gold-deep); }

.tco-address{ display:grid; grid-template-columns:1fr; gap:12px; }
.tco-address [aria-invalid="true"]{ border-color:#C0392B; }
.tco-field-error{ font-size:0.75rem; font-weight:600; color:#B83227; }
.tco-gstin{ font-size:.8rem; }
.tco-gstin a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

.tco-summary-card{ background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column; gap:14px; }
.tco-summary-card h2{ font-size:1.05rem; }
.tco-lines{ margin:0; display:flex; flex-direction:column; }
.tco-lines > div{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); }
.tco-lines dt{ font-size:.83rem; color:var(--ink-muted); }
.tco-lines dd{ margin:0; font-size:.88rem; font-weight:650; font-variant-numeric:tabular-nums; text-align:right; }
.tco-lines .is-sub dt, .tco-lines .is-sub dd{ color:var(--ink-muted); font-weight:500; }
.tco-lines .is-credit dt, .tco-lines .is-credit dd{ color:var(--good); }
.tco-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tco-total span{ font-weight:700; color:var(--ink); }
.tco-total strong{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tco-next{ font-size:.8rem; font-weight:600; padding:9px 12px; border-radius:8px; background:var(--gold-soft); color:var(--gold-deep); }
.tco-next[hidden]{ display:none; }
.tco-pay{ width:100%; padding:16px 20px; font-size:.86rem; white-space:normal; }
.tco-pay:disabled, .tco-bar .btn:disabled{ opacity:.55; cursor:not-allowed; }
.tco-assure{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.tco-assure li{ position:relative; padding-left:22px; font-size:.8rem; color:var(--ink-muted); }
.tco-assure li::before{
  content:""; position:absolute; left:2px; top:.3em; width:12px; height:7px;
  border-left:2px solid var(--good); border-bottom:2px solid var(--good); transform:rotate(-45deg);
}
.tco-terms{ font-size:0.75rem; }
.tco-terms a{ text-decoration:underline; text-underline-offset:2px; }

.tco-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line-strong);
  box-shadow:0 -8px 24px rgba(21,25,32,.08);
}
.tco-bar[hidden]{ display:none; }
.tco-bar div{ display:flex; flex-direction:column; line-height:1.2; }
.tco-bar span{ font-size:0.75rem; color:var(--ink-muted); }
.tco-bar strong{ font-size:1.2rem; font-variant-numeric:tabular-nums; }
.tco-bar .btn{ padding:13px 26px; }

.tco-done{ display:flex; justify-content:center; padding-top:8px; scroll-margin-top:110px; }
.tco-done[hidden]{ display:none; }
.tco-done-card{ max-width:680px; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.tco-done-card h2{ font-size:1.5rem; }
.tco-steps{ list-style:none; margin:8px 0 4px; padding:0; display:grid; grid-template-columns:1fr; gap:8px; counter-reset:step; }
.tco-steps li{ counter-increment:step; display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink-muted); }
.tco-steps li::before{
  content:counter(step); display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  border:1px solid var(--line-strong); font-size:0.75rem; font-weight:700; color:var(--ink-muted);
}
.tco-steps li.is-done, .tco-steps li.is-now{ color:var(--ink); font-weight:650; }
.tco-steps li.is-done::before{ content:"\2713"; background:var(--good); border-color:var(--good); color:#fff; }
.tco-steps li.is-now::before{ border-color:var(--gold); color:var(--gold); }
.tco-done-actions{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:6px; }
.tco-done-actions .btn[hidden]{ display:none; }

@media (min-width:600px){
  .tco-by{ grid-template-columns:1fr 1fr; }
  .tco-by .tco-hint{ grid-column:1 / -1; }
  .tco-address{ grid-template-columns:1fr 1fr; }
  .tco-address .tco-wide{ grid-column:1 / -1; }
  .tco-item{ grid-template-columns:96px 1fr; }
  .tco-thumb{ width:96px; height:128px; }
  .tco-steps{ grid-template-columns:repeat(4, 1fr); }
  .tco-steps li{ flex-direction:column; align-items:flex-start; }
}

@media (min-width:960px){
  .tco{ padding-bottom:56px; }
  .tco-grid{ grid-template-columns:minmax(0, 1fr) 380px; gap:24px; }
  .tco-summary{ position:sticky; top:90px; }
  .tco-card{ padding:24px; }
  .tco-bar{ display:none; }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tco-alert{ background:#3A1E1B; color:#F0A49A; border-color:#5A2C26; }
}
:root[data-theme="dark"] .tco-alert{ background:#3A1E1B; color:#F0A49A; border-color:#5A2C26; }
@media (prefers-reduced-motion: reduce){
  .tco-seg span, .tco-tier, .tco-stepper button{ transition:none; }
}

.pdp-checkout{ width:100%; margin-top:14px; }
.pdp-checkout[hidden]{ display:none; }
.pdp-checkout-note{ margin:8px 0 0; font-size:.76rem; text-align:center; }
.pdp-sample-cta{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pdp-sample-cta h3{ font-size:1rem; }
.pdp-sample-cta p{ font-size:.86rem; }

/* M6c render check: on a phone the chat launcher sat on top of the checkout's Pay button. While the
   pay bar is showing, the launcher moves up above it. */
@media (max-width:959px){
  body:has(.tco-bar:not([hidden])) .ai-widget{ bottom:86px; }
}

/* ==========================================================================================
   Home page — Phase M6c, 2026-09-16.
   Led by the garments themselves: real photographs, the ranges that have stock, and the numbers
   the catalogue can back up. Built on the same tokens and cards as the listing pages.
   ========================================================================================== */
.home-hero{ padding-block:clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px); background:var(--cream); }
.home-hero-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.home-hero-copy h1{ font-size:clamp(2rem, 4.6vw, 3.6rem); line-height:1.05; max-width:17ch; }
.home-hero-copy > p{ margin-top:16px; font-size:1.02rem; max-width:52ch; }
/* The shared .hero-ctas fade starts at opacity 0 after a 0.6s delay; the main call to action on
   the home page is visible from the first frame instead. */
.home-ctas{ margin-top:24px; opacity:1; animation:none; }
.home-hero-copy .btn-outline{ border-color:var(--line-strong); }
.home-hero-note{
  margin-top:18px; max-width:52ch; padding:10px 14px; border-radius:var(--r-sm);
  font-size:.86rem; color:var(--good); background:var(--good-soft);
}
.home-hero-photos{ display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:10px; max-width:560px; }
.home-hero-photos img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); background:var(--placeholder); }
.home-hero-photos .is-tall{ grid-row:1 / span 2; aspect-ratio:3 / 4.2; }
.home-hero-photos img:not(.is-tall){ aspect-ratio:1 / 1; }

.home-facts{ background:var(--paper); border-block:1px solid var(--line); }
.home-facts-row{ margin:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.home-facts-row > div{ padding:16px 12px; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--line); }
.home-facts-row dt{ font-size:0.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.home-facts-row dd{ margin:0; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.home-facts-row dd small{ font-size:.78rem; font-weight:600; color:var(--ink-muted); letter-spacing:0; }
.home-facts-row .home-facts-text{ font-size:1rem; line-height:1.9; }

.home-ranges{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.home-range{
  display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.home-range:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 14px 30px -20px rgba(21,25,32,.4); }
.home-range:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.home-range-media{ display:block; aspect-ratio:4 / 5; background:var(--placeholder); overflow:hidden; }
.home-range-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.home-range:hover .home-range-media img{ transform:scale(1.04); }
.home-range-text{ display:flex; flex-direction:column; gap:2px; padding:12px 14px 14px; }
.home-range-text strong{ font-size:.95rem; }
.home-range-text span{ font-size:.76rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

.home-range-custom{ background:var(--ink); border-color:var(--ink); justify-content:flex-end; min-height:180px; }
.home-range-custom:hover{ border-color:var(--gold); }
.home-range-custom-body{ display:flex; flex-direction:column; gap:6px; padding:16px; }
.home-range-custom-body strong{ color:#fff; font-size:1rem; }
.home-range-custom-body span{ color:rgba(255,255,255,.72); font-size:.8rem; line-height:1.45; }
.home-range-custom-body em{ font-style:normal; color:#fff; font-size:.8rem; font-weight:700; margin-top:4px; }

.home-band{ background:var(--paper); border-block:1px solid var(--line); }

.home-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; counter-reset:homestep; }
.home-steps li{
  counter-increment:homestep; position:relative; padding:20px 20px 20px 64px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.home-steps li::before{
  content:counter(homestep); position:absolute; left:20px; top:20px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--gold-soft); color:var(--gold-deep); font-weight:800; font-size:.86rem;
}
.home-steps h3{ font-size:1rem; margin-bottom:6px; }
.home-steps p{ font-size:.86rem; line-height:1.55; }

.home-paths{ display:grid; grid-template-columns:1fr; gap:14px; }
.home-path{
  display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r-md);
  background:var(--cream); border:1px solid var(--line);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.home-path:hover{ border-color:var(--gold); transform:translateY(-2px); }
.home-path .eyebrow{ margin-bottom:0; }
.home-path h3{ font-size:1.12rem; }
.home-path p{ font-size:.86rem; line-height:1.55; }
.home-path-cta{ margin-top:auto; padding-top:6px; font-size:.82rem; font-weight:700; color:var(--gold-deep); }

.home-soon{ padding-block:18px; }
.home-soon p{ font-size:.86rem; }
.home-soon strong{ color:var(--ink); }
.home-soon a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

@media (min-width:640px){
  .home-facts-row{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .home-facts-row > div{ border-bottom:none; border-left:1px solid var(--line); padding:20px 18px; }
  .home-facts-row > div:first-child{ border-left:none; padding-left:0; }
  .home-ranges{ gap:16px; }
  .home-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-paths{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width:1000px){
  .home-hero-grid{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:48px; }
  .home-hero-photos{ justify-self:end; }
  .home-ranges{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .home-steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .home-paths{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .home-range, .home-range-media img, .home-path{ transition:none; }
  .home-range:hover, .home-path:hover{ transform:none; }
  .home-range:hover .home-range-media img{ transform:none; }
}

/* A page whose section head is its own title. */
.section-head h1{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); }

/* Phase M6d, 2026-09-16: a dropshipper's branded catalogue (/brand/{slug}). Its own quiet frame,
   so the brand's customers are not handed the wholesale site's menu. */
.sf-head{ background:var(--paper); border-bottom:1px solid var(--line); }
.sf-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; }
.sf-brand{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.sf-tag{ font-size:0.75rem; font-weight:600; color:var(--ink-muted); }
.sf .section-head h1{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); }
.sf-price{ margin-top:8px; font-size:1.2rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.sf-price small{ font-size:0.75rem; font-weight:500; color:var(--ink-muted); }
.sf .pcard-name{ font-size:.95rem; }
.sf-foot{ border-top:1px solid var(--line); padding-block:22px; }
.sf-foot p{ font-size:.78rem; }
.sf main.section{ padding-block:clamp(28px, 4vw, 48px) 64px; }

/* 2026-09-16: the online shop (/d2c) — its front page and product page. */
.shop-ranges{ margin:-12px 0 24px; }
.shop-pages{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; font-size:.86rem; color:var(--ink-muted); }
.shop-buy{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.shop-buy h1{ font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.12; }
.shop-lede{ font-size:.98rem; }
.shop-price{ font-size:1.9rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.shop-price small{ display:block; font-size:.78rem; font-weight:500; color:var(--ink-muted); }
.shop-form{ display:flex; flex-direction:column; gap:16px; }
.shop-form-row{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.shop-form .pdp-field{ width:110px; }
.shop-sizes{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.shop-sizes legend{ font-size:0.75rem; font-weight:650; color:var(--ink-muted); margin-bottom:8px; padding:0; }
.shop-sizes label{ position:relative; }
.shop-sizes input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.shop-sizes span{
  display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:44px; padding:0 14px;
  border:1px solid var(--line-strong); border-radius:8px; font-size:.86rem; font-weight:650;
  font-variant-numeric:tabular-nums; background:var(--paper); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.shop-sizes label:hover span{ border-color:var(--ink); }
.shop-sizes input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.shop-sizes input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.shop-note{ font-size:.82rem; }
.shop-note a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.shop-spec{ margin:6px 0 0; border-top:1px solid var(--line); }
.shop-spec > div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.shop-spec dt{ color:var(--ink-muted); }
.shop-spec dd{ margin:0; text-align:right; font-weight:600; }
.shop-desc{ font-size:.9rem; line-height:1.65; }

/* 2026-09-16: header search. The search button had nothing behind it. */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* ===========================================================
   Phase B2, 2026-09-17 — search overlay, suggestions, login modal
   =========================================================== */

/* Full-screen search overlay: the old bar sits inside a top sheet */
.search-overlay{ position:fixed; inset:0; z-index:70; }
.search-overlay[hidden]{ display:none; }
.search-overlay-scrim{ position:absolute; inset:0; background:rgba(21,25,32,.55); }
.search-overlay-panel{ position:relative; background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:0 28px 50px -30px rgba(21,25,32,.4); padding-bottom:10px; }
.search-overlay .nav-search-form input{ height:46px; font-size:.95rem; }
.search-overlay-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  background:none; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.search-overlay-close svg{ width:16px; height:16px; }
.search-overlay-close:hover{ border-color:var(--ink); }

/* Live suggestions */
.search-suggest{ padding-top:6px; }
.search-suggest[hidden]{ display:none; }
.search-suggest-label{ margin:10px 0 4px; font-size:0.75rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); }
.search-suggest-row{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; }
.search-suggest-row:hover, .search-suggest-row:focus-visible{ background:var(--gold-soft); outline:none; }
.search-suggest-row img{ width:40px; height:53px; object-fit:cover; border-radius:2px; background:var(--placeholder); flex:0 0 auto; }
.search-suggest-ph{ width:40px; height:53px; border-radius:2px; background:var(--placeholder); flex:0 0 auto; }
.search-suggest-name{ font-size:.86rem; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-suggest-meta{ font-size:0.75rem; color:var(--ink-muted); white-space:nowrap; }

/* Login modal */
.login-modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-modal[hidden]{ display:none; }
.login-modal-overlay{ position:absolute; inset:0; background:rgba(21,25,32,.55); }
.login-modal-panel{ position:relative; width:min(400px, 100%); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:0 30px 70px -30px rgba(21,25,32,.5); padding:28px; }
.login-modal-panel h2{ margin:2px 0 4px; }
.login-modal-sub{ margin:0 0 14px; font-size:.82rem; color:var(--ink-muted); }
.login-modal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); background:none; color:var(--ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; }
.login-modal-close svg{ width:15px; height:15px; }
.login-modal-close:hover{ border-color:var(--ink); }
.login-modal-panel form{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.login-modal-panel label{ display:flex; flex-direction:column; gap:5px; font-size:.76rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-muted); }
.login-modal-panel input{ height:42px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:0 12px; font-size:.9rem; background:var(--paper); color:var(--ink); }
.login-modal-panel input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.login-modal-panel .auth-foot{ margin:12px 0 0; font-size:.78rem; text-align:center; }

/* ===========================================================
   Legacy header search bar (kept for any non-overlay uses)
   =========================================================== */
.nav-search{ border-top:1px solid var(--line); background:var(--paper); }
.nav-search[hidden]{ display:none; }
.nav-search-form{ display:flex; gap:10px; padding-block:12px; }
.nav-search-form input{
  flex:1; min-width:0; padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink); font:inherit; font-size:.95rem;
}
.nav-search-form input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.search-page-form{ max-width:640px; padding:0 0 24px; }
.search-page-form + .ph a, .section-head p a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ---------------------------------------------------------------------------------------------
   Basket and checkout (2026-09-16). Both pages used the admin console's form, table and button
   classes, which public pages never load, so they rendered as unstyled text.
   --------------------------------------------------------------------------------------------- */
.admin-alert[hidden]{ display:none; }
.bag-section{ padding-block:36px 72px; }
.bag-head{ margin-bottom:20px; }
.bag-head h1{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); margin-top:4px; }
.bag{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; align-items:start; }
.bag-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.bag-side{ gap:14px; }
.bag-empty{ max-width:520px; align-items:flex-start; }
.bag-link{
  background:none; border:0; padding:0; font:inherit; font-size:.84rem; font-weight:650; color:var(--gold);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.bag-link:hover{ color:var(--gold-deep); }
.bag-continue{ align-self:center; }

.bag-lines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.bag-line{ display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:14px; align-items:start; padding:14px 0; border-top:1px solid var(--line); }
.bag-line:first-child{ border-top:0; padding-top:0; }
.bag-thumb{ width:72px; height:96px; object-fit:cover; border-radius:8px; background:var(--placeholder); display:block; }
.bag-thumb-empty{ background:linear-gradient(135deg, var(--placeholder), var(--placeholder-2)); }
.bag-line-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bag-name{ font-size:.95rem; font-weight:650; color:var(--ink); text-decoration:none; line-height:1.3; }
a.bag-name:hover{ color:var(--gold); }
.bag-line-total{ font-weight:700; }
.bag-controls{ display:flex; align-items:center; gap:16px; margin-top:6px; }
.bag-qty{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-muted); }
.bag-qty select{
  padding:7px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--paper);
  color:var(--ink); font:inherit; font-size:.88rem; min-height:36px;
}
.bag-lines-compact .bag-line{ grid-template-columns:56px minmax(0, 1fr) auto; gap:12px; padding:12px 0; }
.bag-lines-compact .bag-thumb{ width:56px; height:75px; }
.bag-lines-compact .bag-name, .bag-lines-compact strong{ font-size:.86rem; }

.bag-fields{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.bag-fields .pdp-field input, .bag-fields .pdp-field select, .bag-main textarea{ min-height:44px; font-size:1rem; }
.bag-main textarea{
  padding:10px 11px; border:1px solid var(--line-strong); border-radius:8px; background:var(--paper);
  color:var(--ink); font:inherit; width:100%; resize:vertical;
}
.bag-main textarea:focus-visible, .bag-qty select:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.bag-inline{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.bag-inline .pdp-field{ width:140px; }
.bag-submit{ min-height:52px; font-size:.9rem; }
.bag-after{ margin-top:-8px; }
.bag-after a{ font-size:inherit; }

@media (min-width:600px){
  .bag-fields{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bag-wide{ grid-column:1 / -1; }
}
@media (min-width:960px){
  .bag{ grid-template-columns:minmax(0, 1fr) 360px; gap:24px; }
  .bag-main{ grid-column:1; grid-row:1; }
  .bag-side{ grid-column:2; grid-row:1; position:sticky; top:96px; }
}

/* Phase B4: popup campaigns — Bemount language: flat panel, hairline, near-sharp corners,
   ink CTA, no drop shadow theatrics beyond the drawer token. */
.popup-campaign{ border:1px solid var(--line); border-radius:var(--r-md); padding:0; max-width:420px;
  width:calc(100vw - 32px); background:var(--bg-raised); color:var(--ink); box-shadow:var(--shadow-drawer); }
.popup-campaign::backdrop{ background:rgba(23,23,26,.55); }
.popup-campaign .popup-close{ position:absolute; top:10px; right:10px; width:32px; height:32px;
  border:1px solid var(--line); background:var(--paper); border-radius:var(--r-sm); font-size:1.1rem;
  line-height:1; cursor:pointer; color:var(--ink); }
.popup-campaign .popup-close:hover{ background:var(--bg-sunk); }
.popup-campaign .popup-media{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-md) var(--r-md) 0 0; }
.popup-campaign .popup-body{ padding:20px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.popup-campaign .popup-body h2{ font-size:1.05rem; letter-spacing:.01em; margin:0; }
.popup-campaign .popup-body p{ margin:0; color:var(--ink-muted); font-size:.9rem; line-height:1.55; }

/* Verified buyer profile. A focused two-column service screen, not an admin form transplanted
   into the storefront. It collapses to one column before the fields become cramped. */
.trade-profile-page{ padding:clamp(44px, 7vw, 88px) 0 96px; background:var(--cream); }
.trade-profile-layout{ display:grid; grid-template-columns:minmax(0, .88fr) minmax(420px, 1fr); gap:clamp(36px, 7vw, 92px); align-items:start; }
.trade-profile-intro{ padding-top:14px; max-width:560px; }
.trade-profile-intro h1{ margin:10px 0 16px; font-size:clamp(2.1rem, 5vw, 4.4rem); line-height:.98; letter-spacing:-.045em; }
.trade-profile-intro > p{ color:var(--ink-muted); max-width:52ch; font-size:1.02rem; line-height:1.7; }
.trade-profile-status{ display:flex; gap:14px; align-items:flex-start; margin:30px 0; padding:18px; border:1px solid var(--line-strong); background:var(--paper); }
.trade-profile-status.is-ready{ border-color:#9bc5a5; background:#f3faf5; }
.trade-profile-status-mark{ display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:50%; background:var(--ink); color:var(--paper); font-weight:800; }
.trade-profile-status.is-ready .trade-profile-status-mark{ background:#22623a; }
.trade-profile-status strong{ display:block; margin-bottom:3px; }
.trade-profile-status p{ margin:0; color:var(--ink-muted); font-size:.88rem; }
.trade-profile-points{ margin:0; padding:0; list-style:none; display:grid; gap:11px; color:var(--ink-muted); font-size:.9rem; }
.trade-profile-points li{ position:relative; padding-left:20px; }
.trade-profile-points li::before{ content:'\2713'; position:absolute; left:0; color:var(--gold-deep); font-weight:800; }
.trade-profile-card{ background:var(--paper); border:1px solid var(--line); padding:clamp(22px, 4vw, 38px); box-shadow:var(--shadow-drawer); }
.trade-profile-form{ display:grid; gap:18px; }
.trade-profile-field{ display:grid; gap:7px; }
.trade-profile-field label{ color:var(--ink); font-size:.78rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; }
.trade-profile-field label span{ color:var(--ink-muted); font-weight:500; text-transform:none; letter-spacing:0; }
.trade-profile-field input,.trade-profile-field select{ width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit; }
.trade-profile-field input:focus-visible,.trade-profile-field select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.trade-profile-consent{ display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; color:var(--ink-muted); font-size:.86rem; line-height:1.55; cursor:pointer; }
.trade-profile-consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--ink); }
.trade-profile-consent a,.trade-profile-return{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.trade-profile-return{ justify-self:center; font-size:.88rem; font-weight:650; }
.pdp-price-lock{ margin:22px 0; padding:20px; border:1px solid #c6cfe0; background:#f3f5f9; }
.pdp-price-lock-kicker{ display:block; margin-bottom:7px; color:var(--gold-deep); font-size:0.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.pdp-price-lock strong{ display:block; margin-bottom:6px; font-size:1.06rem; }
.pdp-price-lock p{ margin:0 0 14px; color:var(--ink-muted); font-size:.88rem; line-height:1.55; }
@media (max-width:860px){
  .trade-profile-layout{ grid-template-columns:1fr; gap:32px; }
  .trade-profile-intro{ max-width:680px; }
}
@media (max-width:520px){
  .trade-profile-page{ padding-top:30px; }
  .trade-profile-card{ margin-inline:-4px; padding:20px 16px; }
}

/* V4-4f — the legacy public pages' breadcrumbs and footer link columns were 17-19px tall: the
   text's own box, on the two lists a visitor uses to move around the site. */
.crumbs a,
.foot-col ul a { display: inline-flex; align-items: center; min-height: 26px; }