/* =============================================================================
   CIQRA storefront design system (F1.F-DS)
   Tokens sourced from the CIQRA brand (www.ciqra.com): Rubik type, indigo accent
   (#3f3d90 — the real brand, verified against logo.svg), slate neutrals. The brand
   is mono-indigo; the earlier teal (#209880) came from the OLMO/Multikart template
   and was wrong. Anti-template: intentional scale
   contrast, rhythmic spacing, layered surfaces + shadow, designed states, motion.
   Light + dark are equal citizens. The storefront default is a customizable base
   (merchants override the tokens); admin can be more opinionated.
   ========================================================================== */

/* ---- Brand typeface: self-hosted Rubik (variable), no external CDN (CSP-safe) ---- */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/rubik-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens (light default) ---- */
:root {
  /* Brand — CIQRA indigo #3f3d90. Mono-brand: --brand-accent is identity + interactive
     (white text ~8.5:1 AA, so no separate accessible variant needed). See ciqra.com/logo.svg. */
  --brand-accent: #3f3d90;          /* CIQRA indigo — primary action (white text ~8.5:1 AA) */
  --brand-accent-strong: #322f7a;   /* deeper indigo for links/hover on light */
  --brand-accent-soft: #ecebf7;
  --brand-accent-onsoft: #322f7a;   /* indigo text ON a soft-indigo tile (dark indigo on light bg) */
  --brand-secondary: #5b58c9;       /* lighter indigo — the second gradient stop (mono-brand) */
  --brand-secondary-soft: #ecebf7;  /* soft indigo (bento/washes) */

  /* Neutrals (slate) */
  --ink: #23272f;                   /* headings */
  --body: #5b6472;                  /* body text */
  --subtle: #616a78;                /* captions/meta — WCAG AA ≥4.5:1 on light bg (F1.H-16) */
  --line: #e6e8ec;                  /* borders */
  --line-strong: #d3d7de;
  --input-border: #767e8a;           /* text-field boundary: >= 3:1 on --surface and --bg (WCAG 1.4.11) */
  --bg: #f7f8fa;                    /* page */
  --surface: #ffffff;               /* cards */
  --surface-2: #f1f3f6;            /* insets/rows */
  --surface-raised: #ffffff;

  /* Semantic */
  /* success/warning text is >= 4.5:1 on white, --bg and its own -soft tile (legal final review 2026-10-02, WCAG 1.4.3;
     guarded by StorefrontContrastTokenTests). */
  --success: #13724c; --success-soft: #e4f5ee;
  --warning: #8a5a12; --warning-soft: #fbf1de;
  --danger: #c0362c;  --danger-soft: #fdeceb;
  --info: #2563b8;    --info-soft: #e9f1fc;
  --on-accent: #ffffff;

  /* Typography */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);

  /* Spacing rhythm */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  --gutter: clamp(1.1rem, 0.7rem + 2vw, 2rem);
  --maxw: 1160px;

  /* Radius + shadow + motion */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05), 0 1px 3px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 24, 31, 0.08), 0 2px 6px rgba(20, 24, 31, 0.05);
  --shadow-lg: 0 18px 40px rgba(20, 24, 31, 0.12), 0 6px 14px rgba(20, 24, 31, 0.07);
  /* Focus indicator (WCAG 2.4.7 / 1.4.11): a SOLID ring in the strong accent, >= 3:1 on every surface. The old ring
     was the accent at 35% alpha (1.87:1) and vanished in forced-colors mode. */
  --focus-ring: var(--brand-accent-strong);
  --ring: 0 0 0 2px var(--focus-ring);
  --dur-fast: 130ms; --dur: 220ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* ---- Dark theme (equal citizen): auto + explicit toggle ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #f2f4f8; --body: #b9c0cc; --subtle: #8b93a1;
    --line: #262b34; --line-strong: #333a45;
    --bg: #0f1216; --surface: #171b21; --surface-2: #1e232b; --surface-raised: #20252e;
    --brand-accent: #7c79e6; --brand-accent-strong: #9a97ef; --on-accent: #14123a;
    --brand-accent-soft: #201f42; --brand-secondary: #9a97ef; --brand-secondary-soft: #201f42; --brand-accent-onsoft: #b7b4f5;
    --success-soft: #10281e; --warning-soft: #2a2312; --danger-soft: #2c1614; --info-soft: #12203a;
    --success: #4cc38a; --warning: #e0a84a; --input-border: #6b7383;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.45);
    --shadow-lg: 0 22px 48px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}
/* Explicit dark toggle — carries the FULL dark palette (not a subset), so a manual toggle
   on a light-preference OS gets the same indigo dark theme as the media query above. */
:root[data-theme='dark'] {
  --ink: #f2f4f8; --body: #b9c0cc; --subtle: #8b93a1;
  --line: #262b34; --line-strong: #333a45;
  --bg: #0f1216; --surface: #171b21; --surface-2: #1e232b; --surface-raised: #20252e;
  --brand-accent: #7c79e6; --brand-accent-strong: #9a97ef; --on-accent: #14123a;
  --brand-accent-soft: #201f42; --brand-secondary: #9a97ef; --brand-secondary-soft: #201f42; --brand-accent-onsoft: #b7b4f5;
  --success-soft: #10281e; --warning-soft: #2a2312; --danger-soft: #2c1614; --info-soft: #12203a;
  --success: #4cc38a; --warning: #e0a84a; --input-border: #6b7383;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 22px 48px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* F1.LP-G15 bugfix #2: the off-canvas cart/nav drawers sit translated off the right edge; without clipping
     they widened the document and produced a site-wide horizontal scrollbar (~140px of dead space). `clip`
     removes that overflow WITHOUT becoming a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
}
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); }
a { color: var(--brand-accent-strong); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-accent); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none; border-radius: var(--r-sm); }
::selection { background: color-mix(in srgb, var(--brand-accent) 22%, transparent); }

/* ---- Layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
main { padding: 0 0 var(--space-8); }
/* Pages that don't open with a full-bleed hero get top breathing room. */
main > .wrap > .eyebrow:first-child,
main > .wrap > h1:first-child,
main > .wrap > .page-head:first-child,
main > .wrap > .breadcrumb:first-child { margin-top: var(--space-7); }
.stack { display: grid; gap: var(--space-3); }
.muted { color: var(--subtle); }
.meta { color: var(--subtle); font-size: var(--text-sm); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head h1 { margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--text-xs); font-weight: 600; color: var(--brand-accent); margin: 0 0 var(--space-2); }
.back-link { color: var(--subtle); font-weight: 500; font-size: var(--text-sm); }
.back-link:hover { color: var(--brand-accent); }

/* ---- Header + footer ---- */
.site-header { position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.2rem; letter-spacing: var(--tracking-tight); color: var(--ink); }
.brand .dot { width: 0.6rem; height: 0.6rem; border-radius: var(--r-pill); background: var(--brand-accent);
  box-shadow: 0 0 0 4px var(--brand-accent-soft); }
.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a { color: var(--body); font-weight: 500; font-size: var(--text-sm); }
.site-nav a:hover { color: var(--brand-accent); }
.site-nav form.inline { margin: 0; display: inline-flex; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; font-size: var(--text-sm); color: var(--body); cursor: pointer; }
.linkish:hover { color: var(--brand-accent); }
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--body); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.theme-toggle:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.site-footer { border-top: 1px solid var(--line); color: var(--subtle); font-size: var(--text-sm); }
.site-footer .wrap { padding-top: var(--space-5); padding-bottom: var(--space-6); }

/* ---- Buttons (designed states) ---- */
.btn, button.primary, .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: 1; cursor: pointer;
  padding: 0.72rem 1.25rem; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn-primary, button.primary, .button { background: var(--brand-accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover, button.primary:hover, .button:hover { background: var(--brand-accent-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active, button.primary:active, .button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.btn-ghost { background: transparent; color: var(--body); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-block { width: 100%; }

/* ---- Surfaces / cards ---- */
.surface, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card { padding: var(--space-5); }
.note { color: var(--body); background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-md); padding: var(--space-4) var(--space-5); }

/* ---- Forms ---- */
.auth-form { max-width: 400px; display: grid; gap: var(--space-4); }
.auth-form.card { padding: var(--space-6); }
label { display: grid; gap: 0.4rem; font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
input[type='number'], input[type='url'], input[type='date'], textarea, select {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border);
  border-radius: var(--r-sm); padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
textarea:focus { outline: 2px solid transparent; border-color: var(--focus-ring); box-shadow: var(--ring); }
input:focus, select:focus { outline: 2px solid transparent; border-color: var(--focus-ring); box-shadow: var(--ring); }
.field-error, .error { color: var(--danger); background: var(--danger-soft); border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem; margin: 0; font-size: var(--text-sm); font-weight: 500; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); font-weight: 600;
  padding: 0.28rem 0.6rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--body); border: 1px solid var(--line); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge-accent { background: var(--brand-accent-soft); color: var(--brand-accent-strong); border-color: transparent; }

/* ---- Product grid + cards ---- */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product-card a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.product-card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.product-card .thumb { aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.product-card a:hover .thumb img { transform: scale(1.04); }
.product-card .body { padding: var(--space-4) var(--space-4) var(--space-5); }
.product-card .name { display: block; font-weight: 600; color: var(--ink); }
.product-card .price { display: block; color: var(--brand-accent-strong); font-weight: 600; margin-top: 0.3rem; }

/* ---- Product detail ---- */
.product-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 820px) { .product-detail { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.gallery { display: grid; gap: var(--space-3); }
.gallery img { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); width: 100%; }
.product-detail .info { position: sticky; top: 90px; }
.price-lg { font-size: var(--text-2xl); font-weight: 700; color: var(--ink); margin: 0.2rem 0 var(--space-4); letter-spacing: var(--tracking-tight); }
.desc { color: var(--body); }
form.buy { margin-top: var(--space-5); }
form.buy select { display: block; width: auto; min-width: 180px; margin-bottom: var(--space-4); }
/* Options stack full-width; the quantity stepper + primary CTA share their own spaced row. */
.buy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.buy-actions .btn { padding-inline: 1.6rem; }
/* D8 express "Buy it now": full-width inverted button under Add-to-cart (dark on light, light on dark). */
.btn-buynow { display: block; width: 100%; margin-top: var(--space-3); padding-block: 0.85rem;
  background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-buynow:hover { background: color-mix(in oklab, var(--ink) 86%, transparent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-buynow:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* ---- Loading skeletons + async states (F1.H-21) ---- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2, #eceef1); border-radius: var(--r-sm, 8px); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--surface) 60%, transparent), transparent); animation: sk-shimmer 1.25s infinite; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 0.9rem; margin-bottom: 0.7rem; }
.sk-line.sk-lg { height: 1.6rem; width: 70%; }
.sk-line.sk-sm { width: 40%; }
.sk-block { height: 5rem; margin-top: var(--space-3); }
.qv-loading .qv-media.skeleton { aspect-ratio: 1 / 1; border-radius: var(--r-md, 12px); }
.qv-error, .drawer-error { text-align: center; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.qv-error-title { font-weight: 700; color: var(--ink); margin: 0; }
.drawer-loading { padding: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ---- Faceted listing (F1.C-02) ---- */
.listing-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-5); }
@media (min-width: 900px) { .listing-layout { grid-template-columns: 250px 1fr; gap: var(--space-7); align-items: start; } }
.facets-toggle { display: inline-flex; width: 100%; justify-content: center; }
@media (min-width: 900px) { .facets-toggle { display: none; } }
.facets-panel { display: none; }
@media (min-width: 900px) { .facets-panel { display: block; position: sticky; top: 86px; } }
.facets[data-open="true"] .facets-panel { display: block; margin-top: var(--space-4); }
.facets-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.facets-head h2 { font-size: var(--text-lg); margin: 0; }
.facets-clear, .facets-panel .facets-clear { font-size: var(--text-sm); font-weight: 600; color: var(--brand-accent-strong); }
.facet-group { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.facet-group > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.facet-group > summary::-webkit-details-marker { display: none; }
.facet-group > summary::after { content: "＋"; color: var(--subtle); font-weight: 400; }
.facet-group[open] > summary::after { content: "－"; }
.facet-values { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.15rem; }
.facet-value { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.4rem; border-radius: var(--r-sm); color: var(--body); text-decoration: none; font-size: var(--text-sm); }
.facet-value:hover { background: var(--surface-2); color: var(--ink); }
.facet-check { flex: none; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--input-border); border-radius: 5px; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.facet-value.is-selected { color: var(--ink); font-weight: 600; }
.facet-value.is-selected .facet-check { background: var(--brand-accent); border-color: var(--brand-accent); }
.facet-value.is-selected .facet-check::after { content: "✓"; color: var(--on-accent); font-size: 0.72rem; font-weight: 700; }
.facet-name { flex: 1; }
.facet-count { color: var(--subtle); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.facet-price { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); }
.facet-price input { width: 100%; min-width: 0; }
.facet-price-sep { color: var(--subtle); }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: var(--r-pill); background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
.chip:hover { background: color-mix(in srgb, var(--brand-accent-soft) 70%, var(--brand-accent)); }
.chip-clear { background: transparent; color: var(--subtle); border: 1px solid var(--line-strong); }
.chip-clear:hover { color: var(--ink); background: var(--surface-2); }

.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) var(--space-4); max-width: 34rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.empty-mark { font-size: 3.5rem; line-height: 1; color: var(--subtle); opacity: 0.7; }
.empty-state h2 { margin: 0; }

/* ---- Themed 404 (F1.H-19) ---- */
.notfound { text-align: center; padding: clamp(3rem, 8vw, 7rem) var(--space-4); max-width: 40rem; margin-inline: auto; }
.notfound-code { font-size: clamp(4.5rem, 18vw, 9rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; margin: 0; background: linear-gradient(135deg, var(--brand-accent), color-mix(in oklab, var(--brand-accent) 45%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound h1 { margin: var(--space-3) 0 var(--space-2); }
.notfound-msg { color: var(--body); margin: 0 auto var(--space-5); max-width: 30rem; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---- Stock / availability (F1.H-14): real state, no hardcoded "In stock" ---- */
.stock-line { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; }
.stock-line .stock-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent); }
.stock-line.is-in { color: var(--success); }
.stock-line.is-low { color: var(--warning); }
.stock-line.is-out { color: var(--danger); }
/* G29: a final-sale product says so before it is bought — on the product page and on its cart line. */
.final-sale-note { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--warning); }
.cart-line-info .final-sale-note { margin: 0.2rem 0 0; font-size: var(--text-xs); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.35); pointer-events: none; }

/* ---- Tables (cart, admin) ---- */
.table, table.cart { width: 100%; border-collapse: collapse; }
.table th, .table td, table.cart th, table.cart td { text-align: left; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--line); }
.table th, table.cart th { color: var(--subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.table td.num, .table th.num, table.cart td.num, table.cart th.num { text-align: right; font-variant-numeric: tabular-nums; }
.total { font-size: var(--text-xl); font-weight: 700; color: var(--ink); margin: var(--space-5) 0; }

/* ---- Card list (account, orders, downloads) ---- */
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.card-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.card-list li:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card-list a { font-weight: 600; color: var(--ink); }
.card-list a:hover { color: var(--brand-accent); }
.muted-link { color: var(--subtle); }
.muted-link:hover { color: var(--brand-accent); }

/* ---- Hero band (collection top / account) ---- */
.band { background:
    radial-gradient(1200px 300px at 15% -20%, var(--brand-accent-soft), transparent 60%),
    radial-gradient(900px 300px at 95% -30%, var(--brand-secondary-soft), transparent 55%);
  border-bottom: 1px solid var(--line); }
.band .wrap { padding: var(--space-7) var(--gutter) var(--space-6); }
.band .lead { max-width: 46ch; color: var(--body); font-size: var(--text-lg); }

/* ---- Payment ---- */
.pay { display: grid; gap: var(--space-4); }
#payment-element { min-height: 220px; }

/* Money-path polish: a designed two-column payment step (Element beside a live order summary). */
.checkout-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--space-4); font-size: var(--text-sm); color: var(--body); }
.checkout-step { display: inline-flex; align-items: center; gap: 0.5rem; }
.checkout-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--surface-2); color: var(--body); font-weight: 700; font-size: var(--text-xs); }
.checkout-step.is-current { color: var(--ink); font-weight: 700; }
.checkout-step.is-current .checkout-step-num { background: var(--brand-accent); color: var(--on-accent); }
.checkout-step.is-done .checkout-step-num { background: var(--success-soft); color: var(--success); }

.pay-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.pay-main h1 { margin: 0 0 var(--space-4); }
.pay-secure { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--body); }
.pay-summary { position: sticky; top: var(--space-4); padding: var(--space-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.pay-summary h2 { margin: 0 0 var(--space-4); font-size: var(--text-base); }
.pay-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pay-line { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb name total" "thumb qty total";
  align-items: center; gap: 0.15rem var(--space-3); }
.pay-thumb, .pay-thumb-ph { grid-area: thumb; width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.pay-line-name { grid-area: name; font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.pay-line-qty { grid-area: qty; color: var(--body); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.pay-line-total { grid-area: total; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-totals { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-2); }
.pay-totals > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.pay-totals dt { margin: 0; color: var(--body); } .pay-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.pay-due { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pay-due strong { font-size: var(--text-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } .pay-summary { position: static; order: -1; } }

/* =============================================================================
   Real-commerce chrome (F1.F-DS pass 2): announcement bar, hero, trust strip,
   rich footer, product badges, breadcrumb, quantity, specs, related, cart summary.
   ========================================================================== */

/* Full-bleed helper: break a section out of the centered .wrap without overflow. */
.full-bleed { margin-inline: calc(50% - 50vw); }
.full-bleed > .wrap { max-width: var(--maxw); margin-inline: auto; }

/* Announcement bar */
.announce { background: var(--brand-accent-strong); color: #fff; text-align: center;
  font-size: var(--text-sm); font-weight: 500; padding: 0.55rem 1rem; letter-spacing: 0.01em; }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Header: primary nav + actions */
.site-header .primary-nav { display: none; gap: var(--space-5); }
/* F1.LP-G15 bugfix — header responsive collapse. The full category nav only appears on wide screens (≥1441px);
   at ≤1440 (laptops) it competes with the search + account cluster and they overlapped ("sıkışık"). Below 1441px
   the nav collapses into the hamburger drawer (which already carries the categories), so the top bar is just
   brand + hamburger + search + account + cart with room to spare — zero overlap at every breakpoint. */
@media (min-width: 1441px) { .site-header .primary-nav { display: flex; } }
.site-header .primary-nav a { color: var(--body); font-weight: 500; font-size: var(--text-sm); }
.site-header .primary-nav a:hover { color: var(--brand-accent); }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.cart-btn .count { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--brand-accent); border-radius: var(--r-pill); }

/* Hero */
.hero { position: relative; overflow: clip; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--brand-accent-soft), transparent 60%),
    radial-gradient(760px 380px at 92% -20%, var(--brand-secondary-soft), transparent 58%),
    var(--bg); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 0);
  background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 70%); opacity: 0.5; }
.hero > .wrap { position: relative; z-index: 1; padding: clamp(3rem, 3rem + 4vw, 6rem) var(--gutter) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hero h1 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4rem); max-width: 15ch; margin-bottom: var(--space-4); }
.hero .lead { max-width: 46ch; font-size: var(--text-lg); color: var(--body); margin-bottom: var(--space-5); }
.hero .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Section headers */
.section { margin-top: var(--space-8); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; font-size: var(--text-sm); }

/* Listing toolbar: result count + sort control (C3) */
.listing-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; flex: none; }
.sort-form { display: inline-flex; align-items: center; gap: 0.5rem; }
.sort-label { font-size: var(--text-sm); color: var(--subtle); font-weight: 500; white-space: nowrap; }
.sort-field { position: relative; display: inline-flex; }
.sort-field::after { content: ""; position: absolute; right: 0.8rem; top: 50%; width: 0.42rem; height: 0.42rem;
  border-right: 2px solid var(--subtle); border-bottom: 2px solid var(--subtle);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sort-select { width: auto; padding: 0.5rem 2.1rem 0.5rem 0.8rem; font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--r-pill); background: var(--surface); appearance: none; -webkit-appearance: none; cursor: pointer; }
.sort-go { margin-left: 0.15rem; }
@media (max-width: 620px) {
  .section-head { flex-wrap: wrap; }
  .listing-toolbar { width: 100%; justify-content: space-between; }
}

/* Narrow phones: keep the header to brand + hamburger + wishlist/cart icons + theme toggle so the
   row never wraps or overflows at 320px. The account text links (Sign in / My account / Log out) are
   fully available in the hamburger drawer, so they drop out of the top bar here. */
@media (max-width: 400px) {
  .site-header .wrap { gap: var(--space-3); }
  .brand { font-size: 1.06rem; white-space: nowrap; }
  .site-nav > a:not(.wishlist-btn):not(.cart-btn),
  .site-nav > form.inline { display: none; }
}

/* Trust strip */
.trust { background: var(--surface); border-block: 1px solid var(--line); margin-block: var(--space-8); }
.trust > .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--space-5);
  padding: var(--space-5) var(--gutter); }
.trust .item { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust .ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--brand-accent-soft); color: var(--brand-accent-strong); font-size: 1.15rem; }
.trust h4 { margin: 0; font-size: var(--text-sm); color: var(--ink); }
.trust p { margin: 0.15rem 0 0; font-size: var(--text-sm); color: var(--subtle); }

/* Product card badges */
.product-card { position: relative; }
.product-card .thumb { position: relative; }
.product-card .flag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; }
/* Sale flag sits opposite the badge so the two never overlap. */
.product-card .flag.sale-flag { left: auto; right: 0.7rem; }

