/* ==========================================================================
   راقي (raqi) — theme.css
   Consumes ONLY --sf-* variables emitted by the engine (resolveStorePalette +
   shape/typography resolvers) in <style id="sf-vars">. Theme-local helpers are
   prefixed --r-* and are always DERIVED from --sf-*; no hardcoded brand colour.
   Logical properties only (no left/right). Target: <= 20KB gz.
   ========================================================================== */

:root {
  /* theme-local derived tokens (never merchant-facing) */
  --r-hair: color-mix(in srgb, var(--sf-fg) 13%, var(--sf-bg));
  --r-veil: color-mix(in srgb, var(--sf-fg) 4%, var(--sf-bg));
  --r-ink-soft: color-mix(in srgb, var(--sf-fg) 88%, var(--sf-bg));
  --r-max: 1200px;
  --r-gutter: 16px;
  --r-ease: cubic-bezier(.2, .7, .1, 1);
  --r-slow: 900ms;             /* expressive reveals only (proposed motion=expressive) */
  --r-display: clamp(2rem, 1.2rem + 4.2vw, 4.25rem);
  --r-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  --r-h3: 1.125rem;
  /* contract names first (resolveThemeVars: --sf-motion, --sf-grid-gap, --sf-radius-button),
     prototype/R-01 names as fallback — the theme never invents its own values here */
  --r-dur: var(--sf-motion, var(--sf-dur, 160ms));
  --r-gap: var(--sf-grid-gap, var(--sf-gap, 12px));
  --r-btn-radius: var(--sf-radius-button, var(--sf-btn-radius, var(--sf-radius-control)));
}
@media (min-width: 768px) { :root { --r-gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block: 72px 24px; }
@media (min-width: 768px) { html { scroll-padding-block-start: 136px; } }
/* sticky PLP toolbar sits under the header (+56px) */
html:has(.toolbar) { scroll-padding-block-start: 128px; }
@media (min-width: 768px) { html:has(.toolbar) { scroll-padding-block-start: 192px; } }
/* fixed bottom bars on phones must never cover the focused field (WCAG 2.4.11) */
@media (max-width: 899px) { html:has(body.has-buybar), html:has(.stickybar) { scroll-padding-block-end: 128px; } }
body {
  margin: 0; background: var(--sf-bg); color: var(--sf-fg);
  font: 400 var(--sf-text-base, 16px)/1.75 var(--sf-font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--sf-font-heading); font-weight: var(--sf-heading-weight, 700); line-height: 1.35; margin: 0; }
p { margin: 0; }
.num, .money, [dir="ltr"] { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 2px solid var(--sf-ring); outline-offset: 3px; }
/* the ring is checked against --sf-bg only; on inverted surfaces follow the text colour (≥ 3:1 by construction) */
.tone-dark, .ftr, .announce, .pv-bar { --sf-ring: currentColor; }
/* two font files only (heading 700 + body 400): every bold run uses the heading face, no faux-bold body */
b, strong, th, .link, .inline-link, .field label, .label, .card-price .sale, .opt .price, .save, .val input:checked + span,
.acc summary, .tag-warn, .row.total, .coupon summary, .co-summary summary, .status-pill, .t-label, .line-price, .state h3 { font-family: var(--sf-font-heading); }
[hidden] { display: none !important; }
.sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-inline-size: var(--r-max); margin-inline: auto; padding-inline: var(--r-gutter); }
.muted { color: var(--sf-fg-muted); }
.skip { position: absolute; inset-inline-start: 8px; inset-block-start: -60px; z-index: 99; background: var(--sf-bg); padding: 10px 14px; border: 1px solid var(--sf-border); }
.skip:focus { inset-block-start: 8px; }
.ico { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-sm { inline-size: 18px; block-size: 18px; }

/* sample badge — required on every sample element (TE §6.3) */
.sample {
  display: inline-flex; align-items: center; gap: 4px; font: var(--sf-heading-weight, 700) 11px/1 var(--sf-font-heading);
  padding: 5px 8px; border-radius: 999px; background: var(--sf-fg); color: var(--sf-bg);
  vertical-align: middle; white-space: nowrap;
}
.media { position: relative; }
.media > .sample { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; }

/* ---------- preview bar (engine: preview token) ---------- */
.pv-bar { background: var(--sf-fg); color: var(--sf-bg); font-size: 12px; text-align: center; padding: 6px var(--r-gutter); }
.pv-bar b { font-weight: 700; }

/* ---------- announcement ---------- */
.announce { background: var(--sf-announce-bg, var(--sf-primary)); color: var(--sf-announce-fg, var(--sf-primary-fg)); font-size: 13px; text-align: center; padding: 9px var(--r-gutter); }
.announce a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- buttons (engine vars: buttons.style) ---------- */
.btn {
  --_bg: var(--sf-btn-bg); --_fg: var(--sf-btn-fg); --_bd: var(--sf-btn-bd);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px; padding: 0 28px; border: 1px solid var(--_bd); border-radius: var(--r-btn-radius);
  background: var(--_bg); color: var(--_fg); font: var(--sf-heading-weight, 700) 15px/1.5 var(--sf-font-heading); cursor: pointer;
  transition: background-color var(--r-dur) ease, color var(--r-dur) ease, transform var(--r-dur) ease, box-shadow var(--r-dur) ease;
  text-align: center;
}
.btn:hover { --_bg: var(--sf-btn-bg-hover); --_fg: var(--sf-btn-fg-hover); }
.btn:active { transform: translateY(1px); }
.btn-2 { --_bg: var(--sf-btn2-bg); --_fg: var(--sf-btn2-fg); --_bd: var(--sf-btn2-bd); }
.btn-2:hover { --_bg: var(--r-veil); --_fg: var(--sf-btn2-fg); }
.btn-block { inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { --_bg: var(--sf-surface-muted); --_fg: var(--sf-fg-muted); --_bd: var(--sf-surface-muted); cursor: not-allowed; }
.btn .ico { inline-size: 20px; block-size: 20px; }
.link { color: var(--sf-link); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; }
.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; background-position: right bottom; transition: background-size var(--r-dur) ease; padding-block-end: 2px; }
.link:hover .link-u, .link-u:hover { background-size: 100% 1px; }
.icon-btn { inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: var(--sf-radius-control); position: relative; }
.icon-btn:hover { background: var(--r-veil); }
.count { position: absolute; inset-block-start: 6px; inset-inline-end: 4px; min-inline-size: 18px; block-size: 18px; padding: 0 4px; border-radius: 9px; background: var(--sf-accent); color: var(--sf-accent-fg); font: var(--sf-heading-weight, 700) 11px/18px var(--sf-font-heading); text-align: center; }

/* ---------- header (header.layout via data-header on <html>) ---------- */
.hdr { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in srgb, var(--sf-bg) 94%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-block-end: 1px solid var(--r-hair); }
.hdr-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; block-size: 56px; }
.hdr-start, .hdr-end { display: flex; align-items: center; gap: 2px; }
.hdr-end { justify-content: flex-end; }
.logo { display: grid; justify-items: center; line-height: 1.1; text-align: center; }
.logo b { font: var(--sf-heading-weight, 700) 22px/1.4 var(--sf-font-heading); }
.logo small { font-size: 10px; color: var(--sf-fg-muted); margin-block-start: 2px; }
.nav { display: none; }
.nav-search { display: none; }
@media (min-width: 768px) {
  .hdr-row { block-size: 72px; }
  .logo b { font-size: 28px; }
  .hdr-menu { display: none; }
  .nav { display: flex; justify-content: center; gap: 36px; block-size: 48px; align-items: center; border-block-start: 1px solid var(--r-hair); font-size: 14px; }
  .nav a { position: relative; padding-block: 12px; }
  .nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 6px; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--r-dur) ease; }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
  .nav-search { display: flex; align-items: center; gap: 8px; border-block-end: 1px solid var(--sf-border); min-inline-size: 200px; padding-block: 6px; color: var(--sf-fg-muted); font-size: 14px; }
  html[data-header="logo_start"] .hdr-row { grid-template-columns: auto 1fr auto; gap: 32px; }
  html[data-header="logo_start"] .logo { justify-items: start; order: -1; }
  html[data-header="logo_start"] .hdr-start { justify-content: center; }
  html[data-header="logo_start"] .nav { display: none; }
  html[data-header="logo_start"] .nav-inline { display: flex; gap: 28px; font-size: 14px; }
}
.nav-inline { display: none; }

