/* ===== app.css ===== */
/* ==========================================================================
   A-LIFESTYLE AT EAZE, shared base stylesheet.
   Tokens, chrome, product card, layout primitives and the utility set every
   page part builds on. build.py concatenates this file first, then every
   page part and module part, in the order listed in tools/build.py.
   Never restate a token in a later part. Client brand only, no third party
   marks. Anton, Archivo, Space Mono, all self hosted.
   ========================================================================== */

/* ---- fonts ---- */
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url("/assets/fonts/anton-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url("/assets/fonts/archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url("/assets/fonts/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url("/assets/fonts/archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url("/assets/fonts/archivo-700.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("/assets/fonts/spacemono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:url("/assets/fonts/spacemono-700.woff2") format("woff2")}

/* ---- tokens · bright-first gen-z system (volt + grape) ---- */
:root{
  --bg:#F7F4EB; --bg-2:#FFFDF6; --bg-3:#FFFFFF; --bg-4:#F0ECDF;
  --line:rgba(19,16,28,.12); --line-2:rgba(19,16,28,.22);
  --fg:#14111C; --fg-2:#4E4960; --fg-3:#6B6579;
  --flare:#C9F73A; --flare-2:#B9EC26; --on-flare:#14111C;        /* volt: fills, CTAs, bar */
  --acc:#6E3AFF; --acc-2:#5B28EA; --on-acc:#FFFFFF;              /* grape: text accents, active states */
  --grape:#6E3AFF; --grape-2:#8B5CFF; --on-grape:#FFFFFF;
  --pink:#FF3D93; --on-pink:#1A0A12; --sun:#FFC93C; --on-sun:#14111C;
  --good:#1E9C55; --good-bg:rgba(30,156,85,.13);
  --warn:#C07E08; --warn-bg:rgba(192,126,8,.14);
  --bad:#E0325C; --bad-bg:rgba(224,50,92,.12);
  --info:#3E63E8; --info-bg:rgba(62,99,232,.12);
  /* state colours are calibrated for fills. Small text on a pale ground uses
     the ink pair, which clears WCAG AA against --bg and --bg-2 in both themes. */
  --good-ink:#147A40; --warn-ink:#8A5A00; --bad-ink:#C1173F; --info-ink:#2F51D6;
  /* Text pairing rule, checked in both themes: --fg-3 is a label tone that
     clears AA on --bg and --bg-2 only. It fails on --bg-3 in the dark theme
     (4.43:1). Any small text that can sit on a --bg-3 ground, including on
     hover, uses --fg-2 instead. */
  --card:var(--bg-2); --elev:0 1px 0 rgba(19,16,28,.04), 0 22px 44px -30px rgba(24,18,48,.30);
  --radius:16px; --radius-s:11px; --radius-l:24px;
  --font-d:"Anton",Impact,sans-serif;
  --font-u:"Archivo",system-ui,sans-serif;
  --font-m:"Space Mono",ui-monospace,monospace;
  --wrap:1240px; --gutter:clamp(16px,4vw,40px);
  --hdr:64px;
}
[data-theme="dark"]{
  --bg:#0F0C1A; --bg-2:#161226; --bg-3:#1E1832; --bg-4:#282040;
  --line:rgba(244,241,250,.11); --line-2:rgba(244,241,250,.19);
  --fg:#F4F1FA; --fg-2:#B9B3CC; --fg-3:#847E9E;
  --flare:#C9F73A; --flare-2:#D8FF57; --on-flare:#12101A;
  --acc:#C9F73A; --acc-2:#D8FF57; --on-acc:#12101A;              /* volt carries accents at night */
  --grape:#7C4DFF; --grape-2:#9B75FF; --on-grape:#FFFFFF;
  --pink:#FF5FAB; --on-pink:#1A0A12; --sun:#FFD34F; --on-sun:#14111C;
  --good:#4ECB86; --good-bg:rgba(78,203,134,.14);
  --warn:#F2BC45; --warn-bg:rgba(242,188,69,.14);
  --bad:#FF5C7E; --bad-bg:rgba(255,92,126,.14);
  --info:#6C8CFF; --info-bg:rgba(108,140,255,.14);
  --good-ink:#4ECB86; --warn-ink:#F2BC45; --bad-ink:#FF5C7E; --info-ink:#8DA6FF;
  --elev:0 1px 0 rgba(244,241,250,.04), 0 22px 48px -30px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-u);font-size:16px;line-height:1.55;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--flare);color:var(--on-flare)}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--flare);color:var(--on-flare);padding:10px 16px;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---- type helpers ---- */
.kicker{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.kicker.flare{color:var(--acc)}
.display{font-family:var(--font-d);font-weight:400;line-height:.9;letter-spacing:.006em;text-transform:uppercase}
h1,h2,h3,h4{margin:0;font-family:var(--font-u);font-weight:700;line-height:1.08;letter-spacing:-.01em}
.mono{font-family:var(--font-m)}
.price{font-family:var(--font-m);font-weight:700;letter-spacing:-.02em}
.was{font-family:var(--font-m);color:var(--fg-3);text-decoration:line-through;font-weight:400;margin-left:8px;font-size:.86em}
.muted{color:var(--fg-2)}
.dim{color:var(--fg-3)}

/* ---- announcement bar ---- */
.bar{background:var(--flare);color:var(--on-flare);font-family:var(--font-m);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden}
.bar .wrap{display:flex;align-items:center;justify-content:center;gap:34px;height:34px;white-space:nowrap}
.bar span{display:inline-flex;align-items:center;gap:10px}
.bar b{opacity:.55}

/* ---- header ----
   The sticky header sits below every body level layer. The stacking order for
   body level furniture is fixed by the contract and lives at the bottom of
   this file, in one block, so it can be read in one place. */
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand .m{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.brand .wm{font-family:var(--font-d);font-size:23px;letter-spacing:.02em;line-height:1;text-transform:uppercase}
.brand .wm b{color:var(--acc);font-weight:400}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-weight:600;font-size:14px;padding:9px 12px;border-radius:9px;color:var(--fg-2);position:relative;letter-spacing:.01em}
.nav a:hover{color:var(--fg);background:var(--bg-2)}
.nav a.on{color:var(--fg)}
.nav a .dot{position:absolute;top:6px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.hdr .sp{flex:1}
.tools{display:flex;align-items:center;gap:4px}
.ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--fg-2);position:relative}
.ic:hover{color:var(--fg);background:var(--bg-2)}
.ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic .badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--flare);color:var(--on-flare);font-family:var(--font-m);font-weight:700;font-size:10px;
  display:grid;place-items:center;line-height:1}
.ic .badge.is-zero{display:none}
.burger{display:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14px;letter-spacing:.02em;padding:12px 20px;border-radius:11px;
  border:1px solid var(--line-2);color:var(--fg);background:var(--bg-2);transition:transform .12s,background .18s,border-color .18s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-flare{background:var(--flare);color:var(--on-flare);border-color:transparent}
.btn-flare:hover{background:var(--flare-2)}
.btn-ink{background:var(--fg);color:var(--bg);border-color:transparent}
.btn-ghost{background:transparent}
.btn-lg{padding:15px 26px;font-size:15px}
.btn-sm{padding:8px 13px;font-size:12.5px;border-radius:9px}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{color:var(--acc);font-weight:700;border-bottom:2px solid transparent;transition:border-color .15s}
.link:hover{border-color:var(--acc)}

/* ---- tags / pills ---- */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:7px;background:var(--bg-4);color:var(--fg-2)}
.tag-new{background:var(--grape);color:var(--on-grape)}
.tag-sale{background:var(--pink);color:var(--on-pink)}
.tag-hot{background:var(--sun);color:var(--on-sun)}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.good{color:var(--good-ink);background:var(--good-bg);border-color:transparent}
.pill.warn{color:var(--warn-ink);background:var(--warn-bg);border-color:transparent}
.pill.bad{color:var(--bad-ink);background:var(--bad-bg);border-color:transparent}
.pill.info{color:var(--info-ink);background:var(--info-bg);border-color:transparent}

/* ---- sections ---- */
.section{padding-block:clamp(48px,7vw,92px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,4.4vw,44px)}
.sec-head .display{font-size:clamp(30px,5vw,52px)}

/* ---- product card ---- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--elev)}
/* The card is an <article>. The product name carries the only link, stretched
   across the card by ::after, so the whole tile is clickable while the card
   stays valid markup and the wishlist and add controls remain real buttons
   with their own tab stops above the stretched link. */
.pc-media{aspect-ratio:1/1;position:relative;display:grid;place-items:center;isolation:isolate;z-index:0}
.pc-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 8%,rgba(255,255,255,.14),transparent 55%),
  radial-gradient(120% 120% at 50% 120%,rgba(0,0,0,.28),transparent 60%);mix-blend-mode:soft-light;z-index:1}
.pc-media svg.gm{width:58%;height:58%;position:relative;z-index:2}
.pc-tags{position:absolute;top:11px;left:11px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
.pc-fav{position:absolute;top:9px;right:9px;z-index:4;width:34px;height:34px;border-radius:9px;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--fg)}
.pc-fav:hover{background:var(--bg-3)}
.pc-fav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
.pc-fav.on svg{fill:var(--pink);stroke:var(--pink)}
.pc-swatches{position:absolute;bottom:10px;left:11px;z-index:3;display:flex;align-items:center;gap:5px}
.pc-swatches i{width:14px;height:14px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--bg) 40%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.pc-swatches .more{font-family:var(--font-m);font-size:10px;font-weight:700;color:currentColor;opacity:.8}
.pc-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc-brand{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.pc-link{position:static}
.pc-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.pc-link:focus-visible{outline:none}
.pc-link:focus-visible::after{outline:2.5px solid var(--acc);outline-offset:-3px}
.pc-name{font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.pc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.pc-foot .price{font-size:15px}
.pc-rate{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-m);font-size:11px;color:var(--fg-2);white-space:nowrap}
.pc-rate svg{width:12px;height:12px;fill:var(--warn);stroke:none}
.pc-stock{margin:6px 0 0;font-family:var(--font-m);font-size:11px;letter-spacing:.04em;display:flex;align-items:center;gap:7px;color:var(--fg-3)}
.pc-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pc-stock.ok{color:var(--good-ink)}
.pc-stock.low{color:var(--warn-ink)}
.pc-stock.out{color:var(--fg-3)}
.pc-cta{position:relative;z-index:4;margin-top:10px;width:100%}
.card.is-out .pc-media{filter:saturate(.55)}
.card.is-out .pc-media svg.gm{opacity:.7}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding-block:clamp(40px,6vw,78px)}
.hero h1{font-family:var(--font-d);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:.004em;
  font-size:clamp(52px,10vw,124px)}
.hero h1 .fl{color:var(--acc)}
.hero .sub{max-width:44ch;color:var(--fg-2);font-size:clamp(15px,1.6vw,18px);margin:20px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-figure{position:relative;aspect-ratio:4/5;border-radius:var(--radius-l);border:1px solid var(--line-2);
  background:linear-gradient(155deg,var(--grape),var(--grape-2));display:grid;place-items:center;overflow:hidden;box-shadow:var(--elev)}
.hero-figure svg.gm{width:64%;height:64%;color:var(--flare);opacity:.92}
/* The figure ground is the grape gradient, which does not flip with the theme,
   so the stamp pairs with --on-grape, not --on-acc (--on-acc flips to near black
   at night and would sit on the same violet). White alone only reaches 4.14:1 at
   the light end of that gradient, so the stamp carries its own dark chip and no
   opacity, which holds above 10:1 across the whole gradient in both themes. */
.hero-figure .stamp{position:absolute;bottom:16px;left:16px;color:var(--on-grape);
  background:rgba(10,7,20,.62);border-radius:8px;padding:5px 9px;
  font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hero-figure .price-chip{position:absolute;top:16px;right:16px;background:var(--bg);color:var(--fg);
  border-radius:11px;padding:8px 12px;font-family:var(--font-m);font-weight:700;font-size:13px;box-shadow:var(--elev)}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.marquee .track{display:flex;flex-direction:row;align-items:center;gap:44px;white-space:nowrap;margin:0;padding:14px 0;
  width:max-content;font-family:var(--font-d);text-transform:uppercase;
  font-size:22px;letter-spacing:.03em;color:var(--fg-3);animation:mq 28s linear infinite}
.marquee .track b{color:var(--acc);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- category tiles ---- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{position:relative;aspect-ratio:1/1.08;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-2);display:flex;flex-direction:column;justify-content:space-between;padding:14px;overflow:hidden;transition:transform .16s,border-color .16s}
.cat:hover{transform:translateY(-3px);border-color:var(--acc)}
.cat svg.gm{width:52px;height:52px;color:var(--fg-2)}
.cat:hover svg.gm{color:var(--acc)}
.cat .nm{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.cat .ct{font-family:var(--font-m);font-size:10.5px;color:var(--fg-3)}

/* ---- editorial band ---- */
.band{background:var(--fg);color:var(--bg);border-radius:var(--radius-l);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.band .display{font-size:clamp(30px,4.6vw,54px)}
.band p{color:color-mix(in srgb,var(--bg) 78%,var(--fg));max-width:40ch}
.band .btn-flare{border-color:transparent}
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--bg-2)}
.feat .fi{width:42px;height:42px;border-radius:11px;background:var(--flare);color:var(--on-flare);display:grid;place-items:center;margin-bottom:14px}
.feat .fi svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:17px;margin-bottom:6px}
.feat p{color:var(--fg-2);font-size:14px;margin:0}

/* ---- newsletter ---- */
.news{border:1px solid var(--line-2);border-radius:var(--radius-l);padding:clamp(26px,4vw,48px);
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--flare) 16%,transparent),transparent 60%),var(--bg-2);text-align:center}
.news .display{font-size:clamp(28px,4.4vw,50px)}
.news form{display:flex;gap:10px;max-width:460px;margin:20px auto 0}
.field{width:100%}
.inp{width:100%;background:var(--bg-3);border:1px solid var(--line-2);border-radius:11px;padding:13px 15px;font-size:15px;color:var(--fg)}
.inp::placeholder{color:var(--fg-2)}   /* --bg-3 ground: --fg-3 fails AA in dark */
.inp:focus{border-color:var(--acc);outline:none}
label.lab{display:block;font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:24px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-block:52px}
.foot .big{font-family:var(--font-d);text-transform:uppercase;font-size:clamp(44px,7vw,84px);line-height:.86;letter-spacing:.01em}
.foot .big b{color:var(--acc);font-weight:400}
.foot .addr{color:var(--fg-2);font-size:14px;margin:16px 0 0;max-width:36ch}
.foot h4{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{color:var(--fg-2);font-size:14px}
.foot ul a:hover{color:var(--fg)}
.foot-meta{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-family:var(--font-m);font-size:11.5px;
  letter-spacing:.05em;color:var(--fg-2)}
.foot-meta svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--acc);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.foot-notes{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-direction:column;gap:10px}
.foot-notes .note{margin:0;max-width:78ch}
.foot-fine{margin:0;font-family:var(--font-m);font-size:11px;letter-spacing:.05em;color:var(--fg-3)}
.foot-bot{border-top:1px solid var(--line);padding-block:18px;display:flex;justify-content:space-between;
  align-items:center;gap:10px 22px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:11px;letter-spacing:.06em;color:var(--fg-3);text-transform:uppercase}