/* ---- Sale / compare-at pricing (C-09 / MK-D7) ---- */
.sale-flag { display: inline-flex; align-items: center; background: var(--danger); color: #fff; font-weight: 700;
  font-size: var(--text-xs); line-height: 1; padding: 0.28rem 0.5rem; border-radius: var(--r-pill); letter-spacing: 0.01em; }
.price-now { font-weight: 700; }
.price-was { color: var(--subtle); text-decoration: line-through; font-weight: 500; margin-left: 0.25rem; }
.sale-flag-inline { margin-left: 0.55rem; vertical-align: middle; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--subtle); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--subtle); }
.breadcrumb a:hover { color: var(--brand-accent); }
.breadcrumb .sep { opacity: 0.5; }

/* Quantity + specs */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.qty button { border: 0; background: var(--surface); color: var(--ink); width: 2.2rem; height: 2.4rem; font-size: 1.1rem; cursor: pointer; }
.qty button:hover { background: var(--surface-2); color: var(--brand-accent); }
.qty input { width: 2.6rem; text-align: center; border: 0; border-inline: 1px solid var(--line); height: 2.4rem; padding: 0; border-radius: 0; }
.spec-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.spec-list .k { color: var(--subtle); }
.spec-list .v { color: var(--ink); font-weight: 500; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Rich footer */
.site-footer { background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0 var(--space-5); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(118px, 1fr)); column-gap: var(--space-5); } }
.footer-brand .tagline { color: var(--subtle); max-width: 34ch; margin-top: var(--space-3); }
.footer-col h5 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); margin: 0 0 var(--space-3); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-col a { color: var(--body); font-size: var(--text-sm); }
.footer-col a:hover { color: var(--brand-accent); }
.footer-bottom { border-top: 1px solid var(--line); padding: var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
/* "Powered by" CIQRA attribution — the real self-hosted wordmark (indigo on light, white on dark), dofollow to ciqra.com. */
.powered-by { display: inline-flex; align-items: center; gap: 0.4ch; flex-wrap: wrap; }
.powered-by-link { display: inline-flex; align-items: center; }
.powered-logo { height: 0.95em; width: auto; opacity: 0.9; transition: opacity var(--dur-fast) var(--ease); }
.powered-by-link:hover .powered-logo { opacity: 1; }
.powered-logo--dark { display: none; }
:root[data-theme='dark'] .powered-logo--light { display: none; }
:root[data-theme='dark'] .powered-logo--dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .powered-logo--light { display: none; }
  :root:not([data-theme='light']) .powered-logo--dark { display: inline-block; }
}
.pay-marks { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pay-marks img { height: 25px; width: auto; display: block; border-radius: 4px; }
.pay-marks span { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; color: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: 0.2rem 0.4rem; }

/* Cart summary layout */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 860px) { .cart-layout { grid-template-columns: 1.6fr 0.9fr; } }
.summary { position: sticky; top: 90px; }
.summary .row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: var(--text-sm); }
.summary .row.grand { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-3); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }

/* =============================================================================
   F1.F-DS pass 3 (Multikart-inspired density, reimplemented in CIQRA tokens):
   bento hero, promo band, PDP tabs, delivery + safe-checkout assurance.
   ========================================================================== */

/* Bento hero */
main > .wrap > .bento:first-child { margin-top: var(--space-6); }
.bento { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 820px) { .bento { grid-template-columns: 1.7fr 1fr; grid-auto-rows: 1fr; }
  .bento .tile-lead { grid-row: span 2; } }
.bento .tile { position: relative; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; }
.bento .tile h2, .bento .tile h3 { margin: 0 0 var(--space-2); }
.bento .tile p { margin: 0 0 var(--space-4); color: var(--subtle); }
.bento .tile .go { font-weight: 600; font-size: var(--text-sm); color: var(--brand-accent-onsoft); }
.bento .tile-lead { min-height: 360px; color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand-accent-strong), var(--brand-secondary)); }
.bento .tile-lead::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.16) 1px, transparent 0); background-size: 20px 20px;
  mask-image: linear-gradient(120deg, black, transparent 65%); }
