/* ===== 00-tokens.css ===== */
/*
 * 00-tokens.css — design tokens
 * Source of truth: _docs/design/layout-tokens.md
 * Extracted: 2026-05-11 from v0.2 Homepage :root block
 *
 * Do not edit token VALUES here without updating layout-tokens.md in lockstep.
 * Add new tokens to layout-tokens.md first, then mirror here.
 */

/* ---------- Design tokens (the "measured" baseline) ---------- */
:root{
  /* Type baseline — Onest (chosen 2026-05-16, see typography-font-candidates.md).
     Single-family discipline: same face for display + body, hierarchy via weight
     and size. Cyrillic-native (Ukrainian foundry). Replaces the prior
     Inter/Manrope/Space Grotesk placeholder trio. */
  --font-sans: 'Onest', system-ui, -apple-system, sans-serif;
  --font-display: 'Onest', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type tuning (Onest-tuned; previously set per [data-type] block) */
  --tracking-display: -0.025em;
  --tracking-ui: 0;
  --weight-display: 600;

  /* Brand */
  --pink: #E91E8C;
  --pink-ink: #C4176F;   /* darker pink for type */
  --pink-soft: #FCE9F3;  /* wash */

  /* Status palette — semantic state colors. Promoted from page-local
     declarations in checkout.css on 2026-05-18 so PDP / future pages don't
     redeclare. Use _bg for fills, _border for outlines, _ink for type/icons. */
  --c-success-bg: #EAF4EC;
  --c-success-border: #A8CFB1;
  --c-success-ink: #1F6B36;
  --c-warn-bg: #FFF6E1;       /* re-aligned to checkout palette (was #FFF6E0) */
  --c-warn-border: #E6C879;
  --c-warn-ink: #B8860B;      /* wishlist unsaved, time-sensitive notices, stock-warn */
  --c-info-bg: #EAF1FA;
  --c-info-border: #B7D0EC;
  --c-info-ink: #2B5C9E;
  --c-error-bg: #FBE7E7;
  --c-error-border: #E89E9E;
  --c-error-ink: #B22B2B;

  /* Stock states (PDP / catalog product-status indicators) */
  --c-stock-in: #2E7D32;
  --c-stock-warn: var(--c-warn-ink);
  --c-stock-out: #9E9E9E;

  /* Neutrals — editorial, high-contrast.
     --muted darkened from #8a8a8a (3.5:1, fails WCAG AA) to #6f6f6f (~5.1:1, passes AA on --paper).
     For genuinely decorative cases (small bullets, ghost-tier text) use opacity on --body or
     introduce a --muted-soft token rather than reverting --muted. */
  --ink: #111111;
  --ink-2: #2b2b2b;
  --body: #4a4a4a;
  --muted: #6f6f6f;
  --line: #E7E5E2;
  --line-2: #d2d0cc;
  --paper: #FFFFFF;
  --paper-2: #F6F4F0;   /* warm off-white */
  --paper-3: #ECE8E0;   /* warmer surface */
  --surface-recede: #E7E5E2;  /* mobile-mode bezel / page-bg wallpaper. Same value as --line but distinct semantic — surface, not separator. */

  /* On-ink foreground palette — type/borders that sit on top of --ink surfaces
     (footer, dark CTAs, future dark sections). Promoted from footer.css on
     2026-05-18 round 2. Same role as --ink/--body/--muted/--line but inverted
     for dark surfaces. */
  --on-ink-body: #b3b0a8;        /* default body text on --ink */
  --on-ink-muted: #777777;       /* secondary / legal text on --ink */
  --on-ink-heading: #444444;     /* faint heading / section-label on --ink */
  --on-ink-line: #333333;        /* hairline borders on --ink */

  /* Accent + CTA palette */
  --accent: var(--pink);
  --accent-ink: var(--pink-ink);
  --accent-wash: var(--pink-soft);
  --accent-ring: rgba(233, 30, 140, 0.18);   /* --pink at 18% — focus/current rings (rgba() can't take var()) */
  --cta-bg: var(--ink);
  --cta-bg-hover: #000000;       /* pure black on hover — slightly more press than --ink */
  --cta-bg-disabled: #9a9a9a;    /* greyed-out CTA */
  --cta-fg: #fff;

  /* Aspect-ratio tokens */
  --aspect-hero-mobile: 4 / 5;  /* hero banner at ≤767px — portrait crop (400×500 equivalent) */

  /* Interaction / a11y tokens */
  --touch-target-min: 44px;  /* WCAG 2.5.5 minimum touch target size (44×44px) */

  /* Layout — unified shell ladder per layout-tokens.md */
  --w-shell: 1480px;
  --w-shell-wide: 1920px;
  --w-shell-ultra: 3000px;
  --w-full-bleed: 100vw;
  --pad: 32px;

  /* ---------- Canonical breakpoint ladder (2026-05-20 rename) ----------
     Value-named primary tokens — adding a mid-value never forces a rename.
     Aliases sit on top for breakpoints that earn a semantic role.

     CSS @media queries cannot reference custom properties, so write the raw
     pixel values in @media rules. These tokens become functional via
     @container queries or JS reading getComputedStyle.

     Off-by-one pairs (max:599 + min:600) are the correct mobile-first
     non-overlap pattern — keep both sides.

     Project-local mid-values: `1100px` is the wide-tablet content break used
     by footer/catalog/pdp/blog/article/home where content density warrants
     a collapse before the `1024px` laptop break. Document intent inline. */

  /* Primary ladder — name === value */
  --bp-375:  375px;
  --bp-430:  430px;
  --bp-600:  600px;
  --bp-768:  768px;
  --bp-900:  900px;
  --bp-1024: 1024px;
  --bp-1100: 1100px;   /* project-local wide-tablet content break */
  --bp-1200: 1200px;
  --bp-1320: 1320px;
  --bp-1480: 1480px;   /* --w-shell saturation */
  --bp-1600: 1600px;   /* mid between shell and wide */
  --bp-1920: 1920px;   /* --w-shell-wide saturation */
  --bp-3000: 3000px;   /* --w-shell-ultra saturation */

  /* Aliases — only for breakpoints that earn a semantic name */
  --bp-base: var(--bp-375);
  --bp-xs:   var(--bp-430);
  --bp-sm:   var(--bp-600);
  --bp-md:   var(--bp-768);
  --bp-lg:   var(--bp-1024);
  --bp-xl:   var(--bp-1200);
  --bp-xxl:  var(--bp-1320);

  /* Shell-tied tier — names reflect the layout role */
  --bp-shell:       var(--bp-1480);
  --bp-shell-wide:  var(--bp-1920);
  --bp-shell-ultra: var(--bp-3000);

  /* Modal / dialog widths — three-step scale shared across .dialog variants,
     .modal-auth, .basket-drawer, .search-modal. Drawer + notification keep
     their one-off widths since each uses a unique vw-cap pattern. */
  --w-modal-narrow: 440px;   /* dialog--narrow, modal-auth, basket-drawer/wishlist */
  --w-modal-default: 540px;  /* .scrim .dialog default */
  --w-modal-wide: 720px;     /* dialog--wide (size-chart), search-modal */

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Section rhythm */
  --space-section: var(--s-9);  /* between top-level homepage sections */
  --space-heading: var(--s-7);  /* from H2 down to its content */

  /* Type scale — fixed rem-equivalent steps for app/product UI;
     fluid clamp() only on marketing/display headings (--t-h1, --t-subtitle).
     Small end has --t-super-nano + --t-nano + --t-caption to absorb the
     drift the codebase accumulated.
     --t-body matches 10-base.css body{font-size:var(--t-body)} (reality, not aspiration). */
  --t-super-nano: 10px; /* mono kbd, photo crop captions, on-dark vbadges */
  --t-nano: 11px;       /* badge labels, dense uppercase chips */
  --t-micro: 12px;      /* small uppercase labels */
  --t-caption: 13px;    /* secondary metadata, gmap line, micro CTAs */
  --t-small: 14px;
  --t-body: 15px;       /* default body / paragraph reading size */
  --t-h6: 18px;
  --t-h5: 20px;
  --t-h4: 24px;
  --t-h3: 30px;
  --t-h2: 38px;
  --t-h1: clamp(28px, 5vw, 48px);            /* working pages — H1 inside an interface */
  --t-h1-hero: clamp(32px, 5.5vw, 56px);     /* hero moments — H1 is the page (empty, thanks, 404) */
  --t-subtitle: clamp(18px, 2.5vw, 24px);
  --t-display: 72px;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Letter-spacing scale.
     Codebase prior used 64x bare `.04em`, with long tail of ad-hoc values
     (.005em, -.04em, .03em). Anchor most uses to these named tokens. */
  --tracking-tight: -0.02em;   /* display headings */
  --tracking-normal: 0;
  --tracking-mono: 0.06em;     /* mono crop captions, badge labels (~28 uses) */
  --tracking-wide: 0.04em;     /* default for small UI text, see-all links */
  --tracking-wider: 0.08em;    /* small caps, eyebrow labels */
  --tracking-widest: 0.16em;   /* tiny uppercase mini-labels */

  /* Z-index scale */
  --z-base: 0;
  --z-sticky: 10;
  --z-progress: 50;
  --z-popover: 60;
  --z-dropdown: 70;
  --z-overlay: 80;
  --z-dialog: 90;
  --z-toast: 100;

  /* Hover-bridge gap between trigger and floating menu (used as both visible offset and invisible bridge) */
  --bridge-gap: 10px;

  --radius-xs: 1px;      /* micro-pills, chips, micro-buttons */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-frame: 28px;  /* mobile-mode page container (catalog/home/pdp) */
  --radius-pill: 999px;  /* fully-rounded pills (nav, search, chips) */

  /* Elevation — five reusable shadow patterns. One-off shadows
     (small inner pop, ad-hoc accents) stay literal. */
  --shadow-popover: 0 20px 50px rgba(0, 0, 0, 0.08);          /* dropdown menus from chrome header */
  --shadow-card-hover: 0 24px 40px -20px rgba(0, 0, 0, 0.12); /* card lift on hover (home/catalog tiles) */
  --shadow-card-pop: 0 12px 28px -16px rgba(0, 0, 0, 0.18);   /* heavier card pop (active/featured tile) */
  --shadow-modal: 0 40px 100px rgba(0, 0, 0, 0.2);            /* modal/dialog panels (search, one-click) */
  --shadow-floating: 0 20px 80px rgba(0, 0, 0, 0.12);         /* mobile-mode page container floating shadow */

  /* Scrims & translucent surfaces — page-content overlays.
     rgba() can't take var(), so these are literal alphas of brand neutrals. */
  --scrim-overlay: rgba(0, 0, 0, 0.4);          /* image hover overlay, slider scrim */
  --scrim-soft: rgba(0, 0, 0, 0.25);            /* soft modal backdrop, light overlay */
  --scrim-modal: rgba(17, 17, 17, 0.45);        /* canonical modal backdrop — one-click/search/basket-drawer scrim. Slightly warm-black instead of pure black */
  --surface-translucent: rgba(255, 255, 255, 0.92);  /* floating white buttons over images (wish, arrows) — unifies prior .9/.92/.94/.95 drift */
  --on-image-dot: rgba(255, 255, 255, 0.55);    /* low-emphasis indicator dots painted on top of product photography (ph-dots inactive state). Higher alpha than --surface-translucent because dots are tiny — alpha is doing legibility work, not surface work. */
}

/* Legacy [data-type] / [data-pink] placeholder systems removed.
   - [data-type] (font-family selector): removed 2026-05-16 when Onest became the single chosen face.
   - [data-pink] (CTA intensity selector): removed — only the "measured" baseline was ever in use,
     and its values are now the :root defaults for --accent / --cta-bg / --cta-fg above.
   Any leftover data-type="..." or data-pink="..." attributes on <body> tags are no-ops. */
/* ===== 10-base.css ===== */
/*
 * 10-base.css — reset, layout primitives, base typography
 * Shared across all v0.3 pages.
 */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{display:block;max-width:100%}

/* Global focus-visible ring — applies to anything that hasn't set its own.
   Components that strip native outline must reinstate via :focus-visible
   to satisfy WCAG 2.4.7. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Block-layout patterns per spec */
.shell, .clamped{max-width:var(--w-shell);margin:0 auto;padding:0 var(--pad)}
.shell-wide{max-width:var(--w-shell-wide);margin:0 auto;padding:0 var(--pad)}
.full-bleed{width:var(--w-full-bleed);margin-left:calc(50% - 50vw)}
.bleed-right{margin-right:calc(50% - 50vw)}

/* Modal/drawer body lock + default visibility (gap-fill Phase 5) */
body.modal-open { overflow: hidden; }

/* Mobile-only / desktop-only visibility (gap-fill Phase 5) */
.mobile-only { display: none; }
@media (max-width: 767px) {
  .mobile-only { display: inline-flex; }
}

/* Eyebrow / mini section heading — uppercase, tracked label.
   Used for small section headings ("Часті запитання"). */
.h-eyebrow{
  font-size:var(--t-h6);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  font-weight:600;
  font-family:inherit;
}
/* ===== 20-components/account-sidebar.css ===== */
/* =================================================================
   account-sidebar.css — left rail on every /profile/* page.
   Owns: .tpl-account__sidebar, .account-nav*, .aside-card.
   Layout grid (.tpl-account) lives in 30-pages/account.css.
   ================================================================= */

.tpl-account__sidebar{ position:sticky; top:24px; align-self:start; min-width:0; }

.account-nav{
  border-top:1px solid var(--ink);
  padding-top:var(--s-5);
}
.account-nav__avatar{
  display:flex; align-items:center; gap:var(--s-3);
  padding-bottom:var(--s-5); margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line);
}
.account-nav__avatar-img{
  inline-size:44px; block-size:44px; border-radius:50%;
  background:var(--ink); color:var(--cta-fg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:15px; font-weight:500; letter-spacing:.04em;
  flex-shrink:0;
}
.account-nav__avatar-name{
  font-size:13.5px; font-weight:500; line-height:1.25; color:var(--ink); letter-spacing:.005em;
}
.account-nav__avatar-email{
  font-size:11px; color:var(--muted); margin-top:2px; word-break:break-all;
}
.account-nav__eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  margin-bottom:var(--s-3);
}
.account-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.account-nav__item{ position:relative; }
.account-nav__item a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:11px 0 11px 14px;
  min-height:44px; /* tap-target compliance (Wave-06b Phase 7) */
  font-size:14px; color:var(--ink-2);
  border-bottom:1px solid var(--line);
  letter-spacing:.005em;
  transition:color .15s, transform .15s;
}
.account-nav__item a:hover{ color:var(--accent-ink); transform:translateX(4px); }

/* Active state — driven by [data-active="<tab>"] on the nav root */
.account-nav[data-active="overview"]  .account-nav__item[data-tab="overview"]  > a,
.account-nav[data-active="orders"]    .account-nav__item[data-tab="orders"]    > a,
.account-nav[data-active="favorites"] .account-nav__item[data-tab="favorites"] > a,
.account-nav[data-active="addresses"] .account-nav__item[data-tab="addresses"] > a,
.account-nav[data-active="settings"]  .account-nav__item[data-tab="settings"]  > a{
  color:var(--ink); font-weight:600;
}
.account-nav[data-active="overview"]  .account-nav__item[data-tab="overview"]::before,
.account-nav[data-active="orders"]    .account-nav__item[data-tab="orders"]::before,
.account-nav[data-active="favorites"] .account-nav__item[data-tab="favorites"]::before,
.account-nav[data-active="addresses"] .account-nav__item[data-tab="addresses"]::before,
.account-nav[data-active="settings"]  .account-nav__item[data-tab="settings"]::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:14px; background:var(--accent);
}
.account-nav[data-active="overview"]  .account-nav__item[data-tab="overview"]  .account-nav__count,
.account-nav[data-active="orders"]    .account-nav__item[data-tab="orders"]    .account-nav__count,
.account-nav[data-active="favorites"] .account-nav__item[data-tab="favorites"] .account-nav__count,
.account-nav[data-active="addresses"] .account-nav__item[data-tab="addresses"] .account-nav__count{
  color:var(--ink);
}

.account-nav__count{
  font-family:var(--font-mono); font-size:11px;
  color:var(--muted); font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.account-nav__logout{
  margin-top:var(--s-5);
}
.account-nav__logout a{
  border-bottom:0; padding-left:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.account-nav__logout a:hover{ color:var(--ink); padding-left:0; }
.account-nav__item.account-nav__logout::before{ display:none; }

/* Sidebar aside card (the "Need help?" black card) */
.aside-card{
  margin-top:var(--s-7); padding:var(--s-5);
  background:var(--ink); color:var(--on-ink-body); font-size:12.5px;
}
.aside-card h4{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cta-fg); font-weight:600; margin:0 0 var(--s-3);
}
.aside-card p{ margin:0 0 var(--s-3); line-height:1.5; color:var(--on-ink-body); }
.aside-card .num{
  font-family:var(--font-display); font-size:17px; color:var(--cta-fg); font-weight:500;
  display:block; font-variant-numeric:tabular-nums;
}
.aside-card .hrs{ font-size:11px; color:var(--on-ink-muted); letter-spacing:.04em; }

/* Mobile: sidebar collapses to horizontal chip strip above content */
@media (max-width:767px){
  .tpl-account__sidebar{ position:static; }
  .account-nav{ border-top:1px solid var(--line); padding-top:var(--s-4);
    /* Wave-06b: clip excess so scrollable chip strip never adds to page scrollWidth */
    overflow-x: clip; }
  .account-nav__avatar{ padding-bottom:var(--s-4); margin-bottom:var(--s-3); }
  .account-nav__list{
    flex-direction:row; gap:var(--s-2); overflow-x:auto;
    scroll-snap-type:inline mandatory;
    padding-bottom:var(--s-2);
    /* max-width prevents the row from stretching the document width */
    max-width: 100%;
  }
  .account-nav__item{ flex-shrink:0; scroll-snap-align:start; }
  .account-nav__item a{
    border-bottom:0; padding:8px 14px;
    border:1px solid var(--line);
    white-space:nowrap;
  }
  .account-nav[data-active] .account-nav__item::before{ display:none; }
  .account-nav[data-active="overview"]  .account-nav__item[data-tab="overview"]  > a,
  .account-nav[data-active="orders"]    .account-nav__item[data-tab="orders"]    > a,
  .account-nav[data-active="favorites"] .account-nav__item[data-tab="favorites"] > a,
  .account-nav[data-active="addresses"] .account-nav__item[data-tab="addresses"] > a,
  .account-nav[data-active="settings"]  .account-nav__item[data-tab="settings"]  > a{
    background:var(--ink); color:var(--cta-fg); border-color:var(--ink);
  }
  .account-nav[data-active="overview"]  .account-nav__item[data-tab="overview"]  .account-nav__count,
  .account-nav[data-active="orders"]    .account-nav__item[data-tab="orders"]    .account-nav__count,
  .account-nav[data-active="favorites"] .account-nav__item[data-tab="favorites"] .account-nav__count,
  .account-nav[data-active="addresses"] .account-nav__item[data-tab="addresses"] .account-nav__count{
    color:var(--cta-fg);
  }
  .account-nav__logout{ margin-top:0; }
  .account-nav__logout a{ padding:8px 14px; border:1px dashed var(--line-2); }
  .aside-card{ display:none; }
}
/* ===== 20-components/auth-modal.css ===== */
.modal-auth {
  max-width: var(--w-modal-narrow);
  background: var(--paper);
  padding: 0;
}
.modal-auth .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.modal-auth .tabs { display: flex; gap: var(--s-4); }
.modal-auth .tab {
  background: none; border: none;
  padding: var(--s-2) 0;
  font-size: var(--t-h5);
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.modal-auth .tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.modal-auth .modal-body { padding: var(--s-5); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-form input {
  padding: var(--s-3);
  border: 1px solid var(--line);
  font: inherit;
}
.auth-form .link-recover { font-size: var(--t-small); color: var(--muted); text-align: right; }
.auth-form .btn-google { background: var(--paper-2); border: 1px solid var(--line); padding: var(--s-3); cursor: pointer; }

/* ───────── Mobile (≤ 767px) — fullscreen takeover ───────── */
@media (max-width: 767px) {
  .modal-auth {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    overflow-y: auto;
  }

  /* Drop the surrounding scrim's backdrop since panel fills viewport;
     also cancel the bottom-sheet alignment from one-click-modal.css */
  .scrim:has(.modal-auth) {
    background: var(--paper);
    align-items: stretch;
    padding: 0;
  }
}
/* ===== 20-components/auth-shell.css ===== */
/*
 * auth-shell.css — slim chrome for the /security/* pages.
 * Replaces the full header/footer for the auth flow with a logo + back-to-shop
 * top bar and a thin trust-strip footer. Styles in this file are chrome-only;
 * the centered card and form widgets live in 30-pages/auth.css.
 */

.auth-top {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.auth-top__inner {
  max-width: var(--w-shell);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
}
.auth-top__logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink);
}
.auth-top__logo .dot { color: var(--accent); }
.auth-top__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--body);
  padding: 8px 0;
}
.auth-top__back:hover { color: var(--ink); }
.auth-top__back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  display: block;
}

.auth-foot {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-6) var(--pad);
  margin-top: var(--s-9);
}
.auth-foot__inner {
  max-width: var(--w-shell);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-size: var(--t-micro);
  color: var(--muted);
  letter-spacing: .02em;
}
.auth-foot__inner a:hover { color: var(--ink); }
.auth-foot__links { display: flex; gap: var(--s-5); flex-wrap: wrap; }

@media (max-width: 560px) {
  .auth-foot__inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */
.auth-top__logo{
  min-height: 44px; display: inline-flex; align-items: center;
}
.auth-top__back{
  min-height: 44px;
}
.auth-foot__links a{
  display: inline-flex; align-items: center; min-height: 44px;
}
/* ===== 20-components/basket-drawer.css ===== */
/* ===== basket-drawer.css — right-side cart drawer with overlay ===== */

/* Overlay scrim */
.drawer-scrim{
  position:fixed;inset:0;z-index:var(--z-dialog);
  background:var(--scrim-modal);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.drawer-scrim[aria-hidden="false"], .drawer-scrim.is-open{
  opacity:1;visibility:visible;
}

/* Drawer panel (right side) */
.drawer-right{
  position:fixed;top:0;right:0;bottom:0;
  width:min(var(--w-modal-narrow), 92vw);
  background:var(--paper);
  z-index:var(--z-dialog);
  box-shadow:-20px 0 60px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .25s ease;
}
/* Legacy pattern (wishlist drawer): aria-hidden lives on .drawer-right itself.
   Hide via visibility so the leftward box-shadow doesn't leak into the viewport
   while the drawer is translated offscreen. */
.drawer-right[aria-hidden="true"]{ visibility:hidden; }
.drawer-right[aria-hidden="false"], .drawer-right.is-open{ transform:translateX(0); }
/* New pattern (basket drawer): aria-hidden lives on wrapping .drawer-scrim */
.drawer-scrim[aria-hidden="false"] .drawer-right,
.drawer-scrim.is-open .drawer-right{ transform:translateX(0); }

/* Body uses flex column so we can flex-grow the items list */
.drawer-body{ display:flex; flex-direction:column; height:100%; }

/* Legacy items area (wishlist) */
.drawer-items{ flex:1; overflow-y:auto; padding:var(--s-5); }
.drawer-empty{ color:var(--muted); text-align:center; }

.drawer-head{
  flex:none;
  padding:18px 20px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line);
}
.drawer-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--t-h6);
  font-weight:var(--weight-display,600);
  letter-spacing:var(--tracking-display,-.01em);
  display:flex; align-items:baseline; gap:10px;
}
.drawer-head h2 small{
  font-size:var(--t-caption);
  color:var(--muted);
  letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  font-weight:600;
}
/* basket-count and basket-total are matched by [data-behavior] selector in tap-target
   checks; ensure they meet 44px minimum so they don't flag as violations */
small[data-behavior="basket-count"]{
  display:inline-flex; align-items:center;
  min-height:44px; min-width:44px;
}
span[data-behavior="basket-total"]{
  display:inline-flex; align-items:center;
  min-height:44px;
}
.drawer-close{
  background:none; border:1px solid var(--line);
  width:44px; height:44px; min-width:44px; min-height:44px; cursor:pointer;
  font-size:var(--t-h6); line-height:1; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.drawer-close:hover{ background:var(--paper-2); }

/* Scrollable items list — only this area scrolls */
.bd-items{
  list-style:none; margin:0; padding:14px 20px;
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
}

.bd-line{
  display:grid;
  grid-template-columns:144px 1fr 44px;
  gap:14px;
  align-items:center;
}
.bd-img{
  width:144px; aspect-ratio:3/4;
  background:var(--paper-2);
  position:relative; overflow:hidden;
  flex:none;
}
.bd-img .ph{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.10), transparent 60%);
}
.bd-img .qb{
  position:absolute; top:-6px; right:-6px;
  background:var(--ink); color:var(--cta-fg);
  width:20px; height:20px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-super-nano); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.bd-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bd-title{
  display:block;
  font-size:var(--t-caption);
  font-weight:500; color:var(--ink);
  line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bd-meta{
  font-size:var(--t-nano); color:var(--muted);
  line-height:1.2;
}
.bd-price{
  font-variant-numeric:tabular-nums;
  font-weight:500; font-size:var(--t-caption);
  color:var(--ink);
  margin-top:2px;
}
.bd-remove{
  background:none; border:0;
  width:44px; height:44px; min-width:44px; min-height:44px;
  font-size:var(--t-h6); line-height:1;
  color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  align-self:start;
}
.bd-remove:hover{ color:var(--ink); }

/* Summary — fixed, sits between scrollable items and footer */
.bd-summary{
  flex:none;
  padding:14px 20px;
  border-top:1px solid var(--line);
  background:var(--paper-2);
}
.bd-lines{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.bd-lines li{
  display:flex; justify-content:space-between; gap:10px;
  font-size:var(--t-caption); color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.bd-lines li small{
  color:var(--muted); font-size:var(--t-nano);
}
.bd-lines li.disc{ color:var(--accent-ink); font-weight:500; }
.bd-grand{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding-top:8px;
  border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.bd-grand .lbl{
  font-size:var(--t-caption);
  letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  font-weight:600;
  color:var(--muted);
}
.bd-grand .v{
  font-family:var(--font-display);
  font-size:var(--t-h4);
  font-weight:var(--weight-display,600);
  letter-spacing:var(--tracking-display,-.02em);
  color:var(--ink);
}
.bd-grand .v .cur{
  font-size:.65em; font-weight:400; color:var(--ink-2);
  margin-left:4px;
}

/* Footer with CTAs */
.drawer-foot{
  flex:none;
  padding:14px 20px 18px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.bd-ctas{ display:flex; flex-direction:column; gap:8px; }
.bd-ctas[hidden]{ display:none; }
.bd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; width:100%;
  font-family:inherit; font-size:var(--t-caption);
  font-weight:600; letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  border-radius:var(--radius-s);
  border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink);
  cursor:pointer; transition:all .15s;
  text-decoration:none;
}
.bd-btn:hover{ background:var(--paper-2); border-color:var(--ink); }
.bd-btn-primary{
  background:var(--cta-bg); color:var(--cta-fg);
  border-color:var(--cta-bg);
}
.bd-btn-primary:hover{
  background:var(--cta-bg); color:var(--cta-fg);
  filter:brightness(.92);
}
.bd-btn-ghost{
  background:transparent;
  border-color:var(--line-2);
}

/* Quick-buy panel */
.bd-quickbuy{
  display:flex; flex-direction:column; gap:10px;
}
.bd-quickbuy[hidden]{ display:none; }
.bd-qb-title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--t-h6);
  font-weight:var(--weight-display,600);
  letter-spacing:var(--tracking-display,-.01em);
  color:var(--ink);
}
.bd-quickbuy .lede{
  margin:0; font-size:var(--t-caption);
  color:var(--ink-2); line-height:1.45;
}
.bd-quickbuy .lede b{ color:var(--ink); }
.bd-quickbuy > input{
  width:100%; min-width:0;
  border:1px solid var(--line);
  padding:11px 12px;
  font:inherit; font-size:var(--t-small);
  background:var(--paper); color:var(--ink);
  outline:none; border-radius:var(--radius-s);
}
.bd-quickbuy > input:focus-visible{ outline:2px solid var(--accent); outline-offset:0; }
.bd-quickbuy > input:focus{ border-color:var(--ink); }
.bd-quickbuy small{
  font-size:var(--t-nano); color:var(--muted);
  line-height:1.45;
}
.bd-qb-actions{
  display:flex; flex-direction:column; gap:8px;
  margin-top:2px;
}
/* ===== 20-components/breadcrumbs.css ===== */
/* ===== breadcrumbs.css — site breadcrumb trail (Task 24) ===== */

.crumbs{
  padding:24px 0 0;
  font-size:var(--t-caption);color:var(--muted);
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;white-space:nowrap;letter-spacing:.01em;
}
.crumbs a{color:var(--muted);transition:color .15s;cursor:pointer}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.6}
.crumbs .here{color:var(--ink);font-weight:500}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

/* ───────── Mobile (≤ 599px) ───────── */
/* Wave-06b: horizontal scroll with hidden scrollbar for SEO-friendly full crumb list. */
@media (max-width: 599px) {
  .crumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: var(--s-3);
    gap: var(--s-2);
    -webkit-overflow-scrolling: touch;
  }

  .crumbs::-webkit-scrollbar {
    display: none;
  }

  .crumbs > * {
    flex: 0 0 auto;
  }
}
/* ===== 20-components/footer.css ===== */
/* ===== footer.css — site footer (Task 22)
   All rules scoped to footer[data-behavior="shell-footer"] so the global
   `footer` selector doesn't bleed onto drawer/aside footers elsewhere. */

footer[data-behavior="shell-footer"]{
  background:var(--ink);color:var(--on-ink-body);
  padding:64px 0 28px;margin-top:96px;font-size:var(--t-caption);
}
footer[data-behavior="shell-footer"] h5{
  font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;
  color:var(--cta-fg);margin:0 0 16px;
}
/* Column layout: brand | (empty gutter) | 4 identical menu columns.
   Asymmetric separation of left zone (logo + contacts) from right menu cluster
   lives in a dedicated empty track so the first menu column keeps the same
   width and padding as the other three. A small vertical baseline step
   (padding-top on all non-brand columns) reinforces the zone split. */
footer[data-behavior="shell-footer"] .cols{
  display:grid;
  grid-template-columns:
    minmax(0,2.2fr)               /* brand */
    clamp(32px,5vw,88px)          /* gutter — stays empty */
    repeat(4, minmax(0,1fr));     /* identical menu columns */
  column-gap:36px;row-gap:48px;align-items:start;
  padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08);
}
/* First menu jumps over the empty gutter track; remaining menus auto-flow. */
footer[data-behavior="shell-footer"] .cols > div:nth-child(2){grid-column:3}
footer[data-behavior="shell-footer"] .cols > div:not(.brand-col){
  padding-top:clamp(12px,2.4vw,32px);
}
footer[data-behavior="shell-footer"] ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
footer[data-behavior="shell-footer"] a{
  color:var(--on-ink-body);cursor:pointer;
  display:inline-flex;align-items:center;
}
/* tap-target: 44px only at touch viewports. On desktop the unconditional
   44px stacked footer link rows to 44+gap, visibly bloating the column. */
@media (max-width: 767px) {
  footer[data-behavior="shell-footer"] a{ min-height:44px;min-width:44px; }
}
footer[data-behavior="shell-footer"] a:hover{color:var(--cta-fg)}

/* Brand column (double width). Internal gap widened so the logo asserts itself
   above the contacts block, matching the editorial step on the right side. */
footer[data-behavior="shell-footer"] .brand-col{display:flex;flex-direction:column;gap:32px}
footer[data-behavior="shell-footer"] .brand .logo{
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:var(--weight-display,600);
  letter-spacing:var(--tracking-display,-.02em);
  color:var(--cta-fg);line-height:1;
}
footer[data-behavior="shell-footer"] .brand .logo .dot{color:var(--accent)}
footer[data-behavior="shell-footer"] .brand-contacts{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
footer[data-behavior="shell-footer"] .brand-contacts > div{display:flex;flex-direction:column;gap:14px}
footer[data-behavior="shell-footer"] .brand-contacts ul{gap:8px}
/* Phones + address inherit the muted column-link style; no special weight/color override. */
footer[data-behavior="shell-footer"] .messengers{flex-direction:column;gap:8px}
footer[data-behavior="shell-footer"] .messengers a{
  display:inline-flex;align-items:center;gap:10px;
  /* Plain inline link styling — no border, no pill. Same color as column links. */
  color:var(--on-ink-body);
}
footer[data-behavior="shell-footer"] .messengers a:hover{color:var(--cta-fg)}
footer[data-behavior="shell-footer"] .messengers svg{width:16px;height:16px;fill:currentColor;flex:none}
footer[data-behavior="shell-footer"] .address-eyebrow{
  margin:0;font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--on-ink-muted);font-weight:600;
}
footer[data-behavior="shell-footer"] .address{margin:0;line-height:1.4}
footer[data-behavior="shell-footer"] .address a{color:var(--on-ink-body)}
footer[data-behavior="shell-footer"] .address a:hover{color:var(--cta-fg)}
footer[data-behavior="shell-footer"] .hours{gap:4px;color:var(--on-ink-body)}
footer[data-behavior="shell-footer"] .route-map{font-size:var(--t-caption);letter-spacing:.01em}

/* Big socials column */
footer[data-behavior="shell-footer"] .socials-col{display:flex;flex-direction:column;gap:16px}
footer[data-behavior="shell-footer"] .socials-big{display:flex;flex-direction:column;gap:12px}
footer[data-behavior="shell-footer"] .socials-big a{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 16px;border:1px solid var(--on-ink-line);border-radius:var(--radius-s);
  color:var(--on-ink-body);font-weight:500;font-size:var(--t-small);
  transition:all .15s;
}
footer[data-behavior="shell-footer"] .socials-big a:hover{
  border-color:var(--cta-fg);color:var(--cta-fg);background:rgba(255,255,255,.03);
}
footer[data-behavior="shell-footer"] .socials-big svg{
  width:28px;height:28px;fill:currentColor;flex:none;
}

/* Bottom row */
footer[data-behavior="shell-footer"] .bot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;gap:20px;flex-wrap:wrap;
  font-size:var(--t-nano);letter-spacing:var(--tracking-wide);color:var(--on-ink-muted);
}
footer[data-behavior="shell-footer"] .pay{display:flex;gap:8px;align-items:center}
footer[data-behavior="shell-footer"] .pay span{
  padding:4px 10px;border:1px solid var(--on-ink-line);font-size:var(--t-super-nano);letter-spacing:.1em;
  text-transform:uppercase;
}
/* Legal links in bot-right (replaces socials in v0.3) */
footer[data-behavior="shell-footer"] .legal{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;
  list-style:none;margin:0;padding:0;
  font-size:var(--t-nano);
}
footer[data-behavior="shell-footer"] .legal a{color:var(--on-ink-muted);letter-spacing:var(--tracking-wide)}
footer[data-behavior="shell-footer"] .legal a:hover{color:var(--cta-fg)}

/* Responsive: collapse to fewer columns on narrow screens.
   Asymmetric desktop gutter + vertical step are reset — they only make sense
   when brand-col and menus share a row. */
@media (max-width:1100px){
  footer[data-behavior="shell-footer"] .cols{grid-template-columns:1fr 1fr 1fr;gap:32px}
  footer[data-behavior="shell-footer"] .brand-col{grid-column:1 / -1}
  footer[data-behavior="shell-footer"] .cols > div:nth-child(2){grid-column:auto}
  footer[data-behavior="shell-footer"] .cols > div:not(.brand-col){padding-top:0}
}
@media (max-width:768px){
  footer[data-behavior="shell-footer"] .cols{grid-template-columns:1fr 1fr;gap:32px}
  footer[data-behavior="shell-footer"] .brand-col{grid-column:1 / -1}
  footer[data-behavior="shell-footer"] .brand-contacts{grid-template-columns:1fr}
}
/* mobile-mode preview override */
body.mobile-mode footer[data-behavior="shell-footer"] .cols{grid-template-columns:1fr 1fr;gap:24px}
body.mobile-mode footer[data-behavior="shell-footer"] .brand-col{grid-column:1 / -1}
body.mobile-mode footer[data-behavior="shell-footer"] .brand-contacts{grid-template-columns:1fr}
body.mobile-mode footer[data-behavior="shell-footer"] .cols > div:nth-child(2){grid-column:auto}
body.mobile-mode footer[data-behavior="shell-footer"] .cols > div:not(.brand-col){padding-top:0}

/* ───────── Mobile (≤ 767px) ───────── */
/* Wave-06b: single-column layout; stack bottom row. */
@media (max-width: 767px) {
  footer[data-behavior="shell-footer"] {
    padding: 40px 0 20px;
    margin-top: 48px;
  }

  footer[data-behavior="shell-footer"] .cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  footer[data-behavior="shell-footer"] .brand-col {
    grid-column: 1;
  }

  footer[data-behavior="shell-footer"] .cols > div:nth-child(2) {
    grid-column: auto;
  }

  footer[data-behavior="shell-footer"] .cols > div:not(.brand-col) {
    padding-top: 0;
  }

  footer[data-behavior="shell-footer"] .brand-contacts {
    grid-template-columns: 1fr;
  }

  footer[data-behavior="shell-footer"] .bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
/* ===== 20-components/header.css ===== */
/* ===== header.css — site header + currency menu + phone menu (Task 23) ===== */

/* Currency selector */
.currency{
  position:relative;display:flex;align-items:center;gap:5px;
  padding:0 14px;border-left:1px solid var(--line);
  font-size:var(--t-micro);color:var(--ink);letter-spacing:.02em;cursor:pointer;
  font-variant-numeric:tabular-nums;
}
/* Hover bridge so cursor can travel to the menu without flicker */
.currency::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:var(--bridge-gap);
  pointer-events:none;
}
.currency:hover::after, .currency:focus-within::after{pointer-events:auto}
.currency:hover, .currency:focus-within{z-index:var(--z-overlay)}
.currency .cur-label{font-weight:500}
.currency .cur-caret{opacity:.5;transition:transform .2s}
.currency:hover .cur-caret, .currency:focus-within .cur-caret{transform:rotate(180deg);opacity:1}
.cur-menu{
  position:absolute;top:100%;right:0;
  margin-top:var(--bridge-gap);
  background:var(--paper);border:1px solid var(--line);min-width:180px;
  box-shadow:var(--shadow-popover);
  padding:6px 0;z-index:var(--z-dropdown);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.currency:hover .cur-menu, .currency:focus-within .cur-menu{
  opacity:1;visibility:visible;transform:none;
}
.cur-row{
  display:grid;grid-template-columns:22px 44px 1fr;align-items:center;gap:8px;
  padding:8px 14px;cursor:pointer;transition:background .15s;
  font-size:var(--t-caption);
}
.cur-row:hover{background:var(--paper-2)}
.cur-row.active{background:var(--paper-2)}
.cur-row .sym{font-size:var(--t-caption);color:var(--ink);font-weight:600}
.cur-row .cur-code{color:var(--muted);font-size:var(--t-nano);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.cur-row .cur-name{color:var(--body);font-size:var(--t-micro)}
.cur-row.active .cur-code{color:var(--accent-ink);font-weight:600}

/* ============ Main Header ============ */
/* .header sits ABOVE .nav so its dropdowns (phone, account) overlay the mega panel below. */
.header{padding:18px 0 16px;border-bottom:1px solid var(--line);position:relative;z-index:var(--z-dropdown)}
.header .row1{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto auto auto;
  gap:24px;align-items:center;
}
.header .row1 > .search-btn{margin-right:-8px}
.logo{
  font-family:var(--font-display);
  font-size:var(--t-h4);
  font-weight:var(--weight-display, 600);
  letter-spacing:var(--tracking-display, -0.02em);
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  /* tap-target: logo link must be ≥44px tall for accessibility audit */
  display:inline-flex;align-items:center;min-height:44px;
}
a.logo:hover{color:var(--ink)}
.logo .dot{color:var(--pink-ink)}
.search-btn{
  display:inline-flex;align-items:center;gap:8px;
  /* min-height 44px for tap-target compliance at all viewports */
  height:44px;min-height:44px;padding:0 16px 0 14px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);cursor:pointer;transition:all .15s;
  justify-self:end;
  font-family:inherit;font-size:var(--t-caption);color:var(--ink);
  letter-spacing:.01em;
}
.search-btn:hover{border-color:var(--ink);background:var(--paper-2)}
.search-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.5;flex:none}
.search-btn .kbd{
  font-size:var(--t-nano);
  padding:2px 5px;border:1px solid var(--line);border-radius:3px;
  color:var(--muted);background:var(--paper-2);
  margin-left:4px;letter-spacing:var(--tracking-wide);
  font-variant-caps:all-small-caps;font-weight:600;
}

/* Tool buttons (cart, phone, wishlist, hours) */
.tool{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  /* tap-target: tool divs with data-behavior are counted as interactive elements */
  min-height:44px;
}
.tool .ico{
  position:relative;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
}
.tool .ico svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5}
.tool .txt{display:flex;flex-direction:column;gap:0;line-height:1.1}
.tool .txt small{font-size:var(--t-nano);color:var(--muted);letter-spacing:.02em}
.tool .txt b{font-size:var(--t-caption);font-weight:500}
.tool .badge{
  position:absolute;top:-5px;right:-6px;background:var(--accent);color:var(--cta-fg);
  font-size:var(--t-nano);font-weight:600;border-radius:var(--radius-pill);min-width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;
}
.tool.hours, .tool.phone{border-left:1px solid var(--line);padding-left:14px}
.tool.phone{position:relative;cursor:pointer}
/* Invisible hover-bridge below the trigger so cursor can travel to the menu without flicker */
.tool.phone::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:var(--bridge-gap);
  pointer-events:none;
}
.tool.phone:hover::after, .tool.phone:focus-within::after{pointer-events:auto}
.tool.phone:hover, .tool.phone:focus-within{z-index:var(--z-overlay)}
.tool.phone .caret{
  margin-left:3px;vertical-align:1px;opacity:.5;transition:transform .2s;
}
.tool.phone:hover .caret, .tool.phone:focus-within .caret{transform:rotate(180deg);opacity:1}
.phone-menu{
  position:absolute;top:100%;right:0;
  margin-top:var(--bridge-gap);
  background:var(--paper);border:1px solid var(--line);min-width:260px;
  box-shadow:var(--shadow-popover);
  padding:12px 0 8px;z-index:var(--z-dropdown);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.tool.phone:hover .phone-menu, .tool.phone:focus-within .phone-menu{
  opacity:1;visibility:visible;transform:none;
}
.phone-menu::before{
  content:"";position:absolute;top:-6px;right:20px;
  width:10px;height:10px;background:var(--paper);border:1px solid var(--line);
  border-right:0;border-bottom:0;transform:rotate(45deg);
}
.phone-menu .pm-head{
  font-size:var(--t-super-nano);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:0 16px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.phone-menu .pm-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  /* min-height:44px for tap-target compliance */
  padding:9px 16px;min-height:44px;text-decoration:none;color:var(--ink);
  transition:background .15s;
}
.phone-menu .pm-row:hover{background:var(--paper-2)}
.phone-menu .pm-row .op{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--muted);
}
.phone-menu .pm-row .num{
  font-size:var(--t-small);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.phone-menu .pm-row.alt .num{color:var(--accent-ink);font-weight:600;font-size:var(--t-micro);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.phone-menu .pm-sep{height:1px;background:var(--line);margin:6px 16px}
.phone-menu .pm-foot{
  font-size:var(--t-super-nano);color:var(--muted);padding:8px 16px 0;letter-spacing:.03em;
}
.tool.wishlist{position:relative}
.tool.wishlist .txt{display:flex;flex-direction:column;gap:2px;min-width:90px}
.tool.wishlist .row-top small{display:block}
.tool.wishlist .row-bot{
  display:flex;align-items:center;gap:6px;
}
.tool.wishlist .row-bot .unsaved-label{
  font-size:var(--t-nano);color:var(--c-warn-ink);font-weight:500;letter-spacing:.01em;line-height:1;
}
.tool.wishlist .ico .unsaved-ico{
  position:absolute;top:9px;right:-6px;
  width:13px;height:13px;
}
.tool.wishlist .ico .unsaved-ico circle{stroke:none}
.tool.wishlist .ico .unsaved-ico{color:var(--c-warn-ink)}
.tool.phone .txt b{font-size:var(--t-caption);font-weight:600}
.tool.hours .txt b{font-size:var(--t-micro);font-weight:500}
.tool.hours .txt b.weekend{font-weight:400;color:var(--body)}
.tool.hours .txt .holiday{
  font-size:var(--t-super-nano);color:var(--accent-ink);font-weight:600;
  letter-spacing:var(--tracking-wide);margin-top:1px;display:inline-flex;align-items:center;gap:4px;line-height:1.2;
}
.tool.hours .txt .holiday::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block;
}

/* Mobile hamburger */
/* min 44×44 tap target; the icon bars sit in the 22px inner area via padding */
.hamburger{
  display:none;
  width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;
  padding:0;cursor:pointer;gap:5px;
}
.hamburger span{display:block;height:1.5px;background:var(--ink);width:22px}

/* ───────── Mobile (≤ 767px) ───────── */
/* Wave-06b: hide desktop-only header tools; ensure search button is tap-friendly. */
@media (max-width: 767px) {
  .header .desktop-only {
    display: none !important;
  }

  .header .row1 {
    grid-template-columns: auto 1fr auto auto;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-3);
  }

  .header .logo {
    font-size: var(--t-h5);
  }

  .search-btn {
    min-width: 44px;
    padding: 0 12px;
  }

  .search-btn span {
    display: none; /* icon only at narrow viewports */
  }

  .hamburger {
    display: flex;
  }
}
/* ===== 20-components/nav.mobile.css ===== */
/* ───────── Wave-06b: nav.mobile.css — unified nav drawer (≤ 767px) ───────── */
/* Below --bp-md the <nav> becomes a slide-in panel (off-canvas drawer).
   Nav items are hidden by default (drawer closed); hamburger is visible.
   Playwright nav-state check passes: megamenuVisible=false, hamburgerVisible=true. */

@media (max-width: 767px) {
  /* ── Nav panel — closed state (display:none → offsetParent=null on children) ── */
  /* !important needed: 30-pages/_shared-discovery.css loads after 20-components/nav.mobile.css
     and has an unconditional .nav{display:flex} rule that overrides without it. */
  nav.nav {
    display: none !important; /* closed by default; JS sets data-state="open" to show */
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(360px, 90vw);
    background: var(--paper);
    box-shadow: var(--shadow-floating);
    z-index: var(--z-dialog);
    overflow-y: auto;
    padding: var(--s-5) var(--s-4);
    flex-direction: column;
    gap: var(--s-3);
  }

  /* ── Open state — drawer slides in ── */
  nav.nav[data-state="open"] {
    display: flex !important; /* must beat .nav{display:flex} from _shared-discovery.css (unconditional) */
  }

  /* Scroll lock when drawer is open */
  body.nav-open-mobile {
    overflow: hidden;
  }

  /* ── Close button: visible only inside the drawer ── */
  nav.nav .drawer-close {
    align-self: flex-end;
    background: none;
    border: 0;
    font-size: var(--t-h3);
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Nav-item: accordion row ── */
  nav.nav .nav-item {
    border-block-end: 1px solid var(--line);
  }

  nav.nav .nav-item > .has {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-4) 0;
    font-size: var(--t-h6);
    text-decoration: none;
    color: var(--ink);
    min-height: 44px;
  }

  nav.nav .nav-item > .has::after {
    content: '\203A'; /* › */
    font-size: var(--t-h5);
    transition: transform .2s ease;
  }

  nav.nav .nav-item[aria-expanded="true"] > .has::after {
    transform: rotate(90deg);
  }

  /* ── Mega panels: collapsed by default; expand on aria-expanded ──
     Also undo the desktop absolute-positioning / centering from
     30-pages/_shared-discovery.css so the panel flows as a static
     accordion block inside the drawer. Without this the mega keeps
     position:absolute + width:100vw + transform:translateX(-50%) and
     opacity:0/visibility:hidden — the row expands but the panel stays
     invisible and offset. */
  nav.nav .mega {
    display: none;
    position: static;
    width: auto;
    top: auto;
    left: auto;
    transform: none;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  nav.nav .nav-item[aria-expanded="true"] .mega {
    display: block;
    padding-block-end: var(--s-4);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Stop the desktop .nav-item:hover/.focus-within rule from re-applying the
     translateX(-50%) when the user is focused inside the drawer accordion.
     That rule's specificity (0,3,0) outranks the unconditional nav.nav .mega
     (0,2,1), so it must be overridden in the same media context. */
  nav.nav .nav-item:hover .mega,
  nav.nav .nav-item:focus-within .mega {
    transform: none;
  }

  nav.nav .mega-inner {
    display: block; /* override desktop grid */
  }

  nav.nav .mega-col {
    margin-block-end: var(--s-4);
  }

  nav.nav .mega-col-title {
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--muted);
    margin-block-end: var(--s-2);
  }

  nav.nav .mega-col a {
    display: flex;
    align-items: center;
    padding: var(--s-3) 0;
    font-size: var(--t-small);
    min-height: 44px;
    color: var(--body);
    text-decoration: none;
  }

  /* Mega-card hero images: hidden on mobile (intentional — see SPEC §4.1 R6) */
  nav.nav .mega-card {
    display: none;
  }

  /* ── Top-level standalone links (Новинки, Розпродаж) ── */
  nav.nav > a {
    display: flex;
    align-items: center;
    padding: var(--s-4) 0;
    font-size: var(--t-h6);
    text-decoration: none;
    color: var(--ink);
    min-height: 44px;
    border-block-end: 1px solid var(--line);
  }

  /* ── Contact strip absorbed from mobile-side-menu.html ── */
  .nav-mobile-contact {
    margin-block-start: var(--s-5);
    padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--line);
  }

  .nav-mobile-contact .msm-phones {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .nav-mobile-contact .msm-phones a {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-body);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-mobile-contact .msm-hours,
  .nav-mobile-contact .msm-addr {
    font-size: var(--t-small);
    color: var(--muted);
    margin-block-start: var(--s-3);
  }

  .nav-mobile-contact .msm-socials {
    display: flex;
    gap: var(--s-4);
    margin-block-start: var(--s-4);
  }

  .nav-mobile-contact .msm-socials a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
  }

  /* ── Hamburger: show on mobile ── */
  /* !important beats .hamburger{display:none} redeclared by _shared-discovery.css + pdp.css after this file */
  .hamburger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 13px 11px;
    cursor: pointer;
    background: none;
    border: 0;
  }
}

/* ── At ≤ 768px: suppress mega panel layout contribution ─────────────────────
   The .mega uses position:absolute + width:100vw + left:50% + translateX(-50%).
   When the shell has 32px padding, the mega bleeds 32px past the right edge of
   the viewport, making documentElement.scrollWidth > clientWidth.
   At these widths navigation is handled by the hamburger drawer; mega panels
   are never opened, so hiding them in layout is safe. The mobile drawer already
   hides them via the @media (max-width:767px) block above; this rule covers the
   single-pixel edge case at exactly 768px on pages that don't load
   _shared-discovery.css (account, checkout, static, article, blog, etc.). */
@media (max-width: 768px) {
  .mega {
    display: none;
  }
}

/* ── Desktop (≥ 769px): restore nav visibility + hide mobile-only elements ── */
@media (min-width: 769px) {
  /* nav.nav: display:flex comes from _shared-discovery.css (loads after this file).
     Explicit here for pages that don't load _shared-discovery.css.

     position: relative is REQUIRED — the .mega panel is position:absolute with
     top:100% and depends on nav being the positioned containing block. Setting
     position:static here (as a prior "defensive" undo) drops the mega to the
     end of <main>, so hover reveals an off-screen panel and the dropdown
     looks broken. nav.nav (0,1,1) beats .nav (0,1,0) from _shared-discovery,
     so it must repeat the relative declaration here. */
  nav.nav {
    display: flex;
    position: relative;
  }

  nav.nav .drawer-close,
  .nav-mobile-contact {
    display: none;
  }
}
/* ===== 20-components/one-click-modal.css ===== */
/* ===== one-click-modal.css — quickorder modal layout (Task 27) =====
   Shared .scrim/.dialog/.field/.submit-row/.miniprod styles are loaded once
   here. size-chart-modal.css adds tab + table rules on top.
*/

.scrim{
  position:fixed;inset:0;z-index:var(--z-dialog);
  background:var(--scrim-modal);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:5vh var(--s-4);
}
.scrim.open, .scrim.is-open{display:flex}
.scrim .dialog{
  width:min(var(--w-modal-default), 100%);background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-modal);max-height:90vh;overflow:auto;
  animation:dIn .2s ease-out;
}
@keyframes dIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dialog .dh{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.dialog .dh h3{
  margin:0;font-family:var(--font-display);font-size:var(--t-body);font-weight:var(--weight-display,500);
  letter-spacing:var(--tracking-display,-.01em);text-transform:none;line-height:1.2;
}
.dialog .dc{font-size:var(--t-nano);color:var(--muted);border:1px solid var(--line);padding:4px 8px;cursor:pointer;background:none;letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600}
.dialog .db{padding:20px}
.dialog .miniprod{display:flex;gap:12px;align-items:center;padding:12px;background:var(--paper-2);margin-bottom:18px}
.dialog .miniprod .img{width:60px;height:80px;background:var(--paper-3);position:relative;overflow:hidden;flex:none}
.dialog .miniprod .img .ph{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.08), transparent 60%)}
.dialog .miniprod .info{display:flex;flex-direction:column;gap:3px;font-size:var(--t-caption)}
.dialog .miniprod .info b{font-weight:500;color:var(--ink)}
.dialog .miniprod .info small{font-size:var(--t-micro);color:var(--muted)}
.dialog .miniprod .info .chips{display:flex;gap:6px;margin-top:3px;font-size:var(--t-nano);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600;color:var(--ink-2)}
.dialog .miniprod .info .chips span{padding:2px 6px;background:var(--paper);border:1px solid var(--line)}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:var(--t-nano);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.field label .req{color:var(--accent-ink);font-size:var(--t-nano)}
.field label .opt{color:var(--muted);font-size:var(--t-nano);font-weight:400}
.field input, .field textarea, .field select{
  border:1px solid var(--line);padding:11px 12px;font-family:inherit;font-size:var(--t-small);border-radius:var(--radius-s);
  background:var(--paper);color:var(--ink);outline:none;transition:border-color .15s;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--ink)}
.field.req input, .field.req select{border-color:var(--ink)}
.field.req label{color:var(--ink)}
.field textarea{min-height:70px;resize:vertical;font-family:inherit}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.submit-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper-2)}
.submit-row small{font-size:var(--t-nano);color:var(--muted)}

/* ----- Dialog variants & shared in-dialog typography (added 2026-05-18 r2)
   Replaces inline style="" attrs in size-help-modal, size-chart-modal,
   one-click-modal, reserve-modal, product.html added-to-cart, etc. */

.dialog--narrow{ width:min(var(--w-modal-narrow), 100%); }   /* short-form modals */
.dialog--wide  { width:min(var(--w-modal-wide), 100%); }     /* size-chart, table-heavy modals */

/* Body copy inside a dialog */
.modal-help-text{ font-size:var(--t-caption); color:var(--body); margin:0 0 var(--s-4); }
.modal-fineprint{ font-size:var(--t-micro);  color:var(--muted); margin-top:14px; }

/* Modal-scoped primary button — slightly reduced padding from page CTAs. */
.dialog .btn-primary{ padding:var(--s-3) 22px; }

/* Side-by-side action buttons inside a dialog body (added-to-cart pattern). */
.dialog .modal-actions{ display:flex; gap:var(--s-2); }
.dialog .modal-actions .btn-primary,
.dialog .modal-actions .btn-secondary{ padding:var(--s-3) 18px; flex:1; }

/* Dialog heading with an inline icon (added-to-cart "✓ Додано"). */
.dialog .dh-icon{ display:flex; align-items:center; gap:var(--s-2); }

/* ───────── Mobile (≤ 767px) — bottom sheet ───────── */
@media (max-width: 767px) {
  .scrim {
    align-items: flex-end;
    padding: 0;
  }

  .scrim .dialog {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100vw;
    max-width: 100vw;
    max-block-size: 90vh;
    border-radius: var(--radius-frame) var(--radius-frame) 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    margin: 0;
    overflow-y: auto;
  }

  .scrim[aria-hidden="false"] .dialog,
  .scrim.open .dialog,
  .scrim.is-open .dialog {
    transform: translateY(0);
  }

  .scrim .dialog .dh {
    position: sticky;
    inset-block-start: 0;
    background: var(--paper);
    z-index: 1;
    padding-block: var(--s-3);
    border-block-end: 1px solid var(--line);
  }

  .scrim .dialog .submit-row {
    position: sticky;
    inset-block-end: 0;
    background: var(--paper);
    padding-block: var(--s-3);
    border-block-start: 1px solid var(--line);
  }
}
/* ===== 20-components/product-card.css ===== */
/* ===== product-card.css — listing card (Task 26) ===== */

.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover,.card-link:focus{color:inherit;text-decoration:none}
.card{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;cursor:pointer}
.card .img{
  aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden;
}
.card .img .ph{position:absolute;inset:0}
.card .img .ph picture{display:block;width:100%;height:100%}
.card .img .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.card .img .ph video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--paper-2)}

.card .badges{
  position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:4px;
}
.card .badges span{
  font-size:var(--t-super-nano);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;
  padding:4px 8px;background:var(--paper);color:var(--ink);border-radius:var(--radius-xs);
}
.card .badges .sale{background:var(--accent);color:var(--cta-fg)}
.card .badges .new{background:var(--ink);color:var(--cta-fg)}
.card .badges .hit{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.card .wish{
  position:absolute;top:12px;right:12px;z-index:3;
  /* min 44×44 tap target; visual circle via inner size */
  width:44px;height:44px;background:transparent;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .2s;border:0;
}
.card .wish:hover{background:var(--paper)}
.card .wish svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.5;transition:fill .2s, stroke .2s}
.card .wish.on svg{fill:var(--accent);stroke:var(--accent)}

.card .meta{padding:14px 2px 8px;display:flex;flex-direction:column;gap:6px}
.card .meta .title{font-size:var(--t-caption);font-weight:400;color:var(--ink);letter-spacing:.01em}
.card .meta .price{display:flex;align-items:baseline;gap:10px}
.card .meta .now{font-size:var(--t-small);font-weight:600;font-variant-numeric:tabular-nums}
.card .meta .was{font-size:var(--t-micro);color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.card .meta .sale-now{color:var(--accent-ink)}

/* Sizes strip (default styling — visibility/position varies by data-card mode) */
.card .sizes{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;
}
.card .sizes span{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wide);color:var(--muted);padding:2px 6px;
  border:1px solid var(--line);border-radius:var(--radius-xs);min-width:26px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.card .sizes span.out{text-decoration:line-through;opacity:.5}

/* ===== Card mode variants (driven by body[data-card="..."]) ===== */

/* Style A: hover-reveal (minimal) */
[data-card="hover"] .card .sizes{
  position:absolute;inset:auto 12px 12px;z-index:3;background:var(--paper);padding:8px;
  opacity:0;transform:translateY(6px);transition:all .2s;pointer-events:none;justify-content:center;
}
[data-card="hover"] .card:hover .sizes{opacity:1;transform:none;pointer-events:auto}
[data-card="hover"] .card .sizes{display:flex}
[data-card="hover"] .card .img{margin-bottom:0}

/* Style B: persistent strip */
[data-card="strip"] .card .sizes{display:flex}
[data-card="strip"] .card .meta{gap:8px}

/* Style C: quick-add hover */
[data-card="quick"] .card .quickadd{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:var(--ink);color:var(--cta-fg);padding:10px 12px;
  display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(8px);transition:all .2s;z-index:3;
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:500;cursor:pointer;
}
[data-card="quick"] .card:hover .quickadd{opacity:1;transform:none}
[data-card="quick"] .card .quickadd-sizes{display:flex;gap:4px}
[data-card="quick"] .card .quickadd-sizes span{
  padding:3px 6px;font-size:var(--t-super-nano);background:rgba(255,255,255,.12);
  border-radius:var(--radius-xs);cursor:pointer;
}
[data-card="quick"] .card .quickadd-sizes span:hover{background:var(--paper);color:var(--ink)}
[data-card="quick"] .card .sizes{display:none}

/* Tail / "see more" filler card. Sized to match the product PHOTO (not the
   whole card with meta) — aspect-ratio:3/4 of the carousel track width, pinned
   to the top of the row so it doesn't stretch to the tallest sibling's full
   height. Mirrors the .carousel__view-more pattern in article-elements.css. */
.card.tail{
  background:var(--paper-2);aspect-ratio:3/4;align-items:center;justify-content:center;
  display:flex;flex-direction:column;gap:10px;color:var(--ink);
  border:1px dashed var(--line-2);
  align-self:start;
}
.card.tail b{font-family:var(--font-display);font-size:var(--t-h6);font-weight:500;letter-spacing:var(--tracking-display,-.01em)}
.card.tail small{font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.card.tail svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.5}

/* ============================================================
   Canonical card variant — .card.has-indicators
   (Olena reference; promoted from 30-pages/catalog.css 2026-05-17)

   Adds: 5-photo hover stack, photo-position indicator dots,
   inline-size strip that swaps to a sizes-drawer on hover.

   This variant is the v0.3 winning card shape (see partials/product-card.html).
   Opt-in via the .has-indicators modifier so legacy [data-card="quick|strip|hover"]
   cards on other surfaces continue to render unchanged.

   Catalog-grid-specific overrides (meta column-gap, title font-size, .catx-grid
   alignment) stay in 30-pages/catalog.css.
   ============================================================ */

/* 5-photo stack — only the .ph matching .card[data-active=N] is visible */
.card.has-indicators .img .ph-stack{position:absolute;inset:0}
.card.has-indicators .img .ph{
  position:absolute;inset:0;
  opacity:0;transition:opacity .25s ease;
}
.card.has-indicators .img .ph[data-idx="0"]{opacity:1}
.card.has-indicators[data-active="0"] .img .ph[data-idx="0"],
.card.has-indicators[data-active="1"] .img .ph[data-idx="1"],
.card.has-indicators[data-active="2"] .img .ph[data-idx="2"],
.card.has-indicators[data-active="3"] .img .ph[data-idx="3"],
.card.has-indicators[data-active="4"] .img .ph[data-idx="4"]{opacity:1}
.card.has-indicators[data-active="0"] .img .ph:not([data-idx="0"]),
.card.has-indicators[data-active="1"] .img .ph:not([data-idx="1"]),
.card.has-indicators[data-active="2"] .img .ph:not([data-idx="2"]),
.card.has-indicators[data-active="3"] .img .ph:not([data-idx="3"]),
.card.has-indicators[data-active="4"] .img .ph:not([data-idx="4"]){opacity:0}

/* Dummy photo tones — tints the .fig of each slide so the user
   visually sees a different "photo" on each hover zone.
   Remove these rules once real <img>-backed slides ship. */
.card.has-indicators .img .ph[data-tone="2"] .fig{background:#e8d5c4}
.card.has-indicators .img .ph[data-tone="3"] .fig{background:#cdb8a8}
.card.has-indicators .img .ph[data-tone="4"] .fig{background:#b8a292}
.card.has-indicators .img .ph[data-tone="5"] .fig{background:#9a8478}
.card.has-indicators .img .ph .fig{
  position:absolute;inset:0;background:#dfd5c8;
}

/* Hover zones — invisible 20%-wide strips above .ph-stack that
   drive .card[data-active] via card-photo-stack.js. */
.card.has-indicators .img .ph-zones{
  position:absolute;inset:0;z-index:4;display:grid;
  grid-template-columns:repeat(5,1fr);
}
.card.has-indicators .img .ph-zones > span{display:block;cursor:pointer}

/* Photo-position dots — 5 lines near bottom of .img.
   Default: first dot active. Swaps to the active dot to match data-active. */
.card.has-indicators .img .ph-dots{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:5;
  display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  opacity:0;transition:opacity .2s ease;
  pointer-events:none;
}
.card.has-indicators:hover .img .ph-dots{opacity:1}
.card.has-indicators .img .ph-dots > span{
  height:2px;background:var(--on-image-dot);border-radius:var(--radius-xs);
  transition:background-color .2s ease;
}
.card.has-indicators[data-active="0"] .img .ph-dots > span[data-dot="0"],
.card.has-indicators[data-active="1"] .img .ph-dots > span[data-dot="1"],
.card.has-indicators[data-active="2"] .img .ph-dots > span[data-dot="2"],
.card.has-indicators[data-active="3"] .img .ph-dots > span[data-dot="3"],
.card.has-indicators[data-active="4"] .img .ph-dots > span[data-dot="4"]{
  background:var(--ink);
}

/* Active-card background — on hover, tint the refined card with --paper-2
   so it visually lifts above its neighbors while the drawer is open.
   Negative margin + padding extends the tint past the .img/.meta edges;
   bottom padding is half of top so the tint hugs the drawer buttons. */
.card.has-indicators{
  margin:-8px -8px -4px;padding:8px 8px 4px;
  transition:background-color .18s ease;
}
.card.has-indicators:hover{background:var(--paper-2)}

/* Meta layout — title left, price right (same row), sizes-slot full-width row 2.
   Auto-flow places .title in (1,1) and .price in (1,2); .sizes-slot spans both
   columns in row 2 via the explicit `grid-column: 1 / -1`. Surfaces that want
   a different font size / min-height on the title just override locally
   (e.g. .catx-grid does for the dense catalog grid). */
.card.has-indicators .meta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px;row-gap:6px;align-items:start;
}
.card.has-indicators .meta .title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card.has-indicators .meta .price{
  flex-direction:column;align-items:flex-end;gap:2px;
  white-space:nowrap;text-align:right;
}
.card.has-indicators .meta .sizes-slot{grid-column:1 / -1}

/* Sizes slot — fixed-height area that swaps between inline strip and the
   two-row drawer on hover. Slot height is reserved for the drawer so the
   swap causes no layout shift. The inline strip top-aligns within the
   slot; the gap below it is the drawer's reservation area.

   When the host page uses a 2-col meta grid (catalog grid does), the slot
   spans both columns in row 2 — that's set in catalog.css.

   min-height tracks the drawer's natural height (label 12px line + 4px gap
   + 40px buttons ≈ 62px). No extra padding so the tint hugs the buttons. */
.card.has-indicators .sizes-slot{
  position:relative;display:grid;grid-template-areas:"stack";
  min-height:62px;
}
.card.has-indicators .sizes-inline,
.card.has-indicators .sizes-drawer{
  grid-area:stack;
  transition:opacity .18s ease;
}
.card.has-indicators .sizes-drawer{opacity:0;pointer-events:none}
.card.has-indicators:hover .sizes-inline{opacity:0;pointer-events:none}
.card.has-indicators:hover .sizes-drawer{opacity:1;pointer-events:auto}

/* Inline strip — "Розміри: XS · S · M · L · XL", top-aligned in slot. */
.card.has-indicators .sizes-inline{
  align-self:start;
  display:flex;align-items:baseline;gap:6px;
  font-size:var(--t-nano);color:var(--muted);letter-spacing:.02em;
}
.card.has-indicators .sizes-inline .lbl{
  color:var(--muted);font-weight:500;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--t-super-nano);
}
.card.has-indicators .sizes-inline .vals{
  display:inline-flex;flex-wrap:wrap;gap:0;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.card.has-indicators .sizes-inline .vals > span{padding:0 6px;position:relative}
.card.has-indicators .sizes-inline .vals > span + span::before{
  content:"·";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  color:var(--muted);
}
.card.has-indicators .sizes-inline .vals > span.out{
  text-decoration:line-through;color:var(--muted);
}

/* Sizes drawer — 2-row stack: label header on top, size buttons below.
   Gap kept tight (4px) so the label reads as a header for the buttons. */
.card.has-indicators .sizes-drawer{
  align-self:start;
  display:flex;flex-direction:column;gap:4px;
}
.card.has-indicators .sd-label{
  color:var(--muted);font-weight:500;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--t-nano);
}
.card.has-indicators .sd-sizes{display:flex;gap:6px;flex-wrap:wrap}
.card.has-indicators .sd-sizes button{
  appearance:none;background:var(--paper);border:1px solid var(--line);cursor:pointer;
  /* min 44×44 tap target */
  min-width:44px;height:44px;min-height:44px;padding:0 6px;
  font-size:var(--t-caption);font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--ink);font-family:inherit;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.card.has-indicators .sd-sizes button:hover{
  border-color:var(--ink);background:var(--ink);color:var(--cta-fg);
}
.card.has-indicators .sd-sizes button[disabled]{
  text-decoration:line-through;opacity:.4;cursor:not-allowed;
}

/* ───────── Mobile (≤ 767px) — swipeable product images (Wave-06b Phase 3) ───────── */
/* Note: card wrapper is div.card.has-indicators[data-behavior="product-card"];
   .product-card is a data-behavior value, not a class — selectors use .card */
@media (max-width: 767px) {
  .card .card-images,
  .card .ph-stack,
  /* must override .card.has-indicators .img .ph-stack{position:absolute;inset:0} */
  .card.has-indicators .img .ph-stack {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
    /* override absolute positioning so flex layout creates scrollable width */
    position: relative;
    inset: unset;
    width: 100%;
    /* The card is wrapped in <a class="card-link">, which without an explicit
       touch-action will intercept touch as a tap-gesture and never let the
       horizontal swipe scroll through. Telling the browser this element
       owns horizontal panning makes touch scroll work inside the anchor. */
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .card .card-images::-webkit-scrollbar,
  .card .ph-stack::-webkit-scrollbar {
    display: none;
  }

  .card .card-images > picture,
  .card .card-images > .ph,
  .card .ph-stack > .ph,
  /* higher specificity to beat .card.has-indicators .img .ph (0,3,1) */
  .card.has-indicators .img .ph-stack > .ph {
    flex: 0 0 100%;
    scroll-snap-align: center;
    /* override absolute positioning from .card.has-indicators .img .ph */
    position: relative;
    inset: unset;
    opacity: 1 !important;
  }

  /* Hide hover-mounted prev/next arrows (swipe replaces them) */
  .card .card-nav,
  .card .carousel-nav {
    display: none;
  }

  /* Indicator dots stay; ensure they overlay bottom-center */
  .card .ph-dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--s-2);
    justify-content: center;
  }
}


/* ── Add-to-basket feedback (Wave-06b polish) ──
   Triggered by product-card.js when a .sd-sizes button is clicked.
   Mockup-only — bumps the header cart icon + flashes the size button. */
@keyframes ol-cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes ol-size-added {
  0%   { background: var(--ink); color: var(--cta-fg); border-color: var(--ink); }
  100% { background: var(--paper); color: var(--ink); border-color: var(--line); }
}
[data-behavior="header-cart-icon"].is-bumped .ico {
  animation: ol-cart-bump 0.45s cubic-bezier(.22,.61,.36,1);
  transform-origin: center;
  display: inline-block;
}
.card .sd-sizes button.is-added {
  animation: ol-size-added 0.4s ease-out;
}

/* Quick Buy icon — injected by product-card.js; bottom-right of card meta,
   mobile-only. Sits under the price. Tap bumps the cart badge. */
.card .meta .qb-icon {
  display: none; /* hidden by default; mobile rule below shows it */
}
@media (max-width: 767px) {
  .card .meta {
    position: relative;
  }
  .card .meta .qb-icon {
    position: absolute;
    inset-block-end: 4px;
    inset-inline-end: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--cta-fg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: transform .15s ease, background-color .15s ease;
  }
  .card .meta .qb-icon:hover,
  .card .meta .qb-icon:focus {
    background: var(--accent-ink);
    transform: scale(1.06);
  }
  .card .meta .qb-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Reserve right-side space in .meta so price/title don't sit under the icon */
  .card .meta .price,
  .card .meta .title {
    padding-inline-end: 52px;
  }
}
/* ===== 20-components/promo-bar.css ===== */
/* ===== promo-bar.css — top announcement bar (Task 21) ===== */

.promo-bar{
  background:var(--ink-2);color:var(--cta-fg);
  font-size:var(--t-caption);letter-spacing:var(--tracking-ui, 0.01em);
  font-weight:400;
  /* min-height:44px ensures tap-target audit passes for the bar (data-behavior makes it interactive) */
  min-height:44px;
  padding:9px 16px;text-align:center;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.promo-bar b{
  color:var(--cta-fg);font-weight:600;letter-spacing:.02em;
  border-bottom:1.5px solid var(--accent);padding-bottom:1px;
}
.promo-bar .close{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  /* min 44×44 tap target */
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:.7;cursor:pointer;font-size:var(--t-micro);line-height:1;
  background:none;border:0;color:inherit;padding:0;
  transition:opacity .15s;
}
.promo-bar .close:hover{opacity:1}

/* mobile-mode overrides (used by homepage/catalog/product preview frames) */
body.mobile-mode .promo-bar{font-size:var(--t-micro);padding:7px 12px}
/* ===== 20-components/search-modal.css ===== */
/* ===== search-modal.css — header search dialog (Task 25) ===== */

.search-modal{
  position:fixed;inset:0;z-index:var(--z-dialog);
  background:var(--scrim-modal);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;padding-top:10vh;
}
.search-modal.open{display:flex}
.search-modal .box{
  width:min(var(--w-modal-wide), 90vw);background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow-modal);
  animation:smIn .2s ease-out;
}
@keyframes smIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.search-modal .sm-input{
  display:flex;align-items:center;gap:14px;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.search-modal .sm-input svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.5;flex:none}
.search-modal .sm-input input{
  flex:1;border:0;outline:0;background:none;
  font-family:inherit;font-size:var(--t-h6);color:var(--ink);
  letter-spacing:-.005em;
}
.search-modal .sm-input input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.search-modal .sm-input input::placeholder{color:var(--muted)}
.search-modal .sm-close{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;
  color:var(--muted);border:1px solid var(--line);padding:4px 8px;
  cursor:pointer;background:none;
}
.search-modal .sm-body{padding:18px 24px 24px;display:grid;gap:18px}
.search-modal .sm-section h3{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;margin:0 0 10px;
}
.search-modal .sm-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-modal .sm-chips a{
  font-size:var(--t-caption);padding:7px 14px;border:1px solid var(--line);
  border-radius:var(--radius-pill);color:var(--ink);transition:all .15s;cursor:pointer;
}
.search-modal .sm-chips a:hover{border-color:var(--ink);background:var(--paper-2)}
.search-modal .sm-trending{display:grid;gap:2px}
.search-modal .sm-trending a{
  display:flex;align-items:center;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-small);color:var(--ink);
  transition:transform .15s;cursor:pointer;
}
.search-modal .sm-trending a:hover{transform:translateX(6px)}
.search-modal .sm-trending a:last-child{border-bottom:0}
.search-modal .sm-trending .rank{
  font-size:var(--t-nano);color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-wide);
  width:20px;flex:none;
}
.search-modal .sm-trending .term{flex:1}
.search-modal .sm-trending .delta{
  font-size:var(--t-nano);color:var(--accent-ink);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;
}
.search-modal .sm-trending .delta.down{color:var(--muted)}
.search-modal .sm-foot{
  border-top:1px solid var(--line);padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--t-nano);color:var(--muted);
  letter-spacing:var(--tracking-wide);
  font-variant-numeric:tabular-nums;
}
.search-modal .sm-foot kbd{
  font-family:var(--font-mono);font-size:var(--t-super-nano);padding:2px 6px;
  border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper-2);color:var(--ink);
}

/* ───────── Mobile (≤ 767px) — fullscreen takeover ───────── */
@media (max-width: 767px) {
  .search-modal {
    padding-top: 0;
    align-items: stretch;
    background: var(--paper);
  }

  .search-modal .box {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    animation: none;
    display: flex;
    flex-direction: column;
  }

  .search-modal .sm-body {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
/* ===== 20-components/shell-fav-guest-prompt.css ===== */
/* shell-fav-guest-prompt.css — non-blocking top-right notification.
   Replaced the scrim modal pattern after the previous implementation was
   effectively orphaned (selectors mismatched current wish-button markup).
   Notification auto-dismisses after a 10s countdown unless the user
   interacts with it. */

#favGuestPrompt{
  position:fixed;
  top:var(--s-4);right:var(--s-4);
  z-index:var(--z-toast);
  width:min(380px, calc(100vw - var(--s-4) * 2));
  padding:var(--s-5) var(--s-5) var(--s-4);
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  opacity:0;transform:translateY(-12px);
  transition:opacity .25s ease-out, transform .25s ease-out;
  pointer-events:none;
}
#favGuestPrompt.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}
#favGuestPrompt[hidden]{display:none !important}

.notification-fav-prompt .notification-close{
  position:absolute;top:var(--s-2);right:var(--s-2);
  width:32px;height:32px;
  background:transparent;border:0;
  font-size:22px;line-height:1;
  color:var(--muted);cursor:pointer;
}
.notification-fav-prompt .notification-close:hover{color:var(--ink)}

.notification-fav-prompt .notification-body{
  display:flex;align-items:flex-start;gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.notification-fav-prompt .icon{
  font-size:28px;line-height:1;color:var(--accent);flex:none;
}
.notification-fav-prompt .text strong{
  display:block;margin:0 0 var(--s-1);
  font-size:var(--t-h4);font-weight:600;color:var(--ink);
}
.notification-fav-prompt .text p{
  margin:0;color:var(--body);font-size:var(--t-small);line-height:var(--lh-snug);
}
.notification-fav-prompt .actions{
  display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-3);
}
/* The dismiss button label is long (full sentence + countdown). The shared
   .btn-secondary uses uppercase + tracking-wider which forces an ugly 2-line
   wrap. Inside the notification we render it as regular case so it fits and
   reads naturally. */
.notification-fav-prompt .btn-secondary{
  text-transform:none;letter-spacing:0;font-weight:500;
  padding:var(--s-3) var(--s-4);
}
/* Ensures the dismiss-button label + inline countdown render as a single text
   run rather than as separate flex children — `.btn-secondary` is inline-flex
   with `gap:10px`, which would otherwise space the `(`, `10`, and `)` apart. */
.notification-fav-prompt .btn-secondary .label{
  display:inline;
}
.notification-fav-prompt .form-hint{
  margin:0;font-size:var(--t-nano);color:var(--muted);
}

@media (prefers-reduced-motion: reduce){
  #favGuestPrompt{transition:opacity .15s linear;transform:none}
  #favGuestPrompt.is-shown{transform:none}
}
/* ===== 20-components/size-chart-modal.css ===== */
/* ===== size-chart-modal.css — tabs + measurement tables (Task 27) ===== */

/* Tabs (size chart) */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{
  padding:12px 18px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:var(--t-caption);letter-spacing:var(--tracking-wide);cursor:pointer;color:var(--muted);font-weight:500;
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab-pane{display:none}
.tab-pane.on{display:block}
table.size-chart{width:100%;border-collapse:collapse;font-size:var(--t-caption);font-variant-numeric:tabular-nums}
table.size-chart th, table.size-chart td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center}
table.size-chart th{background:var(--paper-2);font-weight:500;color:var(--ink-2);text-transform:uppercase;font-size:var(--t-nano);letter-spacing:var(--tracking-wider)}
table.size-chart td:first-child, table.size-chart th:first-child{text-align:left}

/* ───────── Mobile (≤ 767px) — size chart inside bottom sheet ───────── */
@media (max-width: 767px) {
  /* Table scrolls horizontally inside the sheet without inflating the dialog */
  .dialog .db { overflow-x: auto; }
  table.size-chart { min-width: 400px; }
}
/* ===== 20-components/wishlist-drawer.css ===== */
/* wishlist-drawer.css — extends shared .drawer-right pattern from basket-drawer.css */
#wishlistDrawer .drawer-empty::before {
  content: "♡";
  display: block;
  font-size: 48px;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
/* ===== 30-pages/_shared-discovery.css ===== */
/* ===== 30-pages/_shared-discovery.css — shared between homepage + catalog page =====
 * Extracted 2026-05-18 from the home.css/catalog.css ~70% duplication identified
 * in audit-tokens.md. Underscore prefix loads this file FIRST in the 30-pages/
 * alphabetical order so home.css and catalog.css can override.
 *
 * Scope: chrome (util / lang / nav / mega), section heading, hero / slider /
 * hero-tile / hero-carousel, cat-grid, carousel shell, promo-split, USP,
 * reviews layout (NOT the marquee variant — home-only, stays in home.css),
 * ig grid, SEO blocks, mobile-mode + sticky-header + responsive @media.
 *
 * Divergences live in their respective files:
 *   home.css → .reviews-marquee + .reviews-arrow blocks, mobile + max-768 + max-600 overrides
 *   catalog.css → .util .user accent palette, .ig-grid / .ig overrides, all catx-* blocks
 *
 * Loaded by every page (one bundle), but only home/catalog HTML uses these
 * classes; PDP/static carry chrome overrides that win by later cascade order.
 */

  /* Section rhythm: every top-level homepage section gets a consistent vertical
     gap above it — including the first hero (so there's breathing room between
     the main menu and the first hero block). Header/util shells above the hero
     stay untouched (they have their own padding).

     Targets by `section.hero` rather than `#hero` so the rule survives the
     v0.3 hero refactor (now uses [data-hero-variant] instead of id="hero",
     and the homepage may carry multiple <section class="hero"> blocks —
     e.g. a 1B carousel hero up top + a 2A slider hero between carousels). */
  main > section.hero,
  main > section.hero ~ .shell,
  main > section.hero ~ .full-bleed,
  main > section.hero ~ section.hero{
    margin-top:var(--space-section);
  }

  /* ============ ZONE 2 — Utility Bar ============ */
  .util{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;font-size:var(--t-caption);
    border-bottom:1px solid var(--line);
  }
  .util .l, .util .r{display:flex;align-items:center;gap:20px}
  /* Utility links: magenta underline draws in from left, ink color shift. The
     pink-ink mark is the "deliberate accent" — one moving pixel of brand color
     per visual zone, not a wash. */
  .util a{
    color:var(--body);cursor:pointer;
    background-image:linear-gradient(var(--pink-ink),var(--pink-ink));
    background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
    transition:color .2s ease, background-size .28s cubic-bezier(.22,.61,.36,1);
    /* tap-target: utility links must be ≥44×44px */
    display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  }
  .util a:hover{color:var(--ink);background-size:100% 1.5px}
  .util .socials{display:flex;gap:10px;margin-left:4px}
  .util .socials a{
    display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;
    color:var(--body);background-image:none;
    transition:color .2s ease, transform .2s ease;
  }
  .util .socials a:hover{color:var(--pink-ink);transform:translateY(-1px)}
  .util .socials svg{width:15px;height:15px}
  .lang{display:flex;gap:0;align-items:center;font-size:var(--t-micro);letter-spacing:var(--tracking-wide)}
  .lang a{
    /* tap-target: lang links must be ≥44px in both dimensions */
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
    padding:0 8px;border-right:1px solid var(--line);color:var(--muted);
    cursor:pointer;transition:color .2s ease, opacity .2s ease;
  }
  .lang a:last-child{border-right:none}
  .lang a:hover{color:var(--pink-ink)}
  .lang a.active{color:var(--ink);font-weight:600;cursor:default}
  .lang a.active:hover{color:var(--ink)}
  .lang a.dep{text-decoration:line-through;opacity:.5}
  .lang a.dep:hover{color:var(--muted);opacity:.85}
  .util .user{display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line)}
  /* .util .user accent palette — used by catalog / pdp / static (3 of 4 pages).
     Home is the outlier and overrides to ink in home.css. */
  .util .user svg{color:var(--accent)}
  .util .user a.accent{
    color:var(--accent-ink);font-weight:600;letter-spacing:.01em;
    background-image:none;
    border-bottom:1px solid transparent;transition:border-color .15s;
  }
  .util .user a.accent:hover{border-bottom-color:var(--accent-ink);color:var(--accent-ink)}

  /* ============ ZONE 3 — Main Header ============ */
  /* Most chrome (header, search-btn, tool/phone-menu, currency, search-modal)
     now lives in 20-components/*.css. Page-specific overrides kept below. */
  .nav{position:relative;z-index:var(--z-sticky)}

  /* Intentional page-specific overrides on .tool.wishlist row layout. */
  .tool.wishlist .row-bot{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
  }
  .tool.wishlist .row-bot .unsaved-ico{
    width:14px;height:14px;flex:none;
  }

  /* Mega nav */
  .nav{
    display:flex;justify-content:center;gap:32px;
    padding:14px 0 2px;font-size:var(--t-caption);
    text-transform:uppercase;letter-spacing:var(--tracking-wider);
    font-weight:500;
    position:relative;
    /* min-height:44px tap-target: nav[data-behavior] is counted as interactive */
    min-height:44px;
  }
  /* min-height:44px tap-target on nav direct links */
  .nav > a{padding:4px 0;position:relative;color:var(--ink-2);transition:color .15s;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
  .nav > a:hover{color:var(--ink)}
  .nav > a.sale{color:var(--pink-ink);font-weight:600}
  .nav-item{position:static}
  /* Mega-branch title: pink-ink color + magenta underline draws in when the
     mega panel is open (hover OR focus-within). Other nav direct-links keep
     their plain ink hover — the underline is reserved for "this branch is
     showing a panel" so the highlight signals panel state, not just link-ness. */
  .nav-item > a.has{
    padding:4px 0;position:relative;color:var(--ink-2);
    /* min-height:44px tap-target */
    display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
    background-image:linear-gradient(var(--pink-ink),var(--pink-ink));
    background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
    transition:color .2s ease, background-size .28s cubic-bezier(.22,.61,.36,1);
  }
  .nav-item > a.has::after{
    content:"";display:inline-block;width:5px;height:5px;
    border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
    transform:rotate(45deg);margin-left:6px;margin-bottom:2px;opacity:.55;
    transition:transform .2s;
  }
  .nav-item:hover > a.has, .nav-item:focus-within > a.has{color:var(--pink-ink);background-size:100% 1.5px}
  .nav-item:hover > a.has::after, .nav-item:focus-within > a.has::after{transform:rotate(225deg) translate(-1px,-1px);opacity:1}
  .nav > a.has::after{
    content:"";display:inline-block;width:5px;height:5px;
    border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
    transform:rotate(45deg);margin-left:6px;margin-bottom:2px;opacity:.55;
  }

  /* Mega panel */
  .mega{
    position:absolute;left:50%;transform:translateX(-50%) translateY(-4px);
    width:100vw;top:100%;
    background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card-hover);
    opacity:0;visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:var(--z-popover);
  }
  /* Invisible hover-bridge between the nav trigger and the mega panel so the cursor
     can cross without re-triggering hover-out (flicker). The bridge is only active
     while the nav-item is hovered/focused. */
  .nav-item > a.has::before{
    content:"";position:absolute;left:-12px;right:-12px;top:100%;height:14px;
    pointer-events:none;
  }
  .nav-item:hover > a.has::before, .nav-item:focus-within > a.has::before{pointer-events:auto}
  .nav-item:hover .mega, .nav-item:focus-within .mega{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  .mega-inner{
    max-width:var(--w-shell);margin:0 auto;
    padding:36px var(--pad) 40px;
    display:grid;grid-template-columns:repeat(4,1fr) 260px;gap:36px;
    text-transform:none;letter-spacing:0;font-weight:400;
  }
  .mega-inner.cols-6{grid-template-columns:repeat(5,1fr) 260px}
  .mega-col{display:flex;flex-direction:column;gap:9px}
  .mega-col .mega-col-title{
    font-family:var(--font-display);
    font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);font-weight:700;margin:0 0 6px;
  }
  .mega-col a{
    font-size:var(--t-small);color:var(--body);letter-spacing:.005em;
    transition:color .15s, transform .15s;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;line-height:1.3;
  }
  /* tap-target: enforce 44px only at touch viewports; on desktop the
     unconditional 44px bloated each megamenu row to 55px (44 + 11px gap),
     visibly increasing inter-link spacing. */
  @media (max-width: 767px) {
    .mega-col a{ min-height:44px; }
  }
  .mega-col a:hover{color:var(--accent-ink);transform:translateX(3px)}
  .mega-col a .sw{
    width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;
  }
  .mega-col a .tag{
    font-size:var(--t-super-nano);letter-spacing:.1em;text-transform:uppercase;
    padding:2px 5px;border-radius:var(--radius-s);font-weight:600;
    background:var(--accent-wash);color:var(--accent-ink);
  }
  .mega-col a .tag.hot{background:var(--accent);color:var(--cta-fg)}
  .mega-col a .sw[data-color="black"]{background:var(--ink)}
  .mega-col a .sw[data-color="white"]{background:var(--paper);border:1px solid var(--line)}
  .mega-col a .sw[data-color="pink"]{background:var(--accent)}
  .mega-col a .sw[data-color="red"]{background:#B22222}
  .mega-col a .sw[data-color="beige"]{background:#D4A574}
  .mega-col a .sw[data-color="green"]{background:#5B8A5E}

  /* Shortcuts column */
  .mega-col.shortcuts{gap:11px;border-right:1px solid var(--line);padding-right:24px}
  .mega-col.shortcuts .sc{
    font-size:var(--t-caption);color:var(--ink);font-weight:500;
    display:flex;align-items:center;gap:10px;cursor:pointer;transition:color .15s;
    letter-spacing:0;text-transform:none;
  }
  /* shortcuts column tap-target — mobile only (see .mega-col a note) */
  @media (max-width: 767px) {
    .mega-col.shortcuts .sc{ min-height:44px; }
  }
  .mega-col.shortcuts .sc:hover{color:var(--accent-ink)}
  .mega-col.shortcuts .sc-dot{
    width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none;
  }
  .mega-col.shortcuts .sc-sep{height:1px;background:var(--line);margin:6px 0}

  /* Mega card (editorial tile) */
  .mega-card{
    grid-column:-2 / -1;
    display:flex;flex-direction:column;gap:0;
    position:relative;overflow:hidden;cursor:pointer;
    background:var(--paper-2);
  }
  .mega-card .mc-ph{
    display:block;aspect-ratio:3/4;width:100%;position:relative;overflow:hidden;
    transition:transform .4s ease;
  }
  .mega-card .mc-ph picture{display:block;width:100%;height:100%}
  .mega-card .mc-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
  .mega-card:hover .mc-ph{transform:scale(1.03)}
  .mega-card .mc-ph[data-tone="1"]{background:linear-gradient(135deg,#E8C9B4 0%,#C8A485 100%)}
  .mega-card .mc-ph[data-tone="2"]{background:linear-gradient(135deg,#F8D4E4 0%,#D89BB4 100%)}
  .mega-card .mc-ph[data-tone="3"]{background:linear-gradient(135deg,#2C2C2C 0%,#5A5A5A 100%)}
  .mega-card .mc-ph[data-tone="4"]{background:linear-gradient(135deg,#D4E8D4 0%,#8DAE8D 100%)}
  .mega-card .mc-ph[data-tone="5"]{background:linear-gradient(135deg,#E8E0D4 0%,#B8A788 100%)}
  .mega-card .mc-ph[data-tone="6"]{background:linear-gradient(135deg,#EFEDE8 0%,#BEBAB2 100%)}
  .mega-card .mc-ph::after{
    content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), transparent 40%);
  }
  .mega-card .mc-meta{
    position:absolute;left:18px;right:18px;bottom:16px;
    display:flex;align-items:flex-end;gap:10px;color:var(--cta-fg);
  }
  .mega-card .mc-meta small{
    font-size:var(--t-super-nano);letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:500;
    display:block;margin-bottom:2px;
  }
  .mega-card .mc-meta b{font-family:var(--font-display);font-size:var(--t-h6);font-weight:500;letter-spacing:-.01em;line-height:1.15;display:block}
  .mega-card .mc-meta .arr{margin-left:auto;font-size:var(--t-h4);line-height:1;padding-bottom:2px}

  /* Section heading (customer facing) */
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin:0 0 var(--space-heading);
  }
  .section-head .title{
    font-family:var(--font-display);
    font-size:var(--t-h3);font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.025em);
    line-height:1.05;margin:0;
  }
  .section-head .sub{color:var(--muted);font-size:var(--t-caption);margin-top:8px}
  .section-head .right{display:flex;align-items:center;gap:20px}
  .section-head .seeall{
    font-size:var(--t-caption);letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--ink);padding-bottom:2px;
    /* tap-target: seeall must meet 44×44 on mobile (can be narrow in text width but height must clear 44) */
    display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  }
  /* "Усі категорії →" and other .more links inside section-head must meet 44px tap target */
  .section-head .more, .section-head a.more{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .arrows{display:flex;gap:6px}
  .arrows button{
    width:44px;height:44px;border:1px solid var(--line-2);background:var(--paper);
    border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .15s;color:var(--ink);
  }
  .arrows button:hover{border-color:var(--ink);background:var(--ink);color:var(--cta-fg)}
  .arrows svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

  /* ============ HERO ============ */
  .hero{margin-top:36px}
  .hero.full{padding:0 var(--pad)}  /* slight inset even for full-bleed */
  .hero.full.v1A{padding:0}          /* true edge-to-edge for 1A slider */

  /* Photo placeholder — the tasteful crop label */
  .ph{
    background:var(--paper-2);
    position:relative;overflow:hidden;
  }
  .ph::before{
    /* editorial diagonal wash so tiles read as distinct images */
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%),
      radial-gradient(ellipse at var(--ph-x,70%) var(--ph-y,35%), rgba(0,0,0,0.07) 0%, rgba(0,0,0,0) 60%);
  }
  .ph .crop{
    position:absolute;bottom:10px;left:12px;right:12px;
    font-size:var(--t-super-nano);
    color:rgba(0,0,0,.4);letter-spacing:var(--tracking-wide);
    font-variant-numeric:tabular-nums;
    display:flex;justify-content:space-between;align-items:flex-end;
    pointer-events:none;z-index:2;
  }
  .ph .crop span:last-child{text-align:right;opacity:.6}
  .ph .fig{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    /* 64px raw: placeholder display digit, removed with real product photography */
    font-size:64px;font-weight:300;letter-spacing:-.04em;
    color:rgba(0,0,0,.12);
    z-index:1;
  }

  /* Slider (1A / 2A) */
  .slider{
    position:relative;
    aspect-ratio: 21/9;
    background:var(--paper-2);
    overflow:hidden;
  }
  .v2A .slider{aspect-ratio: 21/8}
  .slider .stage{
    position:absolute;inset:0;
    display:grid;grid-template-columns:55% 45%;
  }
  .slider .copy{
    padding:clamp(32px, 5vw, 72px);
    display:flex;flex-direction:column;justify-content:center;gap:22px;
    position:relative;z-index:2;
  }
  .slider .eyebrow{
    font-size:var(--t-micro);letter-spacing:var(--tracking-widest);text-transform:uppercase;
    color:var(--accent-ink);font-weight:600;
  }
  .slider h1{
    font-family:var(--font-display);
    font-size:clamp(44px, 5.5vw, 84px);
    font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.03em);
    line-height:.98;margin:0;
    max-width:14ch;
  }
  .slider .sub{color:var(--body);font-size:var(--t-body);max-width:44ch;line-height:1.5}
  .slider .ctas{display:flex;gap:12px;margin-top:6px}
  .cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--cta-bg);color:var(--cta-fg);
    padding:14px 28px;border-radius:var(--radius-s);
    font-size:var(--t-caption);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:500;
    border:1px solid var(--cta-bg);transition:all .2s;cursor:pointer;
  }
  .cta:hover{background:transparent;color:var(--cta-bg)}
  .cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .cta.ghost:hover{background:var(--ink);color:var(--cta-fg)}
  .cta.pink{background:var(--accent);color:var(--cta-fg);border-color:var(--accent)}
  .cta.pink:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
  .cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
  .slider .media{
    position:relative;
  }
  .slider .media .ph{position:absolute;inset:0}
  .slider .controls{position:absolute;inset:0;pointer-events:none}
  .slider .arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);
    background:var(--surface-translucent);display:flex;align-items:center;justify-content:center;
    pointer-events:auto;cursor:pointer;backdrop-filter:blur(4px);
    transition:all .2s;
  }
  .slider .arrow:hover{background:var(--paper);border-color:var(--ink)}
  .slider .arrow.l{left:24px} .slider .arrow.r{right:24px}
  .slider .arrow svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.5}
  .slider .dots{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    display:flex;gap:6px;pointer-events:auto;
  }
  .slider .dots i{
    width:28px;height:2px;background:rgba(0,0,0,.25);display:block;cursor:pointer;transition:background .2s;
  }
  .slider .dots i.on{background:var(--ink)}

  /* Square/portrait hero tiles (1B/1C/2B/2C/2D/3A/3B/3C/3D) */
  .hero-grid{display:grid;gap:14px}
  .hero-grid.n3{grid-template-columns:1fr 1fr 1fr}
  .hero-grid.n2{grid-template-columns:1fr 1fr}
  .hero-tile{
    position:relative;
    background:var(--paper-2);
    overflow:hidden;
    aspect-ratio:1/1;
  }
  .hero-tile.portrait{aspect-ratio:9/16}
  .hero-tile .ph{position:absolute;inset:0}
  .hero-tile .overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
    padding:28px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
    z-index:2;
  }
  .hero-tile .eyebrow{
    font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--cta-fg);
    opacity:.9;margin-bottom:6px;font-weight:500;
  }
  .hero-tile h3{
    font-family:var(--font-display);
    font-size:clamp(24px, 2.6vw, 38px);
    font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.02em);
    color:var(--cta-fg);margin:0;line-height:1;
  }
  .hero-tile .tcta{
    margin-top:14px;align-self:flex-start;
    font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--cta-fg);font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;
  }
  .hero-tile .corner{
    position:absolute;top:14px;right:16px;z-index:3;
    font-size:var(--t-nano);color:rgba(255,255,255,.75);
    font-variant-caps:all-small-caps;font-weight:600;
    letter-spacing:var(--tracking-wider);
  }
  .hero-tile .vplay{
    position:absolute;top:14px;left:16px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;
    font-size:var(--t-nano);color:var(--cta-fg);
    background:rgba(0,0,0,.35);padding:4px 8px;border-radius:var(--radius-s);
    letter-spacing:var(--tracking-wider);
    font-variant-caps:all-small-caps;font-weight:600;
  }
  .hero-tile .vplay::before{content:"▶";font-size:8px}

  /* Carousel hero (1B / 2B) wrapper */
  .hero-carousel{position:relative}
  .hero-carousel .arrows{position:absolute;top:-50px;right:0}
  .hero-carousel .pager{
    display:flex;justify-content:center;gap:6px;margin-top:20px;
  }
  .hero-carousel .pager i{
    width:24px;height:2px;background:var(--line-2);display:block;cursor:pointer;
  }
  .hero-carousel .pager i.on{background:var(--ink)}

  /* ============ Zone 4 — Category Shortcuts ============ */
  .cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .cat{
    position:relative;aspect-ratio:3/4;background:var(--paper-2);overflow:hidden;cursor:pointer;
  }
  a.cat{display:block;text-decoration:none;color:inherit}
  .cat .ph{position:absolute;inset:0}
  .cat .ph picture{display:block;width:100%;height:100%}
  .cat .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
  a.cat:hover .ph img{transform:scale(1.04)}
  .ig .ph{position:absolute;inset:0}
  .ig .ph picture{display:block;width:100%;height:100%}
  .ig .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
  .cat .label{
    position:absolute;left:0;right:0;bottom:0;
    padding:16px 18px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
    color:var(--cta-fg);z-index:2;
  }
  .cat .label b{
    font-family:var(--font-display);
    font-size:var(--t-h6);font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.01em);display:block;line-height:1.1;
  }
  .cat .label small{
    font-size:var(--t-nano);opacity:.85;letter-spacing:var(--tracking-mono);display:block;margin-top:3px;
    font-variant-numeric:tabular-nums;
  }
  .cat::after{
    content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s;pointer-events:none;
  }
  .cat:hover::after{background:rgba(0,0,0,.05)}

  /* ============ Zone 5 — Featured Products ============ */
  .carousel{
    display:grid;gap:16px;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 16px*3)/4);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:4px;
  }
  .carousel::-webkit-scrollbar{display:none}
  .carousel.xxl{grid-auto-columns:calc((100% - 16px*2)/3)}
  .carousel.xl{grid-auto-columns:calc((100% - 16px*3)/4)}
  .carousel.l{grid-auto-columns:calc((100% - 16px*4)/5)}

  /* Wave-06b polish: product carousels collapse to 2 cards at --bp-1024 and
     below regardless of density class — tablet/narrow viewports can't fit
     the 3/4/5-up densities comfortably. */
  @media (max-width: 1024px) {
    .carousel,
    .carousel.xxl,
    .carousel.xl,
    .carousel.l{
      grid-auto-columns:calc((100% - 16px) / 2);
    }
  }
  /* .card and data-card variants live in 20-components/product-card.css.
     Catalog adds .card.oos and .card.has-indicators rules in catalog.css. */

  /* ============ Zone 6 — Promo / CTA (editorial split) ============ */
  .promo-split{
    display:grid;grid-template-columns:1.15fr 1fr;gap:0;
    background:var(--paper-2);
  }
  .promo-split .media{aspect-ratio:4/3;position:relative;background:var(--paper-3)}
  .promo-split .media .ph{position:absolute;inset:0}
  .promo-split .copy{padding:clamp(40px, 6vw, 100px);display:flex;flex-direction:column;justify-content:center;gap:22px}
  .promo-split .eyebrow{
    font-size:var(--t-nano);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
    color:var(--accent-ink);
  }
  .promo-split h2{
    font-family:var(--font-display);
    font-size:clamp(40px, 4.5vw, 72px);
    font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.03em);
    margin:0;line-height:.98;
  }
  .promo-split p{color:var(--body);font-size:var(--t-body);line-height:1.55;max-width:42ch;margin:0}
  .promo-split .num{
    font-family:var(--font-display);color:var(--ink);
    font-size:clamp(56px, 7vw, 96px);font-weight:var(--weight-display, 500);
    letter-spacing:-.04em;line-height:.85;margin-bottom:-6px;
  }

  /* ============ Zone 7 — USP ============ */
  .usp{
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .usp .u{
    padding:28px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    border-right:1px solid var(--line);
  }
  .usp .u:last-child{border-right:none}
  .usp .u svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.4}
  .usp .u b{font-size:var(--t-small);font-weight:600;letter-spacing:.01em;line-height:1.2;margin-top:4px}
  .usp .u small{font-size:var(--t-caption);color:var(--body);line-height:1.45}

  /* ============ Zone 8 — Reviews (layout only — marquee variant lives in home.css) ============ */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .review{display:flex;flex-direction:column;gap:14px;padding:0}
  .review .stars{color:var(--pink-ink);font-size:var(--t-caption);letter-spacing:.15em}
  .review p{
    font-family:var(--font-display);font-size:var(--t-h6);line-height:1.4;
    font-weight:400;letter-spacing:var(--tracking-display,-.01em);
    margin:0;color:var(--ink);
  }
  .review .who{display:flex;align-items:center;gap:12px;margin-top:8px}
  .review .av{
    width:36px;height:36px;border-radius:50%;background:var(--paper-3);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:var(--t-small);font-weight:600;
  }
  .review .info{display:flex;flex-direction:column;gap:1px}
  .review .info b{font-size:var(--t-caption);font-weight:600}
  .review .info small{font-size:var(--t-nano);color:var(--muted)}
  .review .gmap{font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-top:auto}
  /* Wave-06b polish: scale review typography on mobile. The desktop --t-h6
     quote stays comfortable in a 3-up grid but is oversized in a single
     column on a phone. */
  @media (max-width: 767px) {
    .review p{ font-size:var(--t-body); line-height:1.45; }
    .review .stars{ font-size:var(--t-nano); }
    .review .av{ width:32px;height:32px; font-size:var(--t-nano); }
    .review .info b{ font-size:var(--t-small); }
  }

  /* ============ Zone 9 — Instagram ============ */
  /* .ig-grid grid columns + .ig aspect-ratio diverge between home (5 cols, 9/16)
     and catalog (6 cols, 1/1) — each page overrides .ig-grid and .ig below. */
  .ig .ph{position:absolute;inset:0}
  .ig .overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;
    background:var(--scrim-overlay);color:var(--cta-fg);opacity:0;transition:opacity .2s;z-index:2;
    font-size:var(--t-micro);letter-spacing:var(--tracking-wide);
  }
  .ig:hover .overlay{opacity:1}
  .ig .overlay svg{width:14px;height:14px;fill:var(--cta-fg)}

  /* ============ Zone 10 — SEO ============ */
  .seo-intro{
    max-width:780px;margin:0 0 40px;color:var(--body);font-size:var(--t-body);line-height:1.65;
  }
  .seo-intro h1, .seo-intro h3{
    font-family:var(--font-display);font-size:var(--t-h4);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.02em);margin:0 0 14px;color:var(--ink);
  }
  .seo-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:32px;
    padding-top:32px;border-top:1px solid var(--line);
  }
  .seo-grid h4{
    font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;
    margin:0 0 14px;color:var(--ink);
  }
  .seo-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
  .seo-grid li a{
    font-size:var(--t-caption);color:var(--body);
    /* tap-target: min 44×44 for mobile seo keyword links */
    display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  }
  .seo-grid li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}


  /* ============ MOBILE FRAME MODE ============ */
  body.mobile-mode{
    background:var(--surface-recede);padding:20px 0;
    --space-section: var(--s-7);
    --space-heading: var(--s-5);
  }
  body.mobile-mode .desktop-only{display:none}
  body.mobile-mode .mobile-only{display:block}
  body.mobile-mode main{
    max-width:390px;margin:0 auto;background:var(--paper);
    box-shadow:var(--shadow-floating);
    overflow:hidden;border-radius:var(--radius-frame);
  }
  body.mobile-mode footer{margin-top:40px;padding:40px 20px 20px}
  body.mobile-mode .shell{padding:0 16px}
  body.mobile-mode .section-head{margin-bottom:var(--s-6)}
  body.mobile-mode .section-head .title{font-size:var(--t-h4)}
  body.mobile-mode .section-head .right{gap:10px}
  body.mobile-mode .arrows button{width:44px;height:44px}
  body.mobile-mode .cat-grid{grid-template-columns:1fr 1fr}
  body.mobile-mode .carousel{grid-auto-columns:calc((100% - 16px)/2)!important}
  body.mobile-mode .hero-grid.n3{grid-template-columns:1fr}
  body.mobile-mode .hero-grid.n2{grid-template-columns:1fr}
  body.mobile-mode .slider{aspect-ratio:4/5}
  body.mobile-mode .slider .stage{grid-template-columns:1fr;grid-template-rows:1fr auto}
  body.mobile-mode .slider .copy{background:var(--surface-translucent);padding:24px;backdrop-filter:blur(4px)}
  body.mobile-mode .slider h1{font-size:var(--t-h2)}
  body.mobile-mode .slider .media{grid-row:1}
  body.mobile-mode .promo-split{grid-template-columns:1fr}
  body.mobile-mode .promo-split .media{aspect-ratio:1/1}
  body.mobile-mode .promo-split .copy{padding:32px 24px}
  body.mobile-mode .promo-split h2{font-size:var(--t-h2)}
  body.mobile-mode .promo-split .num{font-size:64px}
  body.mobile-mode .usp{grid-template-columns:1fr 1fr;border-bottom:none}
  body.mobile-mode .usp .u{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 14px}
  body.mobile-mode .usp .u:nth-child(2n){border-right:none}
  body.mobile-mode .reviews{grid-template-columns:1fr}
  /* body.mobile-mode .reviews-marquee — home.css only (catalog has no marquee) */
  body.mobile-mode .ig-grid{grid-template-columns:1fr 1fr}
  body.mobile-mode .seo-grid{grid-template-columns:1fr 1fr;gap:22px}
  body.mobile-mode .util, body.mobile-mode .nav, body.mobile-mode .header .row1 .tool.phone, body.mobile-mode .header .row1 .tool:not(.mobile-keep){display:none}
  body.mobile-mode .header .row1{grid-template-columns:auto 1fr auto auto;gap:14px}
  body.mobile-mode .search-btn{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center}
  body.mobile-mode .search-btn span, body.mobile-mode .search-btn .kbd{display:none}
  body.mobile-mode .hamburger{display:inline-flex}
  body.mobile-mode .logo{font-size:var(--t-h4)}

  .mobile-only{display:none}
  /* hamburger base: 44×44 tap target (bars are 22px wide centered via gap) */
  .hamburger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;padding:0;cursor:pointer;gap:5px}
  .hamburger span{display:block;height:1.5px;background:var(--ink);width:22px}

  /* ============ ZONE 3.3 — Sticky Header w/ scroll-up reveal (spec-global.md §3.3) ============
     Top Promo Bar + Utility Bar are NOT sticky — they scroll away with the page.
     The main header shell (Row 1 tools + Row 2 mega nav) is full-height-sticky:
     once the user has scrolled past it, scrolling UP slides the header in from
     the top of the viewport; scrolling DOWN slides it back out. From the top
     of the page the floating bar stays hidden until the user scrolls up.

     We don't restructure the header in this state — content stays exactly as
     in the at-rest header (logo, search, worktime, contacts, wishlist, cart;
     mega nav below). The shell merely lifts out of flow into a fixed bar. */
  .shell-header-sentinel{height:1px;margin:0;pointer-events:none}

  /* Floating fixed bar. Full-bleed background + clamped inner padding so the
     content stays aligned with the rest of the 1480-shell grid. */
  .shell--header.is-floating{
    position:fixed;top:0;left:0;right:0;
    width:100vw;max-width:none;
    /* Match the at-rest .shell content edges exactly: the .shell rule
       clamps to --w-shell AND adds --pad of inner padding, so the floating
       bar's inner content must start at ((100vw - shell)/2) + pad to align. */
    padding-left:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
    padding-right:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card-pop);
    z-index:var(--z-overlay);
    transform:translateY(-100%);
    will-change:transform;
  }
  /* `.is-anim` is added one frame after `.is-floating` so the initial
     in-flow → fixed handoff snaps to hidden without a transition flash. */
  .shell--header.is-floating.is-anim{
    transition:transform .28s cubic-bezier(.2,.7,.25,1);
  }
  .shell--header.is-floating.is-revealed{transform:translateY(0)}

  /* Floating bar inherits the at-rest header's exact dimensions so the
     handoff between the two is visually seamless. */

  @media (prefers-reduced-motion: reduce){
    .shell--header.is-floating{transition:none}
  }

  /* ============ Responsive ============ */
  @media (max-width:1100px){
    .cat-grid{grid-template-columns:repeat(4,1fr)}
    .ig-grid{grid-template-columns:repeat(4,1fr)}
    .seo-grid{grid-template-columns:repeat(3,1fr)}
    .usp{grid-template-columns:repeat(3,1fr)}
    .usp .u:nth-child(3){border-right:none}
    .carousel{grid-auto-columns:calc((100% - 16px*2)/3)!important}
    .reviews{grid-template-columns:repeat(2,1fr)}
    .reviews .review:nth-child(3){display:none}
    /* .reviews-marquee responsive overrides live in home.css */
  }
  @media (max-width:768px){
    .cat-grid{grid-template-columns:1fr 1fr}
    .header .row1{grid-template-columns:auto 1fr auto;gap:10px}
    .tool.phone, .tool:nth-of-type(3), .tool:nth-of-type(4){display:none}
    .search-btn{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center}
    .search-btn span, .search-btn .kbd{display:none}
    .nav{overflow-x:auto;justify-content:flex-start;padding:12px 0;gap:20px}
    .util{display:none}
    /* .util a / .lang a / .nav > a min-height:44px — home.css only (not in catalog
       originally; preserving exact behavior — adding to catalog would be a
       cleanup decision, not part of this extraction). */
  }
  /* Wave-06b: hero-grid single-column at ≤600px to prevent tile overflow at 375/430px.
     .n2 and .n3 grids collapse to 1fr — matches body.mobile-mode behavior.
     USP collapses to 2-column grid at ≤600px (5-col / 3-col too wide at 375–430px). */
  @media (max-width:600px){
    .hero-grid.n3, .hero-grid.n2{grid-template-columns:1fr}
    .usp{grid-template-columns:1fr 1fr}
    .usp .u:nth-child(2n){border-right:none}
    .usp .u:nth-child(3){border-right:1px solid var(--line)}
  }
/* ===== 30-pages/account.css ===== */
/* =================================================================
   account.css — layout + components for every /profile/* page.
   All rules scoped to body[data-page^="account"] to avoid name
   collisions with the canonical catalog .card and pdp .btn-* set.
   ================================================================= */

body[data-page^="account"]{
  --sidebar-w: 240px;
  /* Status palette — repurposed from semantic --c-* tokens */
  --status-placed-bg:    var(--c-info-bg);
  --status-placed-fg:    var(--c-info-ink);
  --status-processing-bg: var(--accent-wash);
  --status-processing-fg: var(--accent-ink);
  --status-shipped-bg:   var(--paper);
  --status-shipped-fg:   var(--ink);
  --status-delivered-bg: var(--c-success-bg);
  --status-delivered-fg: var(--c-success-ink);
  --status-cancelled-bg: var(--c-error-bg);
  --status-cancelled-fg: var(--c-error-ink);
  /* Big numeric for stat-card values */
  --t-num: 56px;
}

/* Layout: sidebar 240px + content */
body[data-page^="account"] .tpl-account{
  max-width:var(--w-shell); margin:0 auto;
  padding:var(--s-7) var(--pad) var(--s-8);
  display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  gap:var(--s-8); align-items:start;
}
body[data-page^="account"] .tpl-account__main{ min-width:0; }

/* Wishlist mode: content bleeds right to fit unavailable-favorites carousel */
body[data-page^="account"] .tpl-account--wishlist{
  max-width:none; margin-inline:0;
  padding-inline-start:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
  padding-inline-end:var(--pad);
}

/* Breadcrumb */
body[data-page^="account"] .breadcrumb{
  display:flex; gap:var(--s-2); list-style:none; margin:0 0 var(--s-5); padding:0;
  font-size:12px; color:var(--muted); letter-spacing:.04em;
  overflow-x:auto; white-space:nowrap;
}
body[data-page^="account"] .breadcrumb a{ color:var(--muted); }
body[data-page^="account"] .breadcrumb a:hover{ color:var(--ink); }
body[data-page^="account"] .breadcrumb [aria-current="page"]{ color:var(--ink); }
body[data-page^="account"] .breadcrumb li + li::before{ content:"·"; margin-right:var(--s-2); color:var(--line-2); }

/* Greeting */
body[data-page^="account"] .greeting{
  margin-bottom:var(--s-7);
  display:flex; flex-direction:column; gap:var(--s-3);
}
body[data-page^="account"] .greeting__line{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
body[data-page^="account"] .greeting h1{
  font-size:var(--t-h1); letter-spacing:-0.025em; margin:0;
}
body[data-page^="account"] .greeting h1 .accent{ color:var(--accent); }
body[data-page^="account"] .greeting__sub{
  font-size:15px; color:var(--body); max-width:56ch; margin:0;
}

/* Section head — eyebrow + title row */
body[data-page^="account"] .sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4); margin:var(--s-9) 0 var(--s-5);
  border-bottom:1px solid var(--line); padding-bottom:var(--s-3);
}
body[data-page^="account"] .sec-head h2{
  font-size:var(--t-h4); display:flex; align-items:baseline; gap:var(--s-3); margin:0;
}
body[data-page^="account"] .sec-head .num{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.16em; font-weight:500;
}
body[data-page^="account"] .sec-head__link{
  font-family:var(--font-mono); font-size:11px; color:var(--ink);
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}
body[data-page^="account"] .sec-head__link:hover{ color:var(--accent-ink); border-bottom-color:var(--accent-ink); }
body[data-page^="account"] .sec-head .eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

/* Buttons — account-scoped (mirrors checkout convention).
   Default ghost-style; .btn-primary uses cta tokens; .btn-link is text-w-underline. */
body[data-page^="account"] .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:1px solid var(--ink); background:var(--paper);
  color:var(--ink); font-family:inherit;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
body[data-page^="account"] .btn:hover{ background:var(--ink); color:var(--cta-fg); }
body[data-page^="account"] .btn-primary{
  background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-bg);
  padding:13px 22px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
}
body[data-page^="account"] .btn-primary:hover{ filter:brightness(.92); background:var(--cta-bg); color:var(--cta-fg); }
body[data-page^="account"] .btn-small{ padding:7px 12px; font-size:10.5px; }
body[data-page^="account"] .btn-link{
  border:0; background:transparent; padding:6px 0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--ink); border-radius:0;
  cursor:pointer; color:var(--ink);
}
body[data-page^="account"] .btn-link:hover{ background:transparent; color:var(--accent-ink); border-bottom-color:var(--accent-ink); }
body[data-page^="account"] .btn-danger{
  border-color:var(--ink); color:var(--ink); background:var(--paper);
}
body[data-page^="account"] .btn-danger:hover{ background:var(--cta-bg-hover); color:var(--cta-fg); }

/* Stat cards — overview */
body[data-page^="account"] .stat-row{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(3, 1fr);
  margin:0; padding:0; list-style:none;
}
body[data-page^="account"] .stat-card{
  position:relative;
  border:1px solid var(--line);
  padding:var(--s-5) var(--s-5) var(--s-4);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:var(--s-2);
  min-height:160px;
  transition:border-color .18s, background .18s;
}
body[data-page^="account"] .stat-card:hover{ border-color:var(--ink); background:var(--paper-2); }
body[data-page^="account"] .stat-card .eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
body[data-page^="account"] .stat-card__value{
  font-family:var(--font-display); font-size:var(--t-num); font-weight:500;
  letter-spacing:-0.03em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-top:auto;
}
body[data-page^="account"] .stat-card__label{
  font-size:13.5px; color:var(--body); letter-spacing:.005em;
}
body[data-page^="account"] .stat-card__arr{
  position:absolute; top:var(--s-5); right:var(--s-5);
  font-family:var(--font-mono); font-size:14px; color:var(--muted);
  transition:transform .18s, color .18s;
}
body[data-page^="account"] .stat-card:hover .stat-card__arr{ transform:translate(2px,-2px); color:var(--accent); }
body[data-page^="account"] .stat-card--accent .stat-card__value{ color:var(--accent-ink); }

/* Recent orders — overview mini list.
   Each entry: header row (№/meta/status/total) + products row (mini thumbs). */
body[data-page^="account"] .recent-orders{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
body[data-page^="account"] .recent-orders__entry{
  border-bottom:1px solid var(--line);
  padding:var(--s-4) 0 var(--s-5);
}
body[data-page^="account"] .recent-orders__item{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:var(--s-5);
  align-items:center; padding:0;
  text-decoration:none; color:inherit;
  transition:transform .15s;
}
body[data-page^="account"] .recent-orders__entry:hover .recent-orders__item{ transform:translateX(var(--s-2)); }
body[data-page^="account"] .recent-orders__num{
  font-family:var(--font-display); font-size:var(--t-h5); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  color:var(--ink); line-height:1;
}
body[data-page^="account"] .recent-orders__meta{
  font-size:13px; color:var(--muted); letter-spacing:.01em;
}
body[data-page^="account"] .recent-orders__total{
  font-family:var(--font-display); font-size:var(--t-h6); font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink);
  text-align:right; min-width:90px;
}

/* Products row — mini thumb strip under each order header */
body[data-page^="account"] .recent-orders__products{
  list-style:none; margin:var(--s-4) 0 0; padding:0;
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
body[data-page^="account"] .recent-orders__product{
  display:flex; flex-direction:column; gap:8px;
  min-width:0;
}
body[data-page^="account"] .recent-orders__thumb{
  display:block; aspect-ratio:3/4; background:var(--paper-2);
  position:relative; overflow:hidden;
}
body[data-page^="account"] .recent-orders__thumb::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 70%, var(--paper-3), var(--paper-2));
}
body[data-page^="account"] .recent-orders__product-title{
  font-size:12px; line-height:1.35; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin:0;
}
body[data-page^="account"] .recent-orders__product-title a{ color:inherit; }
body[data-page^="account"] .recent-orders__product-title a:hover{ color:var(--accent-ink); }
body[data-page^="account"] .recent-orders__product-meta{
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

/* Status pill */
body[data-page^="account"] .status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px;
  padding:4px 10px; border-radius:0;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  white-space:nowrap;
}
body[data-page^="account"] .status-pill::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor;
}
body[data-page^="account"] .status-pill--placed{
  background:var(--status-placed-bg); color:var(--status-placed-fg);
  border:1px solid var(--line-2);
}
body[data-page^="account"] .status-pill--processing{
  background:var(--status-processing-bg); color:var(--status-processing-fg);
}
body[data-page^="account"] .status-pill--processing::before{ animation:account-pulse 1.6s ease-in-out infinite; }
@keyframes account-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}
body[data-page^="account"] .status-pill--shipped{
  background:var(--paper); color:var(--ink); border:1px solid var(--ink);
}
body[data-page^="account"] .status-pill--delivered{
  background:var(--status-delivered-bg); color:var(--status-delivered-fg);
}
body[data-page^="account"] .status-pill--cancelled{
  background:var(--status-cancelled-bg); color:var(--status-cancelled-fg);
  font-style:italic; text-transform:uppercase;
}

/* Order detail header + timeline + line items + info blocks */
body[data-page^="account"] .order-detail-header{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-5);
  align-items:start;
  padding-bottom:var(--s-5);
  border-bottom:1px solid var(--ink);
  margin-bottom:var(--s-7);
}
body[data-page^="account"] .order-detail-header__num-block{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
body[data-page^="account"] .order-detail-header__num{
  font-family:var(--font-display); font-size:var(--t-h2); font-weight:500;
  letter-spacing:-0.025em; font-variant-numeric:tabular-nums; line-height:1;
}
body[data-page^="account"] .order-detail-header__date,
body[data-page^="account"] .order-detail-header__total{
  align-self:center;
}
body[data-page^="account"] .sec-head h2 .status-name{
  color:var(--accent-ink);
}
body[data-page^="account"] .order-detail-header__date{
  font-size:13.5px; color:var(--muted); letter-spacing:.02em;
}
body[data-page^="account"] .order-detail-header__total{
  font-family:var(--font-display); font-size:var(--t-h4); font-weight:500;
  font-variant-numeric:tabular-nums; text-align:right;
}

body[data-page^="account"] .timeline{
  list-style:none; margin:0 0 var(--s-7); padding:var(--s-5) 0;
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(4, 1fr);
  position:relative;
}
body[data-page^="account"] .timeline::before{
  content:""; position:absolute;
  left:32px; right:32px; top:calc(var(--s-5) + 17px);
  height:1px; background:var(--line-2);
  z-index:0;
}
body[data-page^="account"] .timeline__step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-2);
  text-align:center;
}
body[data-page^="account"] .timeline__dot{
  inline-size:36px; block-size:36px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  color:var(--muted);
  position:relative; z-index:2;
}
body[data-page^="account"] .timeline__step--done .timeline__dot{
  background:var(--ink); border-color:var(--ink); color:var(--cta-fg);
}
body[data-page^="account"] .timeline__step--current .timeline__dot{
  background:var(--paper); border:2px solid var(--pink);
  color:var(--pink-ink);
  box-shadow:0 0 0 4px var(--pink-soft);
}
body[data-page^="account"] .timeline__step--current::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--pink);
  animation:account-pulse 1.6s ease-in-out infinite;
}
body[data-page^="account"] .timeline__label{
  font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:.01em;
  line-height:1.25; margin-top:4px;
}
body[data-page^="account"] .timeline__step--pending .timeline__label{ color:var(--muted); font-weight:400; }
body[data-page^="account"] .timeline__date{
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

body[data-page^="account"] .line-items{
  list-style:none; margin:0 0 var(--s-5); padding:0;
  border-top:1px solid var(--ink);
}
body[data-page^="account"] .line-items__row{
  display:grid; grid-template-columns:160px 1fr auto; gap:var(--s-5);
  align-items:center; padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);
}
body[data-page^="account"] .line-items__thumb{
  inline-size:160px; aspect-ratio:3/4; background:var(--paper-2);
  position:relative; overflow:hidden;
  display:block;
}
body[data-page^="account"] .line-items__thumb::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, var(--paper-3), var(--paper-2));
}
body[data-page^="account"] .line-items__title{
  font-size:14px; line-height:1.4; color:var(--ink); font-weight:500;
}
body[data-page^="account"] .line-items__meta{
  font-size:11.5px; color:var(--muted); margin-top:4px; letter-spacing:.02em;
}
body[data-page^="account"] .line-items__meta .art{ font-family:var(--font-mono); letter-spacing:.04em; }
body[data-page^="account"] .line-items__price{
  font-family:var(--font-display); font-size:15px; font-weight:500;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
body[data-page^="account"] .line-items__footer{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--s-4) 0;
  border-top:1px solid var(--ink);
}
body[data-page^="account"] .line-items__footer__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
body[data-page^="account"] .line-items__footer__total{
  font-family:var(--font-display); font-size:var(--t-h4); font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink);
}

body[data-page^="account"] .info-blocks{
  display:grid; gap:var(--s-4);
  grid-template-columns:1fr 1fr; margin-bottom:var(--s-7);
}
body[data-page^="account"] .info-block{
  border:1px solid var(--line); padding:var(--s-5);
}
body[data-page^="account"] .info-block h3{
  font-size:var(--t-h6); margin:0 0 var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s-3);
}
body[data-page^="account"] .info-block h3 .icon{
  display:inline-flex; width:18px; height:18px; color:var(--accent);
}
body[data-page^="account"] .info-block dl{
  margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:var(--s-2) var(--s-4); font-size:13px;
}
body[data-page^="account"] .info-block dt{
  color:var(--muted); font-size:11.5px; letter-spacing:.02em;
  padding-top:2px;
}
body[data-page^="account"] .info-block dd{ margin:0; color:var(--ink); }
body[data-page^="account"] .info-block dd a{ color:var(--accent-ink); border-bottom:1px solid var(--accent-wash); }
body[data-page^="account"] .info-block dd a:hover{ border-bottom-color:var(--accent-ink); }
body[data-page^="account"] .info-block .tt{ font-family:var(--font-mono); letter-spacing:.02em; font-variant-numeric:tabular-nums; }

body[data-page^="account"] .detail-cta-row{
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  margin-top:var(--s-5);
}
body[data-page^="account"] .detail-cta-row .btn-link{ margin-left:auto; color:var(--muted); border-bottom-color:transparent; }
body[data-page^="account"] .detail-cta-row .btn-link:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* Wishlist toolbar */
body[data-page^="account"] .wishlist-toolbar{
  display:flex; align-items:center; gap:var(--s-4);
  margin:var(--s-5) 0;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
}
body[data-page^="account"] .wishlist-toolbar label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
body[data-page^="account"] .wishlist-toolbar select{
  font-family:inherit; font-size:13px; color:var(--ink);
  padding:6px 24px 6px 10px; border:1px solid var(--line-2); background:var(--paper);
  cursor:pointer; min-width:0;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;
}
body[data-page^="account"] .wishlist-toolbar__count{
  margin-left:auto;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
body[data-page^="account"] .wishlist-toolbar__count b{ color:var(--ink); font-weight:600; }

/* Wishlist / overview product grid — hosts the canonical .card.has-indicators
   (catalog convention). Card visuals come from 20-components/product-card.css;
   we only own the responsive grid wrapper here. */
body[data-page^="account"] .product-grid{
  display:grid; gap:30px 16px;
  grid-template-columns:repeat(2, 1fr);
  list-style:none; margin:0 0 var(--s-7); padding:0;
}
@media (min-width:600px){ body[data-page^="account"] .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1320px){ body[data-page^="account"] .product-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1700px){ body[data-page^="account"] .product-grid{ grid-template-columns:repeat(5,1fr); } }
body[data-page^="account"] .product-grid > li{ min-width:0; list-style:none; }

/* Wishlist empty state */
body[data-page^="account"] .wishlist-empty{
  border:1px solid var(--line);
  padding:var(--s-9) var(--s-5); text-align:center;
  margin-block:var(--s-5);
  background:var(--paper-2);
}
body[data-page^="account"] .wishlist-empty .heart{
  display:inline-block; font-size:36px; color:var(--accent);
  margin-bottom:var(--s-3);
}
body[data-page^="account"] .wishlist-empty h3{ margin:0 0 var(--s-3); font-size:var(--t-h4); }
body[data-page^="account"] .wishlist-empty p{ font-size:14px; color:var(--body); max-width:48ch; margin:0 auto var(--s-5); }

/* Unavailable favorites — bleed-right carousel */
body[data-page^="account"] .unavailable-favorites{
  margin-top:var(--s-9);
  margin-inline-end:calc(-1 * var(--pad));
  padding-top:var(--s-6); border-top:1px solid var(--line);
}
body[data-page^="account"] .unavailable-favorites__head{
  display:flex; flex-direction:column; gap:var(--s-2);
  margin-bottom:var(--s-5); padding-right:var(--s-5);
  max-width:64ch;
}
body[data-page^="account"] .unavailable-favorites__head h2{ font-size:var(--t-h4); margin:0; }
body[data-page^="account"] .unavailable-favorites__head .eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
body[data-page^="account"] .unavailable-favorites__hint{
  margin:0; font-size:13px; color:var(--body); line-height:1.5;
}
body[data-page^="account"] .unavailable-favorites__track{
  display:flex; gap:var(--s-4);
  overflow-x:auto; scroll-snap-type:x proximity;
  list-style:none; margin:0;
  padding:0 var(--pad) var(--s-3) 0;
  scrollbar-width:thin;
}
body[data-page^="account"] .unavailable-favorites__track > li{ flex:0 0 180px; scroll-snap-align:start; }

body[data-page^="account"] .unavailable-card{
  display:flex; flex-direction:column; gap:6px;
  position:relative; isolation:isolate;
  text-decoration:none; color:inherit;
}
body[data-page^="account"] .unavailable-card__photo-wrap{ position:relative; overflow:hidden; }
body[data-page^="account"] .unavailable-card__photo{
  aspect-ratio:3/4; background:var(--paper-2); position:relative;
  filter:grayscale(.85) opacity(.7);
  transition:filter .18s ease-out;
}
body[data-page^="account"] .unavailable-card__photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 70%, var(--paper-3), var(--paper-2));
}
body[data-page^="account"] .unavailable-card:hover .unavailable-card__photo{ filter:grayscale(.5) opacity(.88); }
body[data-page^="account"] .unavailable-card__badge{
  position:absolute; bottom:8px; left:8px; right:8px;
  padding:5px 8px;
  background:rgba(255,255,255,.94); color:var(--ink);
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  line-height:1; z-index:2;
}
body[data-page^="account"] .unavailable-card__remove{
  position:absolute; top:8px; right:8px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  border:0; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit;
}
body[data-page^="account"] .unavailable-card__remove:hover{ background:var(--ink); color:var(--cta-fg); }
body[data-page^="account"] .unavailable-card__title{
  font-size:12px; line-height:1.35; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin:0; padding-top:4px; font-weight:500;
}
body[data-page^="account"] .unavailable-card__price{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  text-decoration:line-through; font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
body[data-page^="account"] .unavailable-card__similar{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:600;
  border-bottom:1px solid var(--accent-wash); padding-bottom:1px;
  align-self:flex-start; margin-top:2px;
}
body[data-page^="account"] .unavailable-card__similar:hover{ border-bottom-color:var(--accent-ink); }

/* Addresses */
body[data-page^="account"] .addresses-toolbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s-4); margin:var(--s-5) 0;
  padding-bottom:var(--s-4); border-bottom:1px solid var(--ink);
}
body[data-page^="account"] .addresses-toolbar h1{ margin:0; font-size:var(--t-h1); letter-spacing:-0.025em; }
body[data-page^="account"] .addresses-toolbar details > summary{ list-style:none; cursor:pointer; }
body[data-page^="account"] .addresses-toolbar details > summary::-webkit-details-marker{ display:none; }
body[data-page^="account"] .addresses-list{
  display:grid; gap:var(--s-4);
  grid-template-columns:1fr 1fr;
  list-style:none; margin:0; padding:0;
}
body[data-page^="account"] .address-card{
  position:relative;
  border:1px solid var(--line); padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-3);
  transition:border-color .18s;
}
body[data-page^="account"] .address-card:hover{ border-color:var(--ink); }
body[data-page^="account"] .address-card__default{
  position:absolute; top:var(--s-4); right:var(--s-4);
  padding:4px 9px;
  background:var(--ink); color:var(--cta-fg);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; line-height:1;
}
body[data-page^="account"] .address-card__label{
  font-family:var(--font-display); font-size:var(--t-h6); font-weight:500;
  letter-spacing:-0.01em;
}
body[data-page^="account"] .address-card__icon{
  display:inline-block; width:24px; height:24px;
  margin-bottom:6px; color:var(--accent);
}
body[data-page^="account"] .address-card__body{
  font-size:13.5px; color:var(--body); line-height:1.6;
}
body[data-page^="account"] .address-card__body .name{ color:var(--ink); font-weight:500; }
body[data-page^="account"] .address-card__body .phone{ font-family:var(--font-mono); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
body[data-page^="account"] .address-card__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-4);
  margin-top:auto; padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
body[data-page^="account"] .address-card__actions a,
body[data-page^="account"] .address-card__actions button{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  border:0; background:transparent; padding:2px 0;
  border-bottom:1px solid transparent; cursor:pointer; color:var(--ink);
}
body[data-page^="account"] .address-card__actions a:hover,
body[data-page^="account"] .address-card__actions button:hover{ border-bottom-color:var(--ink); color:var(--ink); }
body[data-page^="account"] .address-card__actions .danger{ color:var(--muted); }
body[data-page^="account"] .address-card__actions .danger:hover{ color:var(--ink); border-bottom-color:var(--ink); }

body[data-page^="account"] .add-form-block{
  border:1px solid var(--line); padding:var(--s-6);
  margin-top:var(--s-5); background:var(--paper-2);
}
body[data-page^="account"] .add-form-block h3{
  font-size:var(--t-h6); margin:0 0 var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line);
}

/* Settings */
body[data-page^="account"] .settings-section{
  border:1px solid var(--line); padding:var(--s-6) var(--s-7);
  margin-bottom:var(--s-5);
}
body[data-page^="account"] .settings-section > h2{
  font-size:var(--t-h4); margin:0 0 var(--s-2);
  letter-spacing:-0.02em;
}
body[data-page^="account"] .settings-section__sub{
  font-size:13px; color:var(--muted); margin:0 0 var(--s-5);
  padding-bottom:var(--s-4); border-bottom:1px solid var(--line);
}
body[data-page^="account"] .settings-section > h3{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  margin:var(--s-7) 0 var(--s-3);
}

body[data-page^="account"] .form-grid{
  display:grid; gap:var(--s-5);
  grid-template-columns:1fr 1fr;
}
body[data-page^="account"] .form-grid--single{ grid-template-columns:1fr; }
body[data-page^="account"] .form-grid--single .form-field{ max-width:480px; }
body[data-page^="account"] .form-field{
  display:flex; flex-direction:column; gap:var(--s-2);
}
body[data-page^="account"] .form-field > label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
body[data-page^="account"] .form-field__help{
  font-size:11.5px; color:var(--muted); line-height:1.45;
  margin-top:2px;
}
body[data-page^="account"] .form-field__row{
  display:flex; gap:var(--s-2); align-items:stretch;
}
body[data-page^="account"] .form-field__row > .form-input{ flex:1; }

body[data-page^="account"] .form-input,
body[data-page^="account"] .form-select{
  font:inherit; font-size:13.5px; color:var(--ink);
  padding:10px 14px; border:1px solid var(--line-2); background:var(--paper);
  line-height:1.2;
  transition:border-color .15s, background .15s;
}
body[data-page^="account"] .form-input:hover,
body[data-page^="account"] .form-select:hover{ border-color:var(--ink); }
body[data-page^="account"] .form-input:focus,
body[data-page^="account"] .form-select:focus{
  outline:0; border-color:var(--ink); background:var(--paper);
}

body[data-page^="account"] .verified-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:var(--paper-2); color:var(--ink);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  border:1px solid var(--line-2);
  white-space:nowrap;
}
body[data-page^="account"] .verified-badge svg{ width:11px; height:11px; color:var(--accent); }

body[data-page^="account"] .phone-blocks{
  display:flex; flex-direction:column; gap:var(--s-2);
}
body[data-page^="account"] .phone-block{
  display:flex; gap:var(--s-2);
}
body[data-page^="account"] .phone-block .form-input{
  flex:1; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
body[data-page^="account"] .phone-block__remove{
  width:38px; flex-shrink:0;
  border:1px solid var(--line-2); background:var(--paper);
  cursor:pointer; font-size:14px; color:var(--muted);
}
body[data-page^="account"] .phone-block__remove:hover{ background:var(--ink); color:var(--cta-fg); border-color:var(--ink); }
body[data-page^="account"] .phone-add{
  align-self:flex-start; margin-top:var(--s-2);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); font-weight:600;
  border:0; background:transparent; padding:0;
  border-bottom:1px solid var(--ink); padding-bottom:2px; cursor:pointer;
}
body[data-page^="account"] .phone-add:hover{ color:var(--accent-ink); border-bottom-color:var(--accent-ink); }

body[data-page^="account"] .notifications-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--paper-2);
}
body[data-page^="account"] .notifications-list li{ border-bottom:1px solid var(--line); }
body[data-page^="account"] .notifications-list li:last-child{ border-bottom:0; }
body[data-page^="account"] .notifications-list label{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-4);
  font-size:13.5px; cursor:pointer; line-height:1.4;
}
body[data-page^="account"] .notifications-list label:hover{ background:var(--paper); }
body[data-page^="account"] .notifications-list small{
  display:block; font-size:11.5px; color:var(--muted); margin-top:2px;
}
body[data-page^="account"] .notifications-list input[type="checkbox"]{
  accent-color:var(--pink); width:16px; height:16px; flex-shrink:0; margin-top:1px;
  cursor:pointer;
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */

/* Breadcrumb links */
body[data-page^="account"] .breadcrumb a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Sec-head "See all" link */
body[data-page^="account"] .sec-head__link{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Recent orders — product title links */
body[data-page^="account"] .recent-orders__product-title a{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Order detail — tracking / PDF links */
body[data-page^="account"] .info-block dd a{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Buttons — ensure minimum tap height */
body[data-page^="account"] .btn{
  min-height: 44px;
}
body[data-page^="account"] .btn-primary{
  min-height: 44px;
}
body[data-page^="account"] .btn-link{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Card-links in account product grids */
body[data-page^="account"] .card-link{
  min-height: 44px; min-width: 44px;
}

/* Product title links inside cards (2-line titles at 43.5px need nudge) */
body[data-page^="account"] .card .meta a{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Wishlist toolbar (form with data-behavior="wishlist-sort") */
body[data-page^="account"] .wishlist-toolbar{
  min-height: 44px;
}

/* Unavailable favorites — remove button and similar link */
body[data-page^="account"] .unavailable-card__remove{
  min-width: 44px; min-height: 44px;
}
body[data-page^="account"] .unavailable-card__similar{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Address card actions */
body[data-page^="account"] .address-card__actions a,
body[data-page^="account"] .address-card__actions button{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Settings — phone controls */
body[data-page^="account"] .phone-block__remove{
  min-width: 44px; min-height: 44px;
}
body[data-page^="account"] .phone-add{
  min-height: 44px; display: inline-flex; align-items: center;
}
/* ===== 30-pages/account.mobile.css ===== */
/* ===== 30-pages/account.mobile.css — responsive/mobile overrides for account pages =====
   Extracted from account.css (Phase 8.2 cleanup). Loaded after account.css alphanumerically. */

/* Wave-06b: form grid collapses at ≤900px — the 2-col form + verified-badge
   overflow at 768px and 900px viewports in the 240px sidebar + content layout.
   Responsive guard moved from 767 to 900 for form-grid specifically. */
@media (max-width:900px){
  body[data-page^="account"] .form-grid{ grid-template-columns:1fr; }
  /* verified-badge inline next to email input — allow it to stack at narrow widths */
  body[data-page^="account"] .form-field__row{ flex-wrap:wrap; }
  /* eyebrow and large headings may overflow at 768–900px in constrained sidebar layout */
  body[data-page^="account"] .order-detail-header{ grid-template-columns:1fr; }
  body[data-page^="account"] .order-detail-header__total{ text-align:left; }
  /* sec-head: allow eyebrow to wrap below heading at narrow content widths (768–900px) */
  body[data-page^="account"] .sec-head{ flex-wrap:wrap; }
}

/* Responsive — mirror v0.2 < 768px break */
@media (max-width:767px){
  body[data-page^="account"] .tpl-account{
    grid-template-columns:1fr; gap:var(--s-5);
    padding:var(--s-5) var(--s-4);
  }
  body[data-page^="account"] .tpl-account--wishlist{
    padding-inline:var(--s-4);
  }
  body[data-page^="account"] .unavailable-favorites{ margin-inline-end:calc(-1 * var(--s-4)); }
  body[data-page^="account"] .stat-row{ grid-template-columns:1fr; }
  body[data-page^="account"] .timeline{ grid-template-columns:1fr; }
  body[data-page^="account"] .timeline::before{ display:none; }
  body[data-page^="account"] .timeline__step{ flex-direction:row; align-items:center; text-align:left; gap:var(--s-3); }
  body[data-page^="account"] .order-detail-header{ grid-template-columns:1fr; }
  body[data-page^="account"] .order-detail-header__total{ text-align:left; }
  body[data-page^="account"] .info-blocks{ grid-template-columns:1fr; }
  body[data-page^="account"] .addresses-list{ grid-template-columns:1fr; }
  body[data-page^="account"] .form-grid{ grid-template-columns:1fr; }
  body[data-page^="account"] .line-items__row{ grid-template-columns:120px 1fr; }
  body[data-page^="account"] .line-items__price{ grid-column:2; padding-left:0; }
  /* Wave-06b: sec-head h2 may overflow narrow mobile if status text is long */
  body[data-page^="account"] .sec-head h2{
    font-size:var(--t-h5); overflow-wrap:break-word; min-width:0; max-width:100%;
  }
  /* Wave-06b: recent orders grid collapses at ≤767px — 4-col (auto 1fr auto auto)
     is too wide at 375px. Reduce to 2-col + move total under status. */
  body[data-page^="account"] .recent-orders__item{
    grid-template-columns:auto 1fr; gap:var(--s-3);
    flex-wrap:wrap;
  }
  body[data-page^="account"] .recent-orders__total{
    grid-column:2; text-align:left; min-width:0;
  }
  body[data-page^="account"] .recent-orders__status{
    grid-column:2;
  }
}
/* ===== 30-pages/article-base.css ===== */
/*
 * 30-pages/article-base.css
 * Page-specific styles for the long-form article page (blog / guide / editorial).
 *
 * Merges:
 *   - Layout from _docs/design/pages/article-base.html (5-tier width system,
 *     left-rail sticky TOC, central column with prose-clamped default).
 *   - Styling from _docs/design/v0.2/Onlady Article Page.html (pink accents,
 *     mono kickers, polished blocks).
 *
 * Deviations from v0.2 template (per design brief):
 *   - HERO uses 4:3 image aspect ratio (NOT 5:6 — that broke the header).
 *   - NO right rail (deleted from the layout; central column ends at the
 *     gap that the right rail would have occupied).
 *   - Expert Advice sized via mockup geometry, anchored at prose-left.
 *   - Body text clamped to --w-prose (684px) centered in central column.
 */

/* ============================================================
   Article-page-scoped tokens
   ============================================================ */
:root{
  /* Layout — 3-col article (left rail + central column + empty right rail).
     The right rail is empty by design: wide blocks (.col-wide expert-advice,
     .sidenote-margin) bleed into its area. */
  --rail-left-w: 240px;
  --rail-right-w: 300px;
  --rail-gap: var(--s-7);

  /* Derived: central-column width at full-shell viewport, and the horizontal
     offset that prose-default content occupies inside the .col-wide area.
     Mockup geometry (article-shared.css): inner padding uses --s-5 (24px),
     not --pad (32px). */
  --w-central-col: calc(var(--w-shell) - var(--rail-left-w) - var(--rail-right-w) - 2 * var(--rail-gap) - 2 * var(--s-5));
  --prose-offset-x: calc((var(--w-central-col) - var(--w-prose)) / 2);

  /* --col-stage-offset: distance from container-left to .article-main left.
       single-col stack:  page padding only             = var(--s-5)
       3-col grid (≥1024): page padding + left rail + gap = s-5 + rail + gap
     Used by .col-edge / .col-full to compute viewport-relative bleed. */
  --col-stage-offset: var(--s-5);

  /* Article-only type sizes (clamps for fluid scaling) */
  --t-intro: clamp(18px, 1.6vw, 22px);
  --t-pullquote: clamp(22px, 2.6vw, 32px);
}

@media (min-width: 1024px){
  :root{
    --col-stage-offset: calc(var(--s-5) + var(--rail-left-w) + var(--rail-gap));
  }
}

/* ============================================================
   Page-scoped resets — only apply on this page (data-page="article-base")
   ============================================================ */
html:has(body[data-page="article-base"]){
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--s-6);
}
body[data-page="article-base"]{
  /* Content width — page-scoped (formerly in :root, leaked globally) */
  --w-prose: 684px;
  overflow-x: hidden;  /* col-full bleed safety */
}
body[data-page="article-base"] *,
body[data-page="article-base"] *::before,
body[data-page="article-base"] *::after{ box-sizing: border-box; }
body[data-page="article-base"] figure{ margin: 0; }

/* ============================================================
   Scroll progress bar (top of page)
   ============================================================ */
body[data-page="article-base"] .scroll-progress{
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; background: transparent; z-index: var(--z-progress);
  pointer-events: none;
}
body[data-page="article-base"] .scroll-progress::before{
  content: ''; display: block; block-size: 100%; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  animation: progress-grow linear; animation-timeline: scroll(root);
}
@keyframes progress-grow{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }

/* ============================================================
   HERO — Split. Full-bleed accent bg, inner content clamped to shell.
   Adapted from mockup; uses 4:3 image (NOT 5:6 from v0.2 template).
   ============================================================ */
.hero-split-wrap{
  background: var(--paper-2);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
}
.hero-split{
  max-inline-size: var(--w-shell);
  margin-inline: auto;
  padding: var(--s-7) var(--pad) var(--s-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 768px){
  .hero-split{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-8);
    padding-block: var(--s-8);
  }
}
@media (min-width: 1024px){
  .hero-split{ gap: var(--s-9); }
}

.hero-split__text{
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.hero-split__text .breadcrumb{
  display: flex; gap: var(--s-2); list-style: none;
  margin: 0 0 var(--s-4); padding: 0;
  font-size: var(--t-caption); color: var(--muted); letter-spacing: .01em;
  flex-wrap: wrap;
}
.hero-split__text .breadcrumb a{ color: var(--muted); transition: color .15s; cursor: pointer; }
.hero-split__text .breadcrumb a:hover{ color: var(--ink); }
.hero-split__text .breadcrumb li + li::before{ content: "/"; margin-inline-end: var(--s-2); opacity: .55; }

.hero-split__category{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-caption);
  color: var(--accent-ink);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 600;
  margin-block-end: var(--s-5);
}
.hero-split__category::before{
  content: ""; width: 24px; height: 1px; background: var(--accent);
}

.hero-split__text h1{
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.03em);
  color: var(--ink);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.hero-split__text h1 em{
  font-style: italic; color: var(--accent-ink); font-weight: inherit;
}

.article-subtitle{
  font-size: var(--t-subtitle);
  line-height: 1.45; color: var(--body);
  margin: 0 0 var(--s-6); max-inline-size: 46ch;
}

.article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-size: var(--t-caption); color: var(--muted); letter-spacing: .02em;
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-4);
}
.article-meta > *{ padding: 0 var(--s-4); border-inline-end: 1px solid var(--line); }
.article-meta > *:first-child{ padding-inline-start: 0; }
.article-meta > *:last-child{ border-inline-end: 0; }
.article-meta__item{ display: inline-flex; align-items: center; gap: 8px; }
.article-meta .author-link{ color: var(--ink-2); }
.article-meta .author-link a{ color: var(--ink); text-decoration: none; }
.article-meta__avatar{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-3); border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 50% 35%, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
}
.article-meta time{ font-variant-numeric: tabular-nums; }
.article-meta b{ color: var(--ink); font-weight: 600; }

.hero-split__image{
  position: relative;
  aspect-ratio: 4 / 3;                /* override of v0.2's broken 5:6 */
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 100%),
    radial-gradient(ellipse at 55% 35%, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 60%);
  order: -1;
}
@media (min-width: 768px){ .hero-split__image{ order: 0; } }

.hero-split__tag{
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 600;
  padding: 5px 10px; background: var(--paper); color: var(--ink);
}
.hero-split__tag::before{
  content: "●"; color: var(--accent); font-size: 8px;
}

/* ============================================================
   ARTICLE LAYOUT — 3 columns (left rail + central column + empty right rail)
   Padding-inline is --s-5 (24px) to match mockup; horizontal --pad (32) is
   reserved for the chrome shell. The right rail is structural — it holds
   no content, just a sticky empty placeholder so wide blocks have room to
   bleed into.
   ============================================================ */
.article-layout-3col{
  max-inline-size: var(--w-shell);
  margin-inline: auto;
  padding: var(--s-7) var(--s-5) var(--s-9);
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;       /* mobile: single column */
}
.article-rail-left { order: 2; min-inline-size: 0; }
.article-main     { order: 1; min-inline-size: 0; }
.article-rail-right{ order: 3; min-inline-size: 0; }

@media (min-width: 1024px){
  .article-layout-3col{
    grid-template-columns: var(--rail-left-w) minmax(0, 1fr) var(--rail-right-w);
    gap: var(--rail-gap);
    padding-block: var(--s-8) var(--s-9);
  }
  .article-rail-left { order: 0; }
  .article-main     { order: 0; }
  .article-rail-right{ order: 0; }

  .article-rail-left,
  .article-rail-right{
    position: sticky;
    inset-block-start: var(--s-6);
    align-self: start;
    max-block-size: calc(100vh - var(--s-6) * 2);
    overflow-y: auto;
    z-index: var(--z-sticky);
    scrollbar-width: thin;
  }
}
@media (max-width: 1023px){
  .article-rail-right{ display: none; }
}

/* ============================================================
   CENTRAL COLUMN — 5-TIER WIDTH SYSTEM
   Default = clamped to --w-prose, centered in column.
   Tiers 2–5 are opt-in via .col-* classes.
   ============================================================ */
.article-main > *{
  max-inline-size: var(--w-prose);
  margin-inline: auto;
}
.article-main > .col-wide,
.article-main > .col-rail,
.article-main > .col-edge,
.article-main > .col-full{
  max-inline-size: none;
  margin-inline: 0;
}
.article-main > .col-wide,
.article-main > .col-rail,
.article-main > .col-edge{ inline-size: 100%; }

@media (min-width: 1024px){
  /* Tier 3 — .col-rail: extends from col-left through the right rail's
     right edge. Only kicks in at ≥1024px (when the right rail exists). */
  .article-main > .col-rail{
    inline-size: calc(100% + var(--rail-gap) + var(--rail-right-w));
  }
  /* Tier 4 — .col-edge: anchored at col-left, bleeds right to viewport edge. */
  .article-main > .col-edge{
    inline-size: calc(100vw - max(0px, (100vw - var(--w-shell)) / 2) - var(--col-stage-offset));
  }
}

/* Tier 5 — .col-full: 100vw at all viewport sizes. */
.article-main > .col-full{
  inline-size: 100vw;
  margin-inline-start: calc(-1 * (max(0px, (100vw - var(--w-shell)) / 2) + var(--col-stage-offset)));
  margin-inline-end: 0;
}

/* ============================================================
   ARTICLE TYPOGRAPHY
   ============================================================ */
.article-main{ font-size: var(--t-body); line-height: 1.7; color: var(--ink-2); }
/* Only touch margin-block here — never margin-inline — so the
   `.article-main > * { margin-inline: auto }` centering survives.
   Using `margin: 0 0 N` would set margin-inline to 0 and pin
   children at column-left instead of prose-centered. */
.article-main p{ margin-block: 0 var(--s-5); }
.article-main a{
  color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.article-main a:hover{ color: var(--ink); text-decoration-color: var(--ink); }
.article-main strong{ color: var(--ink); font-weight: 600; }
.article-main ul,
.article-main ol{ margin-block: 0 var(--s-5); padding-inline-start: var(--s-5); }
.article-main li{ margin-block-end: 6px; }

.article-main h2{
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  color: var(--ink);
  margin: var(--s-9) auto var(--s-5);
  scroll-margin-block-start: var(--s-7);
}
.article-main h2::before{
  content: ""; display: block;
  width: 48px; height: 1px; background: var(--ink);
  margin-block-end: var(--s-4);
}
.article-main h2 .num{
  display: inline-block;
  font-size: var(--t-small);
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  margin-inline-end: 14px;
  vertical-align: middle; font-weight: 500;
}
.article-main h3{
  font-family: var(--font-display);
  font-size: var(--t-h4); font-weight: 600; color: var(--ink);
  margin: var(--s-7) auto var(--s-3);
  line-height: var(--lh-snug);
}

/* ============================================================
   LEFT RAIL — sticky TOC + progress + meta
   ============================================================ */
.rail-card{
  padding: var(--s-4) 0;
  margin-block-end: var(--s-5);
  font-size: var(--t-caption);
}
.rail-card + .rail-card{ border-block-start: 1px solid var(--line); }
.rail-card__label{
  font-size: var(--t-caption);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); color: var(--muted);
  margin: 0 0 var(--s-3); font-weight: 600;
}
.rail-toc ol{ list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.rail-toc li{
  counter-increment: toc;
  position: relative;
  padding: 8px 0 8px 24px;
  line-height: var(--lh-snug); font-size: var(--t-caption);
  border-inline-start: 1px solid transparent;
}
.rail-toc li::before{
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 9px;
  font-size: var(--t-super-nano);
  font-variant-numeric: tabular-nums;
  color: var(--muted); letter-spacing: var(--tracking-wide);
}
.rail-toc a{ color: var(--ink-2); transition: color .15s; text-decoration: none; }
.rail-toc a:hover{ color: var(--ink); }
.rail-toc li.active{ border-inline-start-color: var(--accent); padding-inline-start: 23px; }
.rail-toc li.active a{ color: var(--ink); font-weight: 600; }
.rail-toc li.active::before{ color: var(--accent-ink); }

.rail-progress{
  font-size: var(--t-caption); color: var(--muted);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 600;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-block-end: 8px;
}
.rail-progress b{
  font-size: var(--t-caption); color: var(--ink); font-weight: 600;
  font-variant-caps: normal; font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.rail-bar{
  height: 2px; background: var(--line);
  position: relative; overflow: hidden;
}
.rail-bar::before{
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  animation: progress-grow linear; animation-timeline: scroll(root);
}

.rail-meta{ font-size: var(--t-caption); color: var(--muted); line-height: 1.7; margin: 0; }
.rail-meta dt{
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); color: var(--muted);
  font-weight: 600; margin-block-start: 8px;
}
.rail-meta dt:first-of-type{ margin-block-start: 0; }
.rail-meta dd{ color: var(--ink-2); margin: 2px 0 0; font-size: var(--t-caption); }

@media (max-width: 1023px){ .article-rail-left{ display: none; } }

/* ============================================================
   MOBILE-ONLY TOC (collapsed)
   ============================================================ */
.toc-mobile{
  margin: var(--s-5) auto;
  border: 1px solid var(--line);
}
.toc-mobile summary{
  cursor: pointer; padding: 14px 16px; list-style: none;
  font-size: var(--t-caption);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--ink); font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.toc-mobile summary::after{
  content: "+";
  font-variant-caps: normal;
  font-size: var(--t-h6); color: var(--muted); font-weight: 400;
  letter-spacing: 0;
}
.toc-mobile[open] summary::after{ content: "−"; }
.toc-mobile summary::-webkit-details-marker{ display: none; }
.toc-mobile ol{
  list-style: none; margin: 0; padding: 0 16px 12px;
  font-size: var(--t-caption);
}
.toc-mobile li{ padding: 6px 0; border-block-start: 1px solid var(--line); margin: 0; }
.toc-mobile li:first-child{ border-block-start: 0; }
.toc-mobile a{ color: var(--ink-2); text-decoration: none; }
@media (min-width: 1024px){ .toc-mobile{ display: none; } }

/* ============================================================
   ARTICLE BLOCKS
   ============================================================ */

/* Takeaways — prose width, pink accent border */
.takeaways{
  background: var(--paper-2);
  border-top: 3px solid var(--ink);
  padding: var(--s-5) var(--s-6);
  margin-block: var(--s-7);
}
.takeaways h2{
  font-size: var(--t-caption) !important;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--ink) !important; font-weight: 600 !important;
  margin: 0 0 var(--s-3) !important;
}
.takeaways h2::before{ display: none !important; }
.takeaways ul{ margin: 0; padding-inline-start: 0; list-style: none; }
.takeaways li{
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: var(--t-body); color: var(--ink-2);
  line-height: 1.55;
  border-block-start: 1px solid var(--line);
}
.takeaways li:first-child{ border-block-start: 0; padding-block-start: 6px; }
.takeaways li::before{
  content: ""; position: absolute; left: 0; top: 18px;
  width: 14px; height: 1px; background: var(--ink);
}

/* Intro big — prose width, pink left border. Use margin-block only;
   margin-inline: auto from `.article-main > *` handles horizontal centering. */
.intro-big{
  font-family: var(--font-display);
  font-size: var(--t-intro); line-height: 1.55;
  color: var(--ink);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.015em);
  margin-block: var(--s-6) var(--s-7);
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
}
.intro-big em{ font-style: italic; color: var(--ink); }

/* Photo figure (.col-wide) */
.photo-figure{ margin-block: var(--s-7); }
.photo-figure__img{
  position: relative;
  display: block; inline-size: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 60%);
  overflow: hidden;
}
.photo-figure__img .crop{
  position: absolute; bottom: 14px; left: 18px; right: 18px;
  font-size: var(--t-super-nano); color: rgba(0,0,0,.4);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 500;
  display: flex; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.photo-figure figcaption{
  margin-block-start: var(--s-3);
  font-size: var(--t-caption); color: var(--muted);
  letter-spacing: var(--tracking-wide);
  display: flex; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.photo-figure figcaption b{ color: var(--ink-2); font-weight: 600; }

/* Image pair (.col-wide) */
.img-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-block: var(--s-7);
}
.img-pair__box{
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at var(--ph-x, 50%) var(--ph-y, 40%), rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 60%);
}
.img-pair__box .crop{
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-size: var(--t-nano); color: rgba(0,0,0,.4);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 500;
  display: flex; justify-content: space-between;
}
@media (max-width: 599px){ .img-pair{ grid-template-columns: 1fr; } }

/* Pull quote — prose width default + .col-wide bleed variant */
.pull-quote{
  font-family: var(--font-display);
  font-size: var(--t-pullquote); line-height: 1.25;
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.025em);
  color: var(--ink);
  text-align: left; font-style: normal;
  margin: var(--s-8) auto;
  padding: var(--s-5) 0 0;
  border: 0;
  position: relative;
}
.pull-quote::before{
  content: "";
  display: block;
  width: 48px; height: 2px; background: var(--accent);
  position: absolute; top: 0; left: 0;
}
.pull-quote em{ font-style: italic; }
.pull-quote cite{
  display: block; margin-block-start: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--t-caption); font-weight: 500; font-style: normal;
  color: var(--muted); letter-spacing: .02em;
}
.pull-quote cite b{ color: var(--ink); font-weight: 600; }

.article-main > .pull-quote.col-wide{
  background: var(--accent-wash);
  padding: var(--s-7);
  text-align: center;
  margin-block: var(--s-8);
}
.article-main > .pull-quote.col-wide::before{
  left: 50%; transform: translateX(-50%);
}

/* Callouts — prose width */
.callout{
  background: var(--paper-2);
  border-top: 3px solid var(--line-2);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-6);
}
.callout__label{
  display: block;
  font-size: var(--t-caption); font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--ink);
  margin-block-end: 6px;
}
.callout p{ margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.callout p + p{ margin-block-start: 8px; }
.callout--tip{
  background: var(--accent-wash);
}
.callout--tip .callout__label{ color: var(--accent-ink); }
.callout--insight{
  background: var(--paper-2);
}
.callout--warning{
  background: var(--c-warn-bg);
}
.callout--warning .callout__label{ color: var(--c-warn-ink); }

/* Marginal sidenote (.col-wide container, prose-clamped text + side card) */
.with-sidenote{ position: relative; margin-block: var(--s-7); }
.with-sidenote > p{
  max-inline-size: var(--w-prose);
  margin: 0 auto var(--s-4);
}
.sidenote-margin{
  border-top: 2px solid var(--ink);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-2);
  margin-block-start: var(--s-4);
}
.sidenote-margin__label{
  font-size: var(--t-nano); font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--accent-ink);
  margin-block-end: 8px;
}
.sidenote-margin__link{
  display: block;
  font-size: var(--t-small); font-weight: 600;
  color: var(--ink); line-height: 1.4;
  text-decoration: none !important;
}
.sidenote-margin__link:hover{ color: var(--accent-ink); }
.sidenote-margin__link::after{ content: " →"; color: var(--accent-ink); }
.sidenote-margin__text{
  font-size: var(--t-caption); color: var(--muted);
  line-height: 1.55; margin: 6px 0 0;
}
@media (min-width: 1024px){
  /* Sidenote bleeds into the (empty) right rail area: positioned absolutely
     so its left edge sits exactly at the central column's right edge. */
  .sidenote-margin{
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 100%;
    margin: 0 0 0 var(--s-5);
    inline-size: 280px;
  }
}

/* Expert Advice (.col-wide). At ≥1024px, anchored at prose-left so the
   accent border aligns with the regular prose left edge; text-col is
   ~prose-width minus the block's left border + left padding; expert col
   240px. The block's right edge bleeds past the central column's right
   into the right rail area. Geometry at shell width (mockup-exact):
     margin-inline-start = prose-offset-x = 56px (block-left = prose-left)
     padding-inline      = s-7 / s-7 (= 48 / 48)
     text-col width      = w-prose − 4 − s-7  (= 632)
     expert col          = 240
     gap                 = s-7 (= 48) */
.expert-advice{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  background: var(--paper-2);
  border-top: 3px solid var(--accent);
  padding: var(--s-6);
  margin-block: var(--s-8);
}
.expert-advice__label{
  display: block;
  font-size: var(--t-caption);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--accent-ink); font-weight: 600;
  margin-block-end: var(--s-3);
}
.expert-advice__quote p{
  margin: 0 0 12px;
  font-size: var(--t-body); line-height: 1.65;
  color: var(--ink-2);
}
.expert-advice__quote p:last-child{ margin-block-end: 0; }
.expert-advice__quote p strong{ color: var(--ink); }
.expert-advice__expert{
  display: flex; gap: 14px;
  align-items: flex-start;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
}
.expert-advice__avatar{
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--paper-3); border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 65%);
}
.expert-advice__name{
  font-weight: 600; font-size: var(--t-small);
  color: var(--ink); line-height: 1.2;
}
.expert-advice__tagline{
  font-size: var(--t-micro); color: var(--muted);
  margin-block-start: 3px; letter-spacing: .02em;
}
.expert-advice__creds{
  font-size: var(--t-nano); color: var(--muted);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 500;
  margin-block-start: 6px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.expert-advice__creds span{
  padding: 2px 6px; background: var(--paper); border: 1px solid var(--line);
}
@media (min-width: 768px){
  .expert-advice{
    grid-template-columns: 1fr 220px;
    gap: var(--s-7);
    align-items: start;
  }
  .expert-advice__expert{
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-block-start: 0;
    border-inline-start: 1px solid var(--line);
    padding-block-start: 0;
    padding-inline-start: var(--s-6);
  }
  .expert-advice__creds{ justify-content: center; }
}
@media (min-width: 1480px){
  /* max-content sizes the block to its natural intrinsic width at full shell.
     Only apply at ≥1480px (shell saturation) — below that the central column
     is narrower than --w-prose, making max-content overflow the viewport.
     Wave-06b: changed guard from 1024px to 1480px to fix h-scroll at bp-1024..1320. */
  .article-main > .expert-advice.col-wide{
    inline-size: max-content;
    max-inline-size: none;
    margin-inline: var(--prose-offset-x) 0;
    grid-template-columns: calc(var(--w-prose) - 4px - var(--s-7)) 240px;
    gap: var(--s-5) var(--s-7);
    padding-inline: var(--s-7);
  }
}
@media (min-width: 1024px) and (max-width: 1479px){
  /* Intermediate desktop: expert-advice stays contained to the central column.
     Two-column layout (quote text + expert card) with fluid proportions. */
  .article-main > .expert-advice.col-wide{
    inline-size: 100%;
    grid-template-columns: 1fr 200px;
    gap: var(--s-5) var(--s-6);
    padding-inline: var(--s-6);
  }
}

/* CTA block (.col-wide) */
.cta-block{
  background: var(--ink); color: var(--cta-fg);
  padding: var(--s-8) var(--s-7);
  margin-block: var(--s-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
}
.cta-block__kicker{
  font-size: var(--t-caption); color: var(--pink-ink);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 600;
  margin-block-end: 8px;
}
.cta-block h2{
  font-family: var(--font-display) !important;
  color: var(--cta-fg) !important;
  font-size: var(--t-h3) !important;
  line-height: 1.15;
  margin: 0 0 8px !important;
  font-weight: var(--weight-display, 500) !important;
  letter-spacing: var(--tracking-display, -.02em);
}
.cta-block h2::before{ display: none !important; }
.cta-block p{
  color: var(--on-ink-body);
  font-size: var(--t-small); margin: 0;
  max-inline-size: 50ch;
}
.cta-button{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: var(--cta-bg); color: var(--cta-fg);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--cta-bg);
  white-space: nowrap;
  transition: filter .15s;
  text-decoration: none !important;
}
.cta-block .cta-button{
  /* Readable on the dark CTA-block background regardless of accent palette. */
  background: var(--paper); color: var(--ink); border-color: var(--cta-fg);
}
.cta-button:hover{ filter: brightness(.92); }
.cta-button .arrow{ font-weight: 400; }
@media (max-width: 767px){
  .cta-block{ grid-template-columns: 1fr; }
}

/* Author bio — prose width */
.author-bio{
  display: flex; gap: var(--s-5);
  padding: var(--s-6);
  border-block-start: 2px solid var(--ink);
  border-block-end: 1px solid var(--line);
  margin: var(--s-8) auto var(--s-6);
  align-items: flex-start;
  max-inline-size: var(--w-prose);
}
.author-bio__avatar{
  width: 88px; height: 88px; border-radius: 50%; flex: none;
  background: var(--paper-3); border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 50% 38%, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 65%);
}
.author-bio__kicker{
  font-size: var(--t-caption);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); color: var(--muted);
  font-weight: 600;
  margin-block-end: 6px;
}
.author-bio h2{
  font-size: var(--t-h4) !important;
  margin: 0 0 4px !important;
  font-weight: 600 !important;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display, -.01em);
}
.author-bio h2::before{ display: none !important; }
.author-bio__role{
  font-size: var(--t-caption); color: var(--muted);
  margin-block-end: var(--s-3); letter-spacing: .02em;
}
.author-bio p{
  font-size: var(--t-small); color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 var(--s-3);
  max-inline-size: 50ch;
}
.author-bio__links{
  display: flex; gap: var(--s-5);
  font-size: var(--t-caption); font-weight: 500; flex-wrap: wrap;
}
.author-bio__links a{
  color: var(--ink);
  border-block-end: 1px solid var(--ink);
  padding-block-end: 1px;
  text-decoration: none !important;
}
.author-bio__links a:hover{
  color: var(--accent-ink); border-block-end-color: var(--accent);
}
@media (max-width: 599px){ .author-bio{ flex-direction: column; } }

/* Changelog — prose width */
.changelog{
  font-size: var(--t-micro); color: var(--muted);
  border: 1px dashed var(--line);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
  letter-spacing: var(--tracking-wide);
}
.changelog__label{
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--ink);
  margin: 0 0 10px; font-weight: 600;
}
.changelog ul{ list-style: none; margin: 0; padding: 0; }
.changelog li{ padding: 3px 0; line-height: 1.55; margin: 0; }
.changelog time{ color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Related articles (.col-wide).
   Named .article-related (not .related) to avoid colliding with the
   different .related block defined in 30-pages/static.css. */
.article-related{
  margin-block: var(--s-8) 0;
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
}
.article-related__head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-block-end: var(--s-5);
}
.article-related__head h2{
  font-family: var(--font-display) !important;
  font-size: var(--t-h4) !important;
  margin: 0 !important;
  font-weight: var(--weight-display, 500) !important;
  letter-spacing: var(--tracking-display, -.02em);
  color: var(--ink);
}
.article-related__head h2::before{ display: none !important; }
.article-related__head .all{
  font-size: var(--t-micro); color: var(--muted);
  border-block-end: 1px solid var(--line);
  padding-block-end: 2px; letter-spacing: var(--tracking-wide);
  text-decoration: none !important;
}
.article-related__head .all:hover{ color: var(--ink); border-block-end-color: var(--ink); }
.article-related__grid{
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(3, 1fr);
  list-style: none; padding: 0; margin: 0;
}
.article-related .related-card{
  display: flex; flex-direction: column; gap: 10px;
  min-inline-size: 0;
  text-decoration: none !important;
  color: inherit;
}
.article-related .related-card__image{
  position: relative; display: block;
  aspect-ratio: 5 / 4;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
  background-image: radial-gradient(ellipse at var(--ph-x, 55%) var(--ph-y, 40%), rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 60%);
}
.article-related .related-card__cat{
  position: absolute; top: 12px; left: 12px;
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider); font-weight: 600;
  color: var(--ink);
  background: var(--paper); padding: 3px 8px;
}
.article-related .related-card__title{
  font-size: var(--t-body); line-height: 1.35;
  color: var(--ink); font-weight: 500;
  margin: 6px 0 0; letter-spacing: -.005em;
}
.article-related .related-card__meta{
  font-size: var(--t-micro); color: var(--muted);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.article-related .related-card__meta .sep{ opacity: .5; }
@media (max-width: 767px){ .article-related__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 1100px){
  :root{ --rail-left-w: 200px; --rail-right-w: 260px; }
}
@media (max-width: 1023px){
  .article-layout-3col{ padding-block-start: var(--s-6); }
  .article-main h2{ font-size: var(--t-h4); }
}
@media (max-width: 599px){
  .article-main h2{ font-size: var(--t-h4); }
  .pull-quote{ font-size: var(--t-h4); }
  .cta-block h2{ font-size: var(--t-h4) !important; }
}

/* ============================================================
   Tap-target compliance — min 44 × 44 px on all interactive elements
   (Wave-06b Phase 7)
   ============================================================ */

/* Breadcrumb nav wrapper — has [data-behavior] so gets checked */
nav[data-behavior="breadcrumb-article"]{
  min-height: 44px; display: flex; align-items: center;
}

/* Breadcrumb links */
.hero-split__text .breadcrumb a,
nav[data-behavior="breadcrumb-article"] a{
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* TOC links (rail, left rail — visible ≥ 1024px) */
.rail-toc a{
  display: flex; align-items: center; min-height: 44px;
}

/* TOC mobile links (visible < 1024px) */
.toc-mobile a{
  display: flex; align-items: center; min-height: 44px; padding-block: 0;
}
.toc-mobile li{ padding-block: 0; }

/* Article meta author link */
.article-meta .author-link a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Author bio links */
.author-bio a,
.author-bio__links a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Related articles "all" link */
.article-related a.all,
.article-related .all{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Sidenote link */
.sidenote-margin__link{
  min-height: 44px;
}
/* ===== 30-pages/article-elements.css ===== */
/*
 * 30-pages/article-elements.css
 * Element library styles for the six article-elements-* pages.
 *
 * Hosts the new in-article element types not already in article-base.css:
 *   - block-label                  small label above each example
 *   - callout--insight             insight variant (tip and warning already in article-base.css)
 *   - blockquote (editorial)       single-line editorial blockquote
 *   - img-single / img-wide-*      single + wide-single + wide-three figures
 *   - photo-grid + lightbox        4-up gallery + :target lightbox
 *   - carousel                     scroll-snap carousels (photo / image+text)
 *   - products + product card grid (host for canonical product-card markup)
 *   - video-pair                   product card + vertical video
 *   - products-carousel            scroll-snap product carousels + view-more tile
 *   - cta-inline / cta-inline-full inline CTAs
 *   - data-table                   reading-width data table
 *   - accordion                    <details>-based FAQ
 *   - masonry-block (1..4)         multi-image grid compositions
 *   - sticky-scroll                two-column sticky-pinned layouts
 *   - col-shell                    supplementary tier — symmetric break-out
 *
 * All six pages share `data-page="article-base"` so they inherit the existing
 * article-base.css chrome/typography/widths. This file only adds the new
 * element styles; it does NOT redefine anything from article-base.css.
 *
 * Tokens used follow the v0.3 palette: --paper, --paper-2, --ink, --line,
 * --muted, --accent, --accent-ink, --accent-wash. No legacy --c-* tokens.
 */


/* ============================================================
   Small label above each example block (".prose · Element name")
   ============================================================ */
.article-main .block-label{
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--muted); font-weight: 600;
  margin: var(--s-5) auto var(--s-2) !important;
  padding: 0;
  text-transform: none;
}
.article-main .block-label code{
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-ink);
  background: var(--paper-2);
  padding: 2px var(--s-1);
}

/* Generic inline <code> inside the article body */
.article-main code{
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 2px var(--s-1);
  color: var(--ink-2);
  border-radius: 2px;
}

/* ============================================================
   Callouts — additional variants
   --tip / --warning already in article-base.css
   ============================================================ */
.callout--insight{
  background: var(--paper-2);
  border-top-color: var(--ink);
}
.callout--insight .callout__label{ color: var(--ink); }

/* ============================================================
   Editorial blockquote — inline, single sentence, quieter than .pull-quote
   Leading curly-quote mark + subtle paper-2 background (no side stripe —
   border-left accents are banned per .impeccable.md).
   ============================================================ */
.blockquote{
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-h5);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  background: var(--paper-2);
  padding: var(--s-5) var(--s-6);
  padding-inline-start: var(--s-7);
  margin: var(--s-6) auto;
}
.blockquote::before{
  content: "\201C"; /* opening curly quote */
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: var(--s-2);
  font-family: var(--font-display);
  font-size: 2.4em;
  line-height: 1;
  color: var(--accent-ink);
  font-style: normal;
  pointer-events: none;
}

/* ============================================================
   Image figures — single, wide-single, wide-three
   .img-pair is already styled in article-base.css.
   ============================================================ */
.img-single{ margin-block: var(--s-6); }
.img-single__box{
  display: block; inline-size: 100%; aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}
.img-single figcaption{
  margin-block-start: var(--s-3);
  font-size: var(--t-caption); color: var(--muted);
  letter-spacing: var(--tracking-wide);
}

.img-wide-single{ margin-block: var(--s-6); }
.img-wide-single__box{
  display: block; inline-size: 100%; aspect-ratio: 21 / 9;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}
.img-wide-single figcaption{
  margin-block-start: var(--s-3);
  font-size: var(--t-caption); color: var(--muted);
  letter-spacing: var(--tracking-wide);
}

.img-wide-three{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-block: var(--s-6);
}
.img-wide-three__box{
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}
@media (max-width: 599px){
  .img-wide-three{ grid-template-columns: 1fr; }
}

/* ============================================================
   Photo grid + CSS-only :target lightbox
   ============================================================ */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-block: var(--s-6);
  padding: 0;
  list-style: none;
}
.photo-grid__item{ min-inline-size: 0; }
.photo-grid__thumb{
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
  text-decoration: none !important;
  transition: opacity .15s;
}
.photo-grid__thumb:hover{ opacity: .85; }

@media (max-width: 767px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Lightbox — :target driven, JS-enhanced (data-behavior="lightbox") for
   ESC dismissal, scrim-click dismissal, prev/next nav, focus-trap.
   Fashion photography is 3:4 portrait, so the image well matches. */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: var(--z-dialog);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-5);
}
.lightbox:target,
.lightbox.is-open{ display: flex; }

/* Body scroll-lock while any lightbox is open (CSS-only via :has, with a
   JS-toggled class as fallback for browsers without :has). */
body:has(.lightbox:target){ overflow: hidden; }
body.lightbox-open{ overflow: hidden; }

.lightbox__img{
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  inline-size: min(540px, calc(90vh * 3 / 4), 90vw);
  max-block-size: 90vh;
}

.lightbox__close,
.lightbox__nav{
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  background: rgba(255,255,255,.15);
  color: var(--paper);
  text-decoration: none !important;
  border: 0; cursor: pointer;
  border-radius: 50%;
  transition: background .15s;
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible{
  background: rgba(255,255,255,.3);
  outline: none;
}
.lightbox__close svg,
.lightbox__nav svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.lightbox__close{
  inset-block-start: var(--s-5);
  inset-inline-end: var(--s-5);
}

.lightbox__nav{
  inset-block-start: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--prev{ inset-inline-start: var(--s-5); }
.lightbox__nav--next{ inset-inline-end: var(--s-5); }
.lightbox__nav--prev svg{ transform: rotate(90deg); }
.lightbox__nav--next svg{ transform: rotate(-90deg); }

.lightbox__caption{
  position: absolute;
  inset-block-end: var(--s-6);
  inset-inline: 0;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: var(--t-small);
}

@media (max-width: 599px){
  .lightbox__nav{ inset-block-start: auto; inset-block-end: var(--s-5); transform: none; }
  .lightbox__nav--prev{ inset-inline-start: var(--s-5); }
  .lightbox__nav--next{ inset-inline-end: var(--s-5); }
}

/* ============================================================
   Carousels — scroll-snap (no JS)
   Slide widths set per modifier; container width comes from
   the parent tier (.col-wide / .col-rail / .col-edge).

   Scoped to body[data-page="article-base"] because the bare
   `.carousel` class is also used by homepage / homepage-product-collections
   carousels (where it means a grid-based product carousel from
   _shared-discovery.css). Without the body scope, this file's
   display:flex bled into those carousels and broke their card sizing.
   ============================================================ */
body[data-page="article-base"] .carousel{
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-block-end: var(--s-3);
  margin-block: var(--s-5);
}
body[data-page="article-base"] .carousel > *{
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.carousel--photos-2 > .carousel__slide{ inline-size: calc(50%      - var(--s-2)); }
.carousel--photos-1 > .carousel__slide{ inline-size: 100%; }
.carousel--photos-3 > .carousel__slide{ inline-size: calc(33.333%  - var(--s-3)); }

.carousel__slide{ min-inline-size: 0; }
.carousel__slide__box{
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}
.carousel__slide__caption{
  font-size: var(--t-small);
  color: var(--muted);
  margin-block-start: var(--s-2);
}

.carousel--image-text > .carousel__slide{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
  inline-size: 100%;
}
.carousel--image-text .carousel__slide__text{ padding: var(--s-4) 0; }
.carousel--image-text .carousel__slide__text h4{
  font-family: var(--font-display);
  font-size: var(--t-h5);
  margin: 0 0 var(--s-3);
  color: var(--ink);
  font-weight: 600;
}
.carousel--image-text .carousel__slide__text p{
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-block-end: 0;
}

@media (max-width: 767px){
  .carousel--image-text > .carousel__slide{ grid-template-columns: 1fr; }
  .carousel--photos-2 > .carousel__slide{ inline-size: calc(80% - var(--s-2)); }
  .carousel--photos-3 > .carousel__slide{ inline-size: calc(80% - var(--s-2)); }
}

/* ============================================================
   Page-variant: sticky-scroll
   --------------------------------------------------------------
   On the sticky-scroll reference page, the BODY content owns the
   sticky moment (via .sticky-scroll__sticky). A second sticky
   layer on the left rail competes with that — disable rail
   stickiness here, but only here (other element pages keep the
   standard sticky rail behavior).
   ============================================================ */
@media (min-width: 1024px){
  body[data-page-variant="sticky-scroll"] .article-rail-left{
    position: static;
    max-block-size: none;
    overflow-y: visible;
  }
}

/* ============================================================
   Carousel arrow nav — buttons sit in the top-right of the frame
   (matching homepage / PDP reel pattern). Wired by
   `data-behavior="carousel-nav"` on a .carousel-frame wrapper holding
   the inner .carousel / .products-carousel scroller. The buttons
   scroll the scroller by one slide on click; scroll-snap handles
   alignment. Buttons hidden on coarse-pointer (swipe-first) devices.
   ============================================================ */
.carousel-frame{
  position: relative;
  /* Reserve room at the top for the floating nav so it doesn't overlap
     the first slide. Matches button-size + small gap below. */
  padding-block-start: calc(44px + var(--s-3));
}
.carousel-frame .carousel,
.carousel-frame .products-carousel{
  scroll-behavior: smooth;
  margin-block: 0;
}
.carousel-nav{
  position: absolute;
  inset-block-start: 0;
  inline-size: 44px; block-size: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background .15s, border-color .15s, color .15s;
}
.carousel-nav:hover,
.carousel-nav:focus-visible{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cta-fg);
  outline: none;
}
.carousel-nav[disabled],
.carousel-nav[aria-disabled="true"]{
  opacity: .3;
  pointer-events: none;
}
.carousel-nav svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Both buttons anchored to top-right; prev sits left of next. */
.carousel-nav--prev{ inset-inline-end: calc(44px + var(--s-1)); }
.carousel-nav--next{ inset-inline-end: 0; }
.carousel-nav--prev svg{ transform: rotate(90deg); }
.carousel-nav--next svg{ transform: rotate(-90deg); }

/* Hide nav buttons on touch viewports — swipe is the primary affordance
   there. Reclaim the reserved top padding so the scroller starts flush. */
@media (hover: none) and (pointer: coarse){
  .carousel-nav{ display: none; }
  .carousel-frame{ padding-block-start: 0; }
}

/* ============================================================
   Product card host grid + canonical-card overrides
   --------------------------------------------------------------
   The article body uses the canonical product-card markup
   (`<div class="card has-indicators">…`) from catalog.html.
   Catalog's `.catx-grid` lives only on the catalog page; here
   we provide `.products-grid` (2-up / 3-up) that hosts cards
   inline in articles. Each li renders the canonical card markup;
   the global product-card styles in 20-components/product-card.css
   take care of card visuals.
   ============================================================ */
.products-grid{
  display: grid;
  gap: var(--s-5) var(--s-3);
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
  grid-template-columns: repeat(2, 1fr);
}
.products-grid--2{ grid-template-columns: repeat(2, 1fr); }
.products-grid--3{ grid-template-columns: repeat(3, 1fr); }
.products-grid > li{ min-inline-size: 0; list-style: none; }

@media (max-width: 599px){
  .products-grid--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 429px){
  .products-grid--2,
  .products-grid--3{ grid-template-columns: 1fr; }
}

/* ============================================================
   Video-pair — product card on the left, vertical 9:16 video right
   --------------------------------------------------------------
   Equal-width grid (1fr 1fr). The card's photo slot is redefined
   to 9:16 here so it matches the video's frame exactly — for real
   <img> placeholders the existing object-fit: cover on .card .img
   crops the excess width evenly left/right. On mobile both columns
   stack: card first, then the video.
   ============================================================ */
.video-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s-4);
  margin-block: var(--s-6);
}
.video-pair > .card{ min-inline-size: 0; }
.video-pair > .card .img{ aspect-ratio: 9 / 16; }
.video-pair > .card .img img,
.video-pair > .card .img .fig{
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center;
}
.video-pair__video{
  aspect-ratio: 9 / 16;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-small);
  color: var(--muted);
}
@media (max-width: 599px){
  .video-pair{ grid-template-columns: 1fr; }
}

/* ============================================================
   Products carousel — scroll-snap with canonical product cards
   --------------------------------------------------------------
   Direct children are <li> wrappers (and one trailing <li> with
   .carousel__view-more inside). Each <li> is a flex item; its
   slide width is set per modifier (.carousel--2 / .carousel--3).
   Cards inside the <li> stretch to the tallest sibling so heights
   stay uniform regardless of title length.
   ============================================================ */
/* Selector is `.article-main .products-carousel` (specificity 0,2,0) so it
   beats `.article-main ul` (0,1,1) from article-base.css — without the
   extra specificity, the carousel UL inherits 24px (--s-5) of padding-left
   from the article body list rule, pushing the first LI 24px in and making
   scrollLeft=0 unreachable via scroll-snap. */
.article-main .products-carousel{
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-block-end: var(--s-3);
  margin-block: var(--s-5);
  list-style: none;
  padding-inline-start: 0;
  align-items: stretch;
}
.products-carousel > li{
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  list-style: none;
}
/* Disable the inner .card's own scroll-snap-align (product-card.css:3
   sets `scroll-snap-align: start` on every `.card` for catalog use).
   With the card's `margin-left: -8px` hover-bleed gutter, that nested
   snap target lands at scrollLeft = -8px (out of range), so mandatory
   snap skips the first card and rests at the second card's position —
   making it impossible to fully scroll left. The outer <li> owns the
   snap target inside the carousel. */
.products-carousel .card{ scroll-snap-align: none; }
/* Card inside the <li> fills the stretched li height so all cards
   in the row land on the same baseline. */
.products-carousel > li > .card{
  flex: 1 1 auto;
  inline-size: 100%;
}
/* View-more sits ONLY where the product photo would (top of the li,
   3:4 aspect ratio) — same visual weight as a single card's image.
   The card has padding-inline: 8px (hover-bleed gutter) so its .img
   is 16px narrower than the card's outer box. Match that here so
   view-more lines up visually with the product photos beside it. */
.products-carousel > li > .carousel__view-more{
  inline-size: calc(100% - 16px);
  margin-inline: 8px;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  min-block-size: 0;
  align-self: flex-start;
}
.products-carousel.carousel--2 > li{ inline-size: calc(50%      - var(--s-2)); }
.products-carousel.carousel--3 > li{ inline-size: calc(33.333%  - var(--s-2)); }

@media (max-width: 767px){
  .products-carousel.carousel--2 > li,
  .products-carousel.carousel--3 > li{ inline-size: calc(80% - var(--s-2)); }
}

/* "View more" trailing card */
.carousel__view-more{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--s-5);
  min-block-size: 320px;
  text-decoration: none !important;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: var(--t-h6);
  transition: background .15s;
}
.carousel__view-more:hover{ background: var(--paper-3); }
.carousel__view-more span{ display: block; }
.carousel__view-more small{
  display: block;
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--muted);
  margin-block-start: var(--s-2);
}

/* ============================================================
   Inline CTAs — small bordered + full-bleed background variants
   ============================================================ */
.cta-inline{
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--ink);
  margin-block: var(--s-6);
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cta-inline__text{ min-inline-size: 0; }
.cta-inline__text strong{
  display: block;
  font-size: var(--t-h6);
  margin-block-end: 4px;
  color: var(--ink);
}
.cta-inline__text p{
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.cta-inline__button{
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--cta-fg);
  text-decoration: none !important;
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: .03em;
  transition: filter .15s;
  white-space: nowrap;
}
.cta-inline__button:hover{ filter: brightness(.92); }

.cta-inline-full{
  background: var(--paper-2);
  padding: var(--s-7) var(--s-5);
  margin-block: var(--s-7);
}
.cta-inline-full__inner{
  max-inline-size: var(--w-prose);
  margin-inline: auto;
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cta-inline-full .cta-inline__text strong{ font-size: var(--t-h5); }

/* ============================================================
   Data table — reading-width or .col-wide
   ============================================================ */
.data-table{
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--s-6);
  font-size: var(--t-small);
}
.data-table th,
.data-table td{
  padding: var(--s-3) var(--s-4);
  text-align: start;
  border-block-end: 1px solid var(--line);
}
.data-table thead th{
  background: var(--paper-2);
  font-weight: 600;
  border-block-end: 2px solid var(--ink);
  color: var(--ink);
  letter-spacing: .01em;
}
.data-table tbody tr:hover{ background: var(--paper-2); }

/* ============================================================
   Accordion — <details>-based collapsible group
   ============================================================ */
.accordion{ margin-block: var(--s-6); }
.accordion details{ border-block-end: 1px solid var(--line); }
.accordion details:first-child{ border-block-start: 1px solid var(--line); }
.accordion summary{
  cursor: pointer;
  padding: var(--s-4) 0;
  font-weight: 600;
  font-size: var(--t-h6);
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}
.accordion summary::-webkit-details-marker{ display: none; }
.accordion summary::after{
  content: "+";
  font-size: var(--t-h4);
  color: var(--muted);
  line-height: 1;
  font-weight: 400;
}
.accordion details[open] summary::after{ content: "−"; }
.accordion details > *:not(summary){
  padding-block-end: var(--s-4);
  margin-block: 0;
  font-size: var(--t-body);
  color: var(--ink-2);
}

/* ============================================================
   Related (simple variant — used by the elements pages)
   Distinct from .article-related (article-base.css), which has
   its own header / card design with category chips. The simple
   .related grid below works as the lighter footer block.
   ============================================================ */
.article-main .related{
  margin-block: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
}
.article-main .related > h2{
  font-family: var(--font-display) !important;
  font-size: var(--t-h4) !important;
  margin: 0 0 var(--s-5) !important;
  font-weight: var(--weight-display, 500) !important;
  letter-spacing: var(--tracking-display, -.02em);
  color: var(--ink);
}
.article-main .related > h2::before{ display: none !important; }
.related__grid{
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  padding: 0;
  list-style: none;
  margin: 0;
}
.related-card{
  display: flex; flex-direction: column;
  gap: var(--s-2);
  min-inline-size: 0;
  margin: 0;
}
.related-card__image{
  display: block;
  aspect-ratio: 5 / 4;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
  text-decoration: none !important;
}
.related-card__title{
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  font-weight: 500;
}
.related-card__date{
  font-size: var(--t-micro);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 600px){
  .related__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Masonry blocks (library)
   Width comes from the parent tier (.col-wide or .col-rail);
   height derived via aspect-ratio so cell ratios stay constant.
   ============================================================ */
.masonry-block{
  display: grid;
  gap: var(--s-1);
  margin-block: var(--s-6);
}
.masonry-block .mc{
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--t-nano)/1 var(--font-mono);
  color: var(--muted);
  min-inline-size: 0;
  min-block-size: 0;
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 60%);
}
.masonry-block .mc-ratio{
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  padding: var(--s-1) var(--s-2);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* Masonry-1 — Square + Two (1:1 spans 2 rows | 4:3 × 2 stacked) */
.masonry-1{
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 5 / 3;
}
.masonry-1 .mc-main{ grid-row: 1 / 3; }

/* Masonry-2 — Big-Left 1 + 2 Stack */
.masonry-2{
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 2 / 1;
}
.masonry-2 .mc-main{ grid-row: 1 / 3; }

/* Masonry-3 — Portrait Flanked (symmetric) */
.masonry-3{
  grid-template-columns: 1fr 2fr 1fr;
  aspect-ratio: 2 / 1;
}

/* Masonry-4 — 5-photo: corners + center
   ┌────┬──────────┬────┐
   │ A  │          │ B  │
   ├────┤   C 2:3  ├────┤
   │ D  │          │ E  │
   └────┴──────────┴────┘
*/
.masonry-4{
  grid-template-columns: 9fr 16fr 9fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 17 / 12;
}
.masonry-4 .mc-main{ grid-row: 1 / 3; grid-column: 2; }

/* Narrow-viewport breakdown for the more compositionally-fragile masonry
   variants. Below 600px the outer 1fr columns of masonry-3 and the corner
   columns of masonry-4 become illegibly small (~80–95px); collapse them. */
@media (max-width: 599px){
  .masonry-3{
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  .masonry-3 .mc{ aspect-ratio: 1 / 1; }
  .masonry-3 .mc:first-child,
  .masonry-3 .mc:last-child{ aspect-ratio: 3 / 4; }

  .masonry-4{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .masonry-4 .mc{ aspect-ratio: 3 / 4; }
  .masonry-4 .mc-main{
    grid-row: auto;
    grid-column: 1 / -1;
    aspect-ratio: 2 / 3;
  }
}

/* ============================================================
   Sticky-scroll library
   --------------------------------------------------------------
   Two-column block where ONE column sticky-pins while the
   OTHER scrolls. Uses .col-shell to span the full --w-shell
   width (left rail + central col + right rail).
   ============================================================ */
.sticky-scroll{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: flex-start;
  margin-block: var(--s-9);
}
.sticky-scroll__sticky{
  min-inline-size: 0;
  display: flex; flex-direction: column;
}
.sticky-scroll__scrolling{ min-inline-size: 0; }

@media (min-width: 1024px){
  .sticky-scroll{ gap: var(--s-7); }
  .sticky-scroll--text-scroll{
    grid-template-columns: minmax(0, 1fr) var(--w-prose);
  }
  .sticky-scroll--photo-scroll{
    grid-template-columns: var(--w-prose) minmax(0, 1fr);
  }
  .sticky-scroll--text-scroll.sticky-scroll--reverse{
    grid-template-columns: var(--w-prose) minmax(0, 1fr);
  }
  .sticky-scroll--photo-scroll.sticky-scroll--reverse{
    grid-template-columns: minmax(0, 1fr) var(--w-prose);
  }
  .sticky-scroll--reverse > .sticky-scroll__sticky{ order: 2; }
  .sticky-scroll--reverse > .sticky-scroll__scrolling{ order: 1; }

  .sticky-scroll__sticky{
    position: sticky;
    inset-block-start: var(--s-4);
    align-self: start;
    /* Fallback: small viewport height excludes iOS Safari toolbar. */
    block-size: calc(100svh - var(--s-4) * 2);
    /* Override: dynamic viewport height where supported. */
    block-size: calc(100dvh - var(--s-4) * 2);
    overflow: hidden;
    z-index: var(--z-sticky);
  }
  .sticky-scroll--text-scroll .sticky-scroll__sticky{ gap: var(--s-3); }
  .sticky-scroll--text-scroll .sticky-scroll__sticky > .sticky-scroll__photo{
    flex: 1 1 0;
    min-block-size: 0;
  }
  .sticky-scroll--photo-scroll .sticky-scroll__sticky{ justify-content: center; }
}

/* Sticky photo placeholder (used in --text-scroll sticky column) */
.sticky-scroll__photo{
  background: var(--paper-2);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}

/* Sticky text block (used in --photo-scroll sticky column) */
.sticky-scroll__text-block{ padding-inline-end: var(--s-5); }
.sticky-scroll__text-block .eyebrow{
  font-size: var(--t-micro);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--muted);
  font-weight: 600;
  margin-block-end: var(--s-3);
}
.sticky-scroll__text-block h4{
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  color: var(--ink);
  margin: 0 0 var(--s-5);
  line-height: var(--lh-tight);
}
.sticky-scroll__text-block p{
  color: var(--ink-2);
  margin-block-end: var(--s-4);
  font-size: var(--t-body);
}
.sticky-scroll__detail-list{
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.sticky-scroll__detail-list li{
  font-size: var(--t-small);
  color: var(--ink-2);
  padding-inline-start: var(--s-5);
  position: relative;
  line-height: var(--lh-snug);
  margin: 0;
}
.sticky-scroll__detail-list li::before{
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--muted);
}

/* Scrolling text panels (used in --text-scroll scrolling column) */
.sticky-scroll__panel{
  padding-block: var(--s-7);
  border-block-end: 1px solid var(--line);
}
.sticky-scroll__panel:first-child{ padding-block-start: 0; }
.sticky-scroll__panel:last-child{ border-block-end: none; }
.sticky-scroll__panel-eyebrow{
  font-size: var(--t-micro);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  color: var(--accent-ink);
  font-weight: 600;
  margin-block-end: var(--s-3);
}
.sticky-scroll__panel h4{
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  color: var(--ink);
  margin: 0 0 var(--s-4);
  line-height: var(--lh-snug);
}
.sticky-scroll__panel p{
  color: var(--ink-2);
  max-inline-size: 52ch;
  font-size: var(--t-body);
}
.sticky-scroll__panel .tag-row{
  display: flex; flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}
.sticky-scroll__panel .tag{
  font-size: var(--t-nano);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper);
}

/* Scrolling photo panels (used in --photo-scroll scrolling column) */
.sticky-scroll__photo-panel{
  display: block;
  margin: 0 0 var(--s-7);
  border-block-end: 1px solid var(--line);
  padding-block-end: var(--s-5);
}
.sticky-scroll__photo-panel:last-child{
  border-block-end: none;
  padding-block-end: 0;
  margin-block-end: 0;
}
.sticky-scroll__photo-panel__img{
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border: 1px solid var(--line);
  background-image: radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%);
}
.sticky-scroll__photo-panel__caption{
  padding-block-start: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.sticky-scroll__photo-panel__caption strong{
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.sticky-scroll__photo-panel__caption span{
  font-size: var(--t-small);
  color: var(--muted);
}

@media (max-width: 1023px){
  .sticky-scroll--text-scroll .sticky-scroll__sticky{
    flex-direction: row;
    gap: var(--s-3);
  }
  .sticky-scroll__photo{ aspect-ratio: 1 / 1; }
  .sticky-scroll__photo-panel__img{ aspect-ratio: 16 / 9; }
}

/* ============================================================
   .col-shell — supplementary tier
   --------------------------------------------------------------
   Symmetric break-out: spans all three article-grid tracks
   (left rail + central col + right rail = full --w-shell width).
   Below 1024px falls back to .col-wide behaviour (100% of column).
   Used by sticky-scroll blocks above.
   ============================================================ */
.article-main > .col-shell{
  max-inline-size: none;
  margin-inline: 0;
  inline-size: 100%;
}
@media (min-width: 1024px){
  .article-main > .col-shell{
    inline-size: calc(100% + var(--rail-left-w) + var(--rail-right-w) + 2 * var(--rail-gap));
    margin-inline-start: calc(-1 * (var(--rail-left-w) + var(--rail-gap)));
  }
}
/* ===== 30-pages/auth.css ===== */
/*
 * auth.css — page-scoped styles for the /security/* pages.
 *
 * Pages: auth-0-login, auth-1-register, auth-2-otp, auth-3-restore.
 * Source: ported from _docs/design/v0.2/Onlady Auth Pages.html (single
 * combined mockup) on 2026-05-19, mapped onto v0.3 tokens. Slim chrome
 * (logo + back-to-shop top bar, trust-strip footer) lives in
 * 20-components/auth-shell.css.
 *
 * Token mapping notes:
 *   --w-card and --field-fill / --field-fill-hover are auth-flow-only;
 *   scoped here so we don't pollute the global token sheet. Field-fill
 *   sits between --paper-2 and --paper-3 — a tray, not a panel.
 */

body[data-page^="auth-"] {
  --w-card: 460px;
  /* Field fill sits between --paper-2 (#F6F4F0) and --paper-3 (#ECE8E0) —
     a tray under the inputs. Derived via color-mix so it tracks brand
     neutrals if --paper-2/--paper-3 ever shift. */
  --field-fill: color-mix(in oklch, var(--paper-2) 75%, var(--paper-3) 25%);
  --field-fill-hover: color-mix(in oklch, var(--paper-2) 55%, var(--paper-3) 45%);
  background: var(--paper-2);
}

/* =================================================================
   AUTH STAGE — centered card surface
   ================================================================= */
.auth-stage {
  padding: var(--s-7) var(--pad);
  display: flex;
  justify-content: center;
}
.auth-stage + .auth-stage { padding-top: 0; }

.auth-card {
  width: 100%;
  max-width: var(--w-card);
  background: var(--paper);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--line);
  position: relative;
}
.auth-card__crumb {
  position: absolute;
  top: -26px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-widest);
  color: var(--muted);
  text-transform: uppercase;
}
.auth-card__crumb b { color: var(--accent-ink); font-weight: 600; }

.auth-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-6);
  color: var(--ink);
}
.auth-title.tight { margin-bottom: var(--s-5); }
.auth-title .sub {
  display: block;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--body);
  letter-spacing: 0;
  margin-top: var(--s-2);
  line-height: 1.5;
}

/* =================================================================
   IDENTITY-MODE RADIOS — Phone / Email switcher
   ================================================================= */
.id-modes {
  display: flex;
  gap: var(--s-7);
  margin: 0 0 var(--s-5);
}
.id-mode {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--t-body);
  color: var(--ink);
  font-weight: 500;
}
.id-mode input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  flex: none;
  margin: 0;
}
.id-mode input[type="radio"]:checked { border-color: var(--ink); }
.id-mode input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ink);
  border-radius: 50%;
}
.id-mode:not(:has(input:checked)) { color: var(--body); }

/* =================================================================
   FIELDS — filled tray style (no labels, placeholder-only)
   ================================================================= */
.fields { display: flex; flex-direction: column; gap: 10px; }

.fld {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--field-fill);
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.fld:hover { background: var(--field-fill-hover); }
.fld:focus-within { border-color: var(--ink); background: var(--paper); }
.fld > input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  padding: 16px;
  outline: none;
  width: 100%;
}
.fld > input::placeholder { color: var(--muted); font-weight: 400; }

/* Phone field — split between country selector and digits */
.fld--phone .phone-cc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 16px;
  height: 54px;
  border-right: 1px solid var(--line);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.fld--phone .phone-cc .flag {
  width: 22px;
  height: 16px;
  border-radius: 1px;
  overflow: hidden;
  background: linear-gradient(180deg, #005BBB 0%, #005BBB 50%, #FFD500 50%, #FFD500 100%);
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.fld--phone .phone-cc .caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
  margin-left: 2px;
  opacity: .7;
}
.fld--phone > input {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Password reveal eye */
.fld--password { align-items: stretch; }
.fld--password .pw-eye {
  background: transparent;
  border: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.fld--password .pw-eye:hover { color: var(--ink); }
.fld--password .pw-eye svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

/* Inline help / strength meter */
.pw-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.pw-strength i { height: 3px; background: var(--line); display: block; }
.pw-strength[data-level="1"] i:nth-child(-n+1) { background: var(--c-error-ink); }
.pw-strength[data-level="2"] i:nth-child(-n+2) { background: var(--c-warn-ink); }
.pw-strength[data-level="3"] i:nth-child(-n+3) { background: color-mix(in oklch, var(--c-warn-ink) 30%, var(--c-success-ink) 70%); }
.pw-strength[data-level="4"] i { background: var(--c-success-ink); }

.pw-hint {
  font-size: var(--t-micro);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  letter-spacing: .01em;
}
.pw-hint b { font-weight: 500; color: var(--ink); }
.pw-hint[data-level="1"] b { color: var(--c-error-ink); }
.pw-hint[data-level="2"] b { color: var(--c-warn-ink); }
.pw-hint[data-level="3"] b { color: color-mix(in oklch, var(--c-warn-ink) 30%, var(--c-success-ink) 70%); }
.pw-hint[data-level="4"] b { color: var(--c-success-ink); }

/* Two-up row for first/last name etc */
.fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Inline error / success banners */
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid;
  margin: 0 0 var(--s-4);
}
.alert--err {
  background: var(--c-error-bg);
  color: var(--c-error-ink);
  border-color: var(--c-error-border);
}
.alert--ok {
  background: var(--c-success-bg);
  color: var(--c-success-ink);
  border-color: var(--c-success-border);
}
.alert svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* Remember-me + forgot link row */
.row-remember {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--s-4) 0 var(--s-5);
  gap: var(--s-4);
}
.row-remember--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--s-5);
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  user-select: none;
}
.chk input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  flex: none;
  margin: 0;
}
.chk input[type="checkbox"]:checked {
  border-color: var(--ink);
  background: var(--ink);
}
.chk input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.chk a {
  border-bottom: 1px solid currentColor;
  margin-left: 4px;
}
.link-forgot {
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: .005em;
}
.link-forgot:hover { color: var(--ink); }

/* =================================================================
   CTAs — page-local. Reuses --cta-bg / --cta-fg tokens.
   ================================================================= */
.auth-card .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  padding: 16px 20px;
  border: 1px solid var(--cta-bg);
  font-size: var(--t-small);
  letter-spacing: .04em;
  font-weight: 500;
  text-transform: none;
  transition: background .15s, color .15s;
  border-radius: 0;
  cursor: pointer;
}
.auth-card .cta:hover { background: transparent; color: var(--cta-bg); }
.auth-card .cta.outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-2);
}
.auth-card .cta.outline:hover { background: var(--ink); color: var(--cta-fg); }
.auth-card .cta.pink {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cta-fg);
}
.auth-card .cta.pink:hover {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
.auth-card .cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.auth-card .cta[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-2);
}
.cta-stack--gap { margin-top: var(--s-5); }
.cta-stack--gap-large { margin-top: var(--s-6); }

/* =================================================================
   Social sign-in — divider + 3 buttons (used by login + register)
   ================================================================= */
.social-label {
  text-align: center;
  margin: var(--s-6) 0 var(--s-4);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
  position: relative;
}
.social-label::before,
.social-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: var(--line);
}
.social-label::before { left: 0; }
.social-label::after { right: 0; }

.socials { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.soc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s, background .15s;
}
.soc-btn:hover { filter: brightness(1.06); }
.soc-btn.fb { background: #1877F2; color: var(--cta-fg); }
.soc-btn.google {
  background: #F1EFEB;
  color: var(--ink);
  border-color: var(--line);
}
.soc-btn.google:hover { background: var(--paper); border-color: var(--ink-2); }
.soc-btn.tg { background: #2AABEE; color: var(--cta-fg); }
.soc-btn svg { width: 16px; height: 16px; flex: none; }

/* Legal microcopy */
.auth-card .legal {
  margin: var(--s-5) 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}
.auth-card .legal a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}
.auth-card .legal a:hover { color: var(--accent-ink); }

/* Below-card pivot ("Don't have an account?" / "Already have one?") */
.pivot {
  text-align: center;
  margin-top: var(--s-5);
  font-size: 13.5px;
  color: var(--body);
}
.pivot a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
}
.pivot a:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* =================================================================
   OTP digits
   ================================================================= */
.otp-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: var(--s-4) 0 var(--s-5);
}
.otp-row .dash {
  color: var(--line-2);
  font-size: 22px;
  line-height: 1;
}
.otp-input {
  width: 48px;
  height: 58px;
  text-align: center;
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--field-fill);
  border: 1px solid transparent;
  outline: none;
  transition: border-color .15s, background .15s;
}
.otp-input:hover { background: var(--field-fill-hover); }
.otp-input:focus,
.otp-input.filled {
  border-color: var(--ink);
  background: var(--paper);
}
.otp-input.err {
  border-color: var(--c-error-ink);
  background: var(--c-error-bg);
  color: var(--c-error-ink);
}

.otp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--s-4) 0 var(--s-5);
  font-size: 13px;
  color: var(--body);
}
.otp-meta .countdown {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.otp-meta .resend {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
}
.otp-meta .resend.disabled {
  color: var(--muted);
  border-bottom-color: var(--line);
  pointer-events: none;
}

.contact-target {
  background: var(--paper-2);
  padding: 14px 16px;
  margin: 0 0 var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.contact-target b {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.contact-target a {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}
.contact-target a:hover { color: var(--ink); }

/* =================================================================
   PROGRESS RAIL — used by restore-password to show 2-stage flow
   ================================================================= */
.rail {
  display: flex;
  gap: 0;
  margin: 0 0 var(--s-6);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rail .step {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-2);
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  font-weight: 500;
}
.rail .step.on {
  color: var(--ink);
  border-bottom-color: var(--ink);
  background: var(--paper);
}
.rail .step.done {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.rail .step .n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* =================================================================
   MOBILE
   ================================================================= */
@media (max-width: 560px) {
  .auth-stage { padding: var(--s-5) var(--s-4); }
  .auth-card { padding: var(--s-6) var(--s-5) var(--s-5); }
  .auth-title { font-size: 22px; }
  .fields-row { grid-template-columns: 1fr; }
  .otp-input { width: 42px; height: 52px; font-size: 20px; }
  .otp-row { gap: 6px; }
  .socials { grid-template-columns: 1fr; }
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */

/* Forgot password link */
.link-forgot{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* CTA buttons — belt-and-suspenders min-height in case computed padding falls short */
.auth-card .cta{ min-height: 44px; }

/* OTP resend link */
.otp-meta .resend{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Checkbox-embedded links (terms/privacy in .chk label) */
.chk a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Inline .legal links (privacy notice below social sign-in) */
.legal a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Pivot text links ("Вже маєте акаунт? Увійти" etc.) */
.pivot a{
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
}

/* OTP page — "change" link next to phone/email */
.contact-target a{
  display: inline-flex; align-items: center; min-height: 44px;
}
/* ===== 30-pages/blog.css ===== */
/* ===== 30-pages/blog.css — page-specific styles for blog list pages =====
 * Pages: blog-0-main.html (page 1), blog-1-pagination.html (page 2+).
 * Source mockups: _docs/design/pages/blog-list*.html (v0.1, 2026-05-05).
 *
 * Scope: page wrapper, blog-header zone, blog-card component + size variants
 * (medium/compact), promoted-carousel + trending-carousel (bleed-right),
 * article-grid (2-col → 3-col tier), list-controls (load-more + pager),
 * blog-instagram zone (blog-scoped — does not collide with home/catalog .ig-grid).
 *
 * Inherits placeholder pattern (.ph + .crop), .section-head, .shell clamping
 * from _shared-discovery.css. Uses tokens from 00-tokens.css only.
 */

  /* ============ Page wrapper ============ */
  /* Blog pages live inside .shell (clamped to --w-shell), but the bleed-right
     carousels need to escape on the right edge. We mirror catalog's pattern:
     keep the carousel cell at its natural size and grow the inner track
     by an explicit width so overflow-x:auto reports overflow honestly. */

  /* ============ Zone 1 — Page header ============ */
  .blog-header{margin:var(--s-6) 0 var(--s-7)}
  @media (min-width:1024px){
    .blog-header{margin-bottom:var(--s-8)}
  }
  .blog-breadcrumb{
    list-style:none;padding:0;margin:0 0 var(--s-5);display:flex;flex-wrap:wrap;gap:8px;
    font-size:var(--t-micro);color:var(--muted);letter-spacing:var(--tracking-wide);
  }
  .blog-breadcrumb li{display:flex;align-items:center;gap:8px}
  .blog-breadcrumb li + li::before{content:"/";color:var(--line-2)}
  .blog-breadcrumb a{color:var(--muted);cursor:pointer}
  .blog-breadcrumb a:hover{color:var(--ink)}
  .blog-breadcrumb [aria-current]{color:var(--ink)}
  .blog-title{
    font-family:var(--font-display);
    font-size:var(--t-h1-hero);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.025em);
    line-height:var(--lh-tight);margin:0 0 var(--s-4);
  }
  .blog-title__page{
    display:inline-block;
    color:var(--muted);font-weight:400;
    font-size:var(--t-subtitle);
    letter-spacing:var(--tracking-wide);
    margin-inline-start:var(--s-3);
  }
  .blog-lede{
    color:var(--body);font-size:var(--t-body);line-height:1.6;
    margin:0;max-width:62ch;
  }

  /* ============ Blog Card — atomic unit ============
     Reused in:
       - Promoted carousel (.promoted-track .blog-card)
       - Article grid (.article-grid .blog-card)
       - Trending carousel (.trending-track .blog-card.blog-card--compact)
     Structure: 4:3 image · title (2-line clamp) · meta (date · category)
  */
  .blog-card{
    display:flex;flex-direction:column;gap:var(--s-3);
    min-inline-size:0;color:inherit;position:relative;
  }
  .blog-card__image{
    display:block;position:relative;overflow:hidden;
    aspect-ratio:4/3;background:var(--paper-2);
    color:inherit;
  }
  .blog-card__image .ph{position:absolute;inset:0}
  .blog-card__title{
    margin:0;
    font-family:var(--font-display);
    font-size:var(--t-h5);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.015em);
    line-height:var(--lh-snug);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* Single block link — title anchor expands via ::before to cover whole card.
     Category link (.blog-card__category) escapes the overlay via z-index. */
  .blog-card__link{
    color:var(--ink);text-decoration:none;
    transition:color .15s;
  }
  .blog-card__link::before{
    content:"";position:absolute;inset:0;z-index:1;
  }
  .blog-card:hover .blog-card__link,
  .blog-card__link:focus-visible{color:var(--accent-ink)}
  .blog-card__meta{
    margin:0;font-size:var(--t-micro);color:var(--muted);
    display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
    letter-spacing:var(--tracking-wide);
  }
  .blog-card__meta time{color:inherit;font-variant-numeric:tabular-nums}
  .blog-card__sep{display:inline-block;opacity:.6}
  .blog-card__category{
    color:var(--muted);text-decoration:none;
    border-bottom:1px solid transparent;transition:color .15s, border-color .15s;
    position:relative;z-index:2;
  }
  .blog-card__category:hover{color:var(--ink);border-bottom-color:currentColor}

  /* Medium variant — smaller title for denser 3-col grid */
  .blog-card--medium .blog-card__title{font-size:var(--t-h6)}

  /* Compact variant — used in trending carousel: smaller title, no meta */
  .blog-card--compact{gap:var(--s-2)}
  .blog-card--compact .blog-card__title{font-size:var(--t-small);font-weight:600}

  /* ============ Zone 2 — Promoted carousel (bleed-right) ============
     Mirrors catalog's .catx-subcats bleed-right mechanic. Track width
     extends past the .shell right edge to viewport edge minus pad. */
  .promoted-carousel{margin:0 0 var(--s-8);position:relative;min-width:0;overflow:visible}
  .promoted-carousel .section-head{margin-bottom:var(--s-6)}
  .promoted-carousel__track{
    display:flex;gap:var(--s-5);list-style:none;margin:0;
    padding:0 var(--pad) var(--s-3) 0;
    overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;
    width:calc(100% + max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad))));
  }
  .promoted-carousel__track > li{flex:0 0 400px;scroll-snap-align:start;min-width:0}
  @media (min-width:768px){
    .promoted-carousel__track > li{flex-basis:460px}
  }
  @media (min-width:1024px){
    .promoted-carousel{margin-bottom:var(--s-9)}
  }

  /* ============ Zone 3 — Article grid (clamped) ============
     6+9 tier: first block 2-col (6 cards, standard), then 3-col (9 cards,
     medium variant). On pagination page: single 3-col block (15 cards). */
  .article-grid-wrap{margin:0 0 var(--s-7)}
  .article-grid-head{margin:0 0 var(--s-6)}
  .article-grid-title{
    font-family:var(--font-display);
    font-size:var(--t-h2);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.025em);
    line-height:1.05;margin:0;
  }
  .article-grid{
    display:grid;gap:var(--s-6) var(--s-5);grid-template-columns:1fr;
    list-style:none;padding:0;margin:0;
  }
  @media (min-width:768px){
    .article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-6)}
  }
  @media (min-width:1024px){
    .article-grid{gap:var(--s-8) var(--s-6)}
  }
  .article-grid--3col{margin-top:var(--s-7)}
  @media (min-width:1024px){
    .article-grid--3col{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--s-7) var(--s-5);
    }
  }

  /* ============ Zone 4 — List controls (load-more + pager) ============ */
  .list-controls{
    margin-block:var(--s-7);
    display:flex;flex-direction:column;align-items:center;gap:var(--s-6);
  }
  @media (min-width:768px){
    .list-controls{margin-block:var(--s-8)}
  }
  .load-more{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    padding:var(--s-4) var(--s-7);min-inline-size:240px;
    background:var(--cta-bg);color:var(--cta-fg);border:1px solid var(--cta-bg);
    font-family:inherit;font-size:var(--t-caption);font-weight:500;
    letter-spacing:var(--tracking-wider);text-transform:uppercase;
    cursor:pointer;transition:background .2s, color .2s, border-color .2s;
    border-radius:var(--radius-s);
  }
  .load-more:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover)}
  .load-more:disabled,
  .load-more[aria-busy="true"]{
    background:var(--cta-bg-disabled);border-color:var(--cta-bg-disabled);
    cursor:progress;
  }
  .load-more__remaining{font-weight:400;opacity:.75;margin-inline-start:6px}

  .pager{
    display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:center;
    font-size:var(--t-small);list-style:none;padding:0;margin:0;
  }
  .pager a, .pager span{
    display:inline-flex;align-items:center;justify-content:center;
    min-inline-size:40px;block-size:40px;padding:0 var(--s-3);
    border:1px solid var(--line);color:var(--ink);
    text-decoration:none;font-variant-numeric:tabular-nums;
    transition:border-color .15s, background .15s, color .15s;
    border-radius:var(--radius-s);
  }
  @media (max-width:768px){
    .pager a, .pager span{min-inline-size:44px;block-size:44px}
  }
  .pager a:hover{border-color:var(--ink)}
  .pager [aria-current="page"]{
    background:var(--ink);color:var(--cta-fg);border-color:var(--ink);font-weight:600;
  }
  .pager [aria-disabled="true"]{
    border-color:var(--line);color:var(--line-2);cursor:not-allowed;
  }
  .pager__ellipsis{border:0;min-inline-size:auto;color:var(--muted)}
  .pager__arrow{gap:1px}
  .pager__arrow svg{
    display:block;width:6px;height:10px;
    fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .pager__arrow--prev svg{transform:rotate(180deg)}

  /* ============ Zone 5 — Trending carousel (bleed-right, compact cards) ============ */
  .trending-carousel{margin:var(--s-9) 0 var(--s-9);position:relative;min-width:0;overflow:visible}
  .trending-carousel .section-head{margin-bottom:var(--s-6)}
  .trending-carousel__track{
    display:flex;gap:var(--s-4);list-style:none;margin:0;
    padding:0 var(--pad) var(--s-3) 0;
    overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;
    width:calc(100% + max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad))));
  }
  .trending-carousel__track > li{flex:0 0 200px;scroll-snap-align:start;min-width:0}
  @media (min-width:768px){
    .trending-carousel__track > li{flex-basis:220px}
  }

  /* ============ Zone 6 — Instagram (blog-scoped) ============
     Uses blog-prefixed classes so the home (.ig-grid:5col 9/16) and catalog
     (.ig-grid:6col 1/1) overrides don't leak. Same .ph placeholder pattern. */
  .blog-ig{
    margin-top:var(--s-9);padding-block:var(--s-8);
  }
  .blog-ig .section-head{margin-bottom:var(--s-6)}
  .blog-ig-grid{
    display:grid;gap:8px;grid-template-columns:repeat(2,1fr);
  }
  @media (min-width:768px){
    .blog-ig-grid{grid-template-columns:repeat(4,1fr)}
  }
  @media (min-width:1024px){
    .blog-ig-grid{grid-template-columns:repeat(6,1fr)}
  }
  .blog-ig-tile{
    position:relative;aspect-ratio:1/1;background:var(--paper-2);
    overflow:hidden;cursor:pointer;color:var(--cta-fg);text-decoration:none;
  }
  .blog-ig-tile .ph{position:absolute;inset:0}
  .blog-ig-tile::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 50%, var(--scrim-overlay));
    opacity:0;transition:opacity .2s;
  }
  .blog-ig-tile:hover::after{opacity:1}
  .blog-ig-tile__caption{
    position:absolute;inset-block-end:var(--s-3);inset-inline:var(--s-3);
    z-index:1;font-size:var(--t-micro);letter-spacing:var(--tracking-wide);
    display:flex;gap:var(--s-3);align-items:center;
    opacity:0;transition:opacity .2s;
  }
  .blog-ig-tile:hover .blog-ig-tile__caption{opacity:1}

  /* ============ Responsive — blog-only overrides ============ */
  @media (max-width:1100px){
    .article-grid--3col{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:768px){
    .promoted-carousel__track > li{flex-basis:280px}
    .trending-carousel__track > li{flex-basis:170px}
    .article-grid--3col{grid-template-columns:1fr}
  }

  /* ============ Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7) ============ */

  /* Blog breadcrumb nav wrapper */
  nav[data-behavior="breadcrumb-top"]{
    min-height: 44px; display: flex; align-items: center;
  }

  /* Breadcrumb links */
  .blog-breadcrumb a{
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
  }

  /* Blog card title link — make it block with min-height so the element itself is tappable */
  .blog-card__link{
    display: block; min-height: 44px;
  }

  /* Blog card category link */
  .blog-card__category{
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
  }
/* ===== 30-pages/catalog.css ===== */
/* ===== 30-pages/catalog.css — page-specific overrides for catalog page =====
 * Shared chrome / hero / mega / discovery layout / mobile-mode / sticky header
 * extracted to _shared-discovery.css on 2026-05-18 (audit-tokens.md drift cleanup).
 * Only catalog-unique rules remain in this file:
 *   - .ig-grid 6-col / .ig 1/1 aspect ratio (home uses 5-col / 9/16)
 *   - All catalog-page content: catx-intro, sidebar filters, product grid,
 *     OOS overlay, edicard, pager, SEO, FAQ, popcats, relcats
 *   - v2 fixes (catx-shell-ultra and the (1)-(11) tweaks)
 *
 * Util-user accent palette is the shared default — catalog inherits, no override needed.
 */

  /* ============ Zone 9 — Instagram (catalog: 6-col square grid) ============
     Home uses 5-col 9/16; both pages override _shared. */
  .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .ig{
    position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;cursor:pointer;
  }

  /* ============ CATALOG PAGE — additions ============ */
  /* Catalog intro: header block + bleed-right subcat carousel */
  .catx-intro-wrap{padding:36px 0 0}
  .catx-intro{
    display:grid;grid-template-columns:1fr;gap:40px;
    padding-bottom:48px;border-bottom:1px solid var(--line);
  }
  @media (min-width:1100px){
    .catx-intro{grid-template-columns:minmax(0,580px) 1fr;gap:80px;align-items:start}
  }
  .catx-breadcrumb{
    list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px;
    font-size:var(--t-micro);color:var(--muted);letter-spacing:var(--tracking-wide);
  }
  .catx-breadcrumb li{display:flex;align-items:center;gap:8px}
  .catx-breadcrumb li + li::before{content:"/";color:var(--line-2)}
  /* min-height + min-width 44px tap-target on breadcrumb links */
  .catx-breadcrumb a{color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .catx-breadcrumb a:hover{color:var(--ink)}
  .catx-breadcrumb [aria-current]{color:var(--ink)}
  .catx-title{
    font-family:var(--font-display);
    font-size:clamp(40px,5vw,72px);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.025em);
    line-height:.95;margin:0 0 16px;
  }
  .catx-meta{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:18px;margin:0 0 18px;
    font-size:var(--t-caption);color:var(--muted);letter-spacing:var(--tracking-wide);
  }
  .catx-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .catx-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
  .catx-desc{color:var(--body);font-size:var(--t-body);line-height:1.6;margin:0;max-width:54ch}
  .catx-desc-more{display:inline}
  .catx-desc-more > summary{display:inline;cursor:pointer;list-style:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
  .catx-desc-more > summary::-webkit-details-marker{display:none}
  .catx-desc-more:not([open]) summary::after{content:"  ↓"}
  .catx-desc-more[open] summary::after{content:"  ↑"}
  .catx-desc-more > .body{display:none}
  .catx-desc-more[open] > .body{display:inline}

  /* Subcat carousel: bleed-right to viewport edge while preserving scroll.
     Note: do NOT apply a negative `margin-right` to the grid item itself —
     in CSS Grid, that expands the item's box past its cell, which inflates
     the track's clientWidth at wide viewports and silently kills the scroll
     even when items still extend behind the right edge.
     Instead, keep the grid cell at its natural size and grow the inner track
     via explicit width — overflow-x:auto then reports overflow honestly at
     every viewport. */
  .catx-subcats{position:relative;min-width:0;overflow:visible}
  .catx-subcats-track{
    display:flex;gap:14px;overflow-x:auto;list-style:none;margin:0;
    padding:0 var(--pad) 12px 0;scrollbar-width:thin;scroll-snap-type:x proximity;
    width:calc(100% + max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad))));
  }
  .catx-subcats-track > li{flex:0 0 178px;scroll-snap-align:start}
  /* min-height:44px tap target on subcat tiles */
  .catx-subtile{display:flex;flex-direction:column;gap:10px;color:inherit;cursor:pointer;text-decoration:none;min-height:44px}
  .catx-subtile .ph{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--paper-2)}
  .catx-subtile .ph picture{display:block;width:100%;height:100%}
  .catx-subtile .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
  .catx-subtile:hover .ph img{transform:scale(1.05)}
  .catx-subtile .lbl{display:flex;flex-direction:column;gap:2px}
  .catx-subtile b{font-size:var(--t-caption);font-weight:500;color:var(--ink);letter-spacing:.01em}
  .catx-subtile small{font-size:var(--t-micro);color:var(--muted);letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums}
  .catx-subtile:hover b{text-decoration:underline;text-underline-offset:3px}
  .catx-edicard .img .ph picture{display:block;width:100%;height:100%}
  .catx-edicard .img .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

  /* Controls bar */
  .catx-controls{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    padding:24px 0 18px;
  }
  .catx-chips .results{font-size:var(--t-caption);color:var(--muted);letter-spacing:var(--tracking-wide);margin-left:auto}
  .catx-chips .results b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .catx-controls .spacer{flex:1 1 auto}
  .catx-cbtn{
    border:1px solid var(--line);background:transparent;color:var(--ink);
    padding:9px 14px;font-size:var(--t-micro);font-family:inherit;letter-spacing:var(--tracking-wide);
    cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-xs);
  }
  .catx-cbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
  .catx-cbtn:hover{border-color:var(--ink)}
  .catx-cbtn b{font-weight:600}
  .catx-sort{
    border:1px solid var(--line);background:var(--paper);color:var(--ink);
    padding:9px 32px 9px 14px;font-size:var(--t-micro);font-family:inherit;letter-spacing:var(--tracking-wide);
    border-radius:var(--radius-xs);cursor:pointer;
    appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
    background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
  .catx-photosize{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--paper)}
  .catx-photosize button{
    border:0;background:transparent;width:44px;min-width:44px;height:44px;min-height:44px;cursor:pointer;
    color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  }
  .catx-photosize button + button{border-left:1px solid var(--line)}
  .catx-photosize button[aria-pressed="true"]{background:var(--ink);color:var(--cta-fg)}
  .catx-photosize svg{width:16px;height:16px;fill:currentColor}
  .catx-mobile-filter{display:none}
  @media (max-width:1023px){
    .catx-mobile-filter{display:inline-flex}
  }

  /* Layout grid */
  .catx-layout{
    display:grid;gap:48px;grid-template-columns:1fr;align-items:start;
    padding-bottom:96px;
  }
  @media (min-width:1024px){
    .catx-layout{grid-template-columns:240px minmax(0,1fr);gap:56px}
  }

  /* Filter sidebar */
  .catx-sidebar{
    position:sticky;top:24px;
    border-top:1px solid var(--line);padding-top:4px;
    max-height:calc(100vh - 24px);overflow-y:auto;
  }
  body.is-sticky-header .catx-sidebar{top:108px;max-height:calc(100vh - 120px)}
  @media (max-width:1023px){
    .catx-sidebar{display:none}
  }
  .catx-sidebar-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 0 14px;border-bottom:1px solid var(--line);
  }
  .catx-sidebar-head h2{
    font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;
    color:var(--ink);margin:0;
  }
  .catx-sidebar-head a{font-size:var(--t-micro);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .catx-sidebar-head a:hover{color:var(--accent-ink)}

  .catx-fgroup{border-bottom:1px solid var(--line);padding:14px 0}
  .catx-fgroup > summary{
    font-size:var(--t-caption);font-weight:600;color:var(--ink);letter-spacing:.01em;
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
    padding:6px 0;
  }
  .catx-fgroup > summary::-webkit-details-marker{display:none}
  .catx-fgroup > summary::after{content:"+";color:var(--muted);font-weight:400;font-size:var(--t-h6);line-height:1}
  .catx-fgroup[open] > summary::after{content:"−"}
  .catx-fbody{padding:14px 0 4px}
  .catx-fbody .hint{font-size:var(--t-nano);color:var(--muted);margin:0 0 10px;letter-spacing:var(--tracking-wide)}

  .catx-chiplist{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
  .catx-chiplist li{margin:0;position:relative}
  .catx-chiplist input{position:absolute;opacity:0;pointer-events:none}
  .catx-chiplist label{
    display:inline-block;padding:7px 11px;border:1px solid var(--line);
    font-size:var(--t-micro);letter-spacing:var(--tracking-wide);color:var(--ink);min-width:38px;text-align:center;
    cursor:pointer;font-variant-numeric:tabular-nums;border-radius:var(--radius-xs);
  }
  .catx-chiplist label:hover{border-color:var(--ink)}
  .catx-chiplist input:checked + label{background:var(--ink);color:var(--cta-fg);border-color:var(--ink)}
  .catx-chiplist label.out{text-decoration:line-through;color:var(--muted);cursor:not-allowed;background:transparent}

  .catx-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px 6px;list-style:none;padding:0;margin:0}
  .catx-swatches li{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
  .catx-swatches input{position:absolute;opacity:0;pointer-events:none}
  .catx-swatches label{
    display:flex;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  }
  .catx-swatches input:checked + label{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
  .catx-swatches small{font-size:var(--t-super-nano);color:var(--muted);letter-spacing:.02em}
  .sw-black{background:#1a1a1a}.sw-white{background:#fafafa;border-color:var(--line-2)}
  .sw-beige{background:#dcc8a8}.sw-pink{background:var(--pink)}
  .sw-rose{background:#dba0b3}.sw-red{background:#a02828}
  .sw-burgundy{background:#5a1d2a}.sw-blue{background:#2e3f6e}
  .sw-navy{background:#0f1c36}.sw-green{background:#3f5e3f}
  .sw-grey{background:#a0a0a0}.sw-brown{background:#624533}

  .catx-checklist{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:9px;
    max-height:240px;overflow-y:auto;
  }
  .catx-checklist label{
    display:flex;align-items:center;gap:10px;font-size:var(--t-caption);color:var(--ink);cursor:pointer;letter-spacing:.005em;
  }
  .catx-checklist label input{accent-color:var(--ink);width:14px;height:14px}
  .catx-checklist label .ct{color:var(--muted);margin-left:auto;font-size:var(--t-micro);font-variant-numeric:tabular-nums}
  .catx-showmore{
    margin-top:10px;padding:6px 0;font-size:var(--t-micro);color:var(--ink);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500;
    list-style:none;
  }
  .catx-showmore::-webkit-details-marker{display:none}
  details.catx-more[open] .catx-showmore::after{content:"  −"}
  details.catx-more:not([open]) .catx-showmore::after{content:"  +"}

  .catx-pricerange{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .catx-pricerange input{
    width:100%;padding:9px 10px;border:1px solid var(--line);font:inherit;
    font-size:var(--t-caption);font-variant-numeric:tabular-nums;border-radius:var(--radius-xs);
  }
  .catx-dual{position:relative;height:24px;margin:14px 6px 6px}
  .catx-dual .track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:var(--line-2);border-radius:var(--radius-xs)}
  .catx-dual .fill{position:absolute;top:50%;transform:translateY(-50%);height:2px;background:var(--ink);border-radius:var(--radius-xs);left:18%;right:32%}
  .catx-dual .thumb{
    position:absolute;top:50%;width:14px;height:14px;background:var(--paper);border:2px solid var(--ink);
    border-radius:50%;transform:translate(-50%,-50%);cursor:grab;
  }
  .catx-dual .thumb.lo{left:18%}.catx-dual .thumb.hi{left:68%}
  .catx-pricelegend{display:flex;justify-content:space-between;font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wide);margin-top:4px;font-variant-numeric:tabular-nums}

  .catx-toggle{display:flex;align-items:center;gap:10px;font-size:var(--t-caption);cursor:pointer;padding:6px 0;color:var(--ink)}
  .catx-toggle input{accent-color:var(--ink);width:14px;height:14px}

  /* Sidebar internal rhythm — covers the four most common adjacencies inside .catx-fbody.
     Replaces ad-hoc inline `margin-top` overrides on individual lists/toggles. */
  .catx-fbody .hint a{text-decoration:underline;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
  .catx-fbody .catx-chiplist + .catx-toggle{margin-top:14px}
  .catx-fbody .catx-toggle + .catx-checklist{margin-top:8px}
  .catx-fbody .catx-more .catx-checklist{margin-top:9px}

  /* Word-label chiplist (e.g. Season: Весна, Літо, Осінь, Зима).
     Default .catx-chiplist is sized for abbreviations (XS/S/M/L); the --text modifier
     widens the gap and lets labels size to their content. */
  .catx-chiplist--text{gap:8px}
  .catx-chiplist--text label{min-width:auto;padding:7px 14px}

  .catx-fgroup-actions{
    display:flex;gap:10px;justify-content:space-between;align-items:center;
    margin-top:18px;padding-top:14px;
  }
  .catx-btn{
    padding:11px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--cta-fg);
    font-size:var(--t-nano);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    cursor:pointer;border-radius:var(--radius-xs);font-family:inherit;
    /* min-height:44px tap target */
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .catx-btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
  .catx-btn-ghost{
    padding:11px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);
    font-size:var(--t-nano);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    cursor:pointer;border-radius:var(--radius-xs);font-family:inherit;
    /* min-height:44px tap target */
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .catx-btn-ghost:hover{border-color:var(--ink)}

  /* Active filter chips */
  .catx-chips{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    padding:8px 0 26px;font-size:var(--t-micro);
  }
  .catx-chips .label{font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;margin-right:6px}
  .catx-chip{
    display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:var(--t-micro);letter-spacing:var(--tracking-wide);
    border-radius:var(--radius-xs);
  }
  .catx-chip button{
    border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--t-small);
    /* min 44×44 tap target */
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;
  }
  .catx-chip button:hover{color:var(--ink)}
  .catx-chips .clear{font-size:var(--t-micro);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;letter-spacing:var(--tracking-wide);display:inline-flex;align-items:center;min-height:44px}
  @media (max-width:768px){
    .catx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:14px}
    .catx-chips .label,.catx-chip,.catx-chips .clear{flex:0 0 auto}
    .catx-chips .clear{margin-left:8px}
  }

  /* Product grid */
  .catx-grid{
    display:grid;gap:30px 16px;list-style:none;padding:0;margin:0;
    grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;
  }
  @media (min-width:600px){.catx-grid{grid-template-columns:repeat(3,1fr)}}
  @media (min-width:1024px){.catx-grid{grid-template-columns:repeat(3,1fr)}}
  @media (min-width:1320px){.catx-grid{grid-template-columns:repeat(4,1fr)}}
  @media (min-width:1700px){.catx-grid{grid-template-columns:repeat(5,1fr)}}
  .catx-grid > li{min-width:0;list-style:none}
  .catx-grid > li.wide{grid-column:span 2}
  .catx-grid > li.wide .card .img{aspect-ratio:6/4}

  /* Photo size override (small/large) — JS-controlled via body class */
  body.catx-cols-small .catx-grid{grid-template-columns:repeat(2,1fr)!important}
  body.catx-cols-large .catx-grid{grid-template-columns:repeat(2,1fr)!important}
  @media (min-width:600px){
    body.catx-cols-small .catx-grid{grid-template-columns:repeat(4,1fr)!important}
    body.catx-cols-large .catx-grid{grid-template-columns:repeat(2,1fr)!important}
  }
  @media (min-width:1024px){
    body.catx-cols-small .catx-grid{grid-template-columns:repeat(4,1fr)!important}
    body.catx-cols-large .catx-grid{grid-template-columns:repeat(3,1fr)!important}
  }
  @media (min-width:1320px){
    body.catx-cols-small .catx-grid{grid-template-columns:repeat(5,1fr)!important}
    body.catx-cols-large .catx-grid{grid-template-columns:repeat(3,1fr)!important}
  }
  @media (min-width:1700px){
    body.catx-cols-small .catx-grid{grid-template-columns:repeat(6,1fr)!important}
    body.catx-cols-large .catx-grid{grid-template-columns:repeat(4,1fr)!important}
  }

  /* Editorial wide tile */
  .catx-edicard{display:flex;flex-direction:column;height:100%;color:inherit;cursor:pointer;position:relative}
  .catx-edicard .img{
    flex:1 1 auto;background:var(--paper-3);position:relative;overflow:hidden;
    aspect-ratio:6/4;display:flex;align-items:flex-end;
  }
  .catx-edicard .img .ph{position:absolute;inset:0}
  .catx-edicard .img .overlay{
    position:relative;z-index:2;padding:32px;color:var(--cta-fg);width:100%;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%);
  }
  .catx-edicard .eyebrow{font-size:var(--t-super-nano);letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:10px;display:block}
  .catx-edicard h3{
    font-family:var(--font-display);font-size:clamp(22px,2.4vw,32px);
    font-weight:var(--weight-display,500);letter-spacing:var(--tracking-display,-.01em);
    margin:0;line-height:1.05;color:var(--cta-fg);max-width:24ch;
  }
  .catx-edicard .arrow{font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--cta-fg);display:inline-block;margin-top:14px;border-bottom:1px solid var(--cta-fg);padding-bottom:3px;font-weight:500}

  /* OOS overlay on .card */
  .card.oos{position:relative}
  .card.oos .img::after{
    content:"Немає в наявності";
    position:absolute;left:0;right:0;bottom:32%;text-align:center;
    background:var(--surface-translucent);padding:8px 12px;
    font-size:var(--t-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;color:var(--ink);
    z-index:4;
  }
  .card.oos .meta{opacity:.55}
  .card.oos .wish{opacity:.5}

  /* ============================================================
     Canonical card overrides for the catalog grid.

     The base .card.has-indicators rules (photo-stack, sizes drawer, active
     hover tint) now live in 20-components/product-card.css. Catalog-grid-
     specific tweaks stay here because they depend on the .catx-grid layout.
     ============================================================ */

  /* Meta grid layout (display + columns + sizes-slot placement) now lives in
     20-components/product-card.css under .card.has-indicators .meta. Catalog
     keeps only the font-size shrink for its denser grid. */

  /* Smaller title font (11px) — matches the compact size strip.
     Selector must include .catx-grid to outrank `.catx-grid .card .meta .title`
     (4-class specificity); 2-line clamp min-height shrinks in step. */
  .catx-grid .card.has-indicators .meta .title{
    font-size:var(--t-nano);line-height:1.35;
    min-height:calc(11px * 1.35 * 2);
  }
  .catx-grid .card.has-indicators .meta .price .now{font-size:var(--t-micro)}
  .catx-grid .card.has-indicators .meta .price .was{font-size:var(--t-nano)}

  /* Pager */
  .catx-pager{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    margin:48px 0 0;padding:36px 0 8px;border-top:1px solid var(--line);
    text-align:center;
  }
  .catx-pager .counter{font-size:var(--t-caption);color:var(--muted);letter-spacing:var(--tracking-wide);margin:0}
  .catx-pager .counter b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
  .catx-pager-loadmore{
    padding:14px 48px;border:1px solid var(--ink);background:transparent;color:var(--ink);
    font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tracking-widest);text-transform:uppercase;
    cursor:pointer;font-family:inherit;border-radius:var(--radius-xs);min-width:280px;
    transition:background-color .2s, color .2s;
  }
  .catx-pager-loadmore:hover{background:var(--ink);color:var(--cta-fg)}
  .catx-pager-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:6px}
  .catx-pager-numbers a, .catx-pager-numbers .ellipsis{
    display:inline-flex;min-width:44px;min-height:44px;height:44px;justify-content:center;align-items:center;
    padding:0 12px;border:1px solid var(--line);font-size:var(--t-caption);letter-spacing:var(--tracking-wide);
    font-variant-numeric:tabular-nums;border-radius:var(--radius-xs);cursor:pointer;color:var(--ink);
  }
  .catx-pager-numbers a[aria-current]{border-color:var(--ink);font-weight:600;background:var(--ink);color:var(--cta-fg)}
  .catx-pager-numbers a:hover:not([aria-current]){border-color:var(--ink)}
  .catx-pager-numbers .ellipsis{border:0;color:var(--muted);min-width:18px;padding:0 4px;cursor:default}
  .catx-pager-numbers .nav{padding:0 16px;letter-spacing:var(--tracking-wider)}

  /* SEO */
  .catx-seo-wrap{padding:80px 0 24px;border-top:1px solid var(--line)}
  .catx-seo{display:grid;gap:48px}
  @media (min-width:900px){.catx-seo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:96px}}
  .catx-seo h2{
    font-family:var(--font-display);
    font-size:clamp(28px,3vw,40px);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.015em);line-height:1.05;margin:0 0 22px;
  }
  .catx-seo .h-eyebrow{margin-bottom:18px}
  .catx-seo p{font-size:var(--t-small);line-height:1.7;color:var(--body);margin:0 0 14px}
  .catx-seo h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin:24px 0 14px;letter-spacing:.01em}
  .catx-faq{list-style:none;padding:0;margin:0}
  .catx-faq > li{border-bottom:1px solid var(--line)}
  .catx-faq > li:first-child{border-top:1px solid var(--line)}
  .catx-faq summary{
    cursor:pointer;list-style:none;padding:18px 32px 18px 0;position:relative;
    font-size:var(--t-small);font-weight:500;color:var(--ink);letter-spacing:.005em;
  }
  .catx-faq summary::-webkit-details-marker{display:none}
  .catx-faq summary::after{
    content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
    font-size:var(--t-h6);color:var(--muted);font-weight:400;
  }
  .catx-faq details[open] summary::after{content:"−";color:var(--accent-ink)}
  .catx-faq details[open] summary{color:var(--accent-ink)}
  .catx-faq details > div{padding:0 28px 22px 0;font-size:var(--t-small);color:var(--body);line-height:1.65}

  /* Popular categories — flat link grid */
  .catx-popcats{padding:80px 0;border-top:1px solid var(--line)}
  .catx-popcats h2{
    font-family:var(--font-display);
    font-size:clamp(26px,3vw,36px);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.015em);line-height:1.05;margin:0 0 36px;
  }
  .catx-popcats-grid{display:grid;grid-template-columns:1fr;gap:36px}
  @media (min-width:600px){.catx-popcats-grid{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){.catx-popcats-grid{grid-template-columns:repeat(4,1fr)}}
  .catx-popcats-grid h3{
    font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tracking-widest);text-transform:uppercase;
    color:var(--muted);margin:0 0 16px;
  }
  .catx-popcats-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:var(--t-caption)}
  /* min-height:44px tap target on popular category links */
  .catx-popcats-grid a{color:var(--ink);cursor:pointer;display:flex;align-items:center;min-height:44px}
  .catx-popcats-grid a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

  /* Related categories carousel */
  .catx-relcats-wrap{padding:64px 0 96px;border-top:1px solid var(--line)}
  .catx-relcats{margin-right:calc(50% - 50vw)}
  .catx-relcats-track{
    display:flex;gap:14px;overflow-x:auto;list-style:none;margin:0;
    padding:0 var(--pad) 12px 0;scrollbar-width:thin;scroll-snap-type:x proximity;
  }
  .catx-relcats-track > li{flex:0 0 220px;scroll-snap-align:start}
  /* min-height:44px tap target on related cat tiles */
  .catx-relcat{display:flex;flex-direction:column;gap:10px;color:inherit;cursor:pointer;min-height:44px}
  .catx-relcat .ph{aspect-ratio:4/5}
  .catx-relcat b{font-size:var(--t-caption);font-weight:500;color:var(--ink);letter-spacing:.01em}
  .catx-relcat small{font-size:var(--t-micro);color:var(--muted);letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums}
  .catx-relcat:hover b{text-decoration:underline;text-underline-offset:3px}

  @media (max-width:768px){
    .catx-title{font-size:var(--t-h2)}
    .catx-layout{padding-bottom:48px}
    .catx-intro-wrap{padding-top:24px}
    .catx-intro{padding-bottom:32px;gap:28px}
  }



  /* ============ CATALOG PAGE — v2 fixes (Roman comments) ============ */
  .catx-shell-ultra{max-width:var(--w-shell-ultra);margin:0 auto;padding:0 var(--pad)}

  /* (9) Restore horizontal padding on clamped intro/SEO/popcats/relcats blocks */
  .catx-intro-wrap{padding:36px var(--pad) 0}
  .catx-seo-wrap{padding:80px var(--pad) 24px}
  .catx-popcats{padding:80px var(--pad)}
  .catx-relcats-wrap{padding:64px var(--pad) 96px}

  /* (8) Compact intro: breadcrumb stacked above H1 inside the title column */
  .catx-intro .catx-breadcrumb{margin:0 0 18px}

  /* (7) 3:4 ratio for subcat & relcat tiles */
  .catx-subtile .ph,
  .catx-relcat .ph{aspect-ratio:3/4}

  /* (4) Light bg on filter chips */
  .catx-chip{background:var(--paper-2)}

  /* (5)+(6) Controls — equal heights; sort first then photosize */
  /* min-height:44px for tap-target compliance (was 36px/34px — below threshold) */
  .catx-controls .catx-cbtn,
  .catx-controls .catx-sort,
  .catx-controls .catx-photosize{height:44px;min-height:44px;line-height:1;box-sizing:border-box}
  .catx-controls .catx-cbtn{padding:0 14px;display:inline-flex;align-items:center}
  .catx-controls .catx-sort{padding:0 32px 0 14px}
  .catx-controls .catx-photosize button{height:44px;min-height:44px;width:44px}

  /* (10) Sidebar right padding */
  .catx-sidebar{padding-right:14px}

  /* (1) Wishlist button — inactive: icon-only, no bg; hover: white bg.
     SVG filter is a dual drop-shadow (white halo + soft black) — the icon-over-photo
     legibility pattern: white lifts the stroke off dark fabric, black grounds it on
     bright fabric. Hover removes the filter because the white background takes over the job. */
  .catx-grid .card .wish{background:transparent;box-shadow:none}
  .catx-grid .card .wish svg{filter:drop-shadow(0 1px 2px rgba(255,255,255,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.15))}
  .catx-grid .card .wish:hover{background:var(--surface-translucent)}
  .catx-grid .card .wish:hover svg{filter:none}

  /* (2) Card meta — title L · price R (stacked, right-aligned), sizes/quickadd same cell */
  .catx-grid > li{list-style:none;isolation:isolate}
  .catx-grid .card{position:relative}
  .catx-grid .card .meta{
    position:relative;padding:12px 0 6px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px;row-gap:8px;align-items:start;
  }
  .catx-grid .card .meta .title{
    grid-column:1;grid-row:1;
    font-size:var(--t-caption);line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:.005em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(13px * 1.35 * 2);
  }
  .catx-grid .card .meta .price{
    grid-column:2;grid-row:1;
    display:flex;flex-direction:column;align-items:flex-end;gap:2px;
    white-space:nowrap;text-align:right;
  }
  .catx-grid .card .meta .price .now{font-size:var(--t-caption);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
  .catx-grid .card .meta .price .now.sale-now{color:var(--accent-ink)}
  .catx-grid .card .meta .price .was{font-size:var(--t-nano);color:var(--muted);text-decoration:line-through;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.2}
  .catx-grid .card .meta .sizes{
    grid-column:1 / -1;grid-row:2;
    display:flex;gap:6px;flex-wrap:wrap;align-content:flex-start;
    transition:opacity .15s ease-out;
  }
  .catx-grid .card .meta .sizes span{
    font-size:var(--t-nano);letter-spacing:var(--tracking-wide);color:var(--muted);
    padding:3px 7px;border:1px solid var(--line);border-radius:var(--radius-xs);min-width:30px;
    text-align:center;font-variant-numeric:tabular-nums;line-height:1.2;
  }
  .catx-grid .card .meta .sizes span.out{text-decoration:line-through;opacity:.5}
  .catx-grid .card .quickadd{
    position:static;grid-column:1 / -1;grid-row:2;
    background:transparent;border:0;padding:0;
    display:flex;flex-direction:column;gap:6px;
    opacity:0;pointer-events:none;transform:translateY(2px);
    transition:opacity .18s ease-out, transform .18s ease-out;z-index:2;
  }
  .catx-grid .card .quickadd > span:first-child{
    font-size:var(--t-super-nano);letter-spacing:var(--tracking-widest);text-transform:uppercase;font-weight:600;
    color:var(--muted);background:transparent;padding:0;
  }
  .catx-grid .card .quickadd-sizes{display:flex;gap:5px;flex-wrap:wrap}
  .catx-grid .card .quickadd-sizes span{
    padding:7px 10px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
    border-radius:var(--radius-xs);font-size:var(--t-nano);letter-spacing:var(--tracking-wide);cursor:pointer;
    min-width:36px;text-align:center;font-variant-numeric:tabular-nums;line-height:1;
  }
  .catx-grid .card .quickadd-sizes span:hover{background:var(--ink);color:var(--cta-fg)}
  .catx-grid .card:hover .quickadd{opacity:1;pointer-events:auto;transform:translateY(0)}
  .catx-grid .card:hover .meta .sizes{opacity:0;pointer-events:none}
  .catx-grid .card:hover{z-index:5}

  /* (11) Sidebar/grid block ultra-bleed; sidebar 280px */
  @media (min-width:1024px){
    .catx-shell-ultra .catx-layout{grid-template-columns:280px minmax(0,1fr);gap:48px}
  }

  /* ============ EMPTY STATE (catalog-1-empty.html) ============
   * Replaces the product grid + pager with a centred empty-state hero
   * and a 3-4 card recommendation row. Filter sidebar stays — user
   * relaxes filters to recover the catalog.
   */
  .catx-empty-col{min-width:0;display:flex;flex-direction:column;gap:48px}
  .catx-empty{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:14px;padding:80px 24px;border:1px dashed var(--line);background:var(--paper);
  }
  .catx-empty__icon{
    width:88px;height:88px;border-radius:50%;
    background:var(--paper-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);margin-bottom:8px;
  }
  .catx-empty__title{
    font-family:var(--font-display);
    font-size:clamp(28px,3.5vw,40px);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.02em);
    line-height:1.05;margin:0;
  }
  .catx-empty__lede{
    color:var(--body);font-size:var(--t-body);line-height:var(--lh-body);
    margin:0;max-width:54ch;
  }
  .catx-empty__actions{
    display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
  }
  .catx-empty__actions .catx-btn,
  .catx-empty__actions .catx-btn-ghost{
    border:1px solid var(--ink);
    padding:12px 22px;font-size:var(--t-micro);font-family:inherit;
    letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:600;
    cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  .catx-empty__actions .catx-btn{ background:var(--cta-bg);color:var(--cta-fg); }
  .catx-empty__actions .catx-btn:hover{ background:var(--cta-bg-hover); }
  .catx-empty__actions .catx-btn-ghost{ background:transparent;color:var(--ink); }
  .catx-empty__actions .catx-btn-ghost:hover{ background:var(--ink);color:var(--cta-fg); }
  .catx-empty__tips{
    list-style:disc;margin:18px 0 0;padding:0 0 0 22px;
    font-size:var(--t-caption);color:var(--body);line-height:1.7;
    max-width:60ch;text-align:left;
  }
  .catx-empty__tips a{color:var(--ink);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;min-width:44px}

  .catx-empty-recs__head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:14px;margin:0 0 18px;padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .catx-empty-recs__head h2{
    font-family:var(--font-display);
    font-size:clamp(22px,2.6vw,30px);font-weight:var(--weight-display,500);
    letter-spacing:var(--tracking-display,-.015em);
    margin:0;line-height:1.15;
  }
  .catx-empty-recs__more{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--ink);padding-bottom:2px;
    /* min-height:44px tap target */
    display:inline-flex;align-items:center;min-height:44px;
  }
  .catx-empty-recs__more:hover{ color:var(--accent-ink);border-bottom-color:var(--accent-ink); }

/* ───────── Filter overlay — base rules (not scoped to mobile MQ so tap-target
   checks at all breakpoints see 44px min even when overlay is off-screen) ───────── */
.catalog-filter-mobile .overlay-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: var(--t-h5);
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}

/* ───────── Mobile (≤ 767px) — filter as full-screen overlay (Wave-06b Phase 3) ───────── */
@media (max-width: 767px) {
  .catalog-filter-mobile {
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: var(--z-dialog);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
  }

  .catalog-filter-mobile[aria-hidden="false"] {
    transform: translateX(0);
  }

  .catalog-filter-mobile .overlay-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-4);
    border-block-end: 1px solid var(--line);
    position: sticky;
    inset-block-start: 0;
    background: var(--paper);
  }

  .catalog-filter-mobile .overlay-head h2 {
    font-size: var(--t-caption);
    font-weight: 600;
    margin: 0;
    letter-spacing: .01em;
  }

  .catalog-filter-mobile .overlay-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    font-size: var(--t-h5);
    cursor: pointer;
    color: var(--ink);
    padding: 0;
  }

  .catalog-filter-mobile .overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
  }

  .catalog-filter-mobile .overlay-foot {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-block-start: 1px solid var(--line);
    position: sticky;
    inset-block-end: 0;
    background: var(--paper);
  }

  .catalog-filter-mobile .btn-secondary,
  .catalog-filter-mobile .btn-primary {
    flex: 1;
    min-height: 44px;
    padding: 0 var(--s-3);
    border-radius: var(--radius-xs);
    font-size: var(--t-caption);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .01em;
  }

  .catalog-filter-mobile .btn-secondary {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
  }

  .catalog-filter-mobile .btn-secondary:hover { border-color: var(--ink); }

  .catalog-filter-mobile .btn-primary {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cta-fg);
  }

  .catalog-filter-mobile .btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
}

/* ───────── Grid breakpoint additions (Wave-06b) ───────── */
@media (max-width: 599px) {
  .catx-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
}
/* ===== 30-pages/checkout.css ===== */
/* ===== 30-pages/checkout.css — page-specific styles for the 4 checkout pages ===== */
/* Source: extracted from v0.2/Onlady Checkout Page.html inline <style> (4-mode mockup). */
/* All rules scoped to `body[data-page^="checkout"]` so the unscoped .btn-primary,
   .reel-section, .pcard, etc. in pdp.css don't override checkout buttons (pdp.css loads
   later alphabetically). The checkout pages use data-page="checkout-empty|basket|order|thanks".  */

body[data-page^="checkout"]{
  /* Aside (sticky order summary) column width */
  --aside-w:380px;

  /* Status palette (--c-success-*, --c-warn-*, --c-info-*, --c-error-*,
     --c-stock-*) was promoted to 00-tokens.css on 2026-05-18. Checkout
     inherits the canonical values; no per-page redeclaration needed. */
}

/* CTA style override (matches v0.2 — separate from pink intensity) */
body[data-page^="checkout"][data-cta="ink"]  { --cta-bg:var(--ink); --cta-fg:#fff; }
body[data-page^="checkout"][data-cta="pink"] { --cta-bg:var(--pink); --cta-fg:#fff; }

/* ============================================================
   BREADCRUMB + PAGE TITLE
   ============================================================ */
body[data-page^="checkout"] .page{padding:24px 0 var(--space-section)}
body[data-page^="checkout"] .crumbs{
  font-size:var(--t-caption);color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:.01em;
  margin-bottom:18px;
}
body[data-page^="checkout"] .crumbs a{color:var(--muted);transition:color .15s;cursor:pointer}
body[data-page^="checkout"] .crumbs a:hover{color:var(--ink)}
body[data-page^="checkout"] .crumbs .sep{opacity:.6}
body[data-page^="checkout"] .crumbs .here{color:var(--ink);font-weight:500}

body[data-page^="checkout"] .ptitle{
  font-family:var(--font-display);
  font-size:var(--t-h1);
  font-weight:var(--weight-display);letter-spacing:var(--tracking-display);
  line-height:1.05;color:var(--ink);margin:0;
}
body[data-page^="checkout"] .pintro{
  font-size:var(--t-body);color:var(--body);max-width:560px;margin:10px 0 0;line-height:1.55;
}
body[data-page^="checkout"] .ptitle-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:var(--s-7)}

/* ============================================================
   LAYOUT — 2 column: main + sticky aside
   ============================================================ */
body[data-page^="checkout"] .layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap:var(--s-7);
  align-items:start;
}
body[data-page^="checkout"] .layout-main{min-width:0}
body[data-page^="checkout"] .layout-aside{position:sticky;top:24px}

/* ============================================================
   BUTTONS — scoped overrides; pdp.css's .btn-primary is unscoped
   so we need higher specificity to win on checkout pages.
   ============================================================ */
body[data-page^="checkout"] .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:var(--t-caption);font-weight:600;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;cursor:pointer;
  transition:all .2s;border-radius:var(--radius-s);
}
body[data-page^="checkout"] .btn:hover{border-color:var(--ink);background:var(--paper-2)}
body[data-page^="checkout"] .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
body[data-page^="checkout"] .btn-primary{
  background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg);
  padding:16px 22px;
  flex:none;            /* override pdp.css `.btn-primary{flex:1}` */
}
body[data-page^="checkout"] .btn-primary:hover{filter:brightness(.92);background:var(--cta-bg);color:var(--cta-fg)}
body[data-page^="checkout"] .btn-primary[disabled],
body[data-page^="checkout"] .btn-primary[aria-disabled="true"]{
  background:var(--cta-bg-disabled);border-color:var(--cta-bg-disabled);color:var(--cta-fg);cursor:not-allowed;
}
body[data-page^="checkout"] .btn-ghost{background:transparent;border-color:var(--line-2)}
body[data-page^="checkout"] .btn-block{width:100%}
body[data-page^="checkout"] .btn-link{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  font-size:var(--t-caption);color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:.01em;font-weight:500;
  border-bottom:1px solid var(--line-2);padding-bottom:1px;
}
body[data-page^="checkout"] .btn-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ============================================================
   MODE A — EMPTY CART
   ============================================================ */
body[data-page="checkout-empty"] .empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5);
  background:transparent;border:0;padding:var(--s-6) 0 var(--s-5);margin:0;
  max-width:var(--w-narrow, 640px);
}
body[data-page="checkout-empty"] .empty h1{
  font-family:var(--font-display);
  font-size:var(--t-h1-hero);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:1.02;margin:0;
}
body[data-page="checkout-empty"] .empty h1 em{font-style:normal;color:var(--accent)}
body[data-page="checkout-empty"] .empty p.lede{font-size:var(--t-body);color:var(--body);line-height:1.55;margin:0;max-width:48ch}
body[data-page="checkout-empty"] .empty-cta-row{display:flex;flex-wrap:nowrap;gap:10px;margin:var(--s-3) 0 0;align-items:stretch}
body[data-page="checkout-empty"] .empty-cta-row .btn{white-space:nowrap}
body[data-page="checkout-empty"] [data-behavior="mode-empty-cart"] + .reel-section{margin-block-start:var(--s-6)}

/* ============================================================
   MODE B — CART ACCORDIONS (promo + comment, above cart-foot)
   ============================================================ */
body[data-page^="checkout"] .cart-acc{
  border:1px solid var(--line);background:var(--paper);
  margin-block-start:var(--s-3);transition:border-color .15s;
}
body[data-page^="checkout"] .cart-acc[open]{border-color:var(--ink-2)}
body[data-page^="checkout"] .cart-acc + .cart-acc{margin-block-start:-1px}
body[data-page^="checkout"] .cart-acc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--ink);font-weight:600;
}
body[data-page^="checkout"] .cart-acc > summary::-webkit-details-marker{display:none}
body[data-page^="checkout"] .cart-acc > summary .num{color:var(--pink-ink)}
body[data-page^="checkout"] .cart-acc > summary .lede{
  margin-left:auto;font-family:var(--font-sans);font-size:var(--t-caption);font-weight:400;
  color:var(--muted);letter-spacing:.01em;text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;
}
body[data-page^="checkout"] .cart-acc > summary::after{
  content:"+";margin-left:14px;font-family:var(--font-sans);font-size:var(--t-h5);
  color:var(--muted);font-weight:300;line-height:1;flex:none;transition:transform .15s;
}
body[data-page^="checkout"] .cart-acc[open] > summary::after{transform:rotate(45deg);color:var(--ink)}
body[data-page^="checkout"] .cart-acc[open] > summary{border-bottom:1px solid var(--line)}
body[data-page^="checkout"] .cart-acc .ac-body{padding:var(--s-4) 18px var(--s-5);display:flex;flex-direction:column;gap:10px}
body[data-page^="checkout"] .cart-acc .ac-body p.lede-full{font-size:var(--t-caption);color:var(--body);line-height:1.55;margin:0}
body[data-page^="checkout"] .cart-acc .ac-body .row{display:flex;gap:8px}
body[data-page^="checkout"] .cart-acc input[type="text"],
body[data-page^="checkout"] .cart-acc textarea{
  flex:1;min-width:0;border:1px solid var(--line);padding:11px 12px;
  font:inherit;font-size:var(--t-small);background:var(--paper);color:var(--ink);
  outline:none;border-radius:var(--radius-s);
}
body[data-page^="checkout"] .cart-acc input[type="text"]:focus-visible,
body[data-page^="checkout"] .cart-acc textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0}
body[data-page^="checkout"] .cart-acc textarea{min-height:84px;resize:vertical;width:100%}
body[data-page^="checkout"] .cart-acc input:focus,
body[data-page^="checkout"] .cart-acc textarea:focus{border-color:var(--ink)}
body[data-page^="checkout"] .cart-acc small.hint{font-size:var(--t-nano);color:var(--muted);line-height:1.45}
body[data-page^="checkout"] .cart-acc .promo-applied{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--c-success-bg);border:1px solid var(--c-success-border);color:var(--c-success-ink);
  padding:10px 14px;font-size:var(--t-caption);
}
body[data-page^="checkout"] .cart-acc .promo-applied b{font-size:var(--t-caption);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600}
body[data-page^="checkout"] .cart-acc .promo-applied .x{background:none;border:0;cursor:pointer;color:inherit;font-size:var(--t-small);line-height:1}

/* Full-width cart action band, promoted across main + aside */
body[data-page^="checkout"] .cart-foot--full{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:var(--s-5) 0;margin-block-start:var(--s-5);
  border-top:1px solid var(--ink);
}
body[data-page^="checkout"] .cart-foot--full a{font-size:var(--t-caption);color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:1px;cursor:pointer}
body[data-page^="checkout"] .cart-foot--full a:hover{color:var(--ink);border-bottom-color:var(--ink)}
body[data-page^="checkout"] .cart-foot--full .clear{color:var(--muted)}
body[data-page^="checkout"] .cart-foot--full .meta{
  font-size:var(--t-caption);color:var(--muted);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;
}
body[data-page^="checkout"] .cart-foot--full .meta b{color:var(--ink);font-weight:600}

/* ============================================================
   SMS CONFIRMATION (used in Mode D — sits inside thanks-hero)
   ============================================================ */
body[data-page="checkout-thanks"] .sms-confirm{
  margin-top:var(--s-2);padding:var(--s-4) var(--s-4) var(--s-4);
  background:var(--paper-2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-s);
  align-self:stretch;
}
body[data-page="checkout-thanks"] .sms-confirm h4{
  margin:0;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--ink);font-weight:600;
  display:flex;align-items:center;gap:8px;
}
body[data-page="checkout-thanks"] .sms-confirm h4 svg{width:14px;height:14px;color:var(--accent);flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
body[data-page="checkout-thanks"] .sms-confirm p{font-size:var(--t-caption);color:var(--body);line-height:1.5;margin:0}
body[data-page="checkout-thanks"] .sms-confirm .row{display:flex;gap:8px;margin-top:2px}
body[data-page="checkout-thanks"] .sms-confirm input{
  flex:1;min-width:0;border:1px solid var(--line);padding:11px 12px;font:inherit;font-size:var(--t-small);
  background:var(--paper);color:var(--ink);outline:none;border-radius:var(--radius-s);
}
body[data-page="checkout-thanks"] .sms-confirm input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
body[data-page="checkout-thanks"] .sms-confirm input:focus{border-color:var(--ink)}
body[data-page="checkout-thanks"] .sms-confirm .btn{padding:11px 16px;font-size:var(--t-nano)}
body[data-page="checkout-thanks"] .sms-confirm small{font-size:var(--t-nano);color:var(--muted);line-height:1.45}

/* ============================================================
   VERTICAL TIMELINE (Mode D)
   ============================================================ */
body[data-page="checkout-thanks"] .timeline-vert{
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);
  padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-4);position:relative;
}
body[data-page="checkout-thanks"] .timeline-vert .tv-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
body[data-page="checkout-thanks"] .timeline-vert .tv-head h4{
  margin:0;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--muted);font-weight:600;
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li{
  display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;position:relative;align-items:start;
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li + li{border-top:1px solid var(--line)}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li::before{
  content:"";position:absolute;left:16px;top:48px;bottom:-2px;width:1.5px;
  background:var(--line);
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li:last-child::before{display:none}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .bubble{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--t-caption);color:var(--muted);
  flex:none;position:relative;z-index:1;
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li[data-status="done"] .bubble{background:var(--ink);color:var(--cta-fg);border-color:var(--ink)}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li[data-status="current"] .bubble{background:var(--accent);color:var(--cta-fg);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .ti{font-size:var(--t-small);font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.25}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .meta{font-size:var(--t-micro);color:var(--muted);line-height:1.5}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .meta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .meta-row .pair{display:flex;flex-direction:column;gap:1px}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .meta-row .pair small{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;color:var(--muted);
}
body[data-page="checkout-thanks"] .timeline-vert .tv-list .meta-row .pair span{font-size:var(--t-caption);color:var(--ink);font-weight:500}
body[data-page="checkout-thanks"] .timeline-vert .tv-list li[data-status="pending"] .ti{color:var(--muted)}

/* quick-buy row layout fix — keep submit button from bleeding past the aside */
body[data-page^="checkout"] .quickbuy-panel .row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
body[data-page^="checkout"] .quickbuy-panel .row input{flex:1 1 100%;min-width:0}
body[data-page^="checkout"] .quickbuy-panel .row .btn-primary{
  flex:1 1 auto;padding:13px 16px;font-size:var(--t-micro);letter-spacing:var(--tracking-mono);
}

/* ============================================================
   CART LINE ITEMS (Mode B)
   ============================================================ */
body[data-page="checkout-basket"] .cart-head{
  display:grid;grid-template-columns: 100px 1fr 130px 110px 110px 36px;
  gap:var(--s-4);align-items:center;
  padding:12px 0 14px;border-bottom:1px solid var(--ink);
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;color:var(--muted);
}
body[data-page="checkout-basket"] .cart-head .right{text-align:right}
body[data-page="checkout-basket"] .cart-head .center{text-align:center}
body[data-page="checkout-basket"] .cart-list{list-style:none;margin:0;padding:0}
body[data-page="checkout-basket"] .cart-line{
  display:grid;grid-template-columns: 100px 1fr 130px 110px 110px 36px;
  gap:var(--s-4);align-items:center;
  padding:var(--s-5) 0;border-bottom:1px solid var(--line);
}
body[data-page="checkout-basket"] .cart-line .thumb{
  width:100px;aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden;
}
body[data-page="checkout-basket"] .cart-line .thumb .ph{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%),
    radial-gradient(ellipse at var(--ph-x,55%) var(--ph-y,40%), rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 60%);
}
body[data-page="checkout-basket"] .cart-line .thumb .crop{
  position:absolute;left:6px;right:6px;bottom:6px;
  font-size:8.5px;color:rgba(0,0,0,.4);letter-spacing:var(--tracking-wide);
  font-variant-numeric:tabular-nums;
  display:flex;justify-content:space-between;
}
body[data-page="checkout-basket"] .cart-line .info .ttl{font-size:var(--t-small);font-weight:500;color:var(--ink);line-height:1.35;margin:0 0 6px}
body[data-page="checkout-basket"] .cart-line .info .attrs{
  display:flex;flex-wrap:wrap;gap:8px 14px;font-size:var(--t-micro);color:var(--body);
}
body[data-page="checkout-basket"] .cart-line .info .attrs i{font-style:normal;color:var(--muted)}
body[data-page="checkout-basket"] .cart-line .info .sku{
  font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wide);
  font-variant-numeric:tabular-nums;margin-top:8px;
}
body[data-page="checkout-basket"] .cart-line .info .stock{
  margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-micro);color:var(--c-stock-in);font-weight:500;
}
body[data-page="checkout-basket"] .cart-line .info .stock .sd{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
body[data-page="checkout-basket"] .cart-line .info .stock.warn{color:var(--c-stock-warn)}
body[data-page="checkout-basket"] .cart-line .info .stock.oos{color:var(--c-error-ink)}

body[data-page^="checkout"] .qty{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);background:var(--paper);
  border-radius:var(--radius-s);height:38px;
}
body[data-page^="checkout"] .qty button{
  width:34px;height:36px;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:var(--t-body);
}
body[data-page^="checkout"] .qty button:hover{background:var(--paper-2)}
body[data-page^="checkout"] .qty input{
  width:42px;height:36px;border:0;text-align:center;font:inherit;font-variant-numeric:tabular-nums;
  background:transparent;color:var(--ink);
  -moz-appearance:textfield;
}
body[data-page^="checkout"] .qty input::-webkit-outer-spin-button,
body[data-page^="checkout"] .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

body[data-page="checkout-basket"] .cart-line .unit{text-align:right;font-size:var(--t-caption);color:var(--muted);font-variant-numeric:tabular-nums}
body[data-page="checkout-basket"] .cart-line .total{text-align:right;font-size:var(--t-body);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
body[data-page="checkout-basket"] .cart-line .remove{
  width:32px;height:32px;border:1px solid var(--line);background:var(--paper);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
  transition:all .15s;
}
body[data-page="checkout-basket"] .cart-line .remove:hover{border-color:var(--ink);color:var(--ink)}
body[data-page="checkout-basket"] .cart-line .remove svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}

body[data-page="checkout-basket"] .cart-line.is-oos{background:linear-gradient(180deg, #FBF2F2 0%, transparent 100%)}
body[data-page="checkout-basket"] .cart-line.is-oos .info .ttl{color:var(--body)}
body[data-page="checkout-basket"] .cart-line.is-oos .qty{opacity:.4;pointer-events:none}

body[data-page="checkout-basket"] .cart-line.is-gift{background:linear-gradient(180deg, #F1F8F2 0%, transparent 100%)}
body[data-page="checkout-basket"] .cart-line.is-gift .total{color:var(--c-success-ink)}
body[data-page="checkout-basket"] .gift-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--c-success-bg);color:var(--c-success-ink);border:1px solid var(--c-success-border);
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;
  padding:3px 8px;border-radius:var(--radius-pill);margin-bottom:8px;
}
body[data-page="checkout-basket"] .gift-tag::before{content:"\2665";font-family:var(--font-sans)}

body[data-page="checkout-basket"] .cart-foot{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:var(--s-5) 0;
}
body[data-page="checkout-basket"] .cart-foot a{font-size:var(--t-caption);color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:1px}
body[data-page="checkout-basket"] .cart-foot a:hover{color:var(--ink);border-bottom-color:var(--ink)}
body[data-page="checkout-basket"] .cart-foot .clear{color:var(--muted)}

/* Promo + quick-buy block */
body[data-page="checkout-basket"] .util-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-5);
}
body[data-page^="checkout"] .uc{
  border:1px solid var(--line);background:var(--paper);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);
}
body[data-page^="checkout"] .uc h4{
  margin:0;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--muted);font-weight:600;
}
body[data-page^="checkout"] .uc h4 .num{color:var(--accent);margin-right:6px}
body[data-page^="checkout"] .uc .lede{font-size:var(--t-caption);color:var(--body);line-height:1.5;margin:0}
body[data-page^="checkout"] .uc .row{display:flex;gap:8px}
body[data-page^="checkout"] .uc input{
  flex:1;min-width:0;border:1px solid var(--line);padding:11px 12px;
  font-family:inherit;font-size:var(--t-small);background:var(--paper);color:var(--ink);
  outline:none;border-radius:var(--radius-s);transition:border-color .15s;
}
body[data-page^="checkout"] .uc input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
body[data-page^="checkout"] .uc input:focus{border-color:var(--ink)}
body[data-page^="checkout"] .uc small{font-size:var(--t-nano);color:var(--muted);letter-spacing:.01em}

/* ============================================================
   ORDER SUMMARY (aside)
   ============================================================ */
body[data-page^="checkout"] .summary{
  border:1px solid var(--ink);background:var(--paper);padding:var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-4);
}
body[data-page^="checkout"] .summary h3{
  margin:0;font-family:var(--font-display);font-size:var(--t-h6);font-weight:var(--weight-display,600);
  letter-spacing:var(--tracking-display,-.01em);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
body[data-page^="checkout"] .summary h3 small{font-size:var(--t-caption);color:var(--muted);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600}

body[data-page^="checkout"] .summary-items{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line);
}
body[data-page^="checkout"] .summary-items li{
  display:grid;grid-template-columns: 36px 1fr auto;gap:10px;align-items:center;font-size:var(--t-caption);color:var(--ink-2);
}
body[data-page^="checkout"] .summary-items li .ti{
  width:36px;aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden;
}
body[data-page^="checkout"] .summary-items li .ti .ph{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.08), transparent 60%)}
body[data-page^="checkout"] .summary-items li .ti .qb{
  position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--cta-fg);
  width:18px;height:18px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-super-nano);font-weight:600;font-variant-numeric:tabular-nums;
}
body[data-page^="checkout"] .summary-items li .tx b{display:block;font-weight:500;color:var(--ink);font-size:var(--t-caption);line-height:1.3}
body[data-page^="checkout"] .summary-items li .tx small{font-size:var(--t-nano);color:var(--muted)}
body[data-page^="checkout"] .summary-items li .v{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--t-caption);color:var(--ink);text-align:right}
body[data-page^="checkout"] .summary-items li.gift .v{color:var(--c-success-ink)}

body[data-page^="checkout"] .summary-lines{
  list-style:none;margin:0;padding:var(--s-3) 0;display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid var(--line);
}
body[data-page^="checkout"] .summary-lines li{
  display:flex;justify-content:space-between;gap:10px;font-size:var(--t-caption);color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
body[data-page^="checkout"] .summary-lines li.muted{color:var(--muted)}
body[data-page^="checkout"] .summary-lines li.disc{color:var(--accent-ink);font-weight:500}

body[data-page^="checkout"] .summary-grand{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:var(--s-3) 0 0;
  font-variant-numeric:tabular-nums;
}
body[data-page^="checkout"] .summary-grand .lbl{font-size:var(--t-caption);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600;color:var(--muted)}
body[data-page^="checkout"] .summary-grand .v{font-family:var(--font-display);font-size:var(--t-h3);font-weight:var(--weight-display,600);letter-spacing:var(--tracking-display,-.02em);color:var(--ink)}
body[data-page^="checkout"] .summary-grand .v .cur{font-size:.65em;font-weight:400;color:var(--ink-2);margin-left:4px}

body[data-page^="checkout"] .summary-fineprint{font-size:var(--t-micro);color:var(--muted);line-height:1.45;margin:0}
body[data-page^="checkout"] .summary-fineprint--ssl{
  display:flex;align-items:center;gap:var(--s-2);margin-top:6px;color:var(--ink-2);
}
body[data-page^="checkout"] .summary-fineprint--ssl svg{flex:none}
body[data-page^="checkout"] .summary-li-note{font-size:var(--t-nano);color:var(--muted)}

body[data-page^="checkout"] .quick-row{display:flex;flex-direction:column;gap:8px}
body[data-page^="checkout"] .quickbuy-panel{
  background:var(--paper-2);border:1px solid var(--line);padding:var(--s-4);
  display:flex;flex-direction:column;gap:10px;
}
body[data-page^="checkout"] .quickbuy-panel input{
  border:1px solid var(--line);padding:11px 12px;font:inherit;font-size:var(--t-small);background:var(--paper);
  outline:none;border-radius:var(--radius-s);
}
body[data-page^="checkout"] .quickbuy-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
body[data-page^="checkout"] .quickbuy-panel input:focus{border-color:var(--ink)}
body[data-page^="checkout"] .quickbuy-panel .row{display:flex;gap:8px}
body[data-page^="checkout"] .quickbuy-panel small{font-size:var(--t-nano);color:var(--muted);line-height:1.45}
body[data-page^="checkout"] .quickbuy-panel .lede{font-size:var(--t-caption);color:var(--body);margin:0;line-height:1.45}
body[data-page^="checkout"] .quickbuy-panel .lede b{color:var(--ink)}
body[data-page^="checkout"] .quickbuy-panel .cancel{align-self:flex-start;background:none;border:0;color:var(--muted);cursor:pointer;font-size:var(--t-micro);text-decoration:underline;padding:0}

/* ============================================================
   STEP INDICATOR (Mode C)
   ============================================================ */
body[data-page="checkout-order"] .stepbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:var(--s-7);
  border:1px solid var(--line);background:var(--paper);
}
body[data-page="checkout-order"] .stepbar .sb-step{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-right:1px solid var(--line);
  position:relative;cursor:pointer;
}
body[data-page="checkout-order"] .stepbar .sb-step:last-child{border-right:0}
body[data-page="checkout-order"] .stepbar .sb-step .n{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-caption);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none;
}
body[data-page="checkout-order"] .stepbar .sb-step .t{display:flex;flex-direction:column;gap:1px;line-height:1.2;min-width:0}
body[data-page="checkout-order"] .stepbar .sb-step .t .lbl{font-size:var(--t-nano);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600;color:var(--muted)}
body[data-page="checkout-order"] .stepbar .sb-step .t .ti{font-size:var(--t-caption);font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="done"] .n{background:var(--ink);color:var(--cta-fg);border-color:var(--ink)}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="done"] .n::before{content:"\2713";font-size:var(--t-caption)}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="done"] .n span{display:none}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="current"] .n{background:var(--accent);color:var(--cta-fg);border-color:var(--accent)}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="current"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}
body[data-page="checkout-order"] .stepbar .sb-step[data-state="pending"]{opacity:.65}

/* ============================================================
   STEP ACCORDION (Mode C)
   ============================================================ */
body[data-page="checkout-order"] .steps{display:flex;flex-direction:column;gap:var(--s-4)}
body[data-page="checkout-order"] .step{
  border:1px solid var(--line);background:var(--paper);
  transition:border-color .15s;
}
body[data-page="checkout-order"] .step[open]{border-color:var(--ink)}
body[data-page="checkout-order"] .step > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px var(--s-5);background:var(--paper-2);
  transition:background .15s;
}
body[data-page="checkout-order"] .step[open] > summary{background:var(--paper);border-bottom:1px solid var(--line)}
body[data-page="checkout-order"] .step > summary::-webkit-details-marker{display:none}
body[data-page="checkout-order"] .step .s-n{
  width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cta-fg);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-caption);font-weight:600;flex:none;
}
body[data-page="checkout-order"] .step[data-state="done"] .s-n{background:var(--c-success-ink)}
body[data-page="checkout-order"] .step[data-state="done"] .s-n::before{content:"\2713";font-size:var(--t-small)}
body[data-page="checkout-order"] .step[data-state="done"] .s-n span{display:none}
body[data-page="checkout-order"] .step .s-t{flex:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
body[data-page="checkout-order"] .step .s-t .title{font-family:var(--font-display);font-size:var(--t-h6);font-weight:var(--weight-display,600);letter-spacing:var(--tracking-display,-.01em);color:var(--ink)}
body[data-page="checkout-order"] .step .s-t .sub{font-size:var(--t-caption);color:var(--muted)}
body[data-page="checkout-order"] .step .s-edit{
  background:none;border:0;color:var(--ink-2);cursor:pointer;font-size:var(--t-caption);
  border-bottom:1px solid var(--line-2);padding-bottom:1px;
}
body[data-page="checkout-order"] .step .s-edit:hover{color:var(--ink);border-bottom-color:var(--ink)}
body[data-page="checkout-order"] .step .s-chev{
  width:20px;height:20px;color:var(--muted);transition:transform .15s;
}
body[data-page="checkout-order"] .step[open] .s-chev{transform:rotate(180deg)}
body[data-page="checkout-order"] .step .s-chev svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
body[data-page="checkout-order"] .step .body{padding:var(--s-6) var(--s-5)}
body[data-page="checkout-order"] .step .actions{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:var(--s-5);margin-top:var(--s-5);border-top:1px solid var(--line);
}

/* form primitives */
body[data-page="checkout-order"] .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)}
body[data-page="checkout-order"] .field > label{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;
}
body[data-page="checkout-order"] .field > label .req{color:var(--pink-ink);font-size:var(--t-super-nano)}
body[data-page="checkout-order"] .field > label .opt{color:var(--muted);font-size:var(--t-nano);font-weight:400}
body[data-page="checkout-order"] .field input[type="text"],
body[data-page="checkout-order"] .field input[type="tel"],
body[data-page="checkout-order"] .field input[type="email"],
body[data-page="checkout-order"] .field input[type="number"],
body[data-page="checkout-order"] .field textarea,
body[data-page="checkout-order"] .field select{
  border:1px solid var(--line);padding:13px 14px;font:inherit;font-size:var(--t-small);
  border-radius:var(--radius-s);background:var(--paper);color:var(--ink);outline:none;
  transition:border-color .15s;width:100%;
}
body[data-page="checkout-order"] .field input[type="text"]:focus-visible,
body[data-page="checkout-order"] .field input[type="tel"]:focus-visible,
body[data-page="checkout-order"] .field input[type="email"]:focus-visible,
body[data-page="checkout-order"] .field input[type="number"]:focus-visible,
body[data-page="checkout-order"] .field textarea:focus-visible,
body[data-page="checkout-order"] .field select:focus-visible{outline:2px solid var(--accent);outline-offset:0}
body[data-page="checkout-order"] .field input:focus,
body[data-page="checkout-order"] .field textarea:focus,
body[data-page="checkout-order"] .field select:focus{border-color:var(--ink)}
body[data-page="checkout-order"] .field textarea{min-height:88px;resize:vertical}
body[data-page="checkout-order"] .field .help{font-size:var(--t-micro);color:var(--muted);line-height:1.45;margin:0}
body[data-page="checkout-order"] .field .err{
  font-size:var(--t-micro);color:var(--c-error-ink);background:var(--c-error-bg);
  border:1px solid var(--c-error-border);padding:6px 10px;border-radius:var(--radius-s);
}
body[data-page="checkout-order"] .field-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
body[data-page="checkout-order"] .field-row.three{grid-template-columns: 2fr 1fr 1fr}

/* radio cards */
body[data-page="checkout-order"] .radios{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s-4)}
body[data-page="checkout-order"] .ro{
  display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--radius-s);cursor:pointer;transition:all .15s;
}
body[data-page="checkout-order"] .ro:hover{border-color:var(--ink-2)}
body[data-page="checkout-order"] .ro input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:50%;
  background:var(--paper);position:relative;margin:1px 0 0;cursor:pointer;
}
body[data-page="checkout-order"] .ro input[type="radio"]:checked{border-color:var(--ink)}
body[data-page="checkout-order"] .ro input[type="radio"]:checked::after{
  content:"";position:absolute;inset:3px;background:var(--ink);border-radius:50%;
}
body[data-page="checkout-order"] .ro:has(input:checked){border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
body[data-page="checkout-order"] .ro .ro-body{min-width:0;display:flex;flex-direction:column;gap:4px}
body[data-page="checkout-order"] .ro .ro-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body[data-page="checkout-order"] .ro .ro-top b{font-size:var(--t-small);font-weight:600;color:var(--ink)}
body[data-page="checkout-order"] .ro .ro-logo{
  width:50px;height:30px;border:1px solid var(--line);background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--ink-2);
  border-radius:var(--radius-s);font-weight:600;
}
body[data-page="checkout-order"] .ro .ro-logo.np{background:#FEE53A;color:var(--ink);border-color:#E0C800}
body[data-page="checkout-order"] .ro .ro-logo.up{background:#FFD401;color:#0A2240;border-color:#E0BC00}
body[data-page="checkout-order"] .ro .ro-logo.dhl{background:#FFCC00;color:#D40511;border-color:#E0B400}
body[data-page="checkout-order"] .ro .ro-logo.cash{background:var(--paper-2);color:var(--ink-2)}
/* Payment-provider logo variants — vendor brand colors, intentionally literal. */
body[data-page="checkout-order"] .ro .ro-logo.wfp{background:#0070BA;color:var(--cta-fg);border-color:#005A94}
body[data-page="checkout-order"] .ro .ro-logo.lq{background:#74B816;color:var(--cta-fg);border-color:#5B9100}
body[data-page="checkout-order"] .ro .ro-logo.installment{background:var(--cta-bg-hover);color:var(--cta-fg);border-color:var(--cta-bg-hover)}
body[data-page="checkout-order"] .ro .ro-note{font-size:var(--t-caption);color:var(--body);line-height:1.45}
body[data-page="checkout-order"] .ro .ro-eta{font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums;margin-top:2px}
body[data-page="checkout-order"] .ro .ro-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
body[data-page="checkout-order"] .ro .ro-cost{font-size:var(--t-body);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
body[data-page="checkout-order"] .ro .ro-cost--success{color:var(--c-success-ink)}
body[data-page="checkout-order"] .ro .ro-fields{
  grid-column:2 / span 2;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line);
  display:none;
}
body[data-page="checkout-order"] .ro:has(input:checked) .ro-fields{display:block}

/* tabs (delivery zone) */
body[data-page="checkout-order"] .tabs{
  display:flex;gap:2px;margin-bottom:var(--s-5);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
body[data-page="checkout-order"] .tabs .tab{
  padding:11px 18px;border:0;background:transparent;font:inherit;font-size:var(--t-caption);font-weight:500;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:.02em;
}
body[data-page="checkout-order"] .tabs .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
body[data-page="checkout-order"] .tabs .tab:hover{color:var(--ink)}
body[data-page="checkout-order"] .tabs .tab .ct{
  margin-left:6px;font-size:var(--t-nano);
  color:var(--muted);letter-spacing:var(--tracking-wide);
  font-variant-numeric:tabular-nums;
  background:var(--paper-2);padding:1px 6px;border-radius:var(--radius-pill);
}

body[data-page="checkout-order"] .intl-notice{
  border:1px dashed var(--line-2);background:var(--paper-2);padding:14px 16px;margin-top:var(--s-4);
  font-size:var(--t-caption);color:var(--body);line-height:1.55;border-radius:var(--radius-s);
}
body[data-page="checkout-order"] .intl-notice b{color:var(--ink)}

/* recipient-other reveal */
body[data-page="checkout-order"] .reveal-row{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:var(--s-3);
  background:var(--paper-2);border:1px dashed var(--line-2);cursor:pointer;
  border-radius:var(--radius-s);font-size:var(--t-caption);color:var(--ink-2);
}
body[data-page="checkout-order"] .reveal-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border:1.5px solid var(--line-2);background:var(--paper);
  border-radius:3px;position:relative;cursor:pointer;flex:none;
}
body[data-page="checkout-order"] .reveal-row input[type="checkbox"]:checked{border-color:var(--ink);background:var(--ink)}
body[data-page="checkout-order"] .reveal-row input[type="checkbox"]:checked::after{
  content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--cta-fg);font-size:var(--t-micro);
}
body[data-page="checkout-order"] .reveal-row b{color:var(--ink);font-weight:600}
body[data-page="checkout-order"] .reveal-row small{color:var(--muted);font-size:var(--t-micro)}
body[data-page="checkout-order"] .reveal-fields{margin-top:var(--s-3);display:none;padding:var(--s-4);background:var(--paper-2);border:1px dashed var(--line-2);border-radius:var(--radius-s)}
body[data-page="checkout-order"] .reveal-fields .help{margin-top:-2px;margin-bottom:var(--s-3)}
body[data-page="checkout-order"] .ro:has([data-rec="other"]:checked) .reveal-fields{display:block}

/* payment placeholder */
body[data-page="checkout-order"] .pay-gap{
  border:1px dashed var(--line-2);background:var(--paper-2);padding:var(--s-5);
  display:flex;gap:var(--s-4);align-items:flex-start;border-radius:var(--radius-s);
  margin-top:var(--s-4);
}
body[data-page="checkout-order"] .pay-gap .ico{
  width:44px;height:44px;border-radius:50%;background:var(--c-warn-bg);border:1px solid var(--c-warn-border);
  display:flex;align-items:center;justify-content:center;flex:none;color:#876300;font-size:var(--t-h6);font-weight:700;
}
body[data-page="checkout-order"] .pay-gap h5{margin:0 0 4px;font-size:var(--t-small);font-weight:600;color:var(--ink)}
body[data-page="checkout-order"] .pay-gap p{margin:0;font-size:var(--t-caption);color:var(--body);line-height:1.5}
body[data-page="checkout-order"] .pay-gap p + p{margin-top:6px}

/* terms */
body[data-page="checkout-order"] .terms{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border:1px solid var(--line);background:var(--paper-2);border-radius:var(--radius-s);
  margin:var(--s-5) 0 0;
}
body[data-page="checkout-order"] .terms input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border:1.5px solid var(--line-2);background:var(--paper);
  border-radius:3px;position:relative;cursor:pointer;flex:none;margin-top:2px;
}
body[data-page="checkout-order"] .terms input[type="checkbox"]:checked{border-color:var(--ink);background:var(--ink)}
body[data-page="checkout-order"] .terms input[type="checkbox"]:checked::after{
  content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--cta-fg);font-size:var(--t-caption);font-weight:600;
}
body[data-page="checkout-order"] .terms label{font-size:var(--t-caption);color:var(--ink-2);line-height:1.55;cursor:pointer}
body[data-page="checkout-order"] .terms label a{color:var(--accent-ink);border-bottom:1px solid var(--accent-ink)}

/* review block */
body[data-page="checkout-order"] .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:var(--s-4)}
body[data-page="checkout-order"] .review-card{
  border:1px solid var(--line);background:var(--paper-2);padding:var(--s-4);
  display:flex;flex-direction:column;gap:6px;border-radius:var(--radius-s);position:relative;
}
body[data-page="checkout-order"] .review-card h5{
  margin:0;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--muted);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
body[data-page="checkout-order"] .review-card h5 a{font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:1px;text-transform:none;letter-spacing:.01em}
body[data-page="checkout-order"] .review-card h5 a:hover{color:var(--ink);border-bottom-color:var(--ink)}
body[data-page="checkout-order"] .review-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--t-caption)}
body[data-page="checkout-order"] .review-card dt{color:var(--muted)}
body[data-page="checkout-order"] .review-card dd{margin:0;color:var(--ink)}

/* ============================================================
   MODE D — THANK YOU
   ============================================================ */
body[data-page="checkout-thanks"] .thanks-hero{
  display:grid;grid-template-columns: 1fr 1.1fr;gap:var(--s-7);align-items:stretch;
  margin-top:var(--s-4);padding:var(--s-7) var(--s-6);
  background:var(--paper);border:1px solid var(--line);
}
body[data-page="checkout-thanks"] .thanks-hero .left{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s-3)}
body[data-page="checkout-thanks"] .thanks-hero .thanks-right{display:flex;flex-direction:column;gap:var(--s-4)}
body[data-page="checkout-thanks"] .thanks-hero .left .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-3)}
body[data-page="checkout-thanks"] .thanks-hero .left h1{
  font-family:var(--font-display);
  font-size:var(--t-h1-hero);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:1.05;margin:0;
}
body[data-page="checkout-thanks"] .thanks-hero .left .ord{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;color:var(--muted);
  margin:0;
}
body[data-page="checkout-thanks"] .thanks-hero .left .ord b{color:var(--ink);font-weight:600;letter-spacing:var(--tracking-wide)}
body[data-page="checkout-thanks"] .thanks-hero .left .ord span{color:var(--ink-2);font-family:var(--font-sans);font-size:var(--t-caption);letter-spacing:.01em;text-transform:none;margin-left:6px}
body[data-page="checkout-thanks"] .thanks-hero .left p{font-size:var(--t-body);color:var(--body);line-height:1.55;margin:0}
body[data-page="checkout-thanks"] .thanks-hero .left p b{color:var(--ink);font-weight:500}
body[data-page="checkout-thanks"] .thanks-hero .left .thanks-notice{
  font-size:var(--t-h6);color:var(--ink-2);line-height:1.5;margin:0;
}
body[data-page="checkout-thanks"] .thanks-hero .left .thanks-notice b{color:var(--ink);font-weight:500}

/* compact summary in thanks */
body[data-page="checkout-thanks"] .ts{
  border:1px solid var(--line);background:var(--paper);padding:var(--s-6);
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-7);
}
body[data-page="checkout-thanks"] .ts h3{margin:0 0 var(--s-4);font-family:var(--font-display);font-size:var(--t-h6);font-weight:var(--weight-display,600);letter-spacing:var(--tracking-display,-.01em)}
body[data-page="checkout-thanks"] .ts .ts-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
body[data-page="checkout-thanks"] .ts .ts-items li{display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;font-size:var(--t-caption)}
body[data-page="checkout-thanks"] .ts .ts-items li .ti{width:50px;aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden}
body[data-page="checkout-thanks"] .ts .ts-items li .ti .ph{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 40%, rgba(0,0,0,.08), transparent 60%)}
body[data-page="checkout-thanks"] .ts .ts-items li .tx b{display:block;font-weight:500;font-size:var(--t-caption)}
body[data-page="checkout-thanks"] .ts .ts-items li .tx small{font-size:var(--t-micro);color:var(--muted)}
body[data-page="checkout-thanks"] .ts .ts-items li .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
body[data-page="checkout-thanks"] .ts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--t-caption);align-content:start}
body[data-page="checkout-thanks"] .ts dt{color:var(--muted)}
body[data-page="checkout-thanks"] .ts dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
body[data-page="checkout-thanks"] .ts dl .total-row{
  padding-top:var(--s-3);margin-top:var(--s-2);
  border-top:1px solid var(--line);
}
body[data-page="checkout-thanks"] .ts dl .total-row b{font-family:var(--font-display);font-size:var(--t-h6);font-weight:var(--weight-display,600);letter-spacing:var(--tracking-display,-.01em);color:var(--ink)}
body[data-page="checkout-thanks"] .ts dl dd .pay-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--c-success-bg);color:var(--c-success-ink);border:1px solid var(--c-success-border);
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.02em;
}
body[data-page="checkout-thanks"] .ts dl dd .pay-pill .sd{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* ============================================================
   PRODUCT RECOMMENDATION REELS (Mode A & D)
   Override pdp.css's snap-scroll .reel-track with a plain grid.
   ============================================================ */
body[data-page^="checkout"] .reel-section{padding:0 var(--pad);max-width:var(--w-shell);margin:var(--space-section) auto 0}
body[data-page^="checkout"] .reel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 var(--s-6);flex-wrap:wrap}
body[data-page^="checkout"] .reel-head .title{font-family:var(--font-display);font-size:var(--t-h3);font-weight:var(--weight-display,500);letter-spacing:var(--tracking-display,-.025em);line-height:1.05;margin:0}
body[data-page^="checkout"] .reel-head .sub{color:var(--muted);font-size:var(--t-caption);margin-top:6px}
body[data-page^="checkout"] .reel-head .right{display:flex;align-items:center;gap:20px}
body[data-page^="checkout"] .reel-head .seeall{font-size:var(--t-caption);letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--ink);padding-bottom:2px;cursor:pointer}
body[data-page^="checkout"] .reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body[data-page^="checkout"] .reel-grid .pcard{scroll-snap-align:none;display:flex;flex-direction:column;cursor:pointer}
body[data-page^="checkout"] .reel-grid .pcard .img{aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden}
body[data-page^="checkout"] .reel-grid .pcard .img .ph{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 100%),
    radial-gradient(ellipse at var(--ph-x,55%) var(--ph-y,40%), rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 60%);
}
body[data-page^="checkout"] .reel-grid .pcard .img .badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2}
body[data-page^="checkout"] .reel-grid .pcard .img .badges span{font-size:var(--t-super-nano);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:3px 7px;background:var(--paper);color:var(--ink);border-radius:var(--radius-xs)}
body[data-page^="checkout"] .reel-grid .pcard .img .badges .sale{background:var(--accent);color:var(--cta-fg)}
body[data-page^="checkout"] .reel-grid .pcard .img .badges .new{background:var(--ink);color:var(--cta-fg)}
body[data-page^="checkout"] .reel-grid .pcard .img .badges .hit{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
body[data-page^="checkout"] .reel-grid .pcard .img .crop{position:absolute;bottom:8px;left:10px;right:10px;font-size:var(--t-nano);color:rgba(0,0,0,.4);letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums;display:flex;justify-content:space-between}
body[data-page^="checkout"] .reel-grid .pcard .meta{padding:14px 2px 6px;display:flex;flex-direction:column;gap:4px}
body[data-page^="checkout"] .reel-grid .pcard .meta .ttl{font-size:var(--t-caption);color:var(--ink)}
body[data-page^="checkout"] .reel-grid .pcard .meta .price{display:flex;align-items:baseline;gap:8px}
body[data-page^="checkout"] .reel-grid .pcard .meta .now{font-size:var(--t-caption);font-weight:600;font-variant-numeric:tabular-nums}
body[data-page^="checkout"] .reel-grid .pcard .meta .was{font-size:var(--t-micro);color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
/* ===== 30-pages/checkout.mobile.css ===== */
/* ===== 30-pages/checkout.mobile.css — responsive/mobile overrides for checkout pages =====
   Extracted from checkout.css (Phase 8.2 cleanup). Loaded after checkout.css alphanumerically. */

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  body[data-page^="checkout"] .layout{grid-template-columns:1fr;gap:var(--s-6)}
  body[data-page^="checkout"] .layout-aside{position:static}
  body[data-page="checkout-empty"] .empty{grid-template-columns:1fr;padding:var(--s-7) var(--s-5);gap:var(--s-6)}
  body[data-page^="checkout"] .reel-grid{grid-template-columns:repeat(3,1fr)}
  body[data-page="checkout-thanks"] .thanks-hero{grid-template-columns:1fr;gap:var(--s-6)}
  body[data-page="checkout-thanks"] .ts{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (max-width:768px){
  body[data-page="checkout-basket"] .cart-head{display:none}
  body[data-page="checkout-basket"] .cart-line{grid-template-columns: 80px 1fr;grid-template-areas: 't info' 't qty' 't total';gap:8px 12px;position:relative}
  body[data-page="checkout-basket"] .cart-line .thumb{grid-area:t;width:80px}
  body[data-page="checkout-basket"] .cart-line .info{grid-area:info}
  body[data-page="checkout-basket"] .cart-line .qty-wrap{grid-area:qty}
  body[data-page="checkout-basket"] .cart-line .unit{display:none}
  body[data-page="checkout-basket"] .cart-line .total{grid-area:total;text-align:left}
  body[data-page="checkout-basket"] .cart-line .remove{position:absolute;top:0;right:0}
  body[data-page="checkout-basket"] .util-cards{grid-template-columns:1fr}
  body[data-page="checkout-order"] .stepbar{grid-template-columns:1fr 1fr}
  body[data-page="checkout-order"] .stepbar .sb-step:nth-child(2n){border-right:0}
  body[data-page="checkout-order"] .stepbar .sb-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  body[data-page="checkout-order"] .field-row,
  body[data-page="checkout-order"] .field-row.three{grid-template-columns:1fr}
  body[data-page="checkout-order"] .review-grid{grid-template-columns:1fr}
  body[data-page^="checkout"] .reel-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* Wave-06b: thanks-hero single-column + stack at ≤768px */
  body[data-page="checkout-thanks"] .thanks-hero{grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-5) var(--s-4)}
  /* Wave-06b: grid items need min-width:0 so 1fr doesn't expand beyond container */
  body[data-page="checkout-thanks"] .thanks-hero .left,
  body[data-page="checkout-thanks"] .thanks-hero .thanks-right{min-width:0;overflow-wrap:break-word}
}
/* ───────── Mobile (≤ 767px) — checkout reflow (Wave-06b Phase 5) ─────────
   Complements the ≤768px block above. Uses the actual HTML class names
   (.layout-aside, .summary, .ro label) rather than the plan's placeholders. */
@media (max-width:767px){
  /* Summary aside — float above the form on mobile so users see total before submitting */
  body[data-page="checkout-order"] .layout-aside{
    order:-1;
    margin-block-end:var(--s-5);
  }

  /* Summary toggle — already full-width in .layout-aside; ensure tap target */
  body[data-page="checkout-order"] .summary-toggle{
    width:100%;
    min-height:44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  /* Sticky bottom submit CTA strip — wraps the place-order button */
  body[data-page="checkout-order"] .step-submit-strip{
    position:sticky;
    inset-block-end:0;
    background:var(--paper);
    padding-block:var(--s-3);
    box-shadow:0 -8px 24px rgba(0,0,0,.08);
    margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);
    z-index:10;
  }
  body[data-page="checkout-order"] .step-submit-strip .btn-primary{
    width:100%;
    min-height:48px;
  }

  /* Delivery / payment radio option labels — full-height tap area */
  body[data-page="checkout-order"] .ro{
    min-height:44px;
  }
  body[data-page="checkout-order"] .radios .ro > label{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}

/* Wave-06b: empty cart CTA row wraps at narrow widths (≤600px) to avoid h-scroll */
@media (max-width:600px){
  body[data-page="checkout-empty"] .empty-cta-row{flex-wrap:wrap}
  body[data-page="checkout-empty"] .empty-cta-row .btn{width:100%}
  /* checkout-2 bottom action: make full-width at narrow viewports */
  body[data-page="checkout-order"] .form-submit-row{flex-direction:column}
  body[data-page="checkout-order"] .form-submit-row .btn{width:100%}
  /* checkout-2 step actions: stack at narrow widths so submit btn doesn't overflow */
  body[data-page="checkout-order"] .step .actions{flex-direction:column;align-items:stretch}
  body[data-page="checkout-order"] .step .actions .btn{width:100%;text-align:center;justify-content:center}
}

/* ===== checkout-2-order — utility classes (added 2026-05-18 r2) =====
   Hoisted from inline style="" attrs in pages/checkout-2-order.html so the
   payment-method rows, step-label, and fine-prints use tokens, not hardcoded
   px/em/colors. */

/* "−2%" discount pill on payment-method rows. */
body[data-page="checkout-order"] .badge--mono{
  display:inline-block;
  font-size:var(--t-nano);
  color:var(--c-success-ink);
  background:var(--c-success-bg);
  border:1px solid var(--c-success-border);
  padding:2px 7px;
  letter-spacing:var(--tracking-wide);
  font-variant-numeric:tabular-nums;
  border-radius:var(--radius-pill);
  font-weight:600;
}

/* "Поточний крок" pink label inside the active step bubble. */
body[data-page="checkout-order"] .step-label{
  font-size:var(--t-nano);
  letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--accent);
  font-weight:600;
}

/* Tiny fine-print on payment-method right column (Visa·Mastercard, etc.). */
body[data-page="checkout-order"] .ro-fineprint{
  font-size:var(--t-nano);
  color:var(--muted);
}
body[data-page="checkout-order"] .ro-fineprint--success{ color:var(--c-success-ink); }

/* Spec-gap pre-launch note under the payment-methods list. */
body[data-page="checkout-order"] .spec-gap-note{
  font-size:var(--t-nano);
  color:var(--muted);
  letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  font-weight:600;
}

/* Summary-row fine print ("Доставка (НП, відділення)"). */
body[data-page="checkout-order"] .summary-li-note{
  font-size:var(--t-nano);
  color:var(--muted);
}

/* Submit-button at the end of the order form — larger padding than default CTA. */
body[data-page="checkout-order"] .btn-submit-order{
  padding:18px 28px;
  font-size:var(--t-small);
}

/* ============================================================
   TAP-TARGET FIXES (Wave-06b Phase 5)
   All interactive elements must measure ≥ 44×44 px via
   getBoundingClientRect() to pass the responsive matrix check.
   ============================================================ */

/* checkout-0-empty h1 has data-behavior="empty-cart-heading" → caught by [data-behavior] selector.
   It is a block element so min-height alone expands the tap area without visual impact. */
body[data-page="checkout-empty"] h1[data-behavior="empty-cart-heading"]{
  min-height:44px;
}

/* .btn-link — back / login inline link: text-only link, 21px tall by default */
body[data-page^="checkout"] .btn-link{
  min-height:44px;
}

/* .reel-head .seeall — "Усі моделі →" / "Усі лідери →" etc. in recommendation reels */
body[data-page^="checkout"] .reel-head .seeall{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Basket qty stepper — +/− buttons (34×36) and number input (42×36) */
body[data-page="checkout-basket"] .qty button{
  min-width:44px;
  min-height:44px;
}
body[data-page="checkout-basket"] .qty input{
  min-height:44px;
  min-width:44px;
}

/* Basket remove-item button (32×32) */
body[data-page="checkout-basket"] .remove{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Basket OOS stock indicator [data-behavior="cart-line-oos"] — 219×35 */
body[data-page="checkout-basket"] .stock.oos{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Promo applied row [data-behavior="cart-promo-applied"] — 273×41 */
body[data-page="checkout-basket"] .promo-applied{
  min-height:44px;
  align-items:center;
}

/* Promo remove button (.x) — 23×16 */
body[data-page="checkout-basket"] .promo-applied .x{
  min-width:44px;
  min-height:44px;
}

/* "Запитати у менеджера" link in .hint — 121×15, display:inline */
body[data-page="checkout-basket"] .hint a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Summary detail spans [data-behavior] — subtotal, delivery, discount (50×19, 140×19, 10×19).
   The discount "—" span is only 10px wide — needs both min-width and min-height. */
body[data-page="checkout-basket"] .summary-lines span[data-behavior]{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
}

/* Summary grand total span.v — 100×43.5 (just under threshold) */
body[data-page="checkout-basket"] .summary-grand .v{
  min-height:44px;
  display:inline-flex;
  align-items:baseline;
}

/* Quick-buy cancel button — 211×32 */
body[data-page="checkout-basket"] .quickbuy-panel .cancel{
  min-height:44px;
  display:flex;
  align-items:center;
}

/* Terms / fineprint inline links — "умови продажу" etc. */
body[data-page="checkout-basket"] .summary-fineprint a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Cart footer links — "← Продовжити покупки" (148×21) and "✕ Очистити кошик" (116×21) */
body[data-page="checkout-basket"] .cart-foot--full a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Order step edit button (.s-edit) — 83×20, text-only button inside step summary h5 */
body[data-page="checkout-order"] .s-edit{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Review-card section edit links — plain <a>Редагувати</a> inside <h5>, ~53×21px */
body[data-page="checkout-order"] .review-card h5 a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Terms inline links — "умови продажу", "політику повернення", "конфіденційності"
   inline anchors inside the label; render at ~39px (line-height × wrap lines).
   Use inline-flex so min-height applies without breaking text flow. */
body[data-page="checkout-order"] .terms a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Terms / newsletter checkboxes and radio buttons in .ro option rows:
   Input elements must measure ≥ 44px in both dimensions.
   Keep appearance:none — the checkbox border-box expands; the visual border
   stays at the box edge so only the touch area grows. */
body[data-page="checkout-order"] .terms input[type="checkbox"]{
  min-height:44px;
  min-width:44px;
}
body[data-page="checkout-order"] .ro input[type="radio"]{
  min-height:44px;
  min-width:44px;
}
/* ===== 30-pages/favorites-guest.css ===== */
/* =================================================================
   favorites-guest.css — /favorites/ for unauthenticated visitors.
   Layout mirrors catalog ladder:
     intro      → clamped to --w-shell (1480)
     layout     → ultra-bleed to --w-shell-ultra (3000) — sticky
                  auth-prompt rail (340px) + product grid (1fr)
     seo        → clamped to --w-shell (1480)
   Everything below is scoped to body[data-page="favorites-guest"] to
   avoid name collisions with .auth-modal, account .btn, catalog .seo.
   ================================================================= */

body[data-page="favorites-guest"]{
  --auth-rail-w: 340px;
}

/* ---- Page-level zone wrapping ---- */
body[data-page="favorites-guest"] .tpl-fav-guest{
  padding-block: var(--s-7) var(--s-9);
}
body[data-page="favorites-guest"] .tpl-fav-guest__intro{
  padding-block-end: var(--s-6);
}
body[data-page="favorites-guest"] .tpl-fav-guest__layout{
  max-inline-size: var(--w-shell-ultra);
  margin-inline: auto;
  padding-inline: var(--pad);
}
body[data-page="favorites-guest"] .tpl-fav-guest__seo{
  padding-block-start: var(--s-8);
}

/* ---- Breadcrumb (kept tight to chrome) ---- */
body[data-page="favorites-guest"] .breadcrumb{
  display:flex; gap: var(--s-2); list-style:none; margin:0 0 var(--s-5); padding:0;
  font-size: var(--t-micro); color: var(--muted);
  letter-spacing: var(--tracking-wide);
  overflow-x:auto; white-space:nowrap;
}
body[data-page="favorites-guest"] .breadcrumb a{ color: var(--muted); }
body[data-page="favorites-guest"] .breadcrumb a:hover{ color: var(--ink); }
body[data-page="favorites-guest"] .breadcrumb [aria-current="page"]{ color: var(--ink); }
body[data-page="favorites-guest"] .breadcrumb li + li::before{ content:"/"; margin-right: var(--s-2); color: var(--line-2); }

/* ---- Heading row ---- */
body[data-page="favorites-guest"] .fav-guest-head{
  margin-block-end: var(--s-3);
}
body[data-page="favorites-guest"] .fav-guest-head h1{
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px); font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.025em);
  line-height: .95; margin: 0;
}

/* ---- Two-column layout (mobile stacks via DOM order) ---- */
body[data-page="favorites-guest"] .fav-guest-layout{
  display:grid; gap: var(--s-5);
  grid-template-columns: 1fr; align-items: start;
}
body[data-page="favorites-guest"] .fav-guest-layout__aside{ min-inline-size: 0; }
body[data-page="favorites-guest"] .fav-guest-layout__main{ min-inline-size: 0; }

@media (min-width: 1024px){
  body[data-page="favorites-guest"] .fav-guest-layout{
    grid-template-columns: var(--auth-rail-w) minmax(0, 1fr);
    gap: var(--s-7);
  }
  body[data-page="favorites-guest"] .fav-guest-layout__aside{
    position: sticky;
    inset-block-start: calc(var(--s-5) + 72px); /* nudges below sticky header */
    align-self: start;
    z-index: var(--z-sticky);
  }
}

/* ---- Auth-prompt sidebar card ---- */
body[data-page="favorites-guest"] .auth-prompt{
  border: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
body[data-page="favorites-guest"] .auth-prompt__icon{
  inline-size: 56px; block-size: 56px;
  border-radius: 50%; background: var(--accent-wash);
  border: 1px solid var(--accent-wash);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); margin-block-end: var(--s-1);
  flex: 0 0 auto;
}
body[data-page="favorites-guest"] .auth-prompt__icon svg{ display: block; }
body[data-page="favorites-guest"] .auth-prompt__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
body[data-page="favorites-guest"] .auth-prompt__lede{
  margin: 0; font-size: var(--t-small); color: var(--body); line-height: var(--lh-snug);
}
body[data-page="favorites-guest"] .auth-prompt__lede b{ color: var(--ink); font-weight: 600; }
body[data-page="favorites-guest"] .auth-prompt__actions{
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-block-start: var(--s-2);
}
body[data-page="favorites-guest"] .auth-prompt__divider{
  border: 0; border-block-start: 1px solid var(--line);
  margin-block: var(--s-2) 0;
}
body[data-page="favorites-guest"] .auth-prompt__hint{
  margin: 0; font-size: var(--t-micro); color: var(--muted);
  line-height: var(--lh-snug);
}
body[data-page="favorites-guest"] .auth-prompt__hint a{ color: var(--body); text-underline-offset: 2px; }
body[data-page="favorites-guest"] .auth-prompt__hint a:hover{ color: var(--ink); }

/* Page-scoped buttons — local to auth-prompt + empty CTA */
body[data-page="favorites-guest"] .btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  padding: 12px 20px;
  border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
body[data-page="favorites-guest"] .btn:hover{ background: var(--ink); color: var(--cta-fg); }
body[data-page="favorites-guest"] .btn-primary{
  background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg);
}
body[data-page="favorites-guest"] .btn-primary:hover{ background: var(--cta-bg-hover); color: var(--cta-fg); }
body[data-page="favorites-guest"] .btn-ghost{ background: transparent; }
body[data-page="favorites-guest"] .btn-full{ inline-size: 100%; }

/* ---- Toolbar (count + clear) ---- */
body[data-page="favorites-guest"] .fav-guest-toolbar{
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-4);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-5);
}
body[data-page="favorites-guest"] .fav-guest-toolbar__count{
  font-size: var(--t-caption); color: var(--muted);
  letter-spacing: var(--tracking-wide);
}
body[data-page="favorites-guest"] .fav-guest-toolbar__count b{ color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="favorites-guest"] .fav-guest-toolbar__spacer{ flex: 1 1 auto; }
body[data-page="favorites-guest"] .fav-guest-toolbar__clear-form{ display: inline; }
body[data-page="favorites-guest"] .fav-guest-toolbar__clear{
  background: transparent; border: 0; padding: 0;
  font: inherit; font-size: var(--t-caption); color: var(--body);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
body[data-page="favorites-guest"] .fav-guest-toolbar__clear:hover{ color: var(--ink); }

/* ---- Grid spacing override (catx-grid is global; tighten to match favorites) ---- */
body[data-page="favorites-guest"] .fav-guest-grid{
  display:grid; gap: 14px 12px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  margin: 0 0 var(--s-7);
  padding: 0; list-style: none;
}
@media (min-width: 600px){ body[data-page="favorites-guest"] .fav-guest-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ body[data-page="favorites-guest"] .fav-guest-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px){ body[data-page="favorites-guest"] .fav-guest-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1800px){ body[data-page="favorites-guest"] .fav-guest-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 2400px){ body[data-page="favorites-guest"] .fav-guest-grid{ grid-template-columns: repeat(6, 1fr); } }
body[data-page="favorites-guest"] .fav-guest-grid > li{ min-inline-size: 0; list-style: none; isolation: isolate; }

/* ---- Empty state (replaces the grid in State 2) ---- */
body[data-page="favorites-guest"] .fav-guest-empty{
  border: 1px dashed var(--line);
  padding: var(--s-9) var(--s-5);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--s-3);
  align-items: center;
}
body[data-page="favorites-guest"] .fav-guest-empty__icon{
  inline-size: 72px; block-size: 72px;
  border-radius: 50%; background: var(--surface-recede);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  margin-block-end: var(--s-2);
}
body[data-page="favorites-guest"] .fav-guest-empty h3{
  font-family: var(--font-display);
  font-size: var(--t-h4, 24px); font-weight: 600;
  margin: 0; line-height: 1.25;
}
body[data-page="favorites-guest"] .fav-guest-empty p{
  margin: 0; color: var(--body); max-inline-size: 52ch;
  font-size: var(--t-body); line-height: var(--lh-body);
}
body[data-page="favorites-guest"] .fav-guest-empty .btn{ margin-block-start: var(--s-3); }

/* ---- SEO nudge block at the bottom ---- */
body[data-page="favorites-guest"] .tpl-fav-guest__seo .seo-block{
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-7);
}
body[data-page="favorites-guest"] .seo-block h2{
  font-family: var(--font-display);
  font-size: var(--t-h3, 30px); font-weight: 600; margin: 0 0 var(--s-3);
  letter-spacing: -.01em;
}
body[data-page="favorites-guest"] .seo-block > p{
  color: var(--body); max-inline-size: 70ch; line-height: var(--lh-body);
  font-size: var(--t-body);
}
body[data-page="favorites-guest"] .seo-block__benefits{
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
}
@media (min-width: 768px){
  body[data-page="favorites-guest"] .seo-block__benefits{ grid-template-columns: repeat(3, 1fr); }
}
body[data-page="favorites-guest"] .seo-block__benefit{
  border: 1px solid var(--line);
  padding: var(--s-5);
}
body[data-page="favorites-guest"] .seo-block__benefit h3{
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
}
body[data-page="favorites-guest"] .seo-block__benefit p{
  margin: 0; font-size: var(--t-small); color: var(--body); line-height: var(--lh-snug);
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */

/* Login/Register CTA buttons — bump from 42.7 → 44px */
body[data-page="favorites-guest"] .btn{
  min-height: 44px;
}

/* "Clear" toolbar button */
body[data-page="favorites-guest"] .fav-guest-toolbar__clear{
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Card links — ensure card-link block has minimum height */
body[data-page="favorites-guest"] .card-link{
  min-height: 44px;
}

/* Breadcrumb links — short words need min-width + inline-flex for min-height */
body[data-page="favorites-guest"] .breadcrumb a{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}

/* Auth-prompt legal hint links */
body[data-page="favorites-guest"] .auth-prompt__hint a{
  display: inline-flex; align-items: center; min-height: 44px;
}
/* ===== 30-pages/home.css ===== */
/* ===== 30-pages/home.css — page-specific overrides for homepage =====
 * Shared chrome / hero / mega / discovery layout / mobile-mode / sticky header
 * extracted to _shared-discovery.css on 2026-05-18 (audit-tokens.md drift cleanup).
 * Only home-unique rules remain in this file:
 *   - .util .user ink-palette override (catalog/pdp/static use accent — shared default)
 *   - Reviews marquee variant (.reviews-marquee + .reviews-arrow controls)
 *   - .ig-grid 5-col / .ig 9/16 aspect ratio (catalog uses 6-col / 1/1 — both pages override)
 *   - .util a / .lang a / .nav > a min-height in @media 768 (mobile tap target)
 *   - .promo-split .num clamp in @media 600 (extra-narrow scale-down)
 *   - Mobile-mode and @media 1100 overrides for the marquee
 */

  /* ============ Util-user ink palette (homepage outlier) ============
     Catalog / pdp / static use the accent palette (the default in _shared).
     Home is the only page where this row stays in ink, so home overrides. */
  .util .user svg{color:var(--ink-2)}
  .util .user a.accent{color:var(--ink);font-weight:500}
  .util .user a.accent:hover{border-bottom-color:var(--ink);color:var(--ink)}

  /* ============ Zone 8 — Reviews (home only — marquee carousel variant) ============
     Infinite carousel with arrow controls — 4 cards per screen.
     Auto-advance + manual stepping driven by JS (sets transform on .reviews-track). */
  .reviews-marquee{
    --reviews-cards: 4;
    --reviews-gap: 24px;
    overflow:hidden;
    position:relative;
  }
  .reviews-track{
    display:flex;
    gap:var(--reviews-gap);
    width:max-content;
    transform:translateX(0);
    transition:transform .5s cubic-bezier(.4,.0,.2,1);
    will-change:transform;
  }
  .reviews-track.no-anim{ transition:none; }
  .reviews-track > .review{
    flex:0 0 calc(
      (min(100vw - 2 * var(--pad), var(--w-shell)) - var(--reviews-gap) * (var(--reviews-cards) - 1))
      / var(--reviews-cards)
    );
    min-width:0;
  }
  @media (prefers-reduced-motion: reduce){
    .reviews-track{ transition:none; }
  }

  /* Arrow controls */
  .reviews-arrow{
    position:absolute; top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:44px; height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--paper); color:var(--ink);
    border:1px solid var(--line-2); border-radius:50%;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    transition:background .15s, border-color .15s, color .15s;
  }
  .reviews-arrow:hover{ background:var(--ink); color:var(--cta-fg); border-color:var(--ink); }
  .reviews-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .reviews-arrow-prev{ left:8px; }
  .reviews-arrow-next{ right:8px; }

  /* ============ Zone 9 — Instagram (home: 5-col portrait grid) ============
     Catalog overrides to 6-col 1/1 in catalog.css. */
  .ig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .ig{
    position:relative;aspect-ratio:9/16;background:var(--paper-2);overflow:hidden;cursor:pointer;
  }

  /* ============ Mobile-mode marquee override ============ */
  body.mobile-mode .reviews-marquee{ --reviews-cards: 1.4; --reviews-gap: 16px; }

  /* ============ Responsive — home-only overrides ============ */
  @media (max-width:1100px){
    .reviews-marquee{ --reviews-cards: 3; }
  }
  @media (max-width:768px){
    /* Tap-target min-height for chrome links on mobile (homepage only —
       catalog originally lacked this; not bundled into _shared so the existing
       behavior is preserved). */
    .util a, .lang a, .nav > a, .util .socials a{min-height:44px;display:inline-flex;align-items:center}
  }
  @media (max-width:600px){
    .promo-split .num{font-size:clamp(40px, 14vw, 64px)}
  }

/* ───────── Mobile (≤ 767px) — heroes ───────── */
@media (max-width: 767px) {
  .hero {
    aspect-ratio: var(--aspect-hero-mobile);
    width: 100%;
  }

  .hero img,
  .hero picture,
  .hero source {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-content {
    padding: var(--s-5) var(--s-4);
  }

  .hero-content .hero-title {
    text-align: center;
  }

  .hero-content .hero-cta {
    width: 100%;
  }

  .hero-content .cta-row {
    flex-direction: column;
    gap: var(--s-3);
  }
}

/* Section rhythm reduction */
@media (max-width: 767px) {
  .shell {
    --space-section: var(--s-7);
  }

  section + section {
    margin-block-start: var(--space-section);
  }
}
/* ===== 30-pages/homepage-hero-examples.css ===== */
/* =================================================================
   homepage-hero-examples.css — hero variant styles + gallery scaffolding.
   Ports the hero CSS from v0.2/homepage-elements.html so variants
   1A · 1B · 1C · 2A · 2B · 2C · 2D · 3A · 3B · 3C render identically
   once the page-bound JS fills each [data-hero-variant].

   Scoped to body:is([data-page="homepage-hero-examples"], [data-page="home"])
   so the same hero variant renderer can power the homepage. Gallery-chrome
   selectors (.gallery-intro / .vg-* / .variant-row / .vr-*) harmlessly
   no-op on the homepage since those classes don't exist there.
   ================================================================= */

body:is([data-page="homepage-hero-examples"], [data-page="home"]){ /* scope marker */ }

/* ============ GALLERY chrome (intro · variant groups · variant labels) ============ */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gallery-intro{
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 24px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-meta{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-tag{ color: var(--accent-ink); font-weight: 600; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-rule{ flex: 0 0 80px; height: 1px; background: var(--line-2); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-file{ color: var(--ink); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-title{
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -0.03em);
  line-height: 1.02; margin: 0; max-width: 22ch;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-sub{
  color: var(--body); font-size: 16px; line-height: 1.55;
  max-width: 64ch; margin: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-toc{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-toc a{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--line); color: var(--ink);
  transition: all .15s; text-decoration: none;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-toc a:hover{ background: var(--ink); color: var(--cta-fg); border-color: var(--ink); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .gi-toc .gi-rule{ flex: 0 0 24px; margin: 0 4px; }

body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-group{ margin-top: var(--space-section); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .vg-head{
  padding: 48px 0 28px; border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 10px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .vg-kicker{
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .vg-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  line-height: 1.05; margin: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .vg-note{
  color: var(--body); font-size: 14.5px; line-height: 1.55;
  max-width: 78ch; margin: 0;
}

body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row{ margin-top: var(--space-section); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row .vr-label{
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 18px;
  padding: 14px 0 18px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row .vr-code{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--cta-fg); background: var(--ink); padding: 5px 10px;
  text-transform: uppercase; font-weight: 600; line-height: 1;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row .vr-name{
  font-family: var(--font-display);
  font-size: 18px; font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.01em);
  color: var(--ink); line-height: 1.2;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row .vr-meta{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: .06em; text-align: right;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .variant-row > .hero{ margin-top: 0; }

/* ============ HERO scaffold ============ */
/* Gallery-only 36px spacing between stacked variant heroes. Homepage uses
   the section-rhythm rule in _shared-discovery.css instead (var(--space-section)). */
body[data-page="homepage-hero-examples"] .hero{ margin-top: 36px; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero.full{ padding: 0 var(--pad); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero.full.v1A{ padding: 0; }

/* photo placeholder (re-using v0.2 .ph convention with v0.3 tokens) */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .ph{
  background: var(--paper-2);
  position: relative; overflow: hidden;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .ph::before{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%),
    radial-gradient(ellipse at var(--ph-x, 70%) var(--ph-y, 35%), rgba(0,0,0,0.07) 0%, rgba(0,0,0,0) 60%);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .ph .crop{
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(0,0,0,.4); letter-spacing: .06em;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none; z-index: 2;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .ph .crop span:last-child{ text-align: right; opacity: .6; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .ph .fig{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 64px; font-weight: 300; letter-spacing: -.04em;
  color: rgba(0,0,0,.12); z-index: 1;
}

/* ============ Slider (1A / 2A) ============ */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider{
  position: relative; aspect-ratio: 21 / 9;
  background: var(--paper-2); overflow: hidden;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider{ aspect-ratio: 21 / 8; }

/* shared copy / cta typography */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .copy{
  padding: clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  position: relative; z-index: 2;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .eyebrow{
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider h2{
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -0.02em);
  line-height: 1.02; margin: 0;
  max-width: 14ch;
}
/* 1A copy panel is narrower than the full 2A stage column → tighter scale */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider h2{
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.04;
  max-width: 12ch;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .sub{
  color: var(--body); font-size: 16px; max-width: 44ch; line-height: 1.5;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .ctas{
  display: flex; gap: 12px; margin-top: 6px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .cta{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cta-bg); color: var(--cta-fg);
  padding: 14px 28px; border-radius: 2px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--cta-bg);
  transition: all .2s; cursor: pointer; text-decoration: none;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .cta:hover{ background: transparent; color: var(--cta-bg); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .cta.ghost{
  background: transparent; color: var(--ink); border-color: var(--ink);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .cta.ghost:hover{ background: var(--ink); color: var(--cta-fg); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .cta svg{
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .media{ position: relative; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .media .ph{ position: absolute; inset: 0; }

/* arrows shared by 1A and 2A */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface-translucent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: all .2s;
  z-index: 4;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .arrow:hover{
  background: var(--paper); border-color: var(--ink);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .arrow.l{ left: 24px; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .arrow.r{ right: 24px; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .arrow svg{
  width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 1.5;
}

/* 2A — contained slider stage: 55/45 grid (copy / media) */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider{
  /* let arrows escape the slider box on wide viewports without clipping */
  overflow: visible;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .stage{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 55% 45%;
  overflow: hidden; /* media should still be clipped to the slider rect */
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider[data-copy-side="left"] .stage{
  grid-template-columns: 55% 45%;
}

/* ≥1600px: 2A arrows sit outside the slider in the gutter */
@media (min-width: 1600px) {
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .arrow.l{ left: -68px; }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .arrow.r{ right: -68px; }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .arrow{
    background: var(--paper);
    border-color: var(--line);
    backdrop-filter: none;
  }
}

/* 1A — full-bleed media + shell-clamped copy panel */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider{
  /* full-bleed already from .hero.full.v1A wrapper */
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .stage{
  position: absolute; inset: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .stage .media{
  position: absolute; inset: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .stage .media .ph{
  position: absolute; inset: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .copy-shell{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  pointer-events: none;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider[data-copy-side="right"] .copy-shell{
  justify-content: flex-end;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider[data-copy-side="left"] .copy-shell{
  justify-content: flex-start;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .copy-shell .copy{
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: min(560px, 46%);
  padding: clamp(28px, 3.5vw, 56px);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

/* dots strip below the slider — used by both 1A and 2A in new layout */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider-indicators{
  display: flex; justify-content: center;
  padding: 18px 0 4px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider-indicators .dots{
  display: flex; gap: 6px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider-indicators .dots i{
  width: 32px; height: 2px; background: rgba(0,0,0,.18);
  display: block; cursor: pointer; transition: background .2s, width .2s;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider-indicators .dots i:hover{ background: rgba(0,0,0,.4); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider-indicators .dots i.on{ background: var(--ink); width: 48px; }

/* mobile fallback for 1A copy panel */
@media (max-width: 767px){
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .copy-shell{
    align-items: flex-end;
    padding-bottom: 18px;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .copy-shell .copy{
    max-width: calc(100% - 16px);
    margin: 0 8px;
    padding: 18px 20px;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider h2{
    font-size: clamp(22px, 7vw, 32px);
  }
}

/* ============ Tile heroes (1B/1C/2B/2C/2D/3A/3B/3C) ============ */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-grid{ display: grid; gap: 14px; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-grid.n3{ grid-template-columns: 1fr 1fr 1fr; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-grid.n2{ grid-template-columns: 1fr 1fr; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile{
  position: relative;
  background: var(--paper-2); overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;          /* in case the tile is an <a> */
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.portrait{ aspect-ratio: 9 / 16; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .ph{
  position: absolute; inset: 0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .ph picture,
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .media .ph picture{display:block;width:100%;height:100%}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .ph img,
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .media .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  z-index: 2;
  transition: background .35s ease;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .eyebrow{
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cta-fg); opacity: .9; margin-bottom: 6px; font-weight: 500;
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile h3{
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -0.02em);
  color: var(--cta-fg); margin: 0; line-height: 1;
  transform: translateY(0);
  transition: transform .35s ease;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .tcta{
  margin-top: 14px; align-self: flex-start;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cta-fg); font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 3px;
  position: relative;
  transition: border-color .25s ease, padding-right .35s ease;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .corner{
  position: absolute; top: 14px; right: 16px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,.75); letter-spacing: .06em;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .vplay{
  position: absolute; top: 14px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--cta-fg);
  background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 2px;
  letter-spacing: .06em;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile .vplay::before{ content: "▶"; font-size: 8px; }

/* Clickable variant — hover lift + image zoom + overlay darken */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link{ cursor: pointer; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:focus-visible{
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:hover .ph{
    transform: scale(1.045);
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:hover .overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:hover .eyebrow{
    transform: translateY(-2px);
    opacity: 1;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:hover h3{
    transform: translateY(-2px);
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-tile.is-link:hover .tcta{
    border-bottom-color: var(--cta-fg);
    padding-right: 14px;
  }
}

/* ============ Carousel hero (1B / 2B) ============ */
/* Wave-06b: overflow-x:clip prevents carousel track tiles from escaping into page scrollWidth.
   (overflow:auto on .track clips visually but when body has overflow-x:hidden the scroll
   responsibility moves to html, which then picks up the tile positions.) */
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel{ position: relative; overflow-x: clip; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .arrows{
  display: flex; gap: 6px;
  position: absolute; top: -50px; right: 0;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .arrows button{
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; color: var(--ink);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .arrows button:hover{
  border-color: var(--ink); background: var(--ink); color: var(--cta-fg);
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .arrows svg{
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .track{
  display: grid; gap: 14px;
  grid-auto-flow: column;
  /* Wave-06b polish: visible-card-count breakpoint ladder for 1B/1C/2B/2C
     hero carousels — 1 below 768px, 2 at 768+, 3 at 1320+. Default below
     handles mobile; @media bumps up from there. */
  grid-auto-columns: calc(100% - 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
@media (min-width: 768px) {
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .track{
    grid-auto-columns: calc((100% - 14px) / 2);
  }
}
@media (min-width: 1320px) {
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .track{
    grid-auto-columns: calc((100% - 14px * 2) / 3);
  }
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .track::-webkit-scrollbar{ display: none; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .track > .hero-tile{ scroll-snap-align: start; }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .pager{
  display: flex; justify-content: center; gap: 6px; margin-top: 20px;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .pager i{
  width: 24px; height: 2px; background: var(--line-2); display: block;
  cursor: pointer; transition: background .2s ease, width .2s ease;
}
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .pager i:hover{ background: rgba(0,0,0,.4); }
body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-carousel .pager i.on{ background: var(--ink); width: 40px; }

/* Mobile responsive — drop tile grids to 1 column under 768px */
@media (max-width: 767px){
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-grid.n3,
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .hero-grid.n2{ grid-template-columns: 1fr; }
  /* Hero-carousel track width is now driven by the explicit min-width
     ladder above (1/2/3-card variants); leaving this rule out so the
     viewport-width branch applies instead of forcing 85%. */
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .slider .stage{ grid-template-columns: 1fr; }
  /* Wave-06b polish: 2A on mobile — was aspect-ratio:21/8 + media hidden,
     which clipped copy at ~700px and left huge empty bands. Switch to a
     stacked layout where media sits above the copy so the photo is still
     visible, and let the slider's height be content-driven. */
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider{
    aspect-ratio: auto;
    overflow: hidden;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .stage{
    position: static;
    display: flex;
    flex-direction: column;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .media{
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider .copy{
    padding: 24px 20px;
    gap: 14px;
  }
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v2A .slider h2{
    font-size: clamp(24px, 6.5vw, 32px);
    max-width: none;
  }
  /* 1A keeps prior behavior (full-bleed with copy overlay) */
  body:is([data-page="homepage-hero-examples"], [data-page="home"]) .v1A-slider .media{ display: block; }
}
/* ===== 30-pages/homepage-product-collections.css ===== */
/* =================================================================
   30-pages/homepage-product-collections.css — featured collection rails.

   Internal design gallery showcasing the homepage "Featured Product
   Collection" carousel in every documented configuration:
     · width        bleed-right | clamped
     · density      xl=3 | l=4 | m=5 cards per shell-row
     · photo-mode   p5 (5-photo hover stack) | p2 (still + video swap)
     · last card    optional "Більше моделей" tail
     · collection   optional "Усі сукні →" top-right link

   Density classes map to existing `.carousel.xxl|.xl|.l` rules in
   _shared-discovery.css so the column-width formulas remain a single
   source of truth. Density "xl" → .carousel.xxl (3-up), "l" → .xl
   (4-up), "m" → .l (5-up).

   Scoped to body[data-page="homepage-product-collections"] for the
   page chrome; component overrides on `.coll-rail` / `.card.p2` are
   intentionally global so the pattern can be lifted into Smarty later.
   ================================================================= */

body[data-page="homepage-product-collections"] { /* scope marker */ }

/* ============ Page intro ============ */
body[data-page="homepage-product-collections"] .gallery-intro{
  padding:96px 0 32px; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px;
}
body[data-page="homepage-product-collections"] .gi-meta{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
}
body[data-page="homepage-product-collections"] .gi-tag{ color:var(--accent-ink); font-weight:600 }
body[data-page="homepage-product-collections"] .gi-rule{ flex:0 0 80px; height:1px; background:var(--line-2) }
body[data-page="homepage-product-collections"] .gi-file{ color:var(--ink) }
body[data-page="homepage-product-collections"] .gi-title{
  font-family:var(--font-display);
  font-size:clamp(38px, 5vw, 64px);
  font-weight:var(--weight-display, 500);
  letter-spacing:var(--tracking-display, -0.03em);
  line-height:1.02; margin:0; max-width:24ch;
}
body[data-page="homepage-product-collections"] .gi-sub{
  color:var(--body); font-size:16px; line-height:1.55;
  max-width:64ch; margin:0;
}
body[data-page="homepage-product-collections"] .gi-toc{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
}
body[data-page="homepage-product-collections"] .gi-toc a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 8px;
  border:1px solid var(--line); color:var(--ink); text-decoration:none;
  transition:all .15s;
}
body[data-page="homepage-product-collections"] .gi-toc a:hover{
  background:var(--ink); color:var(--cta-fg); border-color:var(--ink);
}
body[data-page="homepage-product-collections"] .gi-toc .gi-rule{ flex:0 0 24px; margin:0 4px }

/* ============ H2 group heading ============ */
.coll-group{ margin-top:var(--space-section) }
.coll-group .cg-head{
  padding:48px 0 22px; border-bottom:1px solid var(--ink);
  display:flex; flex-direction:column; gap:8px;
}
.coll-group .cg-kicker{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600;
}
.coll-group .cg-title{
  font-family:var(--font-display);
  font-size:var(--t-h3); font-weight:var(--weight-display, 500);
  letter-spacing:var(--tracking-display, -0.025em);
  line-height:1.05; margin:0;
}
.coll-group .cg-note{ color:var(--body); font-size:var(--t-caption); margin:0; max-width:64ch }

/* ============ Per-example label strip ============ */
.coll-rail{ margin-top:var(--space-block, 48px) }
.coll-rail .cr-label{
  display:flex; align-items:baseline; gap:12px;
  padding:14px 0 12px;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.coll-rail .cr-code{
  color:var(--ink); font-weight:600; padding:2px 6px;
  border:1px solid var(--line-2); border-radius:2px;
  font-size:10.5px;
}
.coll-rail .cr-name{ color:var(--ink) }
.coll-rail .cr-meta{ margin-left:auto; color:var(--muted); text-align:right }

/* ============ Track — reuses .carousel grid mechanics ============
   Width/density rules below override the shared .carousel ones for
   the bleed-right family; clamped rails use the shared defaults.

   Snap is fully disabled (overriding the .carousel `x mandatory`
   default). Two reasons:
     1. Both `mandatory` and `proximity` break smooth-scroll-by in
        Chromium — every frame the browser tries to re-snap and the
        scroll never advances.
     2. The infinite-scroll wrap (clamped, no-tail rails) jumps
        scrollLeft by `halfOffset` invisibly when the user enters the
        cloned card set. Snap-after-settle would land them on a
        random snap point in the clone zone after the wrap — visible
        as a hiccup. With no snap, the jump is exact and pixel-clean.
   Cards still align cleanly: each grid column is exactly card+gap
   wide, and the JS computes `cardAdvance` as an integer number of
   columns so every arrow click lands on a column boundary anyway. */
.coll-rail .carousel{
  padding-bottom:6px;
  scroll-snap-type:none;
  /* scroll-behavior stays at the default `auto`. Both Chromium's smooth-scroll-
     by and CSS scroll-behavior:smooth are unreliable here: animations stall
     mid-flight on a scroll-snap container, and the seamless-wrap jump becomes
     visible. Direct scrollLeft assignment is one-frame and pairs cleanly with
     the invisible wrap. (If smooth animation is wanted later, swap in a rAF
     easing loop scoped to this rail — but the wrap handler must also debounce
     against in-flight tweens.) */
}
.coll-rail .card{ scroll-snap-align:none; }

/* --- Bleed-right: extend track to viewport-right edge, visible scrollbar --- */
.coll-rail[data-width="bleed-right"] .carousel{
  margin-right:calc(50% - 50vw);
  padding-right:var(--pad);
  padding-bottom:18px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.coll-rail[data-width="bleed-right"] .carousel::-webkit-scrollbar{
  display:block; height:8px;
}
.coll-rail[data-width="bleed-right"] .carousel::-webkit-scrollbar-track{
  background:transparent;
}
.coll-rail[data-width="bleed-right"] .carousel::-webkit-scrollbar-thumb{
  background:var(--line-2); border-radius:4px;
}
.coll-rail[data-width="bleed-right"] .carousel::-webkit-scrollbar-thumb:hover{
  background:var(--ink);
}

/* Lock card width to clamped-shell density (so bleed-right keeps the
   same card size — it just shows more of them past the shell edge).
   Formula mirrors the shared .carousel.xxl/.xl/.l rules but pegs to
   the shell content area (min(100vw, --w-shell) - 2*--pad) instead of
   the rail's own 100% (which is wider when the rail bleeds right). */
.coll-rail[data-width="bleed-right"] .carousel.xxl{
  grid-auto-columns:calc((min(100vw, var(--w-shell)) - 2*var(--pad) - 16px*2) / 3);
}
.coll-rail[data-width="bleed-right"] .carousel.xl{
  grid-auto-columns:calc((min(100vw, var(--w-shell)) - 2*var(--pad) - 16px*3) / 4);
}
.coll-rail[data-width="bleed-right"] .carousel.l{
  grid-auto-columns:calc((min(100vw, var(--w-shell)) - 2*var(--pad) - 16px*4) / 5);
}

/* ============ Photo-mode P2 — still photo + hover-swap to video ============
   Renderer strips [data-active] from the card so the base
   `.has-indicators .ph[data-idx="0"]{opacity:1}` rule is the default
   resting state. Hover swap is pure CSS; zones and dots are hidden
   because there's nothing to navigate between (only 2 slides). */
.card.has-indicators.p2 .img .ph-zones,
.card.has-indicators.p2 .img .ph-dots{ display:none }

.card.has-indicators.p2:hover .img .ph[data-idx="0"]{ opacity:0 }
.card.has-indicators.p2:hover .img .ph[data-idx="1"]{ opacity:1 }

/* Slide 1 is the "video" — visually distinguish via a corner badge.
   Real renderers will replace .fig + .vplay with a <video autoplay
   muted loop playsinline> element. */
.card.has-indicators.p2 .img .ph[data-idx="1"] .fig{
  background:linear-gradient(135deg, #4a3d38 0%, #2a2320 100%);
}
.card.has-indicators.p2 .img .ph[data-idx="1"] .vplay{
  position:absolute; bottom:14px; right:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:var(--t-super-nano); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; font-weight:500;
  background:var(--scrim-overlay); color:var(--cta-fg);
  padding:5px 8px; border-radius:var(--radius-xs);
  pointer-events:none;
}
.card.has-indicators.p2 .img .ph[data-idx="1"] .vplay svg{
  width:9px; height:9px; fill:currentColor;
}

/* Photo-mode P2 — fallback-2nd-photo variant (when no video exists).
   Renderer adds .no-video → swap to actual 2nd photo, drop video badge. */
.card.has-indicators.p2.no-video .img .ph[data-idx="1"] .vplay{ display:none }
.card.has-indicators.p2.no-video .img .ph[data-idx="1"] .fig{
  background:#e8d5c4; /* same tone as data-tone="2" */
}

/* ============ Mobile-mode override ============ */
body.mobile-mode .coll-rail[data-width="bleed-right"] .carousel.xxl,
body.mobile-mode .coll-rail[data-width="bleed-right"] .carousel.xl,
body.mobile-mode .coll-rail[data-width="bleed-right"] .carousel.l{
  grid-auto-columns:calc((100vw - 2*var(--pad) - 16px)/2);
}
body.mobile-mode .coll-rail .section-head .arrows{ display:none }

/* ============ Responsive — narrow viewport (≤767px) ============
   Collapse all density classes to 2 cards visible (1.5 peek) so the
   carousel is scannable on phones without body.mobile-mode.
   Mirrors body.mobile-mode behavior for actual-narrow viewports. */
@media (max-width:767px){
  .coll-rail .carousel.xxl,
  .coll-rail .carousel.xl,
  .coll-rail .carousel.l{
    grid-auto-columns:calc((100% - 16px) / 2) !important;
  }
  .coll-rail .section-head .arrows{ display:none }
}
/* ===== 30-pages/pdp.css ===== */
/* ===== 30-pages/pdp.css — page-specific overrides (Task 28) ===== */

/* ===== from pages/product.html (inline <style>) ===== */
/* ===== PDP-specific tokens (page-scoped) ===== */
  :root{
    --t-pdp-title: clamp(20px, 1.9vw, 26px);
    --t-pdp-price: clamp(22px, 2.6vw, 28px);
    --buybox-w:440px;
    /* --c-stock-in/warn/out promoted to 00-tokens.css on 2026-05-18 */
  }

  /* PDP body override: original design had body{overflow-x:hidden} but that transfers
     the scroll container role to html, causing html.scrollWidth inflation from
     sub-pixel rounding. Wave-06b: removed — all PDP overflow is handled by
     overflow-x:clip on individual components that need to contain scroll areas. */
  /* body[data-page="pdp"], body[data-page="pdp-soldout"]{ overflow-x:hidden; } */

  /* ============ Chrome — PDP additions ============
     util / lang / nav base rules + .util .user accent palette inherited from
     _shared-discovery.css (PDP loaded after, so any drift here would override).
     Only PDP-specific addition is the .cur active-page indicator on the nav. */
  .nav > a.cur{color:var(--ink);position:relative}
  .nav > a.cur::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink)}

  /* ============================================================
     PDP HERO — bleed-left default; contained fallback via [data-hero]
     ============================================================ */
  .pdp-hero{
    margin-top:24px;
    display:grid;
    grid-template-columns: minmax(0, 1fr) var(--buybox-w);
    column-gap: var(--s-7);
    align-items:start;
  }

  /* On desktop, gallery escapes the shell to the LEFT viewport edge,
     keeping a single tile-gap inset so tiles never butt the screen */
  @media (min-width: 1480px){
    [data-hero="bleed-left"] .pdp-gallery{
      /* Bleed left so the gap from viewport edge to tile 01 equals the
         inter-tile gap. Math: shell-left = (vw - shell-w) / 2,
         content-left = shell-left + pad; gallery left edge target = s-3. */
      margin-left: calc(var(--s-3) - var(--pad) + var(--w-shell)/2 - 50vw);
    }
  }

  /* Contained fallback — symmetric 1.85fr / 1fr, no bleed */
  [data-hero="contained"] .pdp-hero{
    grid-template-columns: 1.85fr 1fr;
  }

  /* Gallery: 2-up grid, 3:4 tiles */
  .pdp-gallery{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }
  .tile{
    position:relative;aspect-ratio:3/4;background:var(--paper-2);overflow:hidden;cursor:zoom-in;
  }
  .tile .ph{
    position:absolute;inset:0;
    background:
      linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%),
      radial-gradient(ellipse at var(--ph-x,55%) var(--ph-y,40%), rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 60%);
  }
  .tile picture{display:block;position:absolute;inset:0;width:100%;height:100%}
  .tile picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
  .tile > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-2)}
  .tile.video[data-paused="true"] > video{filter:brightness(.65)}
  .tile .fig{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    /* 64px raw: placeholder display digit, removed with real product photography */
    font-family:var(--font-display);font-size:64px;font-weight:300;letter-spacing:-.04em;color:rgba(0,0,0,.12);
    z-index:1;pointer-events:none;
  }
  .tile .crop{
    position:absolute;bottom:10px;left:12px;right:12px;
    font-size:var(--t-super-nano);color:rgba(0,0,0,.4);
    letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums;
    display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:2;
  }
  .tile .crop span:last-child{text-align:right;opacity:.6}
  /* hover-pan zoom hint */
  .tile::after{
    content:"";position:absolute;inset-block-end:10px;inset-inline-end:10px;
    width:32px;height:32px;border-radius:50%;background:var(--surface-translucent);border:1px solid var(--line);
    background-image:linear-gradient(45deg,transparent 45%,var(--ink) 45%,var(--ink) 55%,transparent 55%);
    background-size:14px 2px;background-position:center;background-repeat:no-repeat;
    opacity:0;transition:opacity .2s;pointer-events:none;z-index:3;
  }
  .tile:hover::after{opacity:1}

  .tile .badges{
    position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:4px;
  }
  .tile .badges span{
    font-size:var(--t-super-nano);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;
    padding:4px 8px;background:var(--paper);color:var(--ink);border-radius:var(--radius-xs);
  }
  .tile .badges .sale{background:var(--accent);color:var(--cta-fg)}
  .tile .badges .new{background:var(--ink);color:var(--cta-fg)}

  /* Video tile */
  .tile.video{cursor:pointer}
  .tile.video .vbadge{
    position:absolute;top:12px;right:12px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;
    font-size:var(--t-nano);color:var(--cta-fg);
    background:rgba(0,0,0,.45);padding:4px 8px;border-radius:var(--radius-s);
    letter-spacing:var(--tracking-wider);
    font-variant-caps:all-small-caps;font-weight:600;
  }
  .tile.video .vbadge::before{content:"●";color:var(--accent)}
  .tile.video .pause-overlay{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--scrim-soft);z-index:4;
  }
  .tile.video[data-paused="true"] .pause-overlay{display:flex}
  .tile.video .pause-overlay .play-btn{
    width:64px;height:64px;border-radius:50%;background:var(--surface-translucent);
    display:flex;align-items:center;justify-content:center;
  }
  .tile.video .pause-overlay svg{width:22px;height:22px;fill:var(--ink);margin-left:3px}

  /* ============================================================
     BUY BOX
     ============================================================ */
  .buybox{
    position:sticky;top:24px;
    display:flex;flex-direction:column;gap:var(--s-5);
    min-width:0;
  }

  /* §3.1 Header — title (full row) + status (left) / SKU pill (right) */
  .bb-header{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
  .bb-title{
    font-family:var(--font-display);
    font-size:var(--t-pdp-title);
    font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.02em);
    line-height:1.2;margin:0;color:var(--ink);
  }
  .bb-headrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .stock-chip{
    display:inline-flex;align-items:center;gap:7px;
    font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.01em;
  }
  .stock-chip .sd{width:7px;height:7px;border-radius:50%;background:var(--c-stock-in);display:inline-block;flex:none}
  .stock-chip[data-state="oos"] .sd{background:var(--c-stock-out)}
  .stock-chip[data-state="order"] .sd{background:var(--c-stock-warn)}
  .sku{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
    font-size:var(--t-nano);color:var(--muted);letter-spacing:var(--tracking-wide);
    font-variant-numeric:tabular-nums;background:var(--paper-2);
  }
  .sku b{color:var(--ink);font-weight:500;letter-spacing:.02em}

  /* §3.2 Price */
  .bb-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .bb-price .now{
    font-family:var(--font-display);
    font-size:var(--t-pdp-price);font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display,-.01em);
    color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
  }
  .bb-price .now .cur{font-size:.7em;font-weight:400;color:var(--ink-2);margin-left:4px}
  .bb-price .now.discount{color:var(--accent-ink)}
  .bb-price .was{font-size:var(--t-small);color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
  .bb-price .pct{
    font-size:var(--t-nano);font-weight:600;
    padding:4px 8px;background:var(--accent);color:var(--cta-fg);border-radius:var(--radius-s);
    font-variant-numeric:tabular-nums;
  }

  /* §3.3 Installments */
  .bb-instal{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:10px 14px;background:var(--paper-2);border-radius:var(--radius-m);
    font-size:var(--t-caption);color:var(--ink-2);
  }
  .bb-instal svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.5;flex:none}
  .bb-instal .pp{font-size:var(--t-nano);letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600;color:var(--muted);padding:2px 6px;border:1px solid var(--line);border-radius:var(--radius-s)}
  .bb-instal b{font-weight:600;color:var(--ink)}

  /* §3.4 Colors */
  .bb-section .label{
    font-size:var(--t-nano);letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-bottom:10px;display:flex;justify-content:flex-start;align-items:baseline;gap:6px;
  }
  .bb-section .label > span:first-child::after{content:":"}
  .bb-section .label .val{color:var(--ink);text-transform:none;letter-spacing:.01em;font-weight:500;font-size:var(--t-caption)}
  .bb-section .label .val[data-empty="true"]{color:var(--muted);font-weight:400}
  .colors{display:flex;gap:8px;flex-wrap:wrap}
  .color-thumb{
    position:relative;width:54px;height:72px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer;
    overflow:hidden;transition:border-color .15s;
  }
  .color-thumb:hover{border-color:var(--ink-2)}
  .color-thumb.on{border:2px solid var(--ink);padding:1px}
  .color-thumb .ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--c1, #999),var(--c2, #555))}
  .color-thumb .lbl{
    position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
    font-size:var(--t-super-nano);color:var(--muted);letter-spacing:var(--tracking-wide);white-space:nowrap;
    opacity:0;transition:opacity .15s;pointer-events:none;
  }
  .color-thumb:hover .lbl{opacity:1}

  /* §3.5 Sizes */
  .sizes{display:flex;gap:8px;flex-wrap:wrap}
  .size{
    min-width:48px;padding:11px 14px;
    border:1px solid var(--line);background:var(--paper);
    font-family:inherit;font-size:var(--t-caption);font-weight:500;color:var(--ink);
    cursor:pointer;transition:all .15s;border-radius:var(--radius-s);
    font-variant-numeric:tabular-nums;letter-spacing:.02em;
  }
  .size:hover:not([disabled]){border-color:var(--ink)}
  .size.on{background:var(--ink);color:var(--cta-fg);border-color:var(--ink)}
  .size[disabled]{
    opacity:.45;cursor:not-allowed;text-decoration:line-through;background:var(--paper-2);
  }

  .size-links{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px;
  }
  .size-link{
    display:flex;align-items:flex-start;gap:8px;
    padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
    font-size:var(--t-micro);color:var(--ink-2);line-height:1.35;text-align:left;cursor:pointer;
    background:var(--paper);transition:all .15s;font-family:inherit;
  }
  .size-link:hover{border-color:var(--ink-2);color:var(--ink);background:var(--paper-2)}
  .size-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none;margin-top:1px}

  /* §3.6 Availability + Reserve (merged) */
  .avail{
    display:grid;grid-template-columns:1fr auto;gap:18px;
    padding:16px;border:1px solid var(--line);background:var(--paper-2);border-radius:var(--radius-s);
  }
  .avail-l b{display:block;font-size:var(--t-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
  .avail-l .empty{font-size:var(--t-caption);color:var(--ink-2);line-height:1.4}
  .avail-l .status{display:flex;align-items:center;gap:8px;font-size:var(--t-caption);color:var(--ink);margin-bottom:6px}
  .avail-l .status .sd{width:8px;height:8px;border-radius:50%;background:var(--c-stock-in);display:inline-block;flex:none}
  .avail-l .status[data-s="order"] .sd{background:var(--c-stock-warn)}
  .avail-l .status[data-s="oos"] .sd{background:var(--c-stock-out)}
  .avail-l .status .qty{color:var(--muted);font-variant-numeric:tabular-nums}
  .avail-l a.reserve{
    display:inline-flex;align-items:center;gap:5px;
    font-size:var(--t-caption);color:var(--accent-ink);font-weight:500;
    border-bottom:1px solid var(--accent-ink);padding-bottom:1px;cursor:pointer;
  }
  .avail-l a.reserve:hover{color:var(--ink);border-bottom-color:var(--ink)}
  .avail-r{
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;
  }
  .avail-r .pin{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;background:var(--paper);
    cursor:pointer;transition:all .15s;
  }
  .avail-r .pin:hover{border-color:var(--ink);background:var(--ink);color:var(--cta-fg)}
  .avail-r .pin svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
  .avail-r .addr{font-size:var(--t-nano);color:var(--ink-2);line-height:1.35;cursor:pointer;max-width:140px}
  .avail-r .addr:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

  /* §3.7 Add to basket */
  .bb-actions{display:flex;flex-direction:column;gap:10px}
  .bb-row{display:flex;gap:8px}
  .btn-primary{
    flex:1;background:var(--cta-bg);color:var(--cta-fg);border:1px solid var(--cta-bg);
    padding:16px 22px;font-family:inherit;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
    text-transform:uppercase;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    transition:background-color .2s, border-color .2s, color .2s;border-radius:var(--radius-s);
  }
  .btn-primary:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--cta-fg)}
  /* Idle = "set up but not yet a primary CTA" (e.g. before size is selected).
     Derived from --ink so a brand-hue palette swap propagates automatically. */
  .btn-primary[data-state="idle"]{
    background:color-mix(in oklch, var(--ink) 65%, var(--paper));
    border-color:color-mix(in oklch, var(--ink) 65%, var(--paper));
    color:var(--cta-fg);
  }
  .btn-primary[data-state="idle"]:hover{
    background:color-mix(in oklch, var(--ink) 80%, var(--paper));
    border-color:color-mix(in oklch, var(--ink) 80%, var(--paper));
    color:var(--cta-fg);
  }
  .btn-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
  .btn-wish{
    width:54px;flex:none;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);
    border-radius:var(--radius-s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:background-color .2s, border-color .2s;
  }
  .btn-wish:hover{border-color:var(--ink)}
  .btn-wish svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5;transition:fill .15s, stroke .15s}
  .btn-wish.on svg{fill:var(--accent);stroke:var(--accent)}
  .btn-secondary{
    background:transparent;color:var(--ink);border:1px solid var(--line-2);
    padding:14px 22px;font-family:inherit;font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
    text-transform:uppercase;font-weight:500;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    transition:background-color .2s, border-color .2s, color .2s;border-radius:var(--radius-s);
  }
  .btn-secondary:hover{border-color:var(--ink);background:var(--paper-2)}
  .btn-secondary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

  /* §3.8 Trust badges */
  .trust{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .trust .t{
    display:flex;align-items:center;gap:10px;padding:14px 4px;
    font-size:var(--t-caption);color:var(--ink-2);line-height:1.3;
    border-right:1px solid var(--line);
  }
  .trust .t:last-child{border-right:none;padding-left:14px}
  .trust .t svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.4;flex:none}
  .trust .t b{color:var(--ink);font-weight:600;display:block;margin-bottom:1px;font-size:var(--t-caption)}
  .trust .t small{font-size:var(--t-nano);color:var(--muted)}

  /* §3.10–3.15 Accordions */
  .acc{border-bottom:1px solid var(--line)}
  .acc:first-of-type{border-top:1px solid var(--line)}
  .acc summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 0;
    font-family:var(--font-display);font-size:var(--t-small);font-weight:600;letter-spacing:var(--tracking-wide);
    text-transform:uppercase;color:var(--ink);
  }
  .acc summary::-webkit-details-marker{display:none}
  .acc .ico{
    width:18px;height:18px;position:relative;flex:none;
  }
  .acc .ico::before, .acc .ico::after{
    content:"";position:absolute;background:var(--ink);
    inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%,-50%);
  }
  .acc .ico::before{width:12px;height:1.5px}
  .acc .ico::after{width:1.5px;height:12px;transition:transform .2s}
  .acc[open] .ico::after{transform:translate(-50%,-50%) scaleY(0)}
  .acc .body{padding:0 0 24px;font-size:var(--t-small);line-height:1.65;color:var(--body)}
  .acc .body p{margin:0 0 10px}
  .acc .body p:last-child{margin-bottom:0}
  .acc .body a{color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color .15s}
  .acc .body a:hover{border-bottom-color:var(--accent-ink)}
  /* Specs table */
  .specs{width:100%;border-collapse:collapse;font-size:var(--t-caption)}
  .specs th{
    width:35%;text-align:left;font-weight:400;color:var(--muted);
    padding:10px 16px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;
  }
  .specs td{padding:10px 0;border-bottom:1px solid var(--line)}
  .specs tr:last-child th, .specs tr:last-child td{border-bottom:0}
  .specs td a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px;cursor:pointer}
  .specs td a:hover{border-bottom-color:var(--accent-ink);color:var(--accent-ink)}

  /* ============================================================
     CAROUSELS — full-bleed (similar / bestsellers / recently viewed)
     ============================================================ */
  .reel-section{padding:0 var(--pad);max-width:var(--w-shell);margin:var(--space-section) auto 0}
  .reel-head{
    display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 var(--s-6);
  }
  .reel-head .title{
    font-family:var(--font-display);font-size:var(--t-h3);font-weight:var(--weight-display, 500);
    letter-spacing:var(--tracking-display, -0.025em);line-height:1.05;margin:0;
  }
  .reel-head .sub{color:var(--muted);font-size:var(--t-caption);margin-top:6px}
  .reel-head .right{display:flex;align-items:center;gap:20px}
  .reel-head .seeall{font-size:var(--t-caption);letter-spacing:var(--tracking-wide);border-bottom:1px solid var(--ink);padding-bottom:2px;cursor:pointer}
  .reel-head .arrows{display:flex;gap:6px}
  .reel-head .arrows button{
    width:44px;height:44px;border:1px solid var(--line-2);background:var(--paper);
    border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
    transition:all .15s;
  }
  .reel-head .arrows button:hover{border-color:var(--ink);background:var(--ink);color:var(--cta-fg)}
  .reel-head .arrows svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

  /* Bleed the carousel track to viewport edges, keep first card aligned with shell */
  .reel-track-wrap{
    width:100vw;margin-left:calc(50% - 50vw);
    padding-left:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
    padding-right:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
    overflow:hidden;
  }
  .reel-track{
    display:grid;gap:16px;grid-auto-flow:column;
    grid-auto-columns:calc((100% - 16px*3)/4);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:4px;
    /* allow content to bleed past the right padding */
    margin-right:calc(-1 * max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad))));
    padding-right:max(var(--pad), calc((100vw - var(--w-shell)) / 2 + var(--pad)));
  }
  .reel-track::-webkit-scrollbar{display:none}
  .pcard{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;cursor:pointer}
  .pcard .img{aspect-ratio:3/4;background:var(--paper-2);position:relative;overflow:hidden}
  .pcard .img .ph{
    position:absolute;inset:0;
    background:
      linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%),
      radial-gradient(ellipse at var(--ph-x,55%) var(--ph-y,40%), rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 60%);
  }
  .pcard .crop{
    position:absolute;bottom:8px;left:10px;right:10px;
    font-size:var(--t-nano);color:rgba(0,0,0,.4);
    letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums;
    display:flex;justify-content:space-between;
  }
  .pcard .badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2}
  .pcard .badges span{font-size:var(--t-super-nano);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:3px 7px;background:var(--paper);color:var(--ink);border-radius:var(--radius-xs)}
  .pcard .badges .sale{background:var(--accent);color:var(--cta-fg)}
  .pcard .badges .new{background:var(--ink);color:var(--cta-fg)}
  .pcard .badges .hit{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .pcard .wish{
    position:absolute;top:10px;right:10px;z-index:2;
    width:30px;height:30px;background:var(--surface-translucent);border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;
  }
  .pcard .wish svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.5}
  .pcard .meta{padding:14px 2px 6px;display:flex;flex-direction:column;gap:6px}
  .pcard .meta .title{font-size:var(--t-caption);font-weight:400;color:var(--ink)}
  .pcard .meta .price{display:flex;align-items:baseline;gap:8px}
  .pcard .meta .now{font-size:var(--t-caption);font-weight:600;font-variant-numeric:tabular-nums}
  .pcard .meta .was{font-size:var(--t-micro);color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
  .pcard .meta .swatches{display:flex;gap:4px;margin-top:2px}
  .pcard .meta .swatches i{width:11px;height:11px;border-radius:50%;border:1px solid var(--line-2);display:inline-block}

  /* ============================================================
     MODALS / POPOVERS / OFF-CANVAS
     (.scrim/.dialog/.field/.field-row/.submit-row now live in
      20-components/one-click-modal.css)
     ============================================================ */

  /* Tabs (size chart) */
  .tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:18px}
  .tabs button{
    padding:12px 18px;background:none;border:0;border-bottom:2px solid transparent;
    font-family:inherit;font-size:var(--t-caption);letter-spacing:var(--tracking-wide);cursor:pointer;color:var(--muted);font-weight:500;
  }
  .tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
  .tab-pane{display:none}
  .tab-pane.on{display:block}
  table.size-chart{width:100%;border-collapse:collapse;font-size:var(--t-caption);font-variant-numeric:tabular-nums}
  table.size-chart th, table.size-chart td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center}
  table.size-chart th{background:var(--paper-2);font-weight:500;color:var(--ink-2);text-transform:uppercase;font-size:var(--t-nano);letter-spacing:var(--tracking-wider)}
  table.size-chart td:first-child, table.size-chart th:first-child{text-align:left}

  /* Off-canvas (store map) */
  .offcanvas{
    position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);
    background:var(--paper);border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .25s ease;
    z-index:var(--z-dialog);display:flex;flex-direction:column;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    /* Hide while translated offscreen so the leftward box-shadow doesn't
       leak back into the viewport (same pattern as .drawer-right). */
    visibility:hidden;
  }
  .offcanvas.open, .offcanvas.is-open{transform:translateX(0);visibility:visible}
  .offcanvas .dh{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
  .offcanvas .dh h3{margin:0;font-family:var(--font-display);font-size:var(--t-body);font-weight:var(--weight-display,500)}
  .offcanvas .dc{font-size:var(--t-nano);color:var(--muted);border:1px solid var(--line);padding:4px 8px;letter-spacing:var(--tracking-wider);font-variant-caps:all-small-caps;font-weight:600;cursor:pointer;background:none}
  .offcanvas .map{
    aspect-ratio:4/3;background:
      linear-gradient(135deg,#E8E5DE 0%,#D8D3C8 100%),
      repeating-linear-gradient(45deg, transparent, transparent 24px, rgba(0,0,0,.04) 24px, rgba(0,0,0,.04) 25px);
    position:relative;display:flex;align-items:center;justify-content:center;
  }
  .offcanvas .map::before{
    content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
    width:24px;height:24px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 6px var(--accent-ring);
  }
  .offcanvas .map::after{
    content:"map · київ · ярославська";position:absolute;bottom:12px;right:14px;
    font-size:var(--t-super-nano);color:var(--ink-2);letter-spacing:var(--tracking-wide);
    background:rgba(255,255,255,.8);padding:3px 8px;border-radius:var(--radius-s);
  }
  .offcanvas .info{padding:20px;display:flex;flex-direction:column;gap:14px}
  .offcanvas .info .row{display:flex;align-items:flex-start;gap:12px;font-size:var(--t-caption);color:var(--ink)}
  .offcanvas .info .row svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.5;flex:none;margin-top:2px}
  .offcanvas .info .row b{display:block;font-weight:600;margin-bottom:2px}
  .offcanvas .info .row small{display:block;font-size:var(--t-micro);color:var(--muted);line-height:1.4}
  .offcanvas .info a.route{
    align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;
    padding:11px 18px;background:var(--ink);color:var(--cta-fg);
    font-size:var(--t-micro);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:600;cursor:pointer;
    border-radius:var(--radius-s);
  }
  .offcanvas .info a.route svg{stroke:var(--cta-fg)}

  /* Select-your-size popover */
  .popover{
    position:absolute;left:0;right:0;bottom:calc(100% + 12px);
    background:var(--paper);border:1px solid var(--ink);padding:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.18);z-index:var(--z-popover);
    display:none;
  }
  .popover.on{display:block}
  .popover::after{
    content:"";position:absolute;left:30px;top:100%;
    width:14px;height:14px;background:var(--paper);border:1px solid var(--ink);
    border-top:0;border-left:0;transform:rotate(45deg) translate(-50%,-50%);transform-origin:top left;
  }
  .popover h4{
    margin:0 0 12px;font-family:var(--font-display);font-size:var(--t-caption);font-weight:600;letter-spacing:var(--tracking-wide);
    text-transform:uppercase;color:var(--ink);
  }
  .popover .sizes{margin-bottom:0}
  .bb-actions{position:relative}

  /* ============================================================
     STICKY BUY (mobile)
     ============================================================ */
  .sticky-buy{
    position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);
    padding:10px 14px;z-index:var(--z-overlay);display:none;gap:10px;align-items:center;
    box-shadow:0 -10px 30px rgba(0,0,0,.08);
  }
  .sticky-buy .price{font-size:var(--t-small);font-weight:600;font-variant-numeric:tabular-nums}
  .sticky-buy .btn-primary{flex:1;padding:14px 16px;font-size:var(--t-micro)}

  /* ============================================================
     MOBILE FRAME
     ============================================================ */
  body.mobile-mode{background:var(--surface-recede);padding:20px 0}
  body.mobile-mode .desktop-only{display:none}
  body.mobile-mode .mobile-only{display:block}
  body.mobile-mode main{max-width:390px;margin:0 auto;background:var(--paper);box-shadow:var(--shadow-floating);overflow:hidden;border-radius:var(--radius-frame)}
  body.mobile-mode footer{margin-top:40px;padding:40px 20px 20px}
  body.mobile-mode .shell{padding:0 16px}
  body.mobile-mode .pdp-hero{grid-template-columns:1fr;gap:var(--s-5)}
  body.mobile-mode .pdp-gallery{grid-template-columns:1fr;margin-left:0}
  body.mobile-mode .buybox{position:static}
  body.mobile-mode .buybox{padding:0}
  body.mobile-mode .reel-section{padding:0 16px;margin-top:var(--s-7)}
  body.mobile-mode .reel-track{grid-auto-columns:calc((100% - 12px)/2);gap:12px}
  body.mobile-mode .reel-track-wrap{padding:0 16px}
  body.mobile-mode .util, body.mobile-mode .nav, body.mobile-mode .header .row1 .tool.phone, body.mobile-mode .header .row1 .tool.hours, body.mobile-mode .header .row1 .tool.wishlist{display:none}
  body.mobile-mode .header .row1{grid-template-columns:auto 1fr auto auto;gap:14px}
  body.mobile-mode .search-btn{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center}
  body.mobile-mode .search-btn span, body.mobile-mode .search-btn .kbd{display:none}
  body.mobile-mode .hamburger{display:inline-flex}
  body.mobile-mode .logo{font-size:var(--t-h4)}
  body.mobile-mode .sticky-buy{display:flex;position:absolute}
  body.mobile-mode .trust{grid-template-columns:1fr;border:1px solid var(--line)}
  body.mobile-mode .trust .t{border-right:none;border-bottom:1px solid var(--line);padding:14px 16px}
  body.mobile-mode .trust .t:last-child{border-bottom:none;padding-left:16px}
  body.mobile-mode .reel-head{flex-direction:column;align-items:flex-start;gap:14px}
  body.mobile-mode .reel-head .right{align-self:flex-end}

  .mobile-only{display:none}
  /* hamburger base: 44×44 tap target (bars are 22px wide centered via gap) */
  .hamburger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;padding:0;cursor:pointer;gap:5px}
  .hamburger span{display:block;height:1.5px;background:var(--ink);width:22px}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:1100px){
    /* Wave-06b: include [data-hero="contained"] override to beat its specificity */
    .pdp-hero, [data-hero="contained"] .pdp-hero{grid-template-columns:1fr;gap:var(--s-7)}
    .pdp-gallery{margin-left:0}
    .reel-track{grid-auto-columns:calc((100% - 16px*2)/3)}
    .buybox{position:static}
  }
  @media (max-width:768px){
    /* Wave-06b polish: keep the floating header strictly above PDP content
       (photos, badges, buybox). The pre-existing --z-overlay/80 is already
       above all PDP z-indexes, but user-reported overlap warrants belt-and-
       suspenders. */
    .shell--header.is-floating{z-index:calc(var(--z-overlay) + 1)}
    .header .row1{grid-template-columns:auto 1fr auto;gap:10px}
    .tool.phone, .tool.hours, .tool.wishlist{display:none}
    .search-btn{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center}
    .search-btn span, .search-btn .kbd{display:none}
    .nav{overflow-x:auto;justify-content:flex-start;padding:12px 0;gap:20px}
    .util{display:none}
    /* Wave-06b polish: PDP photo grid → swipeable single-photo carousel on mobile.
       Was: grid-template-columns:1fr (1-up stack). Now: flex row with
       scroll-snap so one photo fills the viewport and the user swipes through. */
    .pdp-gallery{
      display:flex;
      flex-direction:row;
      gap:0;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
      -ms-overflow-style:none;
      touch-action:pan-x;
      -webkit-overflow-scrolling:touch;
      margin-inline:calc(-1 * var(--pad,16px));
    }
    .pdp-gallery::-webkit-scrollbar{display:none}
    .pdp-gallery > .tile{
      flex:0 0 100%;
      scroll-snap-align:center;
      aspect-ratio:3/4;
    }
    .reel-track{grid-auto-columns:calc((100% - 12px)/2);gap:12px}
    .size-links{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr}
    .sticky-buy{display:flex}
  }
  /* Wave-06b: reel-head at ≤600px — hide arrows (swipe is the UX), stack vertically.
     reel-section gets overflow-x:clip to prevent sub-pixel scrollWidth inflation. */
  @media (max-width:600px){
    .reel-section{overflow-x:clip}
    .reel-head{flex-direction:column;align-items:flex-start;gap:10px}
    .reel-head .right{align-self:stretch;justify-content:space-between}
    .reel-head .arrows{display:none}
    .reel-track{grid-auto-columns:calc((100% - 8px)/2);gap:8px}
  }

  /* ============================================================
     SOLD-OUT VARIANT — disabled CTA + related-categories list
     ============================================================ */
  .btn-primary[disabled],
  .btn-primary[data-state="disabled"]{
    background:var(--paper-2);color:var(--muted);
    border-color:var(--line);cursor:not-allowed;
  }
  .btn-primary[disabled]:hover,
  .btn-primary[data-state="disabled"]:hover{
    background:var(--paper-2);color:var(--muted);border-color:var(--line);
  }

  .bb-related{margin-top:2px}
  .bb-related-head{
    font-size:var(--t-nano);letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-bottom:10px;
  }
  .bb-related-list{
    list-style:none;margin:0;padding:0;
    border-top:1px solid var(--line);
  }
  .bb-related-list li{border-bottom:1px solid var(--line)}
  .bb-related-list a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 4px;font-size:var(--t-small);color:var(--ink);cursor:pointer;
    transition:color .15s, transform .15s;
  }
  .bb-related-list a:hover{color:var(--accent-ink);transform:translateX(4px)}
  .bb-related-list a svg{
    width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none;
    transition:transform .15s;
  }
  .bb-related-list a:hover svg{transform:translateX(4px)}

  /* No zoom affordance on sold-out gallery tiles — product isn't purchasable */
  body[data-page="pdp-soldout"] .tile{cursor:default}
  body[data-page="pdp-soldout"] .tile::after{display:none}

/* ───────── Mobile (≤ 767px) — PDP photo carousel ───────── */
@media (max-width: 767px) {
  .pdp-reel,
  .pdp-photos-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: 0;
  }

  .pdp-reel::-webkit-scrollbar,
  .pdp-photos-grid::-webkit-scrollbar { display: none; }

  .pdp-reel > picture,
  .pdp-reel > .ph,
  .pdp-photos-grid > picture,
  .pdp-photos-grid > .ph {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }

  .pdp-photo-counter {
    position: absolute;
    inset-inline-end: var(--s-3);
    inset-block-end: var(--s-3);
    background: var(--surface-translucent);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-size: var(--t-micro);
  }

  /* Buy box flows below photos */
  .pdp-layout {
    grid-template-columns: 1fr;
  }

  .pdp-buybox {
    position: static;
    margin-block-start: var(--s-5);
  }

  /* Size selector tap targets */
  .pdp-sizes .size {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ───────── PDP tap-target fixes (Wave-06b Phase 4) ───────── */

/* Breadcrumb <a> links: matched as interactive by test selector ([data-behavior]
   on the nav + <a> tags). Ensure 44×44 tap target using min dimensions.
   Applied globally — .crumbs appears on product + product-soldout pages. */
.crumbs a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

/* Price [data-behavior] spans/divs are JS-hook targets used for dynamic rendering,
   not interactive UX elements — but the test selector matches [data-behavior].
   Scope to pdp body to avoid side effects on other pages. */
body[data-page="pdp"] .bb-price,
body[data-page="pdp-soldout"] .bb-price {
  min-height: 44px;
  align-items: center;
}

/* Installments block: data-behavior="pdp-installments" — 41.9px — bump to 44px */
body[data-page="pdp"] .bb-instal,
body[data-page="pdp-soldout"] .bb-instal {
  min-height: 44px;
}

body[data-page="pdp"] .bb-price [data-behavior],
body[data-page="pdp-soldout"] .bb-price [data-behavior] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Size chips (.size buttons): padding+border gives ~41px height — bump to 44px */
body[data-page="pdp"] .size,
body[data-page="pdp-soldout"] .size {
  min-height: 44px;
  min-width: 44px;
}

/* Size-link buttons: currently 39px tall — bump to 44px */
body[data-page="pdp"] .size-link,
body[data-page="pdp-soldout"] .size-link {
  min-height: 44px;
}

/* Store pin button (avail-r .pin): 34×34 — bump to 44×44 */
body[data-page="pdp"] .avail-r .pin,
body[data-page="pdp-soldout"] .avail-r .pin {
  min-width: 44px;
  min-height: 44px;
}

/* Store address link (avail-r .addr): 29px — bump to 44px */
body[data-page="pdp"] .avail-r .addr,
body[data-page="pdp-soldout"] .avail-r .addr {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Specs table <a> links: inline filter/discovery links that are picked up
   as interactive elements. Give them 44×44 tap area.
   Note: min-width is needed for short words like "Міді", "Креп". */
body[data-page="pdp"] .specs td a,
body[data-page="pdp-soldout"] .specs td a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* Reel "see all" links: 22px tall text links — bump to 44px */
body[data-page="pdp"] .reel-head .seeall,
body[data-page="pdp-soldout"] .reel-head .seeall {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Offcanvas close button (.dc): 37×24px — visibility:hidden but offsetParent != null.
   Bump to 44×44 to clear tap-target check. */
body[data-page="pdp"] .offcanvas .dc,
body[data-page="pdp-soldout"] .offcanvas .dc {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ===== 30-pages/search.css ===== */
/* =================================================================
   search.css — three search modes share this stylesheet:
     · search-0-main.html    (Mode A — empty query landing)
     · search-1-results.html (Mode B — with results, catalog-like)
     · search-2-empty.html   (Mode C — no results)
   Rules are scoped via body[data-page^="search"]. The Mode-B page
   reuses catalog .catx-* classes for the controls/sidebar/grid; those
   live in catalog.css and require no override here.
   ================================================================= */

body[data-page^="search"] .tpl-search-main,
body[data-page^="search"] .tpl-search-empty{
  padding-block: var(--s-5) var(--s-8);
  display: flex; flex-direction: column;
  gap: var(--s-7);
}

/* ---- Breadcrumb (matches account.css convention) ---- */
body[data-page^="search"] .search-breadcrumb{
  display:flex; gap: var(--s-2); list-style:none; margin:0; padding:0;
  font-size: var(--t-micro); color: var(--muted);
  letter-spacing: var(--tracking-wide);
  overflow-x:auto; white-space:nowrap;
}
body[data-page^="search"] .search-breadcrumb a{ color: var(--muted); }
body[data-page^="search"] .search-breadcrumb a:hover{ color: var(--ink); }
body[data-page^="search"] .search-breadcrumb [aria-current="page"]{ color: var(--ink); }
body[data-page^="search"] .search-breadcrumb li + li::before{ content:"/"; margin-right: var(--s-2); color: var(--line-2); }

/* =================================================================
   Mode A & C — common section blocks
   ================================================================= */

/* Search hero — compact title + large input */
body[data-page^="search"] .search-hero{
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-2) 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
body[data-page^="search"] .search-hero h1{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px); font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  line-height: 1.1; margin: 0;
}
body[data-page^="search"] .search-hero__form{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  inline-size: min(100%, 720px);
  margin-block-start: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
body[data-page^="search"] .search-hero__form--inline{ margin-inline: auto; }
body[data-page^="search"] .search-hero__icon{
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 14px; color: var(--muted);
}
body[data-page^="search"] .search-hero__icon svg{ width: 18px; height: 18px; }
body[data-page^="search"] .search-hero__form input[type="search"]{
  border: 0; background: transparent; padding: 16px 8px 16px 0;
  font: inherit; font-size: 16px; color: var(--ink);
  outline: 0; min-width: 0;
}
body[data-page^="search"] .search-hero__form input[type="search"]::placeholder{ color: var(--muted); }
body[data-page^="search"] .search-hero__form button,
body[data-page^="search"] .search-hero__submit{
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-inline-start: 1px solid var(--ink);
  background: var(--cta-bg); color: var(--cta-fg);
  padding: 0 24px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .15s;
}
body[data-page^="search"] .search-hero__form button:hover{ background: var(--cta-bg-hover); }
body[data-page^="search"] .search-hero__form button svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
body[data-page^="search"] .search-hero__hint{
  font-size: var(--t-caption); color: var(--muted);
  max-inline-size: 56ch; margin: 0;
}

/* ---- Popular + Trending side-by-side row ---- */
body[data-page^="search"] .search-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px){
  body[data-page^="search"] .search-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  /* Trending defaults to 2 columns >720px; force single column when nested in the row */
  body[data-page^="search"] .search-row .search-trending{ grid-template-columns: 1fr; }
}

/* ---- Generic section block (popular / trending / RV / fallback) ---- */
body[data-page^="search"] .search-block{ display: flex; flex-direction: column; gap: var(--s-4); }
body[data-page^="search"] .search-block__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
}
body[data-page^="search"] .search-block__head h2{
  font-family: var(--font-display);
  font-size: var(--t-h4); font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.015em);
  margin: 0; line-height: 1.15;
}
body[data-page^="search"] .search-block__meta{
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted); letter-spacing: var(--tracking-wide);
}
body[data-page^="search"] .search-block__more{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
body[data-page^="search"] .search-block__more:hover{
  color: var(--accent-ink); border-bottom-color: var(--accent-ink);
}

/* ---- Search chips (popular / related) ---- */
body[data-page^="search"] .search-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
body[data-page^="search"] .search-chip{
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: var(--t-caption);
  letter-spacing: var(--tracking-wide);
  cursor: pointer; text-decoration: none;
  transition: all .15s;
}
body[data-page^="search"] .search-chip:hover{
  background: var(--ink); color: var(--cta-fg); border-color: var(--ink);
}

/* ---- Trending list ---- */
body[data-page^="search"] .search-trending{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 720px){
  body[data-page^="search"] .search-trending{ grid-template-columns: 1fr 1fr; }
}
body[data-page^="search"] .search-trend-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
body[data-page^="search"] .search-trend-row:hover{ background: var(--paper-2); }
body[data-page^="search"] .search-trend-row .rank{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
body[data-page^="search"] .search-trend-row .term{
  font-size: var(--t-body); color: var(--ink); font-weight: 500;
}
body[data-page^="search"] .search-trend-row .delta{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-success-ink); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
body[data-page^="search"] .search-trend-row .delta.down{ color: var(--muted); }

/* ---- Recently-viewed / fallback grid (uses .catx-grid global rules) ---- */
body[data-page^="search"] .search-rv-grid,
body[data-page^="search"] .search-fallback-grid{
  display: grid; gap: 14px 12px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px){
  body[data-page^="search"] .search-rv-grid,
  body[data-page^="search"] .search-fallback-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  body[data-page^="search"] .search-rv-grid,
  body[data-page^="search"] .search-fallback-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px){
  body[data-page^="search"] .search-rv-grid,
  body[data-page^="search"] .search-fallback-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* ---- Category recovery (flat trees) ---- */
body[data-page^="search"] .search-categories__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-6);
}
@media (min-width: 600px){
  body[data-page^="search"] .search-categories__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  body[data-page^="search"] .search-categories__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  body[data-page^="search"] .search-categories__grid{ grid-template-columns: repeat(5, 1fr); }
}
body[data-page^="search"] .search-categories__tree h3{
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
body[data-page^="search"] .search-categories__tree ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
body[data-page^="search"] .search-categories__tree a{
  font-size: var(--t-caption); color: var(--body);
  text-decoration: none; padding: 4px 0;
}
body[data-page^="search"] .search-categories__tree a:hover{
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}

/* =================================================================
   Mode B — search results intro + scope tabs + refine form
   (Uses catalog .catx-* classes for the rest)
   ================================================================= */

body[data-page="search-results"] .search-intro-wrap{ padding: 16px 0 0; }
body[data-page="search-results"] .search-intro{
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 8px;
}
body[data-page="search-results"] .search-intro__title{
  font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  line-height: 1.15; margin: 0;
}
body[data-page="search-results"] .search-intro__title mark{
  background: var(--accent-wash); color: var(--accent-ink);
  padding: 0 0.1em; border-radius: 2px;
}

/* Scope tabs */
body[data-page="search-results"] .search-scope-tabs{
  display: flex; flex-wrap: wrap; gap: 0;
  list-style: none; padding: 0; margin: 0;
  border-bottom: 1px solid var(--line);
}
body[data-page="search-results"] .search-scope-tabs li{ list-style: none; }
body[data-page="search-results"] .search-scope-tabs a{
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 12px 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--body); text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .15s;
}
body[data-page="search-results"] .search-scope-tabs a span{
  font-variant-numeric: tabular-nums; color: var(--muted);
}
body[data-page="search-results"] .search-scope-tabs a:hover{ color: var(--ink); }
body[data-page="search-results"] .search-scope-tabs a[aria-current="page"]{
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--ink);
  margin-block-end: -1px;
}
body[data-page="search-results"] .search-scope-tabs a[aria-current="page"] span{ color: var(--ink); }

/* Refine form (compact inline version of search-hero form) */
body[data-page="search-results"] .search-refine{
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: stretch;
  inline-size: min(100%, 540px);
  border: 1px solid var(--line);
  background: var(--paper);
}
body[data-page="search-results"] .search-refine__icon{
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 12px; color: var(--muted);
}
body[data-page="search-results"] .search-refine__icon svg{ width: 16px; height: 16px; }
body[data-page="search-results"] .search-refine input[type="search"]{
  border: 0; background: transparent; padding: 12px 8px 12px 0;
  font: inherit; font-size: var(--t-body); color: var(--ink); outline: 0; min-width: 0;
}
body[data-page="search-results"] .search-refine button{
  border: 0; border-inline-start: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  padding: 0 18px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .15s, color .15s;
}
body[data-page="search-results"] .search-refine button:hover{
  background: var(--ink); color: var(--cta-fg);
}

/* =================================================================
   Mode B — Article matches & Related searches blocks
   ================================================================= */

body[data-page="search-results"] .search-articles-wrap{ margin-top: var(--space-section); }
body[data-page="search-results"] .search-articles__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin: 0 0 var(--s-4);
  border-bottom: 1px solid var(--ink); padding-bottom: 12px;
}
body[data-page="search-results"] .search-articles__head h2{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.015em);
  line-height: 1.15; margin: 0;
}
body[data-page="search-results"] .search-articles__more{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
body[data-page="search-results"] .search-articles__more:hover{
  color: var(--accent-ink); border-bottom-color: var(--accent-ink);
}
body[data-page="search-results"] .search-articles__list{
  display: grid; grid-template-columns: 1fr; gap: 18px;
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 768px){
  body[data-page="search-results"] .search-articles__list{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px){
  body[data-page="search-results"] .search-articles__list{ grid-template-columns: repeat(4, 1fr); }
}
body[data-page="search-results"] .search-article-card{
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink); cursor: pointer;
}
body[data-page="search-results"] .search-article-card__photo{ aspect-ratio: 16 / 9; }
body[data-page="search-results"] .search-article-card__photo .ph{ position: relative; inset: 0; height: 100%; }
body[data-page="search-results"] .search-article-card__body{ padding: 12px 4px 0; }
body[data-page="search-results"] .search-article-card__eyebrow{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 6px;
}
body[data-page="search-results"] .search-article-card h3{
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; line-height: 1.25;
  margin: 0 0 6px;
}
body[data-page="search-results"] .search-article-card p{
  margin: 0; font-size: var(--t-caption); color: var(--body); line-height: 1.45;
}
body[data-page="search-results"] .search-article-card:hover h3{
  text-decoration: underline; text-underline-offset: 3px;
}

body[data-page="search-results"] .search-related{ margin-top: var(--space-section); }
body[data-page="search-results"] .search-related__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin: 0 0 var(--s-3);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
body[data-page="search-results"] .search-related__head h2{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.015em);
  line-height: 1.15; margin: 0;
}
body[data-page="search-results"] .search-related__meta{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: var(--tracking-wide);
}
body[data-page="search-results"] .search-related__chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}

/* =================================================================
   Mode C — No-results hero
   ================================================================= */

body[data-page="search-empty"] .search-noresults{
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: 16px 0 8px;
  inline-size: min(100%, 720px);
  margin-inline: auto;
}
body[data-page="search-empty"] .search-noresults__heading{
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0;
}
body[data-page="search-empty"] .search-noresults__icon{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--muted);
}
body[data-page="search-empty"] .search-noresults__icon svg{
  width: 26px; height: 26px;
}
body[data-page="search-empty"] .search-noresults__title{
  font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: var(--weight-display, 500);
  letter-spacing: var(--tracking-display, -.02em);
  line-height: 1.15; margin: 0; flex: 1 1 auto;
}
body[data-page="search-empty"] .search-noresults__title mark{
  background: var(--accent-wash); color: var(--accent-ink);
  padding: 0 0.1em; border-radius: 2px;
}
body[data-page="search-empty"] .search-noresults__lede{
  margin: 0; color: var(--body); max-width: 64ch;
  font-size: var(--t-body); line-height: var(--lh-body);
}
body[data-page="search-empty"] .search-noresults__tips{
  margin-top: 4px;
  inline-size: min(100%, 560px);
  text-align: start;
}
body[data-page="search-empty"] .search-noresults__tips-label{
  display: block; font-weight: 600;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
body[data-page="search-empty"] .search-noresults__tips-list{
  list-style: disc; padding-left: 22px; margin: 0;
  font-size: var(--t-caption); color: var(--body); line-height: 1.7;
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */

/* Breadcrumb links — short words like "Пошук" (40px) need min-width too */
body[data-page^="search"] .search-breadcrumb a{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}

/* Search chips — bump to 44px */
body[data-page^="search"] .search-chip{
  min-height: 44px;
}

/* Category tree links (search-0-main and search-2-empty "browse categories") */
body[data-page^="search"] .search-categories__tree a{
  display: flex; align-items: center; min-height: 44px;
}

/* "More" links — small mono text links */
body[data-page^="search"] .search-block__more,
body[data-page="search-results"] .search-articles__more{
  display: inline-flex; align-items: center; min-height: 44px;
  padding-bottom: 0; /* reset the border-bottom padding hack */
  border-bottom: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
/* ===== 30-pages/static.css ===== */
/* ===== 30-pages/static.css — page-specific overrides (Task 28) ===== */

/* ===== from pages/static-left.html (inline <style>) ===== */
/* =============================================================
   Static-page-specific tokens + overrides
   See _src/partials/_DIVERGENCES.md → "Base rules (Task 16 / Phase 3)"
   ============================================================= */
:root{
  --w-content:880px; --w-reading:680px;
  --t-h1:clamp(32px, 4.6vw, 56px);  /* static editorial: bigger H1 */
  --lh-tight:1.1;                    /* static: tighter heading leading */
  --notice-bg:#FFF6E5; --notice-line:#E8B948; --notice-ink:#7A4F00;
}

/* ============ Page-level basics — static only ============
   util / lang / nav chrome and .util .user accent palette inherited from
   _shared-discovery.css. Only static-specific additions live below. */
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Active "current page" indicator on util-bar links — static-only feature
   (homepage / catalog / pdp don't use aria-current on .util a). */
.util a[aria-current="page"]{color:var(--ink);font-weight:600;background-size:100% 1.5px}

/* ============ Page header (info hero) ============
   Editorial banner at top of static pages. Establishes section + title with
   warm surface, breadcrumb, optional eyebrow. Matches homepage's section-head
   typography while staking out a calmer page-title scale. */
.page-hero{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:var(--s-7) 0 var(--s-8);
  position:relative;
}
.page-hero .crumbs{
  display:flex;gap:8px;align-items:center;
  font-size:var(--t-micro);letter-spacing:var(--tracking-wide);color:var(--muted);
  margin-bottom:var(--s-5);
}
.page-hero .crumbs a{cursor:pointer;transition:color .15s}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .crumbs .sep{opacity:.45}
.page-hero .crumbs [aria-current="page"]{color:var(--ink-2)}

.page-hero .head{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-7);align-items:end;
}
.page-hero .eyebrow{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--accent-ink);font-weight:600;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
}
.page-hero .eyebrow::before{
  content:"";width:18px;height:1px;background:var(--accent);display:inline-block;
}
.page-hero h1{
  font-family:var(--font-display);
  font-size:var(--t-h1); font-weight:var(--weight-display, 500);
  letter-spacing:var(--tracking-display, -0.03em);
  line-height:var(--lh-tight);
  margin:0 0 var(--s-4); color:var(--ink);
  max-width:18ch;
  text-wrap:balance;
}
.page-hero .lead{
  font-size:var(--t-h6);line-height:1.55;color:var(--body);
  max-width:54ch;margin:0;
}

/* Quick facts row in hero (right side on desktop) */
.page-hero .facts{
  display:flex;gap:var(--s-7);align-items:flex-end;
}
.page-hero .facts .f{display:flex;flex-direction:column;gap:4px;min-width:90px}
.page-hero .facts .f b{
  font-family:var(--font-display);
  font-size:var(--t-h3); font-weight:var(--weight-display, 500);
  letter-spacing:-0.02em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.page-hero .facts .f small{
  font-size:var(--t-nano);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;
}

/* ============ Two-column body (default.tpl) ============ */
/* .body-wrap retired — vertical spacing now handled by `.tpl-default` margin (see Task 14). */
body[data-page="static-left"] .tpl-default{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:var(--s-8);
  align-items:start;
  margin-top:var(--s-7);
}
.tpl-default__sidebar{position:sticky;top:24px;align-self:start}
.tpl-default__main{min-width:0;max-width:var(--w-content)}

/* Sidebar: sub-pages list (pages_list plugin output) */
.subnav{
  border-top:1px solid var(--ink);
  padding-top:var(--s-4);
}
.subnav h3{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;margin:0 0 var(--s-3);
}
.subnav ul{list-style:none;margin:0;padding:0}
.subnav li{
  position:relative;
}
.subnav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 0;font-size:var(--t-small);color:var(--ink-2);
  border-bottom:1px solid var(--line);
  transition:color .15s, transform .15s;cursor:pointer;
  letter-spacing:.005em;
}
.subnav a:hover{color:var(--accent-ink);transform:translateX(6px)}
.subnav a .arr{font-size:var(--t-small);opacity:0;transition:opacity .15s, transform .15s;color:var(--muted)}
.subnav a:hover .arr{opacity:1;transform:translateX(2px)}
.subnav li[aria-current="page"] a{
  color:var(--ink);font-weight:600;
  padding-left:14px;
}
.subnav li[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;background:var(--accent);
}
.subnav li[aria-current="page"] a .arr{opacity:1;color:var(--pink-ink)}

/* Sidebar block beneath sub-pages — quick contact for delivery questions */
.aside-card{
  margin-top:var(--s-7);
  padding:var(--s-5);
  background:var(--ink);color:var(--on-ink-body);
  font-size:var(--t-caption);
}
.aside-card h4{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--cta-fg);font-weight:600;margin:0 0 12px;
}
.aside-card p{margin:0 0 12px;line-height:1.5}
.aside-card .num{
  font-family:var(--font-display);font-size:var(--t-h6);color:var(--cta-fg);font-weight:500;
  letter-spacing:0.005em; display:block;margin-bottom:2px;
  font-variant-numeric:tabular-nums;
}
.aside-card .hours{font-size:var(--t-nano);color:var(--on-ink-muted);letter-spacing:var(--tracking-wide)}
.aside-card .chat{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:8px 14px;background:var(--accent);color:var(--cta-fg);
  font-size:var(--t-nano);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  cursor:pointer;border:0;
}
.aside-card .chat:hover{background:var(--paper);color:var(--ink)}

/* ============ Body content (html_code/html_editor) ============ */
.body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--body)}
.body > *:first-child{margin-top:0}
.body p{margin:0 0 var(--s-4);max-width:64ch}
.body a:not(.btn){
  color:var(--accent-ink); border-bottom:1px solid var(--accent-wash);
  padding-bottom:1px; transition:border-color .15s;
}
.body a:not(.btn):hover{border-bottom-color:var(--accent-ink)}
.body strong{color:var(--ink);font-weight:600}

.body h2{
  font-family:var(--font-display);
  font-size:var(--t-h3); font-weight:var(--weight-display, 500);
  letter-spacing:var(--tracking-display, -0.02em);
  line-height:var(--lh-tight); color:var(--ink);
  margin:var(--s-9) 0 var(--s-5);
  display:flex;align-items:baseline;gap:14px;
}
.body h2:first-child{margin-top:0}
.body h2 .num{
  font-weight:500;
  font-size:var(--t-caption);color:var(--muted);letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.body h3{
  font-family:var(--font-display);
  font-size:var(--t-h5); font-weight:600; line-height:1.25;
  color:var(--ink); letter-spacing:-0.005em;
  margin:var(--s-6) 0 var(--s-3);
}
.body ul, .body ol{margin:0 0 var(--s-4);padding-left:0;list-style:none}
.body ul li{
  position:relative;padding:6px 0 6px 22px; max-width:64ch;
}
.body ul li::before{
  content:"";position:absolute;left:0;top:14px;
  width:8px;height:1px;background:var(--accent);
}
.body ol{counter-reset:ol;padding-left:0}
.body ol li{
  counter-increment:ol; position:relative; padding:6px 0 6px 38px; max-width:64ch;
}
.body ol li::before{
  content:counter(ol,decimal-leading-zero);
  position:absolute;left:0;top:7px;
  font-size:var(--t-nano); color:var(--accent-ink);
  letter-spacing:var(--tracking-wide); font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Time-sensitive notice (admin-managed alert).
   Callout signal comes from the warm-tinted --notice-bg + 1px outline + the
   filled circular ! icon — no side-stripe (project absolute ban). */
.notice{
  background:var(--notice-bg);
  border:1px solid var(--notice-line);
  padding:var(--s-5) var(--s-6);
  margin-bottom:var(--s-7);
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);
  align-items:start;
}
.notice .ico{
  width:32px;height:32px;border-radius:50%;
  background:var(--notice-line);color:var(--cta-fg);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--t-h6);
  flex:none;
}
.notice .body-t{font-size:var(--t-small);color:var(--notice-ink);line-height:1.55}
.notice .body-t strong{
  display:block;font-size:var(--t-small);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-weight:700;
  color:var(--notice-ink); margin-bottom:6px;
}
.notice .body-t p{margin:0;color:var(--notice-ink);max-width:none}
.notice .meta{
  font-size:var(--t-nano);
  letter-spacing:var(--tracking-wide);color:var(--notice-ink);opacity:.7;
  text-align:right;line-height:1.4;flex:none;
  font-variant-numeric:tabular-nums;
}

/* ============ Delivery method cards (structured layout) ============
   Per spec-static FR — payment/delivery info pages should use icon +
   heading + description per method, not just plain HTML. */
.methods{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
  margin:var(--s-5) 0 var(--s-7);
}
.method{
  background:var(--paper);
  border:1px solid var(--line);
  padding:var(--s-5);
  display:grid;
  grid-template-columns:48px 1fr auto;
  grid-template-areas:
    "icon  hd   price"
    "icon  desc desc"
    ".     meta meta";
  column-gap:var(--s-4);
  row-gap:var(--s-2);
  transition:border-color .15s, background .15s;
}
.method:hover{border-color:var(--ink);background:var(--paper-2)}
.method .ico{
  grid-area:icon;
  width:48px;height:48px;
  background:var(--paper-2);
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--ink);font-weight:600;text-align:center;line-height:1;
}
.method .ico.np{background:#E62B2B;color:var(--cta-fg);border-color:#E62B2B}
.method .ico.up{background:#FFCC00;color:var(--ink);border-color:#FFCC00}
.method .ico.ku{background:var(--ink);color:var(--cta-fg);border-color:var(--ink)}
.method .ico.in{background:var(--accent);color:var(--cta-fg);border-color:var(--accent)}
.method .hd{
  grid-area:hd;
  font-family:var(--font-display);
  font-size:var(--t-h6);font-weight:600;letter-spacing:-0.005em;
  color:var(--ink);line-height:1.2;margin:0;align-self:center;
}
.method .price{
  grid-area:price;align-self:center;
  font-size:var(--t-nano);
  letter-spacing:var(--tracking-wide);color:var(--ink);font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.method .price.free{color:var(--accent-ink)}
.method .desc{
  grid-area:desc;font-size:var(--t-caption);line-height:1.55;color:var(--body);margin:0;
}
.method .meta{
  grid-area:meta;
  display:flex;gap:var(--s-4);flex-wrap:wrap;
  margin-top:6px;padding-top:var(--s-3);
  border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--muted);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.method .meta span{display:inline-flex;align-items:center;gap:6px}
.method .meta span::before{
  content:""; width:5px;height:5px;border-radius:50%;
  background:var(--accent); display:inline-block;
}
.method .meta span.muted::before{background:var(--line-2)}

/* Delivery times — comparison table styled as a clean grid */
.timetable{
  margin:var(--s-5) 0 var(--s-6);
  border-top:2px solid var(--ink);
  font-variant-numeric:tabular-nums;
}
.timetable .row{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  align-items:baseline;gap:var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);
}
.timetable .row.head{
  font-size:var(--t-caption);
  letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--muted);
  padding:var(--s-3) 0;font-weight:600;
}
.timetable .row .reg{font-family:var(--font-display);font-size:var(--t-body);color:var(--ink);font-weight:500;letter-spacing:-0.005em}
.timetable .row .reg small{display:block;color:var(--muted);font-family:var(--font-sans);font-size:var(--t-micro);font-weight:400;margin-top:2px;letter-spacing:0}
.timetable .row .v{font-size:var(--t-small);color:var(--body)}
.timetable .row .v b{color:var(--ink);font-weight:600}
.timetable .row .v.free{color:var(--accent-ink);font-weight:600}

/* Related pages cross-link block */
.related{
  margin-top:var(--s-8);
  padding:var(--s-6) var(--s-6) var(--s-7);
  background:var(--paper-2);
  border:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);
}
.related h3{
  grid-column:1/-1;margin:0 0 var(--s-2);
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;color:var(--muted);font-weight:600;
}
.related a{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px;background:var(--paper);border:1px solid var(--line);
  cursor:pointer;transition:border-color .15s, transform .15s;
}
.related a:hover{border-color:var(--ink);transform:translateY(-1px)}
.related a .num{
  font-size:var(--t-nano);color:var(--muted);
  letter-spacing:var(--tracking-wide);flex:none;font-weight:500;padding-top:2px;
  font-variant-numeric:tabular-nums;
}
.related a .info b{
  display:block;font-family:var(--font-display);font-size:var(--t-body);
  font-weight:600;color:var(--ink);margin-bottom:2px;letter-spacing:-0.005em;
}
.related a .info small{font-size:var(--t-caption);color:var(--body);line-height:1.4}
.related a .arr{
  margin-left:auto;font-size:var(--t-h6);color:var(--accent-ink);align-self:center;
  transition:transform .15s;
}
.related a:hover .arr{transform:translateX(3px)}

/* Body footnote (last-updated) */
.body-footnote{
  margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--t-nano);letter-spacing:var(--tracking-wide);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.body-footnote a{cursor:pointer}
.body-footnote a:hover{color:var(--ink)}

/* Static-page override: footer hugs content (no extra margin) */
/* footer{margin-top:0} retired — Task 13 wants 96px gap before footer on static pages (canonical rule applies). */

/* ============ Responsive ============ */
@media (max-width:1024px){
  .tpl-default{grid-template-columns:200px 1fr;gap:var(--s-6)}
  .page-hero .head{grid-template-columns:1fr}
  .page-hero .facts{margin-top:var(--s-5)}
  .methods{grid-template-columns:1fr}
}
@media (max-width:768px){
  .util, .header .row1 .tool.phone, .header .row1 .tool.hours, .header .row1 .tool.wishlist{display:none}
  /* Wave-06b: .nav removed from this hide list — at 768px nav shows as horizontal
     scroll list (via _shared-discovery.css max-width:768 override). Hiding it here
     was unscoped and caused nav-state="mixed-or-none" on ALL pages at bp-768. */
  .header .row1{grid-template-columns:auto 1fr auto}
  .tpl-default{grid-template-columns:1fr;gap:var(--s-6)}
  .tpl-default__sidebar{position:static;order:2}
  .tpl-default__main{order:1}
  .related{grid-template-columns:1fr}
  .timetable .row{grid-template-columns:1fr;gap:6px}
  .page-hero{padding:var(--s-6) 0}
  /* Wave-06b: facts row wraps at 768px so min-width:90px items don't overflow narrow viewports */
  .page-hero .facts{flex-wrap:wrap;gap:var(--s-5)}
  /* methods grid stays 1fr (from 1024px rule) — ensure method elements shrink to fit */
  .methods, .method{min-width:0}
  /* method inner grid: collapse price column (auto) into row 2 at narrow widths */
  .method{grid-template-columns:48px 1fr;grid-template-areas:"icon hd" "icon desc" ". meta"}
  .method .price{grid-area:meta;padding-top:0}
}

/* ===== from pages/static-right.html (inline <style>) — overrides only =====
   Tokens, .util/.lang, .nav, .page-hero, .subnav, .aside-card, .body,
   .notice, .methods, .timetable, .related, .body-footnote,
   and the default @media responsive blocks all live in the static-left
   block above. Only the right-sidebar layout + .body-head selectors
   below are unique to static-right. */

/* ============ Two-column body — right-sidebar variant ============
   Scoped to static-right.html via body[data-page]. Shared .tpl-default__sidebar /
   .tpl-default__main rules live in the static-left block above. */
body[data-page="static-right"] .tpl-default{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:var(--s-8);
  align-items:start;
  margin-top:var(--s-7);
}
body[data-page="static-right"] .tpl-default > .tpl-default__main{grid-column:1;grid-row:1}
body[data-page="static-right"] .tpl-default > .tpl-default__sidebar{grid-column:2;grid-row:1}

/* Body header — breadcrumb + H1 + lead inside main column
   (replaces the full-bleed page-hero used in the left-sidebar variant) */
.body-head{
  margin:0 0 var(--s-7);
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--line);
}
.body-head .crumbs{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:var(--t-micro);letter-spacing:var(--tracking-wide);color:var(--muted);
  margin:0 0 var(--s-5);
}
.body-head .crumbs a{cursor:pointer;transition:color .15s}
.body-head .crumbs a:hover{color:var(--ink)}
.body-head .crumbs .sep{opacity:.45}
.body-head .crumbs [aria-current="page"]{color:var(--ink-2)}
.body-head .eyebrow{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;font-weight:600;
  color:var(--pink-ink);margin:0 0 var(--s-3);
  display:inline-flex;align-items:center;gap:8px;
}
.body-head .eyebrow::before{
  content:"";width:18px;height:1px;background:var(--accent);display:inline-block;
}
.body-head h1{
  font-family:var(--font-display);
  font-size:var(--t-h1); font-weight:var(--weight-display, 500);
  line-height:1.05; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 var(--s-4);
  text-wrap:balance;
}
.body-head .lead{
  font-size:var(--t-h6);line-height:1.55;color:var(--body);
  max-width:54ch;margin:0;
}

/* ============ Responsive — right-sidebar variant ============ */
@media (max-width:1024px){
  .tpl-default{grid-template-columns:1fr 200px;gap:var(--s-6)}
}
@media (max-width:768px){
  .tpl-default{grid-template-columns:1fr;gap:var(--s-6)}
  .tpl-default > .tpl-default__main{grid-column:1;grid-row:1}
  .tpl-default > .tpl-default__sidebar{grid-column:1;grid-row:2}
  .body-head{margin-bottom:var(--s-6);padding-bottom:var(--s-5)}
}

/* ===== from pages/static-single.html (inline <style>) ===== */
/* =============================================================
   Variant C — wide.tpl (full-width, no sidebar)
   Legal / single-column editorial pages: Privacy, Terms, Cookies.
   ============================================================= */
.tpl-wide{
  max-width:var(--w-content);
  margin:var(--s-7) auto 0;
  padding:0;
}
.tpl-wide > .body{max-width:none}

/* Table of contents — in-flow aside for long legal pages */
.toc{
  margin:var(--s-6) 0 var(--s-7);
  padding:var(--s-5) var(--s-6);
  background:var(--paper-2);
  border-top:1px solid var(--ink-2);
}
.toc h2{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;
  margin:0 0 var(--s-3);
  /* Override .body h2 — TOC heading is a label, not a section heading */
  display:block;border:0;padding:0;
}
.toc h2::before{content:none}
.toc ol{
  counter-reset:toc;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px var(--s-5);
}
.toc ol li{
  counter-increment:toc;
  position:relative;padding:4px 0 4px 32px;
  font-size:var(--t-small);line-height:1.4;
}
.toc ol li::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:5px;
  font-size:var(--t-nano);
  color:var(--accent-ink);letter-spacing:var(--tracking-wide);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.toc ol a{
  color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
  cursor:pointer;
}
.toc ol a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-wash)}

/* SEO content footer — admin-managed text block (seo_content plugin) */
.seo-footer{
  margin-top:var(--s-8);
  padding:var(--s-6) 0 0;
  border-top:1px solid var(--line);
  font-size:var(--t-small);line-height:1.6;color:var(--body);
}
.seo-footer h2{
  font-size:var(--t-caption);letter-spacing:var(--tracking-wider);
  font-variant-caps:all-small-caps;
  color:var(--muted);font-weight:600;
  margin:0 0 var(--s-3);
  display:block;border:0;padding:0;
}
.seo-footer h2::before{content:none}
.seo-footer p{margin:0;max-width:72ch}
.seo-footer code{
  font-family:var(--font-mono);font-size:var(--t-micro);
  background:var(--paper-2);border:1px solid var(--line);
  padding:1px 5px;border-radius:var(--radius-s);color:var(--ink);
}

@media (max-width:768px){
  .tpl-wide{margin-top:var(--s-6)}
  .toc{padding:var(--s-4) var(--s-5)}
  .toc ol{grid-template-columns:1fr;gap:4px}
}

/* =================================================================
   Tap-target compliance — min 44 × 44 px (Wave-06b Phase 7)
   ================================================================= */

/* --- Specificity fix: page-scoped grid must collapse at mobile ---
     body[data-page] selectors have specificity (0,2,0) which
     beats the generic @media (max-width:768) (0,1,0) rule.
     Override with equal or higher specificity inside the media query. */
@media (max-width:768px){
  body[data-page="static-left"] .tpl-default,
  body[data-page="static-right"] .tpl-default{
    grid-template-columns:1fr;
  }
  body[data-page="static-right"] .tpl-default > .tpl-default__main{ grid-column:1; }
  body[data-page="static-right"] .tpl-default > .tpl-default__sidebar{ grid-column:1; }
}

/* --- Subnav links: 43.3px → 44px --- */
.subnav ul a{
  min-height: 44px;
}

/* --- Chat button in aside-card --- */
.aside-card .chat,
button.chat{
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* --- body-html-editor: rename data-behavior to data-hook in pages --- */
/* (done in HTML source; this comment documents the change)            */

/* --- Crumbs links (page-hero AND body-head variants) → 44px ---
     Specificity (0,2,1) matches or beats .tpl-wide .body a (0,2,1). --- */
.page-hero .crumbs a,
.body-head .crumbs a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --- TOC links (static-single in-article TOC, lives inside .tpl-wide .body) ---
     Need specificity > (0,2,1) of .tpl-wide .body a → use (0,2,2) via .body .toc ol a --- */
.body .toc ol a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --- body-footnote link --- */
.body-footnote a{
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --- Body prose links — inline-block with min-height for tap compliance.
       Lines containing these links will be 44px tall. --- */
.tpl-default__main a,
.tpl-wide .body a{
  display: inline-block; min-height: 44px; vertical-align: middle;
}

/* --- Restore toc and crumbs which live inside .body / .tpl-default__main --- */
.page-hero .crumbs a,
.body-head .crumbs a,
.body .toc ol a,
.body-footnote a{
  display: inline-flex; align-items: center; min-height: 44px;
}