/* ============================================================
   Tokyo Beyond Wholesale — "the docket" (design lane, 2026-09-25; out/fleet/design/PLAN.md)
   Every price is drawn as the export document it becomes: duplicate-paper ground, white sheets
   with ink frames, tinted form boxes, numbered boxes only where the order is real, hanko-red
   stamps only where the evidence is. Stencil display (the export crate), Plex Sans body in four
   scripts, Plex Mono for every figure that lines up.
   ============================================================ */
:root{
  /* palette — six named values (PLAN.md) + white sheet, muted text and the in-sheet hairline */
  --paper:#FBF8F4;        /* warm paper: the page ground (newdesign-1027) */
  --ink:#101016;          /* ink: text, frames, the dark bands */
  --carbon:#C73700;       /* signal, dark: the one action colour on paper — links, focus (5.3:1 on paper) */
  --signal:#FF4500;       /* signal orange: primary buttons (ink text, 5.5:1) and accents on the dark bands */
  --carbon-deep:#A72A00;  /* signal pressed / hover */
  --tint:#F6F0E8;         /* form tint: the printed tint inside boxes and header strips */
  --keep:#327737;         /* margin green: money the buyer keeps, nothing else */
  --seal:#BF2F2A;         /* seal vermilion: evidence stamps, nothing else */
  --sheet:#FFFFFF;
  --ink-2:#4A443D;        /* secondary text */
  --muted:#655F59;        /* muted text, 5.9:1 on paper */
  --rule:#D1CBC2;         /* hairline inside a sheet */

  --font-display:'Inter','Noto Sans JP',system-ui,sans-serif;
  --display-weight:700;
  --display-track:-0.015em;
  --font-sans:"Inter","Noto Sans JP",system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* type scale 1.25 (PLAN.md): 12 · 14 · 16 · 20 · 25 · 31 · 39 · 49 · 61 */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-25:25px; --t-31:31px; --t-39:39px; --t-49:49px; --t-61:61px;

  /* the older names every rule below still speaks, mapped onto the docket palette */
  --color-cream-paper:var(--paper);
  --color-pure-white:var(--sheet);
  --color-ink-black:var(--ink);
  --color-charcoal:var(--ink-2);
  --color-smoke:var(--muted);
  --color-ash:var(--rule);
  --color-butter-highlight:var(--tint);
  --color-forest:var(--carbon);
  --color-ink:var(--ink);
  --color-cream:var(--paper);
  --color-slate:var(--muted);
  --font-serif:var(--font-sans);
  --line:var(--rule);
  --green:var(--carbon);

  --text-caption:14px;  --leading-caption:1.5;   --tracking-caption:0;
  --text-body:16px;     --leading-body:1.5;      --tracking-body:0;
  --text-subheading:20px;--leading-subheading:1.4;--tracking-subheading:0;
  --text-heading-sm:20px;--leading-heading-sm:1.35;--tracking-heading-sm:0;
  --text-heading:25px;  --leading-heading:1.2;  --tracking-heading:0;
  --text-heading-lg:31px;--leading-heading-lg:1.1;--tracking-heading-lg:.01em;
  --text-display:49px;  --leading-display:1.05;

  --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-24:24px;
  --spacing-32:32px; --spacing-48:48px; --spacing-56:56px;

  --page-max-width:1280px;
  --radius-md:3px;          /* documents have square corners: controls 3px */
  --radius-display:4px;     /* sheets 4px */
  --radius-pill:3px;
  --frame:1.5px solid var(--ink);
}
/* the stencil has no Thai or Arabic: the display role falls to Plex Sans Thai / Arabic 600 */
html:lang(th){--font-sans:'Inter','IBM Plex Sans Thai',system-ui,sans-serif;--font-display:'IBM Plex Sans Thai','Inter',system-ui,sans-serif;--display-weight:600;--display-track:0}
html:lang(ar){--font-sans:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;--font-display:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;--display-weight:600;--display-track:0}
/* Plex Mono has no Thai or Arabic: the figures stay in Plex Mono and the words beside them (a margin tag, a
   docket route, an eyebrow) fall through, glyph by glyph, to the script's own Plex Sans instead of a system
   monospace that draws Arabic unjoined */
html:lang(th){--font-mono:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,"SF Mono",Menlo,Consolas,monospace}
html:lang(ar){--font-mono:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,"SF Mono",Menlo,Consolas,monospace}
/* Arabic letters join; tracking pulls them apart. No letter-spacing anywhere on an Arabic page. */
html:lang(ar) body *{letter-spacing:normal!important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* one visible focus ring, carbon blue, everywhere a keyboard can land */
:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-48)}
@media(max-width:720px){.wrap{padding:0 var(--spacing-24)}}

/* ---------- utility strip: language + ship-to, printed on the form tint ---------- */
.promo{
  font-size:var(--t-12);line-height:1.5;
  padding:6px 0;background:var(--tint);border-bottom:1px solid var(--rule);
}
.promo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Preferences sit in the utility strip, not the masthead: they are settings a buyer
   picks once, not actions, and six controls in one row made the header unreadable. */
.promo-prefs{display:flex;align-items:center;gap:10px;flex:none}
.promo-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo .head-market{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--t-12);letter-spacing:.02em}
.promo .head-market select{
  border:1px solid var(--ink);border-radius:var(--radius-md);
  background:var(--sheet);font-family:var(--font-sans);font-size:12px;font-weight:600;
  padding:4px 8px;color:var(--ink);cursor:pointer;
}
@media(max-width:820px){
  .promo .wrap{flex-wrap:wrap}
  .promo-line{white-space:normal;font-size:12px;flex-basis:100%}
  .promo-prefs{flex-wrap:wrap;justify-content:flex-end;width:100%;padding:4px 0}
  .promo .head-market select{max-width:160px}
}
.promo a{text-decoration:underline;text-underline-offset:2px}

/* ---------- masthead: a white sheet with an ink rule ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--sheet);position:sticky;top:0;z-index:35}
.masthead .wrap{
  display:flex;align-items:center;gap:var(--spacing-24);
  padding-top:14px;padding-bottom:14px;
}
/* the wordmark: bold Inter, uppercase */
.wordmark{
  font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.06em;white-space:nowrap;
  color:var(--ink);text-transform:uppercase;
}
.wordmark span{font-weight:800;letter-spacing:.06em}
.wordmark>span{display:block;line-height:1}
.wordmark>span:last-child{font-size:.78em;letter-spacing:.24em;color:var(--carbon);margin-top:2px}
.masthead .wordmark span{margin-inline-start:0}
.searchfield{
  flex:1;display:flex;align-items:center;gap:var(--spacing-8);
  background:var(--sheet);border:1.5px solid var(--ink);
  border-radius:var(--radius-md);padding:9px var(--spacing-16);
  max-width:none;min-width:260px;
}
.searchfield:focus-within{outline:2px solid var(--carbon);outline-offset:2px}
.searchfield svg{flex:none;stroke:var(--ink)}
.searchfield input{
  border:0;outline:0;background:transparent;width:100%;
  font-family:var(--font-sans);font-size:var(--text-body);
  color:var(--ink);letter-spacing:0;
}
.searchfield input::placeholder{color:var(--muted)}
.head-actions{display:flex;align-items:center;gap:var(--spacing-16);margin-left:auto}
.ghost-btn{
  background:none;border:0;padding:0;
  font-size:var(--text-caption);color:var(--ink);
}
a.ghost-btn,button.ghost-btn{color:var(--carbon)}
.solid-btn{
  background:var(--carbon);color:#fff;
  border:1.5px solid var(--carbon);border-radius:var(--radius-md);
  padding:10px 22px;font-size:var(--text-caption);font-weight:600;letter-spacing:.01em;
}
.solid-btn:hover{background:var(--carbon-deep);border-color:var(--carbon-deep)}
.ghost-outline{
  background:var(--sheet);border:1.5px solid var(--ink);
  border-radius:var(--radius-md);padding:10px 22px;
  font-size:var(--text-caption);font-weight:500;color:var(--ink);
}
.ghost-outline:hover{background:var(--tint)}
.solid-btn:focus-visible,.ghost-outline:focus-visible,.ghost-btn:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
/* signed in, the account button carries the company name; a 46-character name
   made it 379px at 1280 and squeezed the search field to its 260px minimum.
   Cap it here (the ≤600px rule below overrides with its smaller max-width). */
.masthead #account-link{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
  .masthead .wrap{flex-wrap:wrap}
  .searchfield{order:3;flex-basis:100%;min-width:0;max-width:none}
}

/* ---------- category nav (built from meta.taxonomy, STRUCTURE §3.3) ---------- */
.catnav{border-bottom:1px solid var(--rule);position:relative;background:var(--sheet)}
.catnav .wrap{
  display:flex;overflow-x:auto;scrollbar-width:none;
}
.catnav .wrap::-webkit-scrollbar{display:none}
.catnav-list{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.catnav-item{display:flex;align-items:center;gap:3px}
.catnav-views{gap:16px}
/* ten segment words + Brands + Terms must fit 1184px in every language: 13px, tight gap */
.catnav a{font-size:13px;letter-spacing:0;white-space:nowrap;color:var(--ink);font-weight:500}
.catnav-list > li > a{display:inline-block;padding:12px 0}
/* desktop: the list wraps instead of hiding half the categories behind a scroll strip.
   At >=1000px the ten labels + Brands + Terms sit on ONE row in en and ar at 12.5px / 12px gap;
   th tightens to 12px / 8px; vi keeps the phone strip (W1-08: first card <= 420px at 1280 needs
   the single row) */
@media(min-width:701px){
  .catnav .wrap{overflow:visible}
  .catnav-list{flex-wrap:wrap;row-gap:0}
  .catnav-list > li > a{padding:7px 0;line-height:19px}
}
@media(min-width:1000px){
  .catnav-list{gap:12px}
  .catnav-views{gap:12px}
  .catnav a{font-size:12.5px;letter-spacing:0}
  /* th: the twelve words measure 1254px at 12.5px/12px — 1165px at 12px/8px fits the 1184px
     row (measured 2026-09-03). Never below 12px. */
  html:lang(th) .catnav a{font-size:12px}
  html:lang(th) .catnav-list,html:lang(th) .catnav-views{gap:8px}
  /* vi: 1419px even at 12px/8px — it cannot fit one row legibly, so at desktop it keeps the
     phone strip: one row, horizontal scroll, the arrow cue until the end is reached */
  html:lang(vi) .catnav .wrap{overflow-x:auto}
  html:lang(vi) .catnav-list{flex-wrap:nowrap}
  html:lang(vi) .catnav:not(.is-end) .catnav-cue{display:grid}
}
.catnav a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.catnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--carbon)}
/* the L2 list: a full-width panel under the nav, revealed on hover / focus (desktop) or by
   the chevron (phones). Its containing block is .catnav, not the scrolling .wrap, so the
   horizontal scroll strip never clips it */
.catnav-more{display:none;border:0;background:none;padding:6px 2px;color:var(--muted);cursor:pointer;line-height:0}
/* hit area 44x44 without changing the drawn size: an invisible box centred on the chevron */
.catnav-more{position:relative}
.catnav-more::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
/* the sticky masthead (z-index 35) sits right above the nav row and must stay on top when scrolled: the
   44px box is nudged down so its top edge stays inside .catnav (34px row on desktop) */
@media(min-width:701px){.catnav-more{z-index:31}.catnav-more::after{transform:translate(-50%,calc(-50% + 6px));z-index:1}}
/* keyboard on desktop: the chevron appears while focus is in the item, so Tab+Enter reaches the L2 panel */
.catnav-item.has-l2:focus-within .catnav-more{display:inline-grid;place-items:center}
.catnav-item.is-open .catnav-more svg{transform:rotate(180deg)}
.catnav-l2{
  display:none;position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:30;
  margin:0;list-style:none;flex-wrap:wrap;gap:6px var(--spacing-24);
  padding:10px max(var(--spacing-48),calc((100% - var(--page-max-width)) / 2 + var(--spacing-48))) 12px;
  background:var(--tint);border-bottom:1.5px solid var(--ink);
}
/* one state: app.js toggles .is-open (pointerenter / focus on the link / chevron) and clears it
   on pointerleave, focusout, Escape, click-navigation and hashchange. A :hover/:focus-within
   reveal kept the panel open after a click, covering "Back to home" on #/products */
.catnav-item.is-open > .catnav-l2{display:flex}
.catnav-l2 a{font-size:13px;padding:4px 0;display:inline-block}
.catnav-n{color:var(--muted);font-size:12px;margin-inline-start:2px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@media(max-width:720px){.catnav-l2{padding-left:var(--spacing-24);padding-right:var(--spacing-24)}}
@media(max-width:700px){.catnav-more{display:inline-grid;place-items:center}}
@media(hover:none){.catnav-more{display:inline-grid;place-items:center}}
/* overflow cue: a real button (app.js bootCatnavCue) — a solid block (no gradient) over the
   strip's end that scrolls it by 60% per press and disappears once the buyer has reached the
   last item */
.catnav-cue{position:absolute;right:0;top:0;bottom:0;width:36px;border:0;padding:0;margin:0;
  background:var(--sheet);border-inline-start:1px solid var(--rule);display:grid;place-items:center;
  font-size:12px;color:var(--ink);cursor:pointer}
.catnav-cue::before{content:'\2192'}
.catnav.is-end .catnav-cue{display:none}
[dir=rtl] .catnav-cue{right:auto;left:0}
[dir=rtl] .catnav-cue::before{content:'\2190'}
@media(max-width:700px){.catnav:not(.is-end) .catnav-cue{display:grid}}
/* phones: the cue stays above the last chevron's 44px box, and the strip ends 58px early so the last item scrolls clear of the cue */
@media(max-width:700px){.catnav-cue{position:absolute;z-index:32;width:40px}.catnav-list{padding-inline-end:58px;scroll-padding-inline-end:58px}}
/* vi at desktop keeps the scroll strip: mouse users get a thin visible scrollbar too */
@media(min-width:1000px){html:lang(vi) .catnav .wrap{scrollbar-width:thin}}

/* ---------- campaign band (a sheet, not a dark field) ---------- */
.hero{position:relative;background:var(--sheet);overflow:hidden}
.hero-inner{
  max-width:var(--page-max-width);margin:0 auto;
  padding:var(--spacing-56) var(--spacing-48);
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
}
.accent-rule{height:4px;width:40px;background:var(--ink);border:0;margin:0 0 var(--spacing-16);border-radius:0}
@media(max-width:720px){
  .hero-inner{padding:var(--spacing-48) var(--spacing-24);min-height:320px}
}

/* ---------- section ---------- */
.section{padding:var(--spacing-56) 0}
.section-head{margin-bottom:var(--spacing-32)}
.section-head h2,.section-h1{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:var(--t-31);line-height:1.1;
  letter-spacing:var(--display-track);margin:0;color:var(--ink);
}
.section-head p{
  font-size:var(--text-body);color:var(--ink-2);
  margin:var(--spacing-8) 0 0;max-width:68ch;font-weight:400;
}

/* ---------- filter pills: form check-boxes, square ---------- */
.pillrow{display:flex;gap:12px;overflow-x:auto;padding-bottom:var(--spacing-8);margin-bottom:var(--spacing-32);scrollbar-width:none}
.pillrow::-webkit-scrollbar{display:none}
.pill{
  background:var(--sheet);border:1.5px solid var(--rule);
  border-radius:var(--radius-md);padding:9px 20px;white-space:nowrap;
  font-size:var(--text-caption);color:var(--ink);font-weight:500;
}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-24)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