.bento .tile-lead .eyebrow { color: rgba(255,255,255,0.85); }
.bento .tile-lead h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom: var(--space-3); position: relative; z-index: 1; }
.bento .tile-lead p { color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
.bento .tile-lead .cta-row { position: relative; z-index: 1; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.bento .tile-lead .btn-secondary { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #fff; }
.bento .tile-lead .btn-secondary:hover { background: rgba(255,255,255,0.2); color: #fff; }
.bento .tile-accent { background: var(--brand-accent-soft); border-color: transparent; }
.bento .tile-accent h3 { color: var(--brand-accent-onsoft); }
.bento .tile-indigo { background: var(--brand-secondary-soft); border-color: transparent; }

/* Promo band (full-bleed) */
/* The promo band is ALWAYS dark (white text on it), so it must use theme-independent colours —
   --ink flips to light in dark mode, which made the band unreadable (F1.H-16 follow-up). */
.promo { background: linear-gradient(120deg, #1c1f27, color-mix(in srgb, #1c1f27 65%, var(--brand-secondary))); margin-block: var(--space-8); }
.promo > .wrap { padding: clamp(2rem, 1.5rem + 3vw, 3.4rem) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.promo h2 { color: #fff; margin: 0; }
.promo p { color: rgba(255,255,255,0.82); margin: 0.35rem 0 0; max-width: 46ch; }
.promo .btn-primary { background: #fff; color: #1c1f27; }
.promo .btn-primary:hover { background: #fff; color: var(--brand-accent-strong); }

/* PDP tabs */
.tabs { margin-top: var(--space-7); }
/* Tab bar scrolls horizontally on narrow phones instead of overflowing the page (≥4 tabs won't fit 320px). */
.tab-nav { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav button { flex: none; white-space: nowrap; background: none; border: 0; padding: var(--space-4) 0; font: inherit; font-weight: 600; color: var(--subtle);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease); }
@media (max-width: 560px) { .tab-nav { gap: var(--space-4); } }
.tab-nav button:hover { color: var(--ink); }
.tab-nav button[aria-selected='true'] { color: var(--ink); border-color: var(--brand-accent); }
.tab-panel { padding: var(--space-5) 0; display: none; max-width: 72ch; }
.tab-panel[data-active='true'] { display: block; }
.tab-panel h4 { margin: var(--space-4) 0 var(--space-2); }

/* Delivery + safe-checkout assurance */
.assurance { display: grid; gap: var(--space-2); margin: var(--space-5) 0; }
.assurance .line { display: flex; gap: 0.6rem; align-items: center; color: var(--body); font-size: var(--text-sm); }
.assurance .line .ic { color: var(--brand-accent-strong); }
.safe { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.safe .lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--subtle); font-weight: 600; }
.safe .pay-marks { margin-top: var(--space-2); }

/* =============================================================================
   F1.F-MK Wave 1 — interactive commerce layer (progressive enhancement)
   Cart drawer (A5) · quick-view (C9) · swatches (D4) · zoom/lightbox (D2) ·
   sticky add-to-cart (D18) · recently-viewed (D15) · toasts (J7). Token-driven
   so light + dark come for free; all motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---- Cart count badge in the header ---- */
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.cart-count { min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem; display: inline-grid; place-items: center;
  background: var(--brand-accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 700; line-height: 1;
  border-radius: var(--r-pill); transition: transform var(--dur) var(--ease); }
.cart-count[hidden] { display: none; }
.cart-count.bump { animation: cart-bump 360ms var(--ease); }
/* A8: the cart is an icon; its count is a superscript badge on it (not an inline number after a text label). */
.cart-ico { font-size: 1.2rem; line-height: 1; }
.cart-btn .cart-count { position: absolute; top: -0.4rem; right: -0.55rem; }
@keyframes cart-bump { 30% { transform: scale(1.4); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* ---- Toasts (J7) ---- */
#toast-host { position: fixed; z-index: 80; right: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem);
  display: grid; gap: var(--space-2); width: min(340px, calc(100vw - 1.5rem)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 0.6rem; padding: var(--space-3) var(--space-4);
  background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--brand-accent);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 500;
  animation: toast-in var(--dur) var(--ease); }
.toast.is-leaving { animation: toast-out var(--dur) var(--ease) forwards; }
.toast .ic { color: var(--brand-accent-strong); font-weight: 700; }
.toast--error { border-left-color: var(--danger); }
.toast--error .ic { color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---- Overlay backdrop (shared by drawer + quick-view + lightbox) ---- */
/* A scrim must always DIM (dark) — var(--ink) flips to light in dark mode and would brighten instead. */
.overlay { position: fixed; inset: 0; z-index: 70; background: rgba(8, 10, 14, 0.55);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  backdrop-filter: blur(2px); }
.overlay[data-open='true'] { opacity: 1; visibility: visible; }

/* ---- Cart drawer / mini-cart (A5) ---- */
.drawer { position: fixed; top: 0; right: 0; z-index: 72; height: 100dvh; width: min(400px, 92vw);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur) var(--ease);
  visibility: hidden; }
.drawer[data-open='true'] { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: var(--text-lg); }
.drawer-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--subtle); cursor: pointer;
  padding: 0.2rem; border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease); }
.drawer-close:hover { color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.drawer-empty { display: grid; gap: var(--space-3); place-content: center; text-align: center; height: 100%; color: var(--subtle); }
.mini-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.mini-line .thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); }
.mini-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-line .name { color: var(--ink); font-weight: 600; font-size: var(--text-sm); }
.mini-line .unit { color: var(--subtle); font-size: var(--text-xs); margin-top: 0.15rem; }
.mini-line .line-total { color: var(--ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.mini-controls { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.mini-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); overflow: hidden; flex: none; }
.mini-qty button { width: 28px; height: 28px; background: var(--surface-2); border: 0; color: var(--ink); cursor: pointer;
  font-size: 0.95rem; line-height: 1; transition: background var(--dur-fast) var(--ease); }
.mini-qty button:hover { background: var(--brand-accent-soft); }
.mini-qty span { min-width: 32px; text-align: center; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.mini-line .remove { background: none; border: 0; color: var(--subtle); cursor: pointer; font-size: var(--text-xs);
  padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.mini-line .remove:hover { color: var(--danger); }
.drawer-foot { border-top: 1px solid var(--line); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.drawer-foot .subtotal { display: flex; align-items: baseline; justify-content: space-between; }
.drawer-foot .subtotal .k { color: var(--body); }
.drawer-foot .subtotal .v { color: var(--ink); font-weight: 700; font-size: var(--text-lg); }
.drawer-foot .note { color: var(--subtle); font-size: var(--text-xs); text-align: center; margin: 0; }
.drawer-foot .actions { display: grid; gap: var(--space-2); }

/* ---- Fly-to-cart image clone (A5) ---- */
.fly-img { position: fixed; z-index: 78; border-radius: var(--r-sm); object-fit: cover; pointer-events: none;
  box-shadow: var(--shadow-md); will-change: transform, opacity;
  transition: transform 620ms cubic-bezier(0.5, -0.3, 0.7, 0.3), opacity 620ms ease-in, width 620ms ease-in, height 620ms ease-in; }

/* ---- Product card quick-actions (C6/C9) ---- */
/* Sibling overlay sized to the square thumb (aspect-ratio) so buttons sit over the
   image without nesting interactive elements inside the card's anchor. */
.product-card { position: relative; }
.product-card .quick-actions { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.product-card:hover .quick-actions, .product-card:focus-within .quick-actions { opacity: 1; transform: none; }
.quick-actions .qa-btn { pointer-events: auto; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 2.3rem; box-sizing: border-box; white-space: nowrap;
  padding: 0.5rem 0.6rem; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.quick-actions .qa-btn:hover { background: var(--brand-accent); color: var(--on-accent); border-color: var(--brand-accent); }
@media (hover: none) { .product-card .quick-actions { position: static; aspect-ratio: auto; opacity: 1; transform: none; padding: var(--space-2) 0 0; } }
.quick-actions .qa-btn { text-decoration: none; }
/* F1.H-20: the no-JS add form must not consume a flex slot — its button is the real flex child. */
.qa-add { display: contents; }

/* ---- Wishlist (A6) ---- */
/* Header link + count badge (mirrors the cart badge). */
.wishlist-btn { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.wishlist-btn .wishlist-ico { font-size: 1.05rem; line-height: 1; }
/* On narrow headers the row runs out of room — drop the "Saved" word, keep the heart + count. */
/* PA-0359 (WCAG 2.5.3 / 4.1.2): the link has no aria-label any more, so its visible word IS its name; on a phone it is
   hidden visually only, never removed from the accessibility tree. */
@media (max-width: 600px) { .wishlist-btn .wishlist-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
.wishlist-count { min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem; display: inline-grid; place-items: center;
  background: var(--brand-accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 700; line-height: 1;
  border-radius: var(--r-pill); transition: transform var(--dur) var(--ease); }
.wishlist-count[hidden] { display: none; }
.wishlist-count.bump { animation: cart-bump 360ms var(--ease); }

/* Card heart toggle: a compact square that doesn't stretch like the other quick-actions. */
.qa-wish { display: contents; }
.quick-actions .wish-toggle { flex: 0 0 auto; width: 2.3rem; padding: 0.5rem; }
.wish-toggle .wish-ico { font-size: 1.05rem; line-height: 1; }
/* Saved = a warm heart (a pink that reads as "favourited" against the teal brand, in both themes). */
.wish-toggle.is-saved .wish-ico { color: #ff5a7a; }
.wish-toggle.is-saved { border-color: #ff5a7a; }
.quick-actions .wish-toggle:hover { background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border-color: #ff5a7a; }
.quick-actions .wish-toggle:hover .wish-ico { color: #ff5a7a; }
.quick-actions .qa-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* PDP save button — full-width secondary under the buy row. */
.pdp-wish { margin: 0; }
.pdp-wish .wish-toggle { width: 100%; margin-top: var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.pdp-wish .wish-toggle.is-saved { border-color: #ff5a7a; color: #ff5a7a; }
.pdp-wish .wish-toggle.is-saved .wish-ico { color: #ff5a7a; }

.empty-mark-heart { color: #ff5a7a; opacity: 0.85; }

/* ---- Compare (A7) ---- */
/* Card compare toggle: compact square like the heart; active = added to the compare set (teal). */
.product-card .quick-actions { flex-wrap: wrap; }
.quick-actions .compare-toggle { flex: 0 0 auto; width: 2.3rem; padding: 0.5rem; }
.compare-toggle .compare-ico { font-size: 1rem; line-height: 1; }
.quick-actions .compare-toggle:hover { background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border-color: var(--brand-accent); }
/* Card toggle "in compare set" = teal fill (scoped to cards so it never hits the PDP button below). */
.quick-actions .compare-toggle.is-active, .quick-actions .compare-toggle.is-active:hover { background: var(--brand-accent); color: var(--on-accent); border-color: var(--brand-accent); }

/* PDP: the two secondary actions (Save + Compare) share a row. */
.pdp-secondary-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.pdp-secondary-actions .pdp-wish { flex: 1; margin: 0; }
.pdp-secondary-actions .pdp-wish .wish-toggle, .pdp-secondary-actions .pdp-wish .compare-toggle { width: 100%; margin-top: 0; }
.pdp-secondary-actions .compare-toggle.is-active { border-color: var(--brand-accent); color: var(--brand-accent); }
.pdp-secondary-actions .compare-toggle.is-active .compare-ico { color: var(--brand-accent); }

/* Sticky compare tray. */
.compare-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface-raised); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  transform: translateY(100%); transition: transform var(--dur) var(--ease); }
.compare-tray[data-open="true"] { transform: none; }
.compare-tray-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-3) clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.compare-tray-lead { margin: 0; font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.compare-tray-actions { display: flex; gap: var(--space-2); align-items: center; }

/* Comparison table (scrolls horizontally on narrow screens). */
.compare-scroll { overflow-x: auto; margin-top: var(--space-5); -webkit-overflow-scrolling: touch; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.compare-attr { color: var(--subtle); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; width: 9rem; }
.compare-table tbody tr:nth-child(odd) td, .compare-table tbody tr:nth-child(odd) th.compare-attr { background: var(--surface-2); }
.compare-col { min-width: 12rem; }
.compare-cardcell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-right: 2rem; }
.compare-remove-form { position: absolute; top: 0; right: 0; margin: 0; }
.compare-remove { width: 1.8rem; height: 1.8rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--body); cursor: pointer; line-height: 1; font-size: 1rem; }
.compare-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.compare-thumb { display: block; width: 100%; max-width: 9rem; aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; }
.compare-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compare-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.compare-name:hover { color: var(--brand-accent); }
.compare-add { margin: 0; }

/* ---- Coupon box + discount line (C-09 / MK-E2) ---- */
.summary .row.discount span:last-child { color: var(--brand-accent-strong); font-weight: 700; }
.coupon-box { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.coupon-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.coupon-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  background: var(--brand-accent-soft); color: var(--brand-accent-strong); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; }
.coupon-chip.is-inactive { background: var(--surface-2); color: var(--subtle); }
.coupon-code { letter-spacing: 0.03em; }
.coupon-note { font-weight: 500; font-size: var(--text-xs); opacity: 0.85; }
.coupon-remove-form { display: inline-flex; margin: 0; }
.coupon-remove { width: 1.4rem; height: 1.4rem; border: none; background: transparent; color: inherit; cursor: pointer;
  border-radius: var(--r-pill); line-height: 1; font-size: 1rem; }
.coupon-remove:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.coupon-form { display: flex; gap: 0.5rem; }
.coupon-form input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-error { color: var(--danger); font-size: var(--text-sm); margin: 0.5rem 0 0; }

/* ---- Sale countdown banner (C-09 / MK-B6) ---- */
.sale-countdown { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
  margin: var(--space-4) 0; padding: 0.7rem 1rem; border-radius: var(--r-md);
  background: var(--danger); color: #fff; font-weight: 600; font-size: var(--text-sm); }
.sale-countdown-clock { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18); padding: 0.2rem 0.55rem; border-radius: var(--r-sm); }
/* On the PDP the countdown sits under the price: compact, left-aligned, inline rather than a full-width banner. */
.pdp-countdown { display: inline-flex; justify-content: flex-start; margin: var(--space-2) 0 var(--space-3);
  padding: 0.45rem 0.75rem; font-size: var(--text-xs); }

/* ---- Accessibility + no-JS edit utilities (F1.H-16/H-20) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a11y: skip-to-content — off-screen until keyboard focus, then pinned top-left above all chrome (incl. the
   z-100 preloader). Pointer users never see it; keyboard users get it as the first Tab stop. */
.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-accent); color: var(--on-accent);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: translateY(0); outline: 2px solid var(--focus-ring); outline-offset: 2px;
  box-shadow: var(--shadow-md);
}
/* The skip target is a layout region, not a control — move focus there without a lingering focus ring. */
main:focus { outline: none; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: var(--text-xs); }
.link-danger { background: none; border: 0; padding: 0; color: var(--danger, #c0392b); font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-danger:hover { color: color-mix(in oklab, var(--danger, #c0392b) 80%, black); }

/* ---- Quick-view modal (C9) ---- */
.qv-dialog { position: fixed; z-index: 74; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.98);
  width: min(880px, 94vw); max-height: 90dvh; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.qv-dialog[data-open='true'] { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.qv-grid { display: grid; grid-template-columns: 1.1fr 1fr; max-height: 90dvh; }
.qv-media { background: var(--surface-2); position: relative; min-height: 320px; }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-info { padding: var(--space-6); overflow-y: auto; }
.qv-info .eyebrow { margin-bottom: 0.4rem; }
.qv-info h3 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.qv-info .price-lg { font-size: var(--text-xl); color: var(--ink); font-weight: 700; margin: 0 0 var(--space-4); }
.qv-info .desc { color: var(--body); font-size: var(--text-sm); max-height: 8.5em; overflow: hidden; margin-bottom: var(--space-4); }
.qv-close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; width: 32px; height: 32px;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.qv-close:hover { color: var(--danger); }
.qv-full { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--brand-accent-strong); }
@media (max-width: 720px) { .qv-grid { grid-template-columns: 1fr; overflow-y: auto; } .qv-media { min-height: 220px; max-height: 40dvh; } }

/* ---- Variant swatches / option selectors (D4) ---- */
.option-group { margin: var(--space-4) 0; }
.option-group .option-label { display: flex; gap: 0.4rem; font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.option-group .option-label .chosen { color: var(--subtle); font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.swatch--box { min-width: 2.6rem; height: 2.4rem; padding: 0 0.7rem; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.swatch--box:hover { border-color: var(--brand-accent); }
.swatch--box[aria-pressed='true'] { border-color: var(--brand-accent); background: var(--brand-accent-soft); box-shadow: var(--ring); }
.swatch--color { width: 2rem; height: 2rem; border-radius: var(--r-pill); padding: 0; position: relative; }
.swatch--color[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-accent); border-color: transparent; }
/* A4: the colour fill sits inside the border so the ring reads on any hue (incl. white). */
.swatch--color .swatch-dot { position: absolute; inset: 3px; border-radius: inherit; background: var(--sw); }
.swatch--image { width: 2.75rem; height: 2.75rem; padding: 2px; border-radius: var(--r-sm); overflow: hidden; }
.swatch--image img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-sm) - 2px); display: block; }
.swatch--image:hover { border-color: var(--brand-accent); }
.swatch--image[aria-pressed='true'] { border-color: var(--brand-accent); box-shadow: var(--ring); }
.swatch[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
/* LP-MIG colour family: the swatches are LINKS to sibling products, so they carry the selected look via
   .is-current instead of aria-pressed, and never strike through — a sibling is always reachable. */
a.swatch { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.family-group .swatch--color.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-accent); border-color: transparent; }
.family-group .swatch--box.is-current { border-color: var(--brand-accent); background: var(--brand-accent-soft); box-shadow: var(--ring); }
.family-group .swatch:hover { border-color: var(--brand-accent); }

/* ---- PDP gallery zoom + lightbox (D2) ---- */
.gallery picture { position: relative; display: block; cursor: zoom-in; overflow: hidden; border-radius: var(--r-md); }
.gallery picture::after { content: '⤢'; position: absolute; right: 0.6rem; bottom: 0.6rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  border-radius: var(--r-pill); font-size: 0.9rem; opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.gallery picture:hover::after { opacity: 1; }
@media (hover: hover) and (min-width: 720px) {
  .gallery picture:hover img { transform: scale(1.6); transition: transform 120ms linear; }
  .gallery picture img { transition: transform var(--dur) var(--ease); transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
}
.lightbox { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center;
  background: color-mix(in srgb, #05070a 82%, transparent); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.lightbox[data-open='true'] { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox .lb-close, .lightbox .lb-nav { position: absolute; background: rgba(255,255,255,0.14); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: var(--r-pill); cursor: pointer; font-size: 1.3rem; display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease); }
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: rgba(255,255,255,0.28); }
.lightbox .lb-close { top: 1.2rem; right: 1.2rem; }
.lightbox .lb-nav.prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-nav.next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ---- Sticky add-to-cart bar (D18) ---- */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(100%);
  background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20,24,31,0.08); backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease); }
.sticky-atc[data-show='true'] { transform: none; }
.sticky-atc .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.sticky-atc .meta { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sticky-atc .meta img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); }
.sticky-atc .meta .nm { color: var(--ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc .meta .pr { color: var(--brand-accent-strong); font-weight: 700; font-size: var(--text-sm); }
.sticky-atc .btn { white-space: nowrap; }
.sticky-atc .sticky-close { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--subtle); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--r-sm); transition: color var(--dur-fast, 150ms), background var(--dur-fast, 150ms); }
.sticky-atc .sticky-close:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
@media (max-width: 560px) { .sticky-atc .meta .nm { max-width: 40vw; } }

/* ---- Recently viewed (D15) ---- */
.recently { margin-top: var(--space-7); }
.recently[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .nav-drawer, .nav-toggle span, .mnav-toggle, .overlay, .qv-dialog, .lightbox, .sticky-atc, .toast, .cart-count, .fly-img,
  .gallery picture img, .product-card .quick-actions { transition: none !important; animation: none !important; }
}

/* =============================================================================
   F1.F-MK Wave 2 — taxonomy surfacing: mega-menu (A2), category/collection pages,
   home collection carousels (B3/B4). Token-driven; light + dark for free.
   ========================================================================== */

/* ---- Mega-menu (F1.LP-G15 A2-redesign) ---- */
.site-header .primary-nav { align-items: center; }
/* Vertical padding makes the trigger fill the header height (so the dropdown is hover-contiguous) without
   forcing a taller flex row. The item is the positioning context so the panel opens directly UNDER its own
   trigger — storefront.js then nudges it left only if it would overflow the viewport (see initMegaMenu), so it
   stays tied to its trigger and never clips. */
.nav-item.has-mega { position: relative; display: inline-flex; align-items: center; padding-block: 22px; }
.nav-item.has-mega > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-item.has-mega .caret { font-size: 0.6em; color: var(--subtle); transition: transform var(--dur) var(--ease); }
.nav-item.has-mega:hover .caret, .nav-item.has-mega:focus-within .caret { transform: rotate(180deg); color: var(--brand-accent); }

/* The panel is bounded and content-sized (NOT full-width): a flat, shallow taxonomy still reads as a
   deliberate, premium object instead of a sparse box floating in whitespace. It opens left-aligned under the
   trigger; the JS nudge (--mega-shift) pulls it back in-bounds when a right-side trigger would push it off. */
.mega { position: absolute; top: 100%; left: 0;
  transform-origin: top left;
  translate: var(--mega-shift, 0) 0;
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Two zones: the link content (flex-grow) and an optional visual rail. A comfortable minimum keeps even a
   one-link category reading as a generous, designed panel rather than a cramped tooltip. */
.mega-inner { display: flex; align-items: stretch; gap: var(--space-6); min-width: 300px; }
.mega-inner--noaside { display: block; min-width: 300px; }
.mega-nav { flex: 0 1 auto; }

/* Grouped mode — one column per child: heading → links → per-column "view all". */
.mega-nav--grouped { display: flex; gap: var(--space-6); }
.mega-nav--grouped .mega-col { flex: 1 1 0; min-width: 148px; max-width: 210px; }
.mega-col .mega-head { display: block; font-weight: 650; color: var(--ink); font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight); padding-bottom: var(--space-2); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line); }
.mega-col .mega-head:hover { color: var(--brand-accent-strong); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mega-col ul a { display: block; color: var(--body); font-size: var(--text-sm); padding: 0.28rem 0;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mega-col ul a:hover { color: var(--brand-accent-strong); transform: translateX(2px); }
.mega-viewall { margin-top: 0.15rem; }
.mega-viewall a, a.mega-all { font-weight: 600; color: var(--brand-accent-strong); }
.mega-viewall a::after, a.mega-all::after, .mega-tile-cap::after {
  content: '\2009\2192'; transition: transform var(--dur-fast) var(--ease); }
.mega-viewall a:hover::after, a.mega-all:hover::after { display: inline-block; transform: translateX(3px); }

/* Flat mode — a balanced link list (no lonely bold headings) + one overall "view all". The list stays a
   single column until there are enough items to warrant two, so a 2–4 item menu never looks stretched. */
.mega-nav--flat { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-width: 188px; }
/* A category eyebrow gives a sparse (one/two-link) flat panel a title and vertical presence, so it reads as a
   deliberate section rather than a couple of links floating in whitespace. */
.mega-flat-title { margin: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--subtle); }
.mega-linklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; }
.mega-linklist:has(li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.mega-linklist a { display: block; color: var(--ink); font-weight: 500; font-size: var(--text-base);
  padding: 0.5rem 0.7rem; margin-inline: -0.7rem; border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.mega-linklist a:hover { color: var(--brand-accent-strong); background: var(--surface-2); }
a.mega-all { align-self: flex-start; font-size: var(--text-sm); }

/* ---- A3: feature rail — image tile / featured product / promo ---- */
.mega-feature { flex: 0 0 244px; display: flex; flex-direction: column; gap: var(--space-3);
  padding-left: var(--space-6); border-left: 1px solid var(--line); }
/* Landscape banner beside the tall link columns of a GROUPED menu; a FLAT menu has few links, so its tile goes
   portrait to become the panel's focal point (and fill the height); a tile alone in the rail also goes portrait. */
.mega-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2); }
/* A GROUPED menu has tall link columns: an image-only rail goes portrait to match their height. */
.mega-inner:not(:has(.mega-nav--flat)) .mega-feature:not(:has(.mega-product)):not(:has(.mega-promo)) .mega-tile { aspect-ratio: 4 / 5; }
/* A FLAT menu is short, so its tile stays landscape whatever else is in the rail — keeps every flat panel a
   consistent, balanced height rather than some short and some tall. */
.mega-inner:has(.mega-nav--flat) .mega-tile { aspect-ratio: 3 / 2; }
.mega-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms var(--ease); }
.mega-tile:hover img { transform: scale(1.05); }
.mega-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.65rem 0.75rem;
  color: #fff; font-weight: 600; font-size: var(--text-sm); letter-spacing: var(--tracking-tight);
  background: linear-gradient(to top, rgba(12, 14, 20, 0.74), rgba(12, 14, 20, 0)); }
.mega-tile-cap::after { color: #fff; }
.mega-product { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-2); border-radius: var(--r-md); background: var(--surface-2);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mega-product:hover { background: var(--brand-accent-soft); transform: translateY(-1px); }
.mega-product-thumb img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }
.mega-product-meta { min-width: 0; }
.mega-product-eyebrow { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--subtle); }
.mega-product-name { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-sm);
  line-height: 1.25; margin-top: 0.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-product-price { display: block; color: var(--brand-accent-strong); font-weight: 600; font-size: var(--text-sm); }
.mega-promo { display: block; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--brand-accent-onsoft);
  padding: 0.6rem 0.75rem; border-radius: var(--r-md); background: var(--brand-accent-soft); }
a.mega-promo { transition: background var(--dur-fast) var(--ease); }
a.mega-promo:hover { background: color-mix(in srgb, var(--brand-accent) 20%, var(--surface-raised)); }

/* ---- Listing page lead ---- */
.section-head .lead { color: var(--body); max-width: 62ch; margin: 0.35rem 0 0; }

/* ---- Home collection carousels ---- */
.carousel-section { margin-top: var(--space-7); }
.carousel { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
.carousel-track { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: flex; gap: var(--gutter); }
.carousel-card { flex: 0 0 clamp(180px, 44vw, 250px); scroll-snap-align: start; }

/* ---- Mobile category nav (hamburger + left drawer + accordion) ---- */
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px; margin-inline-start: -8px; background: none; border: 0; cursor: pointer; border-radius: var(--r-sm); }
.nav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring); }
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1441px) { .nav-toggle { display: none; } }

.nav-drawer { position: fixed; top: 0; left: 0; z-index: 72; height: 100dvh; width: min(340px, 88vw);
  background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--dur) var(--ease); visibility: hidden; }
.nav-drawer[data-open='true'] { transform: none; visibility: visible; }
.mnav { display: grid; }
.mnav-link { display: block; padding: var(--space-3) 0; color: var(--ink); font-weight: 600; font-size: var(--text-lg); }
.mnav-link:hover { color: var(--brand-accent-strong); }
.mnav-top { border-bottom: 1px solid var(--line); }
.mnav-group { border-bottom: 1px solid var(--line); }
.mnav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mnav-row .mnav-link { flex: 1; }
.mnav-toggle { background: none; border: 0; color: var(--subtle); font-size: 1rem; width: 44px; height: 44px;
  cursor: pointer; border-radius: var(--r-sm); transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease); }
.mnav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring); }
.mnav-toggle[aria-expanded='true'] { transform: rotate(180deg); color: var(--brand-accent); }
.mnav-children { display: grid; padding: 0 0 var(--space-3) var(--space-3); }
.mnav-sub { display: block; padding: var(--space-2) 0; color: var(--body); }
.mnav-sub:hover { color: var(--brand-accent-strong); }
.mnav-sub2 { padding-left: var(--space-3); font-size: var(--text-sm); color: var(--subtle); }
.mnav-account { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; }
.mnav-account a { display: block; padding: var(--space-2) 0; color: var(--body); font-size: var(--text-sm); }
.mnav-account a:hover { color: var(--brand-accent-strong); }
/* C-11: currency switcher inside the mobile nav drawer (the utility-bar copy is hidden on phones). */
.mnav-currency { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mnav-currency-label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--body); }
.mnav-currency .currency-select { margin-left: auto; font-size: var(--text-sm); padding: 0.35rem 1.6rem 0.35rem 0.6rem; }
.mnav-currency .currency-go { margin-left: var(--space-2); }

/* ============================================================
   reviews: D9/D10 — star ratings, reviews summary/list/form, Q&A (F1.F-MK-D9/D10)
   (own block, additive — safe to merge with feature/fe-polish)
   ============================================================ */
.stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; color: var(--line-strong); white-space: nowrap; }
.stars::before { content: "★★★★★"; letter-spacing: 0.06em; }
.stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; width: var(--pct, 0%); color: #f5a623; }
.stars-fill::before { content: "★★★★★"; letter-spacing: 0.06em; }
.stars-sm { font-size: 0.82rem; }
.product-card .stars-sm { display: inline-block; margin-top: 0.25rem; }
.rating-row { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--body); text-decoration: none; margin: 0 0 var(--space-2); }
.rating-row:hover { color: var(--brand-accent-strong); }
.rating-count { font-size: var(--text-sm); }

.reviews-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; margin-bottom: var(--space-5); }
.reviews-avg { text-align: center; }
.reviews-avg-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.reviews-avg .stars { font-size: 1.1rem; margin: 0.3rem 0; }
.reviews-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; min-width: 0; }
.reviews-bars li { display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.bar-track { height: 0.5rem; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #f5a623; }
.bar-count { text-align: right; }
@media (max-width: 560px) { .reviews-summary { grid-template-columns: 1fr; } }

.review-form { display: grid; gap: var(--space-3); max-width: 34rem; margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface-2); border-radius: var(--r-lg); }
.review-form h4 { margin: 0; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-input label { color: var(--line-strong); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 0.06rem; transition: color var(--dur-fast) var(--ease); }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked + label, .star-input input:checked + label ~ label { color: #b7740a; }
.star-input input:focus-visible + label { outline: 2px solid var(--brand-accent); border-radius: 4px; }

.review-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.review { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.review-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.review-title { font-weight: 700; }
.review-body { margin: 0.15rem 0; }
.review-meta { font-size: var(--text-sm); margin: 0.25rem 0 0; }
.review-signin { margin: var(--space-3) 0; }
.verified-badge { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--success); font-weight: 600; font-size: var(--text-xs); }

.qa-section .section-head { margin-bottom: var(--space-4); }
.qa-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); }
.qa-item { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.qa-q { font-weight: 600; margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; }
.qa-a { display: flex; gap: 0.5rem; margin-top: 0.6rem; padding-left: 0.5rem; }
.qa-a p { margin: 0; }
.qa-mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--body); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; }
.qa-mark-a { background: var(--brand-accent-soft); color: var(--brand-accent-strong); }
.qa-meta { font-size: var(--text-sm); margin: 0.2rem 0 0; }
.qa-form { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 40rem; }
.qa-form textarea { flex: 1; min-width: 0; }
/* =============================================================================
   fe-polish — global chrome & motion (feature/fe-polish). Additive, token-driven,
   light + dark equal citizens, reduced-motion respected. Covers:
   top utility bar (A1) · announcement bar (A8) · sticky-header shrink (A3) ·
   scroll-reveal engine (J6) + mega-footer reveal (A10) · preloader + back-to-top
   (J8) · cookie-consent (J9). No-JS safe: reveal/back-to-top/preloader/cookie all
   degrade to a fully-visible, non-blocked page.
   ========================================================================== */

/* ---- fe-polish: preloader (J8) — brand splash, removed on DOMContentLoaded + failsafe ---- */
.fe-preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--bg); transition: opacity 480ms var(--ease), visibility 480ms var(--ease); }
.fe-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.fe-preloader-mark { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700;
  font-size: 1.4rem; letter-spacing: var(--tracking-tight); color: var(--ink); }
