/* ==========================================================================
   Decathlon prototype — design tokens + component library
   Source of truth: design_png/*.png (393 x 852 iPhone frames, 1x px)
   Sections: 1 tokens · 2 base/shell · 3 canvases · 4 v1 absolute helpers ·
   5 wordmark · 6 tab bar · 7 brand header · v2 flow components (8+)
   ========================================================================== */

:root {
  /* Brand */
  --brand: #0F96DB;            /* hearts, pins, icon circles, links */
  --brand-press: #0B7FBC;
  --navy: #012A4A;             /* primary CTA, active chips */
  --ink-deep: #001F30;         /* slider range, selected ring, swatch */
  --steel: #61A5C2;            /* borders, muted blue text */
  --border: #A9D6E5;           /* hairlines, panel borders */
  --surface: #E5F2F7;          /* cards, chips */
  --promo: #C4E0EC;            /* promo input, slider track */
  --tile: #D9EDF4;             /* icon tiles */
  --tile-2: #D3EAF2;           /* avatar / result circle */
  --profile: #EBFAFF;          /* profile card */
  --divider-soft: #D4EAF2;
  --peach: #FBD7B1;            /* active tab pill */
  --home: #9FD5F1;             /* Home canvas (#0F96DC @40%) */

  /* Semantic */
  --star: #FFC727;
  --sale: #F23A3A;             /* strikethrough MRP */
  --ok: #3AAA35;  --ok-bg: #E1F5DF;
  --club: #34C30C;
  --warn: #F0A500; --warn-bg: #FFF5CA;
  --danger: #E0453A; --danger-bg: #FDE9E7;
  --info-bg: #E5F2F7;

  /* Text */
  --text: #111111;
  --text-strong: #000000;
  --muted: #999999;
  --muted-2: #6B7C86;
  --order-id: #203B4A;
  --on-dark: #FFFFFF;

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r: 8px;             /* buttons, chips, cards, inputs */
  --r-tile: 10px;       /* photo tiles */
  --r-hero: 16px;       /* hero banner */
  --r-profile: 14px;
  --r-sheet: 20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(1, 42, 74, .06), 0 2px 8px rgba(1, 42, 74, .06);
  --shadow-2: 0 6px 24px rgba(1, 42, 74, .14);
  --shadow-tab: 0 -4px 10px rgba(0, 0, 0, .12);

  /* Layout */
  --w: 393px;
  --gutter: 24px;
  --tabbar-h: 68px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: 200ms;

  /* z-index scale */
  --z-sticky: 40; --z-cta: 45; --z-tab: 50; --z-toast: 800; --z-sheet: 900; --z-dialog: 950;
}