.foot-bot a{color:var(--fg-2)}
.foot-bot a:hover{color:var(--fg)}
.foot-btn{font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg-2);
  padding:0;border-bottom:1px solid var(--line-2)}
.foot-btn:hover{color:var(--fg);border-color:var(--acc)}

/* The credit line required by the contract. Its own line in the bottom row,
   ASCII hyphen, eVamb Labs hyperlinked, the address never shown as text. */
.foot-credit{flex:0 0 100%;order:9;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--font-m);font-size:11px;letter-spacing:.05em;text-transform:none;color:var(--fg-3)}
.foot-credit a{color:var(--acc);font-weight:700;border-bottom:1px solid transparent}
.foot-credit a:hover{border-color:var(--acc)}

/* ---- breadcrumb ---- */
.crumbs{font-family:var(--font-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-block:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--fg)}

/* ---- shop layout ---- */
.shop{display:grid;grid-template-columns:248px 1fr;gap:28px;align-items:start;padding-block:26px 70px}
.filters{position:sticky;top:calc(var(--hdr) + 16px);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:6px 18px 18px}
.fgroup{padding-block:16px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0}
.fgroup h4{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;
  border:1px solid var(--line-2);color:var(--fg-2);background:transparent;transition:color .14s,border-color .14s,background .14s}
.chip:hover{color:var(--fg);border-color:var(--fg-3)}
.chip.on{background:var(--flare);color:var(--on-flare);border-color:transparent}
.chip.sw{padding-left:9px;display:inline-flex;align-items:center;gap:7px}
.chip.sw i{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.shop-bar .count{font-family:var(--font-m);font-size:12.5px;color:var(--fg-2)}
.select{background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 34px 9px 13px;font-size:13.5px;font-weight:600;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23827D74' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.filter-toggle{display:none}
/* the select arrow must read in both themes */
[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B9B3CC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* ---- product detail ---- */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-block:20px 70px;align-items:start}
.pd-media{position:sticky;top:calc(var(--hdr) + 16px)}
.pd-hero{aspect-ratio:1/1;border-radius:var(--radius-l);border:1px solid var(--line-2);display:grid;place-items:center;position:relative;overflow:hidden}
.pd-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 5%,rgba(255,255,255,.12),transparent 55%);mix-blend-mode:soft-light}
.pd-hero svg.gm{width:56%;height:56%;position:relative;z-index:2}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumb{width:74px;height:74px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;background:var(--bg-2)}
.pd-thumb.on{border-color:var(--acc)}
.pd-thumb svg.gm{width:52%;height:52%}
.pd-info h1{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;margin:8px 0 10px}
.pd-price{display:flex;align-items:baseline;gap:4px;margin:14px 0 20px}
.pd-price .price{font-size:28px}
.opt-row{margin:20px 0}
.opt-row .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:52px;text-align:center;padding:11px 10px;border-radius:10px;border:1px solid var(--line-2);font-family:var(--font-m);font-weight:700;font-size:13px;transition:all .13s}
.size:hover{border-color:var(--fg-3)}
.size.on{background:var(--fg);color:var(--bg);border-color:transparent}
.size.out{opacity:.32;text-decoration:line-through;pointer-events:none}
.swatches{display:flex;gap:9px}
.sw-btn{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2);position:relative}
.sw-btn.on{box-shadow:0 0 0 2px var(--acc),0 0 0 4px var(--bg)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.qty button{width:42px;height:44px;font-size:18px;color:var(--fg-2)}
.qty button:hover{color:var(--fg);background:var(--bg-2)}
.qty input{width:44px;height:44px;text-align:center;background:transparent;border:0;font-family:var(--font-m);font-weight:700}
.buy-row{display:flex;gap:10px;margin:22px 0 18px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:16px 2px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{font-family:var(--font-m);color:var(--fg-3)}
.acc details[open] summary .pm{color:var(--acc)}
.acc .body{padding:0 2px 18px;color:var(--fg-2);font-size:14.5px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:var(--fg-2);font-size:13px}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{width:17px;height:17px;stroke:var(--acc);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- cart / checkout ---- */
.page-head{padding-block:30px 8px}
.page-head .display{font-size:clamp(34px,6vw,64px)}
.co{display:grid;grid-template-columns:1.4fr .8fr;gap:34px;padding-block:16px 70px;align-items:start}
.cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-line .th{width:88px;height:88px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg-2)}
.cart-line .th svg.gm{width:56%;height:56%}
.cart-line .meta .n{font-weight:700}
.cart-line .meta .v{font-family:var(--font-m);font-size:12px;color:var(--fg-3);margin-top:3px}
.cart-line .rm{font-family:var(--font-m);font-size:11px;color:var(--fg-3);margin-top:8px}
.cart-line .rm:hover{color:var(--bad-ink)}
.cart-line .qty{transform:scale(.86);transform-origin:right}
.summary{position:sticky;top:calc(var(--hdr) + 16px);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg-2);padding:22px}
.summary h3{font-size:18px;margin-bottom:16px}
.srow{display:flex;justify-content:space-between;padding:9px 0;font-size:14.5px;color:var(--fg-2)}
.srow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;color:var(--fg);font-weight:700;font-size:17px}
.srow .price{color:var(--fg)}
.promo{display:flex;gap:8px;margin:14px 0}
.steps{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.step{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:7px}
.step .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:10px}
.step.on{color:var(--fg)}.step.on .n{background:var(--flare);color:var(--on-flare);border-color:transparent}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.pay-note{display:flex;gap:11px;align-items:flex-start;background:var(--info-bg);color:var(--info-ink);border-radius:12px;padding:13px 15px;font-size:13px;margin-top:8px}
.pay-note svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:1.9;fill:none;margin-top:1px}

/* ---- empty state ---- */
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line-2);border-radius:var(--radius-l)}
.empty svg.gm{width:70px;height:70px;color:var(--fg-3);margin:0 auto 16px}

/* =========================================================================
   APP SHELL (customer account + operator admin)
   ========================================================================= */
.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.aside{background:var(--bg-2);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.aside .brand{padding:6px 8px 18px}
.aside .role{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.aside .role .d{width:7px;height:7px;border-radius:50%;background:var(--flare)}
.amenu{display:flex;flex-direction:column;gap:3px}
.amenu a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--fg-2);font-weight:600;font-size:14px}
.amenu a svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.amenu a:hover{color:var(--fg);background:var(--bg-3)}
.amenu a.on{color:var(--fg);background:var(--bg-3)}
.amenu a.on svg{stroke:var(--acc)}
.amenu .sep{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding:16px 11px 8px}
.aside .foot-mini{margin-top:auto;padding:12px 8px 4px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.aside .foot-mini .av{width:34px;height:34px;border-radius:9px;background:var(--flare);color:var(--on-flare);display:grid;place-items:center;font-family:var(--font-d);font-size:16px}
.aside .foot-mini .nm{font-weight:700;font-size:13px}
.aside .foot-mini .em{font-family:var(--font-m);font-size:10.5px;color:var(--fg-3)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,32px);height:62px;display:flex;align-items:center;gap:16px}
.topbar h1{font-size:20px;letter-spacing:-.01em}
.topbar .sp{flex:1}
.topbar .search{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:220px;color:var(--fg-3)}
.topbar .search svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}
.topbar .search input{background:transparent;border:0;width:100%;font-size:13.5px;color:var(--fg)}
.content{padding:clamp(18px,3vw,30px);max-width:1180px;width:100%}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:18px}
.kpi .lab{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.kpi .val{font-family:var(--font-d);font-size:34px;line-height:1;margin:12px 0 8px;letter-spacing:.01em}
.kpi .val small{font-size:18px;color:var(--fg-3)}
.kpi .delta{font-family:var(--font-m);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.kpi .delta.up{color:var(--good-ink)} .kpi .delta.down{color:var(--bad-ink)}
.kpi .spark{height:34px;margin-top:12px}

.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.panel-head h3{font-size:16px}
.panel-head .sub{font-family:var(--font-m);font-size:11px;color:var(--fg-3)}
.cols{display:grid;gap:14px}
.cols.c2{grid-template-columns:1.5fr 1fr}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.mt14{margin-top:14px}.mt24{margin-top:24px}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:0 12px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--bg-3)}
.tbl .num{font-family:var(--font-m);font-weight:700;text-align:right}
.tbl th.num{text-align:right}
.tbl .oid{font-family:var(--font-m);font-weight:700}
.cellprod{display:flex;align-items:center;gap:11px}
.cellprod .th{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg-3);flex:0 0 auto}
.cellprod .th svg.gm{width:60%;height:60%}
.cellprod .n{font-weight:700;font-size:13px;line-height:1.2}
/* a row hover paints the cell --bg-3, so this line uses --fg-2 */
.cellprod .s{font-family:var(--font-m);font-size:10.5px;color:var(--fg-2)}
.avatar{width:30px;height:30px;border-radius:8px;background:var(--bg-4);color:var(--fg);display:grid;place-items:center;font-family:var(--font-m);font-weight:700;font-size:12px;flex:0 0 auto}

.stockbar{height:7px;border-radius:5px;background:var(--bg-4);overflow:hidden;min-width:70px}
.stockbar i{display:block;height:100%;border-radius:5px;background:var(--good)}
.stockbar.low i{background:var(--warn)} .stockbar.out i{background:var(--bad)}

/* charts */
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-family:var(--font-m);font-size:11px;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-center{position:relative}
.donut-center .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-center .mid .b{font-family:var(--font-d);font-size:26px;line-height:1}
.donut-center .mid .s{font-family:var(--font-m);font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em}

/* tracking timeline (customer) */
.track{display:flex;flex-direction:column;gap:0;margin:6px 0}
.track .node{display:grid;grid-template-columns:26px 1fr;gap:14px;position:relative;padding-bottom:20px}
.track .node:last-child{padding-bottom:0}
.track .node::before{content:"";position:absolute;left:12px;top:24px;bottom:-2px;width:2px;background:var(--line-2)}
.track .node:last-child::before{display:none}
.track .node.done::before{background:var(--flare)}
.track .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;background:var(--bg-2);z-index:1}
.track .dot svg{width:13px;height:13px;stroke:var(--fg-3);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.track .node.done .dot{background:var(--flare);border-color:transparent}
.track .node.done .dot svg{stroke:var(--on-flare)}
.track .node.now .dot{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%,transparent)}
.track .tx .t{font-weight:700;font-size:14px}
.track .tx .m{font-family:var(--font-m);font-size:11.5px;color:var(--fg-3);margin-top:2px}

.order-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden;margin-bottom:16px}
.order-card .oh{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.order-card .oh .meta{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--font-m);font-size:12px;color:var(--fg-3)}
.order-card .oh .meta b{color:var(--fg);font-weight:700;display:block;font-size:13px;margin-top:2px}
.order-card .ob{padding:16px 18px;display:flex;gap:16px;flex-wrap:wrap}
.order-item{display:flex;align-items:center;gap:11px}
.order-item .th{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg-3)}
.order-item .th svg.gm{width:58%;height:58%}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tabs button{padding:11px 15px;font-weight:700;font-size:14px;color:var(--fg-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-color:var(--acc)}
.hide{display:none!important}

/* ---- toasts ---- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:340px;pointer-events:none}
.toast{background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;box-shadow:var(--elev);
  display:flex;gap:11px;align-items:center;animation:tin .3s ease;pointer-events:auto;
  transition:opacity .3s ease,transform .3s ease}
.toast.out{opacity:0;transform:translateY(8px)}
.toast .ti{width:30px;height:30px;border-radius:8px;background:var(--flare);color:var(--on-flare);display:grid;place-items:center;flex:0 0 auto}
.toast .ti svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.toast .tt{font-weight:700;font-size:13.5px}
.toast .ts{font-family:var(--font-m);font-size:11px;color:var(--fg-2)}  /* toast ground is --bg-3 */
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

/* ---- drawers (bag, mobile nav) ----
   Closed layers are visibility:hidden so nothing inside them can take focus
   while they are shut. Both are appended to document.body by ui.js. */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.drawer-scrim.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);background:var(--bg-2);
  border-left:1px solid var(--line-2);z-index:82;visibility:hidden;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s;
  display:flex;flex-direction:column}
.drawer.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer .dh h2,.drawer .dh h3,.drawer .dh-t{font-size:17px;margin:0}
.drawer .dbody{flex:1;overflow:auto;padding:8px 20px}
.drawer .dfoot{border-top:1px solid var(--line);padding:18px 20px}
.mnav{left:0;right:auto;border-left:0;border-right:1px solid var(--line-2);transform:translateX(-100%)}
.mnav-wm{font-family:var(--font-d);font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.mnav-wm b{color:var(--acc);font-weight:400}
.mnav-a{display:block;font-family:var(--font-d);font-size:26px;text-transform:uppercase;letter-spacing:.01em;
  padding:12px 2px;border-bottom:1px solid var(--line);color:var(--fg-2)}
.mnav-a:hover,.mnav-a.on{color:var(--fg)}
.mnav-a.on{border-color:var(--acc)}
.mnav-b{display:block;font-weight:700;font-size:14.5px;padding:11px 2px;color:var(--fg-2)}
.mnav-b:hover{color:var(--fg)}
.mini-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.mini-line .th{width:56px;height:56px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:var(--bg-3)}
.mini-line .th svg.gm{width:58%;height:58%}
.mini-line .n{font-weight:700;font-size:13.5px;line-height:1.2}
.mini-line .v{font-family:var(--font-m);font-size:11px;color:var(--fg-3);margin-top:3px}
.mini-line .rm{font-family:var(--font-m);font-size:11px;color:var(--fg-3);margin-top:6px}
.mini-line .rm:hover{color:var(--bad-ink)}
.mini-note{margin:10px 0 0;font-family:var(--font-m);font-size:11px;line-height:1.5;color:var(--fg-3)}
.empty-drawer{padding:48px 12px;border:0}
.empty-drawer h3{font-size:17px;margin-bottom:6px}
.empty-drawer p{margin:0;font-size:12px}

/* ---- search overlay ---- */
.search-ov{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 24px;overflow:auto;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.search-ov.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.search-panel{width:min(680px,100%);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-l);
  padding:20px;box-shadow:var(--elev)}
.search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.search-form{display:flex;gap:8px}
.search-form .inp{font-size:17px;padding:14px 15px}
.search-hint{font-size:11px;margin:14px 0 0;text-align:center}
.search-sugg{margin-top:14px}
.search-none{font-size:12px;margin:0 0 12px}
.search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.search-list a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px}
.search-list a:hover{background:var(--bg-3)}
.sg-th{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--bg-3);
  display:grid;place-items:center;flex:0 0 auto;color:var(--fg-2)}