/* a card is a white sheet: photo in a framed window, identity, the price as a figure, the stamps */
.card{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius-display);padding:var(--spacing-16);
  display:flex;flex-direction:column;gap:8px;
}
.card-media{
  aspect-ratio:6/5;border-radius:2px;overflow:hidden;
  background:var(--sheet);border:0;
}
.card-media img{width:100%;height:100%;object-fit:contain;padding:10px}
.card--compact .card-media{aspect-ratio:1/1}
.card-brand{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--carbon);font-weight:600;
}
.card-name{
  font-size:var(--text-caption);font-weight:500;line-height:1.45;
  color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* the Japanese supplier name under the English one (STRUCTURE §6.2): one line, ellipsised, filled from
   details.json once it lands; the span is hidden while empty so the card keeps its height until then */
.card-ja{font-size:12px;line-height:1.3;color:var(--muted);margin:-6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:0;min-width:100%}   /* a nowrap line must not feed the card's min-content width: it widened the grid tracks (+136px per card, W1-22) */
.card-ja:empty{display:none}
.search-empty{padding:var(--spacing-16) 0}
.search-empty .search-nomatch{font-size:15px;color:var(--ink)}
.search-empty a.search-fallback{text-decoration:underline;text-underline-offset:3px;color:var(--carbon)}
.card-prices{display:flex;align-items:baseline;gap:10px;margin-top:auto;flex-wrap:wrap}
.price-wholesale{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.price-retail{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  font-size:11px;letter-spacing:.02em;color:var(--muted);
}
.tag{
  border:1px solid var(--rule);border-radius:2px;
  padding:3px 8px;white-space:nowrap;background:var(--sheet);
}
/* compact home-strip card: same nodes, qualifier text and brand line hidden to keep the strip lean
   (home word budget, G-home-wordcount; the product name carries the brand on these lines) */
.card--compact .tag-qual,.card--compact .card-brand{display:none}
/* the margin is money the buyer keeps: margin green, and nowhere else */
.tag-margin{border-color:var(--keep);color:var(--keep);font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tag-margin .tag-qual{font-family:var(--font-sans);font-weight:400}
/* the retail basis is a rubber stamp; the ink encodes the evidence:
   benchmarked a solid seal, modelled an outline, estimated a dashed outline */
.tag-tier,.stamp{
  display:inline-block;border:1.5px solid var(--seal);color:var(--seal);border-radius:2px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
  padding:2px 7px;background:var(--sheet);white-space:nowrap;
}
.tag-tier[data-tier="bench"],.stamp[data-tier="bench"]{background:var(--seal);color:#fff}
.tag-tier[data-tier="estimated"],.stamp[data-tier="estimated"]{border-style:dashed}
html:lang(th) .tag-tier,html:lang(ar) .tag-tier,html:lang(th) .stamp,html:lang(ar) .stamp{text-transform:none;letter-spacing:0}

/* ---------- ink band: a tinted form strip with an ink frame, never a black field ---------- */
.band{background:var(--tint);color:var(--ink);padding:var(--spacing-56) 0;border-block:2px solid var(--ink)}
.band h2{
  font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-31);letter-spacing:var(--display-track);
  line-height:1.1;margin:0 0 var(--spacing-16);max-width:22ch;
}
.band p{font-weight:400;font-size:var(--t-16);max-width:60ch;margin:0 0 var(--spacing-8);color:var(--ink-2)}
.band a{color:var(--carbon);text-decoration:underline;text-underline-offset:3px}
.band-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-48);margin-top:var(--spacing-48)}
@media(max-width:820px){.band-cols{grid-template-columns:1fr;gap:var(--spacing-24)}}
.band-cols h3{font-family:var(--font-sans);font-weight:600;font-size:var(--t-20);margin:0 0 var(--spacing-8)}
.band-cols p{font-size:var(--text-caption);color:var(--ink-2)}

/* ---------- economics tables: form grids ---------- */
.econ-wrap{overflow-x:auto;border:1.5px solid var(--ink);border-radius:var(--radius-display);background:var(--sheet)}
table.econ{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--text-caption)}
table.econ th,table.econ td{padding:11px var(--spacing-16);text-align:right;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
table.econ th:first-child,table.econ td:first-child{text-align:left}
table.econ thead th{font-weight:600;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;font-size:11px;background:var(--tint);border-bottom:1.5px solid var(--ink)}
table.econ tbody tr:last-child td{border-bottom:0}
table.econ tr.total td{border-top:1.5px solid var(--ink);font-weight:600}

/* Terms-table clip hot-fix (2026-09-02): on phones the two-column #/terms table
   stacks — label as a small-caps line, value full-width below, no horizontal
   scroll. Scoped to #terms so the print pack's multi-column econ tables and the
   drawer (already min-width:0) are untouched. */
@media(max-width:600px){
  #terms .econ-wrap{overflow-x:visible}
  #terms table.econ{min-width:0}
  #terms table.econ tbody tr{display:block;padding:12px var(--spacing-16);border-bottom:1px solid var(--rule)}
  #terms table.econ tbody tr:last-child{border-bottom:0}
  #terms table.econ td{display:block;padding:0;border-bottom:0;text-align:left}
  #terms table.econ td:first-child{margin-bottom:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* ---------- detail drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(16,16,22,.38);display:none;z-index:40}
.drawer-backdrop.open{display:block}
.drawer{
  position:fixed;top:0;inset-inline-end:0;height:100%;width:min(560px,100%);
  background:var(--paper);border-inline-start:2px solid var(--ink);
  transform:translateX(100%);transition:transform .18s ease;z-index:50;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-inner{padding:var(--spacing-32)}
.drawer h3{font-family:var(--font-sans);font-weight:600;font-size:var(--text-heading-sm);margin:0 0 var(--spacing-8)}
.drawer .close{position:absolute;top:var(--spacing-16);right:var(--spacing-16);background:none;border:0;font-size:22px;line-height:1}

/* ---------- footer: the foot of the form ---------- */
.foot{border-top:2px solid var(--ink);padding:var(--spacing-48) 0;font-size:var(--text-caption);color:var(--ink-2);background:var(--tint)}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--spacing-48)}
@media(max-width:820px){.foot-cols{grid-template-columns:1fr;gap:var(--spacing-24)}}
.foot h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}
.foot li{list-style:none;margin-bottom:8px}
.foot ul{padding:0;margin:0}
.muted{color:var(--muted)}
.note{font-size:12px;color:var(--muted);line-height:1.6}

/* ---------- brand collections ---------- */
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-24)}
@media(max-width:1100px){.brandgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.brandgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.brandgrid{grid-template-columns:1fr}}
.brandcard{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius-display);padding:var(--spacing-16);
  display:flex;flex-direction:column;gap:12px;text-align:left;
  font-family:inherit;color:inherit;
}
.brandcard:hover{border-color:var(--ink)}
.brandcard .card-media{aspect-ratio:4/3}
.brandcard h3{
  font-family:var(--font-sans);font-weight:600;font-size:var(--t-20);
  line-height:1.2;margin:0;
}
.brandcard .bmeta{font-size:12px;color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.brandcard .bfrom{font-size:var(--text-caption);font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* econ tables inside the drawer must fit its width, not force a scroll */
.drawer table.econ{min-width:0}
.drawer .econ-wrap{overflow-x:visible}
.drawer table.econ th,.drawer table.econ td{padding:9px 12px;font-size:13px}
.drawer table.econ td:first-child{padding-right:8px}

/* ---------- logo lockup ---------- */
.logo-lockup{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo-mark{display:block;color:var(--ink)}
.head-market{
  display:flex;align-items:center;gap:8px;
  font-size:var(--text-caption);color:var(--ink-2);white-space:nowrap;
}
.head-market select{
  border:1px solid var(--ink);border-radius:var(--radius-md);
  padding:7px 14px;background:var(--sheet);
  font-family:inherit;font-size:var(--text-caption);color:var(--ink);
}
@media(max-width:1000px){.head-market{display:none}}

/* ---------- campaign carousel ---------- */
.hero-inner{
  max-width:var(--page-max-width);margin:0 auto;
  padding:var(--spacing-56) var(--spacing-48) var(--spacing-32);
  display:flex;flex-direction:column;gap:var(--spacing-32);
}
.campaign-track{position:relative;min-height:320px}
.campaign-slide{
  position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--spacing-48);align-items:center;
  opacity:0;visibility:hidden;transition:opacity .45s ease;
}
.campaign-slide.is-active{opacity:1;visibility:visible;position:relative}
.camp-eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--carbon);margin:0 0 var(--spacing-16);
}
.campaign-slide h1,.campaign-slide h2{
  font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);
  font-size:clamp(31px,3.6vw,var(--t-49));line-height:1.05;
  color:var(--ink);margin:0 0 var(--spacing-16);max-width:17ch;
}
.camp-body{
  font-weight:400;font-size:var(--t-16);line-height:1.5;
  color:var(--ink-2);max-width:52ch;margin:0 0 var(--spacing-24);
}
.camp-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-32);margin:0 0 var(--spacing-32);padding:0;list-style:none}
.camp-stats li{display:flex;flex-direction:column;gap:2px}
.camp-stats .v{font-family:var(--font-mono);font-size:var(--t-20);color:var(--ink);line-height:1.1}
.camp-stats .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.camp-cta{display:flex;gap:var(--spacing-16);flex-wrap:wrap}

.camp-media{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%;max-height:400px}
.camp-media figure{margin:0;background:var(--sheet);border-radius:2px;overflow:hidden;border:1px solid var(--rule)}
.camp-media figure:first-child{grid-row:1 / span 2}
.camp-media img{width:100%;height:100%;object-fit:contain;padding:10px;background:var(--sheet)}

.campaign-nav{display:flex;align-items:center;gap:var(--spacing-16)}
.camp-arrow{
  background:var(--sheet);border:1.5px solid var(--ink);color:var(--ink);
  border-radius:var(--radius-md);width:40px;height:40px;font-size:15px;line-height:1;
}
.camp-arrow:hover{background:var(--tint)}
.camp-dots{display:flex;gap:10px;flex:1}
.camp-dot{
  flex:1;max-width:120px;height:4px;background:var(--rule);
  border:0;padding:0;border-radius:0;cursor:pointer;position:relative;
}
.camp-dot[aria-selected="true"]{background:var(--ink)}
.camp-count{font-size:12px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;font-family:var(--font-mono)}

@media(max-width:900px){
  .campaign-slide{grid-template-columns:1fr;gap:var(--spacing-24)}
  .camp-media{display:none}
  .campaign-track{min-height:0}
  .hero-inner{padding:var(--spacing-48) var(--spacing-24) var(--spacing-24)}
}
@media(max-width:600px){
  .camp-stats{display:none}
}
@media(prefers-reduced-motion:reduce){
  .campaign-slide{transition:none}
}

/* ---------- application form: the customs form ---------- */
.apply-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:var(--spacing-48);align-items:start}
@media(max-width:900px){.apply-grid{grid-template-columns:1fr;gap:var(--spacing-32)}}
.apply-form{
  background:var(--sheet);border:1.5px solid var(--ink);
  border-radius:var(--radius-display);padding:var(--spacing-32);
  display:flex;flex-direction:column;gap:var(--spacing-16);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-16)}
@media(max-width:620px){.field-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
html:lang(th) .field>span,html:lang(ar) .field>span{text-transform:none;letter-spacing:0;font-size:13px}
.field>span b{color:var(--seal);font-weight:600}
.field input,.field select,.field textarea{
  font-family:var(--font-sans);font-size:var(--text-body);color:var(--ink);
  border:1.5px solid var(--rule);border-radius:var(--radius-md);
  padding:11px 14px;background:var(--sheet);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--carbon);outline-offset:1px;border-color:var(--ink)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--seal);background:#FBEDEC}
.field textarea{resize:vertical;min-height:84px}
.hp{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.apply-actions{display:flex;align-items:center;gap:var(--spacing-16);flex-wrap:wrap;margin-top:var(--spacing-8)}
.apply-side h3{font-family:var(--font-sans);font-weight:600;font-size:var(--text-heading-sm);margin:0 0 var(--spacing-16)}
/* account view: section subheadings */
.acct-h{font-family:var(--font-sans);font-weight:600;font-size:var(--t-20);margin:0 0 var(--spacing-16)}
#acct-pm-line{margin:0 0 8px;font-size:var(--text-body)}
#login-form{display:flex;flex-direction:column;gap:var(--spacing-16)}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-16)}
.steps li{display:flex;gap:14px}
.steps li>span{
  flex:none;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:2px;
  display:grid;place-items:center;font-size:12px;font-family:var(--font-mono);
}
.steps strong{font-weight:600;display:block;margin-bottom:2px}
.steps p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.pay-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--spacing-16)}
.pay-row .ghost-outline{font-size:13px;padding:9px 16px}

