@layer theme;

@layer theme {/* base theme. Mobile first, logical properties throughout, and a plain floor
   that never needs the enhancement script beside it to work.
   The host stamps lang, dir and data-mode on <html>; everything below reads
   those rather than guessing. */

/* The listing facts the parity review added: a rating, a low-stock line the
   platform wrote, the merchant's own badge, and direct add from a tile. */
.card-rate { font-size: 12px; color: var(--muted); }
.card-stock { font-size: 12px; color: var(--cut-ink); }
.card-add .btn { inline-size: 100%; }

.foot-tag { margin: 0; color: var(--muted); }

/* Share intents and the categories a product sits in: both are lists the
   platform built, rendered and never composed. */
.shares, .in-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shares { margin-block-start: 10px; }
.in-cats { margin-block-start: 8px; font-size: 13px; }
.share { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

.packs { display: grid; gap: 18px; }
.pack { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.pack-title { margin: 0; font-size: 18px; }
.pack-price { display: flex; align-items: center; gap: 8px; margin: 0; }

.line-pack { margin: 0; color: var(--accent); }
/* D22a: a line's detail rows (choice, pack, count, reduction) are one size. */
.line-body > :not(.line-title) { font-size: .875rem; }

/* A line the platform cannot sell, and a cart it cannot check out: the cut
   tone, which is this theme's reading of "this costs you something". Both
   stand where the thing they replace stood, so the row keeps its shape. */
.line-gone { margin: 0; font-size: .93rem; font-weight: 600; color: var(--cut-ink); }
.cart-stop {
  margin: 0; padding: 12px 16px; border-radius: var(--radius);
  border-inline-start: 3px solid var(--cut);
  background: var(--cut-soft); color: var(--cut-ink); font-size: .93rem;
}

.cat-strip.cat-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; }

/* Every value the merchant can change is a token, and the theme reads it
   through one name (docs/theme-editor.md section 11). The literals live in the
   manifest, reach the page as the --tk- properties at the end of this file,
   and the editor's token panel repaints the store by overriding those; a
   second copy of a hex code here would be a value the panel could not reach.
   TestEveryTokenHasACustomProperty pins the manifest against those names. */
:root {
  color-scheme: light;
  --bg: var(--tk-color-bg);
  --bg-soft: var(--bg-soft-own);
  --bg-soft-own: var(--tk-color-bg-soft);
  --surface: var(--tk-color-surface);
  --text: var(--text-own);
  /* The theme's own ink, on the theme's own grounds. A section a merchant
     repaints derives its ink from what they chose and falls back to these, and
     a control that keeps its own ground keeps `--ink-on-surface` whatever the
     section around it is painted. */
  --text-own: var(--tk-color-text);
  --muted-own: var(--tk-color-muted);
  --line-own: var(--tk-color-line);
  --line-strong-own: var(--tk-color-line-strong);
  --surface-2-own: var(--tk-color-surface-2);
  --ink-on-surface: var(--text-own);
  --muted: var(--muted-own);
  --line: var(--line-own);
  --accent: var(--tk-color-accent);
  --accent-soft: var(--tk-color-accent-soft);
  /* Words on an accent fill read at AA whatever accent a store picks: the
     fill and its ink are chosen together from the accent. A dark or mid
     accent keeps white ink on a fill no lighter than it can carry; a light one
     keeps its own fill under a dark ink of its own hue. Every scope that
     redefines --accent restates these two, so they always follow it.
     The two numbers are measured and not chosen: at .54 the fill let white
     ink read 4.46:1 on the dark page, and at .74 the dark ink read 4.29:1 on
     a light fill. Both are the ladder missing the one thing it exists for, so
     the floor is .52 and the drop is .78, and the lane measures every filled
     ground in both colour modes rather than taking these on trust. */
  --accent-fill: oklch(from var(--accent) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-accent: oklch(from var(--accent) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  --cut: var(--tk-color-cut);
  /* The cut's words sit on light grounds (the page, its own soft wash), so
     they take a shade dark enough to read at AA there; dark mode's cut is
     already a light red and is its own ink. */
  --cut-ink: oklch(from var(--cut) min(l, .52) c h);
  /* The same for WhatsApp's green, which an outline button writes in WORDS on
     the page rather than filling with: the brand green is a fill and reads
     4.21:1 as ink on a light ground. The fill keeps the brand exactly; only
     the ink is darkened. */
  --whatsapp-ink: oklch(from var(--whatsapp) min(l, .48) c h);
  --accent-ink: var(--tk-color-accent-ink);
  --surface-2: var(--surface-2-own);
  --line-strong: var(--line-strong-own);
  --cut-soft: var(--tk-color-cut-soft);
  --success: var(--tk-color-success);
  --success-soft: var(--tk-color-success-soft);
  --star: var(--tk-color-star);
  --whatsapp: var(--tk-color-whatsapp);
  /* Every other colour a surface fills under words takes the accent's ladder.
     Dark mode's values sit on <html> with :root, so these follow them. */
  --cut-fill: oklch(from var(--cut) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-cut: oklch(from var(--cut) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  --success-fill: oklch(from var(--success) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-success: oklch(from var(--success) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  --accent-ink-fill: oklch(from var(--accent-ink) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-accent-ink: oklch(from var(--accent-ink) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  --whatsapp-fill: oklch(from var(--whatsapp) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-whatsapp: oklch(from var(--whatsapp) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  /* One ease and one beat for every hover, and the brightest ink a band
     carries, which a pointer moves a word towards. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --tap: .15s;
  --ink-strong: var(--text);
  --radius: var(--tk-radius-card);
  --radius-sm: var(--tk-radius-control);
  --pill: var(--tk-radius-pill);
  --shadow: var(--tk-shadow-card);
  --pop: var(--tk-shadow-pop);
  --lift: var(--tk-shadow-sticky);
  /* The page column and the rhythm between sections are the layout tokens
     (docs/theme-editor.md section 11), so a look sets them and the token panel
     edits them, and no section's setting decides another section's spacing. */
  --wrap: var(--tk-layout-width);
  --band: var(--tk-layout-rhythm);
  --gutter: var(--tk-layout-gutter);
  --head: 62px;
  /* D20a: a form's one control height, the tap floor on a phone. */
  --control: 44px;
}
@media (min-width: 480px) { :root { --control: var(--tk-layout-control); } }

[data-mode="dark"] {
  color-scheme: dark;
  /* D13: the dark grounds and inks are the dark twin of color.bg, its hue at
     the theme's dark lightness, tinted only where the light ground is, so a
     look on white stays neutral in the dark. */
  --bg: oklch(from var(--tk-color-bg) .167 calc(.009 * clamp(0, (c - .003) * 1000, 1)) h);
  --bg-soft: var(--bg-soft-own);
  --bg-soft-own: oklch(from var(--tk-color-bg) .193 calc(.010 * clamp(0, (c - .003) * 1000, 1)) h);
  --surface: oklch(from var(--tk-color-bg) .222 calc(.013 * clamp(0, (c - .003) * 1000, 1)) h);
  --text-own: oklch(from var(--tk-color-bg) .947 calc(.008 * clamp(0, (c - .003) * 1000, 1)) h);
  --muted-own: oklch(from var(--tk-color-bg) .700 calc(.018 * clamp(0, (c - .003) * 1000, 1)) h);
  --line-own: oklch(from var(--tk-color-bg) .296 calc(.020 * clamp(0, (c - .003) * 1000, 1)) h);
  --line-strong-own: oklch(from var(--tk-color-bg) .375 calc(.023 * clamp(0, (c - .003) * 1000, 1)) h);
  --surface-2-own: oklch(from var(--tk-color-bg) .250 calc(.015 * clamp(0, (c - .003) * 1000, 1)) h);
  --cut-soft: #35211d;
  --star: #e5b44a;
  --whatsapp: #35b96b;
  /* The accent ladder is DERIVED from the token, not restated as a literal:
     token values are mode-invariant (docs/theme-package.md section 8), so a
     preset that sets its own accent would otherwise never reach a dark render.
     Mixing toward white keeps the hue and buys the contrast the dark ground
     needs; the grounds below stay literals, which is what the theme's own dark
     styling is for. */
  --accent: color-mix(in srgb, var(--tk-color-accent) 50%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--tk-color-accent) 22%, var(--bg));
  /* D13: a primary keeps the accent's hue under a white word, its fill at a
     lightness that stands 3:1 on the dark ground and 4.5:1 under white (.53
     sits inside that band for every hue). An accent with no hue to keep
     (chroma under .04, noor's near-black) takes the inverse pair instead: a
     light fill under a dark word, never a grey that reads disabled. */
  --accent-fill: oklch(from var(--tk-color-accent) calc(.53 * clamp(0, (c - .04) * 1000, 1) + .94 * (1 - clamp(0, (c - .04) * 1000, 1))) calc(c * clamp(0, (c - .04) * 1000, 1)) h);
  --on-accent: oklch(from var(--tk-color-accent) calc(.99 * clamp(0, (c - .04) * 1000, 1) + .21 * (1 - clamp(0, (c - .04) * 1000, 1))) 0 h);
  --cut: #ff8a76;
  --cut-ink: var(--cut);
  --whatsapp-ink: var(--whatsapp);
  --success: color-mix(in srgb, var(--tk-color-success) 45%, #ffffff);
  --success-soft: color-mix(in srgb, var(--tk-color-success) 24%, var(--bg));
  --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .9);
  --pop: 0 24px 60px -24px rgba(0, 0, 0, .9);
  /* The six backdrop tints are ground family, not accent family: the theme's
     dark stylesheet writes its own grounds as literals, and a mix of the light
     tint toward this ground comes out warmer than a dark tile should read
     (docs/notes/open-questions.md, eighteenth round). The cost, the same one
     every other ground already carries, is that a look overriding a tint token
     restyles light only. */
  --tint-a: #12302a;
  --tint-b: #211f33;
  --tint-c: #2f1f26;
  --tint-d: #2d2718;
  --tint-e: #16262d;
  --tint-f: #1e2419;
  --accent-ink: color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff);
  /* An ink accent mixed the same way stays grey on the dark ground. */
  @supports (color: oklch(from red l c h)) {
    --accent-ink: oklch(from color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff) max(l, .72) c h);
  }
}
@media (prefers-color-scheme: dark) {
[data-mode="auto"] {
  color-scheme: dark;
  /* D13: the dark grounds and inks are the dark twin of color.bg, its hue at
     the theme's dark lightness, tinted only where the light ground is, so a
     look on white stays neutral in the dark. */
  --bg: oklch(from var(--tk-color-bg) .167 calc(.009 * clamp(0, (c - .003) * 1000, 1)) h);
  --bg-soft: var(--bg-soft-own);
  --bg-soft-own: oklch(from var(--tk-color-bg) .193 calc(.010 * clamp(0, (c - .003) * 1000, 1)) h);
  --surface: oklch(from var(--tk-color-bg) .222 calc(.013 * clamp(0, (c - .003) * 1000, 1)) h);
  --text-own: oklch(from var(--tk-color-bg) .947 calc(.008 * clamp(0, (c - .003) * 1000, 1)) h);
  --muted-own: oklch(from var(--tk-color-bg) .700 calc(.018 * clamp(0, (c - .003) * 1000, 1)) h);
  --line-own: oklch(from var(--tk-color-bg) .296 calc(.020 * clamp(0, (c - .003) * 1000, 1)) h);
  --line-strong-own: oklch(from var(--tk-color-bg) .375 calc(.023 * clamp(0, (c - .003) * 1000, 1)) h);
  --surface-2-own: oklch(from var(--tk-color-bg) .250 calc(.015 * clamp(0, (c - .003) * 1000, 1)) h);
  --cut-soft: #35211d;
  --star: #e5b44a;
  --whatsapp: #35b96b;
  /* The accent ladder is DERIVED from the token, not restated as a literal:
     token values are mode-invariant (docs/theme-package.md section 8), so a
     preset that sets its own accent would otherwise never reach a dark render.
     Mixing toward white keeps the hue and buys the contrast the dark ground
     needs; the grounds below stay literals, which is what the theme's own dark
     styling is for. */
  --accent: color-mix(in srgb, var(--tk-color-accent) 50%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--tk-color-accent) 22%, var(--bg));
  /* D13: a primary keeps the accent's hue under a white word, its fill at a
     lightness that stands 3:1 on the dark ground and 4.5:1 under white (.53
     sits inside that band for every hue). An accent with no hue to keep
     (chroma under .04, noor's near-black) takes the inverse pair instead: a
     light fill under a dark word, never a grey that reads disabled. */
  --accent-fill: oklch(from var(--tk-color-accent) calc(.53 * clamp(0, (c - .04) * 1000, 1) + .94 * (1 - clamp(0, (c - .04) * 1000, 1))) calc(c * clamp(0, (c - .04) * 1000, 1)) h);
  --on-accent: oklch(from var(--tk-color-accent) calc(.99 * clamp(0, (c - .04) * 1000, 1) + .21 * (1 - clamp(0, (c - .04) * 1000, 1))) 0 h);
  --cut: #ff8a76;
  --cut-ink: var(--cut);
  --whatsapp-ink: var(--whatsapp);
  --success: color-mix(in srgb, var(--tk-color-success) 45%, #ffffff);
  --success-soft: color-mix(in srgb, var(--tk-color-success) 24%, var(--bg));
  --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .9);
  --pop: 0 24px 60px -24px rgba(0, 0, 0, .9);
  /* The six backdrop tints are ground family, not accent family: the theme's
     dark stylesheet writes its own grounds as literals, and a mix of the light
     tint toward this ground comes out warmer than a dark tile should read
     (docs/notes/open-questions.md, eighteenth round). The cost, the same one
     every other ground already carries, is that a look overriding a tint token
     restyles light only. */
  --tint-a: #12302a;
  --tint-b: #211f33;
  --tint-c: #2f1f26;
  --tint-d: #2d2718;
  --tint-e: #16262d;
  --tint-f: #1e2419;
  --accent-ink: color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff);
  /* An ink accent mixed the same way stays grey on the dark ground. */
  @supports (color: oklch(from red l c h)) {
    --accent-ink: oklch(from color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff) max(l, .72) c h);
  }
}
}

*, *::before, *::after { box-sizing: border-box; }

body {
  /* A short page still puts its footer on the floor of the viewport rather
     than halfway up it, which the browser lane measures on every page of
     every look (`make browser`). */
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--tk-font-body);
  font-size: 16px;
  /* The body font's own line height, which the CSS pipeline declares from the
     curated catalog (docs/theme-editor.md sections 11 and 19). A stack the
     catalog does not name leaves the property absent and this value stands. */
  --leading: var(--tk-font-leading, 1.55);
  line-height: var(--leading);
  -webkit-text-size-adjust: 100%;
}

[dir="rtl"] body { --leading: var(--tk-font-leading-rtl, 1.8); }

/* height:auto is load bearing: the width and height attributes on an img are
   presentational hints, so an aspect-ratio rule that sets only the inline size
   is silently overridden by the intrinsic height. */
img, video { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
/* A product title is merchant text, and one long unbroken word in it must
   not be able to widen the whole page. */
/* A word breaks only when it alone is wider than its line (D11), and a grid's
   implicit column may be narrower than its longest word, so that line is the
   page's and never the word's: an unbroken word cannot widen the page. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, a, figcaption, td, th { overflow-wrap: break-word; }
:where(*) { grid-auto-columns: minmax(0, auto); }
:where(h1, h2, h3, h4, h5, h6, p, dt) { min-inline-size: 0; max-inline-size: 100%; }
/* Merchant words keep their own reading order and sit with the page (editor
   spec section 19): a Latin name on an Arabic page aligns right. */
[dir="auto"] { text-align: -webkit-match-parent; text-align: match-parent; }
/* Arabic is a joined script that tracking pulls apart, so every tracked value
   is scaled by --track-scale and an Arabic page sets it to zero (editor spec
   section 19). */
:root:lang(ar) { --track-scale: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* A placeholder is text a shopper reads, so it takes a token something holds
   rather than the browser's own grey: unstyled it came out #757575, which is
   3.73:1 on a dark field, and the looks that did style it faded the field's
   own ink by half, which is 2.97:1 on white. `--muted` is declared against
   every ground a field sits on, so the pair table holds it wherever the field
   is; the placeholder reads lighter than a typed value because muted IS one
   step down from the text, not because it was watered into its ground. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

h1, .buy h2.buy-title { font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.1rem); line-height: 1.2; letter-spacing: calc(-.01em * var(--track-scale, 1)); }
h2 { font-size: clamp(1.1rem, .98rem + .6vw, 1.4rem); line-height: 1.25; }

:where(a, button, input, select, textarea, summary, label[for]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: calc(-1 * var(--tap-inset, 0px));
  border-radius: var(--radius-sm);
}

.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.main { flex: 1 0 auto; padding-block: 20px 56px; }

/* Between-section spacing belongs to the container the engine emits, never to
   a section's own root. A margin there escapes the wrapper, and the wrapper is
   what the editor draws its selection box on and what `appearance.background`
   paints (theme-engine.md section 3), so a section would own space its box
   does not cover. One gap here is also one rhythm: every section sits the same
   distance from its neighbour, and a new section is right by default. */
.main > .wrap { display: flex; flex-direction: column; gap: var(--tk-spacing-lg); }
/* A section that drew nothing takes no band, and neither does a heading kept
   for readers alone; the editor keeps both, to point at. */
.main > .wrap > [data-type]:not([data-theme-section]):not(:has(*)) { display: none; }
.main > .wrap > [data-type]:not([data-theme-section]):has(> .page-head[data-display="hidden"]:only-child) { display: contents; }
.main > .wrap > [data-type]:not([data-theme-section]):has(> .poster .poster-ph):not(:has(.poster-words)) { display: none; }
.muted { color: var(--muted); font-size: .92rem; }
.lede { color: var(--muted); font-size: 1.02rem; max-inline-size: 62ch; }
.h-sec { margin-block-end: 14px; }

/* Visually hidden, and hidden from the LAYOUT too. The max sizes are not
   belt and braces: a later rule that sets a width on inputs wins over the
   inline-size here, and a 320px control clipped to nothing still counts toward
   the page's scroll width, which is how the reflow rule was being broken on
   every product page by a radio nobody could see. */
.vh {
  --control: 0px; position: absolute; inline-size: 1px; block-size: 1px;
  max-inline-size: 1px; max-block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

/* The skip link is a tap target the moment it is focused, and a keyboard on a
   phone is still a phone: it takes the same 44px floor every other control
   has. */
.skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: 12px; z-index: 60;
  display: inline-flex; align-items: center; min-block-size: 44px;
  background-color: var(--accent-fill); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
/* :focus-visible only: a scripted focus or a restored page must not paint it
   over the store. main takes the focus the link hands it, without a ring
   around the whole page. */
.skip:focus-visible { inset-block-start: 0; }
.main:focus { outline: none; }

.ico { inline-size: 22px; block-size: 22px; flex: none; }
.ico-down { inline-size: 16px; block-size: 16px; opacity: .6; }

/* One right-pointing glyph, set left to right so Arabic never mirrors it:
   the transform alone says which way it points. */
.chev { display: inline-block; direction: ltr; unicode-bidi: isolate; transform: scaleX(-1); }
.chev-next { transform: none; }
[dir="rtl"] .chev { transform: none; }
[dir="rtl"] .chev-next { transform: scaleX(-1); }

/* placeholder for an image the merchant has not uploaded. Never a broken img. */
.ph {
  display: block; inline-size: 100%; block-size: 100%; min-block-size: 64px;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 4%, transparent) 9px 18px),
    var(--bg-soft);
}
/* On a card it is drawn on the plate, light in both modes (D3), and a
   category with no picture wears the same plate and hatch. On a card the hatch
   lays no ground of its own: the plate under it keeps its step (D3). */
:is(.card-media, .cat-media) .ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgb(0 0 0 / .05) 9px 18px),
    var(--plate, var(--tile));
}
.card-media .ph { background-color: transparent; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 1px solid transparent; border-radius: var(--pill);
  background: var(--accent-soft); color: var(--text);
  cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-buy { background: var(--accent-fill); color: var(--on-accent); }
.btn-quiet { background: transparent; border-color: var(--line); }
.btn-block { display: flex; inline-size: 100%; }
.btn-wa { background: transparent; border-color: var(--line); }

.field { display: grid; gap: 5px; }
/* The platform's sentence in place of an empty linked select: the control's
   words, in the field's quiet ink, under the label it keeps. */
.field-empty { margin: 0; line-height: 1.5; color: var(--muted); }
/* An author display wins over the browser's own [hidden] rule, so a field the
   platform shows only `when` its condition holds is hidden here too. */
.field[hidden] { display: none; }
/* A noscript input is an element only in a browser without script, and there
   the typed field is the control, so the disabled select steps aside. */
.field:has(> noscript input) > select { display: none; }
.field > label { font-size: .86rem; color: var(--muted); }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
/* The file picker's own button is drawn in the theme's quiet button; its
   words are the browser's, in the shopper's own language. */
.field input[type="file"]::file-selector-button {
  margin-inline-end: 12px; padding: 6px 14px; font: inherit; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); cursor: pointer;
}
.field textarea { resize: vertical; }
.field-bad { --line: var(--cut); --line-strong: var(--cut); }
.field-bad :is(input, select, textarea) { background-color: var(--cut-soft); }
.bad { color: var(--cut-ink); font-size: .84rem; }

/* Text aligns to its own writing direction, so a French description on an
   Arabic page keeps its lines by its bullets. */
.rt { max-inline-size: 68ch; text-align: start; }
.rt > * + * { margin-block-start: .9em; }
.rt p, .rt li { color: var(--muted); }
.rt strong { color: var(--text); }
/* A merchant's minor headings never read smaller than the words under them. */
.rt :is(h4, h5, h6) { font-size: 1em; line-height: inherit; }
.rt ul { list-style: disc; padding-inline-start: 1.2em; }
/* A spec sheet scrolls inside its own block, and a cell keeps its words
   whole; a title row is a heading and a row's label is lighter than it. */
.rt table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
/* The block scrolls; the rows inside it still span its column (a block table
   sizes its rows to their words). */
.rt table > tbody:only-child { display: table; inline-size: 100%; border-collapse: collapse; }
.rt :is(th, td) {
  padding-block: 10px; padding-inline-end: 24px; border-block-end: 1px solid var(--line);
  text-align: start; vertical-align: top;
}
.rt th { color: var(--text); font-weight: 600; }
.rt tr > th:first-child:has(+ td) { color: var(--muted); font-weight: 400; }
.rt td { color: var(--text); }
.rt tr:last-child > * { border-block-end: 0; }

.empty { display: grid; gap: 16px; justify-items: center; padding-block: 48px; text-align: center; color: var(--muted); }

/* announcement */
.announce {
  background-color: var(--accent-fill); color: var(--on-accent);
  font-size: .88rem; text-align: center; padding-block: 8px;
}
.announce .wrap { display: block; }

/* header */
.head {
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}
/* The header's own ground, so its tone is a surface the whole bar sits on
   rather than a tint the width of the words. Same shape as the announcement
   and utility bars above it. */
.head-bar { background: var(--bg); }
.head:has(.head-bar[data-tone="inverse"]) { border-block-end-color: transparent; }
.head-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand end" "search search";
  min-block-size: var(--head); padding-block: 9px;
}
.brand { grid-area: brand; display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 0; }
/* break-word, not the global anywhere: a squeezed row may not split a word
   that fits a line, so beside a wide wordmark the picture gives way. */
.brand-name { font-weight: 700; font-size: 1.06rem; letter-spacing: calc(-.01em * var(--track-scale, 1)); overflow-wrap: break-word; max-inline-size: 100%; }
/* A long store name keeps the header two lines tall at most, at every width,
   and the ways in beside it keep their words on one line. */
.brand-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: clip; }
.head-end :is(.head-a, .cart-link) { white-space: nowrap; }
.brand-logo { block-size: 34px; inline-size: auto; min-inline-size: 34px; object-fit: contain; }
.search { grid-area: search; display: flex; gap: 6px; align-items: center; inline-size: 100%; max-inline-size: 560px; margin-inline: auto; }
/* Suggestions sit under the box, inside the search form, so tabbing into them
   is still being in the form. */
.search { position: relative; }
.suggest {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 45;
  margin: 0; padding: 6px; list-style: none; max-block-size: 70vh; overflow-y: auto;
  background: var(--surface); color: var(--ink-on-surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--pop);
}
.suggest-a { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 6px 8px; border-radius: var(--radius-sm); color: inherit; }
.suggest-a:hover, .suggest-a:focus-visible { background: var(--bg-soft); text-decoration: none; }
.suggest-img { flex: none; inline-size: 40px; block-size: 40px; object-fit: cover; border-radius: var(--radius-sm); }
.suggest-label { flex: 1; min-inline-size: 0; }
.suggest-price { font-weight: 600; white-space: nowrap; }
/* The field follows the page's direction, so its corners mirror with the row;
   what a buyer types still reads in its own direction. dir="auto" on the
   field turned an empty box left to right on an Arabic page. */
.search input {
  flex: 1; min-inline-size: 0; padding: 9px 14px; unicode-bidi: plaintext;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--pill);
}
.search-go {
  display: inline-flex; padding: 8px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
}
.head-end { grid-area: end; display: flex; align-items: center; gap: 10px; }
.head-end .cart-link { color: var(--muted); }

.cart-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative; min-inline-size: 44px; min-block-size: 44px;
}
.cart-link:hover { text-decoration: none; }
.cart-count {
  min-inline-size: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent);
  font-size: .74rem; font-weight: 700; line-height: 20px; text-align: center;
}
.cart-total { display: none; font-size: .9rem; font-weight: 600; }

.locales { display: flex; gap: 6px; }
/* inline-flex, not inline: an inline box's vertical padding paints without
   sizing the line it sits on, so the current locale's pill hung below the row
   and below the wrapper the editor draws its box on. */
/* Every one of these is something a thumb presses, so every one of them takes
   the 44px floor. The height is a minimum and not a size: the rows they sit in
   are already taller, so nothing moves and the target is real. */
.locale {
  display: inline-flex; align-items: center; min-block-size: 44px;
  font-size: .84rem; color: var(--muted); padding: 4px 8px; border-radius: var(--radius-sm);
}
.locale.is-here { color: var(--text); background-color: var(--bg-soft); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Navigation: one section type, four patterns, one tree in the markup.

   The floor is native. A dropdown root is a <details>, a small-width opener is
   a checkbox inside its own <label>, and the rail's flyout is a hover and
   focus-within panel, which is why the rail's roots are links and not
   disclosures: a <details> cannot be opened by a pointer resting on it, and
   the rail opens on hover. The opener carries no id because a merchant running
   a bar on desktop beside tabs on the phone has two of these on one page, and
   two ids named alike would make the second label open the first menu. The
   enhancement layer (assets/theme.js) adds one-at-a-time, Escape and
   outside-click over the disclosures, and nothing else.
   --------------------------------------------------------------------------- */
.nav { position: relative; border-block-start: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.nav-body { flex: 1; min-inline-size: 0; }
.nav-roots, .nav-list, .nav-deep { list-style: none; margin: 0; padding: 0; }
/* On a phone a row nav is one row that scrolls (behaviour section 4). Wider,
   a dropdown row takes a second line: a scroll strip clips its dropdowns. */
.nav-roots { display: flex; gap: 2px; min-inline-size: 0; }
}
@media (min-width: 768px) {
@layer theme { .nav-roots { flex-wrap: wrap; }
} 
}
@layer theme {
.nav-li { min-inline-size: 0; }

.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; list-style: none;
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link:hover { background: var(--bg-soft); text-decoration: none; }
/* The current page, marked twice over because one mark does not fit both
   shapes: a rule under the word down a ROW of words, and a tinted cell down a
   column, where a rule would read as a divider. */
.nav-link.is-here { font-weight: 700; color: var(--mark-ink); background: var(--mark-cell); }
.nav-branch[open] > .nav-link { background: var(--bg-soft); }
.nav-branch[open] > .nav-link .ico-down { transform: rotate(180deg); }

/* A panel hangs off the bar it belongs to: square where they meet, rounded
   where they part, and pulled up by the hairline's width so the two read as
   one piece. */
.nav-panel {
  min-inline-size: 13rem; padding: 6px;
  background-color: var(--surface);
}
.nav-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: .86rem;
}
.nav-sub:hover { background: var(--mark-cell); color: var(--mark-ink); text-decoration: none; }
.nav-sub.is-here { color: var(--mark-ink); font-weight: 700; }
.nav-deep { padding-inline-start: 12px; }
.nav-deep .nav-sub { font-size: .82rem; color: var(--muted); }
.nav-panel-head {
  margin: 0 0 6px; padding-inline: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: calc(.04em * var(--track-scale, 1));
  text-transform: uppercase; color: var(--muted);
}
.nav-n { font-size: .8rem; color: var(--muted); flex: none; }

.nav-row > .nav-opener {
  display: none; align-items: center; gap: 8px; flex: none; cursor: pointer;
  padding: 0 16px; font-size: .92rem; font-weight: 600; line-height: 1.25;
  border: 1px solid currentColor; color: var(--text); border-radius: var(--pill);
  min-block-size: var(--control);
}
.nav-opener:has(.nav-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* The shared small-width panel: the drawer the dropdown bar and the standing
   rail both collapse into, dropping under the bar rather than sliding in from
   the edge, because a sheet that covers the page needs a scrim to leave and a
   scrim needs a second label for one checkbox. */
@media (max-width: 1023px) {
@layer theme {
  .nav[data-layout="dropdown-bar"] .nav-row > .nav-opener,
  .nav[data-layout="standing-rail"] .nav-row > .nav-opener { display: flex; }
  .nav[data-layout="dropdown-bar"] .nav-body,
  .nav[data-layout="standing-rail"] .nav-body { display: none; }
  .nav[data-layout="dropdown-bar"]:has(.nav-toggle:checked) .nav-body,
  .nav[data-layout="standing-rail"]:has(.nav-toggle:checked) .nav-body {
    display: block; position: absolute; inset-inline: 0; inset-block-start: 100%;
    z-index: 45; max-block-size: 72vh; overflow-y: auto; padding: 8px;
    background-color: var(--surface); border-block-end: 1px solid var(--line);
    box-shadow: var(--pop);
  }
  .nav[data-layout="dropdown-bar"] .nav-roots,
  .nav[data-layout="standing-rail"] .nav-roots { flex-direction: column; }
  .nav[data-layout="dropdown-bar"] .nav-link,
  .nav[data-layout="standing-rail"] .nav-link { justify-content: var(--align, space-between); }
  .nav[data-layout="standing-rail"] .nav-panel { padding-inline-start: 14px; }
  .nav[data-layout="standing-rail"] .nav-panel-head { display: none; }
  .nav[data-layout="standing-rail"] .nav-link .ico-down { display: none; }
}

}
@layer theme {

/* Flat bar: roots only, one row. Under the desktop width the row becomes a
   scrolling rail of pills, the current one filled, and its trailing edge fades
   so the row says it scrolls; the fade flips with the text direction because
   the trailing edge does. */
.nav[data-layout="flat-bar"] .nav-roots { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav[data-layout="flat-bar"] .nav-roots::-webkit-scrollbar { display: none; }
}
@media (max-width: 1023px) {
@layer theme {
  .nav[data-layout="flat-bar"] .nav-row { padding-block: 8px; }
  .nav[data-layout="flat-bar"] .nav-roots { gap: 6px; }
  .nav[data-layout="flat-bar"] .nav-link {
    flex: none; padding: 8px 14px; font-size: .86rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill);
  }
  .nav[data-layout="flat-bar"] .nav-link.is-here {
    background: var(--fill); color: var(--on-fill);
    border-color: var(--fill); box-shadow: none;
  }
}

}

/* Dropdown bar: each root with children drops one column under itself, joined
   to the bar's own hairline. */
@media (min-width: 1024px) {
@layer theme {
  .nav[data-layout="flat-bar"] .nav-link.is-here,
  .nav[data-layout="dropdown-bar"] .nav-link.is-here { color: inherit; background: none; border-radius: 0; box-shadow: inset 0 -2px 0 var(--mark-line); }
  .nav[data-layout="dropdown-bar"] .nav-li { position: relative; }
  .nav[data-layout="dropdown-bar"] .nav-panel {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 45;
    margin-block-start: -1px; max-block-size: 70vh; overflow-y: auto;
    border: 1px solid var(--line);
    border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
    box-shadow: var(--pop);
  }
}

}

/* Standing rail: not a band but a SIDE of the page.
   
   The rail takes a column of its own from under the header to the top of the
   footer, always in view, and every other band keeps the full width. That
   needs the header's landmark to stop boxing its own children, so its sections
   become items of the page grid beside the rail; the landmark keeps its role,
   the hairline moves onto the bar that was carrying the header's edge, and the
   frame's own class hooks are what the theme is answering (engine spec
   section 1).

   A root's children then cover the whole content column, because that is the
   pattern: the rail is the constant, and the panel is the answer. */
@media (min-width: 1024px) {
@layer theme {
  body:has(.nav[data-layout="standing-rail"]) {
    --rail: 16rem;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    align-content: start;
    /* The page is the panel's ruler: the content column is the page's inline
       size less the rail, which no viewport unit can say once a scrollbar is
       on screen. */
    container-type: inline-size;
  }
  body:has(.nav[data-layout="standing-rail"]) > *,
  .head:has(.nav[data-layout="standing-rail"]) > * { grid-column: 1 / -1; }
  .head:has(.nav[data-layout="standing-rail"]) { display: contents; }
  .head:has(.nav[data-layout="standing-rail"]) > div:has(> .head-row) {
    border-block-end: 1px solid var(--line);
  }
  .head > div:has(> .nav[data-layout="standing-rail"]) { grid-column: 1; position: relative; }
  body:has(.nav[data-layout="standing-rail"]) > .main { grid-column: 2; }

  .nav[data-layout="standing-rail"] { position: static; block-size: 100%; border-block-start: 0; }
  .nav[data-layout="standing-rail"] .nav-rail,
  .nav[data-layout="standing-rail"] .nav-row,
  .nav[data-layout="standing-rail"] .nav-body { block-size: 100%; }
  .nav[data-layout="standing-rail"] .nav-row {
    display: block; max-inline-size: none; padding-inline: 0;
  }
  .nav[data-layout="standing-rail"] .nav-roots {
    flex-direction: column; block-size: 100%; padding-block: 10px;
    background-color: var(--bg-soft); border-inline-end: 1px solid var(--line);
  }
  .nav[data-layout="standing-rail"] .nav-li { position: static; }

  /* The two states a row can be in say two different things, so they are drawn
     two different ways: WHERE YOU ARE is a bar at the row's leading edge, and
     WHAT YOU ARE POINTING AT is a quiet ground the panel's own surface
     continues out of. A row that is both keeps its bar. Both read the ladder,
     so a repainted menu keeps them as geometry and contrast rather than as the
     theme's hue (theme-engine.md section 3). */
  .nav[data-layout="standing-rail"] .nav-link {
    justify-content: var(--align, space-between);
    padding: 11px 18px; padding-inline-start: 15px; border-radius: 0;
    border-inline-start: 3px solid transparent;
    font-size: .9rem;
  }
  .nav[data-layout="standing-rail"] .nav-link .ico-down {
    color: var(--muted); transform: rotate(-90deg);
  }
  [dir="rtl"] .nav[data-layout="standing-rail"] .nav-link .ico-down { transform: rotate(90deg); }
  .nav[data-layout="standing-rail"] .nav-link.is-here {
    background: none; color: var(--mark-ink); font-weight: 700;
    border-inline-start-color: var(--mark-line);
  }
  /* The open row takes the panel's own surface and lets go of the edge
     between them, so the row and what it opened read as one piece. */
  .nav[data-layout="standing-rail"] .nav-li:hover > .nav-link,
  .nav[data-layout="standing-rail"] .nav-li:focus-within > .nav-link {
    background-color: var(--surface); color: var(--text);
    margin-inline-end: -1px; border-inline-end: 1px solid var(--surface);
  }
  .nav[data-layout="standing-rail"] .nav-li:hover > .nav-link.is-here,
  .nav[data-layout="standing-rail"] .nav-li:focus-within > .nav-link.is-here {
    color: var(--mark-ink);
  }
  .nav[data-layout="standing-rail"] .nav-li:hover > .nav-link .ico-down,
  .nav[data-layout="standing-rail"] .nav-li:focus-within > .nav-link .ico-down {
    color: var(--mark-ink);
  }

  .nav[data-layout="standing-rail"] .nav-panel {
    display: none; position: absolute; inset-block: 0;
    inset-inline-start: 100%; inline-size: calc(100cqi - var(--rail));
    z-index: 40; overflow-y: auto; padding: 30px 34px;
    background-color: var(--surface); border-inline-start: 1px solid var(--line);
  }
  .nav[data-layout="standing-rail"] .nav-li:hover > .nav-panel,
  .nav[data-layout="standing-rail"] .nav-li:focus-within > .nav-panel { display: block; }
  /* Hover intent: a root the pointer just left keeps its panel a moment, and
     no other root's panel opens under a pointer only passing by. Escape puts
     a panel away even while focus stays on its root. */
  .nav[data-layout="standing-rail"] .nav-li.is-held > .nav-panel { display: block; }
  .nav[data-layout="standing-rail"].is-steering .nav-li:not(.is-held) > .nav-panel { display: none; }
  .nav[data-layout="standing-rail"] .nav-li.is-dismissed > .nav-panel { display: none; }
  .nav[data-layout="standing-rail"] .nav-panel-head {
    margin: 0 0 20px; padding: 0 0 12px;
    border-block-end: 1px solid var(--line);
    font-size: .78rem; letter-spacing: calc(.1em * var(--track-scale, 1));
  }

  /* Columns of a directory, not a list of equal links: a child that has
     children of its own heads its column, and its own children are the
     column. Nothing here wears a filled row, because a filled row as wide as
     a column is a button nobody pressed. */
  .nav[data-layout="standing-rail"] .nav-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 26px 34px; align-content: start;
  }
  .nav[data-layout="standing-rail"] .nav-sub {
    display: block; padding: 5px 0; border-radius: 0;
    font-size: .86rem; color: var(--muted);
  }
  .nav[data-layout="standing-rail"] .nav-sub:hover { background: none; color: var(--mark-ink); }
  .nav[data-layout="standing-rail"] .nav-sub.is-here { color: var(--mark-ink); font-weight: 700; }
  .nav[data-layout="standing-rail"] .nav-list > li > .nav-sub {
    font-size: .92rem; font-weight: 600; color: var(--text); padding-block-start: 0;
  }
  .nav[data-layout="standing-rail"] .nav-list > li:not(:has(.nav-deep)) > .nav-sub {
    font-weight: 500;
  }
  .nav[data-layout="standing-rail"] .nav-list > li:has(.nav-deep) > .nav-sub {
    margin-block-end: 6px; padding-block-end: 8px;
    border-block-end: 1px solid var(--line);
  }
  .nav[data-layout="standing-rail"] .nav-deep { padding-inline-start: 0; }
  .nav[data-layout="standing-rail"] .nav-deep .nav-sub { font-size: .84rem; }
}

}
@layer theme {

/* Bottom tabs: three destinations within thumb reach on a phone, and the same
   tree as a dropdown bar on anything wider. The tab bar is fixed to the
   viewport bottom, which section 3 allows a section to do inside its own
   markup, and it clears the phone's own home indicator. */
.nav[data-layout="bottom-tabs"] .nav-bar { display: none; }
}
@media (min-width: 768px) {
@layer theme {
  .nav[data-layout="bottom-tabs"] .nav-link.is-here {
    color: inherit; background: none; border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--mark-line);
  }
  .nav[data-layout="bottom-tabs"] .nav-li { position: relative; }
  .nav[data-layout="bottom-tabs"] .nav-panel {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 45;
    margin-block-start: -1px; max-block-size: 70vh; overflow-y: auto;
    border: 1px solid var(--line);
    border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
    box-shadow: var(--pop);
  }
}

}
@layer theme {
/* The bar's own height, declared once on the page that carries one: the sheet
   rests on top of it and the page ends above it. */
body:has(.nav[data-layout="bottom-tabs"]) { --tabs: calc(56px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
@layer theme {
  /* The WRAPPER is what goes to the foot of the viewport, not the bar inside
     it: the editor draws its selection box on the wrapper, and a bar pinned
     out of a wrapper left behind in the header is a section a merchant can see
     and cannot point at. */
  .head > div:has(> .nav[data-layout="bottom-tabs"]) {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
  }
  .nav[data-layout="bottom-tabs"] {
    background-color: var(--surface);
    box-shadow: 0 -10px 30px -22px rgb(0 0 0 / .8);
  }
  .nav[data-layout="bottom-tabs"] .nav-row { display: none; }
  .nav[data-layout="bottom-tabs"] .nav-bar {
    display: flex; padding-block: 4px;
    padding-block-end: calc(4px + env(safe-area-inset-bottom));
  }
  .nav[data-layout="bottom-tabs"] .nav-body {
    display: none; position: fixed; inset-inline: 0; inset-block-end: var(--tabs);
    z-index: 49; max-block-size: 66vh; overflow-y: auto; padding: 8px;
    background-color: var(--surface); border-block-start: 1px solid var(--line);
    border-start-start-radius: var(--radius); border-start-end-radius: var(--radius);
    box-shadow: var(--pop);
  }
  .nav[data-layout="bottom-tabs"]:has(.nav-toggle:checked) .nav-row { display: block; }
  .nav[data-layout="bottom-tabs"]:has(.nav-toggle:checked) .nav-body { display: block; }
  .nav[data-layout="bottom-tabs"] .nav-roots { flex-direction: column; }
  .nav[data-layout="bottom-tabs"] .nav-link { justify-content: var(--align, space-between); }
  /* The page ends above the bar rather than under it. */
  body:has(.nav[data-layout="bottom-tabs"]) { padding-block-end: var(--tabs); }
}

}
@layer theme {
.tab-a {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  min-block-size: 48px; padding: 4px 2px; cursor: pointer;
  font-size: .68rem; font-weight: 600; color: var(--muted); text-align: center;
}
.tab-a:hover { text-decoration: none; }
.tab-a .ico { inline-size: 21px; block-size: 21px; }
.tab-a:has(.nav-toggle:checked) { color: var(--mark-line); }
.tab-a:has(.nav-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-a .nav-n {
  position: absolute; inset-block-start: 0; inset-inline-start: 55%;
  min-inline-size: 18px; padding: 0 5px; border-radius: var(--pill);
  background: var(--accent-fill); color: var(--on-accent);
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* footer.
   Each footer section is a full-bleed band that carries its own ground and its
   own vertical room, so a tone paints edge to edge and a hidden band leaves
   nothing behind. The landmark holds no padding of its own for that reason. */
.foot {
  display: flex; flex-direction: column;
  border-block-start: 1px solid var(--line); background: var(--bg-soft);
}
.foot-main { padding-block: var(--tk-spacing-xl) var(--tk-spacing-md); }
.foot-legal { padding-block: var(--tk-spacing-md); }
.foot-grid { display: grid; gap: var(--tk-spacing-lg); }
.foot-store { font-weight: 700; margin-block-end: 8px; }
.foot-rt { font-size: .93rem; }
.foot-contact { display: grid; gap: 4px; margin-block-start: 10px; font-size: .93rem; color: var(--muted); }
.foot-links { display: grid; gap: 8px; font-size: .95rem; }
/* A link in a list is a target a finger has to find, unlike a link inside a
   sentence: give each one a row tall enough to hit. */
.foot-links a, .foot-contact a, .line-title { display: inline-block; min-block-size: 24px; }
.brand-line a, .rating a { display: inline-flex; align-items: center; min-block-size: 26px; }
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }
.social-a {
  display: inline-flex; padding: 8px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted);
}
.social-words { align-items: center; gap: 6px; padding-inline: 12px; font-size: .85rem; }
.social-a:hover { color: var(--mark-ink); border-color: var(--mark-line); }
.contact { display: grid; gap: 10px; align-content: start; }
.contact .btn { justify-self: start; }
.foot-end {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--muted);
}

/* page heads */
.page-head { display: grid; gap: 10px; }
.hero { border-radius: var(--radius); overflow: hidden; }
.hero-img { inline-size: 100%; block-size: clamp(140px, 26vw, 260px); object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--pill); font-size: .88rem; background: var(--surface);
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }

.crumbs { font-size: .86rem; color: var(--muted); }
/* The trail is one run of words: each link holds together, and the page's own
   step wraps word by word after its separator, instead of dropping whole to a
   line that starts with a slash. */
.crumbs ol { display: block; }
/* D11: a crumb and the separator after it are one box, so a crumb that wraps
   starts its line with its own word and the separator ends the line before. */
.crumbs li { display: inline-flex; align-items: last baseline; max-inline-size: 100%; }
.crumbs li > * { min-inline-size: 0; }
.crumbs a { display: inline-block; max-inline-size: 100%; }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline: 8px; opacity: .5; }

/* A control that exists for the floor alone steps aside once script runs. */
.js .js-optional { display: none; }
.sort { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sort label { font-size: .86rem; color: var(--muted); }
.sort select { padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* category strip */
.cat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: 6px; }
.cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; scroll-snap-align: start; }
.cat:hover { text-decoration: none; }
.cat-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.cat-img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The host's placeholder is a second picture under the real one while it
   loads, never a background on a style attribute. A logo keeps none: its box
   is the link's, larger than the picture. */
:has(> .ph-img) { position: relative; }
/* The placeholder takes its frame's padding, so it paints in the box the photo
   paints in, whatever padding a look gives the frame. */
.ph-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: inherit; object-fit: cover; border-radius: inherit; }
.ph-img + img { position: relative; }
.brand > .ph-img { display: none; }
/* Transparent, not hidden: its description still names the missing photo. */
.ph-img + img[data-gone] { opacity: 0; }
}
/* With script the file field is the theme's button and the chosen file's name. */
.js .field-file .file-in {
  position: absolute; inline-size: 1px; block-size: 1px; min-inline-size: 0; min-block-size: 0;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@layer theme {
/* The file button is the look's own quiet button (D14); without script it is
   the plain label of the browser's control. */
.file-control { display: contents; }
.field-file .file-pick { justify-self: start; align-self: start; cursor: pointer; }
:root:not(.js) .field-file .file-pick { display: block; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; }
.js .field-file:has(.file-in:focus-visible) .file-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-file .file-name { max-inline-size: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; color: var(--muted); }
/* A tiny placeholder's shape is rounded, so under a contained photo it would
   show past the photo's edges. */
.ph-img:has(+ img[data-shown]) { visibility: hidden; }
/* A placeholder takes its photo's fit, so a contained photo loads over its own
   blurred copy and leaves no halo once it has. */
[data-fit="contain"] .ph-img { object-fit: contain; object-position: 50% 50%; }
.strip-hero-media .ph-img { object-fit: cover; object-position: 50% 50%; }
.cat-name { font-weight: 600; font-size: .95rem; }
.cat-count { font-size: .82rem; color: var(--muted); }

/* product grid */
/* The listing is one grid and every card is a subgrid of it, so the tiles of a
   row share row lines. The brand, the rating, the stock line and the tile's
   own form are each optional per product, and without shared lines a row's
   titles start and its prices and buttons land at different heights depending
   on which facts each product happens to carry.
   Row gap is zero and the slots carry their own spacing, so a slot no product
   in the band fills costs the band nothing.
   The gap and the column count are set on the section, so every product
   section on a page, a scrolling row included, shares one card width; a
   section's own columns or density setting is the only thing that moves it. */
:root { --grid-gap: 14px; --cols: 2; }
}
@media (min-width: 768px) {
@layer theme { :root { --cols: 3; }
} 
}
@media (min-width: 1024px) {
@layer theme { :root { --cols: 4; }
} 
}
@layer theme {
.grid {
  --card-rows: 7;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 0;
}
/* The grid's own item, which is the card in a section that renders its cards
   directly and the engine's block wrapper in one built from blocks
   (theme-engine.md section 3). Either way it spans the seven slots and passes
   them on, so a strip of picked products lines up like a listing does. */
.grid > * { grid-row: span var(--card-rows); display: grid; grid-template-rows: subgrid; padding-block-end: 16px; }
.grid > * > .card { grid-row: 1 / span var(--card-rows); display: grid; grid-template-rows: subgrid; }
/* A form inside the anchor is not a form a browser will submit, so it sits
   beside it, on the card's own last row. */
.card-a { grid-row: 1 / span 6; display: grid; grid-template-rows: subgrid; }
.card-media { grid-row: 1; }
.card-brand { grid-row: 2; }
.card-title { grid-row: 3; }
.card-rate { grid-row: 4; }
.card-price { grid-row: 5; }
.card-stock { grid-row: 6; }
.card-add, .card-order, .card-sold { grid-row: 7; margin: 8px 0 0; }
/* One button per card, the one its section's `add` setting names. A sold-out
   card keeps the slot with a disabled-looking button that says so, so a row
   of cards stays one shape. */
.card-order, .card-sold { display: none; inline-size: 100%; }
[data-add="order"] .card-order, :is([data-add="order"], [data-add="shown"]) .card-sold { display: flex; }
/* A sold-out card says so once: on its button where it has one (D4). */
:is([data-add="order"], [data-add="shown"]) .card[data-out] :is(.tag-out, .card-stock) { display: none; }
}
/* D13: the dead control is a muted fill with no outline, so it never reads as
   the live secondary, which is the outline in full ink. */
.card-sold, .card-sold:hover {
  background: var(--bg-soft); border-color: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default; filter: none; text-decoration: none;
}
/* A dead control is quiet in every dressing (D13). */
.btn:is(:disabled, [aria-disabled="true"]), .btn:is(:disabled, [aria-disabled="true"]):hover {
  background-color: var(--bg-soft); background-image: none; border-color: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default; filter: none;
}
@layer theme {
/* The action's word fits its card: it shrinks with the card's column down to
   the card's body size and never breaks inside itself. The grid is the
   container; a card cannot be one without leaving its row's shared lines. */
.grid { container-type: inline-size; }
:is(.card-order, .card-sold, .card-add .btn) {
  font-size: clamp(.8125rem, (100cqi - (var(--cols) - 1) * var(--grid-gap)) / var(--cols) * .095, 1rem);
  white-space: nowrap; padding-inline: 12px;
}
[data-add="order"] .card-add { display: none; }
.card-brand, .card-title, .card-rate, .card-price, .card-stock { margin-block-start: 6px; }

/* The listing's density, which is the one shape a merchant chooses and what
   the compact preset writes as its default (docs/theme-editor.md section 8). */
[data-density="dense"] { --grid-gap: 8px; }
[data-density="dense"] { --cols: 3; }
}
@media (min-width: 768px) {
@layer theme { [data-density="dense"] { --cols: 5; }
} 
}
@media (min-width: 1024px) {
@layer theme { [data-density="dense"] { --cols: 6; }
} 
}
@layer theme {
[data-density="dense"] .grid > * { padding-block-end: 10px; }
[data-density="dense"] .card-title { font-size: 13px; }
.card-a:hover { text-decoration: none; }
.card-a:hover .card-title { color: var(--ink-strong); }
.card-media {
  position: relative; display: block; aspect-ratio: 1 / 1;
  border-radius: var(--radius); overflow: hidden;
  /* The plate's size is its frame's, never its content's: a photo that fails
     to load must not stretch it past its card (D3). */
  min-inline-size: 0; min-block-size: 0;
}
.card-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card-a:hover .card-img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  .card-a:hover .card-img { transition: transform .3s var(--ease); }
}

}
@layer theme {
.tags { position: absolute; inset-block-start: 8px; inset-inline: 8px; display: grid; gap: 4px; justify-items: start; }
/* A badge is one line; on a narrow card its words end in an ellipsis rather
   than take a second line. */
.tag {
  display: inline-block; flex-shrink: 0; padding: 3px 8px; border-radius: var(--pill);
  max-inline-size: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .72rem; font-weight: 700; letter-spacing: calc(.01em * var(--track-scale, 1));
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
/* The chip's words keep their own direction in a box the chip bounds, so a
   long label ends in an ellipsis inside its card and never past it. */
.tag > bdi { display: block; overflow: hidden; text-overflow: ellipsis; }
}
/* D1a: every chip on a page is one height, beside a price as on a photo and
   in either script, so its line is a length and not the page's leading. */
/* A soft chip's tint can match its ground, a photo's plate or a page, so every
   chip draws its edge in its own ink, the dead button's device (D1a). */
.tag {
  padding-block: 3px; line-height: 18px;
  outline: 1px solid color-mix(in srgb, currentColor 40%, transparent); outline-offset: -1px;
}
/* D20a: an unselected choice tile draws its edge in its own ink, the chip's
   hairline, inside its tap reach, so it reads as a choice on any ground. */
:is([type="radio"], [type="checkbox"]).vh:not(:checked, :focus-visible, :disabled) + label:not(:has(> .swatch)) {
  outline: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  outline-offset: calc(-1px - var(--tap-inset, 0px));
}
/* D1a: a badge's colours come from its kind alone, through the look's
   tokens; a badge or tags setting shapes and places it and never colours it. */
.tag-cut { background-color: var(--cut-soft); color: var(--cut-ink); }
.tag-pick { background-color: var(--accent-fill); color: var(--on-accent); }
.tag-made { background-color: var(--accent-soft); color: var(--accent-ink); }
.tag-own { background-color: var(--accent-soft); color: var(--accent-ink); }
/* The plate stays light in dark mode, so the badge on it keeps the light pair. */
.tag-out { background: var(--tk-color-text); color: var(--tk-color-bg); }
@layer theme {
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-brand { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: calc(.04em * var(--track-scale, 1)); text-align: start; }
/* Start-aligned in its own direction, long or short, with the brand above it:
   Chrome draws a clamp's ellipsis only there, so a French title on an Arabic
   page still ends in one (D6). */
.card-title { font-size: .95rem; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: start; text-wrap: pretty; }
}
/* D6: the text block aligns as one to the title's start: the title's own
   words decide, and the brand, rating, price and stock line follow them. */
/* A price nobody can pay is never called out, whatever the price setting. */
.card[data-out] .card-price .now { color: var(--muted); }
/* An amount is one word, whatever space the host put inside it (D11). */
:is(.amt, .now, .was, .line-total, .order-total, .cart-total) { white-space: nowrap; }
.prod .buy[data-out] .price .now { color: var(--muted); }
form[data-express]:has(.fields[inert]) :is(.amt, [data-total], .now) { color: var(--muted); }
@layer theme {
.card:has(.card-title:dir(ltr)) :is(.card-brand, .card-rate, .card-price, .card-stock) { direction: ltr; }
.card:has(.card-title:dir(rtl)) :is(.card-brand, .card-rate, .card-price, .card-stock) { direction: rtl; }
/* start, not end: a price that wraps to two lines makes its slot taller for
   the whole band, and an end-aligned neighbour would then sit a line below it. */
.card-price { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; align-self: start; }
/* The struck price sits under the price on a phone and beside it wider, by
   the width and never by what one card's digits fit (D5). */
.card-price .was { flex-basis: 100%; }
}
@media (min-width: 768px) {
@layer theme {
  .card-price { flex-wrap: nowrap; }
  .card-price .was { flex-basis: auto; }
}

}
@layer theme {
.now { font-weight: 700; }
.was { color: var(--muted); font-size: .88rem; }

/* pager */
.pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-block-start: 32px; }
/* The empty stand-in for a missing step holds the other step at its end on a
   spread pager; on a centred one it would only push the step off centre. */
.pager > span:empty { display: none; }
.pager-list { display: flex; gap: 6px; }
.pager-n, .pager-step {
  display: inline-flex; align-items: center; gap: 6px; min-inline-size: 38px;
  justify-content: center; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .9rem;
}
.pager-n:hover, .pager-step:hover { border-color: var(--accent); text-decoration: none; }
.pager-n.is-here { background: var(--accent-fill); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
/* D11: a numbered pager is one row of controls; on a phone its steps keep
   their arrow and lend their word to assistive technology alone. */
[data-pager="numbered"] :is(.pager-n, .pager-step) { min-block-size: var(--control); min-inline-size: var(--control); padding-block: 0; }
@media (max-width: 479px) {
  [data-pager="numbered"] .pager { flex-wrap: nowrap; gap: 4px; }
  [data-pager="numbered"] .pager-list { gap: 4px; }
  [data-pager="numbered"] .pager-step { padding-inline: 0; }
  [data-pager="numbered"] .pager-step > [dir] {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
}

/* product page */
/* minmax(0, 1fr), matching the two-column rule further down: an auto column
   sizes to its content's minimum, and the thumbnail rail's minimum is four
   thumbs wide, so a carded gallery pushed the page sideways at 320px. */
.prod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* The gallery: a swiped strip with dots on a phone, stacked shots switched by
   thumbnails on a wide screen. Without script a dot or a thumbnail is a link
   and :target switches the shot; with script the shot switches by class and
   aria-current. The :target rules read only on a root not marked js, so the
   two markings can never disagree. Pinned by the browser lane's gallery facts. */
.shots { display: grid; border-radius: var(--radius); }
/* min-inline-size: 0, because a grid item refuses to shrink under its content
   and an image's content is its intrinsic width: at 320px, the reflow width,
   a carded gallery was 322px wide and scrolled the whole page sideways. */
.shot { grid-area: 1 / 1; min-inline-size: 0; position: relative; margin: 0; }
.shot-media, .shot .ph { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: color-mix(in srgb, var(--plate, var(--bg-soft)) 92%, var(--text)); }
}
/* A clip shows its whole frame, in the box a photo uses. The `fit` setting is
   the merchant's choice for their PHOTOS ("Cadrage des photos"), and a portrait
   rendition cropped to a 4/3 middle slice is not a crop anyone chose. The box
   does not change with it, or the gallery's height would move under a thumb
   mid-swipe, and the bars are the surface a letterboxed photo already sits on. */
/* A clip letterboxes onto the plate a photo sits on (behaviour section 4). */
video.shot-media { object-fit: contain; background-color: color-mix(in srgb, var(--plate, var(--bg-soft)) 92%, var(--text)); }
@layer theme {
.shot-n {
  position: absolute; inset-block-end: 10px; inset-inline-end: 10px;
  padding: 2px 10px; border-radius: var(--pill); font-size: .8rem;
  background: rgba(12, 14, 17, .62); color: #ffffff;
}
/* The dots are a 6px row 8px under the shots; each stays a 44px target that
   reaches over the room around its row rather than pushing the page down. */
.dots { display: flex; justify-content: center; flex-wrap: wrap; margin-block-start: 8px; }
.dot { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 28px; min-block-size: 44px; margin-block: -19px; }
.dot::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--line); }
.dot[aria-current="true"]::before { background: var(--shot-mark, var(--accent)); }
/* The strip scrolls, so it clips: its padding holds the shown thumb's ring and
   a focus outline, and its margin keeps the thumbs on the gallery's edge. */
.thumbs { display: flex; gap: 8px; margin: 5px -3px -3px; padding: 3px; overflow-x: auto; }
.thumb {
  position: relative; display: block; flex: none; inline-size: 64px;
  border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
}
.thumb:hover { border-color: var(--accent); }
.thumb-img { inline-size: 64px; block-size: 64px; object-fit: cover; }
.js img.shot-media { cursor: zoom-in; }
}

@media (max-width: 767px) {
@layer theme {
  .shots { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shot { flex: 0 0 100%; scroll-snap-align: center; }
  .thumbs { display: none; }
  /* Past the dots' limit the gallery draws a COUNTER instead of them, and a
     counter is not a control. The strip still swipes, and a swipe is not a
     link: the floor is that every shot is reachable by one
     (theme-behaviour.md section 4). So a gallery with no dots keeps its
     thumbnails here, and they scroll.

     A deep gallery on a phone offered nothing at all until a fixture went past
     eight panels: no way to the second shot, and none to the video. */
  .gallery:not(:has(.dots)) .thumbs { display: flex; }
}

}
@media (min-width: 768px) {
@layer theme {
  .dots, .shot-n { display: none; }
  /* Following a thumbnail without script scrolls the shot into view, and the
     header is sticky, so the shot stops below it rather than under it. */
  .shot { visibility: hidden; scroll-margin-block-start: calc(var(--head) + 60px); }
  :root:not(.js) .shot:first-child,
  :root:not(.js) .shot:target,
  .js .shot.is-current,
  .js .shots:not(:has(.is-current)) .shot:first-child { visibility: visible; }
  :root:not(.js) .shots:has(.shot:target) .shot:first-child { visibility: hidden; }
  /* One rule per position without script, because CSS cannot count: a deeper
     gallery still switches, it just stops marking which shot is open. */
  :root:not(.js) .gallery:has(.shot:nth-child(1):target) .thumbs li:nth-child(1) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(2):target) .thumbs li:nth-child(2) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(3):target) .thumbs li:nth-child(3) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(4):target) .thumbs li:nth-child(4) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(5):target) .thumbs li:nth-child(5) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(6):target) .thumbs li:nth-child(6) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(7):target) .thumbs li:nth-child(7) .thumb,
  :root:not(.js) .gallery:has(.shot:nth-child(8):target) .thumbs li:nth-child(8) .thumb,
  :root:not(.js) .gallery:not(:has(.shot:target)) .thumbs li:first-child .thumb,
  .js .thumb[aria-current="true"],
  .js .gallery:not(:has(.thumb[aria-current="true"])) .thumbs li:first-child .thumb {
    border-color: var(--shot-edge, var(--shot-mark, var(--accent)));
    box-shadow: var(--shot-ring, 0 0 0 2px var(--shot-mark, var(--accent)));
    opacity: 1;
  }
}

}
@layer theme {

/* A shot full size, in the browser's own modal dialog. */
.zoom { padding: 0; border: 0; background: transparent; max-inline-size: 100vw; max-block-size: 100vh; overflow: visible; }
.zoom::backdrop { background: rgba(12, 14, 17, .88); }
.zoom-img { display: block; max-inline-size: 96vw; max-block-size: 86vh; object-fit: contain; }
.zoom-close {
  position: fixed; inset-block-start: 12px; inset-inline-end: 12px;
  min-block-size: 44px; padding: 0 16px; border: 0; border-radius: var(--pill);
  background: #ffffff; color: #0c0e11; font: inherit; cursor: pointer;
}
.play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12, 14, 17, .42); color: #ffffff;
}

.buy { display: grid; gap: 12px; align-content: start; }
.brand-line { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: calc(.05em * var(--track-scale, 1)); }
.rating { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; color: var(--muted); }
.price { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.price .now { font-size: 1.6rem; }
.avail { font-size: .9rem; font-weight: 600; color: var(--accent); }
.avail-out_of_stock { color: var(--cut-ink); }
.avail-low_stock { color: #b3730a; }
.buy-form { display: grid; gap: 12px; padding: 16px; background: var(--bg-soft); border-radius: var(--radius); }
.field-narrow { max-inline-size: 140px; }
.sold-by { font-size: .88rem; color: var(--muted); }

.express, .reviews { padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.fields { display: grid; gap: 14px; margin-block: 16px; }
.field-wide { grid-column: 1 / -1; }
.review-list { display: grid; gap: 18px; margin-block-end: 28px; }
.review { padding: 14px 16px; background: var(--bg-soft); border-radius: var(--radius); }
.review-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: .9rem; }
.review-form { display: grid; gap: 12px; justify-items: start; max-inline-size: 640px; }

/* cart */
.cart { display: grid; gap: 26px; }
.lines { display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.line-media { display: block; inline-size: 76px; block-size: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.line-img { inline-size: 76px; block-size: 76px; object-fit: cover; }
.line-title { font-weight: 600; }
.line-total, .total-list dd, .ticket-line dd, .now, .was { white-space: nowrap; }
.line-total { font-weight: 700; }
.totals { display: grid; gap: 16px; align-content: start; padding: 18px; background-color: var(--bg-soft); border-radius: var(--radius); }
.total-list { display: grid; gap: 8px; }
.total-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.total-list dt { color: var(--muted); }
.total-list .is-grand { padding-block-start: 8px; border-block-start: 1px solid var(--line); font-size: 1.15rem; font-weight: 700; }
.total-list .is-grand dt { color: var(--text); }
.coupon { display: grid; gap: 10px; justify-items: start; }

/* Fields the platform grouped share a fieldset, laid on the form's own grid. */
.field-group { grid-column: 1 / -1; display: grid; gap: 14px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.field-group:not(:has(> :is(.field, .field-pair):not([hidden]))) { display: none; }
.field-pair { grid-column: 1 / -1; display: grid; gap: inherit; align-items: end; }
.field-pair > .field-narrow { max-inline-size: none; }
.field-legend { margin-block-end: 10px; padding: 0; font-weight: 700; }
.review-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); }

.line-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
}
/* On a phone the count takes a row and the two ways stack under it, full
   width, as two ways do everywhere (D22c). */
@media (max-width: 479px) {
@layer theme {
  .line-edit > .line-qty { display: contents; }
  .line-edit > .line-qty > :is(.field, .btn), .line-edit > .line-remove { flex-basis: 100%; }
  .line-edit .btn { inline-size: 100%; }
}

}
@layer theme {
.line-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.line-qty .field { display: block; }
.line-qty input { inline-size: 4rem; }
.line-remove { margin: 0; }
}
@media (min-width: 600px) {
@layer theme {
  .line-edit { grid-column: 2 / -1; }
}

}
@layer theme {
.empty-lede { margin: 0; max-inline-size: 36rem; }

/* The order confirmation: what happened, what happens next, and the way on. */
.done { display: grid; gap: 20px; margin-block-end: 26px; }
.done-head { display: grid; gap: 8px; justify-items: start; }
.done-mark { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
/* An order the platform has called stopped gets a neutral mark, not a coloured
   one: the accent circle reads as success on its own, whatever glyph is in it. */
.done-mark[data-mark="plain"] { background: var(--bg-soft); color: var(--muted); }
.done-mark .ico { inline-size: 26px; block-size: 26px; }
.done-title { margin: 0; font-size: 1.5rem; }
.done-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: done; }
.done-step { display: grid; align-content: start; gap: 4px; padding: 14px 16px; background: var(--bg-soft); border-radius: var(--radius); counter-increment: done; }
.done-step::before { content: counter(done); font-weight: 800; color: var(--accent); }
.done-step span { font-size: .92rem; color: var(--muted); }
.total-note { margin: 0; font-size: .88rem; color: var(--muted); text-align: end; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
}
/* Below 480px an order's next steps stack full width, in both languages (D22c). */
@media (max-width: 479px) {
@layer theme {
  .done-actions { display: grid; }
  .done-actions .btn { inline-size: 100%; }
}
}
@layer theme {

/* The ad page's foot: the store's line and its policy pages, and nothing else.
   Thin on purpose, because an ad page's one exit is the order. */
.landing-foot { border-block-start: 1px solid var(--line); background: var(--bg-soft); }
.landing-foot[data-tone="inverse"] { background: var(--inverse); color: var(--on-inverse); border-block-start-color: transparent; }
.landing-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.landing-foot-note { margin: 0; font-size: .88rem; }
.landing-foot-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; }
.landing-foot-ways svg { inline-size: 16px; block-size: 16px; }
.landing-foot-a { display: inline-flex; align-items: center; gap: 6px; }
.landing-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
/* Tap-size without a box: the padding is the target, and the line-height keeps
   the row thin while the link stays 44px tall. */
.landing-foot-a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: .88rem; }
.landing-foot[data-tone="inverse"] .landing-foot-a { color: var(--on-inverse); }

/* The offer after the receipt: one card and one button, narrow enough that it
   reads as an aside to the order rather than as a second listing. */
.upsell { --upsell-card: 260px; margin: 26px 0 0; display: grid; gap: 12px; }
.upsell-grid { grid-template-columns: minmax(0, var(--upsell-card)); }
.upsell-add { margin: 0; inline-size: min(100%, var(--upsell-card)); container-type: inline-size; }
/* D4: the word shrinks with its card, as a card's does, and never breaks. */
.upsell-add .btn { inline-size: 100%; white-space: nowrap; font-size: clamp(.75rem, 5cqi, 1rem); }
.upsell-note { margin: 0; font-size: .88rem; color: var(--muted); }
}
@media (min-width: 768px) {
@layer theme {
  .done-steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

}

@media (min-width: 600px) {
@layer theme {
  .cart-total { display: inline; }
  .cat-strip { grid-auto-columns: 27%; }
  .fields, .field-group { grid-template-columns: 1fr 1fr; }
  .field-pair { grid-template-columns: auto minmax(0, 1fr); }
  .field-pair:not(:has(> :not([hidden]) ~ :not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}

}

@media (min-width: 900px) {
@layer theme {
  .main { padding-block: 28px 72px; }
  .head-row { grid-template-columns: auto minmax(220px, 1fr) auto; grid-template-areas: "brand search end"; gap: 22px; }
  /* Column gap only: the grid's rows are the cards' own slots (see .card), so
     a row gap here would space every slot instead of every card. */
  :root { --grid-gap: 20px; }
  .grid > * { padding-block-end: 26px; }
  .cat-strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; }
  .prod { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
  .buy { position: sticky; inset-block-start: 22px; }
  .cart { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .totals { position: sticky; inset-block-start: 22px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; }
}

}
@layer theme {


/* Platform pages (render-context.md section 5.10): the platform's classless
   markup, placed by the platform-content section. The kits share one set of
   form measures, which tokens carry: a 12px medium label over a 38px field of
   14px text. The look's own choices (the heading's scale, the button's voice
   and fill, the labels' case, the column's width) arrive as this section's
   settings, and the heading takes the page heading's own scale rules. */
.platform { display: grid; gap: 16px; }
.platform[data-width="narrow"] { inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; }
.platform :where(h1, h2, h3, p, form, fieldset, table) { margin: 0; }
.platform :where(h2, h3) { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.platform :where(p) { font-size: .875rem; line-height: 1.25rem; color: color-mix(in srgb, var(--muted) 66%, var(--text)); }
/* A link inside a sentence, the platform's or the merchant's, has to read as a
   link: the look's accent ink, underlined. */
:is(.platform, .rt) :where(p, li, td) :where(a) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
:is(.platform, .rt) :where(p, li, td) :where(a):hover { text-decoration-thickness: 2px; }
.platform :where(form) { display: grid; gap: 12px; }
.platform :where(form p) { display: grid; gap: 4px; }
.platform :where(label) { display: block; font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--muted); }
.platform[data-labels="caps"] :where(label) { text-transform: uppercase; letter-spacing: calc(.08em * var(--track-scale, 1)); }
.platform :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea) {
  display: block; inline-size: 100%; min-block-size: 38px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: .875rem; line-height: 1.25rem;
}
.platform :where(select) {
  --tap-inset: 3px; display: block; inline-size: 100%; block-size: 44px; min-block-size: 44px; margin: -3px 0; padding: 0 16px;
  border: var(--tap-inset) solid transparent; border-inline-width: 0; border-radius: calc(var(--radius-sm) + var(--tap-inset));
  background-color: var(--surface); background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); font: inherit; font-size: .875rem;
}
.platform :where(button) {
  --tap-inset: 2px; justify-self: start; min-block-size: 44px; margin: -2px; padding: 0 24px;
  border: var(--tap-inset) solid transparent; border-radius: calc(var(--radius-sm) + var(--tap-inset)); background-clip: padding-box;
  background-color: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: .875rem; line-height: 1.25rem; cursor: pointer;
  font-weight: var(--tk-button-weight); text-transform: var(--tk-button-case); letter-spacing: calc(var(--tk-button-tracking) * var(--track-scale, 1));
}
.platform[data-buttons="pill"] :where(button) { border-radius: var(--pill); }
/* D14: on a phone a platform form's submit spans its form, as every primary does. */
@media (max-width: 479px) {
  .platform form :where(button[type="submit"]) { inline-size: calc(100% + 2 * var(--tap-inset)); }
}
.platform :where(fieldset) { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.platform :where(legend) { padding-inline: 6px; font-weight: 700; }
.platform :where(table) { inline-size: 100%; border-collapse: collapse; font-size: .875rem; }
.platform :where(th, td) { padding: 10px 0; border-block-end: 1px solid var(--line); text-align: start; }
.platform:is([data-scale="display"], [data-scale="bold"]) :where(h1) { text-align: center; }
.platform:is([data-scale="display"], [data-scale="bold"]) { row-gap: 32px; }

/* The composed sections: what a merchant writes rather than what the document
   fills. Their words come from settings, so their layout has to survive any
   length of them and any direction. */

.panel { display: grid; gap: 10px; padding-block: 8px; }
.panel-title { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.2; letter-spacing: calc(-.01em * var(--track-scale, 1)); }
.panel-body { margin: 0; max-inline-size: 66ch; color: var(--muted); }
.panel-points { display: grid; gap: 6px; }
.bullet { margin: 0; padding-inline-start: 18px; position: relative; }
.bullet::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent);
}
.panel-cta { justify-self: start; margin-block-start: 6px; }

.poster { position: relative; display: grid; gap: 12px; }
.poster-media { position: relative; }
.poster-media {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-soft); aspect-ratio: 16 / 7;
}
.poster-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.poster-ph { display: block; inline-size: 100%; block-size: 100%; }
.poster-title { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }

/* The focal point, stored as a setting and rendered as object-position
   (docs/theme-editor.md section 15). Physical on purpose: an image does not
   flip with the text direction. */
.poster[data-focal="top-left"] .poster-img { object-position: left top; }
.poster[data-focal="top"] .poster-img { object-position: center top; }
.poster[data-focal="top-right"] .poster-img { object-position: right top; }
.poster[data-focal="left"] .poster-img { object-position: left center; }
.poster[data-focal="center"] .poster-img { object-position: center center; }
.poster[data-focal="right"] .poster-img { object-position: right center; }
.poster[data-focal="bottom-left"] .poster-img { object-position: left bottom; }
.poster[data-focal="bottom"] .poster-img { object-position: center bottom; }
.poster[data-focal="bottom-right"] .poster-img { object-position: right bottom; }

.feature { display: grid; gap: 12px; }

/* The theme's tokens as the custom properties the engine's wrapper output
   references (docs/theme-editor.md section 11). A host serving a draft
   overrides any of them from the merchant's token panel; these are what
   stands when nothing does. TestEveryTokenHasACustomProperty pins the pair. */
:root {
  --tk-button-case: none;
  --tk-button-tracking: 0;
  --tk-button-weight: 700;
  --tk-color-accent: #0b6b4f;
  --tk-color-accent-ink: #08553f;
  --tk-color-accent-soft: #e2efe8;
  --tk-color-bg: #f1f4f1;
  --tk-color-bg-soft: #e5eae5;
  --tk-color-cut: #c0301c;
  --tk-color-cut-soft: #fbe9e5;
  --tk-color-inverse: #0a1712;
  --tk-color-line: #d9e0d9;
  --tk-color-line-strong: #b9c4bc;
  --tk-color-muted: #5c6862;
  --tk-color-on-inverse: #e8efe9;
  --tk-color-star: #d99413;
  --tk-color-success: #17744a;
  --tk-color-success-soft: #e4f3ea;
  --tk-color-surface: #ffffff;
  --tk-color-surface-2: #f7f9f7;
  --tk-color-text: #10201a;
  --tk-color-tint-a: #e7f1eb;
  --tk-color-tint-b: #ebe9f4;
  --tk-color-tint-c: #f9ebe7;
  --tk-color-tint-d: #f6f0e1;
  --tk-color-tint-e: #e6f0f4;
  --tk-color-tint-f: #edefe6;
  --tk-color-whatsapp: #1d8548;
  --tk-font-arabic: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-display: "Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-numerals: tabular-nums;
  --tk-font-size: 15px;
  --tk-font-weight: 450;
  --tk-layout-gutter: 16px;
  --tk-layout-control: 46px;
  --tk-layout-rhythm: clamp(32px, 6vw, 64px);
  --tk-layout-width: 1280px;
  --tk-radius-card: 16px;
  --tk-radius-control: 12px;
  --tk-radius-pill: 999px;
  --tk-shadow-card: 0 1px 1px rgba(16, 32, 26, .04), 0 8px 20px -14px rgba(16, 32, 26, .30);
  --tk-shadow-pop: 0 20px 50px -22px rgba(10, 23, 18, .45), 0 2px 6px rgba(10, 23, 18, .06);
  --tk-shadow-sticky: 0 -10px 30px -18px rgba(10, 23, 18, .5);
  --tk-spacing-lg: 28px;
  --tk-spacing-md: 16px;
  --tk-spacing-none: 0;
  --tk-spacing-sm: 10px;
  --tk-spacing-xl: 48px;
  --tk-spacing-xs: 6px;
}
}

/* The wrapper contract (theme-engine.md section 3), which the engine emits on
   every section and block and nothing else answers. Appearance colors arrive
   as custom properties, so they are declared non-inheriting: a section's
   background must not become every descendant's. */
@property --tk-appearance-background { syntax: "*"; inherits: false; }
@property --tk-appearance-text { syntax: "*"; inherits: false; }
@layer theme {

/* Only the wrapper: the engine emits every section and block as a div
   carrying the node's id, and the theme's own markup uses no other. */
div[id] {
  background-color: var(--tk-appearance-background);
  color: var(--tk-appearance-text);
}

[data-appearance-alignment="start"] { text-align: start; }
[data-appearance-alignment="center"] { text-align: center; }
[data-appearance-alignment="end"] { text-align: end; }

[data-appearance-padding="0"] { padding-block: var(--tk-spacing-none); }
[data-appearance-padding="1"] { padding-block: var(--tk-spacing-xs); }
[data-appearance-padding="2"] { padding-block: var(--tk-spacing-sm); }
[data-appearance-padding="3"] { padding-block: var(--tk-spacing-md); }
[data-appearance-padding="4"] { padding-block: var(--tk-spacing-lg); }
[data-appearance-padding="5"] { padding-block: var(--tk-spacing-xl); }
}

/* Per-breakpoint hiding: one rule per breakpoint of section 11, reading the
   single data-hide attribute that also serves editor ghosting and the
   auditor. */
@media (max-width: 767px) {
@layer theme { [data-hide~="mobile"] { display: none; }
} 
}
@media (min-width: 768px) and (max-width: 1023px) {
@layer theme { [data-hide~="tablet"] { display: none; }
} 
}
@media (min-width: 1024px) {
@layer theme { [data-hide~="desktop"] { display: none; }
} 
}
@layer theme {


/* ---------------------------------------------------------------------------
   The shapes a preset chooses.

   Everything below is a second look for a section the theme already had, or
   one of the three it gained, selected by the data-* attribute its component
   emits from a setting (docs/theme-editor.md section 11: settings never become
   arbitrary-value classes). A store that picks none of them renders exactly
   what it rendered before.
   --------------------------------------------------------------------------- */

/* An inverse ground, as tokens rather than literals, so the local names every
   other rule already reads keep working inside it. In dark mode the bars take
   the page's own dark ground family, so the page, the bars and the footer are
   one hue (D13). */
:root { --inverse-ground: var(--tk-color-inverse); --inverse-ink: var(--tk-color-on-inverse); }
[data-mode="dark"] { --inverse-ground: var(--surface); --inverse-ink: var(--text-own); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] { --inverse-ground: var(--surface); --inverse-ink: var(--text-own); }
}
[data-tone="inverse"] {
  --surface: var(--inverse-ground);
  --bg: var(--inverse-ground);
  --bg-soft: color-mix(in srgb, var(--inverse-ink) 8%, var(--inverse-ground));
  --text: var(--inverse-ink);
  --muted: color-mix(in srgb, var(--inverse-ink) 62%, var(--inverse-ground));
  --line: color-mix(in srgb, var(--inverse-ink) 16%, var(--inverse-ground));
  --accent-soft: color-mix(in srgb, var(--tk-color-accent) 28%, var(--inverse-ground));
  --accent: color-mix(in srgb, var(--tk-color-accent) 55%, var(--inverse-ink));
  --accent-fill: oklch(from var(--accent) calc(min(l, .52) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .52))) c h);
  --on-accent: oklch(from var(--accent) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .78) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h);
  background: var(--inverse-ground);
  color: var(--inverse-ink);
}

/* The landmark is the engine's, so it reads what the section inside it
   declared rather than a class the component cannot set. The footer's bands
   paint their own ground; all the landmark owes them is to drop the hairline
   a dark band does not need. */
.foot:has([data-tone="inverse"]) { border-block-start-width: 0; }

/* The utility strip: tagline at the start, the ways to reach the store at the
   end, wrapping rather than pushing the page sideways at 320px. */
.util { font-size: .75rem; }
.util-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 16px; padding-block: 0;
}
/* The strip paints 30px and its links stay 44px targets, reaching over the
   header's own padding; the strip paints above it so the tap lands here. */
.util { position: relative; z-index: 1; }
.util a { margin-block: -7px; }
.util-tag { margin: 0; color: var(--muted); }
.util-end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.util-a { display: inline-flex; align-items: center; min-block-size: 44px; gap: 5px; font-weight: 600; }
.util .ico { inline-size: 14px; block-size: 14px; }
.util .locale {
  --tap-inset: 10px;
  font-size: .8rem; padding-block: 0;
  border-block: var(--tap-inset) solid transparent; background-clip: padding-box;
  border-radius: calc(var(--pill) + var(--tap-inset));
}
}


/* The search-first header: the field takes the middle of the row on any screen
   wide enough to hold one, with its submit inside it rather than beside it. */
@media (min-width: 700px) {
@layer theme {
  .head-row[data-layout="search-first"] {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand search end";
  }
}

}
@layer theme {
.head-row[data-layout="search-first"] .search { max-inline-size: 40rem; }

/* A heading the page already carries visibly elsewhere. The h1 stays in the
   markup, because exactly one per page is the rule it answers. */
.page-head[data-display="hidden"] {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The circular category strip, and the accent rule that leads its heading. */
[data-tile="circle"] .cat-strip {
  grid-auto-flow: column; grid-auto-columns: 6rem;
  grid-template-columns: none; gap: 20px; overflow-x: auto;
  justify-content: start; padding: 8px;
}
[data-tile="circle"] .cat { justify-items: center; text-align: center; }
[data-tile="circle"] .cat-media {
  aspect-ratio: 1; inline-size: 4rem; border-radius: 999px;
  background-color: var(--accent-soft);
  outline: 1px solid var(--accent-soft); outline-offset: 0;
}
[data-tile="circle"] .cat:hover .cat-media { outline: 2px solid var(--accent); }
[data-tile="circle"] .cat-name { font-size: .8rem; font-weight: 500; line-height: 1.25; }
[data-tile="circle"] .cat-count { display: none; }
.cats[data-tile="circle"] {
  background: var(--bg-soft); border-radius: 24px;
  padding: 20px; border: 1px solid var(--line);
}

/* The words give the heading its baseline and the bar centres itself, so a
   "see all" beside it sits on the words (D7). */
[data-heading="rule"] .h-sec {
  display: flex; align-items: baseline; gap: 12px; font-size: 1.25rem;
}
[data-heading="rule"] .h-sec::before {
  content: ""; flex-shrink: 0; align-self: center;
  inline-size: 6px; block-size: 28px; border-radius: 999px;
  background: var(--accent);
}

/* Paging as two steps rather than a numbered list. */
[data-pager="steps"] .pager-list { display: none; }

/* Sections as blocks lifted off a tinted page, the product page's own shape. */
[data-surface="carded"] {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
[data-surface="carded"].prod { display: grid; gap: 18px; background: none; border: 0; box-shadow: none; padding: 0; }
[data-surface="carded"].prod > .gallery,
[data-surface="carded"].prod > .buy {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
}

/* The buy bar, where a preset asks for it. With script it knows where the buy
   box is, so it shows at every width once the box has scrolled away; without
   script it is a phone's fixed floor, since a wide page pinned from its first
   screen would be a bar in the way. */
.buybar { display: none; }
[data-buybar="sticky"] .buybar {
  align-items: center; justify-content: space-between; gap: 12px;
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
  margin: 0; padding-block: 10px; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background-color: var(--surface); border-block-start: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* D4: the bar's word is one line scaled to the bar, inside its gutter. */
[data-buybar="sticky"] .buybar { container-type: inline-size; }
[data-buybar="sticky"] .buybar .btn { flex-shrink: 0; white-space: nowrap; font-size: min(.875rem, 3.4cqi); }
}
@media (max-width: 479px) {
@layer theme { [data-buybar="sticky"] .buybar .btn { flex: 1 1 auto; }
} 
}
/* D14: on a phone a form's primary action spans its form, in every look,
   and the WhatsApp way under it is as full (D22c). */
@media (max-width: 479px) {
  main :is(form, .totals) .btn-buy:not(.card-order, .btn-sold) { flex: 1 1 100%; inline-size: 100%; margin-inline: calc(-1 * var(--tap-inset, 0px)); }
  main .buy .btn-wa { justify-self: stretch; inline-size: auto; }

}
@layer theme {
/* With script the bar waits until the buy box has scrolled away and steps
   aside over the footer, so nothing under it needs room kept. */
.js [data-buybar="sticky"] .buybar { display: flex; }
}
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  .js [data-buybar="sticky"] .buybar[data-moved] { transition: transform .2s ease, visibility .2s; }
}

}
@layer theme {
.js [data-buybar="sticky"] .buybar.is-away { transform: translateY(100%); visibility: hidden; }
}
@media (max-width: 1023px) {
@layer theme {
  [data-buybar="sticky"] .buybar { display: flex; }
  /* The bar is fixed, so the floor of the page has to make room for it or it
     sits on top of the last thing a reader scrolls to. The room goes inside
     the last footer band, which is what paints the ground down there. */
  :root:not(.js) body:has([data-buybar="sticky"]) .foot > :last-child > [data-tone] { padding-block-end: 88px; }
}

}
@layer theme {

/* The order form's closing row: what the buyer pays, beside the control that
   commits it. */
.express-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.express-end[data-summary="priced"] {
  justify-content: space-between;
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px 16px;
}
/* The total's row is a ticket row: its label at the start, its amount at the
   end, on its own line or beside the submit (D22a). */
.express-total { flex: 1 1 auto; margin: 0; }
/* A state word takes its own line, never the amount's place. */
.express-end > .avail { flex: 1 1 100%; }
.express-total .ticket-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; }
.express-total dd { margin: 0; font-size: 1.5rem; font-weight: 800; }

/* A banner that bleeds to the edge of the container rather than sitting in it. */
.poster[data-frame="bleed"] .poster-media {
  aspect-ratio: 16 / 6; border-radius: calc(var(--radius) * 1.7); overflow: hidden;
}
/* Words over an image, held by a scrim rather than by a shadow. A photograph
   a merchant uploads can be any brightness, and white on a text-shadow is
   readable over half of them; a gradient the words sit in is readable over
   all of them. The whole word block moves over the image, so a subheading is
   not stranded under it, and both follow the section's alignment. */
.poster[data-frame="bleed"] .poster-media::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .06));
}
.poster[data-frame="bleed"] .poster-words {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: grid; gap: 8px; padding: clamp(18px, 4vw, 40px);
  justify-items: var(--align, start); text-align: var(--align-text, start);
  color: #fff;
}
.poster[data-frame="bleed"] .poster-title { margin: 0; color: inherit; }
.poster[data-frame="bleed"] .poster-sub { margin: 0; color: inherit; max-inline-size: 34rem; opacity: .92; }

/* A picture at the bleed's width with the words UNDER it rather than over it.
   Words over a photograph need a scrim to stay readable, and a merchant who
   would rather not tint their own picture puts them below instead. */
.poster[data-frame="stacked"] .poster-media {
  aspect-ratio: 16 / 6; border-radius: calc(var(--radius) * 1.7); overflow: hidden;
}
.poster[data-frame="stacked"] .poster-words {
  display: grid; gap: 8px;
  justify-items: var(--align, start); text-align: var(--align-text, start);
}
.poster[data-frame="stacked"] .poster-sub { margin: 0; max-inline-size: 34rem; color: var(--muted); }

/* Every word a feature declares paints on every variant (theme-package.md
   section 7); the panel below restyles them, and never drops one. */
.feature-words { display: grid; gap: 8px; }
.feature-eyebrow {
  margin: 0; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1)); color: var(--accent-ink);
}
.feature-body { margin: 0; max-inline-size: 60ch; color: var(--muted); }
.feature-cta { justify-self: start; margin-block-start: 4px; }

/* The featured product as a card: the product first, the words beside it, on
   the soft ground, so the default preset reads as finished on its own. */
.feature[data-layout="card"] {
  display: grid; gap: 20px; align-items: center;
  grid-template-areas: "pick" "words";
  background: var(--bg-soft); border-radius: calc(var(--radius) * 1.7); padding: 20px;
}
.feature[data-layout="card"] .feature-words { grid-area: words; }
.feature[data-layout="card"] .feature-grid { grid-area: pick; grid-template-columns: minmax(0, 17rem); }
.feature[data-layout="card"] .h-sec { margin: 0; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.15; }
.feature[data-layout="card"] .feature-cta { background: var(--accent-fill); color: var(--on-accent); }
}
@media (min-width: 768px) {
@layer theme {
  .feature[data-layout="card"] { grid-template-areas: "pick words"; grid-template-columns: auto 1fr; gap: 40px; padding: 32px; }
}

}
@layer theme {

/* The skeleton a picker stands in with on the editor's canvas while nothing is
   picked: the shapes of what will come, no words (engine spec section 6). */
.ghost-line { display: block; block-size: .8em; inline-size: 80%; border-radius: var(--pill); background: color-mix(in srgb, var(--text) 9%, transparent); }
.ghost-short { inline-size: 45%; }
.card-ghost .ghost-line { margin-block-start: 10px; }
.cat-ghost .ghost-line { margin-block-start: 2px; }

/* The featured product as a panel: the words on the accent, the card on top. */
.feature[data-layout="panel"] {
  display: grid; gap: 20px; align-items: center;
  background: var(--accent-fill); color: var(--on-accent);
  border-radius: calc(var(--radius) * 1.7); padding: 28px;
}
}
@media (min-width: 768px) {
@layer theme {
  .feature[data-layout="panel"] { grid-template-columns: 1fr auto; padding: 40px; }
}

}
@layer theme {
/* Both words take the panel's own ink: the ladder above them is written for a
   light ground, and --accent-ink or --muted on the accent is a word nobody can
   read (1.1:1 before this). The eyebrow keeps full ink, as the sibling panel's
   already does: it is small and uppercase, so the size and the tracking carry
   the hierarchy and an opacity would put it back under 4.5:1. */
.feature[data-layout="panel"] .feature-eyebrow {
  margin: 0; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1)); color: currentColor;
}
.feature[data-layout="panel"] .h-sec {
  margin: 0; font-size: clamp(22px, 4vw, 38px); line-height: 1.1;
}
.feature[data-layout="panel"] .feature-body {
  margin: 0; max-inline-size: 34ch; color: currentColor; opacity: .9;
}
.feature[data-layout="panel"] .feature-cta {
  justify-self: start; margin-block-start: 6px;
  background: var(--surface); color: var(--accent); border-radius: var(--pill); font-weight: 700;
}
.feature[data-layout="panel"] .feature-grid {
  grid-template-columns: minmax(0, 17rem);
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow);
}

/* A category's row: ONE line of cards that scrolls sideways at every width,
   its column the grid's own, so its cards are the size of every other product
   card on the page; the next one shows in the gutter. */
.row-frame { position: relative; container-type: inline-size; }
.row-frame > * { --row-col: calc((100cqi - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)); }
/* The track reaches into the page's side gutter, so its edge fade lies over
   the gutter and never over a card in place, and a card comes to rest on the
   gutter line. */
.row-track {
  grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(var(--card-rows), auto);
  grid-auto-columns: var(--row-col);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-inline: contain;
}
.row-track::-webkit-scrollbar { display: none; }
.row-track > * { scroll-snap-align: start; }
.row-arrow {
  position: absolute; inset-block-start: calc(var(--row-col) / 2 - 22px);
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 1.5rem; line-height: 1;
}
.row-prev { inset-inline-start: -10px; }
.row-next { inset-inline-end: -10px; }
.row-arrow[hidden] { display: none; }
.ghost-head { inline-size: 12rem; block-size: 1.2rem; }

/* The curated strip: a heading with a subtitle, and one link away from it. */
.strip { display: grid; gap: 14px; }
/* "See all" sits on the title's baseline, subtitle or not (D7). */
.strip-head { display: flex; flex-wrap: wrap; align-items: first baseline; justify-content: space-between; gap: 12px; }
.strip-words .h-sec { margin: 0; }
.strip-sub { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.strip-more { flex-shrink: 0; font-weight: 600; color: var(--accent); }

.head:has(.util) .head-row .locales { display: none; }

/* The card inside the panel sits on its own surface, so it takes the page's
   text colour back from the accent the panel set. */
.feature[data-layout="panel"] .feature-grid { color: var(--text); }

/* A dark render turns the accent light so small controls stay legible on it,
   which is wrong for the one shape that fills a whole band with it: the panel
   takes the soft tint instead, and its call to action keeps the light accent
   it now sits against. */
[data-mode="dark"] .feature[data-layout="panel"] {
  background: var(--accent-soft); color: var(--text);
}
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .feature[data-layout="panel"] {
  background: var(--accent-soft); color: var(--text);
}
}
[data-mode="dark"] .feature[data-layout="panel"] .feature-cta {
  background: var(--accent-fill); color: var(--on-accent);
}
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .feature[data-layout="panel"] .feature-cta {
  background: var(--accent-fill); color: var(--on-accent);
}
}


/* ===========================================================================
   The canonical look.

   Everything above is the theme's structure: what each section is made of,
   which shapes a setting selects, and the rules that keep a row of tiles
   aligned. Everything below is what the theme LOOKS like, kept in one place so
   the two can be read apart. It reads tokens and the local names above, never
   a literal colour, so the token panel repaints all of it.
   =========================================================================== */

/* ---- type ---------------------------------------------------------------- */

/* The display face carries headings, prices and the wordmark; the body face
   carries everything a reader reads in sentences. A stack the font catalog
   does not name falls through to the fallbacks the catalog declares. */
h1, h2, h3,
.brand-name, .panel-title, .poster-title, .now, .line-total,
.ticket-title, .pack-title, .price .now {
  font-family: var(--tk-font-display, var(--tk-font-body));
  font-weight: 700;
  letter-spacing: calc(-.015em * var(--track-scale, 1));
}

/* Arabic takes its own face for every role, so the Latin pages never load it
   and an Arabic page never renders in a Latin face's fallback. */
[lang="ar"], [lang="ar"] :is(body, h1, h2, h3,
.brand-name, .panel-title, .poster-title, .now, .line-total,
.ticket-title, .pack-title, .is-grand dd, .failure-code) {
  font-family: var(--tk-font-arabic, var(--tk-font-body));
  letter-spacing: 0;
}

body { font-size: var(--tk-font-size); font-weight: var(--tk-font-weight); }
/* Grayscale smoothing, which every legacy theme's page sets on its body: the
   default subpixel rendering on a Mac draws the same glyphs a shade heavier. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.12; }
h2 { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.18; }

/* Prices sit in columns across a grid row, which they only do on a face that
   gives every digit the same width. */
.now, .was, .line-total, .total-list dd, .pack-price, .price {
  font-variant-numeric: var(--tk-font-numerals);
}

/* An accent word is not an accent fill: the fill passes contrast as a button
   and fails as small text, which is what the second accent token is for.
   The menu's own marks are not on this list: they are furniture and read the
   ladder, so a repainted menu says where you are in the merchant's ink
   (theme-engine.md section 3). */
.strip-more, .avail, .line-pack,
/* D22a: a reduction is one colour wherever a look prints it. */
.is-cut .amt { color: var(--accent-ink); }
.nav-link.is-here, .nav-sub.is-here, .foot .social-a:hover { color: var(--mark-ink); }

/* ---- the container's rhythm --------------------------------------------- */

/* The band between sections, which the engine's container owns and no section
   root may set (theme-engine.md section 3). It scales with the viewport, so it
   is not one of the six fixed spacing steps. */
.main > .wrap { gap: var(--band); }
.main { padding-block: var(--tk-spacing-lg) var(--band); }

/* ---- the tile tints ------------------------------------------------------ */

:root {
  --tint-a: var(--tk-color-tint-a);
  --tint-b: var(--tk-color-tint-b);
  --tint-c: var(--tk-color-tint-c);
  --tint-d: var(--tk-color-tint-d);
  --tint-e: var(--tk-color-tint-e);
  --tint-f: var(--tk-color-tint-f);
  --tile: var(--bg-soft);
}
[data-tint="a"] { --tile: var(--tint-a); }
[data-tint="b"] { --tile: var(--tint-b); }
[data-tint="c"] { --tile: var(--tint-c); }
[data-tint="d"] { --tile: var(--tint-d); }
[data-tint="e"] { --tile: var(--tint-e); }
[data-tint="f"] { --tile: var(--tint-f); }

.cat-media { background: var(--tile); }
}
/* D3: the photo sits on a plate. A look picks the plate's light ground through
   --plate; in dark mode the plate stays light, because a white product photo
   on a dark card is product photography and a dark band around it is a hole,
   and it is the light mode's soft ground, a step below white, so a page of
   plates is bright and not glaring. In light mode the plate takes the soft
   step of a ground (8% ink, as --ground-soft) so it stands 1.10:1 off its card. */
.card-media { background-color: color-mix(in srgb, var(--plate, var(--tile)) 92%, var(--text)); }
[data-mode="dark"] :is(.card-media, .prod .shot-media, .prod .thumb-img) { --plate: var(--tk-color-bg-soft); background-color: var(--plate); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] :is(.card-media, .prod .shot-media, .prod .thumb-img) { --plate: var(--tk-color-bg-soft); background-color: var(--plate); }
}
[data-mode="dark"] .cat-media .ph { --plate: var(--tk-color-bg-soft); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .cat-media .ph { --plate: var(--tk-color-bg-soft); }
}
[data-mode="dark"] .cat-mono { background-color: var(--tk-color-bg-soft); color: var(--tk-color-muted); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .cat-mono { background-color: var(--tk-color-bg-soft); color: var(--tk-color-muted); }
}
@layer theme {

/* ---- surfaces and controls ---------------------------------------------- */

/* D14: a look's button is its tokens alone: the corner, the weight, the case
   and the tracking; its size is the place's. */
.btn {
  border-radius: var(--pill); padding: 12px 20px;
  font-weight: var(--tk-button-weight); text-transform: var(--tk-button-case); letter-spacing: calc(var(--tk-button-tracking) * var(--track-scale, 1));
}
.btn-quiet { background: transparent; border-color: currentColor; color: var(--text); }
/* D14: on the ticket's dark head the secondary is the outline in its ink. */
:is([data-totals="ticket"], [data-surface="ticket"]) .ticket-head .btn-quiet {
  color: var(--inverse-ink); border-color: currentColor;
}
.btn-wa { background: transparent; border-color: currentColor; color: var(--whatsapp-ink); }
.btn-wa:hover { border-color: var(--whatsapp); }

.field input, .field select, .field textarea {
  border-color: var(--line-strong); padding: 12px 14px;
  color: var(--ink-on-surface);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field > label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: calc(.09em * var(--track-scale, 1)); color: var(--muted);
}

.chip, .locale, .pager-n, .pager-step { border-radius: var(--pill); }
.locale.is-here { background-color: var(--accent-soft); color: var(--accent-ink); }
.tag { border-radius: var(--pill); box-shadow: none; }

/* Availability as three coloured states with a dot, so a stock line reads
   before it is read. The states are the contract's own. */
.avail { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.avail::before {
  content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.avail-out_of_stock { color: var(--cut-ink); }
.avail-low_stock { color: #b3730a; }
.card-stock { color: var(--muted); }

/* Ratings in half-star steps: the filled row is clipped to the fill, so 4.4
   shows four stars and a bit rather than rounding to a glyph. */
.stars {
  position: relative; display: inline-block; letter-spacing: calc(.06em * var(--track-scale, 1));
  white-space: nowrap; font-size: .82rem;
  /* The empty half of a rating is an unfilled STAR, so it is drawn from the
     star's own colour rather than from a border token: on the dark ground a
     border is a hairline, and a shopper cannot count what they cannot see. */
  color: color-mix(in srgb, var(--star) 52%, var(--bg));
}
.stars i {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  overflow: hidden; color: var(--star); font-style: normal;
}
.stars[data-fill="0"] i { inline-size: 0; }
.stars[data-fill="1"] i { inline-size: 10%; }
.stars[data-fill="2"] i { inline-size: 20%; }
.stars[data-fill="3"] i { inline-size: 30%; }
.stars[data-fill="4"] i { inline-size: 40%; }
.stars[data-fill="5"] i { inline-size: 50%; }
.stars[data-fill="6"] i { inline-size: 60%; }
.stars[data-fill="7"] i { inline-size: 70%; }
.stars[data-fill="8"] i { inline-size: 80%; }
.stars[data-fill="9"] i { inline-size: 90%; }
.stars[data-fill="10"] i { inline-size: 100%; }

.card-rate { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.card-rate:empty { margin-block-start: 0; }

/* ---- the chrome ---------------------------------------------------------- */

.announce { font-weight: 600; letter-spacing: calc(.01em * var(--track-scale, 1)); }
.announce[data-tone="accent"] { background-color: var(--accent-fill); color: var(--on-accent); }
.announce[data-tone="inverse"] { padding-block: 9px; }
/* An announcement is the band's loudest line, so it takes the band's strongest ink. */
.announce[data-tone="inverse"] { color: var(--ink-strong); }

.util { border-block-end: 1px solid var(--line); }
.util[data-tone="inverse"] { border-block-end-color: transparent; }

.cart-count { background: var(--cut-fill); color: var(--on-cut); }


/* An inverse band carries one soft bloom of its own ink in its corner rather
   than a flat black, the difference between a dark band and a hole; never the
   accent, which would be a second hue on the band (D13). */
[data-tone="inverse"] { position: relative; overflow: hidden; }
[data-tone="inverse"]::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  inline-size: 46%; block-size: 180%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--inverse-ink) 12%, transparent), transparent);
  opacity: .5;
}
[data-tone="inverse"] > * { position: relative; z-index: 1; }
[data-tone="inverse"] { --surface-2: color-mix(in srgb, var(--inverse-ink) 6%, var(--inverse-ground)); }
[data-tone="inverse"] { --line-strong: color-mix(in srgb, var(--inverse-ink) 26%, var(--inverse-ground)); }
[data-tone="inverse"] { --accent-ink: color-mix(in srgb, var(--tk-color-accent) 55%, var(--inverse-ink)); }
/* A dark band writes its body copy in a quiet ink and keeps a brighter one for
   the words it emphasises: a heading, the store's name, a link under a pointer. */
[data-tone="inverse"] { --ink-strong: oklch(from var(--inverse-ink) calc(l + .2) 0 h); }

.foot-links a:hover, .foot-contact a:hover { color: var(--ink-strong); }
.foot-end { font-size: .82rem; }

/* ---- the ticket ---------------------------------------------------------- */

/* The delivery slip: a dark head, a body, and a dashed tear line between them
   with a notch punched out of each edge. It is the identity's own object and
   it appears wherever the shopper is told what they will hand over.
   --perf is the colour the notch shows through, which is whatever ground the
   ticket happens to sit on. */
/* Only the ticket wears the dark head. A section on the flat or carded surface
   keeps its title as an ordinary section heading, which is what the classic
   look asks for and what a merchant who turns the ticket off gets back. */
/* D22a: every ticket's head has an edge, a band's fill or this rule under it. */
.ticket-head { padding-block-end: 12px; border-block-end: 1px solid var(--line-strong); }
.ticket-title { margin: 0; font-size: 1.15rem; }
.ticket-sub { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.ticket-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket-ref .copy { margin-inline-start: 0; }
.ticket-head .ticket-ref { position: relative; z-index: 1; }
.express:not([data-surface="ticket"]) .ticket-head { margin-block-end: 16px; }

[data-surface="ticket"] .ticket-head,
[data-totals="ticket"] .ticket-head {
  --perf: var(--bg);
  background: var(--inverse-ground); color: var(--inverse-ink);
  margin: calc(-1 * var(--ticket-pad, 20px)) calc(-1 * var(--ticket-pad, 20px)) 0; padding: 20px 22px;
  border-block-end: 1px solid var(--line);
  border-start-start-radius: var(--radius); border-start-end-radius: var(--radius);
  position: relative; overflow: hidden;
}
[data-surface="ticket"] .ticket-head::after,
[data-totals="ticket"] .ticket-head::after {
  content: ""; position: absolute; inset-block-start: -60%; inset-inline-end: -6%;
  inline-size: 50%; block-size: 220%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--inverse-ink) 12%, transparent), transparent);
  opacity: .55;
}
/* In the dark a band's ground is its neighbours', so a bloom cut by the band's
   edge draws that edge as a hard line; it fades inside its band instead. */
[data-mode="dark"] :is([data-tone="inverse"], [data-surface="ticket"] .ticket-head, [data-totals="ticket"] .ticket-head)::after {
  inset-block: 0; block-size: auto;
}
@media (prefers-color-scheme: dark) {
[data-mode="auto"] :is([data-tone="inverse"], [data-surface="ticket"] .ticket-head, [data-totals="ticket"] .ticket-head)::after {
  inset-block: 0; block-size: auto;
}
}
[data-surface="ticket"] .ticket-title,
[data-totals="ticket"] .ticket-title { color: var(--inverse-ink); position: relative; z-index: 1; }
[data-surface="ticket"] .ticket-sub,
[data-totals="ticket"] .ticket-sub { position: relative; z-index: 1;
  color: color-mix(in srgb, var(--inverse-ink) 70%, var(--inverse-ground)); }

/* The tear: a dashed rule the full width of the ticket, with a notch punched
   out of each edge. The notches are circles in the colour of whatever ground
   the ticket sits on, half outside the box, and the box clips them. */
.tear { display: none; }
[data-surface="ticket"] > form > .tear {
  display: block; position: relative; block-size: 1px; margin: 22px calc(-1 * var(--ticket-pad, 20px));
  background: repeating-linear-gradient(to right, var(--line) 0 7px, transparent 7px 14px);
}
[data-surface="ticket"] > form > .tear::before,
[data-surface="ticket"] > form > .tear::after {
  content: ""; position: absolute; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--bg);
}
[data-surface="ticket"] > form > .tear::before { inset-inline-start: -9px; }
[data-surface="ticket"] > form > .tear::after { inset-inline-end: -9px; }

/* ---- the express order form --------------------------------------------- */

.express[data-surface="ticket"] {
  background: var(--surface); border: 1px solid var(--line);
  --ticket-pad: 20px; border-radius: var(--radius); padding: var(--ticket-pad); box-shadow: var(--pop);
  overflow: hidden;
  border-block-start: 1px solid var(--line);
}
.express[data-surface="ticket"] .fields { margin-block: 20px; }
/* The tear line as the form's own divider, drawn by the closing row rather
   than by an element no document fills. */
.express-end[data-summary="priced"] { background: transparent; padding: 0; }
.express-end[data-summary="priced"] .express-total dd { font-size: 1.7rem; }
.express[data-surface="ticket"] .express-end .btn { flex: 1; }

/* ---- the product page ---------------------------------------------------- */

.buy-form { background: transparent; padding: 0; }
.price .now { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem); }
.price .tag-cut { padding: 6px 12px; font-size: .8rem; }

/* One axis of choice as a row of radios: a swatch when the values carry a
   colour, an ordinary chip when they do not. */
.opts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opts-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 0; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: calc(.09em * var(--track-scale, 1)); color: var(--muted);
}
.opts-row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--pill);
  background: var(--surface); color: var(--ink-on-surface);
  cursor: pointer; font-size: .9rem; font-weight: 600;
}
.opt-in:checked + .opt { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.opt-in:disabled + .opt { color: var(--muted); cursor: not-allowed; text-decoration: line-through; }
.opt-in:disabled + .opt .swatch { opacity: .45; }
.opt-in:focus-visible + .opt { outline: 2px solid var(--accent); outline-offset: 0; }
/* A value that carries a swatch becomes it: the label is the dot or the
   picture, and its word stays for the readers and the direction a colour
   cannot carry. Per VALUE and not per row, because a merchant filling swatches
   in has values with none yet, and those drew as blank identical circles that
   no buyer could tell apart. A row may mix dots, pictures and chips.
   Which control this is remains the theme's; the swatch is the only thing the
   document said. */
.opts[data-swatch="on"] .opt:has(.swatch) {
  inline-size: 44px; padding: 0; border-radius: 50%;
}
.swatch { display: block; inline-size: 100%; block-size: 100%; padding: 3px; }
/* An image swatch fills the same box the colour dot does, cropped rather than
   squashed: a value's picture is rarely square and a stretched one reads as
   the wrong colour. */
.swatch-img { object-fit: cover; border-radius: 50%; }
/* A swatch row says what is picked by a ring, which a word has to say too:
   the chosen value reads beside the axis name. Told apart by weight and case
   rather than by a separator, because punctuation between two words is a word
   the theme would own, and its spacing differs by language. */
.opts-chosen { color: var(--ink-on-surface); text-transform: none; letter-spacing: normal; font-weight: 600; }
.opts-chosen:empty { display: none; }
.opts[data-swatch="on"] .opt:has(.swatch) span {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.opts[data-swatch="on"] .opt-in:checked + .opt:has(.swatch) { box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 2px var(--accent); }

/* The seller behind the product, as the inset block a marketplace needs it to
   be rather than a line of small print. */
.sold-by {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: .88rem;
}
.sold-mark {
  display: grid; place-items: center; flex: none;
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-weight: 800; font-size: .78rem; letter-spacing: calc(.02em * var(--track-scale, 1));
}
.sold-words { margin: 0; display: grid; }
.sold-label { color: var(--muted); font-size: .78rem; }

.buybar { box-shadow: var(--lift); }

.reviews .review-mark { display: grid; gap: 6px; margin-block-end: 18px; }
.reviews .review-mark .stars { font-size: 1.3rem; }
.review { background: transparent; padding: 0 0 16px; border-block-end: 1px solid var(--line); border-radius: 0; }
.review-list { gap: 16px; }

.packs { gap: 12px; }
.pack { background: var(--surface-2); border-color: transparent; }

/* ---- the listing and the strips ------------------------------------------ */

.card-media { border-radius: var(--radius); }
.card-a:hover .card-media { box-shadow: var(--shadow); }
.card-title { font-weight: 600; }
.cat-media { border-radius: var(--radius); }
.strip-head { margin-block-end: 2px; }
/* Every band's head sits one gap above its content, as the strip's own row
   gap places it (2px of head and 14px of row), so sibling bands keep one rhythm. */
:is(.cats, .listing) > .strip-head { margin-block-end: 16px; }
.strip-more { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }

.pager-n.is-here { background: var(--text); border-color: var(--text); color: var(--bg); }

/* D7a: the listing sort is one compact inline control, the word and the
   select on one line at the end of its row, in every dressing. The shapes
   differ in the select's radius and ground; none of them is a card. */
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sort label { flex: none; font-size: .86rem; color: var(--muted); }
.sort select {
  flex: 0 1 auto; min-inline-size: 0; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.sort .btn { flex: none; min-block-size: 44px; background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.sort[data-shape="pill"] select { border-radius: var(--pill); }
.sort[data-shape="pill"] .btn { margin: 0; padding: 9px 18px; }

/* ---- the category header ------------------------------------------------- */

.cat-head[data-surface="carded"] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  gap: 20px;
}
.cat-head-words { display: grid; gap: 10px; align-content: start; }
.cat-head .hero { border-radius: var(--radius-sm); }
}
@media (min-width: 900px) {
@layer theme {
  .cat-head[data-surface="carded"] { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
}

}
@layer theme {

.prose[data-surface="carded"] { padding: 24px; }
.prose[data-surface="carded"] h1 { margin-block-end: 12px; }

/* ---- the composed sections ----------------------------------------------- */

.panel { border-radius: var(--radius); padding: 26px; gap: 22px; }
.panel[data-tone="plain"] { background-color: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel-words { display: grid; gap: 12px; align-content: start; }
.panel-eyebrow {
  margin: 0; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1)); color: var(--accent-ink);
}
.panel-points { gap: 12px; align-content: start; }
.panel-cta { margin-block-start: 4px; }
}

@media (min-width: 900px) {
@layer theme {
  .panel[data-layout="split"], .panel[data-layout="hero"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: 40px; padding: 40px;
  }
}

}
@layer theme {
.panel[data-layout="hero"] .panel-title { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem); line-height: 1.06; }
.panel[data-layout="hero"] .panel-body { font-size: 1.02rem; }
/* The hero's points are reassurances, so each one is ticked. */
.panel[data-layout="hero"] .bullet { padding-inline-start: 30px; }
.panel[data-layout="hero"] .bullet::before {
  content: "\2713"; inset-block-start: .1em; inline-size: 20px; block-size: 20px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
/* The split panel's points are steps, and the numbers are the order of events
   rather than decoration, so they count. */
.panel[data-layout="split"] .panel-points { counter-reset: step; }
.panel[data-layout="split"] .bullet { padding-inline-start: 34px; counter-increment: step; }
.panel[data-layout="split"] .bullet::before {
  content: counter(step); inset-block-start: .05em;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-size: .74rem; font-weight: 800;
}

/* The banner: the words sit on the picture behind a scrim from the leading
   edge, which is where a reader starts in either direction. */
.poster-words { display: grid; gap: 6px; }
.poster-sub { margin: 0; font-size: .92rem; color: var(--muted); }
.poster[data-frame="bleed"] .poster-media { border-radius: 0; margin-inline: calc(50% - 50vw); inline-size: 100vw; }
.poster[data-frame="plain"] .poster-media { border-radius: var(--radius); }
.poster[data-frame="plain"], .poster[data-frame="bleed"] { position: relative; }
.poster[data-frame="plain"] .poster-words,
.poster[data-frame="bleed"] .poster-words {
  position: absolute; inset-block-end: 22px; inset-inline-start: 24px; inset-inline-end: 24px;
  color: #fff;
}
.poster[data-frame="plain"] .poster-title,
.poster[data-frame="bleed"] .poster-title { position: static; color: #fff; inset: auto; }
.poster[data-frame="plain"] .poster-sub,
.poster[data-frame="bleed"] .poster-sub { color: rgba(255, 255, 255, .88); }
.poster .poster-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 18, 14, .68), rgba(8, 18, 14, .08) 62%, transparent);
}
.poster-media { position: relative; }

.feature-cat[data-layout="panel"] {
  background: var(--tile, var(--accent-soft)); color: var(--text);
}
.feature-cat[data-layout="panel"] .feature-eyebrow { color: var(--accent-ink); opacity: 1; }
.feature-cat[data-layout="panel"] .feature-body { color: var(--muted); opacity: 1; }
.feature-cat[data-layout="panel"] .feature-cta { background: var(--accent-fill); color: var(--on-accent); }
.feature-cat[data-layout="panel"] .cat-strip { grid-auto-columns: minmax(0, 14rem); }
}
/* The tile's column is definite: an auto one sizes to the tile's content, and a
   picture the category lacks, or a skeleton, has none. */
@media (min-width: 768px) {
@layer theme {
  .feature-cat[data-layout="panel"] { grid-template-columns: 1fr 14rem; }
}

}
@layer theme {

/* ---- the cart, the order, and their ticket ------------------------------- */

.totals { padding: 20px; background-color: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.totals[data-totals="ticket"] { --ticket-pad: 20px; padding: var(--ticket-pad); overflow: hidden; box-shadow: var(--pop); }
/* A plain receipt draws no band: its title is a heading, its number stays. */
.totals[data-totals="plain"] .ticket-sub { display: none; }
.totals[data-totals="plain"] .ticket-ref { margin: 0 0 12px; }
.totals[data-totals="ticket"] .total-list { margin-block-start: 20px; }
.total-list .is-grand { font-size: 1.25rem; }
.total-list .is-grand dd { font-family: var(--tk-font-display, var(--tk-font-body)); }
.line { border-block-end-color: var(--line); }
.line-media { background: var(--tile, var(--bg-soft)); }
}

/* ---- what the narrow screens need --------------------------------------- */

@media (max-width: 559px) {
@layer theme {
  /* The tagline and the phone leave the utility strip: the phone is already in
     the header row, and three lines of chrome on a 375px screen is a page
     that starts below the fold. */
  .util-tag, .util .util-a[href^="tel:"] { display: none; }
}

}
@media (max-width: 767px) {
@layer theme {
  .panel { padding: 22px; }
  :is(.express[data-surface="ticket"], .totals[data-totals="ticket"]) { --ticket-pad: 16px; }
  :is([data-surface="ticket"], [data-totals="ticket"]) .ticket-head { padding: 18px; }
  .cat-head[data-surface="carded"] { padding: 18px; }
}

}
@layer theme {

/* Arabic sits taller than Latin at the same size, and a display heading's
   tight leading clips its descenders. The body already takes its leading from
   the catalog per direction; headings set their own, so they need the same
   correction, and only for Arabic words: a Latin heading on an Arabic page
   keeps its look's leading. */
[lang="ar"] h1:where(:dir(rtl)), [lang="ar"] h2:where(:dir(rtl)), [lang="ar"] h3:where(:dir(rtl)),
[lang="ar"] .panel-title:where(:dir(rtl)), [lang="ar"] .poster-title:where(:dir(rtl)), [lang="ar"] .ticket-title:where(:dir(rtl)) {
  line-height: 1.4;
}
[lang="ar"] .panel[data-layout="hero"] .panel-title { line-height: 1.3; }

/* The lines a cart or an order lists sit on their own surface, so the page
   reads as two blocks: what was bought, and what it comes to. */
.lines {
  background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; gap: 0;
}
.line { padding-block: 16px; }
.line:first-child { padding-block-start: 0; }
.line:last-child { padding-block-end: 0; border-block-end: 0; }
.coupon { gap: 8px; }
.coupon :is(.field, .btn) { justify-self: stretch; }

/* ---- the header's search ------------------------------------------------- */

/* One control, not a button floating inside a field: the input carries the
   leading half of the pill and the submit carries the trailing half, they
   share a height, and there is no gap between them to misalign. Logical radii,
   so the halves swap with the text direction and nothing needs an RTL rule.

   The submit shows the platform's own word. `labels.search` has always been in
   the contract and the theme was hiding it behind an icon; a labelled submit
   is the mock's control and a bigger target than a glyph. */
.search { gap: 0; }
.search input {
  min-block-size: 46px; padding: 0 18px;
  background: var(--bg-soft); border: 1.5px solid var(--line); border-inline-end: 0;
  border-start-start-radius: var(--pill); border-end-start-radius: var(--pill);
  border-start-end-radius: 0; border-end-end-radius: 0;
}
.search input:focus { border-color: var(--accent); }
.search-go {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-block-size: 46px; padding-inline: 20px;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 700;
  border-start-start-radius: 0; border-end-start-radius: 0;
  border-start-end-radius: var(--pill); border-end-end-radius: var(--pill);
}
.search-go .ico { inline-size: 18px; block-size: 18px; }
}
/* Below the narrowest breakpoint the word steps aside and the glyph stands in,
   because the row it shares is already tight. */
@media (max-width: 399px) {
@layer theme {
  .search-word {
    position: absolute; inline-size: 1px; block-size: 1px;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .search-go { padding-inline: 16px; }
}

}
@layer theme {


/* ===========================================================================
   Appearance, as a promise the component honours.

   The engine puts the resolved appearance on the WRAPPER (theme-engine.md
   section 3). Painting only there leaves it behind whatever surface the
   component draws, which after this look is most of them: the merchant's
   ground survived in the four slivers outside a card's rounding, their text
   colour reached whichever words happened to inherit and missed every word
   that set its own, and centring moved a label without moving the row it sits
   in. Every key now lands on the section's own visible self, per the
   twenty-first round.

   Two properties carry it inward, and each is INVALID when the merchant set
   nothing, which is what keeps an unset key changing nothing:

   - `--paint` is the ground a surface lays over its own, and transparent
     when unset, so a surface paints exactly what it always painted. It is
     re-declared on every wrapper, so a block never inherits its section's.
   - the ink names are the theme's own ladder. A custom property that is
     invalid at computed-value time takes its INHERITED value, so an unset key
     leaves the ladder alone and a set one carries into the blocks sitting on
     the same ground.
   =========================================================================== */

div[id] {
  --paint: var(--tk-appearance-background, transparent);

  /* The derived shades, each computed from the one value the merchant gave and
     each GUARANTEED-INVALID when they gave none, which is what lets the reads
     below fall back to the theme's own ladder.
     The fallback has to be written out: a custom property whose value
     references an unset one computes to the guaranteed-invalid value and NOT
     to what it inherited, so `--text: var(--tk-appearance-text)` alone would
     leave every rule reading `--text` without a value. */
  --ink: var(--tk-appearance-text);
  --ink-muted: color-mix(in srgb, var(--ink) 68%, transparent);
  --ink-line: color-mix(in srgb, var(--ink) 20%, transparent);
  --ink-line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --ink-surface-2: color-mix(in srgb, var(--ink) 8%, transparent);

  /* The ladder's GROUND side, invalid the same way when the merchant set no
     background. Each shade is the ground moved toward the section's ink,
     because one colour cannot contrast with itself and the ink is the only
     other colour the section has; `--text` is read rather than `--ink` on
     purpose, so a background set alone still derives against the theme's own
     ink instead of collapsing to invalid.

     Three strengths, because a section has three jobs for a ground that is not
     its own: a hover, the cell under the current page, and a filled control. */
  --ground: var(--tk-appearance-background);
  --ground-soft: color-mix(in srgb, var(--ground) 92%, var(--text));
  --ground-mark: color-mix(in srgb, var(--ground) 82%, var(--text));
  --ground-fill: color-mix(in srgb, var(--ground) 16%, var(--text));

  /* Each side reads its OWN source and falls back to the shade the theme
     designed, so setting one key never drags the other's territory and an
     unset section is byte-identical to the look before any of this existed
     (docs/theme-engine.md section 3). */
  --text: var(--ink, var(--text-own));
  --muted: var(--ink-muted, var(--muted-own));
  --line: var(--ink-line, var(--line-own));
  --line-strong: var(--ink-line-strong, var(--line-strong-own));
  --surface-2: var(--ink-surface-2, var(--surface-2-own));
  --bg-soft: var(--ground-soft, var(--bg-soft-own));

  /* The section's own FURNITURE: an opener's fill, the cell under the current
     page, and the mark that says which page it is. A shop fact keeps its own
     colour and is nowhere in this list: the cart count, an accent call to
     action, a struck price. */
  --fill: var(--ground-fill, var(--accent-fill));
  --on-fill: var(--ground, var(--on-accent));
  --mark-cell: var(--ground-mark, var(--accent-soft));
  --mark-ink: var(--ink, var(--accent-ink));
  --mark-line: var(--ink, var(--accent));
}

/* The section's own surface, wherever this theme draws one. Each keeps the
   ground it always had and lays the merchant's over it, so the theme's radius,
   border and shadow stay the theme's. */
[data-surface="carded"]:not(.prod),
[data-surface="ticket"],
.prod[data-surface="carded"] > .gallery,
.prod[data-surface="carded"] > .buy,
.sort,
.panel,
.lines,
.totals,
.announce,
.cats[data-tile="circle"],
.feature[data-layout="panel"],
[data-tone="inverse"],
.foot-main,
.foot-legal,
.util,
.nav,
.nav-body,
.nav-panel,
.nav-bar,
.nav[data-layout="standing-rail"] .nav-li:hover > .nav-link,
.nav[data-layout="standing-rail"] .nav-li:focus-within > .nav-link {
  background-image: linear-gradient(var(--paint, transparent), var(--paint, transparent));
}

/* The placeholder the host built, painted under the file while it loads. It
   is a background on the image itself, so it disappears the moment the file
   paints and leaves no element behind to clean up. */
img { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* The platform's one word about what just happened. The ENGINE emits it, first
   inside main and wordless, so no section can lose it (theme-engine.md
   section 2); the kind is the fact, and the colour is this theme's reading of
   it. It arrives inside main's own container, first, so the container's own
   width, padding and rhythm between children are what place it. */
.flash {
  margin: 0; padding: 12px 16px; border-radius: var(--radius);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft); color: var(--accent-ink); font-size: .93rem;
}
.flash[data-kind="error"] { border-inline-start-color: var(--cut); background: var(--cut-soft); color: var(--cut-ink); }
.flash[data-kind="success"] { border-inline-start-color: var(--success); background-color: var(--success-soft); color: var(--success); }

/* The store's own promises, beside the price and the button they are about. */
.price-note { margin: 0; font-size: .84rem; }
.trust { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.trust-point { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; }
.trust-point .ico { flex: none; inline-size: 22px; block-size: 22px; color: var(--accent); }
.trust-words { display: grid; gap: 1px; }
.trust-words strong { font-weight: 700; }
.trust-words span { color: var(--muted); }

.delivered-in { margin: 0; font-weight: 600; }
.policy { margin-block-start: 16px; border-block-start: 1px solid var(--line); }
.policy summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-block: 12px; cursor: pointer; font-weight: 600; font-size: .92rem;
}
.policy summary::-webkit-details-marker { display: none; }
.policy[open] summary .ico-down { transform: rotate(180deg); }
.policy-lines { display: grid; gap: 6px; margin: 0 0 14px; padding-inline-start: 18px; font-size: .88rem; color: var(--muted); }

/* The catalogue's facts, as the table they are. */
.specs { padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.spec-rows { display: grid; gap: 0; margin-block-start: 14px; }
.spec-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 10px; border-block-end: 1px solid var(--line); font-size: .92rem;
}
.spec-row dt { color: var(--muted); }
.spec-row dd { margin: 0; font-weight: 600; }
.specs[data-surface="carded"] {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}

/* The themed failure page. The status is a number no reader needs read out,
   which is why the words beside it carry the whole message. */
.failure { display: grid; gap: 14px; justify-items: center; padding-block: 56px; text-align: center; }
.failure-code {
  margin: 0; font-family: var(--tk-font-display, var(--tk-font-body));
  font-size: clamp(3.5rem, 18vw, 7rem); line-height: 1;
  /* Quieter than the words beside it and still legible: a border token as ink
     is a hairline on the dark ground. */
  color: var(--muted);
}
.failure .lede { max-inline-size: 44ch; color: var(--muted); }
.failure[data-surface="carded"] {
  padding: 48px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}

/* A closed set the buyer sees at once, and a field entered by turning it on.
   Both are the contract's own field kinds, drawn as themselves. */
.modes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
/* Its legend sits as a field's label does, a grid item one gap above the
   choices, so the choices are the control height beside the next field (D20a);
   a fieldset's own legend takes no gap and left its row to stretch. */
.field > .modes { gap: inherit; }
.modes legend {
  float: inline-start; padding: 0; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: calc(.09em * var(--track-scale, 1)); color: var(--muted);
}
.modes-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mode {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--pill);
  background: var(--surface); color: var(--ink-on-surface);
  cursor: pointer; font-size: .9rem; font-weight: 600;
}
.mode-in:checked + .mode { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode-in:focus-visible + .mode { outline: 2px solid var(--accent); outline-offset: calc(-1 * var(--tap-inset, 0px)); }
.check { display: flex; align-items: center; gap: 10px; }
.check input { inline-size: 20px; block-size: 20px; accent-color: var(--accent); }
.check label { display: inline-flex; align-items: center; min-block-size: 44px; margin: 0; }
.form-bad { margin: 0 0 14px; font-weight: 600; }

/* The order ticket. Without script it says what the server said; with it, the
   delivery line appears and the total follows the three numbers the document
   carries. */
.ticket-list { display: grid; gap: 8px; margin-block: 18px 16px; }
.ticket-line { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
/* An author display wins over the browser's own [hidden] rule, so the line the
   script hides has to be hidden here. Pinned by
   TestTheDeliveryLineIsHiddenUntilThereIsAFeeToShow. */
.ticket-line[hidden] { display: none; }
.ticket-qty { white-space: nowrap; }
/* The fee beside a delivery mode. NO opacity: it was .8, and at 12px that put
   both states under AA as painted, on the chosen mode's accent fill and on the
   row's own ground. Nothing had shown it, because no fixture had a wilaya
   chosen, so no fee had ever been on a page the lane measured. */
.mode-fee { margin-inline-start: 6px; font-weight: 600; }
/* A payment still to make, on the order page: the platform's button, and the
   time its link stops paying under it. */
.done-pay { display: grid; justify-items: center; gap: 8px; margin-block: 16px; }
/* The two ways to pay (section 5.1): modes whose second line says what each
   asks of the buyer. The words of the way chosen show and the other's hide,
   with or without script. */
.pay { grid-column: 1 / -1; }
/* One way per row whatever a look does with its modes: each carries a line,
   and two side by side wrapped the card's into three on a phone. */
.express .fields .pay.modes .modes-row { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius); }
.pay .mode { flex-direction: column; align-items: flex-start; justify-content: center; text-align: start; }
.mode-line { display: block; font-size: .8rem; font-weight: 400; }
.mode-line[hidden] { display: none; }
.mode-in:disabled + .mode { border-style: dashed; color: var(--muted); cursor: not-allowed; }
/* Every surface paints its choices more specifically, so a closed one wears its
   dashed edge as an outline, above them all. */
.express[data-surface][data-modes] .mode-in:disabled + .mode {
  border-color: transparent; box-shadow: none; background-color: transparent;
  outline: 1px dashed var(--line-strong); outline-offset: calc(-1 * var(--tap-inset, 0px));
  color: var(--muted); cursor: not-allowed;
}
.pay-second[hidden] { display: none; }
form:has(input[data-pay="card"]:checked) [data-pay-cash],
form:not(:has(input[data-pay="card"]:checked)) [data-pay-card] { display: none; }
#express { scroll-margin-block-start: 12px; }
/* A refused field the browser scrolls to keeps clear of the edges and of a
   phone's buy bar, with or without script. */
.express :is(input, select, textarea) { scroll-margin-block: 96px; }
.express .field-bad :is(input, select, textarea) { scroll-margin-block-end: calc(96px + 3lh); }
.copy { margin-inline-start: 8px; min-block-size: 44px; padding-block: 6px; padding-inline: 12px; font-size: .85rem; }
.ticket-line dt { color: var(--muted); }
.ticket-line dd { margin: 0; }
.ticket-line.is-grand {
  padding-block-start: 8px; border-block-start: 1px solid var(--line);
  font-size: 1.2rem; font-weight: 700;
}
.ticket-line.is-grand dt { color: var(--text); }

/* Alignment is mapped onto each layout rather than left to text-align, which
   moves a label's words and not the row the label shares. */
[data-appearance-alignment="start"] { --align: start; }
[data-appearance-alignment="center"] { --align: center; --align-text: center; }
[data-appearance-alignment="end"] { --align: end; --align-text: end; }
[data-appearance-alignment="start"] { --align: start; --align-text: start; }

.sort { justify-content: var(--align, flex-end); }
.sort select { color: var(--ink-on-surface); }
.strip-head { justify-content: var(--align, space-between); }
.pager { justify-content: var(--align, center); }
.express-end { justify-content: var(--align, flex-start); }
.panel-words { justify-items: var(--align, start); }
.panel-cta, .feature-cta, .strip-more, .contact .btn, .review-form .btn {
  justify-self: var(--align, start);
}
.util-row, .foot-end { justify-content: var(--align, space-between); }
.nav-roots { justify-content: var(--align, flex-start); }
.opts-row, .flags, .chips, .shares, .social { justify-content: var(--align, flex-start); }
.cat-strip { justify-content: var(--align, start); }

/* ---- the noor axes: type at display size, cards as contained panels, a
   category row that is words, a header that is hairlines, and a heading that
   states itself in small caps -------------------------------------------- */

/* The page heading at display size: one big light line with its lede under it,
   centred by default because a display heading that is not centred is just a
   big heading. A merchant's own appearance alignment still wins, which is why
   the centring is the --align default and not a literal. */
.page-head[data-scale="display"] {
  justify-items: var(--align, center);
  text-align: var(--align-text, center);
  gap: 18px;
  padding-block: clamp(24px, 6vw, 56px);
}
:is(.page-head, .platform)[data-scale="display"] h1 {
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 300;
  letter-spacing: calc(.02em * var(--track-scale, 1));
  line-height: 1.08;
}
/* What the head lists under a centred heading is centred with it; "safe"
   keeps a rail that overflows reachable from its start. */
.page-head:is([data-scale="display"], [data-scale="bold"]) :is(.cat-strip, .chips) { justify-content: safe var(--align, center); }
.page-head[data-scale="display"] .lede {
  max-inline-size: 34rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
}

/* A section heading that states itself rather than announcing itself: small,
   uppercase, widely tracked. The third value on the axis classic opened with
   its accent rule, so a look picks a voice rather than inheriting one. */
[data-heading="caps"] .h-sec {
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: calc(.25em * var(--track-scale, 1));
}
[data-heading="caps"] .strip-sub {
  font-size: .78rem;
  letter-spacing: calc(.12em * var(--track-scale, 1));
}

/* The contained panel: the photo sits INSIDE a soft square with room around it
   rather than cropped to fill, and the words under it are quiet and centred.
   A photographed product on a white ground reads as the shop's own; a cropped
   one reads as a thumbnail. */
[data-card="panel"] .card-media {
  --plate: var(--bg-soft);
  border-radius: var(--radius);
  padding: clamp(12px, 4%, 26px);
  aspect-ratio: 4 / 5;
}
/* A contained picture is never cropped, so the focal point has nothing to
   pull towards: it sits in the middle of its box, whole. */
[data-card="panel"] .card-a:hover .card-media { --plate: var(--surface-2); }
/* D6: a card's alignment is the look's card_align setting, never its style's. */
[data-card-align="center"] :is(.card-brand, .card-title, .card-rate, .card-price, .card-stock) { text-align: var(--align-text, center); }
/* A centred clamp draws its ellipsis after the centred line, past the box it
   was measured in; the title lends itself an em each side to draw it in. */
[data-card-align="center"] .card-title { margin-inline: -1em; padding-inline: 1em; }
[data-card-align="center"] :is(.card-price, .card-rate) { justify-content: var(--align, center); }
[data-card-align="center"] .tags { align-items: var(--align, center); }
[data-card="panel"] .card-rate { display: flex; gap: 6px; }
[data-card="panel"] .card-title { font-weight: 400; color: var(--muted); }
[data-card="panel"] .card-a:hover .card-title { color: var(--text); text-decoration: none; }
[data-card="panel"] .card-brand { letter-spacing: calc(.18em * var(--track-scale, 1)); }
/* The made-in mark rides the panel rather than taking a line of its own, so a
   product that carries one does not push its neighbours' prices down. */
[data-card="panel"] .card-media { position: relative; }

/* Categories as a line of words. No picture, no count: the row is a way in,
   and a tile is a decision the products below have already earned. */
[data-tile="text"] .cat-strip {
  grid-auto-flow: column; grid-auto-columns: max-content;
  grid-template-columns: none; gap: 40px; overflow-x: auto;
  border-block-start: 1px solid var(--line);
  padding-block-start: 18px;
}
[data-tile="text"] .cat {
  gap: 0; align-content: center;
  padding-block: 6px;
  border-block-end: 1px solid transparent;
}
[data-tile="text"] .cat:hover { border-block-end-color: var(--text); }
[data-tile="text"] .cat-media,
[data-tile="text"] .cat-count { display: none; }
[data-tile="text"] .cat-name {
  font-size: .84rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: calc(.12em * var(--track-scale, 1));
  color: var(--muted); white-space: nowrap;
}
[data-tile="text"] .cat:hover .cat-name { color: var(--text); }

/* The minimal header: one wrapping row, the search a bare underline, and every
   control a word rather than a button. It is the same three areas as the other
   two layouts, so nothing about the markup changes. */
.head-row[data-layout="minimal"] {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand search end";
  gap: 10px 24px;
  padding-block: 18px;
}
}
/* A narrow minimal or inline header wraps instead of squeezing: the name keeps
   its line, the ways in follow at the row's end once they no longer fit beside
   it, and the search takes a line of its own. */
@media (max-width: 639px) {
@layer theme {
  .head-row:is([data-layout="minimal"], [data-layout="inline"]) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  }
  /* Shrinkable, or a store whose name is a sentence sizes the whole row to it
     and the page goes sideways with it. */
  .head-row:is([data-layout="minimal"], [data-layout="inline"]) .brand {
    flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%;
  }
  .head-row:is([data-layout="minimal"], [data-layout="inline"]) .head-end { margin-inline-start: auto; }
  .head-row:is([data-layout="minimal"], [data-layout="inline"]) .search {
    order: 1; flex: 1 0 100%; max-inline-size: none; margin-inline: 0;
  }
}

}
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="minimal"] .search { max-inline-size: 22rem; margin-inline: 0; }
  /* Every layout's ways in end on the content edge, as every band does. */
  .head-row > .head-end { margin-inline-start: auto; }
}

}
@layer theme {
.head-row[data-layout="minimal"] .search input {
  background-color: transparent; border: 0;
  border-block-end: 1px solid var(--line); border-radius: 0;
  padding-inline: 0;
}
.head-row[data-layout="minimal"] .search input:focus { border-block-end-color: var(--text); }
.head-row[data-layout="minimal"] .head-end { gap: 18px; }
/* The submit is the word rather than the glyph, because a bare underline with
   a filled circle at its end is two ideas about the same control. Below 400px
   the shared rule above hides the word and the glyph stands in, which is the
   right trade on a row that is already tight. */
.head-row[data-layout="minimal"] .search-go {
  padding: 6px 0; background: transparent; border-radius: 0; color: var(--text);
}
.head-row[data-layout="minimal"] .search-go .ico { display: none; }
}
@media (max-width: 399px) {
@layer theme {
  .head-row[data-layout="minimal"] .search-go .ico { display: block; }
}

}
@layer theme {

/* An announcement with no fill: a line on the page's own ground, held by a
   hairline. The other two tones are bands; this one is a sentence. */
.announce[data-tone="plain"] {
  background-color: transparent; color: var(--muted);
  border-block-end: 1px solid var(--line);
  font-size: .75rem; text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1));
  padding-block: 10px;
}

/* ---- the souk axes: a heading that shouts, categories as chips, a boxed
   band, a price-forward card, an accent-edged header and a tinted footer -- */

/* The bar and the voice. Classic opened this axis with the bar alone, which is
   a mark; souk wants the mark and the volume, and a look picks one reading. */
[data-heading="loud"] .h-sec {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .88rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: calc(.04em * var(--track-scale, 1));
}
[data-heading="loud"] .h-sec::before {
  content: ""; inline-size: 4px; align-self: stretch;
  min-block-size: 1.1em; background: var(--accent); border-radius: 2px;
}

/* Categories as chips: a way in that carries how much is behind it. The count
   is the whole point of the shape, so this is the one tile that keeps it. */
[data-tile="chip"] .cat-strip {
  grid-auto-flow: column; grid-auto-columns: max-content;
  grid-template-columns: none; gap: 8px; overflow-x: auto;
}
[data-tile="chip"] .cat {
  grid-auto-flow: column; align-items: center; gap: 6px;
  background-color: var(--surface-2); color: var(--accent-ink);
  border-radius: var(--pill); padding: 6px 12px;
}
[data-tile="chip"] .cat:hover { background-color: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
[data-tile="chip"] .cat-media { display: none; }
[data-tile="chip"] .cat-name { font-size: .82rem; font-weight: 700; white-space: nowrap; }
[data-tile="chip"] .cat-count { font-size: .82rem; font-weight: 400; }

/* A band in a box: the products inside it read as an offer rather than as more
   grid, which is the whole reason a merchant marks them. The frame sits on the
   content edge and its cards are inset by the card gap, the one stated
   exception to D2's one width. */
.strip[data-frame="boxed"] {
  background-color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--surface));
  border-radius: var(--radius);
  padding: 10px var(--grid-gap) 8px;
}
/* D13: in the dark a framed band's fill is a step of the one ground, never a tint. */
[data-mode="dark"] .strip[data-frame="boxed"] { background-color: var(--surface); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] .strip[data-frame="boxed"] { background-color: var(--surface); }
}
.strip[data-frame="boxed"] > .strip-head { padding-inline: 4px; }
.strip[data-frame="boxed"] .h-sec::before { background-color: var(--cut); }
.strip[data-frame="boxed"] .strip-more { color: var(--cut-ink); }

/* The price-forward card: the photo square and contained, the badge loud at
   the top end, and the price the largest thing on the tile. */
[data-card="price"] .card-media {
  --plate: var(--surface);
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
}
/* D1a: "Prix en avant" puts the price first, above the brand and the title. */
[data-card="price"] .card-price { grid-row: 2; }
[data-card="price"] .card-brand { grid-row: 3; }
[data-card="price"] .card-title { grid-row: 4; }
[data-card="price"] .card-rate { grid-row: 5; }
[data-card="price"] .card-title { font-size: .8125rem; font-weight: 400; line-height: 1.35; color: var(--text); }
/* A card style dresses the price and never colours it: the price setting does (D1). */
[data-card="price"] .card-price .now {
  font-size: 1.12rem; font-weight: 900; letter-spacing: calc(-.01em * var(--track-scale, 1));
}
[data-card="price"] .card-stock { font-weight: 700; }
[data-card="price"] .card {
  background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px;
}
}
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  [data-card="price"] .card:hover { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
}

}
@layer theme {
[data-card="price"] .card:hover {
  border-color: var(--accent); box-shadow: var(--pop); transform: translateY(-2px);
}
[data-card="price"] .tags { inset: 8px; align-content: start; justify-items: end; }
[data-card="price"] .tag-made {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; padding-inline: 6px;
}

/* A header edged in accent, and a search field edged with it. Making
   color.line the accent would make every hairline in the store accent, which
   is why the edge is a choice on the one type that has an edge to make. */
.head:has(.head-row[data-edge="accent"]) { border-block-end: 2px solid var(--accent); }
.head-row[data-edge="accent"] .search input { border: 2px solid var(--accent); }
.head-row[data-edge="accent"] .search input:focus { border-color: var(--accent-ink); }

/* A footer row on a tint: lighter than inverse, louder than plain, which is
   the one souk wants under a page that is already busy. */
.foot-legal[data-tone="accent"] {
  background-color: var(--accent-soft); color: var(--accent-ink);
  border-block-start: 2px solid var(--accent);
}
.foot-legal[data-tone="accent"] a { color: inherit; }
/* D13: in the dark a tinted bar or panel lays a step of the one ground, its
   accent kept for the edge and the ink. */
[data-mode="dark"] :is(.foot-legal[data-tone="accent"], .express[data-surface="accent"], [data-trust="tiles"] .trust-point) { background-color: var(--surface); }
@media (prefers-color-scheme: dark) {
[data-mode="auto"] :is(.foot-legal[data-tone="accent"], .express[data-surface="accent"], [data-trust="tiles"] .trust-point) { background-color: var(--surface); }
}
.foot:has([data-tone="accent"]) { border-block-start-width: 0; }

/* ---- the vitrine axes: two cards to a row, an editorial tile, an outlined
   rail, and a name set as a wordmark ------------------------------------- */

/* The roomy end of the density axis: two big tiles where dense puts five. A
   grid this wide is a decision about how many products a shopper should be
   comparing at once, which is the same decision dense makes the other way. */
[data-density="roomy"] { --grid-gap: 32px; }
[data-density="roomy"] { --cols: 1; }
}
@media (min-width: 900px) {
@layer theme { [data-density="roomy"] { --cols: 2; }
} 
}
@layer theme {
[data-density="roomy"] .grid > * { padding-block-end: 32px; }

/* The editorial tile: a wide photo contained on a soft ground, then two lines.
   The title carries the hover rather than the tile. */
[data-card="editorial"] .card-media {
  --plate: var(--bg-soft);
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
}
[data-card="editorial"] .card-stock { display: none; }
[data-card="editorial"] .card-title {
  font-size: 1rem; font-weight: 500; line-height: 1.35; margin-block-start: 14px;
}
[data-card="editorial"] .card-a:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }
[data-card="editorial"] .card-price .now { font-size: 1rem; font-weight: 600; }
/* A dark pill at the start, a light mark at the end: the two marks the tile
   carries sit on the photo and never take a line of their own. */
[data-card="editorial"] .tag-cut { border-radius: var(--pill);
  padding-inline: 12px;
}

/* Categories as an outlined rail: bigger than a chip, unfilled, and with no
   count, because a rail is a way through rather than a way to filter. */
[data-tile="outline"] .cat-strip {
  grid-auto-flow: column; grid-auto-columns: max-content;
  grid-template-columns: none; gap: 12px; overflow-x: auto;
}
[data-tile="outline"] .cat {
  grid-auto-flow: column; align-items: center;
  background-color: var(--surface);
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 12px 22px;
}
[data-tile="outline"] .cat:hover { border-color: var(--text); }
[data-tile="outline"] .cat-media,
[data-tile="outline"] .cat-count { display: none; }
[data-tile="outline"] .cat-name {
  font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap;
}
[data-tile="outline"] .cat:hover .cat-name { color: var(--text); }

/* ---- what the enhancement layer adds (theme-engine.md section 9) ---------
   Every rule here styles something script created. Without the script none of
   these selectors matches anything, and the floor underneath is what shows. */

/* The axis rows in front of the select they drive. The select stays in the
   flow for the keyboard and out of the way for the eye: hiding it outright
   would take away the control that actually posts. */
.field.has-axes { display: grid; gap: 12px; }
.field.has-axes > label,
.field.has-axes > select {
  --control: 0px; position: absolute; inline-size: 1px; block-size: 1px; max-inline-size: 1px; max-block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.field.has-axes > select:focus {
  --control: inherit; position: static; inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none;
  margin: 0; clip-path: none; white-space: normal;
}
.axes { display: grid; gap: 14px; }

/* The stepper. The buttons are square enough for a thumb and the field keeps
   its own spinner for anyone who prefers it. */
.qty { display: inline-flex; align-items: stretch; gap: 0; }
.qty input[type="number"] {
  inline-size: 4.5rem; text-align: center;
  border-radius: 0; border-inline: 0;
}
.qty-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 44px; min-block-size: 44px;
  padding: 0; font-size: 1.05rem; line-height: 1; cursor: pointer;
  background-color: var(--surface); color: var(--text);
  border: 1px solid var(--line);
}
.qty-step:first-child {
  border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm);
}
.qty-step:last-child {
  border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
}
.qty-step:hover { background-color: var(--bg-soft); }
.qty-step:disabled { opacity: .45; cursor: default; }


/* ---- the tap-target floor ------------------------------------------------
   Every control a thumb presses is at least 44px tall. The browser lane
   measures this on every page of every look, which is how the list below was
   found: each one of these was a real target a finger would have missed, and
   none of them had a symptom in any golden.

   A minimum and not a size: each already sits in a row taller than itself or
   grows into space it had, so the floor changes what a thumb can hit and not
   what the page looks like. Anything smaller than a finger is either not a
   control (a word in a sentence, a visually-hidden label) or is one of these. */
.nav-link,
.share,
.line-title,
.chip,
.strip-more,
.cat,
.util a,
.sort label,
.sort select,
.foot-legal a,
.foot-links a,
.foot-contact a,
.nav-sub,
.pager-step,
.pager-n,
.in-cats a,
.social-a,
.crumb-link,
.locale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 24px;
}
/* A tile that is already a picture keeps its own shape: the floor is about the
   smallest a target may be, and these are far past it. */
[data-tile="card"] .cat,
[data-tile="circle"] .cat,
.cat-grid .cat, .feature-cat .cat { display: grid; }


/* ---- the classic axes: a price in the accent, a solid badge, a carded and
   contained tile, a fixed count of columns, forms that speak in sentence
   case, and chrome that names its ways in -------------------------------- */

/* Off by default, each shown where a setting asks. */
.cart-word {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.util-globe, .foot-contact .ico { display: none; }

/* The tile. */
[data-price="accent"] .card-price .now { color: var(--accent-ink); }
[data-price="cut"] .card-price .now { color: var(--cut-ink); }
[data-card="carded"] .grid > * { padding-block-end: 0; margin-block-end: 16px; }
[data-card="carded"] .card {
  background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow);
}
[data-card="carded"] .card:hover { box-shadow: var(--pop); transform: translateY(-2px); }
[data-card="carded"] .card-media { border-radius: calc(var(--radius) - 6px); }
[data-card="carded"] .card-a:hover .card-media { box-shadow: none; }
[data-fit="contain"] .card-img { object-fit: contain; object-position: 50% 50%; }
/* A default a card style's own plate outranks. */
:where([data-fit="contain"]) .card-media { --plate: var(--surface); }
.card-gone, [data-stockout="line"] .tag-out { display: none; }
[data-stockout="line"] .card-gone { display: block; }
[data-tags="corners"] .tags { inset: 8px; display: block; }
[data-tags="corners"] .tag { position: absolute; }
[data-tags="corners"] :is(.tag-cut, .tag-own, .tag-out) { inset-block-start: 0; inset-inline-start: 0; }
[data-tags="corners"] .tag-pick {
  inset-block-start: 0; inset-inline-end: 0;
}
[data-tags="corners"] .tag-made { inset-block-end: 0; inset-inline-end: 0; }
/* Two chips that share the top row share its width, so they never meet (D1a);
   a chip alone in its row keeps the whole width. */
[data-tags="corners"] .tags:not(:has(.tag-cut)):has(.tag-pick):has(:is(.tag-own, .tag-out)) :is(.tag-own, .tag-out, .tag-pick) { max-inline-size: calc(50% - 2px); }
[data-tags="corners"] .tags:has(.tag-cut) .tag-pick { display: none; }

/* The buy box. */
.prod { --shot-mark: var(--accent); }
.prod[data-marks="ink"] { --shot-mark: var(--text); }
.prod[data-marks="ink"] .dot[aria-current="true"]::before { inline-size: 18px; border-radius: 4px; }
[data-price="accent"] :is(.price .now, .buybar .now) { color: var(--accent-ink); }
[data-buttons="rounded"] .btn { border-radius: var(--radius-sm); }
[data-labels="plain"] :is(.field > label, .opts-name, .modes legend) {
  font-size: .86rem; font-weight: 500; text-transform: none; letter-spacing: 0;
}
[data-scale="compact"] h1 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); line-height: 1.3; }
}
/* A contained photo letterboxes onto the plate, light in both modes (D3, D22). */
.prod[data-fit="contain"] :is(.shot-media, .thumb-img) { object-fit: contain; object-position: 50% 50%; background-color: color-mix(in srgb, var(--plate, var(--bg-soft)) 92%, var(--text)); }
@layer theme {
[data-brand="accent"] .brand-line {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: calc(.025em * var(--track-scale, 1)); color: var(--accent-ink);
}
[data-rating="hidden"] .buy .rating { display: none; }
[data-availability="pill"] .avail {
  justify-self: start; padding: 3px 10px; border-radius: var(--pill);
  font-size: .82rem; background-color: var(--success-soft); color: var(--success);
}
[data-availability="pill"] .avail-out_of_stock { background-color: var(--cut-soft); color: var(--cut-ink); }
.buy-row { display: grid; gap: 12px; }
}
/* D20a: on a page every field, select, stepper, button and choice chip is one height,
   a tap inset adding its reach, so two controls on a row sit flush; a button
   is never thinner than it is tall, and on a shared row the field gives.
   A control hidden from sight has no control height (--control: 0). */
:is(form, main) :is(input:not([type="radio"], [type="checkbox"], [type="hidden"], [type="file"], [type="range"], [type="submit"], [type="button"]), select) {
  block-size: calc(var(--control) + 2 * var(--tap-inset, 0px)); min-block-size: 0; min-inline-size: 0; padding-block: 0;
}
:is(form, main, .buybar) :is(button, input:is([type="submit"], [type="button"]), .qty-step, .btn:not(.file-pick), :is([type="radio"], [type="checkbox"]).vh + label, :where(.cats, .cat-head):is([data-tile="chip"], [data-tile="outline"]) .cat), .js form .file-pick {
  min-block-size: calc(var(--control) + 2 * var(--tap-inset, 0px)); min-inline-size: calc(var(--control) + 2 * var(--tap-inset, 0px));
  padding-block: min(8px, var(--control)); line-height: 1.25; flex-shrink: 0;
}
/* A swatch tile is its colour, the control height across, with no padding. */
:is([type="radio"], [type="checkbox"]).vh + label:has(> .swatch) { padding-block: 0; }
/* A dead form is quiet in every dressing, as a dead button is (D13), in muted
   ink that still meets contrast; its accent goes quiet, its edges keep their shape. */
[inert] {
  --text: var(--muted); --accent: var(--line); --accent-soft: var(--bg-soft); --accent-fill: var(--bg-soft);
  --accent-ink: var(--muted); --on-accent: var(--muted);
}
[inert] :is(input, select, textarea, .qty-step, .mode) { background-color: var(--bg-soft); color: var(--muted); }
[inert] :is(label, legend, .field-legend) { color: var(--muted); }
[inert] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--muted); }
@layer theme {
.buy-row[data-quantity="inline"] { display: flex; flex-wrap: wrap; align-items: end; }
/* One counter on the page, the stepper, in either layout (D21). */
.buy-row[data-quantity="inline"] .field-narrow { max-inline-size: none; inline-size: max-content; }
/* The button shares the stepper's line where both fit and takes its own
   below where they do not, never pushing the page wider. */
.buy-row[data-quantity="inline"] .btn { flex: 0 1 auto; min-inline-size: 0; }
/* Columns sized by their words, so a longer platform sentence takes room
   rather than a third line (D22). */
[data-trust="cells"] .trust {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
[data-trust="cells"] .trust-point { justify-content: center; padding: 10px 8px; text-align: center; font-size: .76rem; }
[data-trust="cells"] .trust-point + .trust-point { border-inline-start: 1px solid var(--line); }
}
/* Three side by side cannot hold a store's sentence on a phone: one a row. */
@media (max-width: 479px) {
@layer theme {
  [data-trust="cells"] .trust { grid-auto-flow: row; }
  [data-trust="cells"] .trust-point + .trust-point { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}

}
@layer theme {
[data-trust="cells"] .trust-point .ico { display: none; }
[data-delivery="hidden"] :is(.policy, .delivered-in) { display: none; }
.prod[data-whatsapp="under"] .btn-wa { justify-self: start; }
.prod[data-whatsapp="under"] .btn-wa .ico { display: none; }
[data-zoom="framed"] .zoom-img { background-color: #ffffff; padding: 14px; border-radius: var(--radius); }
[data-zoom="framed"] .zoom-close {
  position: absolute; inset-block-start: -16px; inset-inline-end: -16px;
  inline-size: 44px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: var(--pop);
}
[data-zoom="framed"] .zoom-close::before { content: "\2715"; font-size: 1rem; }
[data-stepper="separate"] .qty { gap: 8px; }
[data-stepper="separate"] .qty-step { border-radius: var(--radius-sm); }
[data-stepper="separate"] .qty input[type="number"] { border-inline: 1px solid var(--line-strong); border-radius: var(--radius-sm); }

/* The order form. */
.express[data-price="accent"] .ticket-line.is-grand dd { color: var(--accent-ink); }
.ticket-head:has(.ticket-mark) { display: flex; align-items: center; gap: 12px; }
.ticket-mark {
  display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-sm); background-color: var(--accent-soft); color: var(--accent-ink);
}
.express[data-groups="numbered"] .fields { counter-reset: group; }
.express[data-groups="numbered"] .field-legend {
  display: flex; align-items: center; gap: 10px; counter-increment: group;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: calc(.08em * var(--track-scale, 1));
}
.express[data-groups="numbered"] .field-legend::before {
  content: counter(group); display: grid; place-items: center; flex: none;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background-color: var(--text); color: var(--bg); font-size: .72rem; letter-spacing: 0;
}
.express[data-modes="segmented"] .field[data-kind="choice"] { grid-column: 1 / -1; }
/* Each choice is the control (D20a): side by side, an unchosen one in its
   hairline, the chosen one filled; the row draws no box of its own. */
.express[data-modes="segmented"] .modes-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
}
.express[data-modes="segmented"] .mode { border: 0; border-radius: var(--pill); background-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.express[data-modes="segmented"] .mode-in:checked + .mode { background-color: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.express[data-ticket="panel"] .ticket-list { padding: 14px 16px; border-radius: var(--radius-sm); background-color: var(--bg-soft); }
.express[data-submit="panel"] .express-end {
  justify-content: flex-end; padding: 12px 14px; border-radius: var(--radius-sm); background-color: var(--bg-soft);
}
.express[data-submit="panel"] .express-end .btn .ico { inline-size: 18px; block-size: 18px; }
.express[data-refusal="panel"] .form-bad {
  padding: 12px 14px; border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--cut); background-color: var(--cut-soft);
}
.express[data-refusal="panel"] .field-bad :is(input, select, textarea) { background-color: var(--cut-soft); }

/* The reviews. */
.reviews[data-style="plain"] .review-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.reviews[data-style="plain"] .review-mark .h-sec { margin: 0; }
.reviews[data-style="plain"] .stars { display: none; }
.reviews[data-style="plain"] .review { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.reviews[data-style="plain"] .review-form .fields { grid-template-columns: minmax(0, 1fr); inline-size: min(100%, 28rem); }

/* The specs beside the delivery terms. */
.facts { display: grid; gap: 18px; }
}
@media (min-width: 768px) {
@layer theme {
  .facts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; }
}

}
@layer theme {
.facts[data-surface="carded"] { background-color: transparent; border: 0; box-shadow: none; padding: 0; }
.facts[data-surface="carded"] > .facts-card {
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface); box-shadow: var(--shadow);
}
.facts .h-sec { margin-block-end: 10px; }
.facts .spec-rows { margin-block-start: 0; }
.facts-lines { display: grid; gap: 8px; margin: 8px 0 0; font-size: .9rem; color: var(--muted); }

/* The listing's sort as one small pill at the end of its row. */
.sort[data-shape="compact"] {
  background-color: var(--surface); border: 1px solid var(--line);
  inline-size: fit-content; margin-inline-start: auto; flex-wrap: nowrap; gap: 4px;
  padding-block: 0; padding-inline: 14px 4px; border-radius: var(--pill); box-shadow: none;
}
/* Beside a heading the row already spreads it to the end, and once the row
   wraps it starts the new line under the heading. */
.strip-head > .sort[data-shape="compact"] { margin-inline-start: 0; }
.sort[data-shape="compact"] label {
  flex-basis: auto; font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted);
}
.sort[data-shape="compact"] select { flex: 0 1 auto; padding: 6px 10px; border: 0; background-color: transparent; font-size: .88rem; }
.sort[data-shape="compact"] .btn { min-block-size: 44px; padding: 6px 14px; }
[data-empty="start"] .empty, .empty[data-empty="start"] { justify-items: start; text-align: start; padding-block: 4px; font-size: .92rem; }
.cat-mono {
  display: grid; place-items: center; inline-size: 100%; block-size: 100%;
  font-size: 1.125rem; font-weight: 700; color: var(--muted); background-color: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The empty cart as a card with its ways on, and the store's front as a
   gradient panel with its first flagged product. */
.empty-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
}
/* D22c: below 480px the ways stack full width, whatever their words' length. */
@media (max-width: 479px) {
@layer theme { .empty-ways { flex-direction: column; justify-self: stretch; } .empty-ways > .btn { inline-size: auto; }
} 
}
@layer theme {
.empty[data-empty="card"] { padding: 40px 24px; border-radius: var(--radius); background-color: var(--bg-soft); }
.empty-mark {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  border-radius: 50%; background-color: var(--surface); color: var(--muted);
}
.empty-mark .ico { inline-size: 30px; block-size: 30px; }
.strip-hero {
  position: relative; overflow: hidden; display: grid; gap: 0; align-items: center;
  padding: 0; border-radius: 24px;
  --hero-ground: var(--accent-fill); --hero-ink: var(--on-accent);
  background-color: var(--hero-ground); color: var(--hero-ink);
  background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000000));
}
.strip-hero::before {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: -10%;
  inline-size: 50%; block-size: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent);
}
}
@media (min-width: 768px) {
@layer theme {
  .strip-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

}
@layer theme {
.strip-hero-words { position: relative; display: grid; gap: 12px; justify-items: start; padding: 24px; }
.strip-hero-eyebrow { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.strip-hero-title { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.25; color: inherit; }
.strip-hero-cta { margin-block-start: 12px; padding: 10px 24px; font-size: .875rem; font-weight: 700; background-color: var(--hero-ink); color: var(--hero-ground); }
.strip-hero-media {
  position: relative; display: block; justify-self: center; inline-size: min(100% - 48px, 220px);
  margin: 0 24px 24px; border-radius: 16px; overflow: hidden; background-color: var(--surface); box-shadow: var(--pop);
}
/* D3: a hero's picture is decoration and covers its frame. */
.strip-hero-img, .strip-hero-media .ph { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
}
@media (min-width: 768px) {
@layer theme {
  .strip-hero-words { padding: 48px; }
  .strip-hero-title { font-size: 2.25rem; }
  .strip-hero-media { inline-size: min(100% - 64px, 384px); margin: 32px; }
}

}
@layer theme {

/* The chrome. */
[data-glow="off"][data-tone="inverse"]::after { display: none; }
.util[data-phone="always"] .util-a[href^="tel:"] { display: inline-flex; }
.util[data-locales="words"] .util-globe {
  display: inline-flex; align-items: center; padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line); color: var(--muted);
}
.util[data-locales="words"] .locales { gap: 2px; }
.util[data-locales="words"] .locale { padding-inline: 4px; background-color: transparent; color: var(--muted); }
.util[data-locales="words"] .locale.is-here { background-color: transparent; color: var(--text); font-weight: 700; }
.head-row[data-search="inset"] .search input {
  border: 1.5px solid var(--line); border-radius: var(--pill); padding-inline: 18px 54px;
}
.head-row[data-search="inset"] .search-go {
  position: absolute; inset-block: 1px; inset-inline-end: 1px;
  inline-size: 44px; min-block-size: 44px; padding: 0; justify-content: center; border-radius: 50%;
}
.head-row[data-search="inset"] .search-word {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.head-a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-size: .88rem; font-weight: 500; color: var(--muted); overflow-wrap: break-word; }
.head-a .ico { inline-size: 18px; block-size: 18px; }
.head-call { color: var(--accent-ink); font-weight: 600; }
}
@media (max-width: 599px) {
@layer theme {
  .head-a { display: none; }
}

}
@media (min-width: 600px) {
@layer theme {
  /* A cart that is a word is as wide as its word; the 44px floor is for the glyph alone. */
  .head-row[data-cart="label"] .cart-link { min-inline-size: 0; }
  .head-row[data-cart="label"] .cart-word {
    position: static; inline-size: auto; block-size: auto; margin: 0;
    overflow: visible; clip-path: none; font-size: .88rem; font-weight: 500;
  }
  .head-row[data-cart="label"] .cart-total { display: none; }
}

}
@layer theme {
.head-row[data-names="truncate"] .suggest-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav[data-layout="categories-bar"] .nav-row { gap: 4px; }
.nav[data-layout="categories-bar"] .nav-cats-open { position: relative; flex: none; }
.nav[data-layout="categories-bar"] .nav-cats-open > .nav-link { gap: 8px; }
.nav[data-layout="categories-bar"] .nav-link { font-size: .875rem; font-weight: 500; color: var(--muted); }
.nav[data-layout="categories-bar"] .nav-link:hover { color: var(--accent-ink); }
.nav[data-layout="categories-bar"] .nav-cats-open > .nav-link .ico:first-child { inline-size: 18px; block-size: 18px; }
.nav[data-layout="categories-bar"] .nav-panel {
  position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 45;
  min-inline-size: 16rem; max-block-size: 70vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--pop);
}
.nav[data-layout="categories-bar"] .nav-roots {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.nav[data-layout="categories-bar"] .nav-roots::-webkit-scrollbar { display: none; }
.nav[data-layout="categories-bar"] .nav-roots > li { flex: none; }
}
/* A STRIP FADES AN EDGE ONLY WHEN THERE IS MORE THAT WAY, AND NEVER HIDES
   MORE THAN IS HIDDEN.
   A fade on an edge with nothing beyond it is a lie about the page; so is a
   42px fade over a strip that scrolls by one. A row crowded by 0.94px had its
   last word covered for a pixel of scroll.
   So each length is at most the distance left that way: min(42px, remaining).
   The two lengths are registered properties, zero to begin with, so a strip
   with nothing to scroll has an inactive timeline and wears no fade. The
   gradient's first stop is the inline START in both directions of writing,
   which is why the direction flips with dir. */
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* The start fade is how far the reader HAS come, capped: a range measured in
   pixels from the beginning says exactly that. The end fade is how far is
   LEFT, over a range measured back from the end.
   Exact for every strip, including one whose whole scroll is shorter than the
   fade: a range offset is not clamped to the scroller, so a strip with one
   pixel of room runs its range from -41px to 1px, sits at 41/42 of it at rest
   and draws one pixel. v0.5.156 believed otherwise and had a script measure
   this case; the script's values never reached the page, because the rule
   meant to stop the animation never outranked the one that starts it, and
   every number measured then was already this stylesheet's. */
@keyframes tk-fade-start { from { --fade-start: 0px; } to { --fade-start: 42px; } }
@keyframes tk-fade-end { from { --fade-end: 42px; } to { --fade-end: 0px; } }
@layer theme {

.nav[data-layout="flat-bar"] .nav-roots,
.nav[data-layout="categories-bar"] .nav-roots,
.rt table {
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)), transparent 100%);
}
.nav[data-layout="flat-bar"] .nav-roots:dir(rtl),
.nav[data-layout="categories-bar"] .nav-roots:dir(rtl),
.rt table:dir(rtl) {
  mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)), transparent 100%);
}
/* A card row's fade is never wider than its side gutter. */
.row-track {
  mask-image: linear-gradient(to right, transparent 0, #000 min(var(--fade-start), var(--gutter)),
    #000 calc(100% - min(var(--fade-end), var(--gutter))), transparent 100%);
}
.row-track:dir(rtl) {
  mask-image: linear-gradient(to left, transparent 0, #000 min(var(--fade-start), var(--gutter)),
    #000 calc(100% - min(var(--fade-end), var(--gutter))), transparent 100%);
}
}
@supports (animation-timeline: scroll()) {
@layer theme {
  .nav[data-layout="flat-bar"] .nav-roots,
  .nav[data-layout="categories-bar"] .nav-roots,
  .row-track,
  .rt table {
    animation: tk-fade-start linear, tk-fade-end linear;
    animation-timeline: scroll(self inline), scroll(self inline);
    animation-range: 0 42px, calc(100% - 42px) 100%;
    animation-fill-mode: forwards, backwards;
  }
}

}
@layer theme {
.foot-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .92rem; font-weight: 700; color: var(--text); }
.foot-head::before { content: ""; inline-size: 3px; block-size: 1.1em; border-radius: 2px; background-color: var(--accent); }
.foot-reach .foot-contact { margin-block-start: 0; gap: 8px; }
.foot-reach .foot-contact a { gap: 8px; }
.foot-reach .foot-contact .ico { display: inline-block; inline-size: 15px; block-size: 15px; }
.foot-main[data-brand="wordmark"] .foot-store { font-size: 1.25rem; font-weight: 900; letter-spacing: calc(-.01em * var(--track-scale, 1)); }
.foot-logo { block-size: 40px; inline-size: auto; margin-block-end: 10px; object-fit: contain; }
/* The cart in one column with its total on a row of its own, lines edited by a
   plain field and a word; the order as one centred column. */
.cart[data-totals="row"] { grid-template-columns: minmax(0, 1fr); max-inline-size: 46rem; margin-inline: auto; }
.cart[data-totals="row"] > .totals {
  position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 0 0; border: 0; border-block-start: 1px solid var(--line); border-radius: 0; background-color: transparent; box-shadow: none;
}
.cart[data-totals="row"] > .totals .ticket-head { flex: 1 1 100%; }
.cart[data-totals="row"] .total-list { flex: 1 1 16rem; }
/* D20a: the field and its button share the row in every language; the field gives. */
.cart[data-totals="row"] .coupon { display: flex; align-items: end; gap: 8px; flex: 1 1 100%; }
.cart[data-totals="row"] .coupon .field { flex: 1 1 0; min-inline-size: 0; }
.cart[data-totals="row"] .coupon .btn { flex: none; }
.cart[data-totals="row"] .btn-block { display: inline-flex; inline-size: auto; margin-inline-start: auto; }
.main > .wrap:has(.cart[data-totals="row"]) > [data-type="page-heading"] .page-head,
.main > .wrap:has(.empty[data-empty="card"]) > [data-type="page-heading"] .page-head { inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; }
.main > .wrap:has(.empty[data-empty="card"]) > [data-type="page-heading"] .page-head { justify-items: center; text-align: center; }
.empty[data-empty="card"] { inline-size: 100%; max-inline-size: 36rem; margin-inline: auto; }
.empty[data-empty="card"] > p:not([class]) { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.empty[data-empty="card"] .btn:not(.btn-quiet) { background-color: var(--accent-fill); color: var(--on-accent); }

/* The checkout reads as one column: the heading, the lines it buys and the
   form that buys them share the cart's own width (render-context.md 5.11). */
.main > .wrap:has(.cart[data-summary]) > :is([data-type="page-heading"], [data-type="cart-contents"], [data-type="express-order"]) {
  inline-size: 100%; max-inline-size: 46rem; margin-inline: auto;
}
.cart[data-summary] { grid-template-columns: minmax(0, 1fr); }

/* This device's orders (render-context.md 5.12): one row per order, the
   serial and its total on a line, when it was placed and where it stands
   under them, each row the whole of a way into that order. */
.main > .wrap:has(> [data-type="order-list"]) > :is([data-type="page-heading"], [data-type="order-list"]) {
  inline-size: 100%; max-inline-size: 46rem; margin-inline: auto;
}
.orders { display: grid; margin: 0; }
.orders[data-surface="carded"] {
  padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface); box-shadow: var(--shadow);
}
.order-row + .order-row { border-block-start: 1px solid var(--line); }
.order-a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "serial total" "when status";
  align-items: baseline; gap: 4px 12px;
  min-block-size: 44px; padding-block: 14px; color: var(--text); text-decoration: none;
}
.order-a:hover .order-serial { text-decoration: underline; }
.order-serial { grid-area: serial; font-weight: 700; }
.order-total { grid-area: total; font-weight: 700; text-align: end; white-space: nowrap; }
.order-when { grid-area: when; font-size: .875rem; }
.order-status { grid-area: status; justify-self: end; font-size: .875rem; color: var(--muted); }
/* An order's road: a dot per step joined by a rule, a reached dot filled, the
   current one a ring, and every column as tall as the tallest. */
.order-row:has(> .order-road) .order-a { padding-block-end: 10px; }
.order-road {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 0; padding: 0 0 16px; list-style: none;
}
.road-step {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px;
  padding-inline: 2px; text-align: center; font-size: .75rem; line-height: 1rem; font-weight: 600;
  color: var(--text); overflow-wrap: normal;
}
.road-step::before {
  content: ""; box-sizing: border-box; inline-size: 12px; block-size: 12px; border-radius: 50%;
  border: 2px solid var(--success); background-color: var(--success);
}
.road-step:not(:last-child)::after {
  content: ""; position: absolute; inset-block-start: 5px; inset-inline-start: calc(50% + 8px);
  inline-size: calc(100% - 16px); block-size: 2px; background-color: var(--line-strong);
}
.road-step[data-state="done"]::after { background-color: var(--success); }
.road-step[data-state="current"]::before {
  background-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 20%, transparent);
}
.road-step[data-state="todo"] { color: var(--muted); font-weight: 400; }
.road-step[data-state="todo"]::before { border-color: var(--line-strong); background-color: transparent; }
:is(.page-head, .platform)[data-scale="compact"] h1 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); line-height: 1.3; }
.order-view[data-layout="centered"] { display: grid; gap: 18px; max-inline-size: 38rem; margin-inline: auto; }
.order-view[data-layout="centered"] .done { margin: 0; }
.order-view[data-layout="centered"] .done-head { justify-items: center; text-align: center; }
.order-view[data-layout="centered"] .done-mark { inline-size: 64px; block-size: 64px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.order-view[data-layout="centered"] .done-title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.order-view[data-layout="centered"] .done-steps { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.order-view[data-layout="centered"] .done-step { border: 1px solid var(--line); }
.order-view[data-layout="centered"] .cart { grid-template-columns: minmax(0, 1fr); }
.order-view[data-layout="centered"] .totals { position: static; }
.order-view[data-layout="centered"] .done-actions { display: grid; gap: 10px; margin: 0; }
.order-view[data-layout="centered"] .done-actions .btn { inline-size: 100%; }
.order-view[data-layout="centered"] .done-actions .btn-wa { background-color: transparent; border-color: currentColor; color: var(--whatsapp-ink); }
.order-view[data-layout="centered"] .done-actions .done-track { order: -1; }
.order-view[data-layout="centered"] .done-actions .btn-wa { order: -2; }
.order-view[data-layout="centered"] .done-actions .btn:not(.btn-wa, .done-track) { border-color: transparent; background-color: transparent; color: var(--muted); }
/* ---- the vitrine axes: a narrow column, ink buttons, quiet centred
   headings, a heavy title, ruled lists and forms, and square ways in ------ */
[data-heading="quiet"] .h-sec {
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: calc(.1em * var(--track-scale, 1)); color: var(--muted);
}
[data-align="center"] > .strip-head, [data-align="center"] .strip-head { justify-content: center; text-align: center; }
[data-align="center"] > .strip-head .strip-more { flex-basis: 100%; text-align: center; }
/* D7a: a centred head keeps its words centred on their own row; its sort
   still sits at the head's end. */
[data-align="center"] .strip-head:has(> .sort) { flex-wrap: wrap; }
[data-align="center"] .strip-head:has(> .sort) > .strip-words { flex-basis: 100%; }
[data-align="center"] .strip-head > .sort { margin-inline-start: auto; }
[data-align="center"] > .h-sec { text-align: center; }
.announce[data-voice="caps"] { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.head-row[data-search="bare"] .search-go {
  --control: 0px; position: absolute; inline-size: 1px; block-size: 1px; max-inline-size: 1px; max-block-size: 1px; min-block-size: 0;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.head-row[data-search="bare"] .search-go .ico { display: none; }
.head-row[data-search="bare"] .search input { padding-inline-end: 0; }
.head-row[data-layout="minimal"][data-cart="label"] .cart-link .ico { display: none; }
/* D20: a worded cart keeps its count, as words: "Panier (3)". */
.head-row[data-layout="minimal"][data-cart="label"] .cart-count {
  min-inline-size: 0; padding: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit;
}
.head-row[data-layout="minimal"][data-cart="label"] .cart-count::before { content: "("; }
.head-row[data-layout="minimal"][data-cart="label"] .cart-count::after { content: ")"; }
.head-row[data-layout="minimal"][data-cart="label"] .cart-word {
  position: static; inline-size: auto; block-size: auto; margin: 0;
  overflow: visible; clip-path: none;
}
}
@media (max-width: 599px) {
@layer theme {
  .head-row[data-layout="minimal"] .head-end { flex-wrap: wrap; gap: 0 14px; justify-content: flex-end; }
}

}
@layer theme {
[data-align="center"] > .strip-head .strip-more { justify-content: center; }
.express[data-surface="outlined"] {
  padding: 20px; border: 1px solid var(--text); border-radius: var(--radius); background-color: var(--bg-soft);
}
/* The ways out, the store's links and its languages, travel as one cluster: at
   the row's end beside the note, or on a line of their own under it. */
.foot-ways { display: flex; flex-wrap: wrap; align-items: center; column-gap: inherit; row-gap: inherit; }
.foot-ways li { display: flex; }
/* An inverse line's hairline divides it from columns above; a line that opens
   the footer has nothing to divide from. */
.foot > :first-child > .foot-legal[data-tone="inverse"] { border-block-start-width: 0; }
.foot-note-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0; }
.page-head[data-scale="bold"] { justify-items: var(--align, center); text-align: var(--align-text, center); padding-block: clamp(8px, 2vw, 20px); }
:is(.page-head, .cat-head)[data-scale="bold"] h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 900; letter-spacing: calc(-.02em * var(--track-scale, 1)); line-height: 1.1; }
.cat-head[data-scale="bold"] { justify-items: center; text-align: center; }
.cat-head[data-scale="bold"] .cat-head-words { justify-items: center; }
.strip[data-frame="ruled"] { padding-block-start: clamp(28px, 5vw, 48px); border-block-start: 1px solid var(--line); }
[data-columns="two"] { --grid-gap: 32px; }
[data-columns="two"] { --cols: 2; }
.crumbs-frame[data-style="caps"] .crumbs { font-size: .7rem; text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1)); }
.crumbs-frame[data-style="caps"] .crumbs li:not(:last-child)::after { content: "\00b7"; opacity: 1; }
.sort[data-shape="inline"] {
  inline-size: fit-content; flex-wrap: nowrap; gap: 8px; padding: 0;
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
}
.sort[data-shape="inline"] label { flex-basis: auto; font-size: .8rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.sort[data-shape="inline"] select { flex: none; padding: 6px 10px; font-size: .86rem; }
.sort[data-shape="inline"] .btn {
  min-block-size: 44px; padding: 6px 14px;
  background-color: transparent; color: var(--text); border-color: var(--line-strong);
}
.prod[data-corners="rounded"] :is(.shot-media, .shot .ph, .thumb) { border-radius: 12px; }
.prod[data-brand="under"] .brand-line { font-size: .86rem; text-transform: none; letter-spacing: 0; color: var(--muted); }
.prod[data-scale="bold"] .buy .buy-title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 900; letter-spacing: calc(-.02em * var(--track-scale, 1)); }
/* A badge stays a filled chip (D1a): underline draws its rule along the chip's foot. */
[data-badge="underline"] .price .tag-cut {
  box-shadow: inset 0 -2px 0 currentColor; border-end-start-radius: 0; border-end-end-radius: 0;
}
[data-trust="rows"] .trust { gap: 0; }
[data-trust="rows"] .trust-point { padding-block: 10px; border-block-end: 1px solid var(--line); }
[data-trust="rows"] .trust-point .ico { display: none; }
/* One shape per list, never by the words' length: the sentence under its
   title on a phone, beside it from 480px up. */
[data-trust="rows"] .trust-words { display: grid; gap: 4px 12px; inline-size: 100%; }
[data-trust="rows"] .trust-words strong { font-size: .72rem; text-transform: uppercase; letter-spacing: calc(.14em * var(--track-scale, 1)); }
@media (min-width: 480px) {
  [data-trust="rows"] .trust-words { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  [data-trust="rows"] .trust-words span { text-align: end; }
}
.facts[data-layout="stacked"] { grid-auto-flow: row; justify-items: center; }
.facts[data-layout="stacked"] > .facts-card { inline-size: min(100%, 48rem); }
.facts[data-layout="stacked"] .h-sec { text-align: center; }
.facts[data-layout="stacked"] .spec-row dt { font-size: .74rem; text-transform: uppercase; letter-spacing: calc(.14em * var(--track-scale, 1)); }
.facts[data-layout="stacked"] .spec-row dd { font-size: 1rem; font-weight: 500; }
.facts[data-layout="stacked"] :is(.delivered-in, .facts-lines) { text-align: center; }
.express[data-pairs="stable"] :is(.fields, .field-group) > :is(.field:first-child:not(:only-child), .field[data-kind="choice"], .field[data-when], .field[data-kind="textarea"], .field[data-kind="checkbox"]) {
  grid-column: 1 / -1;
}
.express[data-modes="ruled"] .field[data-kind="choice"] { grid-column: 1 / -1; }
/* Its rules are drawn inside the row, so the row is its choices' height (D20a). */
.express[data-modes="ruled"] .modes-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  box-shadow: inset 0 1px var(--rule-ink, var(--text)), inset 0 -1px var(--rule-ink, var(--text));
}
.express[data-modes="ruled"] .mode {
  border: 0; border-radius: 0; background-color: transparent;
  font-size: .76rem; text-transform: uppercase; letter-spacing: calc(.14em * var(--track-scale, 1));
}
.express[data-modes="ruled"] .mode-in:checked + .mode { background-color: var(--text); color: var(--bg); box-shadow: none; }
.express[data-ticket="caps"] .ticket-line dt { font-size: .78rem; text-transform: uppercase; letter-spacing: calc(.16em * var(--track-scale, 1)); }
.express[data-ticket="caps"] .ticket-line.is-grand dd { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 900; }
.express[data-refusal="panel"] .field-bad :is(input, select, textarea) { box-shadow: 0 0 0 1px var(--cut); }
.prose[data-width="narrow"] { inline-size: 100%; max-inline-size: 48rem; margin-inline: auto; }
.failure[data-code="ink"] .failure-code { font-weight: 900; color: var(--text); }
.foot-legal .locales { gap: 2px; }
.foot-legal .locale { padding-inline: 4px; }
.foot-legal .locale.is-here { background-color: transparent; color: var(--text); font-weight: 700; }
/* ---- the noor axes, lifted: a column page, a light name, caps ways in, a
   footer on the page's ground, wider listings, square badges, light titles -- */
.head:has(.head-row[data-edge="none"]) { border-block-end-width: 0; }
.head-row[data-logo="beside"] .brand { gap: 10px; }
.announce[data-voice="tracked"] { text-transform: none; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.foot:has(.foot-legal[data-tone="page"]) { background-color: var(--bg); }
.foot-legal[data-tone="page"] { padding-block: 28px; background-color: transparent; }
.foot-legal[data-tone="page"] .foot-end { font-size: .78rem; letter-spacing: calc(.1em * var(--track-scale, 1)); }
.cats[data-heading="hidden"] .h-sec,
.cats[data-heading="hidden"] .strip-head:not(:has(.strip-sub, .strip-more)) {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cats[data-edge="fade"] .cat-strip { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
[dir="rtl"] .cats[data-edge="fade"] .cat-strip { mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
}
@media (min-width: 960px) {
@layer theme {
  [data-span="medium"] { margin-inline: calc((100% - min(64rem, 100vw - 96px)) / 2); }
  [data-span="wide"] { margin-inline: calc((100% - min(68rem, 100vw - 96px)) / 2); }
}

}
@layer theme {
[data-columns="three"] { --grid-gap: 24px; }
[data-columns="three"] { --cols: 2; }
}
@media (min-width: 768px) {
@layer theme { [data-columns="three"] { --cols: 3; }
} 
}
@layer theme {
[data-brand="hidden"] .card-brand { display: none; }
/* D1a: the badge setting shapes every chip that sits with the discount. */
[data-badge="square"] .tag { border-radius: 0; }
[data-badge="square"] .tag-cut { font-weight: 500; letter-spacing: calc(.08em * var(--track-scale, 1)); }
[data-price="regular"] .card-price .now { font-weight: 400; }
[data-pager="words"] .pager-list { display: none; }
[data-pager="words"] .pager-step {
  border-color: transparent; background-color: transparent;
  font-size: .76rem; text-transform: uppercase; letter-spacing: calc(.16em * var(--track-scale, 1));
}
.crumbs-frame[data-style="dash"] .crumbs { font-size: .74rem; text-transform: uppercase; letter-spacing: calc(.16em * var(--track-scale, 1)); }
.crumbs-frame[data-style="dash"] .crumbs ol { text-align: center; }
.crumbs-frame[data-style="dash"] .crumbs li:not(:last-child)::after { content: "\2014"; opacity: 1; }
.prod[data-scale="light"] .buy .buy-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 1.875rem); font-weight: 300; letter-spacing: calc(.01em * var(--track-scale, 1)); line-height: 1.2; }
.prod[data-scale="light"] .price .now { font-size: 1.5rem; font-weight: 500; }
/* Caps letters the chip; a badge stays a filled chip (D1a). */
[data-badge="caps"] .price .tag-cut {
  font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: calc(.16em * var(--track-scale, 1));
}
[data-availability="line"] .avail::before { display: none; }
.prod[data-positive="success"] .avail:not(.avail-out_of_stock, .avail-low_stock) { color: var(--success); }
[data-trust="lines"] .trust { gap: 0; }
[data-trust="lines"] .trust-point { padding-block: 12px; border-block-start: 1px solid var(--line); }
[data-trust="lines"] .trust-point .ico { display: none; }
[data-trust="lines"] .trust-words strong { font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: calc(.2em * var(--track-scale, 1)); }
[data-trust="lines"] .trust-words span { font-size: .8rem; }
.express[data-modes="boxed"] .field[data-kind="choice"] { grid-column: 1 / -1; }
.express[data-modes="boxed"] .modes-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  box-shadow: inset 0 0 0 1px var(--box-ink, var(--line-strong));
}
.express[data-modes="boxed"] .mode {
  border: 0; border-radius: 0; background-color: var(--surface);
  font-size: .76rem; text-transform: uppercase; letter-spacing: calc(.14em * var(--track-scale, 1));
}
.express[data-modes="boxed"] .mode-in:checked + .mode { background-color: var(--text); color: var(--bg); box-shadow: none; }
.express[data-ticket="quiet"] .ticket-line.is-grand dt { font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.express[data-ticket="quiet"] .ticket-line.is-grand dd { font-size: 1.4rem; font-weight: 500; }
.facts[data-layout="flow"] { grid-auto-flow: row; row-gap: 40px; }
.facts[data-layout="flow"] > .facts-card { inline-size: min(100%, 48rem); }
.facts[data-layout="flow"] .spec-row dd { font-weight: 400; }
.express[data-surface="tinted"] {
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background-color: var(--bg-soft);
}
.express[data-surface="tinted"] :is(input:not([type="checkbox"], [type="radio"]), select, textarea):not([aria-invalid="true"]) { background-color: transparent; }
}
/* ---- the souk axes, lifted: a full-width page on a tight rhythm, a small
   heavy heading, five price tiles, red prices and a warm order form -------- */
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="inline"] {
    grid-template-columns: auto minmax(0, 28rem) 1fr; grid-template-areas: "brand search end";
    column-gap: 24px;
  }
}

}
@layer theme {
.head-row[data-search="bare"]:not([data-layout="minimal"]) .search input {
  min-block-size: 40px; padding-inline: 12px; border-radius: var(--radius-sm); background-color: var(--surface);
}
.head-row[data-cart="button"] .cart-link {
  padding-inline: 14px; border-radius: var(--radius-sm);
  border: 1px solid currentColor; color: var(--text); font-size: .88rem; font-weight: 700;
}
.head-row[data-cart="button"] :is(.cart-link .ico, .cart-total) { display: none; }
.head-row[data-cart="button"] .cart-word {
  position: static; inline-size: auto; block-size: auto; margin: 0;
  overflow: visible; clip-path: none; white-space: nowrap;
}
.head-row[data-cart="button"] .cart-count { background-color: var(--accent-fill); color: var(--on-accent); }
}
/* The ways in a merchant asked to show on a phone too. */
@media (max-width: 599px) {
@layer theme {
  .head-row[data-phone="always"] .head-call, .head-row[data-orders="always"] .head-orders { display: inline-flex; }
  .head-row:is([data-phone="always"], [data-orders="always"]) .head-end { flex-wrap: wrap; justify-content: flex-end; }
}

}
@layer theme {
:is(.page-head, .platform)[data-scale="small"] h1 { font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.cats[data-count="hidden"] .cat-count { display: none; }
[data-columns="four"] { --grid-gap: 16px; }
[data-columns="four"] { --cols: 2; }
}
@media (min-width: 768px) {
@layer theme { [data-columns="four"] { --cols: 4; }
} 
}
@layer theme {
[data-columns="five"] { --grid-gap: 8px; }
[data-columns="five"] { --cols: 2; }
}
@media (min-width: 768px) {
@layer theme { [data-columns="five"] { --cols: 4; }
} 
}
@media (min-width: 1024px) {
@layer theme { [data-columns="five"] { --cols: 5; }
} 
}
@layer theme {
.prod[data-price="cut"] .price .now { font-weight: 900; color: var(--cut-ink); }
[data-badge="cut"] .tag { border-radius: 2px; }
[data-badge="cut"] .price .tag-cut { font-weight: 800; }
.prod[data-ratio="square"] :is(.shot-media, .shot .ph) { aspect-ratio: 1; }
[data-trust="tiles"] .trust { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 640px) {
@layer theme {
  [data-trust="tiles"] .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

}
@layer theme {
[data-trust="tiles"] .trust-point {
  justify-content: center; padding: 8px 10px; text-align: center; font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--surface));
  border-radius: var(--radius-sm); background-color: var(--accent-soft);
}
[data-trust="tiles"] .trust-point .ico { display: none; }
[data-trust="tiles"] .trust-words strong { color: var(--accent-ink); }
.express[data-surface="accent"] {
  padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--surface));
  border-radius: var(--radius); background-color: var(--accent-soft);
}
.express[data-price="cut"] .ticket-line.is-grand dd { color: var(--cut-ink); }
.express[data-modes="split"] .field[data-kind="choice"] { grid-column: 1 / -1; }
.express[data-modes="split"] .modes-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.express[data-modes="split"] .mode { border-color: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.express[data-modes="split"] .mode-in:checked + .mode { border-color: var(--accent); background-color: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.express[data-ticket="boxed"] .ticket-list {
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--surface));
  border-radius: var(--radius-sm); background-color: var(--surface);
}
.express[data-ticket="boxed"] .ticket-line { font-size: .84rem; }
.express[data-ticket="boxed"] .ticket-line.is-grand dt { font-size: .86rem; font-weight: 800; text-transform: uppercase; }
.express[data-ticket="boxed"] .ticket-line.is-grand dd { font-size: 1.6rem; font-weight: 900; }
.facts[data-rows="zebra"] .spec-row { padding: 6px 8px; border-block-end: 0; font-size: .8rem; }
.facts[data-rows="zebra"] .spec-row:nth-child(odd) { background-color: var(--bg); }
/* ---- classic's rhythm, lifted from the kit's own margins: sections 40px
   apart, a trail close over the heading it leads to, a sort close over the
   listing it orders ------------------------------------------------------ */
.main > .wrap > [data-type="breadcrumbs"] { margin-block-end: calc(8px - var(--band)); }
.main > .wrap > [data-type="listing-sort"] { margin-block-end: calc(16px - var(--band)); }
/* ---- classic against the kit, measured side by side ---------------------- */
/* The search field: a full-round grey box with the submit inside it. */
.head-row[data-search="inset"] .search input {
  min-block-size: 50px; background-color: var(--bg-soft);
  border: 1px solid var(--line); padding-inline: 20px 64px; font-size: .875rem;
}
.head-row[data-search="inset"] .search input:focus { border-color: var(--accent); background-color: var(--surface); }
.head-row[data-search="inset"] .search-go { inline-size: 44px; min-block-size: 44px; inset-inline-end: 6px; }
/* The ways in: small words, the call word in the accent. */
.head-a, .head-end .cart-link { font-size: .875rem; }
.head-row[data-cart="label"] .cart-word { font-size: .875rem; }
/* The category bar: quiet words that answer in the accent, over a panel that
   floats on its own shadow. */
.nav[data-layout="categories-bar"] .nav-link { padding: 10px 12px; }
.nav[data-layout="categories-bar"] .nav-link:hover { background-color: transparent; color: var(--accent-ink); }
.nav[data-layout="categories-bar"] .nav-panel {
  inline-size: 16rem; padding-block: 8px; border-radius: 12px; border-color: var(--line);
  box-shadow: 0 20px 25px -5px rgba(17, 24, 39, .1), 0 8px 10px -6px rgba(17, 24, 39, .1);
}
.nav[data-layout="categories-bar"] .nav-sub { padding: 8px 16px; font-size: .875rem; border-radius: 0; }
.nav[data-layout="categories-bar"] .nav-sub:hover { background-color: var(--bg-soft); color: var(--accent-ink); }
/* The category strip: grey circles on a soft panel, two lines of name under. */
.cats[data-tile="circle"] { padding: 20px; }
[data-tile="circle"] .cat-strip { gap: 20px; padding: 8px; }
[data-tile="circle"] .cat-media {
  inline-size: 4rem; background-color: var(--surface-2);
  outline: 1px solid var(--line); outline-offset: 0;
}
[data-tile="circle"] .cat:hover .cat-media { outline: 2px solid var(--accent); }
[data-tile="circle"] .cat-name {
  font-size: .75rem; font-weight: 500; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-mono { font-size: 1.125rem; color: var(--muted); background-color: var(--surface-2); box-shadow: none; }
/* The tile: a bordered card with a square photo, the price in the accent. */
/* The plate stands a step off the card it sits in (D3). */
[data-card="carded"] .card-media { aspect-ratio: 1; --plate: var(--bg-soft); }
[data-card="carded"] .card-brand { font-size: .75rem; letter-spacing: calc(.04em * var(--track-scale, 1)); }
[data-card="carded"] .card-title { font-size: .875rem; font-weight: 600; }
[data-card="carded"] .card-price .now { font-size: 1rem; font-weight: 800; }
[data-card="carded"] .card-price .was { font-size: .75rem; line-height: 1rem; }
[data-badge="solid"] .tag { border-radius: 6px; }
[data-badge="solid"] .tag-cut { padding: 2px 8px; font-size: .75rem; font-weight: 700; }
/* The reorder pill the kit draws at the end of a heading row. */
.sort[data-shape="compact"] {
  gap: 4px; padding-block: 0; padding-inline: 12px 4px; border: 1px solid var(--line);
  background-color: var(--surface); border-radius: var(--pill);
}
.sort[data-shape="compact"] label { font-size: .75rem; color: var(--muted); }
.sort[data-shape="compact"] select { padding-block: 6px; padding-inline: 0 4px; font-size: .875rem; font-weight: 500; color: var(--text); }
/* The hero's ladder, the kit's three emerald steps, read off the accent's INK
   rather than off the accent: the words on it are near-white, and a step
   LIGHTER than the accent is a ground that ink was never derived for. The top
   step was the accent lifted a tenth, which put the hero's own eyebrow at
   1.82:1 on it. The ladder keeps its three steps and starts one rung down. */
.strip-hero {
  --hero-ground: var(--accent-ink-fill); --hero-ink: var(--on-accent-ink);
  background-image: linear-gradient(to bottom right,
    var(--accent-ink-fill),
    oklch(from var(--accent-ink-fill) calc(l - .06) calc(c * .85) h) 50%,
    oklch(from var(--accent-ink-fill) calc(l - .13) calc(c * .65) h));
}
/* The footer the kit draws: a 2px accent rule beside each heading, small
   words in rows, and the store's ways to reach it as plain lines. */
.foot-head { gap: 8px; font-size: .875rem; }
.foot-head::before { inline-size: 2px; block-size: 1.15em; border-radius: 0; }
.foot-links, .foot-contact { gap: 8px; font-size: .875rem; }
.foot-reach .social { flex-direction: column; align-items: start; gap: 8px; margin-block-start: 8px; }
.social-words {
  border: 0; padding: 0; border-radius: 0; gap: 8px;
  font-size: .875rem; color: inherit;
}
.social-words:hover { color: var(--on-inverse); border-color: transparent; }
/* The tile's own rhythm, read off the kit: the brand a breath under the photo,
   the title right after it, the price a line below. */
[data-card="carded"] .card-media { border-radius: 12px; }
[data-card="carded"] .card-brand { margin-block-start: 12px; color: var(--muted); }
[data-card="carded"] .card-title { margin-block-start: 2px; }
[data-card="carded"] .card-price { margin-block-start: 8px; }
[data-card="carded"] .card-price .was { color: var(--muted); }
}
/* A band with a subheading leads with a taller rule than a listing's. */


/* ---- what a pointer changes, read off the kit side by side: one ease, one
   beat, and a lift that the tile carries rather than the photo ------------- */

/* Every word or tile a pointer can land on moves to its hover state over the
   same beat. Written once, so a new hover state below inherits the motion.
   The motion lives in the state that starts it, so a load starts none (D19a). */
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  :is(.nav-link, .nav-sub, .head-a, .head-end .cart-link, .util-a, .util .locale,
  .foot-links a, .foot-contact a, .foot-legal a, .social-a, .social-words,
  .crumb-link, .chip, .cat, .cat-name, .cat-media, .card-title, .strip-more,
  .pager-n, .pager-step, .thumb, .suggest-a, .btn, .qty-step, .tab-a):is(:hover, :focus-visible, :active),
  :is(.card-a, .cat, .order-a):is(:hover, :focus-visible) :is(.card-title, .card-media, .cat-media, .cat-name, .order-serial) {
      transition:
        color var(--tap) var(--ease), background-color var(--tap) var(--ease),
        border-color var(--tap) var(--ease), outline-color var(--tap) var(--ease),
        box-shadow var(--tap) var(--ease), filter var(--tap) var(--ease);
    }
}

}
@layer theme {

/* The heads and the store's name are the bright ink of the band they sit on. */
.foot-head, .foot-main[data-brand="wordmark"] .foot-store { color: var(--ink-strong); }

/* The carded tile: the border answers as well as the shadow, and the photo
   grows inside its frame however the tile fits it. */
[data-card="carded"] .card:hover { border-color: var(--line-strong); }
}
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  [data-card="carded"] .card:hover {
    transition: box-shadow var(--tap) var(--ease), transform var(--tap) var(--ease), border-color var(--tap) var(--ease);
  }
}

}

/* A panelled tile holds its photo longer, which is the slower look. */
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  [data-card="panel"] .card-a:hover .card-img { transition-duration: .5s; }
}

}
@layer theme {

/* Two steps rather than a numbered list: words in the accent that take a soft
   ground under the pointer instead of a box that was never drawn. */
[data-pager="steps"] .pager-step {
  border-color: transparent; background-color: transparent;
  padding-inline: 12px; color: var(--accent-ink); font-weight: 500;
}
[data-pager="steps"] .pager-step:hover {
  border-color: transparent; background-color: var(--accent-soft); color: var(--accent-ink);
  filter: brightness(.9);
}

/* The circle strip: a hairline ring the photo tints, an accent ring under the
   pointer, and the name stepping up to full ink with it. */
[data-tile="circle"] .cat-media:has(.cat-img) {
  outline-color: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
[data-tile="circle"] .cat-name { color: var(--muted); }
[data-tile="circle"] .cat:hover .cat-name { color: var(--text); }

/* The hero's call takes a soft ground, the way a white button on colour does. */
.strip-hero-cta:hover { background-color: var(--bg-soft); filter: none; }

/* The strip's way on, and the ways to reach the store in a dark strip. */
.strip-more:hover { color: var(--accent-ink); filter: brightness(.85); }
[data-tone="inverse"] .util-a:hover { color: var(--accent-ink); }

/* The tile's own lines a look can put away: the rating a shopper reads on the
   product page instead, and the add a look sends through that page as well. */
[data-rate="hidden"] .card-rate { display: none; }
[data-add="hidden"] .card-add { display: none; }

/* ---- classic measured against the kit a second time: the tile's reserved
   brand line, the steps at the ends of their row, and a bar that names the
   page in ink rather than under a pill ------------------------------------ */

/* The brand line keeps its height whether or not the product carries one, so
   a row of tiles that mixes branded and unbranded products stays level. */
[data-card="carded"] .card-brand {
  min-block-size: 1rem; line-height: 1rem;
  letter-spacing: calc(.025em * var(--track-scale, 1)); font-weight: 500;
}
[data-card="carded"] .card-title { line-height: 1.43; }

/* Two steps sit at the two ends of the row they close. */
[data-pager="steps"] .pager { justify-content: space-between; }
[data-pager="steps"]:not([data-align="center"]) .pager > span:empty { display: block; }
[data-pager="steps"] .pager-step { border-radius: var(--radius-sm); font-size: .875rem; }

/* The bar says where you are in the accent, the way the kit's does: a pill
   under one word in a row of quiet words reads as a button. */
.nav[data-layout="categories-bar"] .nav-link.is-here {
  background-color: transparent; color: var(--accent-ink);
}

/* The chrome's own heights, measured off the kit: a 28px strip, a header row
   that clears its field by 12px, and a legal line ruled off the columns. */
.util[data-tone="inverse"] .util-a, .util[data-tone="inverse"] .locale { margin-block: -8px; }
.head-row[data-search="inset"] { padding-block: 12px; }
.foot-legal[data-tone="inverse"] {
  border-block-start: 1px solid color-mix(in srgb, var(--inverse-ink) 10%, transparent);
}
.foot-legal[data-tone="inverse"] .foot-end { font-size: .75rem; }

/* A listing that reorders under its own heading rather than beside it: the
   words keep the row, the control takes the line below at the start. */
.listing[data-sort="under"] > .strip-head { display: block; }
.listing[data-sort="under"] > .strip-head .sort { margin-block-start: 12px; }

/* The price tile holds its photo still: it is a dense grid of small pictures,
   and a photo that grows under the pointer moves its neighbours' eyes. */
[data-card="price"] .card-a:hover .card-img { transform: none; }

/* The panel's own measures, read off the kit: the photo keeps 24px of room on
   every side, and the two lines under it are small, quiet and evenly spaced. */
[data-card="panel"] .card-media { padding: 24px; }
[data-card="panel"] .card-title { font-size: .875rem; margin-block-start: 16px; }
[data-card="panel"] .card-price { font-size: .875rem; margin-block-start: 8px; }

/* The editorial tile's words, read off the kit: a 16px breath under the photo,
   and a rail whose words are 14px in 20px of room. */
[data-card="editorial"] .card-title { margin-block-start: 16px; }
[data-tile="outline"] .cat { padding-inline: 20px; }
[data-tile="outline"] .cat-name { font-size: .875rem; }

/* Who sells it, as small as the kits write it: a quiet row on a soft ground,
   or a plain line under the facts. Neither needs the seller's initials. */
.prod[data-seller="quiet"] .sold-by,
.prod[data-seller="line"] .sold-by { font-size: .75rem; gap: 6px; }
.prod[data-seller="quiet"] .sold-mark,
.prod[data-seller="line"] .sold-mark { display: none; }
.prod[data-seller="quiet"] .sold-words,
.prod[data-seller="line"] .sold-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.prod[data-seller="quiet"] .sold-label,
.prod[data-seller="line"] .sold-label { font-size: .75rem; }
.prod[data-seller="quiet"] .sold-words :is(a, span:last-child),
.prod[data-seller="line"] .sold-words :is(a, span:last-child) { font-weight: 500; color: var(--text); }
.prod[data-seller="quiet"] .sold-by { background: var(--bg-soft); padding: 10px 12px; }
.prod[data-seller="line"] .sold-by { background: none; padding: 0; border-radius: 0; }

/* ---- the product page against the four kits ----------------------------- */

/* The price is the page's loudest word wherever the kits write it large. */
.prod[data-scale="compact"] .price .now,
.prod[data-scale="bold"] .price .now { font-size: 1.875rem; font-weight: 900; }

/* The buy button speaks at the page's own scale: the kits write it small and
   wide, and a page that whispers its title whispers its button too. */
/* A scale sizes every button of the buy box alike (D14). */
.prod:is([data-scale="compact"], [data-scale="bold"]) .buy .btn { font-size: .875rem; }
.prod[data-scale="light"] .buy .btn { font-size: .75rem; }
.prod:is([data-scale="compact"], [data-scale="bold"]) :is(.btn-buy, .btn-wa) { padding-inline: 24px; }
.prod[data-scale="light"] :is(.btn-buy, .btn-wa) { padding-inline: 32px; }
.prod[data-scale="bold"] :is(.btn-buy, .btn-wa) { padding-inline: 32px; }

/* Classic's buy box is the kit's own card: 24px of room and no hairline, the
   shadow alone lifting it off the page. */
.prod[data-surface="carded"][data-scale="compact"] > .buy { padding: 24px; border-color: transparent; }

/* Two rows the kits leave out of the buy box: the ways to pass the page on,
   and the rayons the product sits in, which the trail above already names. */
.prod[data-share="hidden"] .shares { display: none; }
.prod[data-categories="hidden"] .in-cats { display: none; }

/* How many products a rayon holds, which the kits leave to the listing. */
.cat-head[data-count="hidden"] [data-count] { display: none; }

/* A rayon's picture fills the column it sits in, however the words above it
   are aligned: a centred head used to shrink it to its own width. */
.cat-head .hero { justify-self: stretch; inline-size: 100%; }

/* The dense tile keeps its made-in mark at the start of the photo's foot: the
   corner rule would otherwise pin it at both ends and stretch it across. */
[data-card="price"][data-tags="corners"] .tag-made { inset-inline-start: 0; inset-inline-end: auto; }

/* A rayon's children scroll inside the head rather than widening the page:
   a grid column sizes to its content until it is given a ceiling, and a
   centred item keeps its own width unless it is told to fill. */
.cat-head-words { grid-template-columns: minmax(0, 1fr); }
.cat-head .cat-strip { justify-self: stretch; max-inline-size: 100%; min-inline-size: 0; }

/* The hero's call points the way it takes the eye, which is the kit's own
   arrow beside the words; it turns with the writing direction. */
.ico-next { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .ico-next { transform: scaleX(-1); }
}

/* ---- the product page's own two halves, measured on the store ------------- */

/* The kits split the page down the middle: the gallery and the buy box take
   the same width, and a page with no card around its halves gives them more
   air between. */
@media (min-width: 1024px) {
@layer theme {
  .prod, [data-surface="carded"].prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  [data-surface="flat"].prod { gap: 32px; }
}

}
@layer theme {
/* The thumbnail rail and the quantity field, off the store: 78px discs of
   photo and a field wide enough for two digits and its own arrows. */
.prod .thumb { inline-size: 78px; }
.prod .thumb-img { inline-size: 78px; block-size: 78px; }
.prod .buy-row #qty { inline-size: 96px; }

/* A heading a look keeps for whoever cannot see the tiles: the words stay in
   the page for a screen reader and take no room, which is what noor's kit
   draws over its own grid. */
[data-heading="hidden"] > .strip-head .h-sec,
[data-heading="hidden"] .strip-words .h-sec,
[data-heading="hidden"] > .h-sec,
[data-heading="hidden"] > .facts-card > .h-sec {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A form whose groups the look does not announce: the legend stays for a
   screen reader and takes no room, which is how three of the four kits draw
   their order form - the fields' own labels carry the shape. */
.express[data-groups="hidden"] .field-legend {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The dense tile hangs its discount at the end of the photo's head, which is
   the corner souk's kit uses; the other three hang it at the start. */
[data-card="price"][data-tags="corners"] .tag-cut {
  inset-inline-start: auto; inset-inline-end: 0;
}

/* ---- classic, pixel for pixel against the kit's own Tailwind ------------- */

/* The utility strip: 12px on a 16px line, the ways to reach the store in the
   band's bright ink with the icon 4px from the words. */
.util[data-tone="inverse"] { line-height: 1rem; }
.util[data-tone="inverse"] .util-a { gap: 4px; color: var(--ink-strong); }
.util[data-tone="inverse"] .util-end { column-gap: 16px; }

/* The header row: the wordmark, the field at 36rem at most, then the ways in
   ending on the content edge, as every other band does. */
.head-row[data-layout="search-first"][data-search="inset"] { column-gap: 24px; padding-block: 12px; }
}
@media (min-width: 700px) {
@layer theme {
  .head-row[data-layout="search-first"][data-search="inset"] { grid-template-columns: auto minmax(0, 36rem) 1fr; }
}

}
/* On a phone the name and the cart share a 28px line over the field, 12px
   above it, both still 44px targets. */
@media (max-width: 699px) {
@layer theme {
  .head-row[data-layout="search-first"][data-search="inset"] { row-gap: 12px; }
  .head-row[data-layout="search-first"][data-search="inset"] :is(.brand, .cart-link) { margin-block: -8px; }
}

}
@layer theme {
.head-row[data-search="inset"] .head-end { column-gap: 16px; line-height: 1.25rem; }

/* The category bar: 14px words on 20px lines, 12px of room each side, 4px
   between neighbours. */
.nav[data-layout="categories-bar"] { line-height: 1.25rem; }
.nav[data-layout="categories-bar"] .nav-roots { gap: 4px; }
.nav[data-layout="categories-bar"] .nav-cats-open > .nav-link { gap: 8px; padding-inline: 12px; }

/* The trail the kit draws: 12px soft words, a slash with 4px either side. */
.crumbs-frame[data-style="compact"] .crumbs {
  font-size: .75rem; line-height: 1rem; font-weight: 400;
  color: var(--text);
}
.crumbs-frame[data-style="compact"] .crumbs li:not(:last-child)::after { opacity: 1; }
.crumbs-frame[data-style="compact"] .crumbs ol { line-height: 28px; }

/* The rayon's own title: 24px bold on a 32px line, no tracking. */
.cat-head[data-scale="compact"] h1 { font-size: 1.5rem; line-height: 2rem; letter-spacing: 0; }

/* The tile's words at the kit's own lines. */
[data-card="carded"] .card-price .now { line-height: 1.5rem; letter-spacing: 0; }
[data-badge="solid"] .tag-cut { line-height: 1rem; letter-spacing: 0; }

/* The reorder pill is the control the buyer sees, so it stands the control
   height (D20a): its select sets it, and its edge is drawn inside it. A focused
   select rings the pill it sits in. */
.sort[data-shape="compact"] { block-size: auto; padding-block: 0; padding-inline: 12px 0; border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.sort[data-shape="compact"] select { line-height: 1.25rem; }
.sort[data-shape="compact"] select:focus-visible { outline: none; }
.sort[data-shape="compact"]:has(select:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 0;
}

/* Classic's chrome at the kit's own measures: a 28px strip with no rule under
   it, a 50 by 44 search pill, 14px and 18px glyphs in the header, 16px and
   14px in the bar, and a 40px bar whose links stay 44px targets. */
.util[data-tone="inverse"] { border-block-end-width: 0; }
.util[data-tone="inverse"] .util-globe .ico { inline-size: 13px; block-size: 13px; }
.head-row[data-search="inset"] .search-go {
  inline-size: 50px; min-inline-size: 50px; block-size: 44px; min-block-size: 44px;
  border-radius: var(--pill);
}
.head-row[data-search="inset"] .head-call .ico { inline-size: 14px; block-size: 14px; }
.head-row[data-search="inset"] .head-call { gap: 6px; }
.head-row[data-search="inset"] .cart-link .ico { inline-size: 18px; block-size: 18px; }
.head-row[data-search="inset"] .cart-link { gap: 4px; }
.nav[data-layout="categories-bar"] .nav-link { margin-block: -2px; }
.nav[data-layout="categories-bar"] .nav-link > .ico:first-child { inline-size: 16px; block-size: 16px; }
.nav[data-layout="categories-bar"] .nav-link .ico-down { inline-size: 14px; block-size: 14px; }
.crumbs-frame[data-style="compact"] .crumbs li:not(:last-child)::after { margin-inline: 5.7px; }

/* The rule under classic's header row, full width, in the kit's faint grey;
   the listing a rayon's head leads to starts 48px below it, and its heading row
   keeps 16px above the tiles. */
.head-bar:has(> .head-row[data-search="inset"]) { border-block-end: 1px solid var(--surface-2); }
.head-row[data-search="inset"] { padding-block: 12px 12px; }
.main > .wrap > :is([data-type="category-header"], [data-type="breadcrumbs"] + [data-type="page-heading"]) + [data-type="product-grid"]:has([data-card="carded"]) { margin-block-start: 8px; }
[data-card="carded"].listing > .strip-head { margin-block-end: 16px; align-items: center; }

/* The tile's discount, as the kit rounds it. */
[data-badge="solid"] .tag { border-radius: 12px; }

/* The locale switch in classic's strip: a faint rule, the globe, then the two
   words 8px apart, the current one bold in the band's bright ink. */
.util[data-tone="inverse"][data-locales="words"] .util-globe {
  padding-inline-start: 16px; margin-inline-end: 8px;
  border-inline-start-color: color-mix(in srgb, var(--ink-strong) 20%, transparent); color: var(--text);
}
.util[data-tone="inverse"][data-locales="words"] .locales { gap: 8px; }
.util[data-tone="inverse"][data-locales="words"] .locale {
  padding-inline: 0; font-size: .75rem; font-weight: 600; color: var(--text);
}
.util[data-tone="inverse"][data-locales="words"] .locale.is-here { font-weight: 700; color: var(--ink-strong); }
/* The field's hint at half its ink, the reorder label at regular weight, and
   the bar's own rule in the header's faint grey. */
.sort[data-shape="compact"] label { font-weight: 400; }
.head:has(.nav[data-layout="categories-bar"]) { border-block-end-color: var(--surface-2); }

/* One rule between classic's header and its bar, a 16px menu glyph, 8px from
   the menu to the first link, and the locale words 8px from their globe. */
.nav[data-layout="categories-bar"] { border-block-start-width: 0; }
.nav[data-layout="categories-bar"] .nav-row { gap: 8px; }
.nav[data-layout="categories-bar"] .nav-cats-open > .nav-link > .ico:first-child { inline-size: 16px; block-size: 16px; }
.util[data-tone="inverse"][data-locales="words"] .util-globe { margin-inline-end: -8px; }

/* Classic's last measured shades: the tile's title and the reorder select in
   the kit's gray-800, its label and the field's words a step softer, the
   locale words in the strip's own face, and figures set proportionally the way
   the kit's prices are. */
[data-card="carded"] .card-title,
.sort[data-shape="compact"] select { color: var(--text); }
.sort[data-shape="compact"] label { color: var(--muted); }
.head-row[data-search="inset"] .search input { color: var(--text); }
.util[data-tone="inverse"] .locale[lang] { font-family: inherit; }
[data-card="carded"] .card-price .was { font-weight: 400; }

/* The field's words at regular weight, and the trail's current step in the
   trail's own voice rather than the page's ink. */
.head-row[data-search="inset"] .search input { font-weight: 400; }
.crumbs-frame[data-style="compact"] [aria-current] { color: inherit; font-weight: inherit; }

/* The search pill sits centred on its field, 3px in from top and bottom. */
.head-row[data-search="inset"] .search-go { inset-block: 0; }

/* ---- classic's lower page against the kit: rows, pager, footer ----------- */

/* Tile rows 16px apart with nothing after the last one, the steps 32px under
   the tiles with the kit's arrow after the word, and the footer 88px below. */
/* The rows' own 16px stops at the last row, so a band ends at its tiles. */
[data-card="carded"] .grid { margin-block-end: -16px; }
[data-pager="steps"] .chev { font-size: 0; }
[data-pager="steps"] .chev::after { content: "\2192"; font-size: .875rem; }
[data-pager="steps"] .pager-step { gap: 4px; }
[data-pager="steps"][data-align="center"] .pager { justify-content: center; }
.foot:has(.foot-main[data-brand="wordmark"]) { margin-block-start: 48px; }

/* Three equal columns 32px apart, 48px of room above and below, headings on a
   20px line against a 2px rule as tall as they are, and rows of links 28px
   apart that stay 44px targets. */
.foot-main[data-brand="wordmark"] { padding-block: 48px; }
.foot-main[data-brand="wordmark"] .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 640px) {
@layer theme {
  .foot-main[data-brand="wordmark"] .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

}
@layer theme {
.foot-main[data-brand="wordmark"] .foot-head { margin-block-end: 12px; line-height: 1.25rem; }
.foot-main[data-brand="wordmark"] .foot-head::before { block-size: 1.25rem; }
.foot-main[data-brand="wordmark"] :is(.foot-links, .foot-contact) { gap: 8px; line-height: 1.25rem; }
.foot-main[data-brand="wordmark"] :is(.foot-links a, .foot-contact a, .social-words) { min-block-size: 44px; margin-block: -12px; }
.foot-main[data-brand="wordmark"] .foot-reach .social { gap: 8px; margin-block-start: 8px; }
.foot-main[data-brand="wordmark"] :is(.foot-contact, .social) .ico { inline-size: 14px; block-size: 14px; }
.foot-main[data-brand="wordmark"] .foot-store { font-size: 1.25rem; line-height: 1.75rem; margin: 0; }

/* The sold-out line on classic's tile: 12px on a 16px line, 4px under the
   price, as the kit writes it. */

/* Classic's legal line: 16px of room above and below a 16px line, its locale
   words still 44px targets reaching over that room. */
.foot-legal[data-tone="inverse"] { padding-block: 16px; line-height: 1rem; }
.foot-legal[data-tone="inverse"] :is(a, .locale) { min-block-size: 44px; margin-block: -14px; }
.foot-legal[data-tone="inverse"] .locale { font-size: .75rem; padding-inline: 0; }
.foot-legal[data-tone="inverse"] .locales { gap: 12px; }

/* Classic's footer inks, as the kit writes them: every quiet word in its
   gray-400 at regular weight, the current locale in white, and no rule above. */
.foot:has(.foot-main[data-brand="wordmark"]) { border-block-start-width: 0; }
:is(.foot-main[data-brand="wordmark"], .foot-legal[data-tone="inverse"]) {
  --foot-quiet: color-mix(in srgb, var(--inverse-ink) 71%, var(--inverse-ground));
}
.foot-main[data-brand="wordmark"] :is(.foot-links a, .foot-contact a, .social-words, .foot-tag),
.foot-legal[data-tone="inverse"] :is(.foot-end, .locale) { color: var(--foot-quiet); font-weight: 400; }
.foot-legal[data-tone="inverse"] .locale.is-here { color: var(--ink-strong); font-weight: 600; }
.foot-main[data-brand="wordmark"] :is(.foot-links a, .foot-contact a, .social-words):hover { color: var(--ink-strong); text-decoration: none; }

/* ---- classic's home against its kit ---------------------------------------- */

/* A ruled band with a second line: one 36px rule beside both lines, the
   heading on its 28px line, the second line 14px in the trail's soft grey. */
[data-heading="rule"] .h-sec { line-height: 1.75rem; letter-spacing: 0; }
[data-heading="rule"] .strip-words:has(.strip-sub) {
  display: grid; grid-template-columns: 6px auto; column-gap: 12px; align-items: center; justify-content: start;
}
[data-heading="rule"] .strip-words:has(.strip-sub)::before {
  content: ""; grid-row: 1 / span 2; inline-size: 6px; block-size: 36px;
  border-radius: 999px; background: var(--accent);
}
[data-heading="rule"] .strip-words:has(.strip-sub) .h-sec::before { display: none; }
/* The heading, not the bar, gives the band its baseline (D7). */
[data-heading="rule"] .strip-words:has(.strip-sub) .h-sec { align-self: baseline; }
[data-heading="rule"] .strip-words:has(.strip-sub) .strip-sub {
  grid-column: 2; margin: 2px 0 0; font-size: .875rem; line-height: 1.25rem;
  color: var(--muted);
}

/* The hero: 32px to the band under it, its eyebrow at 70% of white, a title
   with no tracking, a 40px call, and a photo frame on a hairline ring; it
   casts no shadow, as no button or picture does (D15). */
.main > .wrap > [data-type="featured-strip"]:has(> .strip-hero) { margin-block-end: -8px; }
.strip-hero-eyebrow { color: var(--on-accent-ink); }
.strip-hero-title { letter-spacing: 0; }
}
@media (max-width: 767px) {
@layer theme { .strip-hero-words { gap: 8px; }
} 
}
@layer theme {
.strip-hero-cta {
  min-block-size: 44px; gap: 8px; margin-block: 10px -2px;
  --tap-inset: 2px; border: 2px solid transparent; background-clip: padding-box;
}
.strip-hero-media {
  box-shadow: 0 0 0 1px rgb(0 0 0 / .05);
}

/* The hero's highlight is the kit's: a 256px disc of 10% white, blurred 40px,
   hanging off the start corner. The circle strip sits 6px lower in its panel. */
.strip-hero::before {
  inset-block-start: -64px; inset-inline-start: -64px; inline-size: 256px; block-size: 256px;
  border-radius: 50%; background: rgb(255 255 255 / .1); filter: blur(40px);
}
.cats[data-tile="circle"] .cat-strip { margin-block-start: 8px; }
/* The listing keeps 48px from the featured band above it. */
.main > .wrap > [data-type="featured-strip"] + [data-type="product-grid"]:has([data-card="carded"]) { margin-block-start: 8px; }

/* The circle strip's panel on the kit's faint rule and a 60% soft ground, and
   the hero's eyebrow on a 16px line. */
.cats[data-tile="circle"] { border-color: var(--surface-2); background-color: color-mix(in srgb, var(--bg-soft) 60%, transparent); }
.strip-hero-eyebrow { line-height: 1rem; }
/* The last home shades: second lines at regular weight, circle names in the
   kit's gray-700, and the strip's words on their own 16px line. */
[data-heading="rule"] .strip-sub { font-weight: 400; }
.cats[data-tile="circle"] .cat-name { color: color-mix(in srgb, var(--muted) 62%, var(--text)); }
.util[data-tone="inverse"] :is(.util-a span, .locale) { line-height: 1rem; }

/* ---- classic's product page at the kit's Tailwind scale -------------------- */

.main:has(.prod:is([data-surface="carded"], [data-scale="light"])) .crumbs-frame[data-style="compact"] .crumbs ol { line-height: 1rem; }
.prod[data-surface="carded"][data-scale="compact"] {
  --kit-xs: .75rem; --kit-sm: .875rem; --kit-base: 1rem;
}
.prod[data-surface="carded"][data-scale="compact"] .brand-line { line-height: 1rem; margin: 0; }
.prod[data-surface="carded"][data-scale="compact"] .buy .buy-title {
  font-size: 1.5rem; line-height: 2.0625rem; letter-spacing: 0; margin-block-start: 4px;
}
.prod[data-surface="carded"][data-scale="compact"] .price { line-height: 2.25rem; margin-block-start: 12px; gap: 12px; }
.prod[data-surface="carded"][data-scale="compact"] .price .now { line-height: 2.25rem; }
.prod[data-surface="carded"][data-scale="compact"] .price .was { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.prod[data-surface="carded"][data-scale="compact"] .price-note { font-size: .75rem; line-height: 1rem; font-weight: 400; margin: 4px 0 0; }
.prod[data-surface="carded"][data-scale="compact"] .avail { font-size: .875rem; line-height: 1.25rem; font-weight: 500; margin-block-start: 8px; }
.prod[data-surface="carded"][data-scale="compact"] .lede { font-size: 1rem; line-height: 1.5rem; font-weight: 400; margin-block-start: 12px; }
.prod[data-surface="carded"][data-scale="compact"] .field > label { font-size: .75rem; line-height: 1rem; font-weight: 500; }
.prod[data-surface="carded"][data-scale="compact"] :is(.btn-buy, .btn-wa) { line-height: 1.25rem; }
.prod[data-surface="carded"][data-scale="compact"] .trust-words strong { font-size: .75rem; line-height: 1rem; }
.prod[data-surface="carded"][data-scale="compact"] .trust-words span { font-size: .75rem; line-height: 1.03rem; font-weight: 400; }

.express[data-groups="numbered"] .ticket-title { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: 0; }
.express[data-groups="numbered"] .ticket-sub { font-size: .875rem; line-height: 1.25rem; font-weight: 400; margin-block-start: 0; }
.express[data-groups="numbered"] .field-legend { font-size: .75rem; line-height: 1rem; }
.express[data-groups="numbered"] :is(.field > label, .opts-name, .modes legend) { font-size: .75rem; line-height: 1rem; font-weight: 500; }
.express[data-groups="numbered"] .modes-row { font-size: .75rem; line-height: 1rem; }

/* Classic's buy box, spaced the way the kit's margins space it: no grid gap,
   each line its own distance from the one above. */
.main:has(.prod[data-surface="carded"]) > .wrap > [data-type="breadcrumbs"] { margin-block-end: calc(16px - var(--band)); }
.prod[data-surface="carded"][data-scale="compact"] > .gallery { padding: 16px; }
.prod[data-surface="carded"][data-scale="compact"] > .buy { gap: 0; }
.prod[data-surface="carded"][data-scale="compact"] .buy .buy-title { margin-block-start: 4px; }
.prod[data-surface="carded"][data-scale="compact"] .price { margin-block-start: 8px; }
.prod[data-surface="carded"][data-scale="compact"] .price-note { margin-block-start: 8px; }
.prod[data-surface="carded"][data-scale="compact"] .avail { margin-block-start: 4px; }
.prod[data-surface="carded"][data-scale="compact"] .lede { margin-block: 12px 0; }
.prod[data-surface="carded"][data-scale="compact"] .buy-form { margin-block-start: 24px; gap: 4px; }
.prod[data-surface="carded"][data-scale="compact"] .buy-row { gap: 12px; align-items: end; }
.prod[data-surface="carded"][data-scale="compact"] .buy-row .field { gap: 4px; }
.prod[data-surface="carded"][data-scale="compact"] #qty { block-size: 38px; min-block-size: 38px; }
.prod[data-surface="carded"][data-scale="compact"] > .buy > .btn-wa { margin-block-start: 12px; justify-self: start; }
.prod[data-surface="carded"][data-scale="compact"] .trust { margin-block-start: 16px; }
/* The two buttons paint the kit's 40px and 38px and stay 44px targets. */
.prod[data-surface="carded"][data-scale="compact"] .btn-buy {
  min-block-size: 44px; margin-block: -2px; padding-block: calc((44px - 1lh) / 2 - var(--tap-inset, 0px));
  --tap-inset: 2px; border: 2px solid transparent; background-clip: padding-box;
}
.prod[data-surface="carded"][data-scale="compact"] .btn-wa {
  min-block-size: 44px; margin: -3px; padding-block: calc((44px - 1lh) / 2 - var(--tap-inset, 0px));
  --tap-inset: 3px; border: var(--tap-inset) solid transparent;
  background-clip: padding-box; box-shadow: inset 0 0 0 1px currentColor;
}
.prod[data-surface="carded"][data-scale="compact"] > .buy { border-width: 0; padding: 24px; }
.prod[data-surface="carded"][data-scale="compact"] .price { min-block-size: 2.25rem; align-items: center; margin-block-start: 12px; }
/* The price words share one baseline; each line under it takes the kit's own
   distance; the gallery card has no rule and its thumbnails sit 12px under the
   photo on a 88px row; the order form starts 24px under the two cards. */
.prod[data-surface="carded"][data-scale="compact"] .price { align-items: baseline; }
.prod[data-surface="carded"][data-scale="compact"] .price-note { margin-block-start: 6px; }
.prod[data-surface="carded"][data-scale="compact"] .avail { margin-block-start: 3px; }
.prod[data-surface="carded"][data-scale="compact"] .lede { margin-block-start: 11px; }
.prod[data-surface="carded"][data-scale="compact"] .buy-form { margin-block-start: 25.5px; }
.prod[data-surface="carded"][data-scale="compact"] .buy-row .field { gap: 6.5px; }
.prod[data-surface="carded"][data-scale="compact"] .trust { margin-block-start: 17.5px; }
.prod[data-surface="carded"][data-scale="compact"] > .gallery { border-width: 0; }
.prod[data-surface="carded"][data-scale="compact"] .thumbs { margin-block-start: 12px; padding-block: 4px; }
.main:has(.prod[data-surface="carded"]) > .wrap > [data-type="product-detail"] { margin-block-end: calc(24px - var(--band)); }
.prod[data-surface="carded"][data-scale="compact"] > .buy > .btn-wa { margin-block-start: 9px; }
.prod[data-surface="carded"][data-scale="compact"] .trust { margin-block-start: 18px; }

/* ---- classic's order form at the kit's measures ---------------------------- */

/* A card with no padding of its own: a 20px head over a faint rule, a 20px
   body, the kit's small shadow on a gray-100 ring. */
.express[data-groups="numbered"] {
  padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--surface-2), 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.express[data-groups="numbered"] .ticket-head {
  margin: 0; padding: 20px; gap: 12px; align-items: center;
  border-block-end: 1px solid var(--line-strong); background: none;
}
.express[data-groups="numbered"] .ticket-mark {
  display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px;
  border-radius: 12px; background-color: var(--accent-soft); color: var(--accent-ink);
}
.express[data-groups="numbered"] .ticket-mark .ico { inline-size: 20px; block-size: 20px; }
.express[data-groups="numbered"] .ticket-sub { margin-block-start: 2px; color: var(--muted); }
.express[data-groups="numbered"] form > :not(.ticket-head) { margin-inline: 20px; }
.express[data-groups="numbered"] .fields { padding-block: 20px 0; column-gap: 12px; row-gap: 12px; }
.express[data-groups="numbered"] .field-group { row-gap: 12px; column-gap: 12px; margin-block-start: 8px; }

/* The step mark: a 24px dark disc, the words in 12px bold caps in gray-700,
   then a faint line to the end of the row. */
.express[data-groups="numbered"] .field-legend {
  gap: 8px; block-size: 24px; font-size: .75rem; line-height: 1rem; letter-spacing: calc(.025em * var(--track-scale, 1));
  color: color-mix(in srgb, var(--muted) 62%, var(--text));
}
.express[data-groups="numbered"] .field-legend::before { inline-size: 24px; block-size: 24px; font-size: .75rem; font-weight: 700; }
.express[data-groups="numbered"] .field-legend::after { content: ""; flex: 1; block-size: 1px; background-color: var(--surface-2); }

/* A field: its label 12px medium in gray-500, 4px above a 38px box with 16px
   of room inside, a 12px corner and the kit's gray-200 rule. */
.express[data-groups="numbered"] .field { gap: 4px; }
.express[data-groups="numbered"] :is(.field > label, .modes legend) { color: var(--muted); }
.express[data-groups="numbered"] .field :is(input:where(:not([type="radio"], [type="checkbox"])), textarea) {
  min-block-size: 38px; block-size: 38px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--line); font-size: .875rem; line-height: 1.25rem;
}
.express[data-groups="numbered"] .field textarea { block-size: auto; }

/* The delivery mode: a 42px well on the soft ground with 4px of room, two
   32px choices 6px apart that stay 44px targets. */
.express[data-groups="numbered"][data-modes="segmented"] .modes-row { gap: 6px; }
.express[data-groups="numbered"][data-modes="segmented"] .mode {
  min-block-size: 44px; margin-block: -6px; padding-block: calc((44px - 1lh) / 2 - var(--tap-inset, 0px));
  --tap-inset: 6px; border: 6px solid transparent; border-radius: 14px; background-clip: padding-box;
  font-size: .75rem; line-height: 1rem; font-weight: 500;
  color: var(--muted);
}
.express[data-groups="numbered"][data-modes="segmented"] .mode-in:checked + .mode { font-weight: 600; box-shadow: none; }

/* The rest of classic's order form: the step line reaching the row's end, the
   segment's choices 4px inside their well, the running total at the kit's
   14px with its 24px black amount, and the submit on a soft panel. */
.express[data-groups="numbered"] .field-group { padding-block-start: 0; }
.express[data-groups="numbered"] .field-legend { inline-size: 100%; }
.express[data-groups="numbered"] .fields { padding-block-start: 12px; }
.express[data-groups="numbered"][data-modes="segmented"] .mode { border-inline-width: 0; border-radius: 8px; }
.express[data-groups="numbered"][data-ticket="panel"] .ticket-list {
  margin-block-start: 8px; padding: 16px; border-radius: 12px; gap: 6px; font-size: .875rem; line-height: 1.25rem;
}
.express[data-groups="numbered"] .ticket-line dt { color: var(--muted); font-weight: 400; }
.express[data-groups="numbered"] .ticket-line dd { font-weight: 600; }
.express[data-groups="numbered"] .ticket-line:not(.is-cut) dd { color: var(--text); }
.express[data-groups="numbered"] .ticket-line.is-grand {
  margin-block-start: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--line); font-size: .875rem;
}
.express[data-groups="numbered"] .ticket-line.is-grand dt { font-weight: 700; color: var(--text); }
.express[data-groups="numbered"] .ticket-line.is-grand dd { font-size: 1.5rem; line-height: 2rem; font-weight: 900; letter-spacing: 0; }
.express[data-groups="numbered"][data-submit="panel"] .express-end {
  margin-block: 8px 20px; padding: 16px; border-radius: 12px; background-color: var(--bg-soft); justify-content: end;
}
.express[data-groups="numbered"][data-submit="panel"] .express-end .btn-buy {
  min-block-size: 44px; margin-block: 0; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 32px; gap: 8px;
  border: 0; font-size: .875rem;
}

/* A select is pressed rather than typed into, so it keeps the 44px floor. */
.express[data-groups="numbered"] .field select { padding-inline: 16px; border-radius: 12px; border: 1px solid var(--line); font-size: .875rem; }

/* ---- noor against its kit, measured on the store --------------------------- */

/* The header: 24px of room, the light name in 24px on a 32px line tracked
   .1em, a 20rem underline field with no visible submit, and the ways in as
   12px tracked words 20px apart, the cart underlined in full ink. */
.head-row[data-layout="minimal"][data-brand="light"] { padding-block: 24px; column-gap: 24px; }
}
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="minimal"][data-brand="light"] .search { max-inline-size: 20rem; margin-inline: 16px; }
}

}
@layer theme {
.head-row[data-layout="minimal"][data-brand="light"] .search input {
  min-block-size: 33px; block-size: 33px; padding: 6px 0; font-size: .875rem; line-height: 1.25rem;
  font-weight: 400; letter-spacing: 0; text-transform: none; border-block-end-color: var(--line);
}
.head-row[data-layout="minimal"][data-brand="light"] .head-end { column-gap: 20px; }

/* The page's own title: 60px extralight on a 60px line, the store's line
   under it 16px on a 32px line, 20px apart. */
.page-head[data-scale="display"] { gap: 20px; padding-block: 0; }
:is(.page-head, .platform)[data-scale="display"] h1 { font-size: 3.75rem; line-height: 1; font-weight: 200; }
}
@media (max-width: 639px) {
@layer theme { :is(.page-head, .platform)[data-scale="display"] h1 { font-size: 3rem; }
} 
}
@layer theme {
.page-head[data-scale="display"] .lede { max-inline-size: 36rem; line-height: 2; font-weight: 400; margin: 0; }

/* The rayons as words: a faint rule, 32px under it, 14px tracked words 32px
   apart that stay 44px targets. */
.cats[data-tile="text"] .cat-strip {
  gap: 32px; padding-block-start: 32px; border-block-start-color: var(--surface-2);
}
.cats[data-tile="text"] .cat { min-block-size: 44px; padding: 0 6px 2px; }
.cats[data-tile="text"] .cat-name { font-size: .875rem; line-height: 1.25rem; letter-spacing: calc(.1em * var(--track-scale, 1)); }

/* The panelled tile: 24px of room around a 4:5 photo, the title 16px under
   it in gray-600 on a relaxed line, the price 8px under that, tracked. */
[data-card="panel"] .card-media { aspect-ratio: auto; padding: 24px; border-radius: 2px; }
[data-card="panel"] :is(.card-img, .card-media > .ph) { aspect-ratio: 4 / 5; block-size: auto; }
[data-card="panel"] .card-title {
  margin-block-start: 16px; font-size: .875rem; line-height: 1.625;
  color: color-mix(in srgb, var(--muted) 65%, var(--text));
}
[data-card="panel"] .card-price { margin-block-start: 8px; font-size: .875rem; line-height: 1.25rem; }
[data-card="panel"] .card-price .now { font-size: .875rem; letter-spacing: calc(.025em * var(--track-scale, 1)); font-weight: 400; }
[data-card="panel"][data-columns="three"] .grid { row-gap: 0; }
[data-card="panel"][data-columns="three"] .grid > * { padding-block-end: 48px; }
/* The rows' own 48px stops at the last row, so a band ends at its tiles. */
[data-card="panel"][data-columns="three"] .grid { margin-block-end: -48px; }

/* The footer line: 80px under the page, a faint rule, 32px of room, 12px
   tracked words in gray-400. */
.foot:has(.foot-legal[data-tone="page"]) { margin-block-start: 80px; border-block-start: 1px solid var(--surface-2); }
.foot-legal[data-tone="page"] { padding-block: 32px; }
.foot-legal[data-tone="page"] :is(.foot-end, a, .locale) {
  font-size: .75rem; line-height: 1rem; letter-spacing: calc(.1em * var(--track-scale, 1));
  color: var(--muted);
}
.foot-legal[data-tone="page"] .locale.is-here { color: var(--text); }

/* Noor's rhythm down the page: a 64px top, the rayons 56px under the store's
   line, the reorder control centred where the kit's 28px select sits, and the
   tiles 32px under it. A header with no edge draws no rule. */
body:has(.head-row[data-brand="light"]) .main { padding-block: 64px 40px; }
/* A listing that ends the page keeps its kit section's own 64px under it. */
body:has(.head-row[data-brand="light"]) .main > .wrap > [data-type="product-grid"]:last-child { margin-block-end: 24px; }
}
@media (max-width: 639px) {
@layer theme {
  .head-row[data-layout="minimal"][data-brand="light"] .brand { margin-block: -6px; }
}

}
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="minimal"][data-brand="light"] { display: flex; align-items: center; }
  .head-row[data-layout="minimal"][data-brand="light"] .search { flex: 1 1 0; }
}

}
@layer theme {
.main > .wrap > [data-type="page-heading"]:has(.page-head[data-scale="display"]) + [data-type="category-strip"]:has(.cats[data-tile="text"]) { margin-block-start: calc(56px - var(--band)); }
.sort[data-shape="inline"] label { font-size: .75rem; line-height: 1rem; font-weight: 400; }
[data-card="panel"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: -21.75px; }
[data-card="panel"].listing[data-sort="under"] > .strip-head { margin-block-end: 24.25px; }

/* Noor's field hint at half its ink. */

/* Noor's trail: 12px words tracked .1em in gray-400 on a 28px row, an em dash
   with 8px either side, 16px above the rayon's title. */
.crumbs-frame[data-style="dash"] .crumbs {
  font-size: .75rem; line-height: 1rem; letter-spacing: calc(.1em * var(--track-scale, 1)); font-weight: 400;
  color: var(--muted);
}
.crumbs-frame[data-style="dash"] .crumbs li:not(:last-child)::after { margin-inline: 10.3px; }
.crumbs-frame[data-style="dash"] .crumbs ol { line-height: 28px; }
.crumbs-frame[data-style="dash"] .crumbs [aria-current] { color: inherit; font-weight: inherit; }
.main > .wrap > [data-type="breadcrumbs"]:has([data-style="dash"]) { margin-block-end: calc(16px - var(--band)); }
.main > .wrap > :is([data-type="category-header"], [data-type="breadcrumbs"] + [data-type="page-heading"]) + [data-type="product-grid"] [data-card="panel"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: -15.75px; }

/* ---- noor's product page at the kit's Tailwind scale ----------------------- */

/* A 40px top, the trail 16px over the photo and the buy column, every line of
   the column its own distance from the one above. */
.main:has(> .wrap > [data-type="product-detail"] .prod[data-scale="light"]) { padding-block-start: 40px; }
.main:has(.prod[data-scale="light"]) > .wrap > [data-type="breadcrumbs"] { margin-block-end: calc(16px - var(--band)); }
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .thumbs { margin-block-start: 12px; padding: 4px; gap: 8px; }
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .thumb { inline-size: 80px; block-size: 80px; }
.prod:is([data-scale="light"], [data-scale="bold"]) { --frame-edge: var(--surface-2); }
.prod[data-surface="flat"][data-scale="compact"] { --frame-edge: color-mix(in srgb, var(--line) 50%, var(--surface)); }
/* The kit's thumbnails: a faint 12px frame, the shown one ringed 2px in ink,
   the others at 45% until pointed at. */
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .gallery { --shot-edge: var(--text); --shot-ring: inset 0 0 0 1px var(--text); }
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .thumb { border-color: var(--frame-edge); border-radius: 12px; opacity: .45; }
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .thumb:hover { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
@layer theme {
  .prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) .thumb:hover { transition: opacity .12s, border-color var(--tap) var(--ease), box-shadow var(--tap) var(--ease); }
}

}
@layer theme {
.prod[data-scale="light"] > .buy { gap: 0; }
.prod[data-scale="light"] .buy .buy-title { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: calc(.025em * var(--track-scale, 1)); margin: 0; }
.prod[data-scale="light"] .brand-line { font-size: .875rem; line-height: 1.25rem; margin: 4px 0 0; }
.prod[data-scale="light"] .price { margin-block-start: 12px; line-height: 2rem; align-items: baseline; }
.prod[data-scale="light"] .price .now { line-height: 2rem; letter-spacing: 0; }
.prod[data-scale="light"] .price-note { font-size: .75rem; line-height: 1rem; letter-spacing: calc(.025em * var(--track-scale, 1)); font-weight: 400; margin: 6px 0 0; }
.prod[data-scale="light"] .avail { font-size: .875rem; line-height: 1.25rem; font-weight: 500; margin-block-start: 4px; }
.prod[data-scale="light"] .lede {
  font-size: 1rem; line-height: 1.5rem; font-weight: 400; margin: 12px 0 0;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}

/* The quantity box and the two buttons: a 24px line over a 38px box, a 40px
   ink button and a 38px outlined one, both painted inside 44px targets. */
.prod[data-scale="light"] .buy-form { margin-block-start: 20px; }
.prod[data-scale="light"] .buy-row { gap: 12px; align-items: end; }
.prod[data-scale="light"] .buy-row .field { gap: 4px; }
.prod[data-scale="light"] .buy-row .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; }
.prod[data-scale="light"] #qty {
  inline-size: 96px; block-size: 38px; min-block-size: 38px; padding: 8px 16px;
  font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.prod[data-scale="light"] .buy-form .btn-buy {
  min-block-size: 44px; margin-block: -2px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 30px;
  --tap-inset: 2px; border: 2px solid transparent; background-clip: padding-box;
  font-size: .75rem; line-height: 1rem;
}
.prod[data-scale="light"] > .buy > .btn-wa {
  justify-self: start; min-block-size: 44px; margin: 9px calc(-1 * var(--tap-inset)) calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem;
}

/* The promises: 10px rows between faint rules, a caps title tracked .2em over
   its 12px line. */
.prod[data-scale="light"][data-trust="lines"] .trust { margin-block-start: 24px; border-block-end: 1px solid var(--surface-2); }
.prod[data-scale="light"][data-trust="lines"] .trust-point { padding-block: 10px; border-block-start-color: var(--surface-2); }
.prod[data-scale="light"][data-trust="lines"] .trust-words { display: grid; gap: 2px; }
.prod[data-scale="light"][data-trust="lines"] .trust-words strong { font-size: .75rem; line-height: 1rem; font-weight: 400; letter-spacing: calc(.2em * var(--track-scale, 1)); color: var(--text); }
.prod[data-scale="light"][data-trust="lines"] .trust-words span { font-size: .75rem; line-height: 1rem; font-weight: 400; color: var(--muted); }

/* Noor's order form: 40px under the column, a 20px well on a faint ground,
   12px fields with 38px boxes, the delivery mode as two 32px caps cells a
   hairline apart, a ruled ticket and a 40px ink submit. */
.main:has(.prod[data-scale="light"]) > .wrap > [data-type="express-order"]:has(.express[data-surface="tinted"]) { margin-block-start: calc(40px - var(--band)); }
.express[data-surface="tinted"] { padding: 20px; border-color: var(--line); background-color: color-mix(in srgb, var(--bg-soft) 60%, transparent); }
.express[data-surface="tinted"] .ticket-head { margin-block-end: 16px; }
.express[data-surface="tinted"] .ticket-title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; }
.express[data-surface="tinted"] .ticket-sub {
  font-size: .875rem; line-height: 1.25rem; font-weight: 400; margin-block-start: 2px;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.express[data-surface="tinted"] :is(.fields, .field-group) { row-gap: 12px; column-gap: 12px; }
.express[data-surface="tinted"] .fields { margin-block: 0; }
.express[data-surface="tinted"] .field { gap: 4px; }
.express[data-surface="tinted"] .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; color: var(--muted); }
.express[data-surface="tinted"] .field :is(input:not([type="radio"], [type="checkbox"]), textarea, select) {
  padding: 8px 16px; font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.express[data-surface="tinted"] .field :is(input:where(:not([type="radio"], [type="checkbox"])), textarea) { block-size: 38px; min-block-size: 38px; }
.express[data-surface="tinted"] .field textarea { block-size: auto; }
.express[data-surface="tinted"] .modes { gap: 4px; }
.express[data-surface="tinted"] .modes legend { font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--muted); }
.express[data-surface="tinted"][data-modes="boxed"] .modes-row { margin-block-start: 4px; --box-ink: var(--line); background: none; }
.express[data-surface="tinted"][data-modes="boxed"] .mode {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 8px;
  --tap-inset: 6px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  font-size: .75rem; line-height: 1rem; font-weight: 400; letter-spacing: calc(.1em * var(--track-scale, 1));
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.express[data-surface="tinted"][data-modes="boxed"] .mode-in + .mode ~ .mode { box-shadow: inset 1px 0 0 var(--line); }
.express[data-surface="tinted"][data-modes="boxed"] .mode-in:checked + .mode { color: var(--bg); }
.express[data-surface="tinted"] .ticket-list { gap: 0; margin-block: 20px 12px; border-block: 1px solid var(--line); font-size: .875rem; line-height: 1.25rem; }
.express[data-surface="tinted"] .ticket-line { padding-block: 10px; align-items: baseline; font-size: .875rem; line-height: 1.25rem; }
.express[data-surface="tinted"] .ticket-line + .ticket-line { border-block-start: 1px solid var(--surface-2); }
.express[data-surface="tinted"] .ticket-line.is-grand { padding-block: 12px; border-block-start-color: var(--line); }
.express[data-surface="tinted"] .ticket-line.is-grand dt { font-size: .75rem; line-height: 1rem; font-weight: 400; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.express[data-surface="tinted"] .ticket-line.is-grand dd { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.express[data-surface="tinted"] .express-end .btn-buy {
  min-block-size: 44px; margin-block: -2px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 38px;
  --tap-inset: 2px; border: 2px solid transparent; background-clip: padding-box;
  font-size: .75rem; line-height: 1rem;
}

/* Under noor's order form: the kit's 40px and 48px steps, the description at
   14px in gray-700 on a 768px measure, the facts as two tracked caps heads
   over 14px rows, and the reviews stacked under an 18px title. */
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"])) > .wrap > :is([data-type="product-description"], [data-type="specs-delivery"]) { margin-block-start: calc(40px - var(--band)); }
.main:has(.prod[data-scale="light"]) > .wrap > :is([data-type="product-reviews"], [data-type="similar-products"]) { margin-block-start: calc(48px - var(--band)); }
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt {
  max-inline-size: 48rem; font-size: .875rem; line-height: 1.65;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
}
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt > * + * { margin-block-start: 12px; }
/* Inside classic's padded card a merchant's section heading keeps its 28px
   above it, even when it opens the text. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .prose .rt > :is(h2, h3) { margin-block-start: 28px; }
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt :is(p, li, strong, b) { color: inherit; }
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt :is(h2, h3) {
  font-family: inherit; font-size: 1.03125rem; line-height: 1.25; font-weight: 600; letter-spacing: 0;
  color: color-mix(in srgb, var(--muted) 29%, var(--text));
}
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt :is(h4, h5, h6) { font-weight: inherit; color: inherit; }
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt ul { padding-inline-start: 24px; }
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt li { margin-block: 4px; padding-inline-start: 4px; }

.facts[data-layout="flow"] .h-sec { margin-block-end: 16px; }
.facts[data-layout="flow"] .spec-row { font-size: .875rem; line-height: 1.25rem; border-block-end: 0; }
.facts[data-layout="flow"] .spec-row + .spec-row { border-block-start: 1px solid var(--surface-2); }
.facts[data-layout="flow"] .facts-lines {
  gap: 8px; margin-block-start: 16px; font-size: .875rem; line-height: 1.625;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}

.main:has(.prod[data-scale="light"]) .reviews { padding-block-start: 0; border-block-start: 0; }
.main:has(.prod[data-scale="light"]) .reviews[data-style="plain"] .review-mark { display: grid; gap: 16px; margin-block-end: 20px; }
.main:has(.prod[data-scale="light"]) .reviews .review-mark .h-sec { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0; }
.main:has(.prod[data-scale="light"]) .reviews .review-mark .muted { font-size: .875rem; line-height: 1.25rem; }
.main:has(.prod[data-scale="light"]) .review-form .fields { margin-block: 0; row-gap: 12px; }
.main:has(.prod[data-scale="light"]) .review-form :is(input:not([type="radio"], [type="checkbox"]), select, textarea) {
  padding: 8px 16px; font-size: .875rem; line-height: 1.25rem;
}
/* The select draws its edge as an inset line inside a clear reach. */
.main:has(.prod[data-scale="light"]) .review-form :is(input:not([type="radio"], [type="checkbox"]), textarea) { border-color: var(--line); }
.main:has(.prod[data-scale="light"]) .review-form input:not([type="radio"], [type="checkbox"]) { block-size: 38px; min-block-size: 38px; }
.main:has(.prod[data-scale="light"]) .review-form textarea { block-size: 78px; min-block-size: 78px; }
.main:has(.prod[data-scale="light"]) .review-form .btn-quiet {
  margin: calc(-1 * var(--tap-inset)); min-block-size: 44px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
}

.foot-legal[data-tone="page"] .foot-end { column-gap: 20px; }
.foot-legal[data-tone="page"]:has(.foot-note-links) .locales { gap: 20px; }
.foot-legal[data-tone="page"] .locale { padding-inline: 0; }
.foot-legal[data-tone="page"] .locale.is-here { font-weight: 400; }
.main:has(.prod[data-scale="light"]) [data-heading="quiet"] .h-sec {
  line-height: 1rem; margin-block-end: 24px;
  color: var(--muted);
}
.main:has(.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"])) .prose .rt li::marker { color: color-mix(in srgb, var(--muted) 88%, var(--text)); }

/* The kits' reorder control under a listing: a 28px rounded box in gray-200 with gray-500 words,
   painted inside a 44px target, 12.6px after its word. */
.listing[data-sort="under"] .sort[data-shape="inline"] { column-gap: 12.6px; }
.listing[data-sort="under"] .sort[data-shape="inline"] select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: 0 8px;
  --tap-inset: 7.75px; border: var(--tap-inset) solid transparent; border-radius: 23.75px;
  background-color: transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line);
  font-size: .875rem; line-height: 1.25rem; color: var(--muted);
}
.listing[data-sort="under"] .sort[data-shape="inline"] label { padding-block-start: 3px; }
/* Noor's form selects paint the kit's 38px box inside a 44px target. */
:is(.express[data-surface="tinted"] .field, .main:has(.prod[data-scale="light"]) .review-form) select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); inline-size: calc(100% + 2 * var(--tap-inset)); padding-block: 0;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; border-radius: 0;
  background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line);
}

/* ---- souk against its kit ------------------------------------------------- */

/* The header: a white 64px row over the accent rule, the store's name in 18px
   black, a 36px search box with a 2px accent edge, 12px bold words 12px apart
   and the cart as a filled 16px-round button. */
.head:has(.head-row[data-layout="inline"]) .head-bar { background-color: var(--surface); }
.head-row[data-layout="inline"] { padding-block: 10px; column-gap: 16px; }
}
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="inline"] .search { margin-inline: 8px; }
}

}
@layer theme {
.head-row[data-layout="inline"][data-search="bare"] .search input {
  block-size: 36px; min-block-size: 36px; padding: 6px 12px; border-radius: 16px;
  font-size: .875rem; line-height: 1.25rem;
}
.head-row[data-layout="inline"] .head-end { gap: 12px; }
.head-row[data-layout="inline"][data-cart="button"] .cart-link { padding-inline: 12px; border-radius: 16px; }

/* The home's head: 28px under the header, the name in 20px black on a 28px
   line, the store's words at 12px across the whole column. */
body:has(.head-row[data-layout="inline"]) .main { padding-block-start: 16px; }
body:has(.head-row[data-layout="inline"]) .main > .wrap > [data-type="page-heading"]:first-child { margin-block-start: 12px; }
body:has(.head-row[data-layout="inline"]) .main > .wrap > [data-type="breadcrumbs"]:first-child { margin-block-start: 8px; }
:is(.page-head, .platform)[data-scale="small"] h1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; letter-spacing: 0; }
.page-head[data-scale="small"] { gap: 2px; }
.page-head[data-scale="small"] .lede { max-inline-size: none; margin-block-start: 0; font-size: .75rem; line-height: 1rem; font-weight: 400; }

/* Chips: 28px amber pills 8px apart, painted inside 44px targets. */
.cats[data-tile="chip"] .cat-strip { gap: 8px; }
.cats[data-tile="chip"] .cat {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 12px;
  --tap-inset: 8px; border: var(--tap-inset) solid transparent; border-radius: calc(var(--pill) + var(--tap-inset)); background-clip: padding-box;
}
.cats[data-tile="chip"] .cat-name { font-size: .75rem; line-height: 1rem; font-weight: 700; }

/* The price card: 8px round a square photo on gray-50 with a 4px corner,
   a 12px two-line title and the price in 16px black red. */
[data-card="price"] .grid { row-gap: 0; margin-block-end: -8px; }
[data-card="price"] .grid > * { margin-block-end: 8px; }
[data-card="price"] .card { padding: 8px; border-radius: 16px; }
[data-card="price"] .card-media { border-radius: 4px; --plate: var(--bg-soft); }
[data-card="price"] .card-title { margin-block-start: 8px; font-size: .8125rem; line-height: 1.375; color: color-mix(in srgb, var(--muted) 45%, var(--text)); }
[data-card="price"] .card-price { margin-block-start: 6px; }
[data-card="price"] .card-price .now { font-size: 1rem; line-height: 1.5rem; font-weight: 900; letter-spacing: calc(-.025em * var(--track-scale, 1)); }
.main > .wrap > [data-type="page-heading"]:has(.page-head[data-scale="small"]) + [data-type="category-strip"]:has(.cats[data-tile="chip"]) { margin-block-start: calc(12px - var(--band)); }
[data-card="price"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: -9.75px; }
[data-card="price"].listing[data-sort="under"] > .strip-head { margin-block-end: 4.25px; }
[data-card="price"] .card-a { row-gap: 0; }

/* A rayon in souk: the trail 8px down, the title 12px under it, the reorder
   control 16px under the title. */
.main > .wrap > [data-type="breadcrumbs"]:has([data-style="compact"]) + :is([data-type="category-header"], [data-type="page-heading"]):has(.page-head[data-scale="small"]) { margin-block-start: calc(12px - var(--band)); }
.cat-head[data-scale="small"] h1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; letter-spacing: 0; }

/* The price card's marks: the cut a 20px red tab 2px past the photo's top
   end, made-in-Algeria a 16px square-cornered label 4px
   inside its bottom start, and the old price 12px in gray-400 beside the new. */
[data-card="price"] .card-media { overflow: visible; }
[data-card="price"] .card-img { border-radius: 4px; }
[data-card="price"] .tag { font-size: .75rem; line-height: 1rem; letter-spacing: 0; }
[data-card="price"][data-tags="corners"] .tag-cut {
  padding: 2px 8px;
}
[data-card="price"][data-tags="corners"] .tag-made { padding: 0 4px; }
/* The old price sits 10px after the new one, or on the next line with no gap,
   4px in: the kit's 6px gap and the old price's own 4px margin. */
[data-card="price"] .card-price { gap: 0 6px; align-items: baseline; }
[data-card="price"] .card-price .was { margin-inline-start: 4px; font-size: .75rem; line-height: 1rem; color: var(--muted); }

/* ---- souk's product page at its kit's scale -------------------------------- */

/* The trail a 16px line 8px down and 16px over the photo; the buy column's
   lines each their own distance from the one above. */
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .crumbs-frame[data-style="compact"] .crumbs ol { line-height: 1rem; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) > .wrap > [data-type="breadcrumbs"] { margin-block-end: calc(16px - var(--band)); }
.prod[data-surface="flat"][data-scale="compact"] > .buy { gap: 0; }
.prod[data-surface="flat"][data-scale="compact"] .buy .buy-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; letter-spacing: 0; margin: 0; }
.prod[data-surface="flat"][data-scale="compact"] .brand-line { font-size: .875rem; line-height: 1.25rem; margin: 4px 0 0; }
.prod[data-surface="flat"][data-scale="compact"] .price { margin-block-start: 12px; line-height: 2.25rem; align-items: baseline; }
.prod[data-surface="flat"][data-scale="compact"] .price .now { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: 0; }
.prod[data-surface="flat"][data-scale="compact"] .price-note {
  margin: 6px 0 0; font-size: .75rem; line-height: 1rem; font-weight: 500;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.prod[data-surface="flat"][data-scale="compact"] .avail { margin-block-start: 4px; font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.prod[data-surface="flat"][data-scale="compact"] .lede {
  margin: 12px 0 0; font-size: 1rem; line-height: 1.5rem; font-weight: 400;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.prod[data-surface="flat"][data-scale="compact"] .buy-form { margin-block-start: 20px; }
.prod[data-surface="flat"][data-scale="compact"] .buy-row { gap: 12px; align-items: end; }
.prod[data-surface="flat"][data-scale="compact"] .buy-row .field { gap: 4px; }
.prod[data-surface="flat"][data-scale="compact"] .buy-row .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; }
.prod[data-surface="flat"][data-scale="compact"] #qty {
  inline-size: 96px; block-size: 38px; min-block-size: 38px; padding: 8px 16px;
  font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.prod[data-surface="flat"][data-scale="compact"] .buy-form .btn-buy {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 24px;
  --tap-inset: 2px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  font-size: .875rem; line-height: 1.25rem;
}
.prod[data-surface="flat"][data-scale="compact"] > .buy > .btn-wa {
  justify-self: start; min-block-size: 44px; margin: 9px calc(-1 * var(--tap-inset)) calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem;
}
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust { margin-block-start: 16px; gap: 6px; }
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust-point { padding: 8px; border-radius: 16px; font-size: .75rem; }
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust-words { display: block; }
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust-words strong { display: block; font-size: .75rem; line-height: 1rem; font-weight: 900; }
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust-words span { font-size: .75rem; line-height: 1.25; color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }

/* Souk's order form: 40px under the column, the kit's 12px fields with 38px
   boxes, two 34px mode cells 6px apart, a boxed 12px ticket and a 40px
   submit, every control painted inside a 44px target. */
.main:has(.prod[data-surface="flat"][data-scale="compact"]) > .wrap > [data-type="express-order"] { margin-block-start: calc(40px - var(--band)); }
.express[data-surface="accent"] { background-color: color-mix(in srgb, var(--accent-soft) 60%, transparent); border-radius: 16px; }
.express[data-surface="accent"] .ticket-head { margin-block-end: 16px; }
.express[data-surface="accent"] .ticket-title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; }
.express[data-surface="accent"] .ticket-sub {
  font-size: .875rem; line-height: 1.25rem; font-weight: 400; margin-block-start: 2px;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.express[data-surface="accent"] :is(.fields, .field-group) { row-gap: 12px; column-gap: 12px; }
.express[data-surface="accent"] .fields { margin-block: 0; }
.express[data-surface="accent"] .field { gap: 4px; }
.express[data-surface="accent"] .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; color: var(--muted); }
.express[data-surface="accent"] .field :is(input:where(:not([type="radio"], [type="checkbox"])), textarea) {
  block-size: 38px; min-block-size: 38px; padding: 8px 16px; font-size: .875rem; line-height: 1.25rem;
  border-color: var(--line); border-radius: 16px;
}
.express[data-surface="accent"] .field textarea { block-size: auto; }
.express[data-surface="accent"] .field select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); inline-size: calc(100% + 2 * var(--tap-inset)); padding: 0 16px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; border-radius: 19px;
  background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem;
}
.express[data-surface="accent"] .modes legend { font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--muted); }
.express[data-surface="accent"][data-modes="split"] .modes-row { margin-block-start: 4px; gap: 6px; }
.express[data-surface="accent"][data-modes="split"] .mode {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 8px;
  --tap-inset: 5px; border: var(--tap-inset) solid transparent; border-radius: 21px; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--surface));
  font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--accent-ink);
}
.express[data-surface="accent"][data-modes="split"] .mode-in:checked + .mode { border-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--surface)); color: var(--on-accent); }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-list { gap: 0; margin-block: 20px 12px; padding: 12px; border-radius: 16px; font-size: .75rem; line-height: 1rem; }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line { align-items: baseline; font-size: .75rem; line-height: 1rem; }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line + .ticket-line { margin-block-start: 4px; }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line dt { font-weight: 500; color: color-mix(in srgb, var(--muted) 66%, var(--text)); }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line dd { font-weight: 900; }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line:not(.is-cut) dd { color: var(--text); }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line.is-grand {
  margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px solid color-mix(in srgb, var(--accent) 55%, var(--surface));
}
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line.is-grand dt { font-size: .875rem; line-height: 1.25rem; font-weight: 900; color: var(--text); }
.express[data-surface="accent"][data-ticket="boxed"] .ticket-line.is-grand dd { font-size: 1.5rem; line-height: 2rem; font-weight: 900; color: var(--cut-ink); }
.express[data-surface="accent"] .express-end .btn-buy {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 32px;
  --tap-inset: 2px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  font-size: .875rem; line-height: 1.25rem;
}
body:has(.head-row[data-layout="inline"]) .main:has(> .wrap > [data-type="product-detail"]) > .wrap > [data-type="breadcrumbs"]:first-child { margin-block-start: 0; }
.prod[data-surface="flat"][data-scale="compact"][data-trust="tiles"] .trust-point { font-size: 1rem; line-height: 1.5rem; }

/* Under souk's order form: the facts 24px down as two 16px-round ruled cards
   12px apart with a 14px black caps head on a 4px bar and 12px zebra rows,
   the reviews 48px down under an 18px title, the similar strip 48px down,
   and the footer 40px down on the accent's soft ground. */
.main:has(.prod[data-surface="flat"][data-scale="compact"]) > .wrap > [data-type="specs-delivery"] { margin-block-start: calc(24px - var(--band)); }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) > .wrap > :is([data-type="product-reviews"], [data-type="similar-products"]) { margin-block-start: calc(48px - var(--band)); }
.facts[data-layout="pair"][data-rows="zebra"] { gap: 12px; }
.facts[data-layout="pair"][data-rows="zebra"] > .facts-card { padding: 12px; border-radius: 16px; background-color: transparent; box-shadow: none; }
.facts[data-layout="pair"][data-rows="zebra"] .h-sec { gap: 8px; margin-block-end: 8px; }
.facts[data-layout="pair"][data-rows="zebra"] .spec-row { padding-block: 6px; padding-inline: 0; column-gap: 8px; font-size: .75rem; line-height: 1rem; }
.facts[data-layout="pair"][data-rows="zebra"] .spec-row:nth-child(odd) { background-color: var(--bg-soft); }
.facts[data-layout="pair"][data-rows="zebra"] .spec-row dt { font-weight: 500; }
.facts[data-layout="pair"][data-rows="zebra"] .spec-row dd { font-weight: 700; }
.facts[data-layout="pair"][data-rows="zebra"] .facts-lines {
  gap: 4px; margin: 0; padding-inline-start: 20px; list-style: disc; font-size: .75rem; line-height: 1rem;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
}

.main:has(.prod[data-surface="flat"][data-scale="compact"]) .reviews { padding-block-start: 0; border-block-start: 0; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .reviews[data-style="plain"] .review-mark { display: grid; gap: 16px; margin-block-end: 20px; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) :is(.reviews .review-mark, [data-type="similar-products"] .strip-head) .h-sec { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) [data-type="similar-products"] .h-sec { margin-block-end: 12px; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .reviews .review-mark .muted { font-size: .875rem; line-height: 1.25rem; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form .fields { margin-block: 0; row-gap: 12px; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form :is(input:not([type="radio"], [type="checkbox"]), textarea) {
  padding: 8px 16px; font-size: .875rem; line-height: 1.25rem; border-color: var(--line); border-radius: 16px;
}
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form input:not([type="radio"], [type="checkbox"]) { block-size: 38px; min-block-size: 38px; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form textarea { block-size: 78px; min-block-size: 78px; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); inline-size: calc(100% + 2 * var(--tap-inset)); padding: 0 16px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; border-radius: 19px;
  background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem;
}
.main:has(.prod[data-surface="flat"][data-scale="compact"]) .review-form .btn-quiet {
  margin: calc(-1 * var(--tap-inset)); min-block-size: 44px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
}

.foot-legal[data-tone="accent"] { padding-block: 16px; }
.foot-legal[data-tone="accent"] :is(.foot-end, a, .locale) { font-size: .75rem; line-height: 1rem; letter-spacing: 0; }
.foot-legal[data-tone="accent"] :is(.foot-note-links a, .locale) { min-block-size: 44px; margin-block: -14px; padding-inline: 0; font-weight: 700; }
.foot-legal[data-tone="accent"] .foot-end { column-gap: 12px; }
.foot-legal[data-tone="accent"]:has(.foot-note-links) .locales { gap: 12px; }
.foot-legal[data-tone="accent"] .locale.is-here { color: inherit; text-decoration: underline; }
.facts[data-layout="pair"][data-rows="zebra"] { align-items: stretch; }
.main:has(.prod[data-surface="flat"][data-scale="compact"]) [data-type="similar-products"] .listing .h-sec { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0; }
.foot-legal[data-tone="accent"] .foot-end { color: var(--accent-ink); }
/* Souk's kit lays its product page on white; its listings keep the soft ground. */
body:has(.head-row[data-layout="inline"]):has(.main .prod) { background-color: var(--surface); }
.head-row[data-layout="inline"][data-search="bare"] .search input { color: color-mix(in srgb, var(--muted) 29%, var(--text)); }
body:has(.head-row[data-layout="inline"]) .main > .wrap > [data-type="breadcrumbs"]:has([data-style="compact"]):has(+ :is([data-type="category-header"], [data-type="page-heading"])) { margin-block-end: 0; }
.main > .wrap > :is([data-type="category-header"], [data-type="breadcrumbs"] + [data-type="page-heading"]):has(.page-head[data-scale="small"]) + [data-type="product-grid"] [data-card="price"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: -7.75px; }

/* ---- vitrine against its kit ---------------------------------------------- */

/* The header: a 76px white row over a faint rule, the wordmark in 20px black
   caps tracked .1em, a 320px underlined search 32px after it, and the three
   ways in as 14px words 20px apart on the content edge. */
.head:has(.head-row[data-edge="soft"]) { border-block-end-color: var(--surface-2); }
.head-row[data-layout="minimal"][data-brand="wordmark"] { padding-block: 16px; }
}
@media (min-width: 640px) {
@layer theme {
  .head-row[data-layout="minimal"][data-brand="wordmark"] { display: flex; align-items: center; column-gap: 24px; }
  .head-row[data-layout="minimal"][data-brand="wordmark"] .search { flex: 1 1 0; max-inline-size: 320px; margin-inline: 8px; }
}

}
@layer theme {
.head-row[data-brand="wordmark"][data-search="bare"] .search input {
  block-size: 37px; min-block-size: 37px; padding: 8px 4px; font-size: .875rem; line-height: 1.25rem;
  border-block-end-color: var(--line); color: color-mix(in srgb, var(--muted) 29%, var(--text));
}
.head-row[data-layout="minimal"][data-brand="wordmark"] .head-end { gap: 20px; }

/* The home: the name 40px under the header in 48px black, the rayons 40px
   under it behind a 12px quiet head, as 46px outlined pills 12px apart. */
body:has(.head-row[data-brand="wordmark"]) .main { padding-block: 40px 24px; }
/* A listing that ends the page keeps its kit section's own 48px under it. */
body:has(.head-row[data-brand="wordmark"]) .main > .wrap > [data-type="product-grid"]:last-child { margin-block-end: 24px; }
:is(.page-head, .platform)[data-scale="bold"] h1 { font-size: 3rem; line-height: 1; font-weight: 900; letter-spacing: calc(-.025em * var(--track-scale, 1)); }
}
@media (max-width: 639px) {
@layer theme { :is(.page-head, .platform)[data-scale="bold"] h1 { font-size: 1.875rem; line-height: 2.25rem; }
} 
}
@layer theme {
.cats[data-tile="outline"] .h-sec { line-height: 1rem; margin-block-end: 16px; color: var(--muted); }
.cats[data-tile="outline"] .cat-strip { gap: 12px; padding-block-end: 8px; }
.cats[data-tile="outline"] .cat { padding: 12px 20px; }
.cats[data-tile="outline"] .cat-name { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in srgb, var(--muted) 45%, var(--text)); }

/* The editorial card: a 4:3 photo on gray-50, the cut a 12px pill 12px in,
   a 16px title 16px under, the price 6px under with the old one in gray-400. */
[data-card="editorial"] .grid > * { padding-block-end: 32px; }
/* The rows' own 32px stops at the last row, so a band ends at its tiles. */
[data-card="editorial"] .grid { margin-block-end: -32px; }
[data-card="editorial"] .card-media { border-radius: 0; --plate: var(--bg-soft); }
[data-card="editorial"] .tags { inset-block-start: 12px; inset-inline-start: 12px; }
[data-card="editorial"] .tag {
  padding: 4px 12px; font-size: .75rem; line-height: 1rem; letter-spacing: calc(.025em * var(--track-scale, 1));
}
[data-card="editorial"] .tag:not(.tag-cut) { font-weight: 600; }
/* The made-here mark reads as a quiet caption on the photo, not a cut. */
[data-card="editorial"] .tag-made {
  padding: 4px 8px; font-weight: 500; text-transform: uppercase; letter-spacing: calc(.1em * var(--track-scale, 1));
}
[data-card="editorial"] .card-title { margin-block-start: 16px; font-size: 1rem; line-height: 1.375rem; font-weight: 500; }
[data-card="editorial"] .card-price { margin-block-start: 6px; column-gap: 8px; align-items: baseline; }
[data-card="editorial"] .card-price .now { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: calc(-.025em * var(--track-scale, 1)); }
[data-card="editorial"] .card-price .was { font-size: .75rem; line-height: 1rem; color: var(--muted); }
.page-head[data-scale="bold"] { padding-block: 0; }
.main > .wrap > [data-type="page-heading"]:has(.page-head[data-scale="bold"]) + [data-type="category-strip"]:has(.cats[data-tile="outline"]) { margin-block-start: calc(40px - var(--band)); }
.cats[data-tile="outline"] .cat-strip { padding-block-start: 0; }
.main > .wrap > [data-type="category-strip"]:has(.cats[data-tile="outline"]) ~ [data-type="product-grid"]:has([data-card="editorial"]) { margin-block-start: calc(48px - var(--band)); }
.cats[data-tile="outline"] .h-sec { margin-block-end: 14px; }
[data-card="editorial"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: 4.25px; }
[data-card="editorial"].listing[data-sort="under"] > .strip-head { margin-block-end: 24.25px; }

/* Vitrine's trail: 24px under the header, 12px caps tracked .1em in gray-400
   on a 28px row, a middle dot 4px after a word; the rayon's title 40px under
   it and the reorder control 60px under the title. */
body:has(.head-row[data-brand="wordmark"]) .main > .wrap > [data-type="breadcrumbs"]:first-child { margin-block-start: -16px; }
.main > .wrap > [data-type="breadcrumbs"]:has([data-style="caps"]) { margin-block-end: calc(40px - var(--band)); }
.crumbs-frame[data-style="caps"] .crumbs {
  font-size: .75rem; line-height: 1rem; letter-spacing: calc(.1em * var(--track-scale, 1)); font-weight: 400;
  color: var(--muted);
}
.crumbs-frame[data-style="caps"] .crumbs li:not(:last-child)::after { margin-inline: 6.25px; }
.crumbs-frame[data-style="caps"] .crumbs ol { line-height: 28px; }
.crumbs-frame[data-style="caps"] .crumbs [aria-current] { color: inherit; font-weight: inherit; }
.main > .wrap > :is([data-type="category-header"], [data-type="breadcrumbs"] + [data-type="page-heading"]):has(.page-head[data-scale="bold"]) + [data-type="product-grid"] [data-card="editorial"].listing[data-sort="under"] > .strip-head .sort { margin-block-start: -11.75px; }

/* ---- vitrine's product page at its kit's scale ----------------------------- */

/* The trail a 16px line 24px under the header and 16px over the photo; the
   buy column's lines each their own distance from the one above. */
.main:has(.prod[data-scale="bold"]) { padding-block-start: 24px; }
.main:has(.prod[data-scale="bold"]) > .wrap > [data-type="breadcrumbs"]:first-child { margin-block-start: 0; }
.main:has(.prod[data-scale="bold"]) > .wrap > [data-type="breadcrumbs"] { margin-block-end: calc(16px - var(--band)); }
.main:has(.prod[data-scale="bold"]) .crumbs-frame[data-style="compact"] .crumbs ol { line-height: 1rem; }
.prod[data-scale="bold"] > .buy { gap: 0; }
.prod[data-scale="bold"] .buy .buy-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; letter-spacing: calc(-.025em * var(--track-scale, 1)); margin: 0; }
.prod[data-scale="bold"] .brand-line { font-size: .875rem; line-height: 1.25rem; margin: 4px 0 0; }
.prod[data-scale="bold"] .price { margin-block-start: 12px; column-gap: 12px; align-items: baseline; line-height: 2.25rem; }
.prod[data-scale="bold"] .price .now { font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; letter-spacing: 0; color: var(--success); }
.prod[data-scale="bold"] .price .was { font-size: 1rem; line-height: 1.5rem; color: var(--muted); }
.prod[data-scale="bold"] .price-note { margin: 8px 0 0; font-size: .875rem; line-height: 1.25rem; font-weight: 400; }
.prod[data-scale="bold"] .avail { margin-block-start: 4px; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--success); }
.prod[data-scale="bold"] .lede {
  margin: 12px 0 0; font-size: 1rem; line-height: 1.5rem; font-weight: 400;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.prod[data-scale="bold"] .buy-form { margin-block-start: 20px; }
.prod[data-scale="bold"] .buy-row { gap: 12px; align-items: end; }
.prod[data-scale="bold"] .buy-row .field { gap: 4px; }
.prod[data-scale="bold"] .buy-row .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; }
.prod[data-scale="bold"] #qty {
  inline-size: 96px; block-size: 38px; min-block-size: 38px; padding: 8px 16px;
  font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.prod[data-scale="bold"] .buy-form .btn-buy {
  min-block-size: 44px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 32px; border: 0;
  font-size: .875rem; line-height: 1.25rem;
}
.prod[data-scale="bold"] > .buy > .btn-wa {
  justify-self: start; min-block-size: 44px; margin: 9px calc(-1 * var(--tap-inset)) calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem; color: var(--whatsapp-ink);
}
.prod[data-scale="bold"][data-trust="rows"] .trust { margin-block-start: 24px; gap: 0; border-block-start: 1px solid var(--line); }
.prod[data-scale="bold"][data-trust="rows"] .trust-point { padding-block: 12px; border-block-end: 1px solid var(--line); }
.prod[data-scale="bold"][data-trust="rows"] .trust-words { gap: 0 16px; align-items: baseline; }
.prod[data-scale="bold"][data-trust="rows"] .trust-words strong { font-size: .875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: calc(.1em * var(--track-scale, 1)); }
.prod[data-scale="bold"][data-trust="rows"] .trust-words span { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }

/* Vitrine's order form: 40px under the column, an ink-ruled well on gray-50,
   12px fields with 38px boxes, the mode as two 40px caps cells between ink
   rules, an ink-ruled ticket in 16px caps and a 44px ink submit. */
.main:has(.prod[data-scale="bold"]) > .wrap > [data-type="express-order"] { margin-block-start: calc(40px - var(--band)); }
.express[data-surface="outlined"] { padding: 20px; border-color: var(--text); background-color: var(--bg-soft); }
.express[data-surface="outlined"] .ticket-head { margin-block-end: 16px; }
.express[data-surface="outlined"] .ticket-title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; }
.express[data-surface="outlined"] .ticket-sub {
  font-size: .875rem; line-height: 1.25rem; font-weight: 400; margin-block-start: 2px;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.express[data-surface="outlined"] :is(.fields, .field-group) { row-gap: 12px; column-gap: 12px; }
.express[data-surface="outlined"] .fields { margin-block: 0; }
.express[data-surface="outlined"] .field { gap: 4px; }
.express[data-surface="outlined"] .field > label { font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500; color: var(--muted); }
.express[data-surface="outlined"] .field :is(input:where(:not([type="radio"], [type="checkbox"])), textarea) {
  block-size: 38px; min-block-size: 38px; padding: 8px 16px; font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.express[data-surface="outlined"] .field textarea { block-size: auto; }
.express[data-surface="outlined"] .field select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); inline-size: calc(100% + 2 * var(--tap-inset)); padding: 0 16px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem;
}
.express[data-surface="outlined"] .modes legend { font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--muted); }
.express[data-surface="outlined"][data-modes="ruled"] .modes-row { margin-block-start: 4px; --rule-ink: var(--text); }
.express[data-surface="outlined"][data-modes="ruled"] .mode {
  min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 8px;
  --tap-inset: 2px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  font-size: .75rem; line-height: 1rem; font-weight: 400; letter-spacing: calc(.1em * var(--track-scale, 1));
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.express[data-surface="outlined"][data-modes="ruled"] .mode-in:checked + .mode { color: var(--surface); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-list { gap: 0; margin-block: 20px 12px; padding: 0; border: 0; border-block-start: 1px solid var(--text); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line { padding-block: 12px; align-items: baseline; border-block-end: 1px solid var(--line); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line dt { font-size: .75rem; line-height: 1.5rem; font-weight: 400; letter-spacing: calc(.1em * var(--track-scale, 1)); color: var(--muted); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line dd { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line:not(.is-cut) dd { color: var(--text); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line.is-grand { padding-block: 16px; border: 0; }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line.is-grand dt { font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--text); }
.express[data-surface="outlined"][data-ticket="caps"] .ticket-line.is-grand dd { font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; color: var(--success); }
.express[data-surface="outlined"] .express-end .btn-buy {
  min-block-size: 44px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 40px; border: 0;
  font-size: .875rem; line-height: 1.25rem;
}

/* Under vitrine's order form: the facts 48px down as a centred 768px column,
   a 12px quiet caps head over ruled 12px rows with 14px caps names; the
   delivery words centred at 16px on a relaxed line; the reviews and the
   similar strip 48px down. */
.main:has(.prod[data-surface="flat"][data-scale="bold"]) > .wrap > :is([data-type="specs-delivery"], [data-type="product-reviews"], [data-type="similar-products"]) { margin-block-start: calc(48px - var(--band)); }
.facts[data-layout="stacked"] { row-gap: 48px; }
.facts[data-layout="stacked"] .h-sec { margin-block-end: 24px; }
.facts[data-layout="stacked"] .spec-rows { border-block-start: 1px solid var(--line); }
.facts[data-layout="stacked"] .spec-row { column-gap: 24px; padding-block: 12px; align-items: baseline; border-block-end: 1px solid var(--line); font-size: 1rem; line-height: 1.5rem; }
.facts[data-layout="stacked"] .spec-row dt { font-size: .875rem; line-height: 1.25rem; letter-spacing: calc(.1em * var(--track-scale, 1)); font-weight: 400; color: var(--muted); }
.facts[data-layout="stacked"] .spec-row dd { font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: var(--text); }
.facts[data-layout="stacked"] .facts-lines {
  gap: 8px; margin: 0; font-size: 1rem; line-height: 1.625;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}

.main:has(.prod[data-scale="bold"]) .reviews { padding-block-start: 0; border-block-start: 0; }
.main:has(.prod[data-scale="bold"]) .reviews[data-style="plain"] .review-mark { display: grid; gap: 16px; margin-block-end: 20px; }
.main:has(.prod[data-scale="bold"]) .reviews .review-mark .h-sec { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0; }
.main:has(.prod[data-scale="bold"]) .reviews .review-mark .muted { font-size: .875rem; line-height: 1.25rem; }
.main:has(.prod[data-scale="bold"]) .review-form .fields { margin-block: 0; row-gap: 12px; }
.main:has(.prod[data-scale="bold"]) .review-form :is(input:not([type="radio"], [type="checkbox"]), textarea) {
  padding: 8px 16px; font-size: .875rem; line-height: 1.25rem; border-color: var(--line);
}
.main:has(.prod[data-scale="bold"]) .review-form input:not([type="radio"], [type="checkbox"]) { block-size: 38px; min-block-size: 38px; }
.main:has(.prod[data-scale="bold"]) .review-form textarea { block-size: 78px; min-block-size: 78px; }
.main:has(.prod[data-scale="bold"]) .review-form select {
  block-size: 44px; min-block-size: 44px; margin: calc(-1 * var(--tap-inset)); inline-size: calc(100% + 2 * var(--tap-inset)); padding: 0 16px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem;
}
.main:has(.prod[data-scale="bold"]) .review-form .btn-quiet {
  margin: calc(-1 * var(--tap-inset)); min-block-size: 44px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 21px;
  --tap-inset: 3px; border: var(--tap-inset) solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: .875rem; line-height: 1.25rem;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
}
.main:has(.prod[data-scale="bold"]) [data-type="similar-products"] [data-heading="quiet"] .h-sec {
  line-height: 1rem; margin-block-end: 24px;
  color: var(--muted);
}
/* Noor's search in the kit's body ink with its hint at half; the cart word in full ink. */
.head-row[data-layout="minimal"][data-brand="light"][data-search="bare"] .search input { color: color-mix(in srgb, var(--muted) 29%, var(--text)); }

/* A bare search field marks focus with its own border (the kits' focus:outline-none),
   so no ring is drawn round it. */
.head-row[data-search="bare"] .search input:focus-visible { outline: none; }
.head-row[data-layout="minimal"][data-search="bare"] .search input:focus { border-block-end-color: var(--text); }
.head-row[data-layout="inline"][data-edge="accent"][data-search="bare"] .search input:focus { border-color: color-mix(in oklch, var(--accent) 70%, var(--accent-ink)); }


/* ---- the pagers against their kits ----------------------------------------- */

/* Words and steps both end in an arrow, a space's width from the word. */
[data-pager="words"] .chev { font-size: 0; }
[data-pager="words"] .chev::after { content: "\2192"; font-size: .75rem; }

/* Noor: 12px words tracked .1em in gray-600, 40px apart, a hairline under the
   pointer, 56px under the tiles. */
[data-pager="words"] .pager { gap: 40px; }
[data-pager="words"] .pager-step {
  gap: 4px; padding: 0 6px 2px; border: 0; border-block-end: 1px solid transparent; border-radius: 0;
  font-size: .75rem; line-height: 1rem; letter-spacing: calc(.1em * var(--track-scale, 1));
  color: color-mix(in srgb, var(--muted) 65%, var(--text));
}
[data-pager="words"] .pager-step:hover { border-block-end-color: var(--text); color: var(--text); }
[data-card="panel"][data-columns="three"] .pager { margin-block-start: 56px; }

/* Souk: bold accent words 24px under the tiles, spread across the row. */
.listing[data-card="price"] .pager { margin-block-start: 24px; }
.listing[data-card="price"][data-pager="steps"] .pager-step {
  padding-inline: 6px; font-weight: 700; color: var(--accent-ink);
}
.listing[data-card="price"][data-pager="steps"] .pager-step:hover { background-color: transparent; filter: none; color: var(--accent-ink); }

/* Vitrine: semibold ink words 32px apart, 40px under the tiles. */
.listing[data-card="editorial"] .pager { gap: 32px; margin-block-start: 40px; }
.listing[data-card="editorial"][data-pager="steps"] .pager-step { padding-inline: 6px; font-weight: 600; color: var(--text); }
.listing[data-card="editorial"][data-pager="steps"] .pager-step:hover { background-color: transparent; filter: none; color: var(--accent-ink); }

/* A roomy footer line: 14px words on 32px of room, 16px apart, each still a
   44px target reaching over the room it sits in. */
.foot-legal[data-density="roomy"] { padding-block: 32px; line-height: 1.25rem; }
.foot-legal[data-density="roomy"] :is(.foot-end, a, .locale) { font-size: .875rem; line-height: 1.25rem; }
.foot-legal[data-density="roomy"] :is(a, .locale) { margin-block: -12px; }
.foot-legal[data-density="roomy"] .foot-end { gap: 16px; }
.foot-legal[data-density="roomy"]:has(.foot-note-links) .locales { gap: 16px; }

/* Noor's line: 32px of room, the note and the ways out 16px apart when they
   stack, each link a 28px row that stays a 44px target. Souk's sits 40px under
   the page. */
.foot-legal[data-tone="page"] .foot-end { row-gap: 16px; }
.foot-legal[data-tone="page"] :is(.foot-ways a, .locale) { display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -8px; }
.foot:has(.foot-legal[data-tone="accent"]) { margin-block-start: 40px; }

/* The variant choice in the four looks' buy forms, as their kits draw it: the
   quantity's 12px label on its 24px line, 4px over a 37px box of 14px words. */
.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"]) .buy-form > .field { gap: 4px; }
.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"]) .buy-form > .field:not(.has-axes) > label {
  font-size: .75rem; line-height: 1rem; padding-block: 6px 2px; font-weight: 500;
}
.prod:is([data-scale="light"], [data-scale="bold"], [data-scale="compact"]) .buy-form > .field:not(.has-axes) > select {
  block-size: 44px; min-block-size: 44px; margin-block: -3.5px; padding-block: 0; padding-inline: 16px; font-size: .875rem;
  --tap-inset: 3.5px; border: 0; border-block: 3.5px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The line naming where the store delivers, between the heading and the policy
   lines, as each kit writes it. */
.facts[data-layout="stacked"] .delivered-in { font-weight: 500; line-height: 1.5rem; }
.facts[data-layout="stacked"] .delivered-in + .facts-lines { margin-block-start: 24px; }
.facts[data-layout="flow"] .delivered-in { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.facts[data-layout="pair"][data-rows="zebra"] .delivered-in { margin-block-start: 8px; font-size: .75rem; line-height: 1rem; font-weight: 900; }
.facts[data-layout="pair"][data-rows="zebra"] .delivered-in + .facts-lines { margin-block-start: 8px; }

/* A listing with nothing in it, as noor's and souk's kits write it: one 14px
   muted line, noor's centred 56px under the heading, souk's 24px under it. */
body:has(.head-row:is([data-brand="light"], [data-layout="inline"])) .main :is(.empty[data-empty]:not([data-empty="card"]), .listing > .empty) {
  padding-block: 0; font-size: .875rem; line-height: 1.25rem;
}
body:has(.head-row[data-brand="light"]) .main > .wrap > [data-type="product-grid"]:has(> .empty) { margin-block-start: calc(56px - var(--band)); }
body:has(.head-row[data-layout="inline"]) .main > .wrap > [data-type="product-grid"]:has(> .empty) { margin-block-start: calc(24px - var(--band)); }
/* The sort's 44px target reaches 7.75px under its painted box; the line starts at the box. */
[data-card="panel"].listing > .strip-head:has(+ .empty) { margin-block-end: -7.75px; }

/* ---- hover, against the kits ----------------------------------------------- */

/* The ways in and out of the four looks answer the pointer in ink, never with
   an underline: the header's words and cart label darken to the page's ink,
   the footer line's words to the band's strongest ink. */
.head-row:is([data-layout="minimal"], [data-layout="inline"], [data-search="inset"]) :is(.head-a, .cart-link):hover { text-decoration: none; color: var(--text); }
.head-row[data-voice="caps"][data-cart="label"] .cart-link:hover { text-decoration: none; }
.head-row[data-voice="bold"] .head-call:hover { color: var(--accent-ink); }
.head-row[data-cart="button"] .cart-link:hover { background-color: var(--bg-soft); }
.foot-legal:is([data-tone="page"], [data-tone="inverse"]) :is(.foot-ways a, .locale):hover { text-decoration: none; color: var(--ink-strong, var(--text)); }
.foot-legal[data-tone="page"] :is(.foot-ways a, .locale):hover { color: var(--text); }

/* Souk's tile lifts no further than its kit's: a lighter accent edge and the
   shadow, in place. */
[data-card="price"] .card:hover { transform: none; border-color: oklch(from var(--accent) calc(l + .06) c calc(h + 14)); }

/* Buttons answer the pointer with a ground, not a dimming, as each kit does:
   the outlined WhatsApp way takes the success wash, a quiet button the soft
   ground, and a filled one its look's second shade. */
body:has(.head-row:is([data-brand="light"], [data-brand="wordmark"], [data-layout="inline"], [data-search="inset"])) :is(.btn-buy, .btn-wa, .btn-quiet):hover { filter: none; }
body:has(.head-row:is([data-brand="light"], [data-brand="wordmark"], [data-layout="inline"], [data-search="inset"])) .main .btn-wa:hover { background-color: var(--success-soft); }
body:has(.head-row:is([data-brand="light"], [data-brand="wordmark"], [data-layout="inline"], [data-search="inset"])) .main .btn-quiet:hover { background-color: var(--bg-soft); }
body:has(.head-row[data-brand="light"]) .main .btn-buy:hover { background-color: var(--inverse); color: var(--on-inverse); }
body:has(.head-row[data-brand="wordmark"]) .main .btn-buy:hover { background-color: var(--success-fill); color: var(--on-success); }
body:has(.head-row[data-layout="inline"]) .main .btn-buy:hover { background-color: oklch(from var(--accent) calc(l + .06) c calc(h + 14)); }
body:has(.head-row[data-search="inset"]) .main .btn-buy:hover { background-color: var(--accent-ink-fill); color: var(--on-accent-ink); }

/* A trail's links darken to the ink rather than underline. */
body:has(.head-row:is([data-brand="light"], [data-brand="wordmark"], [data-layout="inline"])) .crumbs a:hover { text-decoration: none; color: var(--text); }
body:has(.head-row[data-layout="inline"]) .crumbs a:hover { color: var(--accent-ink); }

/* ---- the ad page ------------------------------------------------------------ */

/* The landing bar is the whole chrome of an ad page: the store's name with its
   languages, and the ways to reach it. Two rows on a phone, one from 768px. */
.landing-bar { border-block-end: 1px solid var(--line); background-color: var(--surface); color: var(--text); }
.landing-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand langs" "ways ways";
  align-items: center; gap: 0 16px; min-block-size: var(--head); padding-block: 6px;
}
.landing-row > .brand { grid-area: brand; min-inline-size: 0; }
.landing-langs { grid-area: langs; display: flex; justify-content: flex-end; }
.landing-ways { grid-area: ways; }
}
@media (min-width: 768px) {
@layer theme {
  .landing-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand ways langs"; }
}

}
@layer theme {
.landing-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.landing-a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-size: .875rem; font-weight: 600; }
.landing-a .ico { inline-size: 16px; block-size: 16px; }
.landing-a:hover { text-decoration: none; color: var(--accent-ink); }

/* ---- classic's lower product page against its kit ---------------------------- */

/* Every lower section is the kit's white card: 24px of room, a 16px radius, a
   faint ring and a small shadow, 24px apart; headings are 18px bold on a 28px
   line, and the words under them 14px. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) :is(.prose, .facts-card, .reviews)[data-surface="carded"],
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts[data-surface="carded"] .facts-card {
  padding: 24px; border: 0; border-radius: 16px; background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--surface-2), 0 1px 2px 0 rgb(0 0 0 / .05);
}
.main:has(.prod[data-surface="carded"][data-scale="compact"]) :is(.facts, .reviews, .listing) .h-sec {
  margin-block-end: 12px; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0;
}
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts .spec-row { padding-block: 8px; font-size: .875rem; line-height: 1.25rem; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts .spec-row dt { color: var(--muted); font-weight: 400; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts .spec-row dd { font-weight: 500; color: var(--text); }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts .delivered-in { margin-block-start: -4px; font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .facts .facts-lines { gap: 6px; font-size: .875rem; line-height: 1.25rem; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .muted { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
/* With no reviews yet the kit says so under the heading, 16px below it. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews[data-style="plain"] .review-mark:has(> .muted) { display: grid; gap: 16px; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .prose .rt { color: color-mix(in srgb, var(--muted) 66%, var(--text)); }

/* Classic's order form as its live kit measures on the product page: each
   label a 24px line 4px over its box, a 12px gap under a group's heading,
   37px selects of 14px words, the delivery choice 4px under its legend, and
   the ticket's lines in 14px. */
.express[data-groups="numbered"] .field > label { padding-block: 6px 2px; }
.express[data-groups="numbered"] .field-legend { margin-block-end: 12px; }
/* The kit's 37px select, painted inside a 44px target. */
.express[data-groups="numbered"] .field select {
  block-size: 44px; min-block-size: 44px; margin-block: -3.5px; padding-block: 0; font-size: .875rem;
  --tap-inset: 3.5px; border: 0; border-block: 3.5px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line);
}
.express[data-groups="numbered"] .modes-row { margin-block-start: 4px; }
.express[data-groups="numbered"] .ticket-line:not(.is-grand) { font-size: .875rem; line-height: 1.25rem; }
.express[data-groups="numbered"] .fields { padding-block-start: 4px; }
/* The stepper: two 36x38 boxes 6px either side of an 80px field, painted
   inside 44px targets. */

.express[data-groups="numbered"] .ticket-line.is-grand { align-items: center; }
.express[data-groups="numbered"][data-ticket="panel"] .ticket-list { margin-block: 20px; }
/* Classic's lower cards sit 24px apart, and the similar products 32px under them. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) > .wrap > :is([data-type="product-description"], [data-type="specs-delivery"], [data-type="product-reviews"]) { margin-block-start: calc(24px - var(--band)); }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) > .wrap > [data-type="similar-products"] { margin-block-start: calc(32px - var(--band)); }

/* Classic's review form: a 28rem column 20px under the reviews, 12px between
   38px fields of 14px words in 12px corners, and a quiet outlined button. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-form { max-inline-size: 28rem; margin-block-start: 20px; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-form .fields { margin: 0; gap: 12px; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-form :is(input:not([type="hidden"]), textarea) {
  min-block-size: 38px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: .875rem; line-height: 1.25rem;
}
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-form select {
  block-size: 44px; min-block-size: 44px; margin-block: -3.5px; padding-block: 0; padding-inline: 16px; font-size: .875rem;
  --tap-inset: 3.5px; border: 0; border-block: 3.5px solid transparent; background-clip: padding-box; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-mark .h-sec { margin-block-end: 0; }
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .reviews .review-form .btn-quiet {
  justify-self: start; min-block-size: 44px; margin-block: -3px; padding: calc((44px - 1lh) / 2 - var(--tap-inset, 0px)) 20px;
  --tap-inset: 3px; border: 3px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px currentColor; font-size: .875rem; line-height: 1.25rem;
  color: color-mix(in srgb, var(--muted) 66%, var(--text));
}
.main:has(.prod[data-surface="carded"][data-scale="compact"]) .listing > .h-sec { margin-block-end: 16px; }
/* Classic's product page keeps its kit's 40px of grey under the last section. */
.main:has(.prod[data-surface="carded"][data-scale="compact"]) > .wrap > :last-child { margin-block-end: 40px; }

/* The empty counter's sentence speaks at each look's own control size. */
.express:is([data-surface="tinted"], [data-surface="accent"], [data-surface="outlined"], [data-groups="numbered"]) .field-empty {
  font-size: .875rem; line-height: 1.25rem;
}

/* Stacked on a phone, the four looks' buy column starts 32px under the photos,
   their kits' gap-8. */
.prod:is([data-scale="light"], [data-scale="bold"], [data-surface="flat"][data-scale="compact"]) { row-gap: 32px; }


/* A product's details part has no gallery beside it: one column. */
:is(.prod, [data-surface="carded"].prod)[data-part="details"] { grid-template-columns: minmax(0, 1fr); }

/* ---- the header's words, each owned by one setting (package spec section 5):
   the brand draws the name, the voice says the ways in, the layout spaces them.

   None of these holds the name on one line. A wordmark reads better unbroken
   and a short name sits on one line without being told to; a name too long for
   the header had nowhere to go and took the whole page sideways with it, 571px
   of it at 320px on a store whose name is a sentence. */
.head-row[data-brand="wordmark"] .brand-name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; letter-spacing: calc(.1em * var(--track-scale, 1)); text-transform: uppercase; }
.head-row[data-brand="light"] .brand-name { font-size: 1.5rem; line-height: 2rem; font-weight: 300; letter-spacing: calc(.1em * var(--track-scale, 1)); text-transform: none; }
.head-row[data-brand="bold"] .brand-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 900; letter-spacing: 0; }
.head-row[data-brand="bold-large"] .brand-name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; letter-spacing: calc(-.025em * var(--track-scale, 1)); }

.head-row:is([data-layout="minimal"], [data-layout="inline"]) .head-a { padding-inline: 6px; }
.head-row[data-layout="minimal"] .cart-link { padding-inline: 6px; }

.head-row:is([data-voice="caps"], [data-voice="words"], [data-voice="bold"]) .head-call .ico { display: none; }
.head-row:is([data-voice="words"], [data-voice="bold"]) .cart-link .ico { display: none; }
.head-row:is([data-voice="words"], [data-voice="bold"]) .cart-word {
  position: static; inline-size: auto; block-size: auto; margin: 0;
  overflow: visible; clip-path: none; white-space: nowrap;
}
.head-row:is([data-voice="words"], [data-voice="bold"]) .cart-link .cart-word { font-size: inherit; line-height: inherit; font-weight: inherit; }
.head-row:is([data-voice="caps"], [data-voice="words"]) .search-word { font-size: .72rem; text-transform: uppercase; letter-spacing: calc(.18em * var(--track-scale, 1)); color: var(--muted); }
.head-row[data-voice="caps"] :is(.head-a, .cart-link, .locale) { font-size: .75rem; line-height: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: calc(.1em * var(--track-scale, 1)); }
.head-row[data-voice="caps"] .head-a { color: var(--muted); }
.head-row[data-voice="caps"][data-cart="label"] .cart-link { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.head-row[data-voice="caps"][data-cart="label"] .cart-word {
  font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: underline; text-underline-offset: 5px;
}
.head-row[data-voice="words"] :is(.head-a, .cart-link) { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in srgb, var(--muted) 66%, var(--text)); }
.head-row[data-voice="bold"] :is(.head-a, .cart-link) { font-size: .75rem; line-height: 1rem; font-weight: 700; }
.head-row[data-voice="bold"] .head-a { color: color-mix(in srgb, var(--muted) 66%, var(--text)); }
.head-row[data-voice="bold"] .head-call { color: var(--accent-ink); }
.head-orders .ico { display: none; }
}
/* On a phone the ways in keep one row whatever the brand, as icons named for
   a screen reader (behaviour section 4); the brand gives way, not them. */
@media (max-width: 599px) {
@layer theme {
  .head-row:has(> .brand > :is(img, .brand-name)) .brand { flex: 1 1 0; }
  .head-row:has(> .brand > :is(img, .brand-name)) .head-end { flex-wrap: nowrap; gap: 0; }
  .head-row:has(> .brand > :is(img, .brand-name)) :is(.head-a, .cart-link) { min-inline-size: 36px; padding-inline: 6px; justify-content: center; }
  .head-row:has(> .brand > :is(img, .brand-name)) :is(.head-a, .cart-link) .ico { display: block; }
  /* The count rides the icon's corner, so the cart keeps an icon's width. */
  .head-row:has(> .brand > :is(img, .brand-name)) .cart-link .cart-count {
    position: absolute; inset-block-start: 2px; inset-inline-end: 0;
    min-inline-size: 16px; padding: 0 4px; border-radius: 999px; line-height: 16px; font-size: .66rem; font-weight: 700;
    background: var(--cut-fill); color: var(--on-cut);
  }
  .head-row:has(> .brand > :is(img, .brand-name)) .cart-link .cart-count::before,
  .head-row:has(> .brand > :is(img, .brand-name)) .cart-link .cart-count::after { content: none; }
  .head-row:has(> .brand > :is(img, .brand-name)) :is(.head-a > span, .cart-word) {
    position: absolute; inline-size: 1px; block-size: 1px;
    max-inline-size: 1px; max-block-size: 1px;
    margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
    clip-path: inset(50%); border: 0;
  }
}

}
@layer theme {

/* A product's facts head, owned by heading_rule; the layout only places it. */
[data-heading="tracked"] .h-sec { font-size: .75rem; line-height: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: calc(.2em * var(--track-scale, 1)); }
.facts[data-heading="quiet"] .h-sec { line-height: 1rem; color: var(--muted); }
.facts[data-heading="loud"] .h-sec { font-size: .875rem; line-height: 1.25rem; font-weight: 900; letter-spacing: 0; }
.facts[data-heading="loud"] .h-sec::before { border-radius: 0; min-block-size: 0; }

/* Inside the stepper the field is one of three parts of one row, whatever
   height a look gives the bare field. */
.prod[data-surface][data-scale] .qty #qty, .prod[data-scale] .qty #qty, .express .qty #x-qty { block-size: auto; min-block-size: 0; }
/* The scales whose buy button paints 40px inside its 44px reach give the
   stepper beside it the same paint and the same reach. */
.prod:is([data-scale="light"], [data-scale="compact"]) .buy-row .qty-step {
  margin-block: -2px; --tap-inset: 2px; border: 2px solid transparent;
  background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line);
}
.prod[data-surface]:is([data-scale="light"], [data-scale="compact"]) .qty #qty { padding-block: 0; }
}

@layer theme {

/* The focal grid: every 10% step per axis a picture's focal point can take. */
img[data-focal="0-0"]{object-position:0% 0%}
img[data-focal="0-10"]{object-position:0% 10%}
img[data-focal="0-20"]{object-position:0% 20%}
img[data-focal="0-30"]{object-position:0% 30%}
img[data-focal="0-40"]{object-position:0% 40%}
img[data-focal="0-50"]{object-position:0% 50%}
img[data-focal="0-60"]{object-position:0% 60%}
img[data-focal="0-70"]{object-position:0% 70%}
img[data-focal="0-80"]{object-position:0% 80%}
img[data-focal="0-90"]{object-position:0% 90%}
img[data-focal="0-100"]{object-position:0% 100%}
img[data-focal="10-0"]{object-position:10% 0%}
img[data-focal="10-10"]{object-position:10% 10%}
img[data-focal="10-20"]{object-position:10% 20%}
img[data-focal="10-30"]{object-position:10% 30%}
img[data-focal="10-40"]{object-position:10% 40%}
img[data-focal="10-50"]{object-position:10% 50%}
img[data-focal="10-60"]{object-position:10% 60%}
img[data-focal="10-70"]{object-position:10% 70%}
img[data-focal="10-80"]{object-position:10% 80%}
img[data-focal="10-90"]{object-position:10% 90%}
img[data-focal="10-100"]{object-position:10% 100%}
img[data-focal="20-0"]{object-position:20% 0%}
img[data-focal="20-10"]{object-position:20% 10%}
img[data-focal="20-20"]{object-position:20% 20%}
img[data-focal="20-30"]{object-position:20% 30%}
img[data-focal="20-40"]{object-position:20% 40%}
img[data-focal="20-50"]{object-position:20% 50%}
img[data-focal="20-60"]{object-position:20% 60%}
img[data-focal="20-70"]{object-position:20% 70%}
img[data-focal="20-80"]{object-position:20% 80%}
img[data-focal="20-90"]{object-position:20% 90%}
img[data-focal="20-100"]{object-position:20% 100%}
img[data-focal="30-0"]{object-position:30% 0%}
img[data-focal="30-10"]{object-position:30% 10%}
img[data-focal="30-20"]{object-position:30% 20%}
img[data-focal="30-30"]{object-position:30% 30%}
img[data-focal="30-40"]{object-position:30% 40%}
img[data-focal="30-50"]{object-position:30% 50%}
img[data-focal="30-60"]{object-position:30% 60%}
img[data-focal="30-70"]{object-position:30% 70%}
img[data-focal="30-80"]{object-position:30% 80%}
img[data-focal="30-90"]{object-position:30% 90%}
img[data-focal="30-100"]{object-position:30% 100%}
img[data-focal="40-0"]{object-position:40% 0%}
img[data-focal="40-10"]{object-position:40% 10%}
img[data-focal="40-20"]{object-position:40% 20%}
img[data-focal="40-30"]{object-position:40% 30%}
img[data-focal="40-40"]{object-position:40% 40%}
img[data-focal="40-50"]{object-position:40% 50%}
img[data-focal="40-60"]{object-position:40% 60%}
img[data-focal="40-70"]{object-position:40% 70%}
img[data-focal="40-80"]{object-position:40% 80%}
img[data-focal="40-90"]{object-position:40% 90%}
img[data-focal="40-100"]{object-position:40% 100%}
img[data-focal="50-0"]{object-position:50% 0%}
img[data-focal="50-10"]{object-position:50% 10%}
img[data-focal="50-20"]{object-position:50% 20%}
img[data-focal="50-30"]{object-position:50% 30%}
img[data-focal="50-40"]{object-position:50% 40%}
img[data-focal="50-50"]{object-position:50% 50%}
img[data-focal="50-60"]{object-position:50% 60%}
img[data-focal="50-70"]{object-position:50% 70%}
img[data-focal="50-80"]{object-position:50% 80%}
img[data-focal="50-90"]{object-position:50% 90%}
img[data-focal="50-100"]{object-position:50% 100%}
img[data-focal="60-0"]{object-position:60% 0%}
img[data-focal="60-10"]{object-position:60% 10%}
img[data-focal="60-20"]{object-position:60% 20%}
img[data-focal="60-30"]{object-position:60% 30%}
img[data-focal="60-40"]{object-position:60% 40%}
img[data-focal="60-50"]{object-position:60% 50%}
img[data-focal="60-60"]{object-position:60% 60%}
img[data-focal="60-70"]{object-position:60% 70%}
img[data-focal="60-80"]{object-position:60% 80%}
img[data-focal="60-90"]{object-position:60% 90%}
img[data-focal="60-100"]{object-position:60% 100%}
img[data-focal="70-0"]{object-position:70% 0%}
img[data-focal="70-10"]{object-position:70% 10%}
img[data-focal="70-20"]{object-position:70% 20%}
img[data-focal="70-30"]{object-position:70% 30%}
img[data-focal="70-40"]{object-position:70% 40%}
img[data-focal="70-50"]{object-position:70% 50%}
img[data-focal="70-60"]{object-position:70% 60%}
img[data-focal="70-70"]{object-position:70% 70%}
img[data-focal="70-80"]{object-position:70% 80%}
img[data-focal="70-90"]{object-position:70% 90%}
img[data-focal="70-100"]{object-position:70% 100%}
img[data-focal="80-0"]{object-position:80% 0%}
img[data-focal="80-10"]{object-position:80% 10%}
img[data-focal="80-20"]{object-position:80% 20%}
img[data-focal="80-30"]{object-position:80% 30%}
img[data-focal="80-40"]{object-position:80% 40%}
img[data-focal="80-50"]{object-position:80% 50%}
img[data-focal="80-60"]{object-position:80% 60%}
img[data-focal="80-70"]{object-position:80% 70%}
img[data-focal="80-80"]{object-position:80% 80%}
img[data-focal="80-90"]{object-position:80% 90%}
img[data-focal="80-100"]{object-position:80% 100%}
img[data-focal="90-0"]{object-position:90% 0%}
img[data-focal="90-10"]{object-position:90% 10%}
img[data-focal="90-20"]{object-position:90% 20%}
img[data-focal="90-30"]{object-position:90% 30%}
img[data-focal="90-40"]{object-position:90% 40%}
img[data-focal="90-50"]{object-position:90% 50%}
img[data-focal="90-60"]{object-position:90% 60%}
img[data-focal="90-70"]{object-position:90% 70%}
img[data-focal="90-80"]{object-position:90% 80%}
img[data-focal="90-90"]{object-position:90% 90%}
img[data-focal="90-100"]{object-position:90% 100%}
img[data-focal="100-0"]{object-position:100% 0%}
img[data-focal="100-10"]{object-position:100% 10%}
img[data-focal="100-20"]{object-position:100% 20%}
img[data-focal="100-30"]{object-position:100% 30%}
img[data-focal="100-40"]{object-position:100% 40%}
img[data-focal="100-50"]{object-position:100% 50%}
img[data-focal="100-60"]{object-position:100% 60%}
img[data-focal="100-70"]{object-position:100% 70%}
img[data-focal="100-80"]{object-position:100% 80%}
img[data-focal="100-90"]{object-position:100% 90%}
img[data-focal="100-100"]{object-position:100% 100%}

}


/* The draft's tokens. */
:root{
  --tk-button-case: none;
  --tk-button-tracking: 0;
  --tk-button-weight: 700;
  --tk-color-accent: #009966;
  --tk-color-accent-ink: #007a55;
  --tk-color-accent-soft: #ecfdf5;
  --tk-color-bg: #ffffff;
  --tk-color-bg-soft: #f9fafb;
  --tk-color-cut: #e7000b;
  --tk-color-cut-soft: #fbe9e5;
  --tk-color-inverse: #101828;
  --tk-color-line: #e5e7eb;
  --tk-color-line-strong: #d1d5dc;
  --tk-color-muted: #4a5565;
  --tk-color-on-inverse: #d1d5dc;
  --tk-color-star: #d99413;
  --tk-color-success: #15803d;
  --tk-color-success-soft: #f0fdf4;
  --tk-color-surface: #ffffff;
  --tk-color-surface-2: #f3f4f6;
  --tk-color-text: #101828;
  --tk-color-tint-a: #e7f1eb;
  --tk-color-tint-b: #ebe9f4;
  --tk-color-tint-c: #f9ebe7;
  --tk-color-tint-d: #f6f0e1;
  --tk-color-tint-e: #e6f0f4;
  --tk-color-tint-f: #edefe6;
  --tk-color-whatsapp: #1d8548;
  --tk-font-arabic: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tk-font-numerals: normal;
  --tk-font-size: 16px;
  --tk-font-weight: 400;
  --tk-layout-control: 44px;
  --tk-layout-gutter: 16px;
  --tk-layout-rhythm: 40px;
  --tk-layout-width: 1152px;
  --tk-radius-card: 16px;
  --tk-radius-control: 12px;
  --tk-radius-pill: 12px;
  --tk-shadow-card: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .07);
  --tk-shadow-pop: 0 10px 15px -3px rgba(17, 24, 39, .1), 0 4px 6px -4px rgba(17, 24, 39, .1);
  --tk-shadow-sticky: 0 -10px 30px -18px rgba(10, 23, 18, .5);
  --tk-spacing-lg: 28px;
  --tk-spacing-md: 16px;
  --tk-spacing-none: 0;
  --tk-spacing-sm: 10px;
  --tk-spacing-xl: 48px;
  --tk-spacing-xs: 6px;
}

/* Each colour token, answering the attributes that name it. */
[data-appearance-background="color.accent"]{--tk-appearance-background:var(--tk-color-accent)}
[data-appearance-text="color.accent"]{--tk-appearance-text:var(--tk-color-accent)}
[data-t1-bg="color.accent"]{background-color:var(--tk-color-accent)}
[data-t1-fg="color.accent"]{color:var(--tk-color-accent)}
[data-appearance-background="color.accent-ink"]{--tk-appearance-background:var(--tk-color-accent-ink)}
[data-appearance-text="color.accent-ink"]{--tk-appearance-text:var(--tk-color-accent-ink)}
[data-t1-bg="color.accent-ink"]{background-color:var(--tk-color-accent-ink)}
[data-t1-fg="color.accent-ink"]{color:var(--tk-color-accent-ink)}
[data-appearance-background="color.accent-soft"]{--tk-appearance-background:var(--tk-color-accent-soft)}
[data-appearance-text="color.accent-soft"]{--tk-appearance-text:var(--tk-color-accent-soft)}
[data-t1-bg="color.accent-soft"]{background-color:var(--tk-color-accent-soft)}
[data-t1-fg="color.accent-soft"]{color:var(--tk-color-accent-soft)}
[data-appearance-background="color.bg"]{--tk-appearance-background:var(--tk-color-bg)}
[data-appearance-text="color.bg"]{--tk-appearance-text:var(--tk-color-bg)}
[data-t1-bg="color.bg"]{background-color:var(--tk-color-bg)}
[data-t1-fg="color.bg"]{color:var(--tk-color-bg)}
[data-appearance-background="color.bg-soft"]{--tk-appearance-background:var(--tk-color-bg-soft)}
[data-appearance-text="color.bg-soft"]{--tk-appearance-text:var(--tk-color-bg-soft)}
[data-t1-bg="color.bg-soft"]{background-color:var(--tk-color-bg-soft)}
[data-t1-fg="color.bg-soft"]{color:var(--tk-color-bg-soft)}
[data-appearance-background="color.cut"]{--tk-appearance-background:var(--tk-color-cut)}
[data-appearance-text="color.cut"]{--tk-appearance-text:var(--tk-color-cut)}
[data-t1-bg="color.cut"]{background-color:var(--tk-color-cut)}
[data-t1-fg="color.cut"]{color:var(--tk-color-cut)}
[data-appearance-background="color.cut-soft"]{--tk-appearance-background:var(--tk-color-cut-soft)}
[data-appearance-text="color.cut-soft"]{--tk-appearance-text:var(--tk-color-cut-soft)}
[data-t1-bg="color.cut-soft"]{background-color:var(--tk-color-cut-soft)}
[data-t1-fg="color.cut-soft"]{color:var(--tk-color-cut-soft)}
[data-appearance-background="color.inverse"]{--tk-appearance-background:var(--tk-color-inverse)}
[data-appearance-text="color.inverse"]{--tk-appearance-text:var(--tk-color-inverse)}
[data-t1-bg="color.inverse"]{background-color:var(--tk-color-inverse)}
[data-t1-fg="color.inverse"]{color:var(--tk-color-inverse)}
[data-appearance-background="color.line"]{--tk-appearance-background:var(--tk-color-line)}
[data-appearance-text="color.line"]{--tk-appearance-text:var(--tk-color-line)}
[data-t1-bg="color.line"]{background-color:var(--tk-color-line)}
[data-t1-fg="color.line"]{color:var(--tk-color-line)}
[data-appearance-background="color.line-strong"]{--tk-appearance-background:var(--tk-color-line-strong)}
[data-appearance-text="color.line-strong"]{--tk-appearance-text:var(--tk-color-line-strong)}
[data-t1-bg="color.line-strong"]{background-color:var(--tk-color-line-strong)}
[data-t1-fg="color.line-strong"]{color:var(--tk-color-line-strong)}
[data-appearance-background="color.muted"]{--tk-appearance-background:var(--tk-color-muted)}
[data-appearance-text="color.muted"]{--tk-appearance-text:var(--tk-color-muted)}
[data-t1-bg="color.muted"]{background-color:var(--tk-color-muted)}
[data-t1-fg="color.muted"]{color:var(--tk-color-muted)}
[data-appearance-background="color.on-inverse"]{--tk-appearance-background:var(--tk-color-on-inverse)}
[data-appearance-text="color.on-inverse"]{--tk-appearance-text:var(--tk-color-on-inverse)}
[data-t1-bg="color.on-inverse"]{background-color:var(--tk-color-on-inverse)}
[data-t1-fg="color.on-inverse"]{color:var(--tk-color-on-inverse)}
[data-appearance-background="color.star"]{--tk-appearance-background:var(--tk-color-star)}
[data-appearance-text="color.star"]{--tk-appearance-text:var(--tk-color-star)}
[data-t1-bg="color.star"]{background-color:var(--tk-color-star)}
[data-t1-fg="color.star"]{color:var(--tk-color-star)}
[data-appearance-background="color.success"]{--tk-appearance-background:var(--tk-color-success)}
[data-appearance-text="color.success"]{--tk-appearance-text:var(--tk-color-success)}
[data-t1-bg="color.success"]{background-color:var(--tk-color-success)}
[data-t1-fg="color.success"]{color:var(--tk-color-success)}
[data-appearance-background="color.success-soft"]{--tk-appearance-background:var(--tk-color-success-soft)}
[data-appearance-text="color.success-soft"]{--tk-appearance-text:var(--tk-color-success-soft)}
[data-t1-bg="color.success-soft"]{background-color:var(--tk-color-success-soft)}
[data-t1-fg="color.success-soft"]{color:var(--tk-color-success-soft)}
[data-appearance-background="color.surface"]{--tk-appearance-background:var(--tk-color-surface)}
[data-appearance-text="color.surface"]{--tk-appearance-text:var(--tk-color-surface)}
[data-t1-bg="color.surface"]{background-color:var(--tk-color-surface)}
[data-t1-fg="color.surface"]{color:var(--tk-color-surface)}
[data-appearance-background="color.surface-2"]{--tk-appearance-background:var(--tk-color-surface-2)}
[data-appearance-text="color.surface-2"]{--tk-appearance-text:var(--tk-color-surface-2)}
[data-t1-bg="color.surface-2"]{background-color:var(--tk-color-surface-2)}
[data-t1-fg="color.surface-2"]{color:var(--tk-color-surface-2)}
[data-appearance-background="color.text"]{--tk-appearance-background:var(--tk-color-text)}
[data-appearance-text="color.text"]{--tk-appearance-text:var(--tk-color-text)}
[data-t1-bg="color.text"]{background-color:var(--tk-color-text)}
[data-t1-fg="color.text"]{color:var(--tk-color-text)}
[data-appearance-background="color.tint-a"]{--tk-appearance-background:var(--tk-color-tint-a)}
[data-appearance-text="color.tint-a"]{--tk-appearance-text:var(--tk-color-tint-a)}
[data-t1-bg="color.tint-a"]{background-color:var(--tk-color-tint-a)}
[data-t1-fg="color.tint-a"]{color:var(--tk-color-tint-a)}
[data-appearance-background="color.tint-b"]{--tk-appearance-background:var(--tk-color-tint-b)}
[data-appearance-text="color.tint-b"]{--tk-appearance-text:var(--tk-color-tint-b)}
[data-t1-bg="color.tint-b"]{background-color:var(--tk-color-tint-b)}
[data-t1-fg="color.tint-b"]{color:var(--tk-color-tint-b)}
[data-appearance-background="color.tint-c"]{--tk-appearance-background:var(--tk-color-tint-c)}
[data-appearance-text="color.tint-c"]{--tk-appearance-text:var(--tk-color-tint-c)}
[data-t1-bg="color.tint-c"]{background-color:var(--tk-color-tint-c)}
[data-t1-fg="color.tint-c"]{color:var(--tk-color-tint-c)}
[data-appearance-background="color.tint-d"]{--tk-appearance-background:var(--tk-color-tint-d)}
[data-appearance-text="color.tint-d"]{--tk-appearance-text:var(--tk-color-tint-d)}
[data-t1-bg="color.tint-d"]{background-color:var(--tk-color-tint-d)}
[data-t1-fg="color.tint-d"]{color:var(--tk-color-tint-d)}
[data-appearance-background="color.tint-e"]{--tk-appearance-background:var(--tk-color-tint-e)}
[data-appearance-text="color.tint-e"]{--tk-appearance-text:var(--tk-color-tint-e)}
[data-t1-bg="color.tint-e"]{background-color:var(--tk-color-tint-e)}
[data-t1-fg="color.tint-e"]{color:var(--tk-color-tint-e)}
[data-appearance-background="color.tint-f"]{--tk-appearance-background:var(--tk-color-tint-f)}
[data-appearance-text="color.tint-f"]{--tk-appearance-text:var(--tk-color-tint-f)}
[data-t1-bg="color.tint-f"]{background-color:var(--tk-color-tint-f)}
[data-t1-fg="color.tint-f"]{color:var(--tk-color-tint-f)}
[data-appearance-background="color.whatsapp"]{--tk-appearance-background:var(--tk-color-whatsapp)}
[data-appearance-text="color.whatsapp"]{--tk-appearance-text:var(--tk-color-whatsapp)}
[data-t1-bg="color.whatsapp"]{background-color:var(--tk-color-whatsapp)}
[data-t1-fg="color.whatsapp"]{color:var(--tk-color-whatsapp)}

/* The body font's own line height, per script. */
:root {
  --tk-font-leading: 1.55;
  --tk-font-leading-rtl: 1.8;
}

/* The curated faces this draft actually names. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/fonts/cairo-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/fonts/cairo-400-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;
}