.sg-th svg.gm{width:60%;height:60%}
.sg-t{display:flex;flex-direction:column;flex:1;min-width:0}
.sg-t b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a suggestion hover paints the row --bg-3, so the house name uses --fg-2 */
.sg-t span{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.search-quick{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.search-quick .kicker{display:block;margin-bottom:10px}

/* reveal: visible by default, armed only when an observer takes it on */
.reveal.arm{opacity:0;transform:translateY(14px)}
.reveal.arm.in,.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.reveal.arm{opacity:1!important;transform:none!important}
}

/* ---- responsive ---- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cols.c2,.cols.c3{grid-template-columns:1fr}
}
/* The header tool cluster overflows a 360px viewport at full size. Tighten the
   row rather than dropping a control, so every affordance stays reachable. */
@media (max-width:420px){
  .hdr .wrap{gap:10px}
  .tools{gap:0}
  .ic{width:36px;height:36px}
  .ic svg{width:18px;height:18px}
  .brand .wm{font-size:19px}
  .brand .m{width:28px;height:28px}
}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .hero-in{grid-template-columns:1fr;gap:24px}
  .hero-figure{max-width:420px}
  .band,.news{grid-template-columns:1fr}
  .band{text-align:left}
  .feat3{grid-template-columns:1fr}
  .pd{grid-template-columns:1fr;gap:24px}
  .pd-media{position:static}
  .co{grid-template-columns:1fr}
  .summary{position:static}
  .foot-top{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:1fr}
  .aside{display:none}
  .shop{grid-template-columns:1fr}
  .filters{display:none;position:static}
  .filters.open{display:block}
  .filter-toggle{display:inline-flex}
}
@media (max-width:560px){
  .grid,.grid.g3{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr}
  .bar .wrap{gap:20px}
  .cart-line{grid-template-columns:64px 1fr}
  .cart-line .qty{grid-column:2;justify-self:start;margin-top:8px}
  .search-ov{padding-top:8vh}
  .search-panel{padding:16px;border-radius:var(--radius)}
  .search-form{flex-direction:column}
  .search-form .btn{width:100%}
  .foot-bot{justify-content:flex-start}
}

/* =========================================================================
   SLIM HEADER
   The operator console gets the brand, a way back to the store and the theme
   control. It never gets the shopping bar, the bag or the search overlay.
   ========================================================================= */
.hdr-slim .wrap{gap:12px}
.hdr-slim .tools{gap:8px}

/* =========================================================================
   SHARED UTILITIES
   Small, unopinionated primitives every page part may use. Page specific
   styling belongs in that page's own stylesheet part, never here.
   ========================================================================= */

/* Hidden until a surface reveals it. Reveal by removing the class (the safe
   way, because the element keeps whatever display its own rules give it) or,
   for a plain block, by adding .revealed. */
.authhide{display:none}
.authhide.revealed{display:revert}

.stack{display:flex;flex-direction:column;gap:var(--gap,12px)}
.stack.gap-s{--gap:8px}
.stack.gap-l{--gap:20px}
.row{display:flex;align-items:center;gap:var(--gap,10px);flex-wrap:wrap}
.row.tight{--gap:6px}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.row.top{align-items:flex-start}

.badge-dot{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.badge-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg-3);flex:0 0 auto}
.badge-dot.good::before{background:var(--good-ink)}
.badge-dot.warn::before{background:var(--warn-ink)}
.badge-dot.bad::before{background:var(--bad-ink)}
.badge-dot.info::before{background:var(--info-ink)}
.badge-dot.flare::before{background:var(--flare)}

/* The honest seam callout. Used wherever a surface has to say in plain words
   that something is a demonstration rather than a live service. Reads as a
   quiet note in both themes: tinted ground, accent rule down the left. */
.note{position:relative;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--radius-s);background:color-mix(in srgb,var(--acc) 7%,var(--bg-2));
  color:var(--fg-2);padding:13px 16px;font-size:13.5px;line-height:1.55;margin:0}
.note > :first-child{margin-top:0}
.note > :last-child{margin-bottom:0}
.note b,.note strong{color:var(--fg)}
.note a{color:var(--acc);font-weight:700;border-bottom:1px solid transparent}
.note a:hover{border-color:var(--acc)}
.note.warn{border-left-color:var(--warn-ink);background:color-mix(in srgb,var(--warn) 9%,var(--bg-2))}
.note.bad{border-left-color:var(--bad-ink);background:color-mix(in srgb,var(--bad) 9%,var(--bg-2))}
.note.good{border-left-color:var(--good-ink);background:color-mix(in srgb,var(--good) 9%,var(--bg-2))}
.note.plain{border-left-color:var(--line-2);background:var(--bg-2)}
.note-head{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--fg);margin-bottom:5px}
.note-head svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .note{background:color-mix(in srgb,var(--acc) 12%,var(--bg-2))}
[data-theme="dark"] .note.warn{background:color-mix(in srgb,var(--warn) 13%,var(--bg-2))}
[data-theme="dark"] .note.bad{background:color-mix(in srgb,var(--bad) 13%,var(--bg-2))}
[data-theme="dark"] .note.good{background:color-mix(in srgb,var(--good) 13%,var(--bg-2))}
[data-theme="dark"] .note.plain{background:var(--bg-3)}

/* Wide tables scroll inside their own box. The page body never scrolls
   sideways, and neither html nor body is ever clipped on the x axis. */
.table-scroll{overflow-x:auto;overflow-y:visible;max-width:100%;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-scroll > table{min-width:640px}
.table-scroll:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px}

/* =========================================================================
   STACKING ORDER
   The one written down order for body level furniture, per the contract.
   Anything appended to document.body picks its z value from this list and
   nothing else in the build may exceed it.

      40   consent bar            (consent.css)
      60   buddy / chat launcher  (buddy.css, chat.css)
      70   buddy / chat panel     (buddy.css, chat.css)
      80   bag drawer scrim       (this file, .drawer-scrim)
      82   bag drawer, mobile nav (this file, .drawer)
      90   search overlay         (this file, .search-ov)
      96   modal dialogs          (.modal, base below)
     120   toasts + pwa update/offline notices (share the .toasts region)                 (this file, .toasts)
     200   skip link              (this file, .skip)

   The sticky page header sits at 30 and the console topbar at 20, both well
   under every layer above.
   ========================================================================= */
.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:96;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-scrim.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease}
.modal{width:min(560px,100%);max-height:86dvh;overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--radius-l);box-shadow:var(--elev);padding:22px}
.modal h2,.modal h3{font-size:19px;margin-bottom:10px}


/* ===== home.css ===== */
/* ==========================================================================
   AT EAZE - home page only.
   Anything shared lives in app.css. This part adds the composed hero panel,
   the live inventory board, the consent field layout and the build note.
   No tokens are restated here.
   ========================================================================== */

/* ---- hero, typographic first ---- */
.hero-copy .cta{margin-bottom:18px}
.hero-fine{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin:0}

/* the panel is composed from the palette, not a photograph and not a mascot */
.hero-panel{
  position:relative;border-radius:var(--radius-l);border:1px solid var(--line-2);
  background:
    radial-gradient(120% 95% at 82% 6%,color-mix(in srgb,var(--flare) 22%,transparent),transparent 58%),
    linear-gradient(158deg,var(--bg-3),var(--bg-4));
  box-shadow:var(--elev);padding:18px;display:flex;flex-direction:column;gap:16px;
}
.hero-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-stamp{
  font-family:var(--font-m);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);
}
.hero-panel-art{
  border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2);
  display:grid;place-items:center;padding:14px;min-height:190px;
}
.hero-panel-art .hero-glyph{width:min(58%,190px);height:auto;aspect-ratio:1/1;color:var(--acc)}
.hero-chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero-chip{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-2);
  padding:10px 13px;
}
.hero-chip .k{
  font-family:var(--font-m);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);flex:0 0 74px;
}
.hero-chip .v{font-size:13.5px;font-weight:600;color:var(--fg);letter-spacing:-.005em}

/* ---- live inventory board ---- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.board-cell{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;
}
.board-val{
  font-family:var(--font-d);font-weight:400;font-size:clamp(34px,4.6vw,46px);
  line-height:1;letter-spacing:.01em;color:var(--fg);
}
.board-lab{
  font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);margin-top:8px;
}
.board-sub{font-size:12.5px;color:var(--fg-3);line-height:1.4}
.board-fallback{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.6;max-width:70ch}
.board-foot{margin:14px 0 0;font-size:12px;line-height:1.6;max-width:88ch}

/* ---- editorial band ---- */
.band-cta{margin-top:18px}

/* ---- brand strip ---- */
.brands-band{padding-bottom:0}
.brands-h{margin:0 0 12px;font-weight:700}
.brand-sep{opacity:.4}

/* ---- newsletter, CASL consent capture ---- */
.news-lede{max-width:52ch;margin:12px auto 0;color:var(--fg-2);font-size:15px}
.news .news-form{
  display:block;max-width:520px;margin:22px auto 0;text-align:left;
}
.news .news-form .news-email{margin-bottom:14px}
.news .news-form .lab{text-align:left}
.consent-row{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg-3);
  padding:14px 15px;
}
.consent-box{
  width:20px;height:20px;margin:1px 0 0;accent-color:var(--acc);cursor:pointer;flex:0 0 auto;
}
.consent-copy{font-size:13.5px;line-height:1.55;color:var(--fg-2);cursor:pointer}
.news-submit{margin-top:16px;width:100%}
.news-status{min-height:20px;margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--fg-2)}
/* 12px state text on a pale ground needs the ink pair, not the fill colour */
.news-status.is-bad{color:var(--bad-ink)}
.news-id{max-width:62ch;margin:20px auto 0;font-size:12.5px;line-height:1.6;color:var(--fg-2)}
.news-fine{max-width:62ch;margin:10px auto 0;font-size:11.5px;line-height:1.7}

/* ---- honest build note ---- */
.note-band{padding-top:0}
.note{
  border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--bg-2);
  padding:20px 22px;
}
.note-h{
  font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 10px;
}
.note p{margin:0;color:var(--fg-2);font-size:13.5px;line-height:1.65;max-width:96ch}

/* ---- responsive ---- */
@media (max-width:1080px){
  .board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-panel{max-width:460px}
  .hero-panel-art{min-height:150px}
}
@media (max-width:560px){
  .board{grid-template-columns:1fr}
  .hero-chip{gap:4px}
  .hero-chip .k{flex-basis:100%}
}


/* ===== shop.css ===== */
/* ==========================================================================
   AT EAZE - shop / faceted catalogue
   Shop-only styles: the facet rail, active filter chips, the results bar,
   the in-page search box and the mobile filter drawer.
   Tokens live in app.css. Nothing here restates a token.
   ========================================================================== */

/* ---- page head ---- */
.shop-head{padding-block:30px 10px}
.shop-head .display{font-size:clamp(34px,6vw,64px)}
.shop-lede{max-width:56ch;margin:12px 0 0;font-size:15px;color:var(--fg-2)}

/* ---- layout ---- */
.shop-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:28px;
  align-items:start;padding-block:20px 72px}
.shop-main{min-width:0}

/* ---- the facet rail ---- */
.shop-rail{position:sticky;top:calc(var(--hdr) + 16px);min-width:0}
.facets{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  padding:4px 16px 16px}
.facet-set{border:0;margin:0;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.facet-set:last-of-type{border-bottom:0}
.facet-legend{display:block;width:100%;padding:0;font-family:var(--font-m);font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.facet-opts{display:flex;flex-direction:column;gap:2px;max-height:272px;overflow-y:auto;
  overscroll-behavior:contain;padding-right:2px}
.facet-opts.is-wrap{flex-direction:row;flex-wrap:wrap;gap:7px;max-height:none;overflow:visible}

.facet-opt{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:9px;
  cursor:pointer;color:var(--fg-2);font-size:13.5px;line-height:1.3;
  transition:background .14s,color .14s}
.facet-opt:hover{color:var(--fg);background:var(--bg-3)}
.facet-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.facet-box{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-2);
  background:var(--bg-3);display:grid;place-items:center;transition:background .14s,border-color .14s}
.facet-box svg{width:12px;height:12px;stroke:var(--on-flare);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .12s}
.facet-input:checked + .facet-box{background:var(--flare);border-color:transparent}
.facet-input:checked + .facet-box svg{opacity:1}
.facet-input:focus-visible + .facet-box{outline:2.5px solid var(--acc);outline-offset:2px}
.facet-opt:has(.facet-input:focus-visible){background:var(--bg-3);color:var(--fg)}
.facet-opt:has(.facet-input:checked){color:var(--fg);font-weight:600}
.facet-name{flex:1;min-width:0}
.facet-sw{flex:0 0 auto;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.facet-count{flex:0 0 auto;font-family:var(--font-m);font-size:11px;color:var(--fg-3);
  font-variant-numeric:tabular-nums}
/* A value that matches nothing under the current filters is genuinely inert:
   paintFacets disables its checkbox, so it leaves the tab order and cannot
   change the result set. Dim the tick and the swatch, never the label. A blanket
   opacity on the row would drop 13.5px text under the AA ratio in both themes. */
.facet-opt.is-empty{color:var(--fg-3);cursor:default}
.facet-opt.is-empty:hover{color:var(--fg-3);background:none}
.facet-opt.is-empty .facet-box,
.facet-opt.is-empty .facet-sw{opacity:.45}

/* size and price read better as a wrapped row of pills than a column */
.facet-opts.is-wrap .facet-opt{gap:0;padding:0;border-radius:9px}
.facet-opts.is-wrap .facet-box{display:none}
.facet-opts.is-wrap .facet-name{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:9px;padding:6px 11px;font-family:var(--font-m);
  font-size:12.5px;font-weight:700;transition:background .14s,border-color .14s,color .14s}
.facet-opts.is-wrap .facet-count{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.facet-opts.is-wrap .facet-pill-count{font-family:var(--font-m);font-size:10.5px;color:var(--fg-3);
  font-variant-numeric:tabular-nums}
.facet-opts.is-wrap .facet-opt:hover{background:none}
.facet-opts.is-wrap .facet-opt:hover .facet-name{border-color:var(--fg-3)}
/* sibling combinator, not :has, so the checked pill still reads if :has is missing */
.facet-opts.is-wrap .facet-input:checked ~ .facet-name{background:var(--flare);
  color:var(--on-flare);border-color:transparent}
.facet-opts.is-wrap .facet-input:checked ~ .facet-name .facet-pill-count{color:var(--on-flare);opacity:.72}
.facet-opts.is-wrap .facet-input:focus-visible ~ .facet-name{outline:2.5px solid var(--acc);outline-offset:2px}
.facet-opts.is-wrap .facet-opt.is-empty .facet-name{color:var(--fg-3);border-style:dashed}
.facet-opts.is-wrap .facet-opt.is-empty:hover .facet-name{border-color:var(--line-2)}

.facet-foot{padding-top:14px;border-top:1px solid var(--line)}

/* ---- toolbar: filter button, in page search, sort ---- */
/* .shop-search is deliberately its own component. The header offers search
   through the full screen overlay app.css calls .search-ov, which is a
   different control with a different lifecycle, so nothing here reuses it. */
.shop-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.shop-search{position:relative;flex:1 1 260px;min-width:200px;display:flex;align-items:center}
.shop-search-icon{position:absolute;left:12px;display:grid;place-items:center;color:var(--fg-3);
  pointer-events:none}
.shop-search-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.shop-search-input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;
  padding:10px 40px 10px 36px;font-size:14px;color:var(--fg);appearance:none}
.shop-search-input::placeholder{color:var(--fg-3)}
.shop-search-input:focus{border-color:var(--acc);outline:none}
.shop-search-input::-webkit-search-cancel-button{display:none}
.shop-search-clear{position:absolute;right:6px;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;color:var(--fg-3)}
.shop-search-clear:hover{color:var(--fg);background:var(--bg-3)}
.shop-search-clear svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round}
.shop-search-clear[hidden]{display:none}
.shop-sort{flex:0 0 auto}
.shop-filters-btn{display:none;align-items:center;gap:8px}
.shop-filters-btn .n{font-family:var(--font-m);font-size:11px;font-weight:700;min-width:18px;
  height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;line-height:1}
.shop-filters-btn .n[hidden]{display:none}

/* ---- results bar ---- */
.shop-results{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;min-height:30px}
.shop-count{font-family:var(--font-m);font-size:12.5px;color:var(--fg-2);margin:0}
.shop-count b{color:var(--fg);font-weight:700}
.shop-active{display:flex;align-items:center;gap:7px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.shop-active[hidden]{display:none}
.shop-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 9px 5px 11px;border-radius:9px;border:1px solid var(--line-2);color:var(--fg-2);
  background:var(--bg-2);transition:color .14s,border-color .14s}
.shop-chip:hover{color:var(--fg);border-color:var(--fg-3)}
.shop-chip i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.shop-chip svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.shop-chip.clear-all{color:var(--acc);border-color:transparent;background:transparent;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.shop-chip.clear-all:hover{border-color:var(--acc)}

/* ---- empty result set ---- */
.shop-empty{margin-top:6px}
.shop-empty[hidden]{display:none}
.shop-empty [data-empty-glyph]{display:block}
.shop-empty h2{font-size:19px;margin-bottom:6px}
.shop-empty p{margin:0 auto;max-width:46ch;color:var(--fg-2);font-size:14px}
.shop-empty .btn{margin-top:18px}
.shop-noscript{border:1px dashed var(--line-2);border-radius:var(--radius);padding:20px;
  color:var(--fg-2);font-size:14px;margin-bottom:18px}

/* ---- mobile filter drawer (body level furniture, contract section 6) ---- */
.shop-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;opacity:0;transition:opacity .25s}
.shop-scrim.is-open{opacity:1}
.shop-scrim[hidden]{display:none}
.shop-drawer{position:fixed;left:0;top:0;height:100dvh;width:min(380px,90vw);z-index:82;
  background:var(--bg-2);border-right:1px solid var(--line-2);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.shop-drawer.is-open{transform:none}
/* display:flex above would otherwise beat the HTML hidden attribute */
.shop-drawer[hidden]{display:none}
.shop-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.shop-drawer-head h2{font-size:17px}
.shop-drawer-close{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--fg-2)}
.shop-drawer-close:hover{color:var(--fg);background:var(--bg-3)}
.shop-drawer-close svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.shop-drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 14px}
.shop-drawer-body .shop-rail{position:static;display:block}
.shop-drawer-body .facets{border:0;background:none;padding:0}
.shop-drawer-body .facet-opts{max-height:none}
.shop-drawer-foot{border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:10px}
.shop-drawer-foot .btn{flex:1}