/* ---------- category tiles: the ten L1 segments (5 x 2 at desktop, 2 columns on phones) ---------- */
.tilegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-16)}
@media(max-width:1100px){.tilegrid{grid-template-columns:repeat(4,1fr);gap:var(--spacing-16)}}
@media(max-width:720px){.tilegrid{grid-template-columns:repeat(2,1fr);gap:12px}}
.tile-name{overflow-wrap:normal;word-break:keep-all}
.tile{
  display:flex;flex-direction:column;gap:10px;
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius-display);padding:12px;
  font-family:inherit;text-align:left;color:var(--ink);
}
.tile:hover{border-color:var(--ink)}
.tile-media{
  height:104px;width:100%;border-radius:2px;overflow:hidden;
  background:var(--sheet);display:grid;place-items:center;padding:4px;
}
.tile-media img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply}
.tile-txt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--rule);padding-top:8px}
.tile-name{
  font-family:var(--font-sans);font-weight:600;
  font-size:14px;line-height:1.35;
}
.tile-meta{font-size:12px;color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- brand rail ---------- */
.rail-nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:var(--spacing-16)}
.rail-arrow{
  width:40px;height:40px;background:var(--sheet);
  border:1.5px solid var(--ink);border-radius:var(--radius-md);
  color:var(--ink);font-size:15px;line-height:1;
}
.rail-arrow:hover:not(:disabled){background:var(--ink);color:#fff}
.rail-arrow:disabled{opacity:.3;cursor:default}
@media(max-width:720px){.rail-nav{display:none}}
.brandrail{
  display:flex;gap:var(--spacing-24);overflow-x:auto;
  padding-bottom:var(--spacing-16);scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.brandrail::-webkit-scrollbar{display:none}
.brandcircle{
  flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:0;font-family:inherit;color:var(--ink);cursor:pointer;
  text-decoration:none;scroll-snap-align:start;
}
.brandcircle .disc{
  width:96px;height:96px;border-radius:50%;
  background:var(--sheet);border:1.5px solid var(--rule);
  display:grid;place-items:center;overflow:hidden;padding:10px;
}
.brandcircle .disc>*{grid-area:1/1}
.brandcircle:hover .disc{border-color:var(--ink)}

.brandcircle .disc img{
  width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  background:var(--sheet); /* occludes the monogram fallback beneath */
}
.brandcircle .cname{font-size:12px;text-align:center;line-height:1.3;font-weight:500}
.brandcircle .ccount{font-size:11px;color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* A real brand mark sits in the same grid cell as the monogram and covers it
   completely, so nothing shows through at the edges. */
.brandcard .card-media.is-logo{background:var(--sheet)}
.brandcard .card-media.is-logo img{object-fit:contain;padding:18%;mix-blend-mode:normal}
.brandcircle .disc .disc-logo{
  width:100%;height:100%;object-fit:contain;padding:12%;
  background:var(--sheet);mix-blend-mode:normal;
}

/* ---------- brand identity fallback ----------
   Where we do not hold a brand's own mark, the name is set as a wordmark rather
   than showing a product photograph. Every brand surface then reads as a mark,
   so the grid stays even. */
.brandcard .card-media.is-wordmark{
  background:var(--sheet);display:grid;place-items:center;padding:var(--spacing-16);
}
.wordmark-fallback{
  font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(20px,2.4vw,27px);
  line-height:1.1;text-align:center;color:var(--ink);
  letter-spacing:.02em;overflow-wrap:anywhere;
}
.brandcircle .disc-wordmark{
  font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1.2;text-align:center;
  color:var(--ink);padding:0 8px;
  overflow-wrap:normal;word-break:keep-all;hyphens:manual;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* a long single word (Magoroku, Mentholatum) steps down a size instead of
   breaking mid-word — the disc itself stays 96px */
.brandcircle .disc.long .disc-wordmark{font-size:10.5px}
.brandcircle .disc.has-logo .disc-wordmark{display:none}

/* the wordmark has to survive a 390px viewport: two stacked phrases, never three
   lines, and the lockup never slides under the basket or the account button */
@media(max-width:600px){
  .masthead .wrap{gap:var(--spacing-12);row-gap:8px;padding-top:12px;padding-bottom:12px;
    padding-left:16px;padding-right:16px}
  .logo-lockup{min-width:0;flex:0 1 auto}
  .logo-mark{width:26px;height:26px;flex:none}
  .wordmark{font-size:17px;letter-spacing:.05em;white-space:normal;line-height:1}
  .wordmark>span{display:block;white-space:nowrap;letter-spacing:.05em}
  .masthead .wordmark span{margin-inline-start:0}
  .head-actions{gap:8px;flex:none;margin-left:auto}
  #basket-btn,.head-actions .solid-btn{flex:none}
  .head-actions .solid-btn{padding:8px 12px}
  /* a signed-in company name (46 chars seen) must not push .head-actions under
     the lockup — clamp and ellipsise; the aria-label still carries the full name */
  .masthead #account-link{max-width:min(38vw,calc(100vw - var(--mast-fixed,350px)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .searchfield{padding-top:8px;padding-bottom:8px}
}
@media(max-width:420px){
  .head-actions .ghost-btn{display:none}
  .wordmark{font-size:15px;letter-spacing:.04em}
  .masthead .wordmark>span{letter-spacing:.04em}
  .masthead .logo-lockup{gap:8px}
  .masthead .logo-mark{width:24px;height:24px}
  .masthead .head-actions .solid-btn{padding:8px 6px;font-size:11px}
  .masthead #basket-btn{padding-left:6px;padding-right:6px}
  /* no ghost button on this row: lockup 134 + basket 65 + gaps/padding ≈ 270px */
  .masthead{--mast-fixed:270px}
}
/* below 360px only the mark fits; the wordmark is visually hidden but stays in
   the accessibility tree (the lockup link keeps its aria-label regardless) */
@media(max-width:359px){
  .masthead .wordmark{position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* A-Z brand index */
.brandlist{columns:3;column-gap:var(--spacing-48);list-style:none;padding:0;margin:0}
@media(max-width:900px){.brandlist{columns:2}}
@media(max-width:560px){.brandlist{columns:1}}
.brandlist li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--rule);font-size:var(--text-caption)}
.brandlist a{text-decoration:none}
.browse-index .section-head{margin-bottom:16px}
.browse-index h3{font-size:var(--text-body);font-weight:600;margin:0}
.browse-cats{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:var(--spacing-48)}
.browse-cats li,.browse-brands li{display:flex;justify-content:space-between;gap:12px}
.browse-cats li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:var(--text-caption)}
.browse-cats a,.browse-brands a{text-decoration:none}
.brandlist a:hover{text-decoration:underline;color:var(--carbon)}

/* a card is an interactive control, so it needs a visible focus ring */
.card:focus-visible,.tile:focus-visible,.brandcard:focus-visible,.brandcircle:focus-visible,
.pill:focus-visible,.ccy-btn:focus-visible,.camp-dot:focus-visible{
  outline:2px solid var(--carbon);outline-offset:3px;
}
.card{cursor:pointer}

/* the page behind a modal must not scroll */
body.drawer-open{overflow:hidden}

/* The basis used to be a ten-line grey wall above the first product. It is now one
   line a buyer can read at a glance, with the full reasoning one click away. */
.basis{
  margin-top:var(--spacing-12);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);max-width:none;
}
.basis>summary{
  list-style:none;cursor:pointer;padding:12px 0;
  font-size:13px;line-height:1.6;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;
}
.basis>summary::-webkit-details-marker{display:none}
.basis>summary em{font-style:italic;color:var(--ink-2)}
.basis-more{
  margin-left:auto;color:var(--carbon);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;font-weight:500;
}
.basis[open] .basis-more::after{content:' \2212'}
.basis:not([open]) .basis-more::after{content:' +'}
.basis-body{padding:0 0 16px;max-width:62ch}
.basis-body p{
  font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 10px;
}
.basis-body p:last-child{margin-bottom:0}
.basis-body strong{color:var(--ink-2);font-weight:600}
@media(max-width:640px){
  .basis-more{margin-left:0;flex-basis:100%}
}

/* the margin badge carries its own basis so it cannot be read as a single-order figure */
.tag-margin .tag-qual{color:var(--muted);font-size:10px;letter-spacing:0}
@media(max-width:520px){.tag-margin .tag-qual{display:none}}

/* the view router toggles [hidden]; some elements carry display in a class or
   inline style, which would otherwise win over the UA rule */
[hidden] { display: none !important; }

/* ---------- basket & RFQ ---------- */
.btn-row { display: flex; gap: var(--spacing-16); flex-wrap: wrap; }
.card-add { width: 100%; margin-top: 8px; font-size: 13px; padding: 10px 12px; min-height:44px; }
.card-add:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.card:hover{border-color:var(--ink)}
.drawer-add { display: flex; align-items: flex-end; gap: 12px; margin-top: 24px;
              padding-top: 20px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
#basket-btn { position: relative; }
/* the masthead is tight once the basket button is in; let the CTAs keep one line */
.head-actions .solid-btn, .head-actions .ghost-outline { white-space: nowrap; }
#basket-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px;
                border-radius: 2px; background: var(--ink); color: #fff; font-family: var(--font-mono);
                font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

.basket-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.basket-table th { text-align: left; font-weight: 600; color: var(--ink-2); background: var(--tint);
                   border-bottom: 1.5px solid var(--ink); padding: 10px 12px; font-size: 11px;
                   letter-spacing: .06em; text-transform: uppercase; }
.basket-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule);
                   vertical-align: middle; font-variant-numeric: tabular-nums; }
.bl-name { display: flex; gap: 14px; align-items: center; min-width: 240px; }
.bl-name img { width: 56px; height: 56px; object-fit: contain; background: #fff;
               border: 1px solid var(--rule); border-radius: 2px; flex: none; }
.bl-qty { width: 90px; padding: 8px 10px; border: 1px solid var(--rule);
          border-radius: 2px; font-family: var(--font-mono); font-size: 14px; }

.basket-summary { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.bs-figures { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 20px; }
.bs-v { display: block; font-family: var(--font-mono); font-size: 25px; font-weight:600; font-variant-numeric: tabular-nums; }
.bs-k { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted); margin-top: 4px; font-weight: 600; }
html:lang(th) .bs-k,html:lang(ar) .bs-k{text-transform:none;letter-spacing:0;font-size:12px}

.rfq-steps { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0 0 32px;
             flex-wrap: wrap; }
.rfq-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px;
                color: var(--muted); }
.rfq-steps li span { display: inline-flex; width: 26px; height: 26px; border-radius: 2px;
                     align-items: center; justify-content: center; font-size: 13px;
                     border: 1.5px solid var(--rule); font-family: var(--font-mono); }
.rfq-steps li.is-active { color: var(--ink); }
.rfq-steps li.is-active span { border-color: var(--ink); background: var(--ink); color: #fff; }
.rfq-steps li.is-done span { border-color: var(--ink); }
.rfq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.rfq-lines { list-style: none; padding: 0; margin: 0 0 16px; }
.rfq-lines li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0;
                border-bottom: 1px solid var(--rule); font-size: 14px; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .basket-table thead { display: none; }
  .basket-table tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px;
                     padding: 18px 12px; border-bottom: 1px solid var(--rule); }
  .basket-table td { border: 0; padding: 0; display: flex; justify-content: space-between;
                     align-items: center; gap: 12px; }
  /* the header row is hidden here, so each cell has to name itself */
  .basket-table td::before { content: attr(data-label); color: var(--muted);
                             font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
  .bl-name { grid-column: 1 / -1; }
  .bl-name::before { content: none; }
}
/* a nowrap button must not fight the flexed wordmark for room */
#basket-btn { display: inline-flex; align-items: center; gap: 8px; }
#basket-btn .bb-icon { display: none; flex: none; stroke: currentColor; fill: none; }
/* STRUCTURE §7: goods value · gap to the next threshold; visible from 600px, in the aria-label at any width */
#basket-btn .bb-money { font-size: 12px; color: var(--ink-2); white-space: nowrap; letter-spacing: 0; text-transform: none; unicode-bidi: plaintext; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#basket-btn .bb-money[hidden] { display: none; }
@media (max-width: 600px) {
  #basket-btn { padding: 6px 10px; }
  #basket-btn .bb-word { display: none; }
  #basket-btn .bb-icon { display: block; }
  #basket-btn .bb-money { display: none; }
}
#co-review-type { margin: 0 0 12px; color: var(--ink); }
@media print {
  .promo, .masthead, .catnav, #view-back, .camp-cta, .btn-row, .rfq-steps { display: none !important; }
}

/* Quantity breaks: one card per product, its case packs selectable inline. */
.breaks { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.breaks .brk {
  border: 1px solid var(--rule); background: #fff; border-radius: 2px;
  padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  cursor: pointer; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.breaks .brk:hover { border-color: var(--ink); color: var(--ink); }
.breaks .brk[aria-pressed="true"] {
  border-color: var(--ink); color: #fff; background: var(--ink);
}
.breaks .brk:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }

/* The Real commitment: a $5.69 unit price on a 240 case is a $1,365.60 order. */
.card-commit { font-size: 12px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
/* W1-22 in four languages: Latin tracking has no place in Thai or Arabic script and only widened the tags
   (th wrapped its three tags to a second row at 375; ar joins letters, tracking pulls them apart) */
html:lang(th) .tag,html:lang(ar) .tag{letter-spacing:0}
.card-commit .c-total { color: var(--ink); font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the FX rate is a footnote to the price, not part of the promise */
.intro-fx{font-size:12px;color:var(--muted);margin:6px 0 0}

/* The header carries the market select in the utility strip. Below 560px the
   wordmark wraps rather than clips — the brand must stay readable on a phone
   (the old clip-to-invisible block was removed in W1-20). */
@media(max-width:560px){
  .masthead .wrap{gap:var(--spacing-12);row-gap:8px}
  .logo-lockup{min-width:0}
  .head-actions{gap:var(--spacing-8)}
  .head-actions .solid-btn{padding:8px 12px}
}

/* ---------- language ---------- */
.langswitch{display:flex;align-items:center}
.lang-select{
  display:flex;align-items:center;gap:5px;
  border:1px solid var(--ink);border-radius:var(--radius-md);
  padding:4px 8px 4px 10px;background:var(--sheet);
  color:var(--ink-2);cursor:pointer;
}
.lang-select:hover{background:var(--paper)}
.lang-select:focus-within{outline:2px solid var(--carbon);outline-offset:2px}
.lang-select svg{flex:none}
.lang-select select{
  border:0;outline:0;background:transparent;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--ink);cursor:pointer;padding:0 2px;
}
@media(max-width:560px){
  .lang-select{padding:5px 8px}
  .lang-select select{font-size:12px}
}

/* Arabic renders right to left. The layout is flex/grid throughout, so direction
   does most of the work; these are the places that hard-code a side. */
[dir="rtl"] .basis-more{margin-left:0;margin-right:auto}
[dir="rtl"] .head-actions{margin-left:0;margin-right:auto}
/* signed in, the button carries a company name that may be Latin under an RTL
   document: with direction:rtl the ellipsis clips the HEAD of the name and shows
   the tail. plaintext resolves direction from the first strong character, so a
   Latin name runs LTR (ellipsis at its end) and the Arabic label stays RTL */
.masthead #account-link{unicode-bidi:plaintext}
[dir="rtl"] .card-commit,[dir="rtl"] .basis>summary,[dir="rtl"] .basis-body{text-align:right}
[dir="rtl"] .catnav .wrap,[dir="rtl"] .brandrail{direction:rtl}
/* the nested L2 list mirrors with the page; counts keep Latin digits isolated */
[dir="rtl"] .catnav-l2{direction:rtl}
[dir="rtl"] .catnav-n{unicode-bidi:isolate}
[dir="rtl"] .accent-rule{margin-left:auto;margin-right:0}
/* prices, currency codes and SKU ids are Latin runs inside Arabic text */
[dir="rtl"] .price-wholesale,[dir="rtl"] .price-retail,[dir="rtl"] .c-total,
[dir="rtl"] .brk,[dir="rtl"] .ccy-code{direction:ltr;unicode-bidi:isolate}

.lang-offer{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;
  display:flex;align-items:center;gap:12px;
  background:var(--sheet);border:1.5px solid var(--ink);
  border-radius:var(--radius-display);padding:10px 14px;font-size:13px;
  box-shadow:4px 4px 0 var(--tint);
}
.lang-offer button{font-size:13px;padding:6px 14px}
@media(max-width:520px){.lang-offer{left:16px;right:16px;transform:none;justify-content:space-between}}

/* the drawer slides in from the inline end, so in RTL it must travel the other way */
[dir="rtl"] .drawer{transform:translateX(-100%)}
[dir="rtl"] .drawer.open{transform:translateX(0)}
/* horizontal rails must not push the page wide when direction flips */
[dir="rtl"] .pillrow,[dir="rtl"] .catnav .wrap,[dir="rtl"] .brandrail{overflow-x:auto}

/* An English sentence inside an RTL page must be isolated or the bidi algorithm
   moves its full stop to the wrong end ("​.Japan protects"). Campaign copy and
   product names stay English, so isolate every such run. */
[dir="rtl"] .campaign-slide h2,[dir="rtl"] .camp-body,[dir="rtl"] .camp-eyebrow,
[dir="rtl"] .card-name,[dir="rtl"] .card-ja,[dir="rtl"] .card-brand,[dir="rtl"] .disc-wordmark,
[dir="rtl"] .wordmark,[dir="rtl"] .basket-table td:first-child,
[dir="rtl"] .card-desc,[dir="rtl"] .drawer-blurb,[dir="rtl"] .drawer p.note,
[dir="rtl"] .econ td,[dir="rtl"] .assumptions dd{
  direction:ltr;unicode-bidi:isolate;text-align:start;
}
/* "03 / 06" is a fraction, not a sentence */
[dir="rtl"] .camp-count{direction:ltr;unicode-bidi:isolate}

/* the wordmark is two spans; in RTL the whitespace between them collapses */
.wordmark span{margin-inline-start:.34em}

/* "$ USD" + "الولايات المتحدة" need a real gap; the bidi run boundary eats
   the inline whitespace between the two spans. */
.ccy-btn{gap:6px}
[dir="rtl"] .ccy-country{margin-inline-start:4px}

/* A case pack is a minimum, not a maximum — let a buyer order six of them without
   six clicks, and keep the button honest about the total. */
.add-row{display:flex;gap:8px;align-items:stretch}
/* 2026-09-05 (W1-22 card diet): the stepper takes 84 px, not 96, and the button's side padding is 10 px, so a
   one-line label like "Add 1 case — $356.38" fits at 13 px in every language and the card stays under 620 px */
.add-row .card-add{flex:1;padding-left:10px;padding-right:10px}
.add-row .qty-step button{width:26px}
.qty-step{display:flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:var(--radius-md);overflow:hidden;flex:none;background:var(--sheet)}
.qty-step button{
  border:0;background:none;width:30px;font-family:inherit;font-size:15px;line-height:1;
  color:var(--ink);cursor:pointer;
}
.qty-step button:hover{background:var(--tint)}
.qty-step button:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px}
.qty-n{
  width:34px;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  text-align:center;font-family:var(--font-mono);font-size:13px;background:transparent;color:var(--ink);
  -moz-appearance:textfield;font-variant-numeric:tabular-nums;
}
.qty-n::-webkit-outer-spin-button,.qty-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-n:focus{outline:2px solid var(--carbon);outline-offset:-2px}

/* What the product actually is, from data we hold — no invented copy. */
.drawer-blurb{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0 0 20px}
.econ.spec td:first-child{white-space:nowrap;color:var(--muted)}
.econ.spec td:last-child{text-align:left}
.econ.spec .mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.spec-notes{margin:0;padding-inline-start:16px}
.spec-notes li{margin:0 0 4px}

/* A line of real description under the name: only where a curated blurb exists
   (W1-22). No filler descriptor, no fixed min-height. */
.card-desc{
  font-size:12px;line-height:1.55;color:var(--muted);margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:520px){
  .qty-step button{width:26px}
  .card-add{font-size:12px;padding:8px 10px}
}

/* ---------- home hero: the thesis, and one real line costed beside it ---------- */
.promise{padding:44px 0 56px;border-bottom:1px solid var(--rule);background:var(--paper)}
.promise-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:56px;align-items:start}
.promise-copy{min-width:0;padding-top:8px}
.editorial-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;line-height:1.5;font-weight:600;
  letter-spacing:.08em;color:var(--carbon);margin:0 0 18px;text-transform:uppercase}
