/* Vintage House — base: tokens, themes, type, and every shared component.
   Tokens come from reference/design-system/tokens.json. Buyer rules read the semantic tokens only
   (bg, sheet, panel, fg, on-fg, muted, mark, on-mark, line, line2, scrim), so:
     :root                    dark (default)
     html[data-theme=light]   light (Profile → Settings)
     [data-line=rc]           Retro Cuff Ivory (light) / Navy (dark), unless data-rc-fixed pins Ivory (D6)
   The five colour-named constants (--void, --bone, --ash, --concrete, --markdown) exist for admin.css only. */

:root {
  color-scheme: dark;
  /* Semantic colours, dark */
  --bg: #000000;
  --sheet: #1A1A1A;
  --panel: #111110;
  --fg: #F2EEE6;
  --on-fg: #000000;
  --muted: #8C8880;
  --mark: #FF3B14;
  --on-mark: #000000;
  --line: #2A2926;
  --line2: #45433E;
  --scrim: rgba(0, 0, 0, .66);
  --rule: var(--line);           /* header, footer and section rules (brass in Retro Cuff) */
  --indigo: #2E3B4E;

  /* Fixed brand constants — admin.css only */
  --void: #000000;
  --bone: #F2EEE6;
  --ash: #1A1A1A;
  --concrete: #8C8880;
  --markdown: #FF3B14;

  /* Spacing */
  --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-16: 16px;
  --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-28: 28px; --sp-40: 40px;
  /* Radii */
  --r-tag: 2px; --r-well: 4px; --r-control: 6px; --r-panel: 8px; --r-seg: 10px;
  --r-bubble: 14px; --r-sheet: 16px; --r-pill: 999px;
  /* Sizes */
  --tap: 44px; --control: 52px; --field: 56px; --cta: 58px; --header: 84px; --logo: 120px;
  --drawer: 420px; --sheet-w: 560px; --content: 1200px;
  --lift: 0 -20px 60px rgba(0, 0, 0, .45);
  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-slide: .3s;
  --t-rot: .2s;
  /* Type */
  --font-disp: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-ar: "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --arabic: var(--font-ar);
  --disp-weight: 900;
  --disp-stretch: 118%;
  --disp-tracking: -.015em;
  --disp-lh: .9;
  --head-weight: 800;
  --head-stretch: 115%;
  /* Gutters: sp-16, or the safe-area inset when larger */
  --gutL: max(var(--sp-16), env(safe-area-inset-left, 0px));
  --gutR: max(var(--sp-16), env(safe-area-inset-right, 0px));
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #F2EEE6;
  --sheet: #E6E1D6;
  --panel: #E8E3D9;
  --fg: #0B0B0A;
  --on-fg: #F2EEE6;
  --muted: #625E57;
  --mark: #C0290B;
  --on-mark: #F2EEE6;
  --line: #D9D3C7;
  --line2: #ADA79B;
  --scrim: rgba(24, 22, 18, .42);
  --lift: 0 -20px 60px rgba(24, 22, 18, .22);
}