/* ---- responsive ---- */
@media (max-width:1080px){
  .shop-layout{grid-template-columns:230px minmax(0,1fr);gap:22px}
}
@media (max-width:900px){
  .shop-layout{grid-template-columns:minmax(0,1fr)}
  .shop-rail{display:none}
  .shop-filters-btn{display:inline-flex}
  .shop-search{order:3;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .shop-drawer{transition:none}
  .shop-scrim{transition:none}
}


/* ===== product.css ===== */
/* ==========================================================================
   AT EAZE - product detail page (/p/<id>/).
   PDP only. Tokens come from app.css and are never restated here.
   Everything below reads in both themes because every colour is a token.
   ========================================================================== */

/* the page hides its own sections with the hidden attribute, and several of
   them are flex or grid, which would otherwise win over the UA rule */
.pdp [hidden] { display: none !important; }

/* ------------------------------------------------------------- breadcrumb */
.pdp-crumbs {
  list-style: none;
  margin: 0;
  padding-block: 18px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pdp-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pdp-crumbs li + li::before { content: "/"; color: var(--line-2); }
.pdp-crumbs a { color: var(--fg-3); }
.pdp-crumbs a:hover { color: var(--fg); }
.pdp-crumbs [aria-current="page"] { color: var(--fg); }

.pdp-noscript {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  padding: 14px 16px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 76ch;
}

/* ------------------------------------------------------------------ layout */
.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  padding-block: 16px 44px;
}

/* -------------------------------------------------------------- the media */
.pdp-media { position: sticky; top: calc(var(--hdr) + 18px); }
.pdp-figure { margin: 0; }

.pdp-hero {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-4);
  transition: background-color .22s ease;
}
.pdp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 90% at 50% 4%, rgba(255, 255, 255, .14), transparent 56%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.pdp-hero svg.gm { width: 58%; height: 58%; position: relative; z-index: 2; }

.pdp-cap {
  margin: 12px 0 0;
  font-family: var(--font-m);
  font-size: 11px;
  line-height: 1.65;
  color: var(--fg-3);
  max-width: 56ch;
}

.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pdp-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-4);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pdp-thumb svg.gm { width: 54%; height: 54%; }
.pdp-thumb:hover { border-color: var(--fg-3); }
.pdp-thumb[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 2.5px var(--acc); }

/* ------------------------------------------------------------- the buy box */
.pdp-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-flags:empty { display: none; }

.pdp-house {
  margin: 14px 0 0;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pdp-name {
  font-family: var(--font-u);
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -.02em;
  margin: 6px 0 0;
}
.pdp-rate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-family: var(--font-m);
  font-size: 12px;
  color: var(--fg-2);
}
.pdp-rate svg { width: 14px; height: 14px; fill: var(--warn); stroke: none; }
.pdp-rate-cnt { color: var(--fg-3); }

.pdp-price { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 0; }
.pdp-price .price { font-size: 30px; }
.pdp-price .was { font-size: 16px; }

.pdp-blurb {
  margin: 12px 0 0;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.65;
  max-width: 56ch;
}

/* -------------------------------------------------------------- the options */
.pdp-opt { margin: 24px 0 0; }
.pdp-opt-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}
.pdp-lab {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pdp-optval { font-weight: 700; font-size: 13.5px; }
.pdp-sizelink {
  color: var(--acc);
  font-weight: 700;
  font-size: 12.5px;
  border-bottom: 2px solid transparent;
}
.pdp-sizelink:hover { border-color: var(--acc); }

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 11px; }
.pdp-sw {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: box-shadow .15s ease;
}
.pdp-sw:hover { box-shadow: 0 0 0 2px var(--fg-3); }
.pdp-sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--acc); }

.pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-size {
  min-width: 58px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}
.pdp-size:hover:not([disabled]) { border-color: var(--fg-3); }
.pdp-size[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: transparent; }
.pdp-size.is-out,
.pdp-size[disabled] {
  color: var(--fg-2);
  background: var(--bg-4);
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
}

.pdp-err {
  margin: 12px 0 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* Nothing in the option groups or the buy row does anything until product.js
   has hydrated the page: the swatch, size and stock mounts are empty and the
   stepper, add and save buttons have no listeners. They stay out of the flow
   while the root is still in its loading state, so with JavaScript off they
   never appear as live controls. The noscript panel says so in words. */
.pdp[data-state="loading"] .pdp-opt,
.pdp[data-state="loading"] .pdp-buyrow,
.pdp[data-state="loading"] .pdp-stock { display: none; }

/* --------------------------------------------------------------- the buy row */
.pdp-buyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 24px 0 0;
}
.pdp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
}
.pdp-qty-btn {
  width: 44px;
  height: 50px;
  display: grid;
  place-items: center;
  color: var(--fg-2);
}
/* the stepper glyphs come from the icon table, so no dash character ships */
.pdp-step-ico { display: block; }
.pdp-step-ico svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
}
.pdp-qty-btn:hover:not([disabled]) { color: var(--fg); background: var(--bg-4); }
.pdp-qty-btn[disabled] { color: var(--fg-3); cursor: not-allowed; }
.pdp-qty-input {
  width: 48px;
  height: 50px;
  text-align: center;
  background: transparent;
  border: 0;
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 14px;
}
.pdp-add { flex: 1 1 210px; gap: 12px; }
.pdp-add[disabled] { opacity: .55; cursor: not-allowed; }
.pdp-add-total { font-size: 13.5px; opacity: .8; }
.pdp-wish { flex: 0 0 auto; gap: 8px; }
.pdp-wish svg { width: 18px; height: 18px; }
.pdp-wish-ico { display: inline-flex; }
/* pink stays on the border and the heart, both non text. The label is 15px
   bold, which WCAG still counts as normal text, so it keeps the body ink. */
.pdp-wish[aria-pressed="true"] { border-color: var(--pink); color: var(--fg); }
.pdp-wish[aria-pressed="true"] svg { fill: var(--pink); stroke: var(--pink); }

.pdp-stock {
  margin: 16px 0 0;
  font-family: var(--font-m);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
/* 12.5px mono on the page ground, so the ink pair, not the fill colour */
.pdp-stock.is-low { color: var(--warn-ink); }
.pdp-stock.is-out { color: var(--bad-ink); }

.pdp-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.pdp-facts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.pdp-fact-ico { display: block; }
.pdp-fact-ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--acc);
  stroke-width: 1.9;
  fill: none;
  margin-top: 1px;
}

.pdp-seam {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-m);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--fg-3);
  max-width: 58ch;
}

/* --------------------------------------------------------- no longer listed */
.pdp-gone {
  margin: 20px 0 0;
  padding: 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.pdp-gone p { margin: 0 0 14px; color: var(--fg-2); font-size: 15px; line-height: 1.6; }
.pdp-gone .pdp-gone-lead { color: var(--fg); font-weight: 700; }
.pdp-gone .pdp-gone-note {
  margin: 0;
  font-family: var(--font-m);
  font-size: 12px;
  color: var(--fg-3);
}

/* ---------------------------------------------------- bench sheet + details */
.pdp-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 46px);
  padding-block: 34px 40px;
  border-top: 1px solid var(--line);
}
.pdp-kicker {
  margin: 0;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
}
.pdp-h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 8px 0 18px; }

.bench { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bench-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.bench dt {
  margin: 0;
  font-family: var(--font-m);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.bench dd {
  margin: 0;
  font-family: var(--font-m);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc details { border-bottom: 1px solid var(--line); }
.pdp-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 2px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary .pm {
  font-family: var(--font-m);
  font-size: 17px;
  line-height: 1;
  color: var(--fg-3);
  transition: transform .18s ease, color .18s ease;
}
.pdp-acc details[open] summary .pm { color: var(--acc); transform: rotate(45deg); }
.pdp-acc .acc-body { padding: 0 2px 18px; }
.pdp-acc .acc-body p {
  margin: 0 0 10px;
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 62ch;
}
.pdp-acc .acc-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- trust strip */
.pdp-trust {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  font-size: 13px;
  color: var(--fg-2);
}
.pdp-trust li { display: inline-flex; align-items: center; gap: 9px; }

.pdp-related .sec-head { margin-bottom: 22px; }

/* ------------------------------------------------------------------ smaller */
@media (max-width: 1080px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr); }
  .pdp-media { position: static; }
  .pdp-hero { max-width: 520px; }
  .pdp-detail { grid-template-columns: minmax(0, 1fr); padding-block: 26px 32px; }
}
@media (max-width: 560px) {
  .pdp-thumb { width: 62px; height: 62px; }
  .bench-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pdp-add { flex: 1 1 100%; order: 3; }
  .pdp-trust { gap: 12px 20px; }
}


/* ===== cart.css ===== */
/* ==========================================================================
   AT EAZE - bag, order summary and the checkout seam  (/bag/)
   Bag and summary styles only. Tokens live in app.css and are never restated.
   ========================================================================== */

/* a hidden summary row must stay hidden even though rows are flex */
.bag-page [hidden]{display:none!important}

/* ---- page head ---- */
.bag-page{padding-bottom:clamp(48px,7vw,88px)}
.bag-head{padding-block:30px 20px}
.bag-head .display{font-size:clamp(34px,6vw,64px);margin-top:8px}
.bag-head .display:focus-visible{outline:2.5px solid var(--acc);outline-offset:6px}
.bag-sub{max-width:56ch;margin:12px 0 0;font-size:14.5px}

/* ---- no-JS boot notice ---- */
.bag-boot{border:1px dashed var(--line-2);border-radius:var(--radius-l);padding:clamp(24px,4vw,40px);background:var(--bg-2)}
.bag-boot h2{font-size:19px;margin-bottom:8px}
.bag-boot p{margin:0;font-size:14.5px}

/* ---- layout ---- */
.bag-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);gap:28px;align-items:start}
.bag-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.bag-aside{min-width:0}

.bag-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:18px 20px 8px}
.bag-panel:last-of-type{padding-bottom:20px}
.bag-panel h2{font-size:17px;letter-spacing:-.01em}
.bag-panel h2:focus-visible{outline:2.5px solid var(--acc);outline-offset:4px}
.bag-panel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:4px}
.bag-count{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bag-keep{margin-left:auto;font-size:13px}

/* ---- bag lines ---- */
.bag-lines{list-style:none;margin:0;padding:0}
.bag-line{display:grid;grid-template-columns:88px minmax(0,1fr) auto auto;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid var(--line)}
.bag-line:first-child{border-top:0}
.bag-thumb{width:88px;height:88px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.bag-thumb svg.gm{width:60%;height:60%}
.bag-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.bag-name{font-weight:700;font-size:15.5px;line-height:1.25;letter-spacing:-.01em;border-bottom:2px solid transparent}
a.bag-name:hover{border-color:var(--acc);color:var(--acc)}
.bag-meta{font-size:11.5px;color:var(--fg-3);letter-spacing:.04em}
.bag-unit{font-size:11.5px}
.bag-controls{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bag-total{font-size:16px;text-align:right;white-space:nowrap;align-self:center}
.bag-line.is-gone .bag-thumb{opacity:.5}
.bag-line.is-gone .bag-name{color:var(--fg-2)}

/* quantity stepper */
.bag-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:11px;background:var(--bg-3);overflow:hidden}
.bag-step{width:38px;height:38px;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--fg-2);line-height:1}
.bag-step:hover:not([disabled]){color:var(--fg);background:var(--bg-4)}
.bag-step[disabled]{opacity:.34;cursor:not-allowed}
.bag-step:focus-visible{outline-offset:-3px}
.bag-qty-in{width:46px;height:38px;text-align:center;background:transparent;border:0;border-inline:1px solid var(--line);
  font-weight:700;font-size:14px;padding:0;-moz-appearance:textfield;appearance:textfield}
.bag-qty-in::-webkit-outer-spin-button,.bag-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bag-qty-in:focus{outline:none;background:var(--bg-4)}
.bag-qty-in:focus-visible{outline:2.5px solid var(--acc);outline-offset:-2px}
.bag-rm{font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  padding:2px 0;border-bottom:1px solid transparent}
.bag-rm:hover{color:var(--bad-ink);border-color:var(--bad-ink)}

/* ---- fulfilment choice ---- */
.ful{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ful-opt{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line-2);border-radius:var(--radius-s);
  padding:13px 14px;cursor:pointer;background:var(--bg-3);transition:border-color .15s,background .15s}
.ful-opt:hover{border-color:var(--fg-3)}
.ful-opt input{margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--acc);cursor:pointer}
.ful-opt:has(input:checked){border-color:var(--acc);background:var(--bg-4)}
.ful-opt:has(input:focus-visible){outline:2.5px solid var(--acc);outline-offset:2px}
.ful-box{display:flex;flex-direction:column;gap:3px;min-width:0}
.ful-t{font-weight:700;font-size:14.5px;line-height:1.3}
.ful-m{font-family:var(--font-m);font-size:11.5px;color:var(--fg-3);line-height:1.45}
.ful-note{margin:12px 0 0;font-size:13px;color:var(--fg-2)}