.editorial-eyebrow::before{content:'';width:10px;height:10px;background:var(--ink);flex:none}
html:lang(th) .editorial-eyebrow,html:lang(ar) .editorial-eyebrow{text-transform:none;letter-spacing:0;font-family:var(--font-sans)}
.promise-h1{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-61);
  line-height:1;letter-spacing:var(--display-track);margin:0 0 22px;max-width:15ch;color:var(--ink)}
html:lang(th) .promise-h1,html:lang(ar) .promise-h1{font-size:var(--t-49);line-height:1.2;max-width:16ch}
.promise-sub{font-size:var(--t-16);font-weight:400;color:var(--ink-2);max-width:56ch;margin:0 0 16px;line-height:1.5}
.facts-line{font-family:var(--font-mono);font-size:13px;color:var(--ink);margin:0 0 4px;font-variant-numeric:tabular-nums}
.facts-line span[id]{font-weight:600}
html:lang(th) .facts-line,html:lang(ar) .facts-line{font-family:var(--font-sans)}
#promise .btn-row{gap:12px;margin-top:22px}
#promise .btn-row a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:600}
#promise .solid-btn::after{content:'\2192';margin-inline-start:12px}
[dir=rtl] #promise .solid-btn::after{content:'\2190'}
/* the three editorial photographs: framed windows onto /p/ pages, captions carried by the link name */
.storefront-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;min-width:0;max-width:520px}
.showcase-product{display:flex;flex-direction:column;min-width:0;height:128px;padding:10px;overflow:hidden;background:var(--sheet);
  border:1px solid var(--rule);border-radius:2px;transition:border-color .15s ease}
.showcase-product img{width:100%;height:1px;min-height:0;flex:1;object-fit:contain}
.showcase-caption{display:none}
.showcase-product:hover{border-color:var(--ink)}
.showcase-product:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.hero-docket{min-width:0}
.hero-docket-k{margin:0 0 8px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html:lang(th) .hero-docket-k,html:lang(ar) .hero-docket-k{text-transform:none;letter-spacing:0;font-family:var(--font-sans)}
.hero-docket-line{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:10px 12px;margin:0 0 -2px;
  background:var(--sheet);border:2px solid var(--ink);border-bottom:0;border-radius:var(--radius-display) var(--radius-display) 0 0}
.hero-docket-line:hover .hero-docket-name>span:last-child{text-decoration:underline;text-underline-offset:3px}
.hero-docket-media{width:64px;height:64px;display:grid;place-items:center}
.hero-docket-media img{width:100%;height:100%;object-fit:contain}
.hero-docket-name{display:grid;gap:2px;font-size:14px;font-weight:600;line-height:1.35;min-width:0}
.hero-docket-brand{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--carbon)}
.hero-docket .docket{border-radius:0 0 var(--radius-display) var(--radius-display)}
@media(max-width:1000px){
  .promise-layout{grid-template-columns:1fr;gap:32px}
  .hero-docket{max-width:560px}
}
@media(max-width:700px){
  #promise{padding:24px 0 36px}
  .promise-h1{font-size:44px;max-width:14ch;margin-bottom:14px}
  html:lang(th) .promise-h1,html:lang(ar) .promise-h1{font-size:31px}
  .promise-sub{font-size:15px;line-height:1.5;margin-bottom:12px}
  .editorial-eyebrow{font-size:11px;margin-bottom:12px}
  #promise .btn-row{margin-top:14px;gap:10px}
  #promise .btn-row a{font-size:13px;padding:12px 16px;line-height:1.4;min-height:44px}
  .storefront-showcase{margin-top:20px;gap:8px}
  .showcase-product{height:96px;padding:8px}
}
.facts{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;padding:0;margin:0 0 10px}
.facts li{flex:1 1 340px;min-width:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.facts-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:2px}
.qualifier{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.q-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-right:4px;font-weight:600}
.qualifier .pill{font-size:12px;padding:7px 14px}
.all-products-h2{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-25);letter-spacing:var(--display-track);
  line-height:1.2;margin:0 0 16px}
@media(max-width:700px){
  .facts li{flex-basis:100%}
  .qualifier{gap:6px}
  .qualifier .pill{font-size:11px;padding:6px 10px}
}
/* Our terms is a collapsed row on a phone (one tap to read the commitments) and
   expanded on desktop. */
.facts-terms-wrap{list-style:none}
#facts-terms summary{list-style:none;cursor:pointer}
#facts-terms summary::-webkit-details-marker{display:none}
#facts-terms summary .facts-k{display:inline-block}
#facts-terms summary::after{content:' +';color:var(--muted);font-size:12px}
#facts-terms[open] summary::after{content:' \2212'}
#facts-terms[open] summary{margin-bottom:2px}

/* ---------- strips (start here / starter set) ---------- */
.strip{padding-top:var(--spacing-24);padding-bottom:var(--spacing-24)}
.terms-line{margin:0;font-size:15px;color:var(--ink-2)}
.terms-line a{white-space:nowrap;margin-left:12px}
@media(max-width:700px){
  #starthere .section-head p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.strip .section-head{margin-bottom:var(--spacing-16)}
.strip .accent-rule{margin-bottom:var(--spacing-16)}

/* ---------- catalog tools ---------- */
#catalog.section{padding-top:32px}
#catalog .section-head{margin-bottom:16px}
#catalog .section-h1{font-size:var(--t-31)}
#catalog-note{font-size:14px;line-height:1.5;max-width:none;font-weight:400}
#catalog .pillrow{gap:8px;margin-bottom:10px;padding-bottom:6px}
#catalog .pillrow .pill{font-size:13px;padding:7px 14px}
.pillrow{margin-bottom:16px}
#pills-evidence{margin-top:-6px}
/* second pill row: the active segment's collections (STRUCTURE §3.3) */
#pills-l2{margin-top:-6px}
#pills-l2 .pill{padding:6px 14px;font-size:13px}
#market-note{margin-top:0}
#sort{border:1.5px solid var(--ink)!important;border-radius:var(--radius-md)!important;font-family:var(--font-sans)!important;color:var(--ink)}

/* ---------- minimum-order line + assumptions ---------- */
.bs-min{font-size:14px;color:var(--ink);margin:0 0 16px}
.assumptions{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:12px}
.assumptions.compact{gap:4px 12px;font-size:11px}
.assumptions dt{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px;padding-top:1px;font-weight:600}
html:lang(th) .assumptions dt,html:lang(ar) .assumptions dt{text-transform:none;letter-spacing:0}
.assumptions dd{margin:0;color:var(--ink-2);line-height:1.6}
.confirmed{margin:4px 0 0;padding-inline-start:18px;font-size:12px;color:var(--ink-2)}
.confirmed li{margin:0 0 2px}

/* ---------- drawer: pinned add row + head economics ---------- */
.drawer-head{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:8px 0;margin:8px 0 12px;display:flex;flex-direction:column;gap:6px}
.drawer-body-note{margin:8px 0 0}
.drawer-head .card-prices{margin-top:0}
.drawer-head .card-meta{margin-top:0}
.drawer-media{margin:0 0 16px;max-height:200px}
.drawer-media img{max-height:200px;object-fit:contain}
@media(max-width:600px){
  .drawer-media,.drawer-media img{max-height:200px}
}
.drawer-add{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);
  margin:24px calc(-1*var(--spacing-32)) 0;padding:12px var(--spacing-32);z-index:2}
.drawer-inner{padding-bottom:0}

/* ---------- brand page cards link into the catalogue ---------- */
.card-link{display:block;color:inherit}
.card-link:hover .card{border-color:var(--ink)}
.card-link:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}

/* ---------- mobile basket CTA ----------
   On a phone the actions sit in the flow, directly under the goods total they act on (W1-06). They used to
   stick to the bottom of the viewport; once the basket docket joined the head of the decision panel, the
   stuck bar (four buttons, ~160px) sat on top of the goods total it was meant to sit beside. */
@media(max-width:700px){
  #basket-actions{background:var(--sheet);border-top:1.5px solid var(--ink);padding:12px 0}
}

/* ---------- quotation pack print ---------- */
@media print{
  body.printing-pack > *:not(#pack){display:none!important}
  body.printing-pack #pack{display:block!important}
  @page{size:A4;margin:14mm}
}

/* skeleton tiles shown while catalog.json downloads (W1-19) */
.tile-skeleton{pointer-events:none}
.tile-skeleton .tile-media{background:var(--tint)}
.tile-skeleton .tile-name,.tile-skeleton .tile-meta{display:block;height:12px;background:var(--tint);border-radius:2px}
.tile-skeleton .tile-name{width:70%}
.tile-skeleton .tile-meta{width:45%}
#co-gate-q button[aria-pressed="true"].ghost-outline{background:var(--ink);color:#fff}
#co-gate-q button[aria-pressed="false"].solid-btn{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}

/* ---------- checkout (docs/PURCHASE_FLOW.md) ---------- */
.rfq-steps li span:not(:first-child){display:inline;width:auto;height:auto;border:0;border-radius:0;background:transparent;color:inherit;font-size:inherit;font-family:inherit}
.rfq-steps{gap:16px 24px}
.co-lead{font-size:var(--text-body);color:var(--ink-2);max-width:60ch;margin:0 0 var(--spacing-16)}
.co-q{font-family:var(--font-sans);font-weight:600;font-size:var(--text-heading-sm);margin:0 0 var(--spacing-16)}
.co-totals{margin:0 0 var(--spacing-16);font-size:13px;color:var(--ink);line-height:1.6;background:var(--tint);border:1px solid var(--rule);border-inline-start:4px solid var(--ink);padding:10px 14px;font-variant-numeric:tabular-nums}
.co-totals:empty{display:none}
.co-status{margin:0 0 var(--spacing-16);min-height:1em}
.co-panel{display:flex;flex-direction:column;gap:var(--spacing-16)}
.co-panel .btn-row{margin-top:var(--spacing-8)}
.co-form{margin-top:var(--spacing-16);max-width:720px}
.co-radios{display:flex;flex-direction:column;gap:10px}
.co-l{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.co-radio{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-body);cursor:pointer}
.co-radio input{margin-top:4px;flex:none;accent-color:var(--carbon)}
.co-radio .note{display:block}
.co-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
.co-check input{margin-top:3px;flex:none;accent-color:var(--carbon);width:16px;height:16px}
.co-check input[aria-invalid="true"]{outline:2px solid var(--seal);outline-offset:2px}
.co-warn-box{border:1.5px solid var(--ink);border-radius:var(--radius-display);padding:var(--spacing-16);background:var(--sheet)}
.co-warn-box .note{margin:0 0 10px}
.co-warn-box .btn-row{margin:0}
.co-warn{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.co-warn .note{margin:0}
.co-notes{color:var(--ink-2)}
.co-review-totals{max-width:420px;border-top:1.5px solid var(--ink);padding-top:12px;font-variant-numeric:tabular-nums}
.co-review-totals>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:14px}
.co-review-totals .note{margin:8px 0 0}
.co-review-totals>.co-rt-total{border-top:1px solid var(--rule);margin-top:4px;font-weight:600}
.co-review-totals>.co-rt-aside{padding:2px 0 2px 0;padding-inline-start:14px;font-size:13px;color:var(--ink-2)}
.co-review-totals>.co-rt-vat{border-top:1px dashed var(--rule);margin-top:4px;padding-top:6px;padding-inline-start:0}
.co-review-totals>div>span:first-child{min-width:0}
.co-review-totals>div>span:last-child{flex:none;text-align:end}
#co-card-wrap{padding-inline-start:26px}
#co-card-wrap .co-radio{margin-inline-start:-26px}
#basket-below{margin-top:var(--spacing-16)}
#basket-below .bk-gap{margin:0 0 10px;font-size:var(--text-body);color:var(--ink);font-weight:600}
@media(max-width:600px){.co-q{font-size:20px}.co-warn{flex-direction:column;gap:6px}}

/* account ▸ orders */
.acct-order{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:12px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-size:14px}
.acct-order .mono{font-family:var(--font-mono);font-size:13px}
.chip{display:inline-block;border:1.5px solid var(--rule);border-radius:2px;padding:3px 10px;font-size:12px;white-space:nowrap;font-weight:600}
.chip[data-status="open"]{border-color:var(--ink)}
.chip[data-status="paid"]{background:var(--keep);color:#fff;border-color:var(--keep)}
.acct-order-pay{font-size:12px;padding:6px 12px}
@media(max-width:700px){.acct-order{grid-template-columns:1fr 1fr}.acct-order-ref{grid-column:1/-1}}

/* ---------- facet rail + catalogue layout (docs/STRUCTURE.md §4) ----------
   One rail DOM node. ≥ 1000px it is the left column of #catalog .wrap; below that it is
   hidden in the layout and MOVED into the Filters sheet by app.js (never forked). */
#catalog .cat-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px;align-items:start}
@media(min-width:1000px){
  #catalog .cat-layout{grid-template-columns:216px minmax(0,1fr)}
  #catalog .cat-content .grid{grid-template-columns:repeat(2,1fr)}
  .facets{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;scrollbar-width:thin;padding-right:6px}
}
@media(min-width:1200px){#catalog .cat-content .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1440px){#catalog .cat-content .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:999px){#catalog .cat-layout > #facets{display:none}}
.facets{font-size:13px;line-height:1.45}
.facets-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0 10px}
.facets-head h2{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-25);letter-spacing:var(--display-track);margin:0}
.facet-clear{background:none;border:0;padding:0;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:2px;color:var(--carbon);cursor:pointer}
.facet{border-top:1.5px solid var(--ink);padding:12px 0 10px}
.facet-h{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 4px;font-weight:600}
html:lang(th) .facet-h,html:lang(ar) .facet-h{text-transform:none;letter-spacing:0;font-size:12.5px}
.facet-def{font-size:11.5px;line-height:1.5;color:var(--muted);margin:0 0 8px}
.facet-list{list-style:none;margin:0;padding:0}
.facet-opt{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.facet-opt input{margin:0;width:15px;height:15px;accent-color:var(--ink);flex:none}
.facet-l{flex:1 1 auto;min-width:0}
.facet-n{color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;flex:none}
.facet-opt.is-zero{color:var(--muted);opacity:.6}
.facet-brand-in{width:100%;border:1.5px solid var(--rule);border-radius:var(--radius-md);padding:7px 9px;font:inherit;font-size:13px;background:var(--sheet)}
.facet-brand-list{list-style:none;margin:6px 0 0;padding:0;max-height:200px;overflow-y:auto;scrollbar-width:thin}
.facet-brand-list button{display:flex;width:100%;justify-content:space-between;gap:8px;background:none;border:0;padding:5px 2px;font:inherit;font-size:13px;text-align:start;color:inherit;cursor:pointer}
.facet-brand-list button:hover{text-decoration:underline;text-underline-offset:2px}
.facet-brand-list .note{padding:4px 2px}
.facet-brand-cur:not(:empty){margin-bottom:8px}
.facet-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:2px;padding:3px 6px 3px 10px;font-size:12px;max-width:100%;background:var(--sheet)}
.facet-chip-x{border:0;background:none;padding:0 2px;font-size:15px;line-height:1;cursor:pointer;color:inherit}

/* ---------- phone catalogue bar + bottom sheets (STRUCTURE §4 layout) ---------- */
.catbar{display:none}
@media(max-width:999px){
  .catbar{display:flex;position:sticky;top:0;z-index:20;gap:8px;padding:8px 0;margin:0 0 12px;
    background:var(--paper);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
  .catbar button{flex:1 1 0;min-width:0;border:1.5px solid var(--ink);border-radius:var(--radius-md);background:var(--sheet);
    padding:8px 10px;font-size:12px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--ink)}
  /* the label shrinks before the badge does: a long label (ar "Filters") ellipsises inside the box */
  .catbar button>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .catbar .catbar-n{flex:0 0 auto}
  .catbar .catbar-n:not(:empty){background:var(--ink);color:#fff;border-radius:2px;font-size:10px;min-width:16px;height:16px;display:inline-grid;place-items:center;padding:0 4px;font-family:var(--font-mono)}
  /* the pill rows keep a visible overflow affordance: a thin scrollbar, no gradient */
  .pillrow{scrollbar-width:thin;padding-bottom:6px}
}
.sheet-backdrop{position:fixed;inset:0;background:rgba(16,16,22,.38);display:none;z-index:60}
.sheet-backdrop.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:86vh;background:var(--sheet);border-top:2px solid var(--ink);border-radius:6px 6px 0 0;
  z-index:70;display:none;flex-direction:column}
.sheet.open{display:flex}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--spacing-24);border-bottom:1px solid var(--rule);background:var(--tint)}
.sheet-head h2{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-25);letter-spacing:var(--display-track);margin:0}
.sheet-close{border:0;background:none;font-size:24px;line-height:1;padding:4px 8px;min-width:44px;min-height:44px;cursor:pointer;color:var(--ink)}
.sheet-body{overflow-y:auto;padding:12px var(--spacing-24) 16px;flex:1 1 auto;min-height:0}
.sheet-body #facets{display:block;position:static;max-height:none;overflow:visible;padding:0}
/* the sheet head already says "Filters": inside it the rail keeps only its Clear all */
.sheet-body .facets-head h2{display:none}
.sheet-body .facets-head{justify-content:flex-end;padding-top:0}
.sheet-body #sort-wrap{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14px}
.sheet-body #sort-wrap select{margin-left:0!important;width:100%;font-size:15px!important}
.sheet-foot{padding:12px var(--spacing-24);border-top:1px solid var(--rule)}
.sheet-foot:empty{display:none}
.sheet-foot .solid-btn{width:100%}
body.sheet-open{overflow:hidden}
/* the Categories sheet: the nav list laid out as a vertical list, every L2 shown */
.catnav-list--sheet{display:block}
.catnav-list--sheet .catnav-item{display:block;padding:6px 0;border-bottom:1px solid var(--rule)}
.catnav-list--sheet .catnav-item:last-child{border-bottom:0}
.catnav-list--sheet > li > a{display:block;padding:6px 0;font-size:15px;color:var(--ink)}
.catnav-list--sheet .catnav-more{display:none}
.catnav-list--sheet .catnav-l2{display:flex;position:static;flex-wrap:wrap;gap:4px 16px;padding:0 0 8px 14px;border:0;background:none}
.catnav-list--sheet .catnav-l2 a{font-size:14px;color:var(--ink-2)}