/* D1 (open decision): stronger control borders. Off by default; js/config.js sets data-borders. */
html[data-borders='strong'] { --line2: #75716A; }
html[data-borders='strong'][data-theme='light'] { --line2: #7E786E; }

/* Retro Cuff: the same tokens from its palette (Ivory). Wins over data-theme. */
html[data-line='rc'],
html[data-line='rc'][data-theme='light'],
html[data-line='rc'][data-theme='dark'] {
  color-scheme: light;
  --bg: #F5F0E6;
  --sheet: #EAE2D3;
  --panel: #ECE6DA;
  --fg: #012E67;
  --on-fg: #F5F0E6;
  --muted: #5C6678;
  --mark: #8C1D2C;
  --on-mark: #F5F0E6;
  --line: #D8D0C0;
  --line2: #737B8C;
  --scrim: rgba(1, 26, 58, .40);
  --brass: #9A7B4F;
  --oxford: #BCCDE3;
  --rule: var(--brass);
  --lift: 0 -20px 60px rgba(1, 26, 58, .22);
  --font-disp: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --disp-weight: 600;
  --disp-stretch: 100%;
  --disp-tracking: .04em;
  --disp-lh: .95;
  --head-weight: 600;
  --head-stretch: 100%;
}
/* Navy: Retro Cuff in dark mode. data-rc-fixed (VH_CONFIG.decisions.rcIgnoresTheme) keeps Ivory. */
html[data-line='rc'][data-theme='dark']:not([data-rc-fixed]) {
  color-scheme: dark;
  --bg: #0B1A33; --sheet: #14274A; --panel: #10213D; --fg: #F5F0E6; --on-fg: #0B1A33;
  --muted: #A3AEC2; --mark: #EF8C8C; --on-mark: #0B1A33; --line: #22375A; --line2: #6B7FA0;
  --brass: #C4A570; --oxford: #35517E; --scrim: rgba(0, 0, 0, .6);
  --lift: 0 -20px 60px rgba(0, 0, 0, .5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
/* A bg band above the sticky header (notch area) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); pointer-events: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
::selection { background: var(--fg); color: var(--on-fg); }

/* Arabic: one family for everything, Latin included */
html[lang='ar'] body,
html[lang='ar'] body *:not(svg):not(svg *) {
  font-family: var(--arabic) !important;
  letter-spacing: 0 !important;
  font-stretch: 100% !important;
}
html[lang='ar'] .disp, html[lang='ar'] .h, html[lang='ar'] .stamp { font-weight: 700 !important; text-transform: none; }
html[lang='ar'] .label, html[lang='ar'] .tag, html[lang='ar'] .mono { text-transform: none; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--content); margin: 0 auto; padding-left: var(--gutL); padding-right: var(--gutR); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-10); }
.row { display: flex; align-items: center; gap: var(--sp-12); }
.rule { height: 1px; background: var(--rule); margin: var(--sp-40) 0; border: 0; }
.muted { color: var(--muted); }
.signal { color: var(--mark); }
.ltr { direction: ltr; unicode-bidi: isolate; }
html[dir='rtl'] .flip { transform: scaleX(-1); }

/* ---------- Type ---------- */
.disp {
  font-family: var(--font-disp);
  font-weight: var(--disp-weight);
  font-stretch: var(--disp-stretch);
  text-transform: uppercase;
  letter-spacing: var(--disp-tracking);
  line-height: var(--disp-lh);
}
.h {
  font-family: var(--font-disp);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: 22px;
  line-height: 1.05;
}
html[data-line='rc'] .h { letter-spacing: .04em; }
.h-s { font-size: 18px; line-height: 1.1; }
.lead { font-size: 19px; line-height: 1.5; max-width: 62ch; }
.title { font-size: 21px; line-height: 1.35; font-weight: 500; }
.small { font-size: 15px; line-height: 1.35; }
.note { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.label { font: 700 11px/1.8 var(--font-data); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.mono { font-family: var(--font-data); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; line-height: 1.8; }
.ticket { font: 400 11px/1.8 var(--font-data); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.price {
  font: 700 16px/1.35 var(--font-data);
  letter-spacing: -.01em;
  display: inline-flex; flex-wrap: wrap; column-gap: 8px; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.price s { color: var(--muted); font-weight: 400; }
.price .sale { color: var(--mark); }
.price--l { font-size: 28px; line-height: 1.2; column-gap: 12px; }
.price--l s { font-size: 22px; }

/* ---------- Icons ---------- */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.ico--s { width: 20px; height: 20px; }
.ico--xs { width: 18px; height: 18px; }
.caret { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--cta); padding: 0 16px;
  border-radius: var(--r-control);
  font-weight: 700; font-size: 17px; text-align: center; text-decoration: none;
}
.btn--primary { background: var(--fg); color: var(--on-fg); }
.btn--primary:active { opacity: .85; }
.btn--secondary { border: 1.5px solid var(--fg); }
.btn--secondary:active { background: var(--sheet); }
.btn--del-line { border: 1.5px solid var(--mark); color: var(--mark); }
.btn--del-line:active { background: var(--sheet); }
.btn--del { background: var(--mark); color: var(--on-mark); border: none; }
.btn--del:active { opacity: .85; }
.btn[disabled], .btn[aria-disabled='true'] { background: var(--sheet); color: var(--muted); border-color: transparent; cursor: default; }
.btn__sub { font-weight: 400; font-size: 13px; opacity: .75; }
.btn--outline {
  display: inline-flex; width: auto; min-height: var(--control); padding: 0 26px;
  border: 1.5px solid var(--fg); font-size: 16px; align-self: flex-start;
}
.btn--outline:active { background: var(--sheet); }
.btn--sm { min-height: var(--tap); font-size: 15px; width: auto; padding: 0 16px; }
.btn--md { min-height: var(--control); font-size: 16px; }
.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.link .ico { width: 20px; height: 20px; }
.ibtn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; position: relative; text-align: center; flex: none; }
.ibtn:active { background: var(--sheet); }
.badge {
  position: absolute; top: 5px; inset-inline-end: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--mark); color: var(--on-mark);
  font: 700 11px/18px var(--font-data); text-align: center;
}
.udot { position: absolute; top: 9px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); border: 2px solid var(--bg); }

/* ---------- Chips ---------- */
.chips {
  display: flex; gap: var(--sp-10); overflow-x: auto; scrollbar-width: none;
  margin-left: calc(-1 * var(--gutL)); margin-right: calc(-1 * var(--gutR));
  padding: 2px var(--gutR) 4px var(--gutL);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line2); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px; white-space: nowrap;
}
.chip.on { border-color: var(--fg); background: var(--fg); color: var(--on-fg); }
.chip--sq { width: 56px; padding: 0; justify-content: center; }
.chip__n { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--fg); color: var(--on-fg); font: 700 11px/20px var(--font-data); text-align: center; }
.chip.on .chip__n { background: var(--on-fg); color: var(--fg); }
.sizes { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.size {
  min-height: 40px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--line2); border-radius: var(--r-pill);
  font: 700 13px var(--font-data); text-align: center; display: inline-grid; place-items: center;
}
.size.on { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
html[lang='ar'] .size { font-weight: 700; }

/* ---------- Product card ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-28) var(--sp-12); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-10); }
.well {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-well); overflow: hidden;
}
.well.mine { border: 2px solid var(--fg); }
.well img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tags { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; gap: var(--sp-6); flex-wrap: wrap; z-index: 2; max-width: calc(100% - 16px); }
.tag { font: 700 10.5px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; padding: 6px 7px; border-radius: var(--r-tag); white-space: nowrap; display: inline-block; }
.tag--offer { background: var(--fg); color: var(--on-fg); }
.tag--mine { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.stamp {
  position: absolute; bottom: 12px; inset-inline-start: 10px; transform: rotate(-4deg);
  font-family: var(--font-disp); font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em;
  font-size: 15px; line-height: 1; padding: 7px 10px 6px; z-index: 2;
}
html[data-line='rc'] .stamp { font-weight: 700; letter-spacing: .08em; font-stretch: 100%; }
.stamp--solid { background: var(--mark); color: var(--on-mark); }
.stamp--outline { border: 2px solid var(--mark); color: var(--mark); background: var(--bg); }
.stamp--big { font-size: 22px; bottom: 20px; inset-inline-start: 18px; padding: 9px 14px 8px; }
.prow { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.heart { width: var(--tap); height: var(--tap); margin-block: -10px; margin-inline-end: -10px; display: grid; place-items: center; flex: none; }
.heart.on svg { fill: currentColor; }
.cbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cbrand { font-weight: 700; font-size: 16px; line-height: 1.3; }
.cname { font-size: 15px; line-height: 1.35; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmeta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font: 400 11px/1.8 var(--font-data); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.cmeta .sale { color: var(--mark); }
.card.is-sold .well img, .gallery.is-sold img { opacity: .55; filter: grayscale(1); }

/* ---------- Gallery ---------- */
.gallery { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--panel); direction: ltr; }
.slides::-webkit-scrollbar { display: none; }
.gallery.mine .slides { box-shadow: inset 0 0 0 2px var(--fg); }
.slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 5; position: relative; display: grid; place-items: center; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery .tags { top: 14px; inset-inline-start: 14px; }
.gallery .tag { font-size: 12px; padding: 8px 10px; }
.garrow {
  position: absolute; top: calc((100% - 52px) / 2 - 22px);
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line2);
  display: grid; place-items: center; z-index: 3; transition: opacity var(--t-rot);
}
.garrow .ico { width: 18px; height: 18px; }
.garrow--prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.garrow--next { right: max(12px, env(safe-area-inset-right, 0px)); }
.garrow[disabled] { opacity: 0; pointer-events: none; }
.gfoot { display: flex; justify-content: center; align-items: center; height: 52px; position: relative; }
.dots { display: flex; gap: 8px; align-items: center; direction: ltr; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line2); }
.dots i.on { width: 26px; background: var(--fg); }
.gfoot .expand { position: absolute; inset-inline-end: max(8px, env(safe-area-inset-right, 0px)); top: 4px; }