/* --------------------------------------------------------------------------
   2 · Base + shell
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #EAF1F5; color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.capture { background: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, ul, ol, figure { margin: 0; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Absolute canvas (pixel-matched originals): place children with .abs/.t */
.screen { position: relative; width: var(--w); min-height: 100vh; margin: 0 auto; background: #fff; overflow: hidden; isolation: isolate; }
body.capture .screen { margin: 0; }

/* Flow page (extended screens) */
.page { position: relative; width: var(--w); min-height: 100vh; margin: 0 auto; background: #fff; padding: 0 var(--gutter) calc(var(--tabbar-h) + 40px); overflow-x: hidden; }
.page--no-nav { padding-bottom: 140px; }       /* flows with a .cta-bar */
.page--bare { padding-bottom: 40px; }          /* no tab bar, no cta-bar */
.page--flush { padding-left: 0; padding-right: 0; }
body.capture .page { margin: 0; min-height: 852px; }

/* Interaction primitives */
.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), opacity var(--dur), background-color var(--dur), box-shadow var(--dur); }
.tap:active { transform: scale(.97); filter: brightness(.94); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, .tap:focus-visible, input:focus-visible + .checkc, input:focus-visible + .radio-dot { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.hit { position: relative; }
.hit::after { content: ''; position: absolute; inset: -8px; }   /* extend small hit areas to ~44 */

/* Layout utilities */
.row-flex { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--gap, 16px); }
.center { text-align: center; }
.bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.muted { color: var(--muted); } .c-brand { color: var(--brand); } .c-steel { color: var(--steel); } .c-navy { color: var(--navy); }
.c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-danger { color: var(--danger); } .c-sale { color: var(--sale); }
.fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   3 · Canvases
   -------------------------------------------------------------------------- */
.bg-home { background: var(--home); }
.bg-sky { background: linear-gradient(180deg, #C0E4F5 0px, #FFFFFF 450px, #FFFFFF 55%, #B3DDF3 100%); }
.bg-welcome { background: linear-gradient(180deg, #012639 0px, #075881 200px, #1296DB 420px, #086B9D 600px, #01334D 100%); color: #fff; }
.bg-white { background: #fff; }
.bg-surface { background: var(--surface); }

/* --------------------------------------------------------------------------
   4 · v1 absolute helpers (pixel-matched originals)
   .t: absolute text, line-height 1. Poppins metrics: cap-top sits 0.15em below
   the box top, so  top = capTop(px in PNG) - 0.15 * font-size.
   -------------------------------------------------------------------------- */
.abs { position: absolute !important; }
.t { position: absolute; line-height: 1; white-space: nowrap; }
.img-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Any image container: tinted fallback so screens degrade gracefully */
.ph { background: linear-gradient(135deg, #CFE6F1, #A9D6E5); overflow: hidden; position: relative; }
.ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph--warm { background: linear-gradient(135deg, #F6D9C0, #E8B48E); }
.ph--green { background: linear-gradient(135deg, #CFE8C8, #9CC98F); }
.ph--dark { background: linear-gradient(135deg, #34495A, #16283A); }
img.is-broken { visibility: hidden; }

/* Photo tile (category / sport grid) */
.tile { display: block; width: 80px; height: 80px; border-radius: var(--r-tile); overflow: hidden; position: relative; background: linear-gradient(135deg, #CFE6F1, #A9D6E5); box-shadow: 0 1px 2px rgba(1, 42, 74, .08); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.tile:active img { transform: scale(1.06); }
.tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 10px; font-weight: 500; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.tile-grid { display: grid; grid-template-columns: repeat(4, 80px); justify-content: space-between; row-gap: 19px; }
.tile-grid--labeled { row-gap: 14px; }
.tile-cap { display: block; margin-top: 6px; font-size: 11px; line-height: 1.25; text-align: center; color: var(--text); }

/* --------------------------------------------------------------------------
   5 · DECATHLON wordmark (inline SVG snippet in BUILD_BRIEF; or this mask class)
   <span class="wordmark" role="img" aria-label="Decathlon"></span>  (black)
   <span class="wordmark wordmark--white" ...>                         (white)
   Size with width; aspect is 135:21.
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-block; width: 135px; aspect-ratio: 135 / 21; background: currentColor; color: #111;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 21'%3E%3Cpath fill-rule='evenodd' d='M0 .5h8.2C13.2.5 16.4 4.4 16.4 10.5S13.2 20.5 8.2 20.5H0Zm5.2 5v10h2.4c2.2 0 3.6-1.9 3.6-5s-1.4-5-3.6-5Z'/%3E%3Cpath d='M16 .5h12.4v4.6h-7.2v3h6.9v4.4h-6.9v3.4h7.3v4.6H16Z'/%3E%3Cpath d='M45.6 3.4C43.9 1.4 41.5.3 38.7.3 33.4.3 29.6 4.5 29.6 10.5s3.8 10.2 9.1 10.2c2.8 0 5.2-1.1 6.9-3.1l-3.5-3.5c-.8 1-1.9 1.6-3.2 1.6-2.3 0-3.9-2-3.9-5.2s1.6-5.2 3.9-5.2c1.3 0 2.4.6 3.2 1.6Z'/%3E%3Cpath fill-rule='evenodd' d='M50 .5h6v20h-5.2v-4.9h-8.6v-3.2Zm.8 7.2-2.9 4.6h2.9Z'/%3E%3Cpath d='M57 .5h12.6v4.6h-3.7v15.4h-5.2V5.1H57Z'/%3E%3Cpath d='M71 .5h5v7.6h6V.5h5v20h-5v-7.9h-6v7.9h-5Z'/%3E%3Cpath d='M88.2.5h5.4v15h6.4v5H88.2Z'/%3E%3Cpath fill-rule='evenodd' d='M107.4.3c5.8 0 10.2 4.4 10.2 10.2s-4.4 10.2-10.2 10.2S97.2 16.3 97.2 10.5 101.6.3 107.4.3Zm0 5c-2.4 0-4.2 2.2-4.2 5.2s1.8 5.2 4.2 5.2 4.2-2.2 4.2-5.2-1.8-5.2-4.2-5.2Z'/%3E%3Cpath d='M117.6.5h5.4l6.4 10V.5h5.4v20h-5.2l-6.6-10.3v10.3h-5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 21'%3E%3Cpath fill-rule='evenodd' d='M0 .5h8.2C13.2.5 16.4 4.4 16.4 10.5S13.2 20.5 8.2 20.5H0Zm5.2 5v10h2.4c2.2 0 3.6-1.9 3.6-5s-1.4-5-3.6-5Z'/%3E%3Cpath d='M16 .5h12.4v4.6h-7.2v3h6.9v4.4h-6.9v3.4h7.3v4.6H16Z'/%3E%3Cpath d='M45.6 3.4C43.9 1.4 41.5.3 38.7.3 33.4.3 29.6 4.5 29.6 10.5s3.8 10.2 9.1 10.2c2.8 0 5.2-1.1 6.9-3.1l-3.5-3.5c-.8 1-1.9 1.6-3.2 1.6-2.3 0-3.9-2-3.9-5.2s1.6-5.2 3.9-5.2c1.3 0 2.4.6 3.2 1.6Z'/%3E%3Cpath fill-rule='evenodd' d='M50 .5h6v20h-5.2v-4.9h-8.6v-3.2Zm.8 7.2-2.9 4.6h2.9Z'/%3E%3Cpath d='M57 .5h12.6v4.6h-3.7v15.4h-5.2V5.1H57Z'/%3E%3Cpath d='M71 .5h5v7.6h6V.5h5v20h-5v-7.9h-6v7.9h-5Z'/%3E%3Cpath d='M88.2.5h5.4v15h6.4v5H88.2Z'/%3E%3Cpath fill-rule='evenodd' d='M107.4.3c5.8 0 10.2 4.4 10.2 10.2s-4.4 10.2-10.2 10.2S97.2 16.3 97.2 10.5 101.6.3 107.4.3Zm0 5c-2.4 0-4.2 2.2-4.2 5.2s1.8 5.2 4.2 5.2 4.2-2.2 4.2-5.2-1.8-5.2-4.2-5.2Z'/%3E%3Cpath d='M117.6.5h5.4l6.4 10V.5h5.4v20h-5.2l-6.6-10.3v10.3h-5.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wordmark--white { color: #fff; }
.wordmark--navy { color: var(--navy); }

/* --------------------------------------------------------------------------
   6 · Bottom tab bar (injected by app.js into <nav data-tabbar="...">)
   -------------------------------------------------------------------------- */
.tabbar { position: fixed; z-index: var(--z-tab); bottom: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); height: var(--tabbar-h); background: #fff; box-shadow: var(--shadow-tab); padding-bottom: env(safe-area-inset-bottom); }
.tabbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(0,0,0,.04); }
.tab { position: absolute; top: 7px; height: 51px; min-width: 50px; padding: 0 5px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; border-radius: 8px; color: #000; font-size: 10.5px; line-height: 12px; white-space: nowrap; transition: background-color var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.tab svg { width: 27px; height: 27px; margin-top: 0; transition: transform 260ms var(--ease-spring); }
.tab span { margin-top: 12px; letter-spacing: .1px; }
.tab:active svg { transform: scale(.9); }
.tab[aria-current="page"] { background: var(--peach); box-shadow: 0 2px 4px rgba(0,0,0,.2); padding: 0 7px; }
.tab[aria-current="page"] svg { margin-top: 4px; width: 26px; height: 26px; }
.tab[aria-current="page"] span { margin-top: 6px; }
.tab__badge { position: absolute; top: -3px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; font: 600 9.5px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }
.tab__badge:empty, .tab__badge[data-n="0"] { display: none; }
body.capture.fullpage .tabbar { position: absolute; }

/* --------------------------------------------------------------------------
   7 · Brand header (Home / Category / Travel store) — 393 x 140 block with the
   original coordinates baked in: logo @21,22 · icons @294/321/348 · delivery
   row @y52 · search pill 25..321 x 91..127 · QR @343,97.
   -------------------------------------------------------------------------- */
.brand-head { position: relative; height: 140px; }
.brand-head__logo { position: absolute; left: 17px; top: 16px; padding: 6px 4px; border-radius: 6px; display: block; line-height: 0; }
.brand-head__logo .wordmark { width: 135px; display: block; }
.brand-head__icons { position: absolute; top: 18px; left: 280px; display: flex; }
.head-icon { position: relative; width: 27px; height: 28px; display: grid; place-items: center; color: #000; border-radius: 8px; }
.head-icon::after { content: ''; position: absolute; inset: -8px -1px; }
.head-icon svg { width: 16px; height: 16px; }
.count-badge { position: absolute; top: -2px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--navy); color: #fff; font: 600 8.5px/14px var(--font); text-align: center; box-shadow: 0 0 0 1.5px var(--badge-ring, #9FD5F1); pointer-events: none; }
.count-badge[data-n="0"], .count-badge:empty { display: none; }
.delivery { position: absolute; left: 15px; top: 47px; height: 26px; padding: 0 6px 0 4px; display: flex; align-items: center; gap: 2px; font-size: 12px; letter-spacing: -.12px; line-height: 1; color: #111; border-radius: 6px; white-space: nowrap; }
.delivery b { font-weight: 600; }
.delivery svg { width: 15px; height: 15px; margin-right: 0; }
.search-pill { position: absolute; left: 25px; top: 91px; width: 297px; height: 36px; border-radius: var(--r-pill); background: #fff; display: flex; align-items: center; padding: 0 10px 0 10px; color: #111; }
.search-pill__go { flex: 1; align-self: stretch; display: flex; align-items: center; gap: 10px; padding-left: 0; font-size: 14px; color: #8C9AA3; border-radius: var(--r-pill); }
.search-pill__go svg { width: 17px; height: 17px; color: #111; margin-left: -1px; }
.search-pill__mic { width: 32px; height: 36px; display: grid; place-items: center; margin-right: -9px; color: #111; }
.search-pill__mic svg { width: 17px; height: 17px; }
.qr-btn { position: absolute; left: 336px; top: 91px; width: 40px; height: 36px; display: grid; place-items: center; color: #111; border-radius: 8px; }
.qr-btn svg { width: 26px; height: 24px; }

/* ==========================================================================
   v2 COMPONENTS — flow layout (extended screens). Values from the originals.
   ========================================================================== */

/* 8 · App bar: back chevron + 20/600 title + right actions. Height 78, then the
   2-tone divider. Title cap-top lands on y33 like Bag / Checkout / Account. */
.appbar { display: flex; align-items: center; gap: 10px; height: 78px; padding-top: 4px; }
.appbar .back { width: 28px; height: 44px; margin-left: -10px; display: grid; place-items: center; color: #000; border-radius: 8px; flex-shrink: 0; }
.appbar .back svg { width: 10px; height: 17px; }
.appbar__title { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; line-height: 28px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__sub { display: block; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--muted); }
.appbar__action { flex-shrink: 0; min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: #000; }
.appbar__action--brand { color: var(--brand); }
.appbar__icons { display: flex; align-items: center; margin-right: -6px; }
.appbar__icon { position: relative; width: 27px; height: 44px; display: grid; place-items: center; color: #000; border-radius: 8px; }
.appbar__icon svg { width: 16px; height: 16px; }
.appbar__icon .count-badge { top: 6px; --badge-ring: #fff; }

/* 2-tone page divider (full-bleed): 1px #D4EAF2 · 2px #A9D6E5 · 1px #D4EAF2 */
.page-divider { height: 4px; margin: 0 calc(-1 * var(--gutter)); background: linear-gradient(180deg, var(--divider-soft) 0 1px, var(--border) 1px 3px, var(--divider-soft) 3px 4px); }
.page-divider--steel { height: 2px; background: var(--steel); }
.hr { height: 1px; background: var(--border); border: 0; margin: 16px 0; }
.rule { height: 4px; border-radius: 2px; background: var(--border); }   /* PDP thick rounded rule */

/* Section header with See all */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.section-head:first-child { margin-top: 20px; }
.section-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #000; }
.section-title--lg { font-size: 20px; }
.see-all { font-size: 13px; color: #000; padding: 10px 0; margin: -10px 0; }
.see-all--brand { color: var(--brand); font-weight: 500; }
.label-caps { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--steel); }

/* 9 · Buttons (8r). Height 34 matches the originals; --lg 48 for thumb CTAs */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; padding: 0 16px; border-radius: var(--r); font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap; user-select: none; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #033A63; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--white { background: #fff; color: var(--brand); }
.btn--outline { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1px var(--border); }
.btn--outline-steel { background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px var(--steel); font-weight: 400; }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--soft { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--steel); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger-soft { background: var(--danger-bg); color: var(--danger); }
.btn--lg { height: 48px; }
.btn--md { height: 34px; font-size: 15px; font-weight: 500; }
.btn--sm { height: 30px; font-size: 14px; font-weight: 400; padding: 0 12px; width: auto; }
.btn--auto { width: auto; }
.btn svg { width: 18px; height: 18px; }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin 700ms linear infinite; }
.btn--outline.is-loading::after, .btn--white.is-loading::after, .btn--ghost.is-loading::after, .btn--soft.is-loading::after, .btn--outline-steel.is-loading::after { border-color: rgba(15,150,219,.25); border-top-color: var(--brand); }
.btn.is-done { background: var(--ok); color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.text-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; color: var(--steel); }
.text-btn--brand { color: var(--brand); font-weight: 500; }
.text-btn--danger { color: var(--danger); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: #fff; color: #111; box-shadow: inset 0 0 0 1px var(--border); }
.icon-btn svg { width: 20px; height: 20px; }

/* 10 · Chips. Active navy / inactive light-blue bordered (Search results, Orders) */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: var(--r); background: var(--surface); color: #111; box-shadow: inset 0 0 0 1.5px var(--steel); font-size: 14px; line-height: 1; white-space: nowrap; flex-shrink: 0; transition: background-color var(--dur), color var(--dur), box-shadow var(--dur); cursor: pointer; }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.chip svg { width: 14px; height: 14px; }
.chip__x { margin-right: -4px; opacity: .8; }
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
.chip-scroll::-webkit-scrollbar { display: none; }

/* 11 · Product card (Search results 167x138; with Add to bag 167x186) */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 13px; }
.pcard { position: relative; display: block; background: var(--surface); border-radius: var(--r); box-shadow: inset 0 0 0 2px var(--steel); padding: 7px 7px 8px; color: #111; min-width: 0; }
.pcard__media { position: relative; display: block; height: 84px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #DCE7EC, #C4D6DE); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { display: block; padding: 0 1px; }
.pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.pcard__name { font-size: 10.5px; line-height: 13px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pcard__brand { display: block; font-size: 9px; color: var(--steel); line-height: 11px; margin-top: 5px; text-transform: uppercase; letter-spacing: .5px; }
.pcard__price { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; }
.pcard .add-btn { margin-top: 8px; }
.pcard--rail { width: 150px; flex-shrink: 0; }
.pcard--rail .pcard__media { height: 96px; }
.pcard--white { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.add-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; border-radius: var(--r); background: var(--navy); color: #fff; font-size: 15px; font-weight: 500; position: relative; }
.add-btn.is-loading { color: transparent; pointer-events: none; }
.add-btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin 700ms linear infinite; }
.add-btn.is-added { background: var(--ok); }

.pcard > .heart { top: 11px; right: 11px; }

/* Price */
.price { font-size: 13px; font-weight: 700; color: #000; font-variant-numeric: tabular-nums; }
.price--lg { font-size: 18px; }
.price--md { font-size: 15px; }
.mrp { font-size: 10px; color: var(--sale); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
.mrp--lg { font-size: 14px; }
.off { font-size: 11px; font-weight: 600; color: var(--ok); }

/* Heart toggle (wishlist) — [data-heart="productId"] wired by app.js */
.heart { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #111; z-index: 2; }
.heart::after { content: ''; position: absolute; inset: -12px; }
/* .heart is always a positioned box (absolute by default) so its ::after hit area stays anchored; use .heart--inline in flow */
.heart--inline { position: relative; top: auto; right: auto; }
.heart svg { width: 9px; height: 9px; }
.heart .h-fill { display: none; }
.heart.is-on { color: var(--brand); }
.heart.is-on .h-fill { display: block; }
.heart.is-on .h-line { display: none; }
.heart.pop svg { animation: heart-pop 360ms var(--ease-spring); }
.heart--box { width: 42px; height: 40px; border-radius: var(--r); top: 10px; right: 11px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.heart--box::after { inset: -2px; }
.heart--box svg { width: 22px; height: 22px; }
.heart--round { width: 32px; height: 32px; top: 8px; right: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.heart--round svg { width: 16px; height: 16px; }
.heart--round::after { inset: -6px; }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Stars — Deca.stars(rating) renders; or static svgs inside .stars */
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--star); flex-shrink: 0; }
.stars svg { width: 9px; height: 9px; }
.stars--md svg { width: 14px; height: 14px; }
.stars--lg { gap: 5px; }
.stars--lg svg { width: 16px; height: 16px; }
.stars .s-empty { color: #111; }
.stars svg:not(.s-empty) path { stroke: #2B2100; stroke-width: 1.1; stroke-linejoin: round; }
.rating-input { display: flex; gap: 10px; }
.rating-input button { width: 40px; height: 40px; display: grid; place-items: center; color: #C9D6DD; transition: transform 200ms var(--ease-spring), color var(--dur); }
.rating-input button svg { width: 32px; height: 32px; }
.rating-input button.is-on { color: var(--star); }
.rating-input button:active { transform: scale(.85); }

/* 12 · Photo tile w/ label (stores / promos) */
.photo { display: block; border-radius: var(--r-tile); overflow: hidden; position: relative; background: linear-gradient(135deg, #CFE6F1, #A9D6E5); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-card { display: block; }
.photo-card .photo { height: 76px; }
.photo-card__label { display: block; margin-top: 7px; font-size: 13px; line-height: 1.3; color: #000; }
.hero-banner { display: block; border-radius: var(--r-hero); overflow: hidden; position: relative; background: linear-gradient(135deg, #2F5C7A, #0F96DB); }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; }
.hero-banner__text { position: absolute; left: 16px; bottom: 16px; right: 16px; color: #fff; }
.hero-banner__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.hero-banner__title { font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(1,42,74,.7)); z-index: 1; pointer-events: none; }
.hero-banner--plain::before { display: none; }
.hero-banner__text { z-index: 2; }
.dots { display: flex; gap: 5px; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); transition: width 260ms var(--ease-out), background-color 260ms; }
.dots i.on { width: 16px; background: #fff; }
.dots--dark i { background: var(--border); } .dots--dark i.on { background: var(--navy); }

/* 13 · Menu list rows (Account): blue circle icon + label + chevron */
.menu { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); background: #fff; overflow: hidden; }
.menu + .menu { margin-top: 13px; }
.menu__item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 20px 0 20px; position: relative; font-size: 14px; color: var(--steel); text-align: left; transition: background-color var(--dur); }
.menu__item:active { background: var(--surface); }
.menu__item + .menu__item::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: #D5D5D5; }
.menu__icon { width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.menu__icon svg { width: 10px; height: 10px; }
.menu__icon--lg { width: 36px; height: 36px; border-radius: var(--r); background: var(--tile); color: var(--brand); }
.menu__icon--lg svg { width: 20px; height: 20px; }
.menu__body { flex: 1; min-width: 0; padding: 10px 0; }
.menu__label { display: block; font-size: 14px; color: var(--steel); line-height: 20px; }
.menu__sub { display: block; font-size: 12px; color: var(--muted); line-height: 16px; }
.menu__meta { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.menu__item .chev { width: 18px; height: 18px; color: #000; flex-shrink: 0; margin-right: -4px; }
.menu__item--danger, .menu__item--danger .menu__label { color: var(--danger); }
.menu__item--dark .menu__label { color: #111; }

/* 14 · Panels */
.panel { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); background: #fff; padding: 16px; }
.panel--surface { background: var(--surface); }
.panel--profile { background: var(--profile); border-radius: var(--r-profile); }
.panel--steel { box-shadow: inset 0 0 0 1.5px var(--steel); }
.panel--tight { padding: 12px; }
.panel--flush { padding: 0; }
.panel + .panel { margin-top: 12px; }
.icon-tile { width: 42px; height: 42px; border-radius: var(--r); background: var(--tile); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--round { border-radius: 50%; }
.icon-circle { width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--tile-2); color: var(--brand); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 40px; height: 40px; }

/* 15 · Check-circle checkbox list (Filters) + radio list (Checkout) */
.checklist { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); padding: 6px 18px; }
.check-row { display: flex; align-items: center; gap: 11px; min-height: 42px; font-size: 14px; color: var(--steel); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.check-row--bold { font-size: 15px; font-weight: 600; }
.check-row--dark { color: #000; font-size: 16px; }
.check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check-row .count { margin-left: 4px; }
.checkc { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #000; display: grid; place-items: center; flex-shrink: 0; color: #000; transition: background-color var(--dur), box-shadow var(--dur), transform 220ms var(--ease-spring); }
.checkc::after { content: ''; width: 7px; height: 4px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }
input:checked + .checkc { background: #000; color: #fff; box-shadow: none; }
.checkc--soft { width: 19px; height: 19px; }
input:checked + .checkc--soft { background: var(--border); color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.check-row:active .checkc { transform: scale(.88); }
.radio-list { display: flex; flex-direction: column; }
.radio-list .check-row { min-height: 44px; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--steel); flex-shrink: 0; transition: box-shadow var(--dur); }
input:checked + .radio-dot { box-shadow: inset 0 0 0 6px var(--navy); }
.check-box { width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--steel); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
input:checked + .check-box { background: var(--navy); box-shadow: none; }
input:checked + .check-box::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

/* 16 · Size chips — PDP style (.sizes > .size) and filter style (.chip--size) */
.sizes { display: flex; gap: 7px; flex-wrap: wrap; }
.size { width: 31px; height: 31px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #000; transition: transform 220ms var(--ease-spring), box-shadow var(--dur); position: relative; }
.size::after { content: ''; position: absolute; inset: -6px -3px; }
.size[aria-checked="true"] { box-shadow: inset 0 0 0 2.6px var(--ink-deep); border-radius: 5px; transform: scale(1.19); z-index: 1; }
.size[aria-disabled="true"] { color: #B9C4CA; background: #F4F7F8; pointer-events: none; background-image: linear-gradient(135deg, transparent 47%, #C9D3D8 48% 52%, transparent 53%); }
.size--wide { width: auto; padding: 0 10px; }
.sizes.is-error .size { box-shadow: inset 0 0 0 1.5px var(--danger); animation: shake 360ms; }
.chip--size { width: 46px; padding: 0; height: 28px; border-radius: 6px; }

/* Colour swatches (PDP 23x23 r5, selected ring) */
.swatches { display: flex; gap: 5px; align-items: center; }
.swatch { width: 23px; height: 23px; border-radius: 5px; background: var(--c, #ccc); position: relative; transition: transform 220ms var(--ease-spring), box-shadow var(--dur); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.swatch::after { content: ''; position: absolute; inset: -10px -2px; }
.swatch[data-light] { box-shadow: inset 0 0 0 1px #C8D3D8; }
.swatch[aria-checked="true"] { transform: scale(1.26); box-shadow: inset 0 0 0 2px var(--ink-deep); margin: 0 3px; }
.swatch-name { font-size: 13px; color: var(--muted-2); }

/* 17 · Dual-thumb range (Filters). JS builds it from data-* on .dual-range */
.range-box { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); padding: 10px 12px 8px; }
.dual-range { position: relative; height: 44px; --a: 25%; --b: 75%; }
.dual-range__track { position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 4px; background: var(--promo); }
.dual-range__fill { position: absolute; top: 10px; height: 8px; left: var(--a); right: calc(100% - var(--b)); background: var(--ink-deep); }
.dual-range input { position: absolute; left: -7px; right: -7px; width: calc(100% + 14px); top: 4px; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25); cursor: grab; }
.dual-range input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--steel); border: 2px solid #fff; cursor: grab; }
.dual-range input::-webkit-slider-runnable-track { background: none; }
.dual-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.dual-range__lbl { position: absolute; top: 25px; transform: translateX(-50%); font-size: 12px; color: #111; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-deep) var(--p, 50%), var(--promo) var(--p, 50%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }

/* 18 · Qty stepper (Bag: black filled circles around qty) — [data-qty] */
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; transition: transform 160ms var(--ease-spring), opacity var(--dur); }
.qty button::after { content: ''; position: absolute; inset: -14px -8px; }
.qty button svg { width: 10px; height: 10px; }
.qty button:active { transform: scale(.8); }
.qty button[disabled] { opacity: .3; pointer-events: none; }
.qty output { min-width: 20px; text-align: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qty--lg { gap: 10px; }
.qty--lg button { width: 32px; height: 32px; background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--steel); }
.qty--lg button::after { inset: -6px; }
.qty--lg button svg { width: 14px; height: 14px; }
.qty--lg output { font-size: 16px; min-width: 24px; }

/* 19 · Forms */
.fg { display: block; position: relative; }
.fg + .fg { margin-top: 16px; }
.label { display: block; font-size: 14px; font-weight: 500; color: #000; margin: 0 0 6px 2px; }
.label .req { color: var(--danger); margin-left: 2px; }
.field { display: flex; align-items: center; width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r); background: #fff; border: 0; outline: 0; box-shadow: inset 0 0 0 1px var(--border); font-size: 15px; color: #111; transition: box-shadow var(--dur); -webkit-appearance: none; appearance: none; }
.field::placeholder { color: #9AAAB2; }
.field:focus, .field:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.field--surface { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--steel); }
.field--promo { background: var(--promo); box-shadow: none; height: 34px; font-size: 15px; }
.field--promo::placeholder { color: #111; }
textarea.field { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: none; }
select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field-affix { display: flex; align-items: center; gap: 8px; }
.field-affix input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 100%; padding: 0; font: inherit; color: inherit; }
.field-affix > span, .field-affix > svg { flex-shrink: 0; color: var(--muted-2); }
.field-affix .affix-btn { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--brand); padding: 8px 0 8px 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .fg + .fg { margin-top: 0; }
.helper { display: block; font-size: 12px; line-height: 16px; color: var(--muted-2); margin: 6px 0 0 2px; }
.error-text { display: none; font-size: 12px; line-height: 16px; color: var(--danger); margin: 6px 0 0 2px; }
.fg.has-error .field { box-shadow: inset 0 0 0 1.5px var(--danger); }
.fg.has-error .error-text { display: block; }
.fg.has-error .helper { display: none; }
.fg.is-valid .field { box-shadow: inset 0 0 0 1.5px var(--ok); }
.picker { justify-content: space-between; cursor: pointer; text-align: left; }
.picker .placeholder { color: #9AAAB2; }
.form-note { font-size: 12px; color: var(--muted-2); line-height: 1.5; }

/* Search field (Search results: #E5F2F7 pill, 2px #61A5C2) */
.search-row { display: flex; align-items: center; gap: 4px; height: 92px; padding-top: 4px; }
.search-row .back { width: 28px; height: 44px; margin-left: -10px; display: grid; place-items: center; color: #000; flex-shrink: 0; }
.search-row .back svg { width: 10px; height: 17px; }
.search-field { flex: 1; min-width: 0; height: 42px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 2px var(--steel); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #111; }
.search-field:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.search-field svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: #111; padding: 0; }
.search-field input::placeholder { color: #7D98A6; }
.search-field button { width: 30px; height: 36px; display: grid; place-items: center; margin-right: -6px; flex-shrink: 0; }
.search-field input::-webkit-search-cancel-button { display: none; }

/* OTP boxes + PIN keypad (ported from Spendee, light theme) */
.otp { display: flex; justify-content: space-between; gap: 8px; }
.otp input { width: 46px; height: 54px; border-radius: var(--r); border: 0; outline: 0; background: var(--surface); color: var(--navy); text-align: center; font: 600 22px var(--font); box-shadow: inset 0 0 0 1.5px var(--border); caret-color: var(--brand); transition: box-shadow var(--dur), background-color var(--dur); }
.otp input:focus { box-shadow: inset 0 0 0 2px var(--brand); background: #fff; }
.otp input.filled { box-shadow: inset 0 0 0 1.5px var(--navy); background: #fff; }
.otp.is-error input { box-shadow: inset 0 0 0 2px var(--danger); animation: shake 360ms; }
.otp.is-ok input { box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok); }
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 8px 0; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--steel); transition: background-color 160ms, box-shadow 160ms, transform 220ms var(--ease-spring); }
.pin-dots i.on { background: var(--navy); box-shadow: none; transform: scale(1.1); }
.pin-dots.is-error i { box-shadow: inset 0 0 0 1.5px var(--danger); animation: shake 360ms; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.keypad button { height: 56px; border-radius: 12px; font: 500 24px var(--font); color: #111; display: grid; place-items: center; transition: background-color 120ms; -webkit-tap-highlight-color: transparent; }
.keypad button:active { background: var(--surface); }
.keypad button.key-muted { color: var(--muted-2); }

/* 20 · Checkout stepper (Address / Payment / Confirm): <ol class="steps"> li.done / li.current */
.steps { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); margin: 22px 0 14px; counter-reset: s; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; color: #9DB5C1; text-align: center; }
.steps li::before { content: ''; position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--border); transition: background-color 300ms, box-shadow 300ms; }
.steps li::after { content: ''; position: absolute; top: 5.5px; left: calc(-50% + 6px); right: calc(50% + 6px); height: 1px; background: var(--border); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--brand); }
.steps li.done::before { background: var(--brand); box-shadow: none; }
.steps li.done + li::after, .steps li.done::after { background: var(--brand); }
.steps li.current { color: var(--navy); }
.steps li.current::before { background: var(--navy); box-shadow: 0 0 0 4px rgba(1,42,74,.14); }
.steps li.current::after { background: var(--brand); }
.step-caption { font-size: 12px; color: var(--muted-2); margin-top: -4px; }

/* 21 · Status pills */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: var(--r); font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1; }
.pill--sm { height: 22px; padding: 0 9px; font-size: 12px; }
.pill--delivered { background: var(--ok-bg); color: var(--ok); }
.pill--transit { background: var(--warn-bg); color: var(--warn); }
.pill--processing { background: var(--surface); color: var(--brand); }
.pill--cancelled { background: var(--danger-bg); color: var(--danger); }
.pill--returned { background: #EEF1F3; color: #56707D; }
.pill--club { background: #E6F8DF; color: var(--club); }
.pill--sale { background: #FDE8E8; color: var(--sale); }

/* 22 · Order card (Order history) */
.order-card { display: block; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); padding: 12px 12px 12px; background: #fff; }
.order-card + .order-card { margin-top: 9px; }
.order-card__head { display: flex; align-items: center; justify-content: space-between; }
.order-card__id { font-size: 11px; font-weight: 700; color: var(--order-id); letter-spacing: .1px; }
.order-card__body { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.order-card__thumbs { display: flex; gap: 4px; }
.thumb { width: 46px; height: 46px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #DCE7EC, #C4D6DE); flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--lg { width: 76px; height: 64px; }
.order-card__meta { font-size: 14px; color: #111; margin-left: 12px; }
.order-card__meta .price { display: block; font-size: 16px; margin-top: 2px; }
.order-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 12px 18px 0; }
.order-card__actions--one { grid-template-columns: 1fr; }
.order-card__actions .btn { height: 28px; font-size: 14px; font-weight: 400; color: #111; background: #fff; box-shadow: inset 0 0 0 1.5px var(--steel); border-radius: var(--r); padding: 0 8px; }

/* Bag line card */
.line-card { display: flex; align-items: center; gap: 22px; min-height: 84px; padding: 10px 12px 10px 10px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); background: #fff; }
.line-card + .line-card { margin-top: 14px; }
.line-card__body { flex: 1; min-width: 0; }
.line-card__name { font-size: 14px; color: #111; line-height: 20px; }
.line-card__meta { font-size: 11px; color: var(--muted-2); }
.line-card__price { display: flex; align-items: baseline; gap: 3px; margin-top: 10px; }
.line-card__price .price { font-size: 15px; }

/* 23 · Summary rows (kvs) */
.kvs { display: flex; flex-direction: column; }
.kvs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--steel); }
.kvs--sm > div { font-size: 13px; font-weight: 400; padding: 9px 0; }
.kvs .k { color: inherit; }
.kvs .v { text-align: right; font-variant-numeric: tabular-nums; }
.kvs .v--ok { color: var(--ok); }
.kvs .sep { height: 1px; padding: 0; background: var(--steel); margin: 6px 0; opacity: .8; }
.kvs .total { font-size: 17px; font-weight: 700; color: var(--navy); padding-top: 14px; }
.kvs--plain > div { color: #111; font-weight: 400; font-size: 14px; }
.kvs--plain .k { color: var(--muted-2); }

/* 24 · Timeline (order tracking) — ol.track > li.done / li.now */
.track { position: relative; }
.track li { position: relative; padding: 0 0 22px 36px; min-height: 44px; }
.track li::before { content: ''; position: absolute; left: 4px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--border); z-index: 1; }
.track li::after { content: ''; position: absolute; left: 11px; top: 18px; bottom: -2px; width: 2px; background: var(--border); }
.track li:last-child::after { display: none; }
.track li.done::before { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.8'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: none; }
.track li.done::after { background: var(--brand); }
.track li.now::before { background: var(--navy); box-shadow: 0 0 0 5px rgba(1,42,74,.14); }
.track li.now::after { background: linear-gradient(180deg, var(--brand), var(--border)); }
.track__title { display: block; font-size: 14px; font-weight: 600; color: #111; line-height: 20px; }
.track li:not(.done):not(.now) .track__title { color: var(--muted); font-weight: 500; }
.track__meta { display: block; font-size: 12px; color: var(--muted-2); line-height: 16px; margin-top: 2px; }

/* 25 · Banners */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 13px; line-height: 1.45; }
.banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.banner b { font-weight: 600; }
.banner--info { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1px var(--border); }
.banner--ok { background: var(--ok-bg); color: #24701F; }
.banner--warn { background: var(--warn-bg); color: #7A5600; }
.banner--danger { background: var(--danger-bg); color: #9C2A21; }
.banner--navy { background: var(--navy); color: #fff; }
.promo-banner { position: relative; display: block; border-radius: var(--r-tile); overflow: hidden; background: linear-gradient(120deg, #012A4A, #0F96DB); color: #fff; }

/* 26 · Result hero (Confirmation): circle 158 #D3EAF2 + scalloped verified badge */
.result { text-align: center; padding-top: 92px; }
.result__circle { width: 158px; height: 158px; border-radius: 50%; margin: 0 auto; background: var(--tile-2); display: grid; place-items: center; position: relative; }
.result__circle svg { width: 96px; height: 96px; }
.result__circle .badge-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 520ms 260ms var(--ease-out) forwards; }
body.capture .result__circle .badge-check { stroke-dashoffset: 0; animation: none; }
.result__circle::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--tile-2); animation: pulse-ring 2.4s var(--ease-out) infinite; }
body.capture .result__circle::before { display: none; }
.result__circle--fail { background: var(--danger-bg); color: var(--danger); }
.result__title { font-size: 22px; font-weight: 700; color: #000; margin-top: 30px; line-height: 1.3; }
.result__sub { font-size: 17px; color: var(--steel); margin-top: 4px; }
.result__msg { font-size: 14px; color: var(--muted-2); line-height: 1.55; margin: 10px auto 0; max-width: 300px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-ring { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }

/* 27 · Empty state */
.empty-state { text-align: center; padding: 44px 16px; }
.empty-state__icon { width: 96px; height: 96px; border-radius: 50%; background: var(--tile-2); color: var(--brand); display: grid; place-items: center; margin: 0 auto 18px; }
.empty-state__icon svg { width: 40px; height: 40px; }
.empty-state h3 { font-size: 18px; font-weight: 600; color: #000; }
.empty-state p { font-size: 14px; color: var(--muted-2); line-height: 1.5; margin: 6px auto 18px; max-width: 280px; }
.empty-state .btn { max-width: 240px; }

/* 28 · Skeleton shimmer */
.skeleton { background: linear-gradient(90deg, #E7F0F4 0%, #F4F9FB 50%, #E7F0F4 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r); }
.skeleton--text { height: 12px; border-radius: 4px; }
.skeleton--card { height: 138px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 29 · Toast (Deca.toast(msg, {action, href})) */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); z-index: var(--z-toast); width: max-content; max-width: 345px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; font-size: 13.5px; line-height: 1.35; padding: 11px 14px; border-radius: var(--r); box-shadow: var(--shadow-2); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast svg { width: 18px; height: 18px; color: #7FD3FF; }
.toast__action { color: #7FD3FF; font-weight: 600; white-space: nowrap; padding: 6px 0 6px 4px; margin: -6px 0; }
body.no-tabbar .toast { bottom: 110px; }

/* 30 · Bottom sheets */
.sheet-scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(1, 31, 48, .45); opacity: 0; transition: opacity 260ms var(--ease-out); }
.sheet-scrim.open { opacity: 1; }
.sheet { position: fixed; z-index: calc(var(--z-sheet) + 1); bottom: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: none; background: #fff; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 8px var(--gutter) 28px; box-shadow: 0 -12px 40px rgba(1,31,48,.18); transform: translateY(105%); transition: transform 340ms cubic-bezier(.32,.72,0,1); visibility: hidden; }
.sheet::-webkit-scrollbar { display: none; }
.sheet.open { transform: none; visibility: visible; }
.sheet.dragging { transition: none; }
.sheet[hidden] { display: block !important; }
.sheet__grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--divider-soft); margin: 0 auto 14px; cursor: grab; touch-action: none; position: relative; }
.sheet__grab::after { content: ''; position: absolute; inset: -12px -40px; }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sheet__title { font-size: 18px; font-weight: 600; color: #000; line-height: 1.35; }
.sheet__sub { font-size: 13px; color: var(--muted-2); margin-top: 2px; line-height: 1.45; }
.sheet__close { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; position: relative; }
.sheet__close::after { content: ''; position: absolute; inset: -6px; }
.sheet__close svg { width: 14px; height: 14px; }
.sheet__foot { margin-top: 20px; }
.sheet__foot > * + * { margin-top: 10px; }

/* Options inside sheets (radio / action rows) */
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--border); text-align: left; transition: box-shadow var(--dur), background-color var(--dur); cursor: pointer; }
.option[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--navy); background: var(--surface); }
.option__radio { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--steel); flex-shrink: 0; transition: box-shadow var(--dur); }
.option[aria-checked="true"] .option__radio { box-shadow: inset 0 0 0 6px var(--navy); }
.option__body { flex: 1; min-width: 0; }
.option__title { display: block; font-size: 15px; color: #111; }
.option__sub { display: block; font-size: 12px; color: var(--muted-2); margin-top: 1px; }
.option__meta { font-size: 13px; font-weight: 600; color: var(--navy); flex-shrink: 0; }

/* 31 · Dialogs (Deca.dialog / data-confirm) */
.dialog-wrap { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: 24px; background: rgba(1, 31, 48, .5); opacity: 0; transition: opacity 200ms var(--ease-out); }
.dialog-wrap.open { opacity: 1; }
.dialog { width: 310px; background: #fff; border-radius: 16px; padding: 24px 20px 18px; text-align: center; box-shadow: var(--shadow-2); transform: scale(.94); transition: transform 240ms var(--ease-spring); }
.dialog-wrap.open .dialog { transform: none; }
.dialog__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; }
.dialog__title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #000; }
.dialog__msg { font-size: 14px; color: var(--muted-2); line-height: 1.5; margin-top: 6px; }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.dialog__actions .btn { height: 44px; font-size: 15px; }
.btn--neutral { background: var(--surface); color: var(--navy); }

/* 32 · Switch — <button role="switch" class="switch" aria-checked="true"> */
.switch { position: relative; width: 44px; height: 26px; border-radius: 13px; background: #C9D6DD; flex-shrink: 0; transition: background-color var(--dur); cursor: pointer; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 260ms var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

/* 33 · Tabs / segmented */
.tabs { display: flex; gap: 22px; box-shadow: inset 0 -1px 0 var(--border); }
.tabs [role="tab"] { position: relative; min-height: 42px; font-size: 14px; font-weight: 500; color: var(--muted-2); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { color: var(--navy); font-weight: 600; }
.tabs [role="tab"][aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--navy); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-radius: var(--r); padding: 3px; box-shadow: inset 0 0 0 1px var(--border); }
.segmented button { text-align: center; height: 34px; border-radius: 6px; font-size: 14px; color: var(--muted-2); transition: background-color var(--dur), color var(--dur); }
.segmented button[aria-selected="true"] { background: var(--navy); color: #fff; font-weight: 500; }

/* 34 · Sticky bottom CTA bar (flows with no tab bar: use .page--no-nav) */
.cta-bar { position: fixed; bottom: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); z-index: var(--z-cta); padding: 14px var(--gutter) calc(20px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
.cta-bar > * + * { margin-top: 10px; }
.cta-bar__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted-2); margin-bottom: 10px; }
.cta-bar__sum b { font-size: 17px; color: var(--navy); font-weight: 700; }
.cta-bar--above-tabs { bottom: var(--tabbar-h); box-shadow: none; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%); padding-bottom: 12px; }

/* Horizontal rail */
.rail { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scroll-padding: 0 var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* Badges on icons */
.dot-badge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; font: 600 9.5px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }

/* Scanner / camera surfaces (dark) */
.cam { background: #0B1620; color: #fff; }

/* --------------------------------------------------------------------------
   Motion — entrance choreography (disabled in capture + reduced motion)
   -------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.enter { animation: rise 480ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.fade-in { animation: fade 300ms var(--ease-out) both; }
.shake { animation: shake 360ms; }
body.capture .enter, body.capture *, body.capture *::before, body.capture *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Embedded in a showcase iframe: hide scrollbars */
html:has(body.embedded) { scrollbar-width: none; }
body.embedded::-webkit-scrollbar, html:has(body.embedded)::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.embedded { overscroll-behavior: contain; }
body.capture .sheet, body.capture .sheet-scrim, body.capture .dialog-wrap { transition: none; }