/* ---------- collapsed editorial strips on phones (plain products view) ---------- */
@media(max-width:700px){
  .strip.is-collapsed .grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .strip.is-collapsed .grid > .card{flex:0 0 78%;scroll-snap-align:start}
  .strip .grid:has(>.card--compact){display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding:4px 0 12px;scrollbar-width:thin}
  .strip .grid>.card--compact{flex:0 0 84%;min-width:0;scroll-snap-align:start}
}

/* ---------- generated static pages: /c/, /p/, /lens/ (docs/STRUCTURE.md §2.1, §5.1) ---------- */
body.static main.wrap{padding-top:var(--spacing-24);padding-bottom:var(--spacing-56)}
body.static h2{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:var(--t-25);line-height:1.15;margin:var(--spacing-48) 0 var(--spacing-16)}
body.static .section-head h1,body.static .p-name{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:var(--t-49);line-height:1.05;margin:0 0 8px}
body.static .lead{font-size:15px;line-height:1.6;max-width:70ch;color:var(--ink-2)}
.crumbs{font-size:12px;color:var(--muted);padding-top:var(--spacing-16)}
.crumbs a{text-decoration:underline;text-underline-offset:3px;color:var(--carbon)}
.crumb-sep{margin:0 4px}
.masthead-lite .head-actions a{white-space:nowrap}
.terms-line{margin:0}
.c-siblings{font-size:13px;line-height:2;margin:0 0 var(--spacing-16)}
.c-siblings a,.c-l2 a,.c-brands a,.p-rail a,.p-id a{text-decoration:underline;text-underline-offset:3px}
.c-l2 ul,.p-rail ul{padding:0;margin:0;list-style:none;columns:2;column-gap:var(--spacing-32)}
.c-l2 li,.p-rail li{margin:0 0 8px;font-size:14px;break-inside:avoid}
.c-open-wrap{margin-top:var(--spacing-24);display:flex;align-items:center;gap:var(--spacing-16);flex-wrap:wrap}
.p-record{max-width:1280px}
.p-ja{font-size:15px;color:var(--ink-2);margin:0 0 6px}
.p-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:40px}
.p-media{margin:0;min-width:0;height:480px;display:grid;place-items:center;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-display);padding:32px}
.p-media img{max-height:100%;width:100%;height:100%;min-height:0;object-fit:contain}
.p-purchase{min-width:0}
body.static .p-purchase .p-name{font-size:var(--t-49);line-height:1.02}
.p-brandline{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--carbon)}
.p-purchase .p-head{margin-bottom:22px}
.p-purchase .p-actions{margin:24px 0 0;gap:16px}
.p-purchase .p-add{min-height:44px;padding:14px 20px;text-align:center;width:100%;font-size:15px}
.p-purchase .p-url{font-size:11px}
.p-purchase .p-price{font-size:16px;margin-bottom:12px;padding:14px 16px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:var(--radius-display)}
.p-purchase .p-price strong{font-family:var(--font-mono);font-size:31px;font-weight:600;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.p-purchase .p-case{line-height:1.6}
.p-price{font-size:22px;margin:0 0 4px}
.p-case{font-size:14px;margin:0 0 var(--spacing-16)}
.p-case strong{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.p-commercial table.econ,.p-specs table.econ,.p-costs table.econ,.p-notes-wrap table.econ{min-width:0}
.p-basis{font-size:11px;color:var(--muted);display:block;text-align:left;max-width:34ch}
table.econ.p-spec td:first-child,table.econ.p-notes td:first-child,table.econ.p-cost td:first-child{color:var(--muted);width:38%}
table.econ.p-notes td,table.econ.p-spec td{text-align:left}
.p-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:var(--spacing-32) 0}
.p-actions .p-url{flex-basis:100%;word-break:break-all}
.p-stub .p-withdrawn{font-size:16px;margin:var(--spacing-24) 0 var(--spacing-16)}
@media(max-width:700px){
  .p-stage{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:32px}
  .p-media{height:300px;padding:24px}
  body.static .p-purchase .p-name{font-size:var(--t-39)}
  body.static .wrap{padding-left:var(--spacing-16);padding-right:var(--spacing-16)}
  body.static .section-head h1,body.static .p-name{font-size:var(--t-39)}
  .c-l2 ul,.p-rail ul{columns:1}
  .masthead-lite .head-actions .ghost-btn{display:none}
  /* volume ladder (phase-5 carry-over): six columns cannot fit 390px — the rows stack, each
     cell names itself from data-label, so nothing scrolls sideways inside .econ-wrap */
  table.econ.p-breaks,table.econ.p-breaks tbody{display:block;min-width:0;width:100%}
  table.econ.p-breaks thead{display:none}
  table.econ.p-breaks tbody tr{display:block;padding:12px var(--spacing-16);border-bottom:1px solid var(--rule)}
  table.econ.p-breaks tbody tr:last-child{border-bottom:0}
  table.econ.p-breaks td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0;border:0;text-align:right}
  table.econ.p-breaks td::before{content:attr(data-label);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:left}
  table.econ.p-breaks td:first-child{font-weight:600;padding-bottom:6px}
}
/* tablet: the name shares the stage with the photo in a ~300px column — the 49px stencil set a long name in five
   lines; 31px keeps it to three */
@media(min-width:701px) and (max-width:1100px){body.static .p-purchase .p-name{font-size:var(--t-31);line-height:1.08}}
/* the ONE print rule for /p/ (§5.1 item 7): the record alone, one column, no chrome */
@media print{
  body.static .p-stage{display:block;margin-bottom:8px}
  body.static .p-purchase .p-head{margin-bottom:8px}
  body.static .p-purchase .p-name{font-size:22px}
  body.static .p-media{height:120px;padding:0;background:none;display:block;border:0}
  body.static .p-media img{width:auto;height:120px}
  body.static .p-purchase .p-price{padding:0;border:0}
  body.static .p-purchase .p-price strong{display:inline;font-size:15px}
  body.static .masthead,body.static .crumbs,body.static .p-actions,body.static .p-rail,body.static .c-open-wrap,body.static .head-actions{display:none!important}
  @page{size:A4;margin:12mm}
  body.static .p-media{max-height:120px;margin:8px 0}body.static .p-media img{max-height:120px}
  body.static table.econ th,body.static table.econ td{padding:4px 8px;font-size:10.5px}
  body.static table.econ tr{break-inside:avoid}
  body.static h2{margin:10px 0 4px;font-size:15px;break-after:avoid}
  body.static .p-name{font-size:22px;margin:0 0 4px}body.static .p-ja{font-size:12px;margin:0}
  body.static .p-price{font-size:15px}body.static .p-case{margin:0 0 6px}
  body.static .p-basis{max-width:none;font-size:9.5px}
  body.static .note{font-size:10.5px;line-height:1.4}
  body.static main.wrap{padding-top:0;padding-bottom:0}
  body.static .foot{padding:10px 0;background:none}
}
/* ---------- drawer (§5.2): breadcrumb, action row, print of the drawer alone ---------- */
.drawer-crumb{font-size:12px;color:var(--muted);margin:0 0 4px}
.drawer-crumb a{text-decoration:underline;text-underline-offset:3px;color:var(--carbon)}
.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.drawer-actions a,.drawer-actions button{font-size:12px;padding:6px 12px}
@media print{
  body.drawer-open>*:not(#drawer){display:none!important}
  body.drawer-open #drawer{position:static;transform:none;width:auto;max-width:none;height:auto;box-shadow:none;border:0;display:block}
  body.drawer-open #drawer .close,body.drawer-open #drawer .drawer-add,body.drawer-open #drawer .drawer-actions,body.drawer-open #drawer .drawer-media,body.drawer-open #drawer .dk-toggle{display:none!important}
  body.drawer-open #drawer details>*:not(summary){display:block!important}
  body.drawer-open #drawer details summary{list-style:none}
  body.drawer-open #drawer table.econ th,body.drawer-open #drawer table.econ td{padding:5px 8px;font-size:11px}
  body.drawer-open{overflow:visible}
}

/* ---------- one-page checkout (IA §6 item 8, 2026-09-04): three groups, live Confirm ---------- */
#co-flow.co-one{display:flex;flex-direction:column;gap:0}
#co-flow.co-one .co-q{display:none}
.co-group{display:block;background:var(--sheet);border:1.5px solid var(--ink);border-radius:var(--radius-display);padding:0 var(--spacing-24) var(--spacing-24);margin:0 0 var(--spacing-16)}
#co-flow:not(.co-one) .co-group{background:none;border:0;padding:0}
.co-group-h{font-family:var(--font-sans);font-weight:600;font-size:var(--t-20);margin:0 calc(-1*var(--spacing-24)) var(--spacing-16);padding:10px var(--spacing-24);border-bottom:1.5px solid var(--ink);background:var(--tint)}
.co-group[data-group="who"] .co-group-h{margin-top:0}
#co-flow:not(.co-one) .co-group-h{display:none}
.co-send{margin-top:var(--spacing-16)}
/* bank transfer is the only way to settle → the radio is a sentence, not a decision */
.co-pay-group.is-only input[type="radio"]{display:none}
.co-pay-group.is-only .co-radio{cursor:default}
/* checkout chrome: logo + basket only; the search box and the category nav come back on leaving */
body.co-lite .searchfield,body.co-lite .catnav,body.co-lite .catbar{display:none !important}
/* account: price hold + Reorder on order rows, saved lists */
.acct-order{grid-template-columns:auto 1fr auto auto auto auto auto}
.acct-order-reorder{font-size:12px;padding:6px 12px}
.acct-order-hold{grid-column:1/-1;margin:-6px 0 0;font-size:13px}
@media(max-width:700px){.acct-order{grid-template-columns:1fr 1fr}.acct-order-hold{grid-column:1/-1}}
.acct-list{display:grid;grid-template-columns:1fr auto auto auto;gap:12px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px}
.acct-list-load{font-size:12px;padding:6px 12px}
@media(max-width:700px){.acct-list{grid-template-columns:1fr auto}.acct-list-name{grid-column:1/-1}}

/* courier quote panel (P13, 2026-09-04): drawer, basket and /p/; hidden until /api/rates says available */
.rates-panel{border:1.5px solid var(--ink);border-radius:var(--radius-display);padding:var(--spacing-12) var(--spacing-16);margin:var(--spacing-16) 0;background:var(--sheet)}
.rates-title{font-size:var(--text-caption);font-weight:600;letter-spacing:.02em;margin:0 0 6px}
.rates-test-banner{background:var(--seal);color:#fff;font-weight:600;font-size:var(--text-caption);padding:6px 10px;border-radius:2px;margin:0 0 10px}
.rates-lead{margin:0 0 10px}
.rates-list{list-style:none;margin:10px 0 0;padding:0}
.rates-row{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--rule)}
.rates-carrier{flex:1 1 auto;min-width:0;font-size:var(--text-caption);overflow-wrap:anywhere}
.rates-amount{font-weight:600;font-size:var(--text-caption);white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rates-transit{flex:1 0 100%}
.rates-via{margin:8px 0 0}
#p-rates select{margin:0 8px 8px 0;font:inherit;font-size:var(--text-caption)}
@media print{.rates-panel{display:none}}

/* Confirmed checkout identity: the same labelled, focusable inputs read as a compact summary. */
.co-identity{display:flex;flex-direction:column;gap:16px}
.co-identity.is-confirmed{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px 20px;background:var(--tint);padding:12px 14px;border-radius:2px}
.co-identity.is-confirmed .rfq-grid{display:contents}
.co-identity.is-confirmed .field{gap:2px;min-width:0}
.co-identity.is-confirmed input{border-color:transparent;background:transparent;padding:4px 0;font-weight:600;min-width:0;width:100%}
.co-identity.is-confirmed input:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
#co-identity-edit{align-self:flex-start}

/* Direct product discovery: the combobox stays the single catalogue search. */
.searchfield { position: relative; }
.search-assist { position: absolute; z-index: 120; inset-inline: 0; top: calc(100% + 8px); min-width: 280px; padding: 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-display); background: #fff; color: var(--ink); box-shadow: 6px 6px 0 var(--tint); max-height: min(460px, calc(100svh - 175px)); overflow-y: auto; text-align: start; }
.search-assist[hidden] { display: none; }
.search-assist-title { margin: 3px 8px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.search-assist-option { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 8px; border-radius: 2px; cursor: pointer; }
.search-assist-option:hover, .search-assist-option[aria-selected="true"] { background: var(--tint); outline: 2px solid var(--carbon); outline-offset: -2px; }
.search-assist-option img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 2px; }
.search-assist-copy { display: grid; gap: 3px; min-width: 0; }
.search-assist-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.35; font-weight: 600; }
.search-assist-brand, .search-assist-moq { font-size: 11px; line-height: 1.35; color: var(--muted); }
.search-assist-price { display: grid; gap: 3px; text-align: end; font-size: 13px; font-weight: 600; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.search-assist-all { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 12px; border: 1.5px solid var(--carbon); border-radius: var(--radius-md); color: var(--carbon); background: #fff; font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; }
.search-assist-all:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
@media (max-width: 600px) { .search-assist { inset-inline: 0; min-width: 0; } .search-assist-option { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 7px 5px; } .search-assist-option img { width: 44px; height: 44px; } .search-assist-price { font-size: 12px; } }
@media(max-width:600px){.co-group{padding:0 var(--spacing-16) var(--spacing-16)}.co-group-h{margin-inline:calc(-1*var(--spacing-16));padding-inline:var(--spacing-16)}}

/* ---------- home: brands, ways in, categories, campaign, strips, the terms strip ---------- */
.section-head .editorial-eyebrow{margin:0 0 10px}
#brandrail{padding:28px 0 20px;background:var(--sheet);border-block:1px solid var(--rule)}
#brandrail .section-head{margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
#brandrail .accent-rule{display:none}
#brandrail .section-head h2{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:lang(th) #brandrail .section-head h2,html:lang(ar) #brandrail .section-head h2{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
#brandrail #allbrands{font-size:12px;color:var(--carbon)}
#buying-pathways{padding:56px 0 24px}
/* three ways in: a numbered sequence is wrong here (no order), so each is a labelled form box */
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.journey-card{position:relative;display:block;background:var(--sheet);border:1.5px solid var(--ink);border-radius:var(--radius-display);padding:20px 22px 18px;transition:background-color .15s ease}
.journey-card:hover{background:var(--tint)}
.journey-card:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.journey-number{display:none}
.journey-arrow{position:absolute;inset-inline-end:20px;top:18px;font-size:20px;color:var(--carbon)}
[dir=rtl] .journey-arrow{transform:scaleX(-1)}
.journey-card h3{font-size:var(--t-20);line-height:1.2;font-weight:600;margin:0 0 6px;padding-inline-end:28px}
.journey-card p{font-size:13px;color:var(--muted);margin:0 0 16px}
.journey-count{display:inline-block;font-size:12px;padding:3px 8px;border:1px solid var(--rule);border-radius:2px;font-weight:600;background:var(--tint)}
.journey-count [data-count]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#collections{padding-top:40px;padding-bottom:56px}
#collections .accent-rule{display:none}
#collections .section-head{margin-bottom:20px}
#campaign{max-width:1184px;margin:8px auto 40px;border:2px solid var(--ink);border-radius:var(--radius-display);background:var(--sheet)}
#campaign .hero-inner{padding:40px 40px 24px;min-height:420px}
#campaign .campaign-slide h2{font-size:var(--t-49);line-height:1.02;max-width:15ch}
html:lang(th) #campaign .campaign-slide h2,html:lang(ar) #campaign .campaign-slide h2{font-size:var(--t-39)}
#campaign .camp-body{font-size:14px;color:var(--ink-2);max-width:40ch}
#campaign .camp-cta .solid-btn{min-height:44px;display:inline-flex;align-items:center}
#campaign .camp-media{height:330px;max-height:330px;gap:12px}
#campaign .camp-media figure{background:var(--sheet);border-radius:2px}
#campaign .camp-media a{display:flex;flex-direction:column;height:100%;min-width:0;padding:14px;outline-offset:-3px}
#campaign .camp-media a:focus-visible{outline:3px solid var(--carbon)}
#campaign .camp-media img{height:1px;min-height:0;flex:1;width:100%;padding:0;background:transparent;mix-blend-mode:multiply}
/* home word budget: the photograph's link name carries the product; no caption under it */
.camp-product-name{display:none}
#campaign .campaign-nav{padding-top:24px}
body[data-view=home] #starthere,body[data-view=home] #starter{padding-top:40px;padding-bottom:44px}
body[data-view=home] #starthere .accent-rule,body[data-view=home] #starter .accent-rule{display:none}
body[data-view=home] #starter{background:var(--tint);border-block:1px solid var(--rule)}
body[data-view=home] #starthere .section-head h2,body[data-view=home] #starter .section-head h2{font-size:var(--t-31)}
body[data-view=home] #starthere-copy,body[data-view=home] #starter-rule{font-size:13px;color:var(--muted);margin-top:8px}
.card .card-media{background:var(--sheet)}
.card .card-media img{mix-blend-mode:multiply}
.card-add{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.card-add:hover{background:var(--carbon-deep);color:#fff}
#econband{margin-top:0;padding:56px 0}
#econband>.wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center}
#econband .accent-rule{background:var(--ink)}
#econband h2{font-size:var(--t-39);line-height:1.02;max-width:16ch}
#econband p{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:52ch}
#econband a{display:inline-block;margin-top:8px;color:var(--carbon);font-size:13px;font-weight:600}
/* the buying sequence: here the order is real (find → compare → request), so it is numbered */
.buying-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1.5px solid var(--ink);border-radius:var(--radius-display);background:var(--sheet)}
.buying-steps li{display:flex;gap:18px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--rule)}
.buying-steps li:last-child{border-bottom:0}
.step-number{font-family:var(--font-display);font-weight:800;font-size:var(--t-25);line-height:1;color:var(--ink);min-width:2ch}
.buying-steps h3{font-size:var(--t-16);line-height:1.3;font-weight:600;margin:0;color:var(--ink)}
#terms-strip{background:var(--sheet);padding:20px 0;border-block:1px solid var(--rule)}
#terms-strip .accent-rule{display:none}
#terms-strip .terms-line{font-size:12px;line-height:1.8;font-family:var(--font-mono);letter-spacing:.02em}
html:lang(th) #terms-strip .terms-line,html:lang(ar) #terms-strip .terms-line{font-family:var(--font-sans);letter-spacing:0}
#terms-strip .terms-line a{font-family:var(--font-sans);color:var(--carbon)}
#applyband{padding:48px 0 56px;text-align:center;background:var(--paper)}
#applyband .accent-rule{margin:0 auto 18px}
#applyband h2{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:clamp(31px,3.4vw,var(--t-39));line-height:1.05;max-width:22ch;margin:0 auto 20px}
#applyband p{font-size:14px;color:var(--muted);margin:0 auto 24px}
#applyband .btn-row{justify-content:center}
#applyband .btn-row a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot{padding:48px 0 28px}
.foot .wordmark,.foot .wordmark>span:last-child{color:var(--ink)}
.foot .wordmark>span:last-child{color:var(--carbon)}
.foot li{font-size:13px;margin-bottom:12px}
.foot a{color:var(--ink)}
.foot a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--carbon)}
.foot-cols{grid-template-columns:1.5fr 1fr 1.1fr}
.foot>.wrap>.note{font-size:11px;border-top:1px solid var(--rule);padding-top:22px;color:var(--ink-2)}

/* ---------- basket: lines on the left, the decision panel (the basket docket) on the right ---------- */
.basket-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:32px;align-items:start}
.basket-main{min-width:0}
.basket-decision{min-width:0;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--radius-display);padding:0 20px 20px;position:sticky;top:112px;
  /* a sticky panel taller than the viewport hides its foot (the clear confirmation, the below-minimum panel) until
     the page ends: cap it to the viewport and let it scroll inside; focus brings a control into view */
  max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain}