.fe-preloader-dot { width: 0.8rem; height: 0.8rem; border-radius: var(--r-pill); background: var(--brand-accent);
  box-shadow: 0 0 0 5px var(--brand-accent-soft); animation: fe-pre-pulse 1.1s var(--ease) infinite; }
@keyframes fe-pre-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.55; } }
/* No-JS: <html> never gets .fe-preloading removed, so make the splash inert to scroll but never trap content.
   The inline script always removes it (load or 2.5s failsafe); this is only belt-and-suspenders. */

/* ---- fe-polish: top utility bar (A1) — thin, muted strip above the announcement ---- */
.util-bar { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--text-xs); }
.util-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 34px; padding-block: 0.3rem; }
.util-msg { margin: 0; color: var(--subtle); font-weight: 500; }
.util-right { display: flex; align-items: center; gap: var(--space-4); }
.util-links { display: flex; align-items: center; gap: var(--space-4); }
.util-links a { color: var(--body); font-weight: 500; }
.util-links a:hover { color: var(--brand-accent); }
/* C-11 currency switcher: compact select in the utility bar; the Go button is hidden once JS auto-submits. */
.currency-switcher { display: flex; align-items: center; gap: var(--space-1); }
.currency-select { font: inherit; font-size: var(--text-xs); color: var(--body); background: var(--surface); border: 1px solid var(--input-border);
  border-radius: var(--r-sm); padding: 0.15rem 1.4rem 0.15rem 0.5rem; line-height: 1.4; cursor: pointer;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--subtle) 50%), linear-gradient(135deg, var(--subtle) 50%, transparent 50%);
  background-position: right 0.62rem center, right 0.45rem center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.currency-select:hover { border-color: var(--brand-accent); }
.currency-go { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--body); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.15rem 0.55rem; cursor: pointer; }
.currency-go:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
/* F1.LP-G3: language switcher — compact inline crawlable <a> links in the utility bar. */
.lang-switcher { display: flex; align-items: center; gap: 0.1rem; margin-inline-end: var(--space-2); }
.lang-option { font-size: var(--text-xs); color: var(--muted); text-decoration: none; padding: 0.15rem 0.4rem; border-radius: var(--r-sm);
  line-height: 1.4; white-space: nowrap; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.lang-option:hover { color: var(--brand-accent); }
.lang-option.is-current { color: var(--body); font-weight: 600; background: var(--surface-2, var(--surface)); }
/* Reduce chrome stacking on phones: the utility bar collapses; announce + header remain. */
@media (max-width: 767px) { .util-bar { display: none; } }

/* G25 currency-by-country: dismissable hint bar when the presentment currency was auto-applied from geo. A
   brand-tinted full-width strip (light+dark via tokens); stays visible on mobile (unlike the utility bar). */
.currency-hint { background: color-mix(in oklab, var(--brand-accent) 10%, var(--surface)); border-bottom: 1px solid var(--line);
  font-size: var(--text-sm, var(--text-xs)); }
.currency-hint[hidden] { display: none; }
.currency-hint .currency-hint-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-3, 0.75rem); min-height: 40px; padding-block: 0.45rem; }
.currency-hint-text { margin: 0; color: var(--body); font-weight: 500; }
.currency-hint-code { color: var(--brand-accent); font-weight: 700; }
.currency-hint-actions { display: flex; align-items: center; gap: var(--space-2, 0.5rem); }
.currency-hint-revert { margin: 0; }
.currency-hint-use { font: inherit; font-size: inherit; font-weight: 600; color: #fff; background: var(--brand-accent);
  border: 1px solid var(--brand-accent); border-radius: var(--r-sm); padding: 0.25rem 0.7rem; cursor: pointer;
  transition: filter var(--dur-fast, 150ms) ease; }
.currency-hint-use:hover { filter: brightness(1.08); }
.currency-hint-close { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  font-size: 1.15rem; line-height: 1; color: var(--subtle); background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; transition: color var(--dur-fast, 150ms) ease, background var(--dur-fast, 150ms) ease; }
.currency-hint-close:hover { color: var(--body); background: color-mix(in oklab, var(--body) 8%, transparent); }

/* ---- A4/H1 search: header box + typeahead overlay + results page ---- */
.header-search { position: relative; display: flex; align-items: center; }
.header-search-input { font: inherit; font-size: var(--text-sm); width: 12rem; max-width: 26vw; padding: 0.4rem 2rem 0.4rem 0.7rem;
  border: 1px solid var(--input-border); border-radius: var(--r-pill); background: var(--surface); color: var(--body); }
.header-search-input::placeholder { color: var(--subtle); }
.header-search-input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; border-color: var(--brand-accent); }
.header-search-btn { margin-left: -1.9rem; background: none; border: 0; color: var(--subtle); cursor: pointer; padding: 0.2rem 0.4rem; font-size: 1.05rem; line-height: 1;
  /* PA-0359 (WCAG 2.5.8): measured 22.8x23.2px on a live preview store; the minimum target is 24x24. */
  min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; }
.header-search-btn:hover { color: var(--brand-accent); }
.search-suggest { position: absolute; top: calc(100% + 6px); right: 0; width: min(24rem, 90vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 0.35rem; z-index: 60; max-height: 72vh; overflow-y: auto; }
.search-suggest-item { display: flex; align-items: center; gap: var(--space-3); padding: 0.4rem 0.5rem; border-radius: var(--r-sm); color: var(--body); text-decoration: none; }
.search-suggest-item:hover, .search-suggest-item.is-active { background: var(--surface-2); }
.search-suggest-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); flex: none; }
.search-suggest-name { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-price { margin-left: auto; padding-left: var(--space-3); font-size: var(--text-xs); color: var(--subtle); flex: none; }
.search-suggest-all { display: block; padding: 0.5rem; font-size: var(--text-xs); font-weight: 600; color: var(--brand-accent); text-align: center; border-top: 1px solid var(--line); margin-top: 0.25rem; }
.search-suggest-empty { padding: 0.7rem 0.5rem; font-size: var(--text-sm); color: var(--subtle); text-align: center; }
.search-head { align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.search-page-form { display: flex; gap: var(--space-2); flex: 1 1 18rem; max-width: 30rem; }
.search-page-form input[type="search"] { flex: 1; font: inherit; padding: 0.6rem 0.85rem; border: 1px solid var(--input-border); border-radius: var(--r-md); background: var(--surface); color: var(--body); }
.search-page-form input[type="search"]:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; border-color: var(--brand-accent); }
@media (max-width: 900px) { .header-search-input { width: 9rem; } }
/* On phones the header collapses to hamburger + brand + cart (no room for inline search) — search moves into the
   nav drawer, matching how the catalog nav and currency switcher are drawered. */
@media (max-width: 767px) { .header-search { display: none; } }
.mnav-search { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); display: flex; gap: var(--space-2); }
.mnav-search input[type="search"] { flex: 1; min-width: 0; font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--input-border); border-radius: var(--r-md); background: var(--surface); color: var(--body); }
.mnav-search button { flex: 0 0 auto; white-space: nowrap; }

/* ---- fe-polish: announcement bar (A8) — dismissible, rotating (JS), inline fallback (no-JS/reduced-motion) ---- */
html.fe-announce-dismissed .announce { display: none; }
.announce { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); padding-inline: clamp(2.4rem, 8vw, 3rem); }
/* Default (no-JS / reduced-motion): show every message inline with middot separators. */
.announce-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.5rem; }
.announce-item { position: relative; }
.announce-item + .announce-item::before { content: "·"; position: absolute; left: -0.85rem;
  color: currentColor; opacity: 0.55; }
/* Rotation mode (JS, motion allowed): stack items and cross-fade one at a time. */
.announce-track.is-rotating { display: block; position: relative; min-height: 1.3em; min-width: 12ch; }
.announce-track.is-rotating .announce-item { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; margin: 0; opacity: 0; white-space: nowrap; transition: opacity 500ms var(--ease); }
.announce-track.is-rotating .announce-item::before { content: none; }
.announce-track.is-rotating .announce-item.is-active { opacity: 1; }
/* Subtle brand sheen sweeping across the bar (motion only). */
.announce::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: fe-announce-sheen 7s ease-in-out infinite; }
@keyframes fe-announce-sheen { 0%, 62%, 100% { left: -60%; } 30% { left: 130%; } }
.announce-close { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill);
  background: transparent; color: #fff; opacity: 0.75; font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.announce-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.announce-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; box-shadow: none; }

/* ---- fe-polish: sticky-header shrink + elevate on scroll (A3) ---- */
.site-header { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: transform; }
/* A3 refinement: auto-hide on scroll-down, reveal on scroll-up (JS toggles .is-hidden). */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { transition: height var(--dur) var(--ease); }
.site-header .brand { transition: font-size var(--dur) var(--ease); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow-md); }
/* Height/brand shrink only where the header is a single comfortable row (desktop);
   on phones the row can wrap, so a forced short height would clip it — keep just the elevate. */