/* mobile search row (header.showSearch=icon): :target without JS, .is-open with JS. Production action=/search */
.hdr-search { display: none; padding-block: 4px 12px; }
html:not(.js) .hdr-search:target, .hdr-search.is-open { display: block; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form .input { flex: 1; min-inline-size: 0; }
.search-form .btn { padding: 0; inline-size: 52px; flex: none; }
.drawer-panel .search-form { padding-block: 4px 8px; }
.hdr-back { display: inline-flex; align-items: center; gap: 2px; min-block-size: 44px; padding-inline: 4px 8px; font-size: 14px; }
@media (min-width: 768px) { .hdr-search, .hdr-back { display: none !important; } }

/* drawer (no-JS: :target; production: /menu page fallback) */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
html:not(.js) .drawer:target, .drawer.is-open { visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--sf-fg) 45%, transparent); opacity: 0; transition: opacity var(--r-dur) ease; }
.drawer-panel { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(86vw, 360px); background: var(--sf-bg); padding: 16px 24px; transform: translateX(100%); transition: transform calc(var(--r-dur) * 2) var(--r-ease); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
html:not(.js) .drawer:target .drawer-scrim, .drawer.is-open .drawer-scrim { opacity: 1; }
html:not(.js) .drawer:target .drawer-panel, .drawer.is-open .drawer-panel { transform: none; }
.drawer-panel nav a { display: flex; justify-content: space-between; align-items: center; min-block-size: 56px; border-block-end: 1px solid var(--r-hair); font: var(--sf-heading-weight, 700) 20px/1.3 var(--sf-font-heading); }

/* ---------- sections ---------- */
.sec { padding-block: var(--sf-section-y); }
.sec + .sec.tone-default { padding-block-start: 0; }
.tone-muted { background: var(--sf-surface-muted); }
.tone-dark { background: var(--sf-fg); color: var(--sf-bg); }
.tone-dark .muted { color: color-mix(in srgb, var(--sf-bg) 78%, var(--sf-fg)); }
/* inverted section: links/buttons/accents follow the inverted pair, never the bg-checked tokens */
.tone-dark { --sf-link: currentColor; }
.tone-dark .btn { --_bg: var(--sf-bg); --_fg: var(--sf-fg); --_bd: var(--sf-bg); }
.tone-dark .btn:hover { --_bg: color-mix(in srgb, var(--sf-bg) 88%, var(--sf-fg)); --_fg: var(--sf-fg); }
.tone-dark .btn-2 { --_bg: transparent; --_fg: var(--sf-bg); --_bd: var(--sf-bg); }
.tone-dark .btn-2:hover { --_bg: var(--sf-bg); --_fg: var(--sf-fg); }
.tone-dark .pull { border-color: currentColor; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-block-end: calc(var(--r-gap) * 2.5); }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sf-fg-muted); margin-block-end: 10px; }
.eyebrow .n { font: 400 12px/1 var(--sf-font-body); letter-spacing: .2em; direction: ltr; }
.eyebrow::after { content: ""; inline-size: 48px; block-size: 1px; background: currentColor; opacity: .5; }
.sec-title { font-size: var(--r-h2); }

/* signature: the offset hairline frame (إطار راقي) */
.frame { position: relative; isolation: isolate; }
.frame::before { content: ""; position: absolute; inset-block: 14px -14px; inset-inline: 14px -14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-card); z-index: -1; pointer-events: none; }