/* ---------- Measurements + diagram ---------- */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: var(--sp-8); }
.mcell { border: 1px solid var(--line2); border-radius: var(--r-well); padding: 10px 6px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.mcell__k { font: 700 11px/1 var(--font-data); color: var(--muted); letter-spacing: .1em; }
.mcell__v { font: 700 24px/1.15 var(--font-data); font-variant-numeric: tabular-nums; direction: ltr; }
.diagram { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px; display: grid; place-items: center; direction: ltr; }
.diagram svg { width: 100%; max-width: 380px; height: auto; }
.dg-o { stroke: var(--muted); stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.dg-o--dash { stroke-dasharray: 5 4; }
.dg-d { stroke: var(--fg); stroke-width: 1.8; fill: none; }
.dg-c { fill: var(--fg); }
.dg-ct { fill: var(--on-fg); font: 700 12px var(--font-data); }
.dg-v { fill: var(--fg); stroke: var(--bg); stroke-width: 4; paint-order: stroke; font: 700 12px var(--font-data); }
.legend { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; }
.legend li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid var(--line2); font-size: 16px; }
.legend__L { width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--on-fg); font: 700 13px/26px var(--font-data); text-align: center; }
.legend__v { font: 700 17px var(--font-data); font-variant-numeric: tabular-nums; direction: ltr; }
.legend__opt { font-size: 13px; color: var(--muted); }