@media (min-width: 768px) {
  .site-header.is-scrolled .wrap { height: 54px; }
  .site-header.is-scrolled .brand { font-size: 1.08rem; }
}

/* ---- fe-polish: scroll-reveal engine (J6) — no-JS safe (only active when JS adds .fe-reveal-on) ---- */
html.fe-reveal-on [data-reveal] { opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform; }
html.fe-reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---- fe-polish: mega-footer reveal (A10) — staggered columns via the reveal engine ---- */
.site-footer .footer-grid > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.site-footer .footer-grid > [data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.site-footer .footer-grid > [data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.site-footer .footer-grid > [data-reveal]:nth-child(4) { --reveal-delay: 210ms; }

/* ---- fe-polish: back-to-top FAB (J8) — appears past a scroll threshold ---- */
.back-to-top { position: fixed; right: clamp(1rem, 2.5vw, 1.6rem); bottom: clamp(1rem, 2.5vw, 1.6rem); z-index: 58;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); color: var(--ink); box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { color: var(--brand-accent); border-color: var(--brand-accent); transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring), var(--shadow-md); }
.back-to-top-ico { font-size: 1.2rem; line-height: 1; }
/* Yield the corner while the cookie banner is open (avoids overlap on every viewport). */
body.fe-cookie-open .back-to-top { opacity: 0; pointer-events: none; }

/* ---- fe-polish: cookie-consent (J9) — soft banner, does not block the page ---- */
.cookie-consent { position: fixed; z-index: 65; left: clamp(0.75rem, 3vw, 1.5rem); right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem); max-width: 64rem; margin-inline: auto;
  opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cookie-consent.is-open { opacity: 1; transform: none; }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-5); }
.cookie-copy { min-width: 0; flex: 1 1 22rem; }
.cookie-title { margin: 0 0 0.2rem; font-weight: 700; color: var(--ink); font-size: var(--text-base); }
.cookie-text { margin: 0; color: var(--subtle); font-size: var(--text-sm); }
.cookie-actions { display: flex; gap: var(--space-2); flex: none; }
@media (max-width: 560px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* ---- fe-polish: reduced-motion — kill decorative motion, keep everything visible/usable ---- */
@media (prefers-reduced-motion: reduce) {
  .fe-preloader-dot { animation: none; }
  .announce::after { animation: none; display: none; }
  .site-header, .site-header .wrap, .site-header .brand { transition: none; }
  html.fe-reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .back-to-top, .cookie-consent, .fe-preloader { transition: opacity 1ms linear; }
}

/* ---- listing: grid/list view toggle (C5) + load-more pagination (C4) ---- */
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); }
.view-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.9rem; padding: 0;
  border: 0; border-radius: calc(var(--r-sm) - 3px); background: transparent; color: var(--subtle); cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.view-btn:hover { color: var(--ink); }
.view-btn.is-active { background: var(--surface); color: var(--brand-accent-strong); box-shadow: var(--shadow-sm); }

/* List view: one column, card laid out horizontally (thumb left, body right). */
.product-grid.is-list { grid-template-columns: 1fr; gap: var(--space-3); }
.product-grid.is-list .product-card a { display: grid; grid-template-columns: minmax(96px, 168px) 1fr; align-items: stretch; }
.product-grid.is-list .product-card .thumb { aspect-ratio: 1 / 1; height: 100%; }
.product-grid.is-list .product-card .body { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: var(--space-4) var(--space-5); }
.product-grid.is-list .product-card a:hover { transform: none; box-shadow: var(--shadow-md); }
.product-grid.is-list .product-card a:hover .thumb img { transform: none; }

/* Pager: centered load-more + prev/next fallback. */
.pager { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.pager .load-more { min-width: 14rem; }
.pager .load-more[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.pager-nav { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--subtle); }
.pager-link { color: var(--brand-accent-strong); font-weight: 600; text-decoration: none; }
.pager-link:hover { text-decoration: underline; }
.pager-status { color: var(--subtle); }

/* ---- checkout: contact + delivery + shipping method + order summary (E5) ---- */
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 860px) { .checkout-grid { grid-template-columns: 1.55fr 0.85fr; gap: var(--space-6); } }
.checkout-main { display: flex; flex-direction: column; gap: var(--space-4); }
/* The form is itself a stack of cards (Contact / Delivery address / Shipping / Payment) — give it the same gap
   so those cards never glue together (only .checkout-main spaces the outer Delivery card from the form). */
.checkout-form { display: flex; flex-direction: column; gap: var(--space-4); }
.checkout-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.checkout-card h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.checkout-card label { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--ink); margin-bottom: 0.4rem; }
.checkout-card input[type="email"] { width: 100%; }
.field-hint { margin: 0.5rem 0 0; font-size: var(--text-xs); color: var(--subtle); }

/* Country chooser: label + select + no-JS update button on one line. */
.country-form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.country-form label { margin-bottom: 0; }
.country-form .select-wrap { flex: 1 1 12rem; min-width: 0; }
.country-form select { width: 100%; }

/* Shipping methods: bordered selectable rows, accent when chosen. */
.ship-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* Scoped with .checkout-card to out-specify the generic `.checkout-card label { display:block }` field rule. */
.checkout-card .ship-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ship-method:hover { border-color: var(--brand-accent); }
.ship-method.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.ship-method input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ship-radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.ship-method.is-selected .ship-radio { border-color: var(--brand-accent); }
.ship-method.is-selected .ship-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.ship-method input:focus-visible + .ship-radio { box-shadow: var(--ring); }
.ship-name { font-weight: 600; color: var(--ink); }
.ship-price { font-weight: 700; color: var(--brand-accent-strong); }
.ship-none { color: var(--subtle); }
.checkout-pay { width: 100%; margin-top: var(--space-2); }
.checkout-trust { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-xs); color: var(--subtle); }

/* Payment method (F1.LP-G7): card / bank-transfer radios, mirroring the shipping-method row pattern. */
.pay-methods { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-card .pay-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pay-method:hover { border-color: var(--brand-accent); }
.pay-method.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.pay-method input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.pay-method.is-selected .pay-radio { border-color: var(--brand-accent); }
.pay-method.is-selected .pay-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.pay-method input:focus-visible + .pay-radio { box-shadow: var(--ring); }
.pay-method-name { font-weight: 600; color: var(--ink); }
.pay-method-badge { justify-self: end; font-size: var(--text-xs); font-weight: 700; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }

/* Bank-account picker — revealed when bank transfer is the chosen method (or shown outright when it's the only one). */
.pay-accounts { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.pay-methods ~ .pay-accounts { display: none; }
.pay-section:has(input[name="paymentMethod"][value="bank_transfer"]:checked) .pay-accounts { display: block; }
.pay-accounts-head { margin: 0 0 var(--space-3); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.bank-accounts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-card .bank-account { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bank-account:hover { border-color: var(--brand-accent); }
.bank-account.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.bank-account input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.bank-radio { width: 20px; height: 20px; margin-top: 0.15rem; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.bank-account.is-selected .bank-radio { border-color: var(--brand-accent); }
.bank-account.is-selected .bank-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.bank-account input:focus-visible + .bank-radio { box-shadow: var(--ring); }
.bank-account-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bank-account-name { font-weight: 600; color: var(--ink); }
.bank-account-holder { font-size: var(--text-sm); color: var(--body); }
.bank-account-iban { font-size: var(--text-sm); color: var(--subtle); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Wave-7 Stage-2 — pickup / click-and-collect: delivery-method toggle reuses the .pill-radio segmented control;
   the store picker mirrors the .bank-account radio-card pattern for visual consistency across the checkout. */
.delivery-mode { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.pickup-locations { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.checkout-card .pickup-location { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pickup-location:hover { border-color: var(--brand-accent); }
.pickup-location.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.pickup-location input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pickup-radio { width: 20px; height: 20px; margin-top: 0.15rem; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.pickup-location.is-selected .pickup-radio { border-color: var(--brand-accent); }
.pickup-location.is-selected .pickup-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.pickup-location input:focus-visible + .pickup-radio { box-shadow: var(--ring); }
.pickup-location-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pickup-location-label { font-weight: 600; color: var(--ink); }
.pickup-location-addr { font-size: var(--text-sm); color: var(--body); }
.pickup-location-notes { font-size: var(--text-sm); color: var(--subtle); }
.pay-accounts-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--subtle); }

/* Installment picker (F1.LP-G8) — revealed when "Installments" is the chosen method. BIN entry → live plan list. */
.pay-installments { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.pay-methods ~ .pay-installments { display: none; }
.pay-section:has(input[name="paymentMethod"][value="installment"]:checked) .pay-installments { display: block; }
.pay-installments-head { margin: 0 0 var(--space-3); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.pay-installments input[type="text"] { width: 100%; max-width: 12rem; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.installment-options { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
/* Scoped with .checkout-card to out-specify the generic `.checkout-card label { display:block }` field rule.
   Flex + wrap so the "Interest-free" badge drops to its own right-aligned line when the row is too narrow (≤320)
   rather than crushing the money text — the radio + count/total always stay intact on the first line. */
.checkout-card .installment-option { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.installment-option:hover { border-color: var(--brand-accent); }
.installment-option.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.installment-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.inst-radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.installment-option.is-selected .inst-radio { border-color: var(--brand-accent); }
.installment-option.is-selected .inst-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.installment-option input:focus-visible + .inst-radio { box-shadow: var(--ring); }
.inst-option-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.inst-option-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inst-option-total { font-size: var(--text-sm); color: var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inst-option-badge { margin-left: auto; flex: none; font-size: var(--text-xs); font-weight: 700; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }
.installment-empty { margin: var(--space-3) 0 0; }

/* Cash-on-delivery note (F1.LP-G9) — revealed when "Cash on delivery" is the chosen method (or shown outright
   when it's the only one, exactly like the bank-account picker). */
.pay-cod { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.pay-methods ~ .pay-cod { display: none; }
.pay-section:has(input[name="paymentMethod"][value="cash_on_delivery"]:checked) .pay-cod { display: block; }
.pay-cod-note { margin: 0; font-size: var(--text-sm); color: var(--body); }

/* Saved-card picker (F1.LP-G14) — revealed when "Saved card" is the chosen method. Mirrors the bank-account row. */
.pay-saved-cards { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.pay-methods ~ .pay-saved-cards { display: none; }
.pay-section:has(input[name="paymentMethod"][value="saved_card"]:checked) .pay-saved-cards { display: block; }
.pay-saved-cards-head { margin: 0 0 var(--space-3); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.saved-cards { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-card .saved-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 400; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.saved-card:hover { border-color: var(--brand-accent); }
.saved-card.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.saved-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.saved-radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; transition: border-color var(--dur-fast) var(--ease); }
.saved-card.is-selected .saved-radio { border-color: var(--brand-accent); }
.saved-card.is-selected .saved-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.saved-card input:focus-visible + .saved-radio { box-shadow: var(--ring); }
.saved-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.saved-card-brand { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.saved-card-dots { letter-spacing: 0.1em; color: var(--subtle); }
.saved-card-exp { font-size: var(--text-sm); color: var(--subtle); font-variant-numeric: tabular-nums; }
.saved-card-badge { justify-self: end; font-size: var(--text-xs); font-weight: 700; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }
.pay-saved-cards-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--subtle); }

/* Checkout progress indicator (F1.LP checkout beast) — a 3-stage strip (Details → Payment → Confirmation) shown
   on the checkout + payment pages. Purely presentational (no flow gating): communicates where the shopper is in
   the two-page flow. `is-current` = the active stage; `is-done` = a completed earlier stage. */
.checkout-steps { list-style: none; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6);
  padding: 0; flex-wrap: wrap; }
.checkout-step { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--subtle);
  font-size: var(--text-sm); font-weight: 500; }
.checkout-step:not(:last-child)::after { content: ""; width: clamp(1.5rem, 6vw, 3rem); height: 1px; background: var(--line-strong);
  margin-left: var(--space-2); }
.checkout-step-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--subtle); }
.checkout-step.is-current { color: var(--ink); font-weight: 700; }
.checkout-step.is-current .checkout-step-num { border-color: var(--brand-accent); background: var(--brand-accent); color: #fff; }
.checkout-step.is-done { color: var(--body); }
.checkout-step.is-done .checkout-step-num { border-color: var(--brand-accent); background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }

/* Express Checkout Element (F1.LP checkout beast) — Apple/Google Pay wallet buttons above the card form on the
   payment page. Hidden until Stripe.js confirms a wallet is available, so there's no empty gap for card-only. */
.express-wrap { margin: 0 0 var(--space-4); }
#express-checkout-element { min-height: 44px; }
.express-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0;
  color: var(--subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.express-divider::before, .express-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Confirmation / thank-you page — money-path redesign (F1.LP-G15). */
.confirm { max-width: 720px; margin: 0 auto; }
.confirm-hero { text-align: center; padding: var(--space-5) 0 var(--space-4); }
.confirm-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 2rem; font-weight: 800;
  margin-bottom: var(--space-3); box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 12%, transparent); }
.confirm-hero h1 { margin: 0 0 var(--space-2); }
.confirm-order-line { margin: 0; color: var(--body); }
.confirm-order-line .badge { margin-left: var(--space-2); vertical-align: middle; }
.confirm-pending-note { margin: var(--space-2) auto 0; max-width: 44ch; color: var(--body); font-size: var(--text-sm); }
.confirm-total-hero { margin: var(--space-3) 0 0; font-size: var(--text-xl); font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.confirm-summary { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); }
.confirm-summary h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.confirm-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.confirm-line { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: var(--space-3); }
.confirm-thumb, .confirm-thumb-ph { width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover;
  background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.confirm-line-name { font-weight: 600; color: var(--ink); }
.confirm-line-qty { color: var(--body); font-variant-numeric: tabular-nums; }
.confirm-line-total { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.confirm-totals { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-2); }
.confirm-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.confirm-totals dt { color: var(--body); margin: 0; }
.confirm-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.confirm-totals .is-discount dd { color: var(--success); }
.confirm-total-row { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.confirm-total-row dt, .confirm-total-row dd { font-weight: 800; font-size: var(--text-lg); }

.confirm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.confirm-block { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.confirm-block h2 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.confirm-address { font-style: normal; display: flex; flex-direction: column; gap: 0.15rem; color: var(--body); }
.confirm-address strong { color: var(--ink); }
.confirm-phone { color: var(--body); }

.confirm-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.confirm-guest { margin: var(--space-5) 0; padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); }
.confirm-guest h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.confirm-guest p { margin: 0 0 var(--space-3); color: var(--body); }
.confirm-downloads { margin: var(--space-5) 0; }
.confirm-support { margin: var(--space-6) 0 var(--space-4); text-align: center; color: var(--body); }
.confirm-support h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.confirm-support a { font-weight: 600; color: var(--brand-accent-strong); }

/* Confirmation: "pay by bank transfer" panel (F1.LP-G7). */
.bt-panel { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--brand-accent); border-radius: var(--r-lg);
  background: var(--brand-accent-soft); box-shadow: var(--shadow-sm); }
.bt-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bt-panel-head h2 { margin: 0; font-size: var(--text-lg); }
.bt-amount { margin: 0; font-size: var(--text-xl); font-weight: 800; color: var(--brand-accent-onsoft); font-variant-numeric: tabular-nums; }
.bt-deadline { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--body); }
.bt-fields { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bt-fields > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding-bottom: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.bt-fields > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bt-fields dt { font-size: var(--text-sm); color: var(--subtle); }
.bt-fields dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.bt-copy-row dd { display: inline-flex; align-items: center; gap: var(--space-2); }
.bt-iban, .bt-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--text-sm);
  letter-spacing: 0.03em; background: var(--surface); padding: 0.2rem 0.5rem; border-radius: var(--r-sm); }
.bt-copy { font-size: var(--text-xs); font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--r-pill);
  border: 1px solid var(--brand-accent); background: var(--surface); color: var(--brand-accent-strong); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.bt-copy:hover { background: var(--brand-accent); color: var(--on-accent); }
.bt-copy.is-copied { background: var(--brand-accent); color: var(--on-accent); }
.bt-note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--body); }
.bt-instructions { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--subtle); }

/* Confirmation: "paid in installments" panel (F1.LP-G8) — the snapshotted split. */
.inst-panel { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--shadow-sm); }
.inst-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.inst-panel-head h2 { margin: 0; font-size: var(--text-lg); }
.inst-panel-count { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--brand-accent-strong); font-variant-numeric: tabular-nums; }
.inst-fields { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.inst-fields > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.inst-fields > div:last-child { border-bottom: 0; padding-bottom: 0; }
.inst-fields dt { font-size: var(--text-sm); color: var(--subtle); }
.inst-fields dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Confirmation: "pay on delivery" panel (F1.LP-G9). */
.cod-panel { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--brand-accent); border-radius: var(--r-lg);
  background: var(--brand-accent-soft); box-shadow: var(--shadow-sm); }
.cod-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cod-panel-head h2 { margin: 0; font-size: var(--text-lg); }
.cod-amount { margin: 0; font-size: var(--text-xl); font-weight: 800; color: var(--brand-accent-onsoft); font-variant-numeric: tabular-nums; }
.cod-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--body); }

/* Order summary: sticky panel with items, line breakdown, emphasized total. */
.checkout-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); }
@media (min-width: 860px) { .checkout-summary { position: sticky; top: 90px; } }
.checkout-summary h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.summary-items { list-style: none; margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.summary-items li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: baseline; font-size: var(--text-sm); }
.summary-qty { color: var(--subtle); font-variant-numeric: tabular-nums; }
.summary-name { color: var(--body); min-width: 0; }
.summary-line { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-lines { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.summary-lines > div { display: flex; justify-content: space-between; align-items: baseline; }
.summary-lines dt { color: var(--subtle); font-size: var(--text-sm); }
.summary-lines dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-lines .is-discount dd { color: var(--brand-accent-strong); }
.summary-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.summary-total dt { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.summary-total dd { font-size: var(--text-lg); font-weight: 800; }
.summary-vat-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--subtle); }

/* ---- checkout Form v2 (F1.LP-G50): structured address, combobox, intl-tel, saved addresses ---- */
.address-fields { display: flex; flex-direction: column; gap: var(--space-4); }
/* The TR/intl blocks are containers too — give them the same rhythm so their fields never glue together. */
.tr-address, .intl-address, .intl-address-fallback { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-address[hidden], .intl-address[hidden], .intl-address-fallback[hidden] { display: none; }
.address-card .field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.address-card .field > label { margin: 0; }
.address-card .field .opt { font-weight: 400; color: var(--subtle); }
/* F1.LP-G40: required-mark on an otherwise-optional field the tenant has made mandatory (identity number). */
.invoice-card .req { color: var(--brand-accent); font-weight: 600; }
.address-card .field input { width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.address-card input.has-error { border-color: var(--danger); }
.address-card .field-error { margin: 0; padding: 0.35rem 0.6rem; font-size: var(--text-xs); font-weight: 600;
  color: var(--danger); background: var(--danger-soft); border: 0; border-radius: var(--r-sm); }
.address-card .field-hint[data-postal-hint] { color: var(--brand-accent-strong); font-weight: 600; }

/* Searchable combobox (il / ilçe / mahalle) — beast, dependency-free. */
.ciqra-combobox { position: relative; }
.combobox-list { list-style: none; margin: 0; padding: 0.3rem; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.combobox-option { padding: 0.6rem 0.7rem; border-radius: var(--r-sm); color: var(--body); cursor: pointer;
  font-size: var(--text-sm); line-height: 1.3; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.combobox-option:hover, .combobox-option.is-active { background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }
.combobox-skeleton { height: 1.9rem; margin: 0.15rem 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: cbShimmer 1.1s linear infinite; }
@keyframes cbShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .combobox-skeleton { animation: none; } }

/* intl-tel phone widget — flag + dial-code selector, E.164 hidden field. */
/* The SHELL is the field — one border/radius/background exactly like a sibling input; the flag-button and the number
   input sit inside it borderless, so the phone field is visually indistinguishable from email/name/street. Focus rings
   the whole shell (:focus-within), never just the input. A single subtle --line divider separates dial-code from number. */
.tel-shell { display: flex; align-items: stretch; position: relative;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tel-shell:focus-within { border-color: var(--brand-accent); box-shadow: var(--ring); }
.tel-country { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--ink); font: inherit; font-weight: 600; line-height: 1;
  border-radius: var(--r-sm) 0 0 var(--r-sm); transition: background var(--dur-fast) var(--ease); }
.tel-country:hover { background: var(--surface-2); }
.tel-country:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; background: var(--surface-2); }
.tel-shell input[type="tel"] { border: 0; background: transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0.7rem 0.85rem; flex: 1; min-width: 0; width: 100%; font: inherit; color: var(--ink); }
.tel-shell input[type="tel"]:focus { outline: 2px solid transparent; box-shadow: none; } /* the shell shows the ring, not the input */
.tel-flag { font-size: 1rem; line-height: 1; flex: none; } /* .fi (flags.css) draws the real flag image, sized in em */
.tel-dial { color: var(--subtle); font-variant-numeric: tabular-nums; }
.tel-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--subtle); }
.tel-menu { margin: 0; padding: 0.3rem; position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; min-width: 17rem;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.tel-search { width: 100%; margin-bottom: 0.3rem; font-size: var(--text-sm); }
.tel-options { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; }
.tel-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--text-sm); color: var(--body); }
.tel-option:hover { background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }
.tel-option .tel-name { min-width: 0; }

/* "Ship to" country flag-combobox — looks like a select, opens a searchable flag list. */
/* The country combobox reuses .tel-shell for layout, but ITS OWN button is the field — so strip the shared field
   border/background off the wrapper to avoid a double border. */
.country-combobox.tel-shell { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.country-combobox.tel-shell:focus-within { border-color: transparent; box-shadow: none; }
.country-combobox { position: relative; width: 100%; }
.country-combobox-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--brand-accent); box-shadow: var(--ring); }
.country-combobox-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.7rem 0.85rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); font: inherit; text-align: left; }
.country-combobox-btn:hover { border-color: var(--brand-accent); }
.country-combobox-btn .country-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-combobox-btn .tel-caret { margin-left: auto; }
.country-menu { left: 0; right: 0; min-width: 0; }