/* ---------- hero (split, textPosition=below on mobile) ---------- */
.hero { display: grid; gap: 28px; padding-block: 16px var(--sf-section-y); }
.hero-media { border-radius: var(--sf-radius-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sf-surface-muted); }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-copy { display: grid; gap: 18px; align-content: center; }
.hero-title { font-size: var(--r-display); line-height: 1.4; } /* Kufi + tashkeel: diacritics must not collide across lines */
.hero-sub { font-size: 17px; color: var(--sf-fg-muted); max-inline-size: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-block-start: 8px; }
.hero-meta { display: flex; gap: 24px; border-block-start: 1px solid var(--r-hair); padding-block-start: 16px; margin-block-start: 12px; font-size: 13px; color: var(--sf-fg-muted); }
/* phones: title + primary button must share the first screen with the photo (375×667 → CTA ends ≈ 610px).
   The photo is capped at 46svh and framed on the upper body; the button moves up under the title visually
   (DOM order is unchanged: heading → text → actions). */
@media (max-width: 899px) {
  .hero { gap: 24px; padding-block-start: 12px; }
  .hero-media { max-block-size: 46svh; inline-size: 100%; }
  .hero-media img { object-position: 50% 22%; }
  .hero-copy { gap: 14px; }
  .hero-copy .eyebrow { display: none; } /* decoration; same call as the PDP kicker on phones */
  .hero-cta { order: 3; margin-block-start: 2px; }
  .hero-sub { order: 4; font-size: 16px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; padding-block-start: 40px; }
  .hero-media { aspect-ratio: 4 / 4.6; }
}

/* ---------- categories (tiles) ---------- */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--r-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 8px; scrollbar-width: none; margin-inline: calc(var(--r-gutter) * -1); padding-inline: var(--r-gutter); }
.cats::-webkit-scrollbar { display: none; }
.cat { scroll-snap-align: start; display: grid; gap: 12px; }
.cat-img { aspect-ratio: 3 / 4; border-radius: var(--sf-radius-card); overflow: hidden; background: var(--sf-surface-muted); }
.cat-img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--r-slow) var(--r-ease); }
@media (hover: hover) and (pointer: fine) { .cat:hover .cat-img img { transform: scale(1.04); } }
.cat-name { display: flex; justify-content: space-between; align-items: center; font: var(--sf-heading-weight, 700) 18px/1.3 var(--sf-font-heading); }
.cat-name small { font: 400 13px var(--sf-font-body); color: var(--sf-fg-muted); }
@media (min-width: 768px) { .cats { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; } .cat:nth-child(even) { margin-block-start: 48px; } }

/* ---------- product card (cards.style + cards.imageRatio) ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--r-gap) * 2.4) var(--r-gap); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; display: grid; gap: 12px; align-content: start; background: var(--sf-card-bg); border: 1px solid var(--sf-card-bd); border-radius: var(--sf-radius-card); box-shadow: var(--sf-card-shadow); padding: var(--sf-card-pad); transition: box-shadow var(--r-dur) ease; }
.card-img { position: relative; aspect-ratio: var(--sf-card-ratio); overflow: hidden; border-radius: calc(var(--sf-radius-card) - var(--sf-card-pad) / 2); background: var(--sf-surface-muted); }
.card-img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--r-slow) var(--r-ease); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-img img { transform: scale(1.035); } }
.card-body { display: grid; gap: 4px; padding-inline: calc(var(--sf-card-pad) / 2); padding-block-end: calc(var(--sf-card-pad) / 2); }
.card-kicker { font-size: 12px; color: var(--sf-fg-muted); }
.card-name { font: var(--sf-heading-weight, 700) 15px/1.5 var(--sf-font-heading); }
.card-name a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.card-price { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; }
.card-price s { color: var(--sf-fg-muted); font-size: 13px; }
.card-price .sale { color: var(--sf-accent-text); font-weight: 700; }
.badge { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 1; font: var(--sf-heading-weight, 700) 11px/1 var(--sf-font-heading); padding: 6px 10px; border-radius: var(--sf-radius-control); background: var(--sf-accent); color: var(--sf-accent-fg); }
.badge-soft { background: var(--sf-bg); color: var(--sf-fg); }
.card.is-out .card-img img { opacity: .55; filter: grayscale(.6); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: var(--r-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--r-gutter) * -1); padding-inline: var(--r-gutter); padding-block-end: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 768px) { .rail { grid-auto-columns: calc((100% - var(--r-gap) * 3) / 4); margin: 0; padding: 0; } }

/* ---------- image_text (story) ---------- */
.story { display: grid; gap: 32px; align-items: center; }
.story-media { aspect-ratio: 4 / 5; border-radius: var(--sf-radius-card); overflow: hidden; }
.story-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.story-body { display: grid; gap: 18px; }
.pull { font: var(--sf-heading-weight, 700) clamp(1.35rem, 1rem + 1.6vw, 2rem)/1.6 var(--sf-font-heading); border-inline-start: 2px solid var(--sf-accent-text); padding-inline-start: 20px; }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 6fr; gap: 88px; } .story.img-end .story-media { order: 2; } }

/* ---------- banner two_up ---------- */
.two-up { display: grid; gap: var(--r-gap); }
@media (min-width: 768px) { .two-up { grid-template-columns: 1fr 1fr; } }
.bnr { position: relative; display: grid; align-content: end; min-block-size: 360px; border-radius: var(--sf-radius-card); overflow: hidden; color: #fff; isolation: isolate; }
.bnr img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; transition: transform var(--r-slow) var(--r-ease); }
.bnr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .66), rgb(0 0 0 / .55) 45%, rgb(0 0 0 / 0) 80%); } /* >= 55% behind every line of copy (a11y B3) */
@media (hover: hover) and (pointer: fine) { .bnr:hover img { transform: scale(1.03); } }
.bnr-copy { padding: 28px; display: grid; gap: 8px; }
.bnr-copy h3 { font-size: 26px; }
.bnr-copy span { font-size: 14px; display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--r-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--r-gutter) * -1); padding-inline: var(--r-gutter); }
.quotes::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; display: grid; gap: 18px; align-content: space-between; padding: 28px; border: 1px solid var(--r-hair); border-radius: var(--sf-radius-card); background: var(--sf-surface); }
.quote blockquote { margin: 0; font: 400 17px/1.9 var(--sf-font-body); }
.quote blockquote::before { content: "”"; display: block; font: 700 56px/0.6 var(--sf-font-heading); color: var(--sf-accent-text); margin-block-end: 12px; }
.quote footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--sf-fg-muted); }
@media (min-width: 768px) { .quotes { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; } }