/* ---- PIPEDA line ---- */
.bag-pipeda{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--bg-2);color:var(--fg-2);font-size:12.5px;line-height:1.6}

/* ---- order summary ---- */
.bag-sum{position:sticky;top:calc(var(--hdr) + 16px);border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--bg-2);padding:20px}
.bag-sum h2{font-size:17px;margin-bottom:14px}

.ship-prog{margin-bottom:16px}
.ship-prog-line{margin:0 0 8px;font-size:12.5px;color:var(--fg-2);line-height:1.5}
.ship-track{display:block;height:8px;border-radius:6px;background:var(--bg-4);overflow:hidden}
.ship-track i{display:block;height:100%;border-radius:6px;background:var(--flare);transition:width .3s ease}
.ship-prog.is-off .ship-track i{background:var(--good)}

.sum-rows{margin:0;padding:0}
.sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0}
.sum-row dt{color:var(--fg-2);font-size:14px;margin:0}
.sum-row dd{margin:0;font-size:14px;color:var(--fg)}
.sum-note{font-size:11px;color:var(--fg-3);letter-spacing:.04em}
.sum-disc dt,.sum-disc dd{color:var(--good-ink)}
.sum-total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.sum-total dt{color:var(--fg);font-weight:700;font-size:16px}
.sum-total dd{font-size:19px}
.sum-eta{margin:10px 0 0;font-size:11.5px;color:var(--fg-3);line-height:1.6}
.sum-seam{margin:10px 0 0;font-size:11.5px;color:var(--fg-2);line-height:1.6;text-align:center}

/* ---- promo ----
   Small state text uses the *-ink tokens. The plain --good / --bad fills are
   for bars and dots and fail AA at this size on a pale ground. */
.bag-promo{margin:16px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.promo-form{display:flex;gap:8px}
.promo-form .inp{flex:1;min-width:0;padding:11px 13px;font-size:14px}
.promo-on{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--good-ink);
  background:var(--good-bg);border-radius:var(--radius-s);padding:10px 12px}
.promo-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--good-ink)}
.promo-label{font-size:13px;color:var(--fg-2);flex:1;min-width:0}
.promo-rm{font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  border-bottom:1px solid transparent}
.promo-rm:hover{color:var(--bad-ink);border-color:var(--bad-ink)}
.promo-msg{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--fg-3);min-height:1px}
.promo-msg.is-good{color:var(--good-ink)}
.promo-msg.is-bad{color:var(--bad-ink)}

/* ---- empty bag ---- */
.bag-empty{text-align:center;padding:clamp(48px,8vw,80px) 20px;border:1px dashed var(--line-2);border-radius:var(--radius-l);background:var(--bg-2)}
.bag-empty svg.gm{width:72px;height:72px;color:var(--fg-3);margin:0 auto 16px}
.bag-empty h2{font-size:22px;margin-bottom:8px}
.bag-empty p{margin:0 auto 20px;max-width:38ch;font-size:14.5px}

/* ==========================================================================
   CHECKOUT SEAM modal. Body level furniture, z 96 per the stacking order.
   ========================================================================== */
.co-modal{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.co-modal.is-open{display:flex}
.co-scrim{position:absolute;inset:0;background:rgba(8,6,16,.62)}
.co-dialog{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:var(--radius-l);box-shadow:var(--elev)}
.co-dialog:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px}
.co-dialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.co-title{font-size:18px;letter-spacing:-.01em}
.co-x{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--fg-2);flex:0 0 auto}
.co-x:hover{color:var(--fg);background:var(--bg-4)}
.co-x svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.co-dialog-body{padding:20px}

.co-honest{border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg-3);padding:14px 16px}
.co-honest p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--fg-2)}
.co-honest p:last-child{margin-bottom:0}
.co-honest b{color:var(--fg)}

.co-recap{margin:16px 0 0;padding:0}
.co-recap .sum-row{padding:7px 0}

.co-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.co-actions .btn{flex:1 1 200px}

.co-ref{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px solid var(--acc);
  border-radius:var(--radius-s);padding:14px 16px;margin-bottom:16px;background:var(--bg-3)}
.co-ref-lab{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.co-ref-id{font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--fg)}

.co-h3{font-size:14px;margin:20px 0 12px}
.co-foot{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--fg-3)}

.co-track{list-style:none;margin:0;padding:0}
.co-node{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;position:relative;padding-bottom:18px}
.co-node:last-child{padding-bottom:0}
.co-node::before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--line-2)}
.co-node:last-child::before{display:none}
.co-node.is-done::before{background:var(--flare)}
.co-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg-3);
  display:grid;place-items:center;position:relative;z-index:1}
.co-dot svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.co-node.is-done .co-dot{background:var(--flare);border-color:transparent;color:var(--on-flare)}
.co-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-t{font-weight:700;font-size:14px}
.co-m{font-size:11.5px;color:var(--fg-3);line-height:1.5}

/* ---- responsive ---- */
@media (max-width:1000px){
  .bag-grid{grid-template-columns:1fr}
  .bag-sum{position:static}
}
@media (max-width:720px){
  .ful{grid-template-columns:1fr}
  .bag-line{grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px;row-gap:10px}
  .bag-thumb{width:64px;height:64px}
  .bag-controls{grid-column:2;flex-direction:row;align-items:center;gap:14px}
  .bag-total{grid-column:3;grid-row:1;align-self:start}
  .co-actions .btn{flex:1 1 100%}
}


/* ===== account.css ===== */
/* ==========================================================================
   AT EAZE - customer console (/account/)

   Scoped to the account surface. Every colour is a token from app.css so both
   themes come out of one rule set. No token is restated here.
   Shared classes reused as is: .panel .panel-head .kpi .kpis .pill .chip
   .chips .btn .inp .lab .form-grid .field .srow .empty .grid .order-card
   .order-item .track .mono .muted .dim .price .link .kicker .display
   ========================================================================== */

.acct-page { padding-block: clamp(22px, 4vw, 40px) clamp(48px, 7vw, 84px); }

.acct-head { max-width: 62ch; }
.acct-head .display { font-size: clamp(34px, 6vw, 64px); margin-top: 8px; }
.acct-sub { margin: 12px 0 0; font-size: 16px; }

/* ---- the sign in seam, honest with or without scripts ---- */
.acct-signin {
  margin-top: 26px; padding: 16px 18px;
  border: 1px solid var(--line-2); border-left: 4px solid var(--acc);
  border-radius: var(--radius-s); background: var(--bg-2);
}
.acct-signin h2 { font-size: 15px; letter-spacing: -.005em; }
.acct-signin p { margin: 7px 0 0; color: var(--fg-2); font-size: 14px; max-width: 84ch; }

.acct-boot { margin-top: 26px; padding: 26px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.acct-boot h2 { font-size: 18px; margin-bottom: 8px; }
.acct-boot p { margin: 0; max-width: 62ch; }

/* ---- shell ---- */
.acct-shell { margin-top: 26px; }
.acct-layout { display: grid; grid-template-columns: minmax(0, 244px) minmax(0, 1fr); gap: 26px; align-items: start; }
.acct-main { min-width: 0; }
.acct-view-h { font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -.015em; margin-bottom: 18px; }
.acct-view-h:focus-visible { outline: 2.5px solid var(--acc); outline-offset: 5px; }
.acct-body { min-width: 0; }
.acct-stack { display: grid; gap: 14px; }
.acct-two { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; margin-top: 20px; align-items: start; }
.acct-small { font-size: 12.5px; }
.acct-panel-h { font-size: 15px; margin-bottom: 14px; }
.acct-sub-h { margin-top: 24px; }

/* ---- side rail ---- */
.acct-side {
  position: sticky; top: calc(var(--hdr) + 16px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 16px 14px;
}
.acct-id { display: flex; align-items: center; gap: 11px; }
.acct-av {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: var(--flare); color: var(--on-flare);
  display: grid; place-items: center; font-family: var(--font-d); font-size: 17px; line-height: 1;
}
.acct-id-tx { min-width: 0; display: block; }
.acct-id-tx b { display: block; font-size: 14px; line-height: 1.2; }
.acct-id-tx span { display: block; font-size: 10.5px; overflow-wrap: anywhere; }
.acct-tierpill { margin: 12px 0 14px; }
.acct-tierpill .pill { color: var(--acc); border-color: var(--line-2); }

.acct-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-rail-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px;
  border-radius: 10px; color: var(--fg-2); font-weight: 600; font-size: 14px;
  border-left: 3px solid transparent;
}
.acct-rail-link svg { width: 19px; height: 19px; flex: 0 0 auto; }
.acct-rail-link:hover { color: var(--fg); background: var(--bg-3); }
.acct-rail-link.on { color: var(--fg); background: var(--bg-3); border-left-color: var(--acc); }
.acct-rail-link.on svg { stroke: var(--acc); }
.acct-side-foot { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }

/* ---- honest seam notes ---- */
.acct-note {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-2);
  border-left: 3px solid var(--line-2); padding-left: 12px; max-width: 78ch;
}
.acct-kpi-note { margin-top: 12px; font-size: 11.5px; }

/* ---- overview ---- */
.acct-kpis { grid-template-columns: 1.35fr 1fr 1fr; align-items: start; }
.acct-kpi .lab, .acct-kpi .val, .acct-tier { display: block; }
.acct-kpi .val { margin: 10px 0 4px; }
.acct-tier { font-family: var(--font-m); font-size: 11px; color: var(--fg-3); }

.acct-active-id { margin: 0 0 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.acct-oid { font-weight: 700; font-size: 15px; }
.acct-active-id .dim { font-size: 12px; }
.acct-milestone {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius-s);
  background: var(--bg-3); border: 1px solid var(--line);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.acct-milestone .lab { margin: 0; }
.acct-milestone b { font-size: 15px; }
/* the milestone strip sits on --bg-3, where --fg-3 misses AA in the dark theme */
.acct-milestone .dim { font-family: var(--font-m); font-size: 12px; color: var(--fg-2); }
.acct-active-sum { margin: 12px 0 0; font-size: 13.5px; }
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }

.acct-mini { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.acct-mini-seg { flex: 1; min-width: 0; text-align: center; }
.acct-mini-seg i { display: block; height: 6px; border-radius: 4px; background: var(--bg-4); }
.acct-mini-seg.on i { background: var(--flare); }
.acct-mini-seg b {
  display: block; margin-top: 6px; font-family: var(--font-m); font-weight: 400;
  font-size: 9.5px; line-height: 1.3; color: var(--fg-3);
}
.acct-mini-seg.on b { color: var(--fg-2); font-weight: 700; }

.acct-recent { list-style: none; margin: 0; padding: 0; }
.acct-recent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.acct-recent-row:last-child { border-bottom: 0; padding-bottom: 0; }
.acct-recent-l, .acct-recent-r { display: block; }
.acct-recent-l span { display: block; }
.acct-recent-l .dim { font-size: 11px; margin-top: 2px; }
.acct-recent-r { text-align: right; }
.acct-recent-r .price { display: block; font-size: 14px; margin-bottom: 5px; }

/* ---- orders ---- */
.acct-filters { margin-bottom: 12px; }
.acct-chip-n { font-family: var(--font-m); font-size: 11px; opacity: .7; }
.acct-count { margin: 0 0 16px; font-size: 12px; }
.acct-order .ob { gap: 14px 20px; }
.acct-order-act { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 16px; }
.acct-item-n { display: block; font-weight: 700; font-size: 13px; line-height: 1.25; }
a.acct-item-n:hover { color: var(--acc); }
.acct-item-v { display: block; font-size: 11px; margin-top: 2px; }
.order-item .th { overflow: hidden; }

/* ---- tracking timeline (reuses .track from app.css) ---- */
ol.acct-track { list-style: none; margin: 6px 0 0; padding: 0; }
ol.acct-track .node .tx { display: block; }
ol.acct-track .node .t, ol.acct-track .node .m { display: block; }
ol.acct-track .node.branch::before { display: none; }
ol.acct-track .node.branch .dot { background: var(--bad); border-color: transparent; }
ol.acct-track .node.branch .dot svg { stroke: var(--bg); }
ol.acct-track .node.branch .t { color: var(--bad-ink); }
ol.acct-track .node.branch { margin-left: 22px; position: relative; }
ol.acct-track .node.branch::after {
  content: ""; position: absolute; left: -14px; top: -14px; width: 16px; height: 26px;
  border-left: 2px solid var(--bad); border-bottom: 2px solid var(--bad);
  border-bottom-left-radius: 9px;
}
.acct-box { display: grid; gap: 10px; }
.acct-box-total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; font-weight: 700; color: var(--fg); }

/* ---- wishlist ---- */
.acct-wish-grid { margin-bottom: 4px; }
.acct-wish { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acct-wish-act { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-wish-act .btn { flex: 1 1 auto; }

/* ---- addresses ---- */
.acct-addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.acct-addr-body { margin: 0; font-size: 14px; line-height: 1.6; }
.acct-addr-form { max-width: 720px; }

/* The chevron is a mask rather than a painted SVG, so its colour is the --fg-3
   token and it follows the theme like everything else on the page. */
.acct-sel { position: relative; display: block; }
/* display block so the wrapper box is exactly the control box and the chevron
   centres on the control rather than on a line box with a descender in it */
.acct-select { appearance: none; -webkit-appearance: none; padding-right: 34px; display: block; }
.acct-sel::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%); pointer-events: none; background-color: var(--fg-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
/* no mask support means no drawn chevron, so the native control keeps its own */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .acct-select { appearance: auto; -webkit-appearance: auto; padding-right: 15px; }
  .acct-sel::after { display: none; }
}

.acct-err:empty { display: none; }
.acct-err {
  margin: 14px 0 0; padding: 10px 13px; border-radius: var(--radius-s);
  background: var(--bad-bg); color: var(--bad-ink); font-size: 13px; font-weight: 600;
}
.inp[aria-invalid="true"] { border-color: var(--bad); }

/* ---- profile and privacy ---- */
.acct-check {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.acct-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acc); flex: 0 0 auto; }
.acct-check span { display: block; }
.acct-check b { display: block; font-size: 14px; }
.acct-check .dim { display: block; font-size: 12.5px; margin-top: 2px; }
.acct-casl { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-2); max-width: 78ch; }
.acct-consent { margin-top: 4px; }