.basket-decision:has(#basket-summary[hidden]){display:none}
.basket-decision .basket-summary{margin:0;padding:0;border:0}
.basket-decision .bs-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:16px 0}
.basket-decision .bs-figures>div:last-child{grid-column:1/-1;padding-top:14px;border-top:1.5px solid var(--ink)}
.basket-decision .bs-v{font-size:20px}
.basket-decision .bs-figures>div:last-child .bs-v{font-size:31px}
.basket-decision #basket-actions{gap:10px}
.basket-decision #basket-actions>.solid-btn{flex-basis:100%;min-height:48px;font-size:15px}
.basket-decision #basket-actions>.ghost-outline{font-size:11.5px;padding:8px 10px;min-height:40px}
#basket-clear-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0}
#basket-clear-ask[hidden]{display:none}
#basket-clear-q{flex-basis:100%}
#basket-clear-ask button{min-height:44px;padding:10px 14px}
#basket-clear-ask button:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.basket-decision .co-warn-box{padding:14px;font-size:13px;background:var(--tint);border-width:1px}
#basket .basket-table{background:var(--sheet);border:1.5px solid var(--ink);border-radius:var(--radius-display);overflow:hidden;font-size:12.5px;border-collapse:separate;border-spacing:0}
#basket .bl-name img{width:68px;height:68px;object-fit:contain}
#basket .basket-table td{padding:14px 10px}
#basket .bl-name strong{font-weight:600}
#checkout .co-group-h{font-size:var(--t-20)}
#account .acct-h{font-weight:600}
#account .apply-form{border-radius:var(--radius-display)}