/* ---------- faq ---------- */
.faq { max-inline-size: 760px; margin-inline: auto; }
.faq details { border-block-end: 1px solid var(--r-hair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-block-size: 64px; cursor: pointer; font: var(--sf-heading-weight, 700) 17px/1.5 var(--sf-font-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform var(--r-dur) ease; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding-block-end: 20px; color: var(--sf-fg-muted); max-inline-size: 62ch; }

/* ---------- trust badges ---------- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px var(--r-gap); border-block: 1px solid var(--r-hair); padding-block: 28px; }
.trust li { display: grid; gap: 8px; justify-items: start; font-size: 14px; }
.trust b { font: var(--sf-heading-weight, 700) 15px/1.4 var(--sf-font-heading); }
.trust .ico { inline-size: 28px; block-size: 28px; stroke-width: 1.2; }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, 1fr); } }
ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }

/* ---------- whatsapp_cta (strip) ---------- */
.wa { display: grid; gap: 20px; justify-items: start; padding: 40px 28px; border-radius: var(--sf-radius-card); background: var(--sf-surface-muted); }
.wa h2 { font-size: var(--r-h2); }
@media (min-width: 768px) { .wa { grid-template-columns: 1fr auto; align-items: center; padding: 48px 56px; } }

/* ---------- footer (footer.tone) ---------- */
.ftr { background: var(--sf-footer-bg); color: var(--sf-footer-fg); padding-block: 56px 28px; margin-block-start: var(--sf-section-y); }
.ftr .muted { color: var(--sf-footer-muted); }
.ftr-grid { display: grid; gap: 32px; }
.ftr h4 { font-size: 15px; margin-block-end: 12px; }
.ftr li a { display: inline-flex; min-block-size: 44px; align-items: center; font-size: 14px; }
.ftr-brand b { font: var(--sf-heading-weight, 700) 26px/1.3 var(--sf-font-heading); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-block-start: 1px solid color-mix(in srgb, var(--sf-footer-fg) 18%, transparent); margin-block-start: 40px; padding-block-start: 20px; font-size: 12px; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-chips span { border: 1px solid color-mix(in srgb, var(--sf-footer-fg) 30%, transparent); border-radius: var(--sf-radius-control); padding: 4px 10px; font-size: 12px; }
@media (min-width: 768px) { .ftr-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------- breadcrumbs / PLP ---------- */
.crumbs { display: none; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sf-fg-muted); padding-block: 16px 4px; }
.crumbs a:hover { color: var(--sf-fg); }
@media (min-width: 768px) { .crumbs { display: flex; } } /* phones: header «رجوع» instead; BreadcrumbList JSON-LD stays */
.plp-head { display: grid; gap: 10px; padding-block: 8px 20px; }
.plp-head h1 { font-size: var(--r-display); line-height: 1.4; }
.plp-head .lede { max-inline-size: 56ch; color: var(--sf-fg-muted); display: none; }
.plp-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plp-title .plp-n { font-size: 14px; }
@media (max-width: 899px) { .plp-head h1 { font-size: clamp(1.75rem, 1.4rem + 2vw, 2.25rem); } .plp-head { gap: 4px; padding-block: 16px 12px; } }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px 8px; margin-inline: calc(var(--r-gutter) * -1); padding-inline: var(--r-gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 16px; border: 1px solid var(--sf-border); border-radius: var(--r-btn-radius); font-size: 14px; background: var(--sf-bg); }
.chip[aria-current], .chip.is-on { background: var(--sf-fg); color: var(--sf-bg); border-color: var(--sf-fg); }
.chip .ico { inline-size: 16px; block-size: 16px; }
.toolbar { position: sticky; inset-block-start: 56px; z-index: 20; background: var(--sf-bg); border-block: 1px solid var(--r-hair); display: flex; justify-content: space-between; align-items: center; gap: 12px; min-block-size: 56px; margin-block-end: 12px; }
.toolbar .btn-2 { min-block-size: 44px; padding: 0 14px; font-size: 14px; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; border: 0; background: transparent; padding-inline: 4px 26px; min-block-size: 44px; font-size: 14px; cursor: pointer; }
.select .ico { position: absolute; inset-inline-end: 0; pointer-events: none; inline-size: 16px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 20px; }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; background: var(--sf-surface-muted); border-radius: var(--r-btn-radius); min-block-size: 44px; }
.plp { display: grid; gap: 32px; }
.filters { display: none; }
@media (min-width: 768px) {
  .toolbar { inset-block-start: 121px; }
  .plp { grid-template-columns: 256px 1fr; gap: 48px; align-items: start; }
  .filters { display: grid; gap: 4px; position: sticky; inset-block-start: 196px; }
  .toolbar .filters-btn { display: none; }
}
.fgroup { border-block-end: 1px solid var(--r-hair); padding-block: 16px; display: grid; gap: 10px; }
.fgroup h3 { font-size: 15px; }
.check { display: flex; align-items: center; gap: 12px; min-block-size: 44px; cursor: pointer; font-size: 14px; }
.check input, .radio input { inline-size: 20px; block-size: 20px; accent-color: var(--sf-primary); margin: 0; }
.check small { margin-inline-start: auto; color: var(--sf-fg-muted); }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-block-start: 48px; font-size: 14px; }

/* bottom sheet (filters on mobile; :target, no JS) */
.sheet { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
html:not(.js) .sheet:target, .sheet.is-open { visibility: visible; }
.sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--sf-fg) 45%, transparent); opacity: 0; transition: opacity var(--r-dur) ease; }
.sheet-panel { position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 85vh; overflow-y: auto; background: var(--sf-bg); border-radius: var(--sf-radius-sheet) var(--sf-radius-sheet) 0 0; padding: 8px 20px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform calc(var(--r-dur) * 2) var(--r-ease); }
html:not(.js) .sheet:target .sheet-scrim, .sheet.is-open .sheet-scrim { opacity: 1; }
html:not(.js) .sheet:target .sheet-panel, .sheet.is-open .sheet-panel { transform: none; }
.sheet-grip { inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--r-hair); margin: 6px auto 12px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 4px; }
.sheet-foot { position: sticky; inset-block-end: 0; background: var(--sf-bg); display: flex; gap: 12px; align-items: center; padding-block: 12px 0; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field label, .label { font-size: 14px; font-weight: 700; }
.field .hint { font-size: 13px; color: var(--sf-fg-muted); }
.field .err { font-size: 13px; color: var(--sf-danger); display: flex; gap: 6px; align-items: center; }
.input, .field select, .field textarea {
  inline-size: 100%; min-block-size: 52px; padding: 12px 14px; font-size: 16px;
  background: var(--sf-surface); color: var(--sf-fg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-control);
  transition: border-color var(--r-dur) ease, box-shadow var(--r-dur) ease;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: 18px 50%, 23px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-start: 40px; }
/* browser default placeholder grey fails AA on these surfaces; muted-on-surface is ≥ 5:1 in every preset */
.input::placeholder, textarea::placeholder, .nav-search input::placeholder { color: var(--sf-fg-muted); opacity: 1; }
.input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sf-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-ring) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--sf-danger); }
.phone { display: flex; direction: ltr; }
.phone span { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--sf-border); border-inline-end: 0; border-radius: var(--sf-radius-control) 0 0 var(--sf-radius-control); background: var(--sf-surface-muted); font-size: 15px; }
.phone .input { border-radius: 0 var(--sf-radius-control) var(--sf-radius-control) 0; text-align: left; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 16px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-card); cursor: pointer; transition: border-color var(--r-dur) ease, background-color var(--r-dur) ease; }
.opt input { inline-size: 20px; block-size: 20px; accent-color: var(--sf-primary); margin: 0; }
.opt:has(input:checked) { border-color: var(--sf-fg); background: var(--r-veil); box-shadow: inset 0 0 0 1px var(--sf-fg); }
.opt small { grid-column: 2 / -1; color: var(--sf-fg-muted); font-size: 13px; }
.opt .price { font-weight: 700; }
.opt-list { display: grid; gap: 10px; }