.acct-priv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px;
  align-items: center; padding: 16px 0; border-top: 1px solid var(--line);
}
.acct-priv-row h4 { font-size: 14px; margin: 0 0 5px; }
.acct-priv-row p { margin: 0; font-size: 13px; max-width: 62ch; }
.acct-priv-row .acct-actions { margin: 0; justify-content: flex-end; }
/* small state text on a pale ground takes the ink pair, the fill keeps --bad */
.acct-danger { color: var(--bad-ink); border-color: var(--bad); }
.acct-danger:hover { background: var(--bad-bg); }

.acct-data { display: block; margin-top: 14px; }
.acct-data[hidden] { display: none; }
.acct-data h4 { font-size: 13px; margin: 0 0 8px; }
.acct-data pre {
  margin: 0; max-height: 340px; overflow: auto; font-size: 11.5px; line-height: 1.5;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .acct-two { grid-template-columns: 1fr; }
  .acct-kpis { grid-template-columns: 1fr 1fr; }
  .acct-kpi:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr keeps min-width:auto, so the rail below
     (width:max-content) would stretch the whole grid instead of scrolling. */
  .acct-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .acct-side { position: static; padding: 14px; min-width: 0; }
  .acct-tierpill { margin: 11px 0 12px; }
  .acct-rail { margin: 0 -14px; padding: 0 14px; overflow-x: auto; min-width: 0; }
  .acct-rail-list { flex-direction: row; gap: 7px; width: max-content; padding-bottom: 2px; }
  .acct-rail-link {
    border-left: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0;
    white-space: nowrap; padding: 9px 12px;
  }
  .acct-rail-link.on { border-left: 0; border-bottom-color: var(--acc); }
  .acct-side-foot { margin: 12px 0 0; }
  .acct-addr-grid { grid-template-columns: 1fr; }
  .acct-priv-row { grid-template-columns: 1fr; align-items: start; }
  .acct-priv-row .acct-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .acct-kpis { grid-template-columns: 1fr; }
  .acct-kpi:first-child { grid-column: auto; }
  .acct-recent-row { align-items: flex-start; }
  .acct-mini-seg b { font-size: 8.5px; }
  .acct-wish-act .btn { flex: 1 1 100%; }
}


/* ===== console.css ===== */
/* ==========================================================================
   AT EAZE, operator console.
   The shell, the sign in gate and every operator panel at /console/.
   build.py concatenates this part seventh of eleven (CSS_PARTS in tools/build.py),
   so content.css, buddy.css, chat.css and consent.css all cascade after it and can
   override any rule here at equal specificity. Tokens are never restated in this
   file, and nothing in it is imported by a storefront page.

   Two rules shape the whole file:
     1. every data panel is .authhide, which app.css sets to display:none, so
        the console with no JavaScript is a sign in card and nothing else.
     2. body level furniture (the export dialog) reuses .modal-scrim at 96 from
        app.css rather than inventing a new stacking layer.
   ========================================================================== */

/* ---------------------------------------------------------------- masthead */
.cx-head{padding:clamp(26px,4vw,44px) var(--gutter) 0}
.cx-head h1{font-size:clamp(30px,5.4vw,54px)}
.cx-head .kicker{margin:0 0 10px}
.cx-lede{color:var(--fg-2);max-width:66ch;margin:14px 0 0;font-size:15px}

/* ------------------------------------------------------------------- gate */
.cx-gate{padding-block:clamp(22px,3.4vw,34px) clamp(40px,6vw,72px)}
.cx-gate[hidden]{display:none}
.cx-gate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}

.cx-card{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--bg-2);
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--elev)}
.cx-card h2{font-size:19px}
.cx-card-sub{color:var(--fg-2);font-size:13.5px;margin:8px 0 20px;max-width:52ch}

.cx-field{margin-bottom:14px}
.cx-signin .inp{font-family:var(--font-m);font-size:19px;letter-spacing:.34em;text-align:center}
.cx-signin .inp::placeholder{letter-spacing:.34em;color:var(--fg-3)}
.cx-msg{min-height:20px;margin:12px 0 0;font-size:13.5px;font-weight:600;color:var(--fg-2)}
/* state colour as small text takes the ink pair. --bad and --good are calibrated
   for fills and fail AA at this size on the pale card ground in the light theme. */
.cx-msg.is-bad{color:var(--bad-ink)}
.cx-msg.is-good{color:var(--good-ink)}
.cx-fine{margin:16px 0 0;font-family:var(--font-m);font-size:11px;line-height:1.7;color:var(--fg-3)}

.cx-creds .cx-cred-tbl{font-size:13.5px}
.cx-creds .cx-cred-tbl td{padding-block:11px}
.cx-code{font-weight:700;color:var(--acc);letter-spacing:.14em}
.cx-note{margin-top:16px}
.cx-note .note-head{margin-bottom:4px}

/* ------------------------------------------------------------- app shell */
.cx-app{border-top:1px solid var(--line);min-height:auto}
.cx-app.authhide.revealed{display:grid}
.cx-app .aside{top:var(--hdr);height:calc(100dvh - var(--hdr));gap:2px}
.cx-app .aside .role{margin-top:4px;justify-content:flex-start}
.cx-aside-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:8px}
.cx-aside-foot .foot-mini{margin-top:0}

.cx-menu a{justify-content:flex-start}
.cx-menu a .cx-badge{margin-left:auto}
.cx-menu .cx-menu-note{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);padding:14px 11px 6px}

.cx-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--acc);color:var(--on-acc);
  font-family:var(--font-m);font-weight:700;font-size:10.5px;display:inline-grid;place-items:center;line-height:1}
.cx-badge.is-zero{display:none}

.cx-topbar{top:var(--hdr);gap:12px}
.cx-title{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0}
.cx-clock{font-size:11px;color:var(--fg-3);white-space:nowrap}
.cx-topbar-out{display:none}
.cx-content{max-width:1240px}

/* compact navigation, used under 900px where app.css drops the sidebar */
.cx-mobnav{display:none;gap:6px;overflow-x:auto;scrollbar-width:thin;
  padding:10px clamp(16px,3vw,30px);border-bottom:1px solid var(--line);background:var(--bg-2)}
.cx-mobnav a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:13px;
  padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.cx-mobnav a svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cx-mobnav a.on{background:var(--flare);color:var(--on-flare);border-color:transparent}
.cx-mobnav a.on svg{stroke:var(--on-flare)}

/* --------------------------------------------------------------- panels */
.cx-panel{outline:none}
.cx-panel.authhide.revealed{display:block}
.cx-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cx-panel-head h3{font-size:17px}
.cx-panel-head p{margin:6px 0 0;color:var(--fg-2);font-size:13.5px;max-width:70ch}
.cx-panel .note{margin-bottom:16px}
.cx-panel .panel + .panel{margin-top:14px}

/* A grid item defaults to min-width:auto, so one .table-scroll holding a
   640px minimum table pushes the whole page sideways. Every console column is
   therefore minmax(0,...), including the shell itself. */
.cx-app{grid-template-columns:246px minmax(0,1fr)}
.cx-content .cols.c2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.cx-content .cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-content .panel,.cx-content .kpi{min-width:0}

.cx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cx-kpis .kpi{display:flex;flex-direction:column}
.cx-kpis .kpi .val{font-size:30px}
/* .chart svg is width 100% height auto, which would let a 130x34 sparkline
   grow to the width of the tile and swallow the note under it */
.cx-kpis .spark{height:auto}
.cx-kpis .spark svg{width:100%;height:40px}
.cx-sparknote{margin-top:auto;padding-top:12px;font-family:var(--font-m);font-size:10.5px;line-height:1.5;color:var(--fg-3)}

.cx-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cx-toolbar .cx-search{flex:1 1 220px;min-width:180px}
.cx-toolbar .inp{padding:9px 13px;font-size:13.5px;border-radius:10px}
.cx-toolbar .lab{margin-bottom:4px}
.cx-tool{display:flex;flex-direction:column}
.cx-count{font-family:var(--font-m);font-size:12px;color:var(--fg-2);margin-left:auto;align-self:flex-end;padding-bottom:9px}

.cx-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cx-btn{font-family:var(--font-u);font-weight:700;font-size:12px;padding:7px 11px;border-radius:9px;
  border:1px solid var(--line-2);color:var(--fg-2);background:var(--bg-2);white-space:nowrap}
.cx-btn:hover{color:var(--fg);border-color:var(--fg-3)}
.cx-btn.is-go{background:var(--flare);color:var(--on-flare);border-color:transparent}
.cx-btn.is-bad{color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.cx-btn[disabled]{opacity:.42;pointer-events:none}
.cx-why{font-family:var(--font-m);font-size:10.5px;color:var(--fg-3);white-space:nowrap;align-self:center}

.cx-empty{text-align:center;color:var(--fg-2);padding:34px 16px;border:1px dashed var(--line-2);border-radius:var(--radius)}
.cx-empty b{display:block;color:var(--fg);margin-bottom:6px}

/* ------------------------------------------------------------ catalogue */
.cx-edit{border:1px solid var(--acc);border-radius:var(--radius);background:var(--bg-3);padding:16px;margin:0}
.cx-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cx-edit .inp{padding:9px 12px;font-size:14px;border-radius:10px}
.cx-edit .lab{margin-bottom:5px}
/* app.css scopes .lab to a label element, and the colourway group is headed
   by a span because it labels a group rather than one control */
.cx-edit span.lab{display:block;font-family:var(--font-m);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}
.cx-edit-full{grid-column:1/-1}
.cx-edit-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cx-edit-msg{font-size:12.5px;font-weight:600;color:var(--bad-ink);margin:0}
.cx-swatches{display:flex;flex-wrap:wrap;gap:7px}
.cx-sw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:6px 11px;
  border-radius:9px;border:1px solid var(--line-2);color:var(--fg-2);cursor:pointer}
.cx-sw i{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.cx-sw input{position:absolute;opacity:0;width:1px;height:1px}
.cx-sw.on,.cx-sw:has(input:checked){background:var(--bg-4);color:var(--fg);border-color:var(--fg-3)}
.cx-sw:has(input:focus-visible){outline:2.5px solid var(--acc);outline-offset:2px}
.cx-stockcell{display:flex;align-items:center;gap:10px;min-width:130px}
.cx-stockcell .mono{font-size:12px;color:var(--fg-2)}
.cx-gone td{opacity:.6}

/* ----------------------------------------------------------------- chat */
.cx-chat{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px;align-items:start}
.cx-threads{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;padding-right:4px}
.cx-thread{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--bg-2);padding:12px 13px}
.cx-thread:hover{border-color:var(--fg-3)}
.cx-thread.on{border-color:var(--acc);background:var(--bg-3)}
.cx-thread .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.cx-thread .t .cx-badge{margin-left:auto}
.cx-thread .s{display:block;max-width:100%;font-family:var(--font-m);font-size:10.5px;color:var(--fg-3);
  margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the transcript reuses the shared .chat-* classes from chat.css and styles
   none of them. The console owns only the height of the log. */
.cx-thread-view .chat-log{height:52vh;min-height:220px;border:1px solid var(--line);
  border-radius:var(--radius-s);background:var(--bg)}
.cx-reply{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.cx-reply .field{flex:1}
.cx-reply textarea.inp{min-height:44px;max-height:150px;resize:vertical;font-size:14px}

/* ---------------------------------------------------------------- audit */
.cx-audit-old{font-family:var(--font-m);font-size:11.5px;color:var(--fg-3);overflow-wrap:anywhere}
.cx-audit-new{font-family:var(--font-m);font-size:11.5px;color:var(--fg);overflow-wrap:anywhere}
.cx-when{font-family:var(--font-m);font-size:11.5px;color:var(--fg-3);white-space:nowrap}

/* --------------------------------------------------------------- export */
.cx-export{width:100%;min-height:230px;font-family:var(--font-m);font-size:11.5px;line-height:1.6;
  background:var(--bg-3);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:12px;resize:vertical}
.cx-modal-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}

/* ----------------------------------------------------------- responsive */
@media (max-width:1080px){
  .cx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-content .cols.c2,.cx-content .cols.c3{grid-template-columns:minmax(0,1fr)}
  .cx-chat{grid-template-columns:1fr}
  .cx-threads{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .cx-thread{min-width:230px}
}
@media (max-width:900px){
  .cx-gate-grid{grid-template-columns:minmax(0,1fr)}
  .cx-mobnav{display:flex}
  .cx-app{grid-template-columns:minmax(0,1fr)}
  .cx-app .aside{display:none}
  /* The topbar keeps top:var(--hdr) at every width. The site header is sticky at
     top:0 with z-index 30 and the topbar sits at 20, so sticking the topbar to 0
     parks it underneath the header: the panel title and the sign out button, which
     below 900px is the ONLY sign out control because the sidebar is hidden above,
     become unreadable and a click on them lands on a header control instead. */
  .cx-topbar-out{display:inline-flex}
}
@media (max-width:560px){
  .cx-kpis{grid-template-columns:1fr}
  .cx-clock{display:none}
  .cx-count{margin-left:0;align-self:flex-start;padding-bottom:0}
}


/* ===== content.css ===== */
/* ==========================================================================
   AT EAZE - long form content surfaces.

   Serves /help/, /privacy/ and /404.html. Everything here is scoped to the
   ct- prefix so it cannot leak into a shopping or console surface. Every
   colour is a token from app.css: no token is restated, and both themes come
   out of the one rule set.

   Shared classes reused as is, never redefined:
     .wrap .section .kicker .display .muted .dim .mono .note .note-head
     .btn .btn-flare .btn-ghost .btn-sm .inp .field .pill .tag .link .sr
     .acc (details accordion)  .table-scroll (the horizontal scroll box)
     .empty .gm

   The page body never scrolls sideways. Wide tables scroll inside the shared
   .table-scroll box, which is focusable so a keyboard can reach the overflow.
   ========================================================================== */

/* ---- page shell ---------------------------------------------------------- */
.ct-page { padding-block: clamp(22px, 4vw, 40px) clamp(48px, 7vw, 84px); }

.ct-head { max-width: 60ch; }
.ct-head .display { font-size: clamp(34px, 6vw, 64px); margin-top: 8px; }
.ct-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.62; max-width: 58ch; }

.ct-shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
  margin-top: clamp(26px, 4vw, 44px);
}