/* ---------- Accordion ---------- */
details.acc { border-bottom: 1px solid var(--line2); }
details.acc:first-of-type { border-top: 1px solid var(--line2); }
details.acc summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 68px; cursor: pointer; font-size: 21px; font-weight: 500;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary .ico { width: 22px; height: 22px; transition: transform var(--t-rot); }
details.acc[open] summary .chev { transform: rotate(90deg); }
html[dir='rtl'] details.acc[open] summary .chev { transform: scaleX(-1) rotate(90deg); }
details.acc[open] summary .plus { transform: rotate(45deg); }
.acc__in { padding: 0 0 22px; display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-16); }
.field > .label { display: block; }
.inp {
  display: flex; align-items: center; min-height: var(--field);
  border: 1.5px solid var(--line2); border-radius: var(--r-control); background: var(--bg);
  padding: 0 16px; gap: 10px; position: relative;
}
.inp:focus-within { border-color: var(--fg); }
.inp input, .inp select, .inp textarea {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--fg);
  font: 400 17px var(--font-body); outline: none; height: 52px; appearance: none; -webkit-appearance: none;
}
.inp textarea { height: auto; min-height: 96px; padding: 14px 0; resize: vertical; line-height: 1.45; }
.inp select option { background: var(--bg); color: var(--fg); }
.inp--big input { font: 700 24px var(--font-data); }
.inp__unit { font: 700 15px var(--font-data); color: var(--muted); }
.inp .caret { pointer-events: none; }
.inp input::placeholder, .inp textarea::placeholder { color: var(--muted); opacity: 1; }
.inp[aria-disabled='true'] { opacity: .55; }
.err { color: var(--mark); font-size: 14px; margin: 0; min-height: 0; }
.err:empty { display: none; }
.seg { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); background: var(--sheet); border-radius: var(--r-seg); padding: var(--sp-4); gap: 2px; }
.seg button { min-height: var(--tap); border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--muted); text-align: center; padding: 0 6px; }
.seg button.on { background: var(--fg); color: var(--on-fg); }
.seg button[lang='ar'] { font-family: var(--font-ar); }
.seg button[lang='en'], .seg button[lang='fr'] { font-family: var(--font-body); }
html[lang='ar'] .seg button[lang='en'], html[lang='ar'] .seg button[lang='fr'] { font-family: var(--font-body) !important; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.seg2 button { min-height: var(--control); border: 1.5px solid var(--line2); border-radius: var(--r-control); font-weight: 500; text-align: center; padding: 0 8px; }
.seg2 button.on { border-color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.seg2 button.fill { background: var(--fg); color: var(--on-fg); border-color: var(--fg); font-weight: 700; }
.qk { display: flex; gap: 8px; flex-wrap: wrap; }
.qk button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r-pill); font: 700 13px var(--font-data); }
.qk button.on { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }

/* Price range */
.range { position: relative; height: 44px; direction: ltr; margin: 4px 4px 0; }
.range__track, .range__fill { position: absolute; top: 20px; height: 4px; border-radius: 2px; }
.range__track { left: 0; right: 0; background: var(--line2); }
.range__fill { background: var(--fg); }
.range input { position: absolute; left: -4px; top: 0; width: calc(100% + 8px); height: 44px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: none; }
.range input::-webkit-slider-runnable-track { background: none; height: 44px; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: var(--fg); border: 3px solid var(--sheet); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; }
.range input::-moz-range-track { background: none; }
.range input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); border: 3px solid var(--sheet); cursor: pointer; }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--fg); }
.pvals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-bottom: 6px; direction: ltr; }
.pv { border: 1.5px solid var(--line2); border-radius: var(--r-control); background: var(--bg); padding: 8px 14px; display: flex; flex-direction: column; }
.pv b { font: 700 18px var(--font-data); font-variant-numeric: tabular-nums; }
html[dir='rtl'] .pv { text-align: right; }

/* Switch */
.sw { position: relative; width: 52px; height: 32px; flex: none; direction: ltr; display: inline-block; }
.sw input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 16px; background: var(--line2); transition: background var(--t-rot); pointer-events: none; }
.sw i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--fg); transition: transform var(--t-rot); }
.sw input:checked + i { background: var(--fg); }
.sw input:checked + i::after { transform: translateX(20px); background: var(--on-fg); }
.sw input:disabled + i { opacity: .55; }
.sw input:focus-visible + i { outline: 2px solid var(--fg); outline-offset: 2px; }
.swrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 56px; }