/* ---------- drawer layout: photo beside the buying summary, then the docket ---------- */
.drawer{width:min(920px,100%);border-inline-start:2px solid var(--ink);box-shadow:-10px 0 0 rgba(16,16,22,.08);background:var(--paper)}
.drawer-inner{padding:28px 32px 32px}
.drawer .close{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--sheet);border:1.5px solid var(--ink);z-index:3;right:auto;inset-inline-start:auto;inset-inline-end:16px}
.drawer-crumb{padding-inline-end:42px}
.drawer-product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start;margin:22px 0 24px}
.drawer-product .drawer-media{height:330px;width:100%;min-width:0;aspect-ratio:auto;max-height:none;margin:0;padding:20px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius-display)}
.drawer-product .drawer-media img{max-height:none;object-fit:contain;mix-blend-mode:multiply;padding:0}
.drawer-buying{min-width:0}
.drawer-buying h3{font-size:var(--t-25);line-height:1.15;font-weight:600;margin:0 0 10px}
.drawer-buying .drawer-head{border:0;padding:0;margin:12px 0;gap:10px}
.drawer-buying .price-wholesale{font-size:31px}
.drawer-buying .drawer-add{position:static;margin:16px 0 0;padding:0;background:none;border:0}
.drawer-buying .drawer-add .add-row{flex-wrap:wrap}
.drawer-buying .drawer-actions{gap:12px}
.drawer-buying .drawer-actions>*{font-size:12px;min-height:32px}
.drawer-buying .card-add{min-height:48px}
.drawer .drawer-body-note{font-size:12px;line-height:1.6}
.drawer .drawer-spec,.drawer .drawer-cost{padding:14px 0;border-bottom:1px solid var(--rule)}
.drawer .drawer-spec>summary,.drawer .drawer-cost>summary{color:var(--carbon);font-weight:600}
body.static .p-media img{mix-blend-mode:multiply}
body.static .p-purchase .p-add{background:var(--carbon);color:#fff}
@media(min-width:821px){.promo .wrap{justify-content:flex-end}}
@media(max-width:1100px){.basket-layout{grid-template-columns:1fr}.basket-decision{position:static;max-height:none;overflow:visible}.basket-decision .bs-figures{grid-template-columns:repeat(4,minmax(0,1fr))}.basket-decision .bs-figures>div:last-child{grid-column:auto;padding-top:0;border:0}}
@media(max-width:900px){#campaign{margin-inline:24px}.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>div:first-child{grid-column:1/-1}}
@media(max-width:700px){
 #brandrail{padding:20px 0}#brandrail .section-head{margin-bottom:12px}
 #buying-pathways{padding:32px 0 12px}.journey-grid{grid-template-columns:1fr;gap:10px}.journey-card{padding:16px 18px}.journey-card h3{font-size:18px;margin:0 0 4px}.journey-card p{font-size:12px;margin-bottom:10px}.journey-arrow{top:14px;inset-inline-end:16px;font-size:18px}
 #collections{padding:32px 0 36px}#collections .section-head h2{font-size:var(--t-25)}
 #campaign{margin:4px 16px 24px}#campaign .hero-inner{padding:24px 20px 16px;min-height:0}#campaign .campaign-slide{gap:18px}#campaign .campaign-slide h2{font-size:var(--t-31);max-width:17ch}#campaign .camp-body{font-size:13px}#campaign .camp-media{display:grid;height:150px;max-height:150px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;gap:8px}#campaign .camp-media figure:first-child{grid-row:auto}#campaign .camp-media a{padding:9px}.camp-product-name{font-size:9px;line-height:1.3}#campaign .campaign-nav{padding-top:14px}
 body[data-view=home] #starthere,body[data-view=home] #starter{padding-top:28px;padding-bottom:30px}body[data-view=home] #starthere .section-head h2,body[data-view=home] #starter .section-head h2{font-size:var(--t-25)}
 #econband{padding:36px 0}#econband>.wrap{grid-template-columns:1fr;gap:18px}#econband h2{font-size:var(--t-31)}#econband p{font-size:13px}.buying-steps li{padding:12px 16px}
 #terms-strip{padding:18px 0}#terms-strip .terms-line{font-size:11px}#applyband{padding:36px 0 40px}#applyband h2{font-size:var(--t-31)}#applyband .btn-row{gap:10px}
 .basket-layout{gap:20px}.basket-decision{padding:0 16px 16px}.basket-decision .bs-figures{grid-template-columns:repeat(3,minmax(0,1fr))}.basket-decision .bs-figures>div:last-child{grid-column:1/-1;padding-top:14px;border-top:1.5px solid var(--ink)}
 .drawer-inner{padding:24px 20px}.drawer-product{grid-template-columns:1fr;gap:20px;margin-top:16px}.drawer-product .drawer-media{height:220px;max-height:220px;min-height:0}.drawer-buying h3{font-size:22px}.drawer-buying .price-wholesale{font-size:27px}
 .foot{padding:36px 0 22px}.foot-cols{gap:28px 18px}.foot-cols>div:last-child{min-width:0}.foot a{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.journey-card,.showcase-product,#collections .tile{transition:none}}
@media print{.masthead{position:static}.basket-layout{display:block}.basket-decision{position:static;border:0;padding:0;max-height:none;overflow:visible}.drawer-product{display:block;margin:0}.drawer-product .drawer-media{height:120px;max-height:120px;padding:0;border:0}.drawer-buying h3{font-size:20px}.drawer-buying .drawer-add{display:none}.foot{background:white;color:black}}

/* Shortlist comparison: all rules scoped to comparison classes. */
.card-media { position: relative; }
.compare-toggle { position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:1; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 12px; border:1.5px solid var(--ink); border-radius:var(--radius-md); background:#fff; color:var(--ink); font:600 12px/1.2 var(--font-sans); cursor:pointer; }
.compare-toggle[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.drawer-actions .compare-toggle { position:static; }
.compare-toggle:focus-visible, .compare-section a:focus-visible, .compare-section button:focus-visible, .compare-scroll:focus-visible, .compare-tray a:focus-visible, .compare-tray button:focus-visible { outline:3px solid var(--carbon); outline-offset:3px; }
.compare-section { padding-block:40px 64px; }
.compare-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.compare-head h1,.compare-head h2 { margin:6px 0 12px; font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(31px,4vw,var(--t-49)); line-height:1.05; }
.compare-head .eyebrow { margin:0; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon); }
html:lang(th) .compare-head .eyebrow,html:lang(ar) .compare-head .eyebrow{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.compare-head a { min-height:44px; display:inline-flex; align-items:center; }
#compare-basis { max-width:850px; margin:8px 0 24px; line-height:1.65; }
.compare-scroll { overflow-x:auto; overscroll-behavior-inline:contain; border:1.5px solid var(--ink); border-radius:var(--radius-display); background:#fff; }
.compare-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px; font-variant-numeric:tabular-nums; }
.compare-table caption { text-align:start; padding:16px 20px; font-size:12px; color:var(--muted); }
.compare-table th, .compare-table td { padding:20px; vertical-align:top; text-align:start; border-block-end:1px solid var(--rule); border-inline-end:1px solid var(--rule); overflow-wrap:anywhere; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-block-end:0; }
.compare-table th:last-child, .compare-table td:last-child { border-inline-end:0; }
.compare-table .compare-label { width:180px; font-weight:600; background:var(--tint); }
.compare-table thead th { font-weight:400; }
.compare-table thead .compare-label { vertical-align:bottom; }
.compare-product-link { display:block; color:inherit; text-decoration:none; font-size:16px; font-weight:600; line-height:1.45; }
.compare-product-link img { display:block; width:100%; height:150px; object-fit:contain; margin-bottom:16px; }
.compare-brand { display:block; margin-bottom:6px; color:var(--carbon); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.compare-remove { min-height:44px; margin-top:8px; padding:8px 0; color:var(--carbon); border:0; background:none; font:400 12px var(--font-sans); text-decoration:underline; cursor:pointer; }
.compare-money { display:block; font-family:var(--font-mono); font-size:23px; font-weight:600; line-height:1.3; }
.compare-table .add-row { display:block; margin-top:14px; }
.compare-table .card-add { width:100%; white-space:normal; min-height:44px; }
.compare-table .tag-tier { display:inline-block; margin-bottom:8px; }
.compare-table .note { display:block; margin-top:6px; font-size:12px; line-height:1.55; }
.compare-table ul { margin:0; padding-inline-start:18px; font-size:12px; line-height:1.6; }
.compare-empty { padding:48px 24px; border:1.5px dashed var(--ink); border-radius:var(--radius-display); text-align:center; background:#fff; }
.compare-empty p { margin:0 0 20px; }
.compare-empty a { min-height:44px; display:inline-flex; align-items:center; }
.compare-tray { position:fixed; inset-inline:24px; bottom:20px; z-index:35; max-width:650px; margin-inline:auto; display:flex; gap:16px; align-items:center; padding:12px 16px; border:2px solid var(--ink); border-radius:var(--radius-display); background:#fff; color:var(--ink); box-shadow:6px 6px 0 var(--tint); font-size:14px; }
.compare-tray[hidden] { display:none; }
.compare-tray > span { flex:1; }
.compare-tray a, .compare-tray button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.compare-tray a { padding:10px 18px; text-align:center; }
.compare-status { position:fixed; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.compare-status.is-visible { inset-inline:12px; bottom:112px; z-index:80; width:auto; height:auto; max-width:620px; margin:0 auto; padding:14px 18px; border:1.5px solid var(--ink); border-radius:var(--radius-display); background:var(--tint); color:var(--ink); font-size:13px; line-height:1.5; white-space:normal; overflow:visible; clip-path:none; }
body.compare-active { padding-bottom:100px; }
@media(max-width:700px) {
  .compare-section { padding-block:24px 40px; }
  .compare-head { flex-direction:column; gap:4px; }
  .compare-table { min-width:var(--compare-table-width,740px); font-size:13px; }
  .compare-table .compare-label { width:112px; position:sticky; inset-inline-start:0; z-index:2; }
  .compare-table th, .compare-table td { padding:16px 12px; }
  .compare-product-link { font-size:14px; }
  .compare-product-link img { height:120px; }
  .compare-money { font-size:21px; }
  .compare-tray { inset-inline:12px; bottom:12px; padding:10px 12px; gap:10px; font-size:12px; }
  .compare-tray a { padding-inline:12px; }
  .compare-toggle { inset-block-start:8px; inset-inline-end:8px; padding-inline:10px; }
}
@media print { .compare-tray, .compare-toggle, .compare-status { display:none !important; } }

/* Added confirmation is nonmodal and has no timed dismissal. */
.basket-feedback{position:fixed;inset-inline-end:24px;bottom:24px;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;z-index:65;background:#fff;border:2px solid var(--ink);border-radius:var(--radius-display);box-shadow:6px 6px 0 var(--tint);padding:18px;color:var(--ink)}
.basket-feedback[hidden],.basket-undo[hidden]{display:none!important}
.basket-feedback-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.basket-feedback-title{font-size:16px;font-weight:600;margin:0}
.basket-feedback-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:1.5px solid var(--ink);border-radius:var(--radius-md);background:var(--sheet);font-size:22px;color:inherit;cursor:pointer}
.basket-feedback-product{display:flex;align-items:center;gap:14px}
.basket-feedback-product img{width:64px;height:72px;object-fit:contain;flex-shrink:0}
.basket-feedback-name{font-size:14px;line-height:1.45;font-weight:500;margin:0 0 4px;overflow-wrap:anywhere}
.basket-feedback-quantity{font-size:13px;color:var(--muted);margin:0}
.basket-feedback-earns{margin:12px 0 0;padding:10px 12px;background:var(--tint);border-inline-start:4px solid var(--keep);font-size:13px;line-height:1.5;color:var(--ink)}
.basket-feedback-earns b{font-family:var(--font-mono);color:var(--keep);font-variant-numeric:tabular-nums}
.basket-feedback-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.basket-feedback-actions>*{display:inline-flex;min-width:0;white-space:normal;align-items:center;justify-content:center;min-height:44px;flex:1;padding:10px 14px;text-align:center;font-size:13px;line-height:1.4}
.drawer>.basket-feedback{position:sticky;inset-inline:auto;bottom:16px;width:auto;margin:0 16px 16px;max-height:calc(100% - 32px);z-index:1}
body.co-lite .basket-feedback{display:none!important}
.basket-feedback :is(button,a):focus-visible,.bl-qty-step :is(button,input):focus-visible,.basket-undo button:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.bl-qty-step{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--radius-md);background:#fff;flex-shrink:0}
.bl-qty-step button{width:44px;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:2px;font:inherit;font-size:20px;cursor:pointer;color:var(--ink)}
.bl-qty-step button:disabled{opacity:.35;cursor:default}
.bl-qty-step .bl-qty{width:64px;border:0;min-height:44px;text-align:center;padding:6px;box-shadow:none}
@media(max-width:700px){#basket .basket-table td:has(.bl-qty-step){grid-column:1/-1}}
.basket-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--tint);border:1.5px solid var(--ink);border-radius:var(--radius-display);margin:0 0 20px}
.basket-undo p{flex:1 1 200px;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.basket-undo-actions{display:flex;gap:8px;align-items:center}
.basket-undo button{min-height:44px;padding:10px 14px;font-size:13px}
@media(max-width:700px){.basket-feedback{inset-inline:16px;bottom:16px;width:auto;padding:16px}.basket-feedback-product img{width:52px;height:60px}.basket-undo{align-items:flex-start}.basket-undo p{flex-basis:100%}}
@media print{.basket-feedback,.basket-undo,.bl-qty-step button{display:none!important}}
/* With the comparison tray open, use the top corner so both next steps remain reachable. */
body:has(#compare-tray:not([hidden]))>.basket-feedback{top:16px;bottom:auto;max-height:calc(100vh - 144px)}
.invoice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 24px}
.invoice-toolbar .note{margin:0;max-width:44em}
.invoice-toolbar button{min-height:44px;flex-shrink:0}
#acct-orders{display:grid;gap:20px}
#acct-orders .acct-order{display:block;padding:28px;border:1.5px solid var(--ink);border-radius:var(--radius-display);background:#fff;font-size:14px;min-width:0}
.invoice-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.invoice-heading>div{display:grid;gap:5px;min-width:0}
.invoice-heading .acct-order-ref{overflow-wrap:anywhere;font-family:var(--font-mono)}
.invoice-heading .chip{white-space:normal;text-align:end;flex-shrink:0;max-width:50%}
.invoice-progress{display:flex;list-style:none;padding:20px 0;margin:20px 0;border-block:1px solid var(--rule);gap:16px}
.invoice-progress li{flex:1;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;line-height:1.5}
.invoice-progress li>span{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border:1.5px solid var(--rule);border-radius:2px;font-family:var(--font-mono)}
.invoice-progress li[aria-current]{color:var(--ink);font-weight:600}
.invoice-progress li[aria-current]>span,.invoice-progress li.is-complete>span{background:var(--ink);color:white;border-color:var(--ink)}
.invoice-summary{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.acct-order-amount-label{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
#acct-orders .acct-order-total{display:block;font-family:var(--font-mono);font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.invoice-destination{display:grid;gap:4px;text-align:end;font-size:13px;min-width:0;overflow-wrap:anywhere;max-width:100%}
.acct-order-next{line-height:1.65;max-width:55em;margin:18px 0}
.invoice-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#acct-orders .invoice-actions>a,#acct-orders .invoice-actions>button{min-height:44px;padding:11px 18px;font-size:13px}
#acct-orders .acct-order-hold{display:block;margin:16px 0 0}
@media(max-width:600px){.invoice-toolbar{align-items:flex-start;flex-direction:column;gap:12px}#acct-orders .acct-order{padding:20px 16px}.invoice-progress{gap:10px}.invoice-progress li{align-items:flex-start;flex-direction:column;font-size:11px}.invoice-summary{align-items:flex-start;flex-direction:column}.invoice-destination{text-align:start}#acct-orders .acct-order-total{font-size:26px}.invoice-actions{flex-direction:column;align-items:stretch}.invoice-actions>a,.invoice-actions>button{text-align:center}}

/* Passwordless account entry: one quiet, focused decision on one sheet. */
.entry-panel { max-width:640px; margin:20px auto 36px; padding:clamp(24px,4vw,44px); background:var(--sheet); border:2px solid var(--ink); border-radius:var(--radius-display); box-shadow:8px 8px 0 var(--tint); }
.entry-eyebrow { display:block; color:var(--carbon); font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
html:lang(th) .entry-eyebrow,html:lang(ar) .entry-eyebrow{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.entry-panel h3 { font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(31px,3.4vw,var(--t-39)); line-height:1.05; margin:0 0 14px; }
.entry-intro { font-size:16px; line-height:1.6; color:var(--ink-2); margin:0 0 24px; }
.entry-form { display:grid; gap:12px; }
.entry-form .field { margin:0; }
.entry-form input { width:100%; min-height:50px; background:#fff; border-radius:var(--radius-md); font-size:16px; }
.entry-form button[type="submit"] { min-height:50px; width:100%; border-radius:var(--radius-md); font-size:15px; white-space:normal; }
.entry-form button:disabled { opacity:.7; cursor:default; }
.entry-status { margin:0; line-height:1.6; overflow-wrap:anywhere; }
.entry-status:empty { display:none; }
.entry-form .entry-edit-email { min-height:44px; padding:8px 0; justify-self:start; text-decoration:underline; text-underline-offset:3px; }
.entry-benefits { margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--rule); list-style:none; display:grid; gap:12px; }
.entry-benefits li { display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.45; }
.entry-benefits li::before { content:''; width:12px; height:12px; flex:0 0 12px; border:1.5px solid var(--ink); background:var(--tint); }
.entry-assurance { margin:22px 0 0; font-size:12px; line-height:1.65; color:var(--muted); }
.entry-guest { border-top:1px solid var(--rule); padding-top:16px; margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.entry-guest button { min-height:44px; padding:8px 0; text-decoration:underline; text-underline-offset:3px; }
.entry-profile { max-width:820px; margin:24px 0 40px; }
.entry-profile.is-initial { border:1.5px solid var(--ink); padding:clamp(20px,3vw,32px); border-radius:var(--radius-display); background:var(--sheet); }
.entry-profile-prompt { padding-bottom:18px; margin:0 0 22px; border-bottom:1px solid var(--rule); font-size:15px; line-height:1.6; }
.entry-profile .field input,.entry-profile .field select,.entry-initial-profile select { min-height:46px; font-size:16px; }
.entry-profile button { min-height:46px; }
.entry-optional { margin:8px 0 18px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.entry-optional summary { min-height:48px; padding:14px 0; cursor:pointer; font-size:13px; font-weight:600; color:var(--carbon); }
.entry-optional[open] summary { margin-bottom:14px; }
.entry-initial-profile { margin:16px 0; }
.entry-initial-profile .field { max-width:480px; }
.entry-panel [aria-invalid="true"],.entry-profile [aria-invalid="true"],.entry-initial-profile [aria-invalid="true"] { border-color:var(--seal); outline:1px solid var(--seal); }
@media(max-width:600px) { .entry-panel { margin:8px 0 24px; padding:24px 20px; box-shadow:none; } .entry-profile .field-row { grid-template-columns:1fr; } .entry-profile.is-initial { padding:22px 18px; } .entry-guest .note { display:block; } }
@media(max-width:600px) { #account.section { padding-top:32px; } }

/* Brand payment and delivery terms stay readable on a phone. */
@media(max-width:640px){
  .page-brand table.econ{min-width:0}
  .page-brand table.econ tbody tr{display:block;padding:12px var(--spacing-16);border-bottom:1px solid var(--rule)}
  .page-brand table.econ tbody tr:last-child{border-bottom:0}
  .page-brand table.econ td{display:block;padding:0;border:0;text-align:start;white-space:normal}
  .page-brand table.econ td:first-child{margin-bottom:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* ============================================================
   THE COST DOCKET — the signature element (PLAN.md)
   A framed sheet with an ink reference strip, six numbered boxes in the order money accumulates,
   the retail basis as a stamp, the case line on the form tint, the line's JAN as an EAN-13.
   Used by the home hero, the drawer, the basket decision panel (.docket--basket) and /p/ (.p-docket).
   ============================================================ */
.docket{background:var(--sheet);border:2px solid var(--ink);border-radius:var(--radius-display);overflow:hidden;font-variant-numeric:tabular-nums;color:var(--ink)}
.dk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;background:var(--ink);color:#fff;padding:9px 14px 8px}
.dk-title{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-20);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
html:lang(th) .dk-title,html:lang(ar) .dk-title{text-transform:none;letter-spacing:0;font-size:17px}
.dk-ref,.dk-route{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}
.dk-route{margin-inline-start:auto;opacity:.92}
html:lang(th) .dk-route,html:lang(ar) .dk-route{font-family:var(--font-sans)}
.dk-rows{margin:0;padding:0;display:grid}
.dk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch;padding-inline-end:14px;border-bottom:1px solid var(--rule);min-height:42px}
.dk-row dt{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.35;min-width:0}
.dk-row dd{margin:0;display:flex;align-items:center;justify-content:flex-end;font-family:var(--font-mono);font-size:15px;font-weight:600;white-space:nowrap}
.dk-n{align-self:stretch;flex:none;display:grid;place-items:center;width:36px;background:var(--tint);border-inline-end:1.5px solid var(--ink);
  font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-20);line-height:1;color:var(--ink)}
.dk-l{padding:9px 0;min-width:0}
.dk-l .stamp{margin-inline-start:8px;vertical-align:1px}
.dk-op{color:var(--muted);font-weight:400;margin-inline-end:8px}
.dk-row.dk-total{border-top:1.5px solid var(--ink);background:var(--paper)}
.dk-row.dk-total dt{font-weight:600}
.dk-row.dk-total dd{font-size:17px}
.dk-row.dk-margin dt{font-weight:600}
.dk-row.dk-margin dd{color:var(--keep);font-size:var(--t-31);letter-spacing:-.02em}
.dk-row.dk-aside{min-height:0;padding-inline-start:48px;background:var(--sheet)}
.dk-row.dk-aside dt{font-size:12px;color:var(--muted)}
.dk-row.dk-aside .dk-l{padding:6px 0}
.dk-row.dk-aside dd{font-size:13px;color:var(--ink-2)}
.dk-fx{margin:0;padding:8px 14px;font-size:11.5px;line-height:1.5;color:var(--muted);background:var(--paper);border-bottom:1px solid var(--rule)}
.dk-case{margin:0;padding:12px 14px;font-size:13px;line-height:1.55;background:var(--tint);border-top:1.5px solid var(--ink)}
.dk-rows+.dk-case,.dk-fx+.dk-case{border-top:0}
.dk-case b{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.dk-case .dk-kept{color:var(--keep)}
.dk-jan{display:flex;align-items:center;gap:12px;padding:10px 14px 8px;border-top:1px dashed var(--rule);direction:ltr}
.dk-jan-k{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.ean13{display:block;width:150px;height:auto;fill:var(--ink);font-family:var(--font-mono);font-size:8.5px;direction:ltr}
.ean13 text{fill:var(--ink)}
.docket.is-jpy .dk-head{background:var(--ink-2)}
.dk-toggle{margin:8px 0 0}
.dk-toggle button{text-decoration:underline;text-underline-offset:3px;font-size:12px}
/* the drawer docket sits on the paper under the buying summary */
.drawer .docket-wrap{border:0;background:none;overflow:visible}
/* the one motion (PLAN.md): a docket's figures fade in when it is drawn — on a market change the whole docket is
   re-drawn, so the new figures cross in over 150ms. Nothing moves under prefers-reduced-motion. */
@keyframes dk-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){.docket dd bdi{animation:dk-in .15s ease-out}}
@media(max-width:420px){
  .dk-row dt{font-size:12.5px;gap:10px}
  .dk-n{width:30px;font-size:17px}
  .dk-row dd{font-size:14px}
  .dk-row.dk-margin dd{font-size:var(--t-25)}
  .dk-row.dk-aside{padding-inline-start:40px}
  .dk-route{margin-inline-start:0;flex-basis:100%}
}

/* the basket docket: what the basket earns at the suggested retail, summed from its lines */
.docket--basket{margin:0 -20px 0;border-width:0 0 2px;border-radius:0}
.docket--basket .dk-row{padding-inline-start:14px}
.docket--basket .dk-basis{margin:0;padding:10px 14px;font-size:12px;line-height:1.5;color:var(--muted);background:var(--paper)}
@media(max-width:700px){.docket--basket{margin:0 -16px}}
/* the margin row's label is long and its figure is the largest on the sheet: side by side they squeezed the label
   into a three-to-five-line column (430px panel, 375px phone). Label above, sum below, like the foot of an invoice. */
.docket--basket .dk-row.dk-margin{grid-template-columns:minmax(0,1fr);row-gap:0;padding-block:8px 10px}
.docket--basket .dk-row.dk-margin dd{justify-content:flex-end}

/* /p/: the docket for four destinations — one row per market, the six boxes as numbered columns */
.p-docket{margin:0 0 8px}
body.static .p-docket .dk-title{margin:0;font-size:var(--t-20);line-height:1.1}
table.econ.p-margin td:first-child{min-width:190px}
.p-docket .dk-head{border-radius:var(--radius-display) var(--radius-display) 0 0}
.p-docket .econ-wrap{border-width:0 2px 2px;border-radius:0 0 var(--radius-display) var(--radius-display);border-color:var(--ink)}
table.econ.p-margin{min-width:0}
table.econ.p-margin thead th{vertical-align:bottom;text-align:right;line-height:1.3}
table.econ.p-margin thead th:first-child{text-align:left}
table.econ.p-margin thead .dk-n{display:inline-grid;width:24px;height:24px;font-size:15px;border:1.5px solid var(--ink);margin-inline-end:6px;vertical-align:middle}
table.econ.p-margin td{font-family:var(--font-mono);font-weight:600;vertical-align:top;white-space:nowrap}
table.econ.p-margin td:first-child{font-family:var(--font-sans);white-space:normal}
table.econ.p-margin td:first-child strong{display:block;font-size:14px}
table.econ.p-margin td.p-m{color:var(--keep);font-size:20px}
table.econ.p-margin td.p-l{background:var(--paper)}
/* FD2: import VAT sits beside the landed cost, never in it — set apart, lighter, no box number */
table.econ.p-margin th,table.econ.p-margin td{padding-inline:10px}   /* ten columns at 1280 (FD2) */
table.econ.p-margin td.p-vat,table.econ.p-margin thead th.p-vat{font-weight:400;color:var(--ink-2);border-inline-start:1px dashed var(--rule)}
.p-docket .p-vat-note{margin:6px 0 0}
/* the drawer carries two more boxes (documents, VAT) inside the same 1500px budget (W1-10) */
#drawer .dk-row{min-height:34px}
#drawer .dk-l{padding:7px 0}
#drawer .dk-row.dk-aside{min-height:0}
#drawer .dk-row.dk-aside .dk-l{padding:4px 0}
table.econ.p-margin td.p-casecell{font-family:var(--font-sans);font-weight:400;white-space:normal;font-size:12px;line-height:1.5;text-align:left;min-width:180px}
table.econ.p-margin td.p-casecell b{font-family:var(--font-mono);font-weight:600}
table.econ.p-margin td.p-casecell .dk-kept{color:var(--keep)}
.p-docket-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:12px 0 0}
.p-docket-foot .stamps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.p-docket-foot .stamp-k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.p-docket-foot .stamp-basis{display:inline-block;border:1px solid var(--rule);background:var(--sheet);border-radius:2px;padding:2px 8px;font-size:12px}
.p-docket-foot .dk-jan{border:0;padding:0;margin-inline-start:auto}
.p-docket .p-fx{margin:10px 0 0}
@media screen and (max-width:1000px){
  /* six money columns cannot fit a phone: each market becomes its own small docket, every cell
     naming its box from data-label, nothing scrolls sideways */
  table.econ.p-margin,table.econ.p-margin tbody{display:block;width:100%}
  table.econ.p-margin thead{display:none}
  table.econ.p-margin tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:2px solid var(--ink)}
  table.econ.p-margin tbody tr:last-child{border-bottom:0}
  table.econ.p-margin td{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border-bottom:1px solid var(--rule);text-align:right;white-space:normal}
  table.econ.p-margin td::before{content:attr(data-label);font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.04em;color:var(--muted);text-align:left}
  table.econ.p-margin td:first-child{grid-column:1/-1;display:block;background:var(--tint);text-align:left}
  table.econ.p-margin td:first-child::before{content:none}
  table.econ.p-margin td.p-casecell{grid-column:1/-1;display:block;min-width:0}
  table.econ.p-margin td.p-vat{grid-column:1/-1;border-inline-start:0}
  table.econ.p-margin td.p-casecell::before{content:none}
  table.econ.p-margin td.p-m{font-size:17px}
}
@media print{
  .p-docket-foot .dk-jan{display:none}
  table.econ.p-margin td.p-casecell{display:none}
  table.econ.p-margin thead th:last-child{display:none}
}

/* ============================================================
   newdesign-1027 — the new Tokyo Beyond Wholesale look, as a presentation layer.
   Warm paper + ink + signal orange; a dark trade bar, economics band and footer; a collage hero.
   Tokens are in :root above; everything here is selectors only. No data, copy or route changes.
   ============================================================ */
/* actions: signal orange with ink text (5.5:1); hover flips to ink */
.solid-btn,.card-add{background:var(--signal);color:var(--ink);border-color:var(--signal);font-weight:700}
.solid-btn:hover,.card-add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ghost-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:1px solid currentColor;
  background:none;color:var(--ink);font-size:14px;font-weight:700;border-radius:0}
.text-link::after{content:'\2192';margin-inline-start:8px;transition:transform .16s ease-out}
[dir=rtl] .text-link::after{content:'\2190'}
.text-link:hover{color:var(--carbon)}
.text-link:hover::after{transform:translateX(3px)}
[dir=rtl] .text-link:hover::after{transform:translateX(-3px)}
.rail-arrow:hover:not(:disabled){background:var(--ink);color:#fff}

/* trade bar: the strip above the masthead, on ink */
.promo{background:var(--ink);color:#fff;border-bottom:0;padding:4px 0}
.promo .wrap{min-height:36px;gap:24px}
.trade-line{margin:0;min-width:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
html:lang(th) .trade-line,html:lang(ar) .trade-line,html:lang(vi) .trade-line{font-family:var(--font-sans);letter-spacing:0;text-transform:none;font-size:11.5px}
.trade-line a{color:var(--signal);margin-inline-start:10px}
.trade-line a:hover{color:#fff}
.promo .head-market{color:#fff}
.promo .head-market select,.promo .lang-select{background:var(--ink);color:#fff;border-color:rgba(255,255,255,.4)}
.promo .lang-select select{color:#fff}
.promo .lang-select select option,.promo .head-market select option{color:var(--ink);background:#fff}
.promo .lang-select:hover{background:#26262e}
.promo :focus-visible{outline-color:var(--signal)}
@media(max-width:1180px){.trade-line{display:none}.promo .wrap{justify-content:flex-end}}
@media(max-width:820px){.promo-prefs{padding:2px 0}}

/* masthead + catalogue nav on paper */
.masthead{background:var(--paper);border-bottom:1px solid var(--ink)}
.searchfield{border-width:1px;border-radius:0;background:var(--sheet)}
.wordmark>span:last-child{color:var(--ink);opacity:.72}
.catnav{background:var(--paper);border-bottom:1px solid var(--ink)}
.catnav a:hover{text-decoration-color:var(--signal)}
.catnav a[aria-current="page"]{text-decoration-color:var(--signal)}
.catnav-cue{background:var(--paper)}
.catnav-l2{background:var(--tint)}
.masthead .solid-btn,.masthead .ghost-outline{border-radius:0}

/* hero: copy left; collage + costed line right */
.promise{padding:56px 0 72px;background:var(--paper)}
.promise-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.promise-copy{padding-top:0;max-width:640px}
.promise-visual{min-width:0;display:grid;gap:14px;align-content:start}
.editorial-eyebrow{color:var(--ink-2)}
.editorial-eyebrow::before{background:var(--signal);width:8px;height:8px}
.promise-h1{font-size:clamp(46px,5.6vw,84px);font-weight:700;letter-spacing:-.05em;line-height:.96;max-width:11ch;margin-bottom:26px}
html:lang(th) .promise-h1,html:lang(ar) .promise-h1{font-size:clamp(34px,4vw,56px);line-height:1.2;max-width:16ch;letter-spacing:0}
html:lang(vi) .promise-h1{font-size:clamp(40px,4.8vw,70px)}
.promise-sub{font-size:18px;line-height:1.58;color:var(--ink-2);max-width:52ch;margin-bottom:0}
#promise .hero-cta{margin-top:28px;gap:12px 20px;align-items:center}
#promise .hero-cta a{min-height:48px}
#promise .hero-cta .solid-btn,#promise .hero-cta .ghost-outline{padding:0 22px;border-radius:0;font-weight:700}
#promise .hero-cta .solid-btn::after{content:none}
#promise .hero-cta .ghost-outline{background:transparent;border:1px solid var(--ink)}
#promise .hero-cta .ghost-outline:hover{background:var(--ink);color:#fff}
.facts-line{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.facts-line span[id]{font-size:18px;color:var(--ink);letter-spacing:-.02em}
.storefront-showcase{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);grid-template-rows:150px 150px;gap:12px;margin-top:0;max-width:none}
.showcase-product{position:relative;height:auto;padding:0;border-radius:0;border-color:var(--rule);background:var(--sheet)}
.showcase-product:first-child{grid-row:1 / 3}
.showcase-product img{padding:16px;mix-blend-mode:multiply;transition:transform .26s ease-out}
.showcase-product:hover img{transform:scale(1.035)}
.showcase-product:hover{border-color:var(--ink)}
.storefront-showcase{counter-reset:sc}
.showcase-product{counter-increment:sc}
.showcase-caption{display:inline-flex;position:absolute;inset-inline-start:10px;bottom:10px;max-width:calc(100% - 20px);gap:8px;align-items:center;
  padding:4px 8px;background:var(--paper);font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;line-height:1.3}
.showcase-caption>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.showcase-caption>span:last-child{color:var(--carbon)}
.showcase-product::before{content:counter(sc,decimal-leading-zero);position:absolute;top:8px;inset-inline-start:10px;z-index:1;
  font-family:var(--font-mono);font-size:10px;color:var(--ink-2)}
.hero-docket-k{color:var(--ink-2)}
.hero-docket-line{border-width:1px;border-bottom:0;border-radius:0;background:var(--sheet)}
.docket{border-width:1px;border-radius:0;background:var(--sheet)}
.hero-docket .docket{border-radius:0}
.dk-head{background:var(--ink)}
.dk-title{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.08em}
.dk-n{background:var(--tint)}
.dk-row.dk-total{background:var(--tint)}
.docket.is-jpy .dk-head{background:#2b2830}
.dk-case{background:var(--tint)}
@media(max-width:1000px){
  .promise-layout{grid-template-columns:1fr;gap:36px}
  .promise-visual{max-width:640px}
}
@media(max-width:700px){
  .promise{padding:28px 0 40px}
  .promise-h1{font-size:46px;max-width:11ch;margin-bottom:16px}
  html:lang(th) .promise-h1,html:lang(ar) .promise-h1{font-size:32px}
  .promise-sub{font-size:16px}
  #promise .hero-cta{margin-top:20px}
  #promise .hero-cta .solid-btn,#promise .hero-cta .ghost-outline{flex:1 1 100%;font-size:14px}
  #promise .hero-cta .text-link{flex:1 1 100%}
  .facts-line{margin-top:24px}
  .storefront-showcase{grid-template-rows:120px 120px;gap:8px}
}

/* brands: a ruled row of square marks */
#brandrail{background:var(--paper);border-block:1px solid var(--ink);padding:40px 0 32px}
#brandrail .section-head h2{color:var(--ink-2)}
.brandrail{gap:0;border-inline-start:1px solid var(--rule)}
.brandcircle{width:148px;gap:10px;padding:14px 12px;border-inline-end:1px solid var(--rule);border-block:1px solid var(--rule);background:var(--sheet)}
.brandcircle .disc{width:100%;height:86px;border-radius:0;border:0;padding:4px}
.brandcircle:hover{background:var(--tint);box-shadow:inset 0 0 0 2px var(--signal)}
.brandcircle:hover .disc{border-color:transparent}
.brandcircle .cname{font-weight:600}

/* ways in + categories */
.journey-card{border-width:1px;border-radius:0}
.journey-card:hover{background:var(--tint);box-shadow:inset 0 0 0 2px var(--signal)}
.journey-arrow{color:var(--carbon)}
.tilegrid{counter-reset:tl}
.tile{position:relative;border-radius:0;counter-increment:tl;background:var(--paper)}
.tile::before{content:counter(tl,decimal-leading-zero);position:absolute;top:10px;inset-inline-end:12px;z-index:1;font-family:var(--font-mono);font-size:10px;color:var(--ink-2)}
.tile:hover{border-color:var(--rule);background:var(--tint);box-shadow:inset 0 0 0 2px var(--signal)}
.tile-media{background:transparent}
#collections{background:var(--sheet);border-block:1px solid var(--ink);padding-top:56px}
.card{border-radius:0}
.card .card-media{background:var(--sheet)}

/* campaign: a full-width band on the warm tint */
#campaign{max-width:none;margin:0;border:0;border-block:1px solid var(--ink);border-radius:0;background:var(--tint)}
#campaign .hero-inner{max-width:var(--page-max-width)}
#campaign .campaign-slide h2{font-weight:600;letter-spacing:-.045em}
#campaign .camp-media figure{background:var(--sheet);border-radius:0}
.camp-eyebrow{color:var(--ink-2)}
.camp-arrow{border-radius:0;border-width:1px}
.camp-arrow:hover{background:var(--ink);color:#fff}
.camp-dot[aria-selected="true"]{background:var(--signal)}
body[data-view=home] #starter{background:var(--paper)}

/* economics: the dark band */
#econband{background:var(--ink);color:#fff;border-block:0;padding:84px 0}
#econband .accent-rule{background:var(--signal)}
#econband h2{color:#fff;font-weight:500;letter-spacing:-.05em;max-width:14ch}
#econband p{color:rgba(255,255,255,.78)}
#econband a{color:var(--signal);border-bottom:1px solid currentColor}
#econband a:hover{color:#fff}
#econband .buying-steps{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.22);border-radius:0}
#econband .buying-steps li{border-bottom:1px solid rgba(255,255,255,.22);padding:22px 4px}
#econband .step-number{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--signal)}
#econband .buying-steps h3{color:#fff;font-size:20px;font-weight:600;letter-spacing:-.02em}
@media(max-width:820px){#econband{padding:48px 0}#econband>.wrap{grid-template-columns:minmax(0,1fr);gap:32px}}

/* terms strip: ruled facts, then the link as a dark block */
#terms-strip{background:var(--paper);border-block:0;border-bottom:1px solid var(--ink);padding:24px 0}
#terms-strip .terms-line{font-size:12px;text-transform:uppercase;color:var(--ink)}
html:lang(th) #terms-strip .terms-line,html:lang(ar) #terms-strip .terms-line,html:lang(vi) #terms-strip .terms-line{text-transform:none}
#terms-strip .terms-line a{color:var(--carbon);font-weight:700}

/* closing: left-aligned, large */
#applyband{background:var(--paper);text-align:start;padding:76px 0 84px}
#applyband .accent-rule{display:none}
#applyband h2{font-size:clamp(40px,4.6vw,68px);font-weight:600;letter-spacing:-.055em;line-height:1;max-width:12ch;margin:0 0 28px}
#applyband .btn-row{justify-content:flex-start}
#applyband .btn-row a{border-radius:0;min-height:48px;padding:0 22px;font-weight:700}
#applyband .btn-row .ghost-outline{background:transparent;border:1px solid var(--ink)}
#applyband .btn-row .ghost-outline:hover{background:var(--ink);color:#fff}
@media(max-width:700px){#applyband{padding:48px 0 56px}#applyband .btn-row a{flex:1 1 100%;justify-content:center}}

/* footer: ink */
.foot{background:var(--ink);color:rgba(255,255,255,.8);border-top:0;padding:64px 0 28px}
.foot .wordmark,.foot .wordmark>span:last-child,.foot .logo-lockup,.foot .logo-mark{color:#fff}
.foot .wordmark>span:last-child{color:var(--signal);opacity:1}
.foot h4{color:var(--signal);font-family:var(--font-mono);font-weight:500;letter-spacing:.08em}
html:lang(th) .foot h4,html:lang(ar) .foot h4,html:lang(vi) .foot h4{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.foot a{color:rgba(255,255,255,.88)}
.foot a:hover{color:var(--signal);text-decoration:underline}
.foot li{font-size:13px}
.foot .muted,.foot .note{color:rgba(255,255,255,.66)}
.foot>.wrap>.note{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.66)}
.foot-legal a{text-decoration:underline;text-underline-offset:3px}
.foot :focus-visible{outline-color:var(--signal)}
/* newdesign-1027: grid tracks may shrink below min-content (long Thai/Vietnamese category names, WebKit) */
.tilegrid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.tilegrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{min-width:0}.tile-name{min-width:0;overflow-wrap:anywhere;word-break:normal}