/* Saved-address picker. */
.saved-addresses { margin: 0 0 var(--space-5); padding: 0 0 var(--space-5); border-bottom: 1px dashed var(--line); }
.saved-addresses-head { margin: 0 0 var(--space-3); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.saved-address-list { display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-card .saved-address { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; font-weight: 400;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.saved-address:hover { border-color: var(--brand-accent); }
.saved-address.is-selected { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.saved-address input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.saved-address .saved-radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); position: relative; flex: none; }
.saved-address.is-selected .saved-radio { border-color: var(--brand-accent); }
.saved-address.is-selected .saved-radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill); background: var(--brand-accent); }
.saved-address input:focus-visible + .saved-radio { box-shadow: var(--ring); }
.saved-address-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.saved-address-label { font-weight: 600; color: var(--ink); }
.saved-address-line { font-size: var(--text-sm); color: var(--subtle); }

/* Address Element mount + checkbox row. */
.address-element-mount { min-height: 2.5rem; }
.checkbox-row { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: var(--text-sm); color: var(--body); cursor: pointer; }
.checkbox-row input { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--brand-accent); }

/* Mobile sticky pay bar — the primary CTA stays reachable while scrolling a long form. */
.checkout-paybar { display: none; }
@media (max-width: 859px) {
  .checkout-paybar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.3) blur(10px); border-top: 1px solid var(--line); }
  .checkout-paybar .paybar-total { display: flex; flex-direction: column; }
  .checkout-paybar .paybar-total dt { font-size: var(--text-xs); color: var(--subtle); }
  .checkout-paybar .paybar-total dd { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .checkout-paybar .btn { flex: 0 0 auto; }
}

/* ---- dedicated minimal checkout chrome (F1.LP-G50): Shopify-checkout pattern ---- */
.checkout-body { background: var(--bg); }
/* Tighten the top rhythm (marketing-page .section margin is 4.5rem — too much for a focused checkout) + a compact
   two-column header: title block on the left, breadcrumb over the step indicator on the right. */
.checkout-body .section.checkout { margin-top: var(--space-4); }
/* 2×2 grid: row 1 = eyebrow ↔ breadcrumb; row 2 = title ↔ steps. Each row's two items share a line and are centered
   together, so "Secure checkout"/breadcrumb align and "Checkout"/steps align. */
.checkout-head { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-6); row-gap: var(--space-2); margin-bottom: var(--space-6); }
/* Row 1: eyebrow + breadcrumb share a text baseline (different sizes → baseline, not center). Row 2: the big title
   and the small step indicator are centered together. */
.checkout-head .eyebrow { grid-area: 1 / 1; margin: 0; align-self: baseline; }
.checkout-head .breadcrumb { grid-area: 1 / 2; justify-self: end; margin: 0; align-self: baseline; }
.checkout-head h1 { grid-area: 2 / 1; margin: 0; align-self: center; }
.checkout-head .checkout-steps { grid-area: 2 / 2; justify-self: end; margin: 0; align-self: center; }
@media (max-width: 700px) {
  /* Stack: breadcrumb, eyebrow, title, steps — steps scroll horizontally if needed. */
  .checkout-head { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .checkout-head .eyebrow { grid-area: auto; }
  .checkout-head .breadcrumb { grid-area: auto; justify-self: start; order: -1; }
  .checkout-head h1 { grid-area: auto; }
  .checkout-head .checkout-steps { grid-area: auto; justify-self: start; overflow-x: auto; max-width: 100%; }
}
.checkout-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.checkout-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.checkout-header .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.2rem; letter-spacing: var(--tracking-tight); color: var(--ink); }
.checkout-header .brand .dot { width: 0.6rem; height: 0.6rem; border-radius: var(--r-pill); background: var(--brand-accent); }
.checkout-secure { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: 600; color: var(--subtle); }
.checkout-secure-ico { font-size: 0.95rem; }
.checkout-footer { border-top: 1px solid var(--line); margin-top: var(--space-7); }
.checkout-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.checkout-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.checkout-legal a { color: var(--subtle); font-size: var(--text-sm); }
.checkout-legal a:hover { color: var(--brand-accent); }
.checkout-copy { color: var(--subtle); font-size: var(--text-sm); }
.checkout-footer .pay-marks { display: inline-flex; gap: 0.4rem; }
.checkout-footer .pay-marks span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--subtle); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0.2rem 0.4rem; }
/* The minimal header isn't sticky, so the order summary can stick near the top of the viewport. */
.checkout-body .checkout-summary { top: var(--space-4); }
.summary-thumb-placeholder { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 1.3rem; }

/* ---- checkout Form v2 Phase 2 (F1.LP-G50): billing toggle, invoice, consent, enriched summary ---- */
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; font-size: var(--text-sm); color: var(--body); cursor: pointer; margin: 0; }
.checkbox-row input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.1rem; accent-color: var(--brand-accent); }
.billing-fields { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.billing-fields h2 { font-size: var(--text-lg); }

/* Invoice type — pill radios. */
.invoice-type { display: flex; gap: var(--space-3); border: 0; margin: 0 0 var(--space-4); padding: 0; }
.pill-radio { position: relative; margin: 0; }
.pill-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-radio span { display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--text-sm); color: var(--body); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pill-radio:hover span { border-color: var(--brand-accent); }
.pill-radio.is-selected span { border-color: var(--brand-accent); background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); }
.pill-radio input:focus-visible + span { box-shadow: var(--ring); }
.invoice-individual, .invoice-corporate { display: flex; flex-direction: column; gap: var(--space-4); }
.invoice-individual[hidden], .invoice-corporate[hidden] { display: none; } /* [hidden] must beat display:flex */
.invoice-vat { margin-top: var(--space-4); }
.invoice-card .field { display: flex; flex-direction: column; gap: 0.4rem; }
.invoice-card .field input { width: 100%; }
.invoice-card input.has-error { border-color: var(--danger); }
.invoice-card .field-error { margin: 0; padding: 0.35rem 0.6rem; font-size: var(--text-xs); font-weight: 600; color: var(--danger); background: var(--danger-soft); border: 0; border-radius: var(--r-sm); }

/* Consent gate. */
.consent-card { display: flex; flex-direction: column; gap: var(--space-3); }
.consent-row a { color: var(--brand-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* Enriched order-summary line: thumbnail + qty badge + name/variant + line total. */
.summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; }
.summary-thumb { position: relative; width: 56px; height: 56px; }
.summary-thumb picture, .summary-thumb img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); border: 1px solid var(--line); display: block; }
.summary-qty-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--ink); color: var(--surface); border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-item-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.summary-item .summary-name { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.summary-variant { font-size: var(--text-xs); color: var(--subtle); }
.summary-item .summary-line { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.summary-promo { margin: var(--space-4) 0; padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-promo label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.4rem; }
.summary-promo .promo-row input { width: 100%; }
.summary-lines .is-coupon dd { color: var(--brand-accent-strong); font-weight: 600; }
.summary-trust { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--subtle); }

/* ---- full cart page: line thumbnails + inline qty stepper + remove (E1) ---- */
.summary h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto auto; grid-template-areas: "thumb info qty total";
  gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.cart-line:first-child { padding-top: 0; }
.cart-thumb { grid-area: thumb; display: block; width: 88px; height: 88px; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.5rem; color: var(--subtle); }
.cart-line-info { grid-area: info; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cart-line-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.cart-line-name:hover { color: var(--brand-accent); }
.cart-line-variant { color: var(--body); font-size: var(--text-sm); }

/* A5: PDP size guide (no-JS <details>). */
.size-guide { margin: var(--space-3) 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.size-guide > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; }
.size-guide > summary::after { content: "＋"; color: var(--body); }
.size-guide[open] > summary::after { content: "－"; }
.size-guide > summary::-webkit-details-marker { display: none; }
.size-guide-body { padding: 0 var(--space-4) var(--space-4); }
.size-guide-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.size-guide-body th, .size-guide-body td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; }

/* A6: merchant content sections. */
.rich-text { max-width: 760px; margin-inline: auto; padding: var(--space-6) var(--space-4); }
.rich-text--center { text-align: center; }
.rich-text h2 { margin: 0 0 var(--space-3); }
.rich-text-body { color: var(--body); font-size: var(--text-lg); line-height: 1.6; }
.rich-text .btn { margin-top: var(--space-4); }
.image-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center;
  padding: var(--space-6) var(--space-4); max-width: var(--maxw, 1200px); margin-inline: auto; }
.image-text--image-right .image-text-media { order: 2; }
.image-text-media img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.image-text-body h2 { margin: 0 0 var(--space-3); }
.image-text-body p { color: var(--body); margin: 0 0 var(--space-4); }
.testimonials { padding: var(--space-6) var(--space-4); text-align: center; }
.testimonials-title { margin: 0 0 var(--space-5); }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4);
  max-width: var(--maxw, 1200px); margin-inline: auto; text-align: left; }