/* ---- in page navigation -------------------------------------------------- */
/* Anchors only. It needs no script, and the sticky box sits at 5, well under
   the page header at 30 and under every body level layer in the contract.
   min-width:0 is load bearing: without it this grid item takes its automatic
   minimum size from the nav list, which on the narrow layout is a horizontal
   strip, and the whole column grows past the viewport. */
.ct-nav {
  position: sticky; top: calc(var(--hdr) + 16px); min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 15px 13px;
}
.ct-nav-title { margin: 0 0 10px; padding-inline: 9px; }
.ct-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-nav a {
  display: block; padding: 8px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--fg-2);
  border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s;
}
.ct-nav a:hover { color: var(--fg); background: var(--bg-3); border-left-color: var(--acc); }

/* ---- long form typography ------------------------------------------------ */
.ct-prose { max-width: 74ch; min-width: 0; }

.ct-sec { scroll-margin-top: calc(var(--hdr) + 22px); padding-bottom: clamp(30px, 4vw, 46px); }
.ct-sec:last-child { padding-bottom: 0; }
.ct-sec + .ct-sec { border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 44px); }
.ct-sec > .kicker { display: block; margin-bottom: 7px; }
.ct-sec > h2 { font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -.015em; }

/* The bare element rules are wrapped in :where() so they carry no specificity
   at all. A classed element inside the prose column, .note or .ct-facts or
   .ct-stages or .ct-scrollhint, then keeps its own styling instead of being
   silently overridden by a descendant selector that happens to outrank it. */
:where(.ct-prose p) { margin: 13px 0 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.7; }
:where(.ct-prose h3) { font-size: 16px; margin-top: 26px; letter-spacing: -.005em; }
:where(.ct-prose h3 + p) { margin-top: 8px; }
:where(.ct-prose ul, .ct-prose ol) { margin: 12px 0 0; padding-left: 21px; color: var(--fg-2); font-size: 15.5px; line-height: 1.7; }
:where(.ct-prose li) { margin-top: 6px; }
:where(.ct-prose li)::marker { color: var(--acc); }
.ct-prose li > strong, .ct-prose p > strong { color: var(--fg); }
/* Every link in a content page carries an underline as well as the accent
   colour, so it is distinguishable without relying on colour alone. */
.ct-prose a { color: var(--acc); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--acc) 42%, transparent); }
.ct-prose a:hover { border-bottom-color: var(--acc); }
.ct-prose .note { margin-top: 18px; }
.ct-prose .acc { margin-top: 20px; }
.ct-prose .acc .body p { margin: 10px 0 0; font-size: 14.5px; }
.ct-prose .acc .body > :first-child { margin-top: 0; }
.ct-prose .acc .body ul { margin-top: 8px; font-size: 14.5px; }

/* ---- fact tiles: the small hard numbers a shopper scans for --------------- */
.ct-facts {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 10px;
}
.ct-fact { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-2); padding: 13px 14px; }
.ct-fact .k {
  display: block; font-family: var(--font-m); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.ct-fact .v { display: block; margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--fg); line-height: 1.35; }

/* ---- definition rows ----------------------------------------------------- */
.ct-dl { margin: 16px 0 0; }
.ct-dl > div {
  display: grid; grid-template-columns: minmax(132px, .40fr) 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ct-dl > div:last-child { border-bottom: 0; }
.ct-dl dt { font-weight: 700; font-size: 14px; color: var(--fg); }
.ct-dl dd { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }

/* ---- size and disclosure tables ------------------------------------------ */
.ct-tablewrap {
  margin-top: 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-2);
}
.ct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ct-table th, .ct-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ct-table thead th {
  font-family: var(--font-m); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.ct-table tbody th { font-family: var(--font-m); font-weight: 700; color: var(--fg); white-space: nowrap; }
.ct-table tbody td { color: var(--fg-2); }
.ct-table tbody tr:last-child th, .ct-table tbody tr:last-child td { border-bottom: 0; }
.ct-table tbody tr:hover th, .ct-table tbody tr:hover td { background: var(--bg-3); }
.ct-table .cm { display: block; margin-top: 2px; font-family: var(--font-m); font-size: 12px; color: var(--fg-3); }
.ct-scrollhint { margin: 8px 0 0; font-family: var(--font-m); font-size: 11px; letter-spacing: .04em; color: var(--fg-3); }

/* ---- the stage ladder on order tracking ---------------------------------- */
.ct-stages { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: none; }
.ct-stages li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.ct-stages li:last-child { border-bottom: 0; }
.ct-stages .d {
  width: 26px; height: 26px; border-radius: 50%; background: var(--flare); color: var(--on-flare);
  display: grid; place-items: center; font-family: var(--font-m); font-weight: 700; font-size: 12px; line-height: 1;
}
.ct-stages .t { display: block; font-weight: 700; font-size: 14.5px; color: var(--fg); }
.ct-stages .m { display: block; margin: 3px 0 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; }

/* ---- footer of a content page -------------------------------------------- */
.ct-updated {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-m); font-size: 11px; letter-spacing: .05em; color: var(--fg-3);
}
.ct-updated b { color: var(--fg-2); font-weight: 700; }

/* ---- 404 ----------------------------------------------------------------- */
.ct-404 { max-width: 660px; margin-inline: auto; text-align: center; padding-block: clamp(48px, 9vw, 104px); }
.ct-404 svg.gm { width: 84px; height: 84px; color: var(--fg-3); margin: 0 auto 16px; }
.ct-404 h1.display { font-size: clamp(38px, 7vw, 72px); margin-top: 10px; }
.ct-404 .ct-404-sub { margin: 14px auto 0; max-width: 46ch; color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.ct-404-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.ct-404-search { display: flex; gap: 8px; max-width: 430px; margin: 28px auto 0; }
.ct-404-search .field { flex: 1; }
.ct-404-note { margin: 14px auto 0; max-width: 46ch; font-family: var(--font-m); font-size: 11.5px; line-height: 1.6; color: var(--fg-3); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .ct-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ct-nav {
    top: var(--hdr); z-index: 5; padding: 9px 10px; border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  }
  .ct-nav-title { display: none; }
  .ct-nav ul { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .ct-nav li { flex: 0 0 auto; }
  .ct-nav a { white-space: nowrap; padding: 7px 11px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px; }
  .ct-nav a:hover { border-left-color: transparent; border-bottom-color: var(--acc); }
  .ct-prose { max-width: none; }
}

@media (max-width: 620px) {
  .ct-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .ct-table th, .ct-table td { padding: 10px 11px; }
  .ct-404-search { flex-direction: column; }
}


/* ===== buddy.css ===== */
/* ==========================================================================
   EAZE BUDDY, launcher and panel only.

   Two pieces of body level furniture, appended to document.body by buddy.js
   and never nested inside .wrap:

       60   .bd-launch    the launcher
       70   .bd-panel     the panel

   Both z values come from the stacking order block at the bottom of app.css.
   Nothing here restates a token. Every colour is a token, so the surface
   flips with the theme without a single hardcoded value, and small state text
   takes the ink pair (--good-ink, --warn-ink) rather than the fill pair,
   because the fill pair fails AA at this size on a pale ground. The launcher lifts
   itself over the consent bar through --bd-lift, which buddy.js measures and
   sets on the root element. It defaults to zero, so if there is no consent
   bar nothing moves.
   ========================================================================== */

/* ---------------------------------------------------------- the launcher */
.bd-launch{
  position:fixed;
  right:18px;
  bottom:calc(18px + var(--bd-lift, 0px));
  z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 20px 0 17px;
  border:1px solid transparent;border-radius:999px;
  background:var(--flare);color:var(--on-flare);
  font-family:var(--font-u);font-weight:700;font-size:14.5px;letter-spacing:.01em;
  box-shadow:var(--elev);
  transition:transform .16s ease,background .18s ease;
}
.bd-launch:hover{background:var(--flare-2);transform:translateY(-2px)}
.bd-launch:active{transform:translateY(0)}
.bd-launch svg{width:21px;height:21px;flex:0 0 auto}
.bd-launch.is-open svg{transform:scale(.92)}

/* -------------------------------------------------------------- the panel */
.bd-panel{
  position:fixed;
  right:18px;
  bottom:calc(18px + 54px + 12px + var(--bd-lift, 0px));
  z-index:70;
  width:min(390px, calc(100vw - 36px));
  max-height:min(620px, calc(100dvh - 150px));
  display:flex;flex-direction:column;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-l);
  box-shadow:var(--elev);
  overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.99);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s linear .2s;
}
.bd-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.2,1);
}
.bd-panel:focus{outline:none}

/* header */
.bd-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 15px 12px 18px;border-bottom:1px solid var(--line);
  background:var(--bg-3);
}
.bd-titles{min-width:0}
.bd-title{font-size:16.5px;line-height:1.15;margin:0}
.bd-sub{
  margin:3px 0 0;font-family:var(--font-m);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
}
.bd-close{
  width:36px;height:36px;flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;color:var(--fg-2);
}
.bd-close:hover{color:var(--fg);background:var(--bg-4)}
.bd-close svg{width:18px;height:18px}

/* the honest line about what this assistant is */
.bd-note{
  margin:0;padding:11px 18px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--acc) 7%, var(--bg-2));
  color:var(--fg-2);font-size:11.5px;line-height:1.5;
}
[data-theme="dark"] .bd-note{background:color-mix(in srgb, var(--acc) 11%, var(--bg-2))}

/* transcript */
.bd-log{
  flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 18px;display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;
}
.bd-log:focus-visible{outline:2.5px solid var(--acc);outline-offset:-3px}
.bd-msg{display:flex;flex-direction:column;max-width:100%}
.bd-msg.you{align-items:flex-end}
.bd-bub{
  max-width:88%;padding:10px 13px;border-radius:var(--radius-s);
  background:var(--bg-3);border:1px solid var(--line);
  font-size:13.5px;line-height:1.55;
}
.bd-msg.you .bd-bub{
  background:var(--flare);color:var(--on-flare);border-color:transparent;
  font-weight:600;
}
.bd-p{margin:0}
.bd-bub > * + *{margin-top:10px}

/* a list of plain facts, promo codes or brand names */
.bd-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.bd-list li{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.02em;color:var(--fg-2);
  padding:7px 10px;border-radius:9px;background:var(--bg-4);
}

/* real product cards, one row each, linking to the SKU page */
.bd-cards{display:flex;flex-direction:column;gap:8px}
.bd-card{
  display:flex;align-items:center;gap:11px;padding:8px;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-2);
  transition:border-color .15s ease,transform .15s ease;
}
.bd-card:hover{border-color:var(--acc);transform:translateY(-1px)}
.bd-th{
  width:46px;height:46px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;overflow:hidden;
}
.bd-th svg.gm{width:64%;height:64%}
.bd-cb{display:flex;flex-direction:column;gap:3px;min-width:0}
.bd-cn{
  font-weight:700;font-size:13px;line-height:1.25;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bd-cm{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bd-cp{font-family:var(--font-m);font-weight:700;font-size:12.5px;letter-spacing:-.02em;color:var(--fg)}
.bd-cs{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;color:var(--fg-3);
}
.bd-cs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
/* The stock line is 10.5px normal size text on a pale card, so it takes the
   ink pair, not the fill pair. --good and --warn are calibrated for fills and
   land at 3.47:1 and 3.31:1 on --bg-2 in the light theme, which fails AA. The
   ink tokens clear it in both themes, and the house product card in app.css
   uses the same pair for the same line. */
.bd-cs.ok{color:var(--good-ink)}
.bd-cs.low{color:var(--warn-ink)}
.bd-cs.out{color:var(--fg-3)}

/* links out of an answer, always root absolute */
.bd-links{display:flex;flex-wrap:wrap;gap:8px}
.bd-link{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--acc);
  border-bottom:2px solid transparent;
}
.bd-link:hover{border-color:var(--acc)}

/* suggestion chips */
.bd-chips{
  display:flex;flex-wrap:wrap;gap:7px;
  padding:0 18px 12px;
}
.bd-chips:empty{display:none}
.bd-chip{
  font-size:12.5px;font-weight:600;line-height:1.2;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--fg-2);background:var(--bg-2);
  transition:color .14s ease,border-color .14s ease,background .14s ease;
  text-align:left;
}
.bd-chip:hover{color:var(--fg);border-color:var(--acc);background:var(--bg-3)}

/* ask */
.bd-form{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px 14px;border-top:1px solid var(--line);background:var(--bg-3);
}
.bd-inp{
  flex:1;min-width:0;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 13px;font-size:14px;color:var(--fg);
}
.bd-inp::placeholder{color:var(--fg-3)}
.bd-inp:focus{border-color:var(--acc);outline:none}
.bd-send{
  width:44px;height:42px;flex:0 0 auto;border-radius:11px;
  display:grid;place-items:center;
  background:var(--flare);color:var(--on-flare);
  transition:background .16s ease;
}
.bd-send:hover{background:var(--flare-2)}
.bd-send svg{width:19px;height:19px}