/* ---------- product page ---------- */
.pdp { display: grid; gap: 24px; padding-block-end: 32px; }
.gallery { position: relative; margin-inline: calc(var(--r-gutter) * -1); }
.g-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.g-track::-webkit-scrollbar { display: none; }
.g-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: var(--sf-card-ratio); background: var(--sf-surface-muted); }
.g-slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* phones: name + price share the first screen with the photo, and the garment is NEVER cropped:
   the slide is capped at 60svh and the photo is fitted whole (contain) on the muted "studio" ground.
   A 56-inch abaya keeps its sleeves and hem; the letterbox reads as a mount, not as an error. */
@media (max-width: 899px) {
  .pdp { gap: 18px; }
  .g-slide { aspect-ratio: auto; block-size: min(calc(100vw * 4 / 3), 60svh); }
  .g-slide img { object-fit: contain; }
  /* dots ride on the photo (veiled pill) instead of adding a row; they already say "n of 4", so the counter goes */
  .gallery .g-dots { position: absolute; inset-block-end: 6px; inset-inline: 0; margin-inline: auto; inline-size: max-content; padding: 0 4px; gap: 0; border-radius: 999px; background: color-mix(in srgb, var(--sf-bg) 82%, transparent); }
  .gallery .g-count { display: none; }
  .pdp-info .eyebrow { display: none; } /* kicker is decoration; the name and price come first on a phone */
}
html:not(.js) img[data-src] { display: none; } /* deferred slides: <noscript> twin is shown instead */
.g-count { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; background: color-mix(in srgb, var(--sf-bg) 88%, transparent); padding: 4px 10px; font-size: 12px; border-radius: 999px; direction: ltr; }
.g-dots { display: flex; justify-content: center; gap: 8px; padding-block: 12px 0; }
/* 44×44 touch target, 6px visual dot; inactive dot uses --sf-border (≥ 3:1, WCAG 1.4.11) */
.g-dots a { inline-size: 44px; block-size: 44px; display: grid; place-items: center; }
.g-dots a::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 3px; background: var(--sf-border); transition: inline-size var(--r-dur) ease, background var(--r-dur) ease; }
.g-dots a[aria-current="true"]::before { inline-size: 20px; background: var(--sf-fg); }
.g-thumbs { display: none; }
.pdp-info { display: grid; gap: 22px; align-content: start; }
.pdp-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); line-height: 1.3; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-now { font: var(--sf-heading-weight, 700) 26px/1.2 var(--sf-font-heading); }
.region { font-size: 14px; font-weight: 400; color: var(--sf-fg-muted); }
.price-row s { color: var(--sf-fg-muted); }
.save { font-size: 13px; font-weight: 700; color: var(--sf-accent-text); }
.hint-sar { font-size: 13px; color: var(--sf-fg-muted); }
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.stock::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sf-success); }
.stock.low { color: var(--sf-warning); } .stock.low::before { background: var(--sf-warning); }
.stock.out { color: var(--sf-danger); } .stock.out::before { background: var(--sf-danger); }
.vgroup { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.vgroup legend { font-size: 14px; padding: 0; margin-block-end: 12px; display: flex; gap: 8px; }
.vgroup legend b { font-weight: 700; }
.vals { display: flex; flex-wrap: wrap; gap: 10px; }
.val { position: relative; }
.val input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.val span { display: grid; place-items: center; min-inline-size: 56px; min-block-size: 48px; padding: 0 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-control); font-size: 15px; transition: all var(--r-dur) ease; direction: ltr; }
.val input:checked + span { border-color: var(--sf-fg); box-shadow: inset 0 0 0 1px var(--sf-fg); font-weight: 700; }
.val input:focus-visible + span { outline: 2px solid var(--sf-ring); outline-offset: 2px; }
.val.na span { color: var(--sf-fg-muted); background: linear-gradient(to top right, transparent calc(50% - .5px), var(--sf-fg-muted) 50%, transparent calc(50% + .5px)); }
.swatch span { inline-size: 48px; min-inline-size: 48px; padding: 4px; border-radius: 50%; }
.swatch span i { inline-size: 100%; block-size: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-control); }
.qty button { inline-size: 48px; block-size: 48px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.qty input { inline-size: 48px; text-align: center; border: 0; background: none; font-size: 16px; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy { display: grid; gap: 10px; }
.facts { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--r-hair); border-radius: var(--sf-radius-card); font-size: 14px; }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.facts b { display: block; font-size: 14px; }
.desc { display: grid; gap: 16px; }
.desc .lead { font: var(--sf-heading-weight, 700) 20px/1.8 var(--sf-font-heading); }
.desc p { color: var(--r-ink-soft); max-inline-size: 64ch; }
.desc ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--r-hair); }
.desc ul li { padding: 16px 8px; display: grid; gap: 4px; text-align: center; font-size: 13px; color: var(--sf-fg-muted); }
.desc ul li + li { border-inline-start: 1px solid var(--r-hair); }
.desc ul li strong { font: var(--sf-heading-weight, 700) 15px/1.4 var(--sf-font-heading); color: var(--sf-fg); }
.acc details { border-block-end: 1px solid var(--r-hair); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-block-size: 60px; cursor: pointer; font-weight: 700; }
.acc summary::-webkit-details-marker { display: none; }
.acc details[open] summary .ico { transform: rotate(180deg); }
.acc .body { padding-block-end: 18px; font-size: 14px; color: var(--sf-fg-muted); }
.size-table { inline-size: 100%; border-collapse: collapse; font-size: 13px; direction: rtl; }
.size-table th, .size-table td { padding: 8px; border-block-end: 1px solid var(--r-hair); text-align: start; }
.buybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; background: var(--sf-bg); border-block-start: 1px solid var(--r-hair); padding: 10px var(--r-gutter) calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.buybar .btn { min-block-size: 48px; padding: 0 16px; }
.buybar .bb-price { font-size: 13px; line-height: 1.3; }
.buybar .bb-price b { display: block; font-size: 15px; }
.has-buybar { padding-block-end: 84px; }
/* one primary button, visible from the first screen (the thumb never has to hunt for it). With JS it steps aside
   only while the in-page buy buttons are on screen, so the two are never shown together; without JS it stays. */
@media (max-width: 899px) {
  .js body.bb-off .buybar { transform: translateY(110%); visibility: hidden; transition: transform calc(var(--r-dur) * 1.5) var(--r-ease), visibility 0s linear calc(var(--r-dur) * 1.5); }
  .js .buybar { transition: transform calc(var(--r-dur) * 1.5) var(--r-ease); }
}
/* add-to-cart feedback: busy label, size prompt, offline toast with retry, "added" sheet */
.btn[aria-busy="true"] { cursor: progress; }
.vgroup .err { margin-block: -4px 0; }
.toast { position: fixed; z-index: 46; inset-inline: var(--r-gutter); inset-block-end: calc(80px + env(safe-area-inset-bottom)); align-items: center; }
.toast .inline-link { margin-inline-start: auto; white-space: nowrap; }
@media (min-width: 900px) { .toast { inset-inline: auto 24px; inset-block-end: 24px; max-inline-size: 420px; } }
.sheet-actions { display: grid; gap: 10px; padding-block: 18px 4px; }
.sheet-actions .btn-ghost { justify-self: center; }
@media (min-width: 900px) {
  .sheet.corner .sheet-panel { inset-inline: auto 24px; inset-block-end: 24px; inline-size: 400px; border-radius: var(--sf-radius-card); border: 1px solid var(--r-hair); }
  .sheet.corner:not(.is-open) .sheet-panel { transform: translateY(calc(100% + 24px)); }
  .sheet.corner .sheet-grip { display: none; }
}
@media (min-width: 900px) {
  .pdp { grid-template-columns: 11fr 9fr; gap: 72px; align-items: start; padding-block-start: 8px; }
  .gallery { margin: 0; display: grid; grid-template-columns: 88px 1fr; gap: 16px; position: sticky; inset-block-start: 136px; }
  .g-track { grid-column: 2; border-radius: var(--sf-radius-card); }
  .g-thumbs { display: grid; gap: 12px; align-content: start; grid-row: 1; grid-column: 1; }
  .g-thumbs a { aspect-ratio: var(--sf-card-ratio); border-radius: var(--sf-radius-control); overflow: hidden; border: 1px solid transparent; opacity: .7; transition: opacity var(--r-dur); }
  .g-thumbs a[aria-current="true"], .g-thumbs a:hover { border-color: var(--sf-fg); opacity: 1; }
  .g-thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .g-dots { display: none; }
  .g-count { inset-inline-end: 14px; }
  .buybar { display: none; }
  .has-buybar { padding-block-end: 0; }
  .pdp-info { position: sticky; inset-block-start: 136px; }
}

/* ---------- cart / summary ---------- */
.page-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); padding-block: 24px 20px; display: flex; align-items: baseline; gap: 12px; }
.page-title small { font: 400 15px var(--sf-font-body); color: var(--sf-fg-muted); }
.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; } .two-col.co { grid-template-columns: 3fr 2fr; } .sticky-aside { position: sticky; inset-block-start: 96px; } }
.lines { display: grid; }
.line { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-block: 20px; border-block-end: 1px solid var(--r-hair); }
.line-img { aspect-ratio: 3 / 4; border-radius: var(--sf-radius-control); overflow: hidden; background: var(--sf-surface-muted); }
.line-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.line-body { display: grid; gap: 6px; align-content: start; }
.line-name { font: var(--sf-heading-weight, 700) 16px/1.5 var(--sf-font-heading); }
.line-meta { font-size: 13px; color: var(--sf-fg-muted); }
.line-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 6px; }
.line .qty button, .line .qty input { inline-size: 44px; block-size: 44px; }
.tag-warn { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--sf-warning); }
.btn-ghost { background: none; border: 0; min-block-size: 44px; padding: 0 8px; color: var(--sf-fg-muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 14px; }
.summary { display: grid; gap: 14px; padding: 24px; background: var(--sf-surface); border: 1px solid var(--r-hair); border-radius: var(--sf-radius-card); }
.summary h2 { font-size: 20px; }
.row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.row.total { border-block-start: 1px solid var(--r-hair); padding-block-start: 14px; font-weight: 700; font-size: 17px; align-items: baseline; }
.row.total .region { display: block; text-align: end; }
.coupon summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; list-style: none; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon form { display: flex; gap: 8px; padding-block-end: 8px; }
.coupon .btn { min-block-size: 52px; padding: 0 18px; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--sf-radius-control); font-size: 14px; background: color-mix(in srgb, var(--sf-warning) 12%, var(--sf-bg)); border: 1px solid color-mix(in srgb, var(--sf-warning) 40%, var(--sf-bg)); }
.alert.info { background: var(--r-veil); border-color: var(--r-hair); }
.alert.ok { background: color-mix(in srgb, var(--sf-success) 12%, var(--sf-bg)); border-color: color-mix(in srgb, var(--sf-success) 40%, var(--sf-bg)); }
.alert.bad { background: color-mix(in srgb, var(--sf-danger) 10%, var(--sf-bg)); border-color: color-mix(in srgb, var(--sf-danger) 40%, var(--sf-bg)); }
.stickybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; background: var(--sf-bg); border-block-start: 1px solid var(--r-hair); padding: 10px var(--r-gutter) calc(10px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .stickybar { position: static; padding: 0; border: 0; background: none; } }
/* phones: while typing, the pinned bar returns to the flow so it never rides on top of the keyboard */
@media (max-width: 899px) {
  body:has(:is(input:not([type=radio], [type=checkbox], [type=hidden]), select, textarea):focus) .stickybar { position: static; padding: 16px 0 0; border: 0; background: none; }
}