.testimonial { margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.testimonial blockquote { margin: 0 0 var(--space-3); font-size: var(--text-lg); line-height: 1.5; color: var(--ink); }
.testimonial-author { display: block; font-weight: 700; color: var(--ink); }
.testimonial-role { display: block; color: var(--body); font-size: var(--text-sm); }
.faq { max-width: 760px; margin-inline: auto; padding: var(--space-6) var(--space-4); }
.faq-title { margin: 0 0 var(--space-4); text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq-item > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item > summary::after { content: "＋"; color: var(--body); }
.faq-item[open] > summary::after { content: "－"; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-answer { padding: 0 var(--space-4) var(--space-4); color: var(--body); }
@media (max-width: 700px) { .image-text { grid-template-columns: 1fr; } .image-text--image-right .image-text-media { order: 0; } }
.newsletter { padding: var(--space-8) var(--space-4); text-align: center;
  background: color-mix(in srgb, var(--brand-accent, #8b3a6b) 7%, var(--surface)); }
.newsletter-inner { max-width: 560px; margin-inline: auto; }
.newsletter-title { margin: 0 0 var(--space-2); }
.newsletter-body { color: var(--body); margin: 0 0 var(--space-4); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.newsletter-form input[type="email"] { flex: 1 1 240px; min-width: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.newsletter-form .hp { position: absolute; left: -9999px; }
.newsletter-note { margin: var(--space-3) 0 0; color: var(--success); font-weight: 600; }
.featured-collection { padding: var(--space-6) var(--space-4); max-width: var(--maxw, 1200px); margin-inline: auto; }
.featured-collection .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.featured-collection .section-more { color: var(--brand-accent-strong); font-weight: 600; }
/* The grid + card use the shared .product-grid / .product-card styles (aligned with product-grid.liquid). */
.featured-collection-empty { text-align: center; }
.cart-line-unit { font-size: var(--text-sm); color: var(--subtle); }
.cart-remove-form { margin: 0.2rem 0 0; }
.cart-remove { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--subtle); font: inherit; font-size: var(--text-xs); }
.cart-remove:hover { color: var(--danger); }
.cart-remove span { font-size: 1.05rem; line-height: 1; }
.cart-qty { grid-area: qty; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.qty-btn { width: 2.1rem; height: 2.1rem; border: 0; background: transparent; color: var(--body); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.qty-btn:hover { background: var(--surface-2); color: var(--ink); }
.qty-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring); }
.qty-stepper input[type="number"] { width: 2.6rem; height: 2.1rem; text-align: center; border: 0; border-inline: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line-total { grid-area: total; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cart-js .cart-update-btn { display: none; }

@media (max-width: 640px) {
  .cart-line { grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb info total" "thumb qty qty"; gap: var(--space-2) var(--space-3); }
  .cart-thumb, .cart-thumb img { width: 72px; height: 72px; }
  .cart-qty { margin-top: var(--space-2); }
  .cart-line-total { align-self: start; }
}

/* ---- account area: shared nav shell + dashboard/orders/order/addresses/profile (F2/F3/F5/F7) ---- */
.account-shell { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 820px) { .account-shell { grid-template-columns: 232px 1fr; gap: var(--space-6); } }
.account-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
@media (min-width: 820px) { .account-nav { position: sticky; top: 90px; } }
.account-nav-title { margin: 0 0 var(--space-3); padding: 0 var(--space-3); font-weight: 700; color: var(--ink); font-size: var(--text-sm); }
.account-nav nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav nav a { display: block; padding: 0.6rem var(--space-3); border-radius: var(--r-sm); color: var(--body); text-decoration: none;
  font-weight: 500; font-size: var(--text-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.account-nav nav a:hover { background: var(--surface-2); color: var(--ink); }
.account-nav nav a.is-active { background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); font-weight: 600; }
.account-signout-form { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.account-signout { width: 100%; text-align: left; background: none; border: 0; padding: 0.6rem var(--space-3); color: var(--subtle);
  font: inherit; font-size: var(--text-sm); cursor: pointer; border-radius: var(--r-sm); }
.account-signout:hover { color: var(--danger); background: var(--surface-2); }

.account-content { min-width: 0; }
.account-hello { color: var(--subtle); margin: 0 0 var(--space-5); }
.account-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
.account-card h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }

/* Dashboard stat tiles */
.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.account-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease); }
.account-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.account-stat-num { font-size: var(--text-2xl); font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.account-stat-label { font-size: var(--text-sm); color: var(--subtle); }
.account-recent { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.account-recent-id a { font-weight: 600; }
.account-recent-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Orders / downloads list rows */
.account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.account-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.account-row-main { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.account-row-title { font-weight: 600; color: var(--ink); }
.account-row-meta { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-row-link { color: var(--brand-accent-strong); font-weight: 600; text-decoration: none; white-space: nowrap; }
.account-row-link:hover { text-decoration: underline; }
@media (max-width: 560px) { .account-row { grid-template-columns: 1fr auto; } .account-row-link { display: none; } }

.badge-lg { font-size: var(--text-sm); padding: 0.35rem 0.7rem; }

/* Returns — the shopper's return request (account-return-request) and their returns (account-returns). The status
   colour is semantic: waiting is warning, decided is success/danger, so the state reads before the word does. */
.return-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.return-card { margin-bottom: 0; }
.return-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.return-card-order { font-weight: 700; color: var(--ink); display: block; }
.return-card-date { font-size: var(--text-sm); }
.return-card-items { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.return-card-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.return-card-facts { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.return-card-facts div { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--space-3); }
.return-card-facts dt { color: var(--subtle); }
.return-card-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.return-status--requested .return-badge, .return-status--approved .return-badge { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.return-status--refunded .return-badge { background: var(--success-soft); color: var(--success); border-color: transparent; }
.return-status--rejected .return-badge { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.return-existing { margin-bottom: var(--space-5); }
.return-existing h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.return-lines { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.return-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.return-line:last-child { border-bottom: 0; }
.return-line-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.return-line-meta { font-size: var(--text-sm); }
.return-line.is-unavailable .order-line-name { color: var(--subtle); }
.return-line-unavailable { color: var(--danger); }
.return-line-qty { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--text-xs); color: var(--subtle); flex-shrink: 0; }
.return-line-qty select { min-width: 5rem; }
.return-form textarea, .return-form select { width: 100%; }
.return-submitted { background: var(--success-soft); color: var(--success); border-radius: var(--r-sm); padding: var(--space-3) var(--space-4); }
@media (max-width: 520px) { .return-line { flex-direction: column; align-items: stretch; } }

/* Order detail */
.order-detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 720px) { .order-detail-grid { grid-template-columns: 1.6fr 0.9fr; } }
.order-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.order-line { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.order-line:last-child { border-bottom: 0; }
.order-line-name { font-weight: 600; color: var(--ink); grid-column: 1; }
.order-line-qty { grid-column: 1; font-size: var(--text-sm); color: var(--subtle); }
.order-line-total { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .order-summary-card { position: sticky; top: 90px; } }

/* Address book */
.address-grid { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.address-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.address-card.is-default { border-color: var(--brand-accent); }
.address-default-flag { position: absolute; top: var(--space-3); right: var(--space-3); font-size: var(--text-xs); font-weight: 700;
  color: var(--brand-accent-onsoft); background: var(--brand-accent-soft); padding: 0.2rem 0.5rem; border-radius: var(--r-pill); }
.address-label { margin: 0 0 var(--space-2); font-weight: 700; color: var(--ink); }
.address-card address { font-style: normal; color: var(--body); font-size: var(--text-sm); line-height: 1.6; }
.address-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.address-actions form { margin: 0; }

/* Add-address + profile forms: 2-col field grid, wide fields span both */
.address-form, .profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.address-form .field-wide, .profile-form .field-wide { grid-column: 1 / -1; }
.address-form .field, .profile-form .field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.address-form label, .profile-form label { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.address-form input, .address-form select, .profile-form input { width: 100%; }
.field-check { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--body); }
.field-check input { width: auto; }
@media (max-width: 520px) { .address-form, .profile-form { grid-template-columns: 1fr; } }
.account-saved { background: var(--brand-accent-soft); color: var(--brand-accent-onsoft); border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4); font-weight: 600; margin: 0 0 var(--space-5); }

/* Narrow phones: keep the three stat tiles on one row without overflowing 320px. */
@media (max-width: 400px) {
  .account-stats { gap: var(--space-2); }
  .account-stat { padding: var(--space-3); min-width: 0; }
  .account-stat-num { font-size: var(--text-xl); }
  .account-stat-label { font-size: var(--text-xs); }
}

/* ---- Auth (F1.F-04): sign-in / register — branded value panel beside a focused form card ---- */
.auth { display: grid; place-items: center; padding: var(--space-5) 0 var(--space-7); }
.auth-card { width: 100%; max-width: 960px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .auth-card { grid-template-columns: 0.92fr 1.08fr; } }

/* Value panel: indigo gradient, white text. Hidden below 820px so the form owns the small screen. */
.auth-aside { display: none; position: relative; padding: var(--space-7) var(--space-6); color: #fff;
  background: linear-gradient(150deg, var(--brand-accent-strong), var(--brand-secondary));
  flex-direction: column; justify-content: center; gap: var(--space-5); overflow: hidden; }
@media (min-width: 820px) { .auth-aside { display: flex; } }
.auth-aside::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 90% -10%, rgba(255,255,255,0.22), transparent 55%); }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside-title { margin: 0; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-tight); color: #fff; }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.auth-benefits li { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; color: rgba(255,255,255,0.95); }
.auth-benefit-ico { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill); background: rgba(255,255,255,0.16); font-size: 0.9rem; }

/* Form panel */
.auth-main { padding: clamp(var(--space-5), 4vw, var(--space-7)) clamp(var(--space-4), 4vw, var(--space-6)); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-head { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-head .eyebrow { margin: 0; }
.auth-head h1 { margin: 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.auth-sub { margin: 0.15rem 0 0; color: var(--body); font-size: var(--text-sm); }
.auth-form { max-width: none; width: 100%; margin: 0; gap: var(--space-4); }
.auth-form .field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.auth-forgot { font-size: var(--text-xs); font-weight: 600; color: var(--brand-accent-strong); text-decoration: none; white-space: nowrap; }
.auth-forgot:hover { text-decoration: underline; }
.auth-form .btn-block { margin-top: var(--space-2); padding-block: 0.8rem; }
.auth-switch { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--body); }
.auth-switch a { font-weight: 600; color: var(--brand-accent-strong); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-reassure { margin: 0; font-size: var(--text-xs); color: var(--subtle); text-align: center; }

/* Social sign-in (design-ready) + "or" divider */
.auth-social { display: grid; gap: var(--space-3); }
.auth-social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.auth-social-btn:hover { border-color: var(--brand-accent); background: var(--surface-2); }
.auth-social-ico { font-size: 1.1rem; line-height: 1; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Password field + progressive reveal toggle (mask icon → single-colour, theme-adaptive) */
.pw-field { position: relative; }
.pw-field input { padding-right: 3rem; }
.pw-toggle { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--subtle); border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring); }
.pw-toggle-ico { width: 1.15rem; height: 1.15rem; display: block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.pw-toggle.is-shown .pw-toggle-ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M9.4 5.2A9.5 9.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.3 3.2M6.2 6.2A17 17 0 0 0 2 12s3.5 7 10 7a9.3 9.3 0 0 0 3.2-.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M9.4 5.2A9.5 9.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.3 3.2M6.2 6.2A17 17 0 0 0 2 12s3.5 7 10 7a9.3 9.3 0 0 0 3.2-.6'/%3E%3C/svg%3E"); }

/* ---- PDP gallery: main stage + thumbnail rail (D1); no-JS stacks every image ---- */
.gallery-main { display: grid; gap: var(--space-3); }
.gallery-slide { margin: 0; display: block; position: relative; }

/* ---- docs/32 §5: the AI provenance disclosure ----
   Positioned over the image it discloses rather than beside it, because a disclosure a shopper has to
   associate with the right picture by proximity is one they can associate with the wrong one. It is real
   text and never an icon: a screen-reader user is exactly the shopper an image-only disclosure fails, and
   the text IS the disclosure — the pixel is only where it is put. Never rendered in the 72px thumbnail rail.
   Contrast is deliberate rather than subtle: this is a legal notice, not a decorative chip. */
.ai-provenance-badge { position: absolute; left: var(--space-2); bottom: var(--space-2); z-index: 2;
  max-width: calc(100% - var(--space-2) * 2); padding: 0.25em 0.6em; border-radius: var(--r-sm, 4px);
  font-size: 0.75rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; background: rgba(17, 17, 17, 0.82); pointer-events: none; }
.ai-provenance-badge-sm { font-size: 0.6875rem; padding: 0.15em 0.45em;
  left: var(--space-1, 4px); bottom: var(--space-1, 4px); }
.product-card .thumb { position: relative; }
.product-card .thumb picture { position: relative; display: block; }
.ai-provenance-notice { margin: var(--space-3) 0 0; font-size: 0.8125rem; line-height: 1.5;
  color: var(--muted, #555); }
.gallery-thumbs { display: none; }
/* JS mode: one main image, the rest reachable via the thumbnail rail. */
.gallery-js .gallery-main { display: block; }
.gallery-js .gallery-slide { display: none; }
.gallery-js .gallery-slide.is-active { display: block; }
.gallery-js .gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.gallery-thumb { width: 72px; height: 72px; padding: 0; line-height: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r-md); background: none; transition: border-color var(--dur-fast) var(--ease); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: calc(var(--r-md) - 2px); }
.gallery-thumb:hover { border-color: var(--line-strong); }
.gallery-thumb.is-active { border-color: var(--brand-accent); }
.gallery-thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--ring); }

/* ---- home: "shop by category" product tabs (B5) — reuses the .tabs/.tab-nav pattern ---- */
.cat-tabs .tabs { margin-top: var(--space-4); }
.cat-tab-panel { max-width: none; padding-top: var(--space-5); }
.cat-tabs-more { margin: var(--space-5) 0 0; text-align: center; }

/* ---- CMS blog: index + sidebar + article (G1-6) ---- */
.blog-feed-badge { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--brand-accent-strong);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0.25rem 0.5rem; text-decoration: none; }
.blog-feed-badge:hover { border-color: var(--brand-accent); }
.blog-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 260px; } }

.blog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.blog-card-media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2rem; color: var(--subtle); }
.blog-card-body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 0.4rem; }
.blog-card-cat { align-self: flex-start; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-accent-onsoft); background: var(--brand-accent-soft); padding: 0.2rem 0.5rem; border-radius: var(--r-pill); text-decoration: none; }
.blog-card-title { margin: 0.2rem 0 0; font-size: var(--text-lg); line-height: 1.25; }
.blog-card-title a { color: var(--ink); text-decoration: none; }
.blog-card-title a:hover { color: var(--brand-accent); }
.blog-card-excerpt { margin: 0; color: var(--body); font-size: var(--text-sm); }
.blog-card-meta { margin: 0.2rem 0 0; color: var(--subtle); font-size: var(--text-xs); }

.blog-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 900px) { .blog-sidebar { position: sticky; top: 90px; } }
.blog-widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.blog-widget h2 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.blog-cats, .blog-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.blog-cats a { color: var(--body); text-decoration: none; font-size: var(--text-sm); }
.blog-cats a:hover, .blog-cats a.is-active { color: var(--brand-accent-strong); font-weight: 600; }
.blog-recent li { display: flex; flex-direction: column; gap: 0.1rem; }
.blog-recent a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.blog-recent a:hover { color: var(--brand-accent); }
.blog-recent-date { color: var(--subtle); font-size: var(--text-xs); }
.blog-subscribe { align-self: flex-start; }

/* Article */
.blog-article { max-width: 44rem; margin-inline: auto; }
.blog-article-head { margin-bottom: var(--space-5); }
.blog-article-head h1 { margin: var(--space-3) 0 var(--space-2); }
.blog-article-meta { color: var(--subtle); font-size: var(--text-sm); margin: 0; }
.blog-article-cover { margin: 0 0 var(--space-6); }
.blog-article-cover img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }
.blog-article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.blog-article-back { margin-top: var(--space-6); }
/* PA-0272 related-posts rail (opt-in: Blog → Related posts). */
.blog-related { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.blog-related-title { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.blog-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.blog-related-list a { color: var(--brand-accent-strong); }
.blog-related-date { color: var(--subtle); font-size: var(--text-sm); }
.blog-article-back a, .blog-cats a.is-active { color: var(--brand-accent-strong); }

/* Table of contents (JS-built from headings) + author block — E-E-A-T long-form. */
.blog-toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); }
.blog-toc-title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--ink); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; counter-reset: toc; }
.blog-toc li.toc-h2 { counter-increment: toc; }
.blog-toc li.toc-h2 > a::before { content: counter(toc) ". "; color: var(--subtle); font-variant-numeric: tabular-nums; }
.blog-toc li.toc-h3 { margin-left: var(--space-5); }
.blog-toc li.toc-h3 > a::before { content: "– "; color: var(--subtle); }
.blog-toc a { color: var(--body); text-decoration: none; font-size: var(--text-sm); }
.blog-toc a:hover { color: var(--brand-accent-strong); text-decoration: underline; }
.blog-author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.blog-author-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--brand-accent-soft); color: var(--brand-accent-strong); flex: none; }
.blog-author-text { margin: 0; color: var(--body); }
.blog-updated { color: var(--brand-accent-strong); }

/* Prose: typography for merchant-authored HTML bodies (blog + content pages). */
.prose { color: var(--body); line-height: 1.75; font-size: var(--text-base); }
.prose h2, .prose h3 { scroll-margin-top: 90px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-7); color: var(--ink); letter-spacing: var(--tracking-tight); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-6); color: var(--ink); }
.prose h4 { font-size: var(--text-lg); margin-top: var(--space-5); color: var(--ink); }
.prose p { margin: 0; }
.prose a { color: var(--brand-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.4rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose blockquote { border-left: 3px solid var(--brand-accent); padding-left: var(--space-4); color: var(--subtle); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
.prose code { background: var(--surface-2); border-radius: var(--r-sm); padding: 0.1rem 0.35rem; font-size: 0.9em; }
.prose pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-4); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; }
/* FAQ accordion (G6): a content page whose body uses <details>/<summary> renders as an accordion. */
.prose details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--space-4); background: var(--surface); }
.prose details + details { margin-top: var(--space-3); }
.prose summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: var(--space-4) 2rem var(--space-4) 0; list-style: none; position: relative; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--brand-accent-strong); font-size: 1.3rem; line-height: 1; }
.prose details[open] > summary::after { content: "−"; }
.prose details > *:not(summary) { margin-bottom: var(--space-4); }

/* CMS content page (About/Contact/FAQ/legal) — centered readable column. */
.content-page-inner { max-width: 44rem; margin-inline: auto; }
.content-page-inner > h1 { margin-bottom: var(--space-5); }