/* ------------------------------------------------------------ responsive */
@media (max-width:520px){
  .bd-launch{right:14px;bottom:calc(14px + var(--bd-lift, 0px));height:50px;padding:0 15px;gap:0}
  .bd-launch-t{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .bd-panel{
    right:10px;left:10px;width:auto;
    bottom:calc(14px + 50px + 10px + var(--bd-lift, 0px));
    max-height:min(78dvh, calc(100dvh - 120px));
    border-radius:var(--radius);
  }
  .bd-log{padding:14px}
  .bd-note{padding:10px 14px}
  .bd-chips{padding:0 14px 10px}
  .bd-bub{max-width:94%}
}

/* Motion is additive here as it is everywhere else on this build. With
   reduced motion the panel simply appears, and it is fully usable. */
@media (prefers-reduced-motion:reduce){
  .bd-panel{transform:none;transition:opacity .001ms linear,visibility 0s linear .001ms}
  .bd-panel.open{transform:none;transition:opacity .001ms linear}
  .bd-launch:hover,.bd-card:hover{transform:none}
}


/* ===== chat.css ===== */
/* ==========================================================================
   AT EAZE v2.0.0 chat part.
   Concatenated by build.py after buddy.css and before consent.css. Tokens are
   never restated here, they all come from app.css.

   TWO GROUPS LIVE IN THIS FILE.

   1. SHARED MESSAGE CLASSES. The operator console reuses these verbatim and
      styles none of them itself. They carry no width, no height and no
      position, so they drop into the shopper panel and into a console column
      without a fight.

        .chat-log      the scrolling transcript. The console owns its height,
                       for example .cs-thread .chat-log{height:52vh}. Here it
                       is a flex child that fills the panel.
        .chat-day      a day divider inside the log, "Today", "Yesterday", a date
        .chat-msg      one message row. Add exactly one of
                       .from-customer  shopper, aligned right, accent fill
                       .from-agent     store, aligned left, surface fill
                       .from-system    a centred note, no bubble
        .chat-bubble   the bubble. Paint it with textContent, never innerHTML
        .chat-byline   author, role label and time under the bubble
        .chat-sys      the note inside a .from-system row
        .chat-empty    the empty transcript state

      A console thread view is therefore just:
        <div class="chat-log">
          <div class="chat-msg from-customer">
            <div class="chat-bubble"></div><p class="chat-byline"></p>
          </div>
        </div>

   2. THE SHOPPER PANEL, everything prefixed .chat-launcher or .chat-panel.
      Body level furniture at the contract stacking values, launcher 60 and
      panel 70. The launcher sits above the Buddy launcher rather than over it:
      --chat-stack is the Buddy launcher inset plus its height plus a gap, and
      it is written out in those three terms so it can be read straight against
      buddy.css. If the Buddy launcher changes height, this one line moves.

      Both launchers also ride the consent bar. buddy.js measures that bar and
      sets --bd-lift on the root element, defaulting to 0px when no bar is up.
      Every fixed offset in this file carries the same term, so the two stay
      stacked instead of colliding the moment the bar appears. Buddy switches
      to its compact launcher at 520px, so the stack does too, one breakpoint
      earlier than the panel geometry below.

   Both themes, keyboard operable, motion additive. Every layer is visible by
   default and animation only runs where motion is welcome.
   ========================================================================== */

:root{
  --chat-inset:18px;                        /* corner gutter, matches buddy.css */
  --chat-stack:calc(18px + 54px + 12px);    /* Buddy inset, Buddy height, gap */
  --chat-w:368px;
}
/* Buddy goes compact at 520px: inset 14px, height 50px. The stack follows at
   the same width, not at the 560px panel breakpoint, so the gap is right on
   both sides of it. */
@media (max-width:520px){
  :root{
    --chat-inset:14px;
    --chat-stack:calc(14px + 50px + 10px);
  }
}

/* ==========================================================================
   1. SHARED MESSAGE CLASSES
   ========================================================================== */

.chat-log{
  overflow-y:auto;overflow-x:hidden;
  padding:14px 16px 6px;
  background:var(--bg);
  scrollbar-width:thin;
}
.chat-log:focus-visible{outline-offset:-3px}

.chat-day{
  display:flex;align-items:center;gap:10px;
  margin:6px 0 12px;
  font-family:var(--font-m);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);
}
.chat-day::before,.chat-day::after{content:"";flex:1;height:1px;background:var(--line)}

.chat-msg{
  display:flex;flex-direction:column;gap:4px;
  max-width:84%;margin:0 0 13px;
}
.chat-msg.from-customer{margin-left:auto;align-items:flex-end}
.chat-msg.from-agent{margin-right:auto;align-items:flex-start}
.chat-msg.from-system{max-width:100%;margin-inline:auto;align-items:center}

.chat-bubble{
  padding:9px 13px;border-radius:15px;
  font-size:14px;line-height:1.5;
  overflow-wrap:anywhere;
}
.from-customer .chat-bubble{
  background:var(--acc);color:var(--on-acc);
  border-bottom-right-radius:5px;
}
.from-agent .chat-bubble{
  background:var(--bg-3);color:var(--fg);
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
}

.chat-byline{
  margin:0;padding-inline:3px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.05em;
  color:var(--fg-2);
}

.chat-sys{
  margin:0;padding:6px 12px;border-radius:999px;
  background:var(--bg-4);color:var(--fg-2);
  font-family:var(--font-m);font-size:11px;letter-spacing:.03em;text-align:center;
}

.chat-empty{
  margin:26px 8px;text-align:center;
  font-size:13px;line-height:1.6;color:var(--fg-2);
}

/* ==========================================================================
   2. THE SHOPPER PANEL
   ========================================================================== */

/* An HTML hidden attribute loses to display on a flex or grid box, so both
   layers restate it. Nothing here may be reachable by keyboard while shut. */
.chat-launcher[hidden],.chat-panel[hidden]{display:none!important}

.chat-launcher{
  position:fixed;z-index:60;
  right:var(--chat-inset);
  bottom:calc(var(--chat-stack) + var(--bd-lift, 0px));
  display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 17px;border-radius:999px;
  background:var(--acc);color:var(--on-acc);
  border:1px solid transparent;
  font-weight:700;font-size:13.5px;letter-spacing:.01em;
  box-shadow:var(--elev);
  transition:transform .14s ease,background .18s ease;
}
.chat-launcher:hover{background:var(--acc-2);transform:translateY(-2px)}
.chat-launcher:active{transform:translateY(0)}
.chat-launcher-ic{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto}
.chat-launcher-ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.chat-launcher-t{white-space:nowrap}
.chat-launcher-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--fg);color:var(--bg);
  font-size:11px;font-weight:700;line-height:20px;text-align:center;
}
.chat-launcher-badge[hidden]{display:none}

.chat-panel{
  position:fixed;z-index:70;
  right:var(--chat-inset);
  bottom:calc(var(--chat-inset) + var(--bd-lift, 0px));
  display:flex;flex-direction:column;
  width:min(var(--chat-w),calc(100vw - (var(--chat-inset) * 2)));
  max-height:min(600px,calc(100dvh - 96px - var(--bd-lift, 0px)));
  background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:var(--radius-l);
  box-shadow:var(--elev);
  overflow:hidden;
}

.chat-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:15px 15px 12px 18px;border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.chat-panel-id{min-width:0}
.chat-panel-eyebrow{
  margin:0 0 2px;font-family:var(--font-m);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2);
}
.chat-panel-title{font-size:16.5px;letter-spacing:-.01em}
.chat-panel-meta{
  margin:3px 0 0;font-family:var(--font-m);font-size:11px;letter-spacing:.03em;
  color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-panel-x{
  width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;color:var(--fg-2);
}
.chat-panel-x:hover{background:var(--bg-4);color:var(--fg)}
.chat-panel-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* The honest label. It is never dressed down and never scrolls away. */
.chat-panel-seam{
  margin:0;padding:9px 18px;
  background:var(--info-bg);border-bottom:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--fg-2);
}

.chat-panel .chat-log{flex:1 1 auto;min-height:150px}

.chat-panel-status{
  margin:0;padding:9px 18px 0;
  font-family:var(--font-m);font-size:11px;line-height:1.5;letter-spacing:.02em;
  color:var(--fg-2);
}

.chat-panel-form{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:11px 15px 15px 18px;
}
.chat-panel-input{padding:11px 13px;font-size:14px;border-radius:11px}
.chat-panel-send{
  padding:0;width:44px;height:44px;border-radius:11px;
  align-self:end;justify-self:end;
}
.chat-panel-send svg{width:18px;height:18px}

/* Buddy drops its wordmark and shrinks its launcher at 520px, so the chat
   launcher does the same at the same width and the pair never reads as one
   compact button stacked on one wide one. A media query carries no extra
   specificity, so this block has to sit after the base rules to win. */
@media (max-width:520px){
  .chat-launcher{height:46px;padding:0 14px;gap:7px}
  .chat-launcher-t{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

/* Small screens: the panel takes the bottom of the viewport. */
@media (max-width:560px){
  .chat-panel{
    right:10px;left:10px;
    bottom:calc(10px + var(--bd-lift, 0px));
    width:auto;
    max-height:min(76dvh,calc(100dvh - 84px - var(--bd-lift, 0px)));
    border-radius:var(--radius);
  }
  .chat-msg{max-width:90%}
}

/* Motion is additive. The panel is fully visible the moment it is unhidden,
   and this only adds the rise on the way in, where motion is welcome. */
@media (prefers-reduced-motion:no-preference){
  .chat-panel{animation:chat-rise .2s cubic-bezier(.4,0,.2,1)}
  @keyframes chat-rise{from{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){
  .chat-launcher{transition:none}
  .chat-launcher:hover{transform:none}
}


/* ===== consent.css ===== */
/* ==========================================================================
   AT EAZE - the storage notice and its expanded detail. Nothing else.

   The bar is body level furniture at z-index 40, the bottom of the documented
   stacking order, so every drawer, overlay, modal and toast sits above it. It
   is fixed, so it never moves the page when it appears. Its right side keeps
   clear of the concierge launcher that floats at z-index 60.

   Tokens are declared once in app.css. Nothing here restates one. The one
   colour value below that is not a token is the lift under the bar: --elev
   casts downward, and a bar pinned to the bottom of the viewport needs the
   shadow thrown up the page instead. It is a component scoped custom property
   so it still swaps with the theme, following --elev: the ink tint carries the
   bright theme, black carries the dark one.
   ========================================================================== */

.aez-consent{
  --aez-consent-lift:0 -26px 50px -34px rgba(24,18,48,.55);
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bg-2);color:var(--fg);
  border-top:1px solid var(--line-2);
  box-shadow:0 -1px 0 var(--line), var(--aez-consent-lift);
  font-size:13.5px;line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
[data-theme="dark"] .aez-consent{--aez-consent-lift:0 -26px 54px -34px rgba(0,0,0,.8)}
.aez-consent[hidden]{display:none!important}
.aez-consent:focus{outline:none}

/* the launcher at z-index 60 lives bottom right, so leave it a lane */
.aez-consent-in{
  max-width:var(--wrap);margin-inline:auto;
  padding-left:var(--gutter);
  padding-right:calc(var(--gutter) + 60px);
}

@media (prefers-reduced-motion: no-preference){
  /* toggling the hidden attribute restarts this, so a reopen slides too */
  .aez-consent{animation:aez-consent-rise .3s cubic-bezier(.22,.85,.3,1) both}
}
@keyframes aez-consent-rise{from{transform:translateY(101%)}to{transform:translateY(0)}}

/* ---------------------------------------------------------- collapsed row */
.aez-consent-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;
  padding:12px 0 13px;
}
.aez-consent-copy{flex:1 1 320px;min-width:0}
.aez-consent-h{
  margin:0;font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--fg);
}
.aez-consent-lede{margin:2px 0 0;color:var(--fg-2);font-size:12.75px;max-width:74ch}
.aez-consent-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.aez-consent-acts-main{flex:0 0 auto}
.aez-consent-status{
  margin:0;padding:0 0 11px;font-size:11.5px;color:var(--fg-3);letter-spacing:.01em;
}
/* never display:none, or the live region can stop announcing. zero height
   keeps it out of the layout while it is still in the accessibility tree. */
.aez-consent-status:empty{height:0;padding:0;overflow:hidden}
/* set by the script when the strip would otherwise crowd a short screen */
.aez-consent.is-compact .aez-consent-lede-a{display:none}

/* -------------------------------------------------------- expanded detail */
.aez-consent-detail{
  border-bottom:1px solid var(--line);
  max-height:min(62vh,560px);
  overflow-y:auto;overscroll-behavior:contain;
}
.aez-consent-detail[hidden]{display:none!important}
.aez-consent-detail-in{padding:16px 0 18px;max-width:96ch}

.aez-consent-dh{
  margin:0 0 6px;font-family:var(--font-u);font-weight:700;
  font-size:16.5px;line-height:1.2;letter-spacing:-.012em;
}
.aez-consent-dh:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px}
.aez-consent-sh{
  margin:20px 0 6px;font-family:var(--font-m);font-weight:700;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
}
.aez-consent-p{margin:0 0 10px;color:var(--fg-2)}
.aez-consent-note{margin:14px 0 0;color:var(--fg-3);font-size:12.25px}
/* the policy note and the privacy note read as one closing block */
.aez-consent-note + .aez-consent-note{margin-top:8px}
.aez-consent-note a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}

/* what is stored */
.aez-consent-inv{
  margin:10px 0 0;padding:0;
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;
}
.aez-consent-item{background:var(--bg-3);padding:9px 12px}
.aez-consent-item dt{
  margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 8px;
}
.aez-consent-item-h{font-weight:700;color:var(--fg);font-size:13px}
.aez-consent-item dd{margin:3px 0 0;color:var(--fg-2);font-size:12.5px}
.aez-consent-key{
  font-size:11px;color:var(--fg-2);background:var(--bg-4);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;
}
/* small text on a --bg-3 ground, so --fg-2 not --fg-3: app.css records that
   --fg-3 misses AA on --bg-3 in the dark theme */
.aez-consent-scope{
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);
}
.aez-consent-key.is-where{font-family:var(--font-u);letter-spacing:.01em}
.aez-consent-live{
  margin:10px 0 0;color:var(--fg-2);font-size:12.5px;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;
}

/* the choice */
.aez-consent-choice{display:grid;gap:8px;margin:0}
.aez-consent-opt{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid var(--line);border-radius:var(--radius-s);
  padding:11px 13px;background:var(--bg-3);color:var(--fg-2);font-size:12.75px;
}
label.aez-consent-opt{cursor:pointer}
label.aez-consent-opt:hover{border-color:var(--line-2)}
.aez-consent-opt b{color:var(--fg);font-size:13px}
.aez-consent-opt input[type="checkbox"]{
  width:18px;height:18px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--acc);cursor:pointer;
}
.aez-consent-lock{
  flex:0 0 auto;margin-top:1px;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);background:var(--bg-4);border:1px solid var(--line);
  border-radius:999px;padding:3px 8px;
}
.aez-consent-said{margin:2px 0 0;color:var(--fg-3);font-size:12.25px}
.aez-consent-acts-save{margin:12px 0 0}

/* the CASL ledger */
.aez-consent-subs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aez-consent-sub{
  display:grid;gap:2px;
  border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--radius-s);background:var(--bg-3);padding:9px 12px;
}
.aez-consent-sub.is-on{border-left-color:var(--good)}
.aez-consent-sub.is-off{border-left-color:var(--fg-3)}
.aez-consent-sub-a{font-size:12.5px;color:var(--fg);font-weight:700;word-break:break-word}
.aez-consent-sub-s{font-size:12.5px;color:var(--fg-2)}
/* the state colour as text, not as a fill, so it takes the ink pair */
.aez-consent-sub.is-on .aez-consent-sub-s{color:var(--good-ink)}
.aez-consent-sub-x{font-size:11.5px;color:var(--fg-2)}

.aez-consent-danger{color:var(--bad-ink);border-color:var(--bad-ink)}
.aez-consent-danger:hover{background:var(--bad-bg)}

/* ------------------------------------------------------------- narrow view */
@media (max-width:720px){
  .aez-consent-in{padding-right:calc(var(--gutter) + 56px)}
  .aez-consent-row{padding:9px 0 10px;gap:6px 12px}
  .aez-consent-lede{font-size:12.25px}
  .aez-consent-acts-main{flex:1 1 100%}
  .aez-consent-acts-main .btn{flex:1 1 0;min-width:0}
  .aez-consent-detail{max-height:min(56vh,460px)}
  .aez-consent-detail-in{padding:14px 0 16px}
}
@media (max-width:420px){
  .aez-consent-h{font-size:13.5px}
  .aez-consent-lede{font-size:12px;line-height:1.4}
  .aez-consent-item{padding:8px 10px}
  .aez-consent-in{padding-right:calc(var(--gutter) + 52px)}
}

/* --------------------------------------------- the block in /account/ */
/* account.js owns that view and its stylesheet. This adds spacing only, so
   the appended CASL ledger sits with the panels around it. */
.aez-consent-acct{margin-top:18px}