/* ---------- checkout ---------- */
.co-hdr { border-block-end: 1px solid var(--r-hair); }
.co-hdr .hdr-row { block-size: 60px; }
.step { display: grid; gap: 16px; padding-block: 28px; border-block-end: 1px solid var(--r-hair); }
.step-h { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.step-h .n { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border: 1px solid var(--sf-fg); border-radius: 50%; font: 400 14px/1 var(--sf-font-body); direction: ltr; flex: none; }
.fields-2 { display: grid; gap: 16px; }
@media (min-width: 600px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
.transfer { display: grid; gap: 14px; padding: 18px; border-radius: var(--sf-radius-card); background: var(--sf-surface-muted); margin-block-start: 4px; }
.acct { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sf-bg); border: 1px dashed var(--sf-border); border-radius: var(--sf-radius-control); }
.acct b { font-size: 22px; letter-spacing: .06em; direction: ltr; }
.copy { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-control); background: none; cursor: pointer; font-size: 13px; }
.skel { display: block; block-size: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--sf-surface-muted), var(--r-veil), var(--sf-surface-muted)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.mini { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.mini img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); }
.co-summary summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-block-size: 56px; cursor: pointer; font-weight: 700; }
.co-summary summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) { .co-summary-mobile { display: none; } }
.co-aside { display: none; }
@media (min-width: 900px) { .co-aside { display: grid; } }

/* ---------- tracking ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--sf-warning) 14%, var(--sf-bg)); color: var(--sf-warning); }
.status-pill::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; padding-block-end: 28px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block: 30px 0; inline-size: 1px; background: var(--r-hair); }
.timeline li:last-child::before { display: none; }
.timeline li.done::before { background: var(--sf-fg); }
.t-dot { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sf-border); background: var(--sf-bg); z-index: 1; }
.done .t-dot { background: var(--sf-fg); color: var(--sf-bg); border-color: var(--sf-fg); }
.now .t-dot { border: 2px solid var(--sf-fg); }
.now .t-dot::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sf-fg); }
.t-label { font-weight: 700; padding-block-start: 4px; }
.todo .t-label { color: var(--sf-fg-muted); font-weight: 400; }
.t-time { font-size: 13px; color: var(--sf-fg-muted); padding-block-start: 5px; direction: ltr; }
.card-box { padding: 22px; border: 1px solid var(--r-hair); border-radius: var(--sf-radius-card); background: var(--sf-surface); display: grid; gap: 12px; }
.card-box h2 { font-size: 18px; }

/* ---------- motion ----------
   subtle  (engine value, default): interaction feedback at var(--r-dur) 120–180ms
           + the one slow, elegant gesture every shopper sees, touch included: photos settle in (opacity 0→1, 450ms)
           over the muted ground as they arrive. It also hides progressive decoding on 3G. Needs the shared head
           one-liner (adds .in on load/error). Never on the LCP photo (fetchpriority=high), never without JS,
           never with motion=none or prefers-reduced-motion.
   expressive (PROPOSED value, gap): one-shot slow curtain reveals on first paint */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="none"]) :is(.media, .card-img, .cat-img, .g-slide, .story-media, .detail-strip figure, .line-img, .plp-hero-media) img:not([fetchpriority="high"]) {
    transition: opacity 450ms var(--r-ease), transform var(--r-slow) var(--r-ease);
  }
  html.js:not([data-motion="none"]) :is(.media, .card-img, .cat-img, .g-slide, .story-media, .detail-strip figure, .line-img, .plp-hero-media) img:not([fetchpriority="high"]):not(.in) { opacity: 0; }
}
html[data-motion="expressive"] .reveal { animation: curtain var(--r-slow) var(--r-ease) both; }
html[data-motion="expressive"] .rise { animation: rise calc(var(--r-slow) * .8) var(--r-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
@keyframes curtain { from { clip-path: inset(0 0 100% 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  html[data-motion="expressive"] .on-view { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print { .hdr, .buybar, .stickybar, .demo-tools, .pv-bar { display: none !important; } }

/* ==========================================================================
   Page-level pieces (collection hero, PDP story, cart/checkout/tracking)
   ========================================================================== */
.js .nojs-only { display: none; }
.noscript-only { display: none; }
html:not(.js) .noscript-only { display: inline-flex; }

/* collection header (templates.collection.showCategoryBanner) */
.plp-hero { display: grid; gap: 20px; }
.plp-hero-media { display: none; aspect-ratio: 4 / 5; border-radius: var(--sf-radius-card); overflow: hidden; background: var(--sf-surface-muted); }
.plp-hero-media picture { display: block; block-size: 100%; }
.plp-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) {
  .plp-hero { grid-template-columns: 1fr 340px; gap: 72px; align-items: end; padding-block: 24px 40px; }
  .plp-hero-media { display: block; }
  .plp-head .lede { display: block; }
}
.select-form { display: flex; align-items: center; gap: 4px; }
.active-filters a.clear-all { background: none; text-decoration: underline; text-underline-offset: 4px; }

/* PDP extras */
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 22px; }
.g-zoom { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; background: color-mix(in srgb, var(--sf-bg) 88%, transparent); border-radius: 999px; }
.pdp-aux { display: flex; flex-wrap: wrap; gap: 0 28px; }
.pdp-story { display: grid; gap: 28px; padding-block: var(--sf-section-y) 40px; margin-block-start: 16px; border-block-start: 1px solid var(--r-hair); }
.rt p + p { margin-block-start: 0; }
.detail-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-gap); padding-block-end: 40px; }
.detail-strip figure { margin: 0; display: grid; gap: 10px; }
.detail-strip img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sf-radius-card); background: var(--sf-surface-muted); }
.detail-strip figcaption { font-size: 13px; color: var(--sf-fg-muted); }
.pdp-acc { max-inline-size: 760px; }
.added { display: flex; gap: 12px; align-items: center; }
.added img { inline-size: 56px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--sf-radius-control); }
@media (min-width: 900px) {
  .pdp-story { grid-template-columns: 5fr 7fr; gap: 88px; }
  .detail-strip { grid-template-columns: 7fr 5fr; align-items: end; gap: 32px; }
  .detail-strip figure:last-child { margin-block-end: 72px; }
}

/* simplified header for the trust path (cart → checkout → tracking) */
.co-hdr { position: sticky; inset-block-start: 0; z-index: 40; background: var(--sf-bg); }
.co-hdr .hdr-row { grid-template-columns: 1fr auto 1fr; }
.co-hdr .back { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-size: 14px; }
.co-hdr .secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sf-fg-muted); justify-self: end; }
.co-hdr .logo b { font-size: 20px; }
@media (min-width: 768px) {
  html[data-header] .co-hdr .hdr-row { grid-template-columns: 1fr auto 1fr; gap: 0; }
  html[data-header] .co-hdr .logo { order: 0; justify-items: center; }
}

/* cart */
.line-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.line-price { font-weight: 700; }
.line.is-out { background: color-mix(in srgb, var(--sf-danger) 6%, var(--sf-bg)); padding-inline: 12px; }
.chip-ok { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--sf-border); border-radius: var(--sf-radius-control); font-size: 14px; }
.chip-ok b { direction: ltr; letter-spacing: .06em; }
.cart-note { font-size: 13px; color: var(--sf-fg-muted); text-align: center; }
.bar-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-block-end: 8px; }
.bar-total b { font-size: 16px; }
@media (min-width: 900px) { .bar-total { display: none; } }

/* checkout */
.co-main { padding-block-end: 140px; }
@media (min-width: 900px) { .co-main { padding-block-end: 64px; } }
.step-h small { font: 400 13px var(--sf-font-body); color: var(--sf-fg-muted); margin-inline-start: auto; }
.req { color: var(--sf-danger); }
.inline-link { background: none; border: 0; padding: 0; color: var(--sf-link); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-block-size: 44px; font-size: 14px; }
.opt-group { display: grid; gap: 10px; }
.opt .meta { color: var(--sf-fg-muted); font-size: 13px; }
.opt[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.pay-detail { display: grid; gap: 14px; }
@supports selector(:has(*)) {
  .pay-detail { display: none; }
  .pay:has(input[value="wallet"]:checked) .pay-detail { display: grid; }
  .ref-now { display: none; }
  .pay-detail:has(input[value="now"]:checked) .ref-now { display: grid; }
}
.amount-due { font: var(--sf-heading-weight, 700) 18px/1.4 var(--sf-font-heading); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 0 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-control); background: var(--sf-bg); cursor: pointer; font-size: 14px; }
.seg label:has(input:checked) { border-color: var(--sf-fg); box-shadow: inset 0 0 0 1px var(--sf-fg); }
.seg input { accent-color: var(--sf-primary); inline-size: 18px; block-size: 18px; margin: 0; }
.confirm-bar .btn { inline-size: 100%; }
.confirm-bar .legal { font-size: 12px; color: var(--sf-fg-muted); text-align: center; margin-block-start: 8px; }
.confirm-bar .legal a { text-decoration: underline; }
.totals { display: grid; gap: 10px; }
[aria-busy="true"] .money-live { opacity: .45; }
.wallet-pick { display: flex; flex-wrap: wrap; gap: 8px; }
/* optional fields folded away: one quiet line instead of three fields between the shopper and the button */
.more { border-block: 1px solid var(--r-hair); }
.more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 52px; cursor: pointer; font-size: 15px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ico { transition: transform var(--r-dur) ease; }
.more[open] > summary .ico { transform: rotate(180deg); }
.more > .more-body { display: grid; gap: 16px; padding-block: 4px 18px; }
.err-sum { margin-block-start: 16px; }
.err-sum ul { margin: 6px 0 0; padding-inline-start: 18px; }
.err-sum a { text-decoration: underline; text-underline-offset: 3px; font-family: var(--sf-font-heading); display: inline-flex; align-items: center; min-block-size: 44px; }
.co-status:empty { display: none; }
.co-status { margin-block-start: 8px; text-align: center; }

/* tracking */
.ord-head { display: grid; gap: 14px; padding-block: 32px 24px; border-block-end: 1px solid var(--r-hair); }
.ord-no { font: var(--sf-heading-weight, 700) clamp(2.25rem, 1.4rem + 4vw, 4rem)/1.1 var(--sf-font-heading); direction: ltr; text-align: end; }
.ord-head .eyebrow { margin: 0; }
.track-grid { display: grid; gap: 28px; padding-block: 28px; }
@media (min-width: 1024px) { .track-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--sf-fg-muted); }
.kv dd { margin: 0; }
.track-narrow { max-inline-size: 720px; margin-inline: auto; }
.device-orders a { display: flex; justify-content: space-between; align-items: center; min-block-size: 52px; border-block-end: 1px solid var(--r-hair); font-size: 15px; }
.lookup { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--r-hair); border-radius: var(--sf-radius-card); background: var(--sf-surface); }