/* Courier options */
.cour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.cour button {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; border: 1.5px solid var(--line2); border-radius: var(--r-control);
  background: var(--bg); text-align: start; width: 100%;
}
.cour button.on { border-color: var(--fg); }
.cour__logo { height: 56px; max-width: 100%; display: flex; align-items: center; margin-bottom: 4px; }
.cour__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
[data-cour='yalidine'] .cour__logo img { height: 30px; }
.cour__rad { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2); }
.cour button .cour__rad { position: absolute; bottom: 12px; inset-inline-end: 12px; }
.cour button.on .cour__rad { border: 6px solid var(--fg); }
.cour__sub { display: block; font-size: 13px; color: var(--muted); }
.cour__pr { font: 700 16px var(--font-data); direction: ltr; }
.cour__best { display: block; font: 700 10px/1.6 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.cour__best--same { color: var(--muted); }
.cmark { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.cmark img { height: 20px; width: auto; }

/* Filter rows (menu) */
.navl { list-style: none; margin: 0; padding: 0; }
.navl > li > button, .navl > li > a {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 56px; font-size: 19px; text-decoration: none; text-align: start;
}
.navl .ico { width: 20px; height: 20px; }
.cnt { color: var(--muted); font: 400 13px var(--font-data); margin-inline-start: auto; }
.opt__bx { width: 24px; height: 24px; border: 1.5px solid var(--line2); border-radius: 4px; display: grid; place-items: center; flex: none; }
.opt__bx svg { width: 16px; height: 16px; opacity: 0; stroke-width: 2.4; }
.opt[aria-pressed='true'] .opt__bx { background: var(--fg); border-color: var(--fg); color: var(--on-fg); }
.opt[aria-pressed='true'] .opt__bx svg { opacity: 1; }
.selc { font: 700 12px var(--font-data); background: var(--fg); color: var(--on-fg); border-radius: 10px; padding: 2px 8px; margin-inline-start: auto; }

/* ---------- Overlays ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; bottom: 0; width: min(90vw, var(--drawer));
  background: var(--bg); z-index: 80; overflow: hidden; visibility: hidden;
  transition: transform var(--t-slide) var(--ease), visibility 0s var(--t-slide);
  display: flex; flex-direction: column;
}
.drawer--start { inset-inline-start: 0; transform: translateX(-102%); border-inline-end: 1px solid var(--line); }
.drawer--end { inset-inline-end: 0; transform: translateX(102%); border-inline-start: 1px solid var(--line); }
html[dir='rtl'] .drawer--start { transform: translateX(102%); }
html[dir='rtl'] .drawer--end { transform: translateX(-102%); }
.drawer.open, html[dir='rtl'] .drawer.open { transform: none; visibility: visible; transition: transform var(--t-slide) var(--ease), visibility 0s; }
.dhead {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
  padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; flex: none;
  padding-inline: 10px; border-bottom: 1px solid var(--line);
}
.dhead h2 { font-size: 20px; }
.dapply { flex: none; display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dapply .btn { flex: 1; min-height: 54px; font-size: 16px; }
.dpanes { position: relative; flex: 1; overflow: hidden; }
.dpane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px)); transition: transform .28s var(--ease); background: var(--bg); }
.dpane--sub { transform: translateX(102%); }
.dpanes.deep .dpane--main { transform: translateX(-30%); }
.dpanes.deep .dpane--sub { transform: none; }
html[dir='rtl'] .dpane--sub { transform: translateX(-102%); }
html[dir='rtl'] .dpanes.deep .dpane--main { transform: translateX(30%); }
html[dir='rtl'] .dpanes.deep .dpane--sub { transform: none; }
.dsec { margin: 22px 0 4px; font-family: var(--font-disp); font-weight: var(--head-weight); font-stretch: var(--head-stretch); text-transform: uppercase; font-size: 17px; color: var(--muted); }
.dsep { height: 1px; background: var(--line); margin: 12px 0; }
.subback { display: flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--muted); margin-bottom: 4px; }
.subback .ico { width: 18px; height: 18px; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: min(100%, var(--sheet-w)); max-height: 90vh; max-height: 90dvh;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); border-radius: var(--r-sheet) var(--r-sheet) 0 0; z-index: 90;
  transform: translateY(104%); visibility: hidden;
  transition: transform var(--t-slide) var(--ease), visibility 0s var(--t-slide);
  padding: 10px var(--gutR) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutL);
}
.sheet.open { transform: none; visibility: visible; transition: transform var(--t-slide) var(--ease), visibility 0s; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 10px; }
.shead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sheet .inp, .sheet .pv, .sheet .cour button { background: var(--bg); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); background: var(--fg); color: var(--on-fg);
  padding: 12px 18px; border-radius: var(--r-pill); font-weight: 500; font-size: 15px;
  z-index: 120; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; margin: 0 auto;
  width: min(100%, var(--sheet-w)); background: var(--sheet);
  border: 1px solid var(--line2); border-bottom: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 22px var(--gutR) calc(20px + env(safe-area-inset-bottom, 0px)) var(--gutL);
  box-shadow: var(--lift); transform: translateY(104%); visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s .35s;
  max-height: 90vh; overflow-y: auto;
}
.cookie.open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
.cookie h2 { margin: 0 0 8px; font-size: 20px; }
.cookie p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two .btn { min-height: var(--control); font-size: 16px; }
.cookie__more { display: block; margin: 10px auto 0; min-height: var(--tap); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; text-align: center; }
.prefs { display: flex; flex-direction: column; margin-bottom: 16px; }
.pref { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line2); }
.pref b { display: block; font-size: 15px; }
.pref span { font-size: 13px; color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 110; background: var(--bg); display: grid; place-items: center; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.lightbox img { width: min(92vw, 720px, 86vh * 4 / 5); height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.lightbox .x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-end: max(10px, env(safe-area-inset-right, 0px)); }

/* Mini piece row (sheets, threads) */
.mrow { display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--bg); border-radius: var(--r-panel); margin-bottom: 18px; text-decoration: none; }
.mrow__th { width: 64px; height: 80px; flex: none; background: var(--panel); border-radius: var(--r-well); overflow: hidden; }
.mrow__th img { width: 100%; height: 100%; object-fit: contain; }
.mrow__tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow__tx b { font-size: 15px; }
.mrow__tx span { font-size: 14px; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__tx .ticket { opacity: 1; white-space: normal; }

/* Done state */
.done { display: flex; flex-direction: column; gap: 12px; padding: 10px 0 6px; }
.done__ck { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--fg); display: grid; place-items: center; }
.done h3 { font-size: 28px; line-height: .95; }
.done p { max-width: 52ch; }

/* Totals + receipt */
.totals { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line2); padding-top: 14px; margin: 18px 0; }
.totals div { display: flex; justify-content: space-between; font-size: 15px; gap: 12px; }
.totals div > span:last-child { font-family: var(--font-data); font-variant-numeric: tabular-nums; direction: ltr; }
.totals .big { font-size: 19px; font-weight: 700; }
.totals div.totals__if { font-size: 14px; color: var(--muted); }
.totals__if b { color: var(--fg); }
.receipt { border: 1.5px dashed var(--line2); border-radius: var(--r-control); padding: 18px; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.receipt div { display: flex; justify-content: space-between; gap: 12px; }
.receipt div span:last-child { font-family: var(--font-data); font-variant-numeric: tabular-nums; direction: ltr; }
.receipt__tot { border-top: 1px solid var(--line2); padding-top: 10px; font-weight: 700; font-size: 18px; }

/* Messages */
.thread { display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 85%; padding: 12px 14px; border-radius: var(--r-bubble); font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.bub--me { align-self: flex-end; border: 1px solid var(--line2); border-end-end-radius: 4px; }
.bub--them { align-self: flex-start; background: var(--sheet); border-end-start-radius: 4px; }
.bub--note { align-self: center; color: var(--muted); font-size: 14px; text-align: center; padding: 4px 8px; }
.bub__amt { font: 700 18px var(--font-data); direction: ltr; unicode-bidi: isolate; }
.bub__time { font: 400 11px var(--font-data); color: var(--muted); letter-spacing: .08em; }
.bub__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bub__acts button, .bub__acts a { min-height: var(--tap); padding: 0 16px; border-radius: var(--r-control); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; text-decoration: none; }
.bub__acts .y { background: var(--fg); color: var(--on-fg); }
.bub__acts .n { border: 1.5px solid var(--line2); }
.clock { font: 700 22px var(--font-data); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }

/* Help components */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 26px; }
.tl li::before { content: ""; position: absolute; inset-inline-start: 21px; top: 48px; bottom: 4px; width: 2px; background: var(--line2); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl__dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--fg); display: grid; place-items: center; font: 700 16px var(--font-data); }
.tl__dot .ico { width: 22px; height: 22px; }
.tl h3 { margin: 9px 0 4px; font-size: 19px; line-height: 1.3; }
.tl p { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.hcard { border: 1px solid var(--line2); border-radius: var(--r-control); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; text-decoration: none; text-align: start; }
.hcard h3 { font-size: 18px; }
.hcard p { color: var(--muted); font-size: 15px; }
.hcard__big { font: 700 26px/1.1 var(--font-data); font-variant-numeric: tabular-nums; }
.hcard .ico { width: 28px; height: 28px; }
.hcard--solid { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.hcard--solid p { color: var(--on-fg); opacity: .75; }
.callout { background: var(--sheet); border-radius: var(--r-panel); padding: 18px; display: flex; gap: 14px; align-items: flex-start; max-width: 62ch; margin: 8px 0 12px; }
.tblw { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--r-control); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 330px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font: 700 11px/1.4 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tbl td.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.tbl .lo { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Segmented tabs (size-guide families) */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line2); font-size: 14px; font-weight: 500; }
.tabs button.on { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }

/* Motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* Retro Cuff artwork in two inks: navy on Ivory, ivory on Navy. */
html:not([data-theme='dark']) .ink-dark, html[data-rc-fixed] .ink-dark { display: none !important; }
html[data-theme='dark']:not([data-rc-fixed]) .ink-light { display: none !important; }