/* ---- E7: public order tracking — lookup form + fulfilment timeline ---- */
.track-inner { max-width: 42rem; margin-inline: auto; }
.track-form { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.track-form .field { display: flex; flex-direction: column; gap: 0.4rem; }
.track-form label { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.track-form input { width: 100%; }
.track-form .btn { align-self: flex-start; }
.track-error { margin: var(--space-4) 0 0; color: var(--danger); font-weight: 600; }

.track-result { margin-top: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.track-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.track-order-no { margin: 0; font-weight: 700; font-size: var(--text-lg); color: var(--ink); }
.track-order-meta { margin: 0.2rem 0 0; color: var(--subtle); font-size: var(--text-sm); }
.track-exception { margin: 0; padding: var(--space-4); background: var(--surface-2); border-radius: var(--r-md); color: var(--body); }

.track-timeline { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: var(--space-2); }
.track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; text-align: center; }
.track-step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; }
.track-step:first-child::before { display: none; }
.track-dot { width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--line-strong); position: relative; z-index: 1; }
.track-step-name { font-size: var(--text-sm); color: var(--subtle); }
.track-step.is-done .track-dot { background: var(--brand-accent); border-color: var(--brand-accent); }
.track-step.is-done::before, .track-step.is-current::before { background: var(--brand-accent); }
.track-step.is-done .track-step-name { color: var(--ink); }
.track-step.is-current .track-dot { border-color: var(--brand-accent); box-shadow: 0 0 0 4px var(--brand-accent-soft); }
.track-step.is-current .track-step-name { color: var(--brand-accent-strong); font-weight: 700; }

.track-carrier { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.track-carrier-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtle); }
.track-carrier-no { font-weight: 700; color: var(--brand-accent-strong); font-variant-numeric: tabular-nums; text-decoration: none; }
.track-carrier-no:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .track-timeline { flex-direction: column; align-items: flex-start; gap: 0; }
  .track-step { flex: none; flex-direction: row; align-items: center; gap: var(--space-3); text-align: left; width: 100%; padding: 0.5rem 0; }
  .track-step::before { top: -50%; left: 11px; width: 2px; height: 100%; }
  .track-step:first-child::before { display: block; top: 0; height: 50%; }
}

/* ---- CP-09 cart cross-sell ("you may also like") ---- */
.cross-sell { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.cross-sell h2 { margin: 0 0 var(--space-5); }

/* ---- F1.LP gift-wrap picker (cart + checkout summary) ---- */
.gift-wrap { margin-top: var(--space-6); padding: var(--space-5); }
.gift-wrap-head { margin-bottom: var(--space-4); }
.gift-wrap-head h2 { margin: var(--space-1) 0 0; font-size: var(--text-lg); }
.gift-wrap-sub { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.gift-wrap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gift-wrap-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.gift-wrap-option:hover { border-color: var(--line-strong, var(--ink-3)); }
.gift-wrap-option.is-selected { border-color: var(--accent); background: var(--surface-2); }
.gift-wrap-thumb img { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--r-sm); }
.gift-wrap-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gift-wrap-name { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.gift-wrap-price { color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.gift-wrap-added { color: var(--accent); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.gift-wrap-form { margin: 0; }

/* ---- CP-10 back-in-stock notify-me (PDP, out of stock) ---- */
.notify-stock { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.notify-lead { margin: 0 0 var(--space-3); font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.notify-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.notify-form input[type="email"] { flex: 1 1 12rem; min-width: 0; }
.notify-success { margin: 0; color: var(--brand-accent-strong); font-weight: 600; }

/* ---- G5 contact form ---- */
.contact-intro { color: var(--subtle); margin: 0 0 var(--space-5); }
.contact-form textarea { width: 100%; font: inherit; resize: vertical; min-height: 7rem; }
.contact-success { margin: 0; }
/* Honeypot: off-screen, never shown or focusable for humans; bots that fill it are silently dropped. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* F1.LP-G15 bugfix — equal-height product cards. The card <a> was display:block, so it sized to its own content:
   a card with a longer name or a rating row sat taller than its neighbours, leaving ragged bottoms across a grid
   row. Stretch the <a> to the full (equal) grid-cell height and let the name area grow, so every card is the same
   height and their price/rating rows align. Scoped to the grid view — the list view keeps its two-column layout. */
.product-grid:not(.is-list) .product-card { display: flex; }
.product-grid:not(.is-list) .product-card > a { display: flex; flex-direction: column; width: 100%; height: 100%; }
.product-grid:not(.is-list) .product-card > a > .body { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-grid:not(.is-list) .product-card > a > .body > .name { flex: 1 1 auto; }

/* F1.LP-G15 CP5h/A branding — the merchant logo (settings.logo) in the header/footer brand link. Constrained by
   height so any aspect ratio fits the bar; only present when a logo is set (else the text wordmark renders). */
.brand-logo { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; }
.site-footer .brand-logo { height: 30px; }

/* F1.LP-G15 A3 — nav-overflow. Keep every nav label on ONE line so a long category name
   ("Laptop & Tablet Kılıfları") can never wrap to three lines and collide with the search/account cluster; let
   the nav shrink within the header row instead of pushing the cluster off-screen (min-width:0 lets a flex child
   shrink below its content). The structural fix for "too many top-level items" is the mega-menu grouping (fewer
   parents); this guarantees no wrap in the meantime. No overflow property here — that would clip the mega panel. */
.site-header .primary-nav { min-width: 0; flex-wrap: nowrap; }
.site-header .primary-nav a, .site-header .nav-item.has-mega > a { white-space: nowrap; }

/* F1.LP-G15 bugfix #3 — the compare tray is fixed to the bottom; when it is up, reserve space under the page
   content so it never covers the last row of the product grid. */
body:has(.compare-tray[data-open="true"]) #main { padding-bottom: 88px; }

/* =============================================================================
   Home editorial system (Seyante-quality) — lifestyle bento, split banners,
   overlay feature banners, immersive hero photo, premium empty states. Every
   surface here is theme-independent (image + scrim or dark brand gradient with
   white text), token-driven, and stacks to one column on mobile with no overflow.
   ========================================================================== */

/* ---- Premium empty product thumb: a branded monogram wash instead of a grey box
        (a collection product with no image no longer reads as "broken"). ---- */
.product-card .thumb--empty { background: linear-gradient(135deg, var(--brand-accent-soft), var(--brand-secondary-soft));
  display: grid; place-items: center; }
.thumb-mark { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 700; line-height: 1; text-transform: uppercase;
  color: var(--brand-accent-onsoft); opacity: 0.5; }

/* ---- Immersive hero photo (hero-bento lead tile with a merchant image) ---- */
.bento .tile-lead-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.bento .tile-lead-copy { position: relative; z-index: 1; }
.bento .tile-lead--photo { background: #14162a; }
.bento .tile-lead--photo::after { background: linear-gradient(to top, rgba(8,10,18,0.82), rgba(8,10,18,0.12) 62%, rgba(8,10,18,0.4));
  background-image: none; mask-image: none; }

/* ---- Category bento: lifestyle tiles + "shop now" (the signature) ---- */
.cat-bento .section-head { margin-bottom: var(--space-6); }
.cat-bento-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr)); }
.cat-tile > a { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(240px, 30vw, 372px); padding: clamp(1.2rem, 0.9rem + 1.6vw, 2rem); overflow: clip; color: #fff;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--brand-accent-strong), var(--brand-secondary));
  box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cat-tile > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-tile-media { position: absolute; inset: 0; z-index: -2; }
.cat-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.cat-tile > a:hover .cat-tile-media img { transform: scale(1.05); }
.cat-tile > a::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(12,14,22,0.74), rgba(12,14,22,0.1) 58%, rgba(12,14,22,0.06)); }
.cat-tile-body { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.cat-tile-name { font-size: var(--text-xl); font-weight: 600; color: #fff; line-height: 1.14; letter-spacing: var(--tracking-tight); }
.cat-tile-cta { font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,0.9); display: inline-flex; align-items: center; gap: 0.4rem; }
.cat-tile > a:hover .cat-tile-cta { color: #fff; }
.cat-tile > a:hover .cat-tile-cta span { transform: translateX(3px); }
.cat-tile-cta span { transition: transform var(--dur) var(--ease); }

/* ---- Split banner: a 2-up editorial pair ---- */
.split-banner-section { margin-block: var(--space-8); }
.split-banner { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .split-banner { grid-template-columns: 1fr 1fr; } }
.split-pane { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(280px, 42vw, 460px); padding: clamp(1.6rem, 1rem + 3vw, 3.2rem); overflow: clip; color: #fff;
  background: linear-gradient(150deg, var(--brand-accent-strong), var(--brand-secondary)); }
.split-pane:nth-child(2) { background: linear-gradient(150deg, #232140, var(--brand-accent-strong)); }
.split-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.split-pane:hover .split-media { transform: scale(1.04); }
.split-pane::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,12,20,0.7), rgba(10,12,20,0.1) 60%, rgba(10,12,20,0.18)); }
.split-content { position: relative; display: flex; flex-direction: column; gap: var(--space-2); max-width: 24ch; }
.split-pane .eyebrow { color: rgba(255,255,255,0.82); margin: 0; }
.split-title { font-size: var(--text-2xl); font-weight: 600; color: #fff; line-height: 1.1; letter-spacing: var(--tracking-tight); }
.split-cta { font-size: var(--text-sm); font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-1); }
.split-pane:hover .split-cta span { transform: translateX(3px); }
.split-cta span { transition: transform var(--dur) var(--ease); }

/* ---- Overlay feature banner (image-with-text, layout: overlay) ---- */
.image-text--overlay { position: relative; isolation: isolate; display: flex; align-items: center; overflow: clip;
  min-height: clamp(320px, 46vw, 520px); color: #fff;
  background: linear-gradient(120deg, var(--brand-accent-strong), var(--brand-secondary)); }
.image-text-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.image-text--overlay::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,12,20,0.74), rgba(10,12,20,0.3) 58%, rgba(10,12,20,0.08)); }
.image-text-overlay-body { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.2rem, 1.5rem + 4vw, 5rem) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.image-text-overlay-body .eyebrow { color: rgba(255,255,255,0.82); margin: 0; }
.image-text-overlay-body h2 { color: #fff; font-size: var(--text-3xl); max-width: 17ch; margin: 0; }
.image-text-overlay-body p { color: rgba(255,255,255,0.9); max-width: 48ch; margin: 0 0 var(--space-2); }
.image-text--overlay .btn-primary { background: #fff; color: var(--brand-accent-strong); }
.image-text--overlay .btn-primary:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .cat-tile-media img, .split-media, .cat-tile > a, .split-cta span, .cat-tile-cta span { transition: none !important; }
}

/* --- Product personalization (F1.LP) ------------------------------------- */
.pdp-personalization {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
  padding: var(--space-4) var(--space-5) var(--space-5); margin: var(--space-4) 0;
  display: grid; gap: var(--space-4);
}
.pdp-personalization > legend {
  font-weight: 600; color: var(--ink); font-size: var(--text-sm);
  padding: 0 var(--space-2); letter-spacing: var(--tracking-tight);
}
.perso-field { display: grid; gap: var(--space-2); }
.perso-field .perso-label { font-size: var(--text-sm); font-weight: 550; color: var(--ink); }
.perso-field input[type="text"], .perso-field input[type="number"], .perso-field input[type="date"],
.perso-field select, .perso-field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0.6rem 0.7rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.perso-field textarea { resize: vertical; min-height: 2.75rem; }
.perso-field input:focus-visible, .perso-field select:focus-visible, .perso-field textarea:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--brand-accent); box-shadow: var(--ring);
}
.perso-field input[aria-invalid="true"], .perso-field select[aria-invalid="true"], .perso-field textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.perso-check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.perso-check input { margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-accent); }
.perso-req { color: var(--danger); text-decoration: none; font-weight: 700; }
.perso-surcharge {
  display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 600;
  color: var(--brand-accent-onsoft); background: var(--brand-accent-soft);
  border-radius: var(--r-pill); padding: 0.05rem 0.5rem;
}
.perso-surcharge.is-active { color: #fff; background: var(--brand-accent); }
.perso-help { font-size: var(--text-xs); color: var(--subtle); }
.perso-total {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0;
  padding-top: var(--space-3); border-top: 1px dashed var(--line-strong); font-size: var(--text-sm);
}
.perso-total-amount { font-weight: 700; color: var(--ink); }
.perso-invalid {
  margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: var(--text-sm);
}
.mini-perso { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.mini-perso li { font-size: var(--text-xs); color: var(--subtle); line-height: 1.3; }
.cart-line-perso, .line-perso {
  list-style: none; margin: 0.2rem 0; padding: 0; display: grid; gap: 0.1rem;
  font-size: var(--text-xs); color: var(--subtle); line-height: 1.35;
}
.cart-line-perso .perso-k, .line-perso .perso-k { color: var(--body); font-weight: 550; }

/* --- Hero slideshow (full-bleed, Seyante-style) --- */
.slideshow-section { margin: 0; padding: 0; }
.slideshow { position: relative; isolation: isolate; }
.slideshow-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.slideshow-track::-webkit-scrollbar { display: none; }
.slideshow-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; isolation: isolate; cursor: pointer;
  display: flex; align-items: flex-end; min-height: min(82vh, 720px);
  background: linear-gradient(135deg, var(--brand-accent, #8b3a6b), var(--brand-accent-strong, #2a1f3d));
}
.slideshow-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slideshow-slide::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.62) 100%);
}
.slideshow-content {
  position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2rem, 4vw, 4rem) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}
.slideshow-content .eyebrow { color: rgba(255,255,255,0.82); margin: 0; }
.slideshow-title {
  color: #fff; margin: 0; max-width: 18ch; font-weight: 600; line-height: 1.05;
  letter-spacing: var(--tracking-tight, -0.02em); font-size: clamp(2.2rem, 1rem + 4.2vw, 4.6rem);
}
.slideshow-cta { align-self: flex-start; margin-top: var(--space-2); }
/* dots */
.slideshow-dots {
  position: absolute; left: 50%; bottom: clamp(1rem, 2vw, 2rem); transform: translateX(-50%);
  z-index: 3; display: flex; gap: 0.5rem;
}
.slideshow-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.5); transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.slideshow-dot[aria-current="true"] { width: 26px; background: #fff; }
/* arrows */
.slideshow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--ink); font-size: 1.6rem; line-height: 1;
  box-shadow: var(--shadow-md); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slideshow-arrow:hover { background: #fff; }
.slideshow-arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.slideshow-arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 640px) {
  .slideshow-slide { min-height: 68vh; }
  .slideshow-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .slideshow-track { scroll-behavior: auto; } }

/* --- Instagram feed --- */
.ig-section { padding-block: var(--space-8); }
.ig-head { display: flex; align-items: baseline; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); text-align: center; }
.ig-title { margin: 0; }
.ig-handle { font-weight: 600; color: var(--brand-accent, var(--ink)); }
.ig-handle:hover { text-decoration: underline; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.ig-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; isolation: isolate; display: block;
  background: linear-gradient(135deg, var(--brand-accent, #8b3a6b), var(--brand-accent-strong, #2a1f3d)); }
.ig-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.ig-tile:hover .ig-media { transform: scale(1.06); }
.ig-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0;
  background: rgba(0,0,0,0.32); transition: opacity var(--dur) var(--ease); }
.ig-tile:hover .ig-overlay, .ig-tile:focus-visible .ig-overlay { opacity: 1; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* Windows High Contrast / forced-colors: box-shadow is not painted there, so every focus indicator must be an
   outline in a system colour (WCAG 2.4.7). Legal final review 2026-10-02 (PA-0359). */
@media (forced-colors: active) {
  :focus-visible, input:focus, select:focus, textarea:focus { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Slideshow pause/play (WCAG 2.2.2) — first control in the carousel, always visible. */
.slideshow-pause { position: absolute; z-index: 3; top: var(--space-3); left: var(--space-3); width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill);
  background: rgba(20, 24, 31, 0.72); color: #ffffff; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.slideshow-pause:hover { background: rgba(20, 24, 31, 0.88); }

/* PA-0359 manual accessibility pass (2026-10-10).
   2.4.11 Focus Not Obscured: the header is sticky and the add-to-cart bar / compare tray / toasts are fixed to the
   bottom, so a focused control scrolled into view could land underneath them.
   2.4.7 / 4.1.2: the compare tray and the sticky add-to-cart bar were hidden with a transform only, and the back-to-top
   button with opacity only - all three stayed in the Tab order while off-screen or invisible. visibility drops them
   from the Tab order and the accessibility tree; the delayed visibility transition keeps the slide/fade-out. */
/* Not on checkout: its header is not sticky, and the shared checkout keeps its behaviour (owner rule, seyante). */
html:not(:has(> body.checkout-body)) { scroll-padding-top: 6rem; scroll-padding-bottom: 5.5rem; }
.compare-tray:not([data-open="true"]), .sticky-atc:not([data-show="true"]) { visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.compare-tray[data-open="true"], .sticky-atc[data-show="true"] { visibility: visible; }
.back-to-top:not(.is-visible) { visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }