/* S · Souq — a lantern-lit night market. Phone first (390 px), scales up to 1440 px.
   Logical properties throughout, so Arabic (dir="rtl") mirrors without extra rules. */

:root {
  --night: #1b1a3a;
  --night-2: #262451;
  --night-3: #2e2b5e;
  --night-deep: #121128;
  --saffron: #f4a81d;
  --saffron-hi: #ffbb3d;
  --saffron-d: #a86a06;
  --pom: #c8323c;
  --pom-d: #9e1f2a;
  --mint: #6fbf8e;
  --mint-d: #2f7a52;
  --brass: #c9a45c;
  --brass-l: #ecd08c;
  --brass-d: #8a6a2c;
  --kraft: #e6d3b3;
  --kraft-2: #dcc6a2;
  --ink: #2b1d12;
  --ink-2: #5a4330;
  --cream: #f6ecd9;
  --muted: #c4bde2;
  --twine: #b89a6a;
  --line: rgba(201, 164, 92, 0.3);
  --wood: #5e3c24;
  --hdr-h: 60px;
  --lane-h: 52px;
  --gutter: 16px;
  --maxw: 1240px;
  --radius: 12px;
  --f-sign: "Alfa Slab One", Rockwell, Georgia, serif;
  --f-body: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Chivo", system-ui, sans-serif;
  --f-ar-sign: "Jomhuria", "IBM Plex Sans Arabic", serif;
  --hole: var(--night);
  /* Room view theme (shared/room-view) */
  --rv-bg: #1b1a3a;
  --rv-surface: #262451;
  --rv-text: #f6ecd9;
  --rv-muted: #c4bde2;
  --rv-line: rgba(201, 164, 92, 0.35);
  --rv-accent: #f4a81d;
  --rv-accent-text: #1b1a3a;
  --rv-radius: 12px;
  --rv-font: "Chivo", system-ui, sans-serif;
  --rv-font-display: "Alfa Slab One", Georgia, serif;
  color-scheme: dark;
}
@media (min-width: 900px) { :root { --hdr-h: 68px; --gutter: 32px; } }
html[lang="ar"] { --rv-font: "IBM Plex Sans Arabic", system-ui, sans-serif; --rv-font-display: "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* Arabic waits for its text (set by the head script, removed by i18n.js). */
html.i18n-wait body { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 12px); }
html.has-lanes { scroll-padding-top: calc(var(--hdr-h) + var(--lane-h) + 12px); }
html.is-locked, html.is-locked body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: var(--f-ar); font-size: 1.09375rem; line-height: 1.75; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--saffron); }
h1, h2, h3, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.ico { width: 24px; height: 24px; flex: none; }
[dir="rtl"] .ico.dir { transform: scaleX(-1); }
bdi { unicode-bidi: isolate; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: fixed; z-index: 200; inset-inline-start: 12px; top: 8px;
  padding: 12px 18px; min-height: 44px; border-radius: 10px;
  background: var(--saffron); color: var(--night); font-weight: 800; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip:focus { transform: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 0.8125rem/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--saffron);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 10px 2px rgba(244, 168, 29, 0.6); }
html[lang="ar"] .eyebrow { font-family: var(--f-ar); font-weight: 700; letter-spacing: normal; text-transform: none; font-size: 0.95rem; }
.h2, .hero h1, .buy__title, .sell-hero h1 {
  font-family: var(--f-sign); font-weight: 400; color: var(--cream);
  text-shadow: 0.05em 0.05em 0 var(--pom);
  text-wrap: balance;
}
.h2 { font-size: clamp(2rem, 1.45rem + 2.3vw, 3.25rem); line-height: 1.06; margin-top: 8px; }
html[lang="ar"] .h2, html[lang="ar"] .hero h1, html[lang="ar"] .buy__title, html[lang="ar"] .sell-hero h1 {
  font-family: var(--f-ar-sign); letter-spacing: normal; line-height: 0.95; text-shadow: 0.04em 0.04em 0 var(--pom);
}
html[lang="ar"] .h2 { font-size: clamp(3.1rem, 2.3rem + 3.4vw, 5rem); }
.lede { color: var(--muted); max-width: 60ch; margin-top: 12px; }
.sec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 26px; }
.sec__head > div { max-width: 780px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 800; line-height: 1.15; text-decoration: none; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
}
.btn--primary { background: var(--saffron); color: var(--night); box-shadow: 0 4px 0 var(--saffron-d), 0 12px 26px -10px rgba(244, 168, 29, 0.6); }
.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--brass); }
.btn--dark { background: var(--night); color: var(--cream); box-shadow: inset 0 0 0 2px var(--night), 0 4px 0 #0b0a1c; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--saffron-hi); }
  .btn--ghost:hover { background: rgba(201, 164, 92, 0.14); }
  .btn--dark:hover { background: #2a2856; }
}
.btn--primary:active, .btn--primary.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--saffron-d); }
.btn--ghost:active, .btn--ghost.is-pressed, .btn--dark:active, .btn--dark.is-pressed { transform: translateY(2px); }
.btn[aria-busy="true"] { cursor: progress; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--cream);
  transition: background-color 0.2s, transform 0.12s;
}
@media (hover: hover) { .iconbtn:hover { background: rgba(255, 255, 255, 0.08); } }
.iconbtn:active, .iconbtn.is-pressed { transform: scale(0.94); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr-h); background: #141331; border-bottom: 1px solid var(--line); }
.hdr__in { max-width: var(--maxw); height: 100%; margin-inline: auto; padding-inline: calc(var(--gutter) - 6px); display: flex; align-items: center; gap: 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 6px; margin-inline-end: auto; color: var(--cream); text-decoration: none; border-radius: 8px; }
.logo__mark { width: 28px; height: 35px; filter: drop-shadow(0 0 8px rgba(244, 168, 29, 0.55)); }
.logo__word { font-family: var(--f-sign); font-size: 1.1875rem; line-height: 1; white-space: nowrap; letter-spacing: 0.005em; }
.hdr__nav { display: none; }
.hdr__nav ul { display: flex; gap: 2px; }
.hdr__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: 8px; color: var(--cream); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hdr__nav a[aria-current="page"] { color: var(--saffron); box-shadow: inset 0 -3px 0 var(--saffron); border-radius: 8px 8px 0 0; }
@media (hover: hover) { .hdr__nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--saffron-hi); } }
.hdr__tools { display: flex; align-items: center; gap: 4px; }
.search { display: none; position: relative; }
.search .ico { position: absolute; inset-inline-start: 13px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search input {
  width: clamp(210px, 20vw, 300px); height: 44px; padding-inline: 42px 14px;
  border: 1px solid var(--line); border-radius: 22px; background: #201e46; color: var(--cream); font-size: 1rem;
}
.search input::placeholder { color: #a9a2cc; }
.search input:focus-visible { outline-offset: 1px; border-color: var(--saffron); }
.lang { display: inline-flex; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.lang button { min-width: 48px; min-height: 44px; padding-inline: 10px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); font-weight: 800; }
.lang button[lang="ar"] { font-family: var(--f-ar); font-weight: 700; }
.lang button[aria-pressed="true"] { background: var(--saffron); color: var(--night); }
.hdr__tools > .lang { display: none; }
.cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cream); }
@media (hover: hover) { .cart:hover { background: rgba(255, 255, 255, 0.08); } }
.cart__n {
  position: absolute; top: 1px; inset-inline-end: -2px; min-width: 21px; height: 21px; padding-inline: 5px;
  border-radius: 11px; background: var(--saffron); color: var(--night);
  font: 800 0.75rem/21px var(--f-body); text-align: center; box-shadow: 0 0 0 2px #141331;
}
.cart__n.is-zero { background: #3d3a78; color: var(--cream); }
.cart.is-bump .cart__n { animation: bump 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (min-width: 900px) {
  .search { display: block; }
  .hdr__searchbtn { display: none; }
  .hdr__tools { gap: 10px; }
  .hdr__tools > .lang { display: inline-flex; }
}
@media (min-width: 1100px) {
  .hdr__nav { display: block; }
  .menu-btn { display: none; }
  .logo { margin-inline-end: 12px; }
  .hdr__nav { margin-inline-end: auto; }
}

/* search results panel (desktop) */
.search-panel {
  position: absolute; z-index: 70; top: calc(100% + 10px); inset-inline-end: 0; width: min(440px, 92vw);
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: var(--night-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -20px #000;
  padding: 8px;
}
.search-status { padding: 8px 10px 4px; color: var(--muted); font-size: 0.875rem; }
.search-status:empty { display: none; }
.res-list li + li { border-top: 1px solid rgba(201, 164, 92, 0.15); }
.res { display: grid; grid-template-columns: 64px 1fr 24px; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; border-radius: 10px; color: var(--cream); text-decoration: none; }
@media (hover: hover) { .res:hover { background: rgba(255, 255, 255, 0.06); } }
.res:focus-visible { outline-offset: -2px; }
.res__art { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: radial-gradient(70% 70% at 50% 75%, color-mix(in srgb, var(--g) 45%, transparent), transparent 75%), #1f1d47; }
.res__art .art { width: 100%; height: 100%; }
.res__txt { display: flex; flex-direction: column; min-width: 0; }
.res__name { font-weight: 800; line-height: 1.3; }
.res__meta { color: var(--muted); font-size: 0.875rem; }
.res .ico { color: var(--brass); }
.res-head { padding: 10px 10px 6px; color: var(--muted); font-size: 0.875rem; font-weight: 700; }
.res-stalls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 2px 4px; }
.res-stalls a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; color: var(--cream); text-decoration: none; font-weight: 700; line-height: 1.25; background: rgba(255, 255, 255, 0.04); }
@media (hover: hover) { .res-stalls a:hover { background: rgba(255, 255, 255, 0.09); } }
.res-dot { width: 12px; height: 12px; flex: none; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.res-none { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px; margin: 4px 2px 6px; border-radius: 10px; background: rgba(200, 50, 60, 0.12); }
.res-none .ico { color: var(--saffron); margin-top: 2px; }
.res-none p { color: var(--cream); }

/* overlays: menu + search sheet */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8, 7, 22, 0.66); }
.overlay[hidden] { display: none; }
.sheet {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(100%, 420px);
  display: flex; flex-direction: column; background: var(--night-2);
  padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[dir="rtl"] .sheet { transform: translateX(-100%); }
.overlay.is-open .sheet { transform: none; }
.sheet--full { width: 100%; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.menu__nav ul { margin-top: 8px; }
.menu__nav li + li { border-top: 1px solid var(--line); }
.menu__nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding-inline: 6px; color: var(--cream); text-decoration: none; font-family: var(--f-sign); font-size: 1.5rem; }
html[lang="ar"] .menu__nav a { font-family: var(--f-ar); font-weight: 700; font-size: 1.375rem; }
.menu__nav a .ico { color: var(--brass); }
.menu__lang { margin-top: 22px; padding: 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu__lang .lang button { min-height: 48px; min-width: 64px; font-size: 1rem; }
.menu__cta { margin-top: 18px; }
.menu__cta .btn { width: 100%; }
.search-sheet__form { display: flex; align-items: center; gap: 8px; position: sticky; top: -8px; background: var(--night-2); padding-block: 8px; z-index: 1; }
.search-sheet__field { position: relative; flex: 1; }
.search-sheet__field .ico { position: absolute; inset-inline-start: 14px; top: 50%; margin-top: -11px; width: 22px; height: 22px; color: var(--muted); pointer-events: none; }
.search-sheet__field input { width: 100%; height: 52px; padding-inline: 46px 12px; border: 2px solid var(--brass); border-radius: 12px; background: #15143a; font-size: 1.0625rem; }
.search-sheet__field input:focus-visible { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(244, 168, 29, 0.35); }
.search-sheet__body { padding-top: 6px; }

/* ---------- lane bar (home): wayfinding, highlights the section in view ---------- */
.lanes { position: sticky; top: var(--hdr-h); z-index: 50; height: var(--lane-h); background: #17163a; border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px -16px #000; }
.lanes ul { height: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.lanes ul::-webkit-scrollbar { display: none; }
.lanes a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 14px;
  border-radius: 22px; color: var(--muted); font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}
.lanes__dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5590; transition: background-color 0.25s, box-shadow 0.25s; }
.lanes a[aria-current] { background: rgba(244, 168, 29, 0.14); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--saffron); }
.lanes a[aria-current] .lanes__dot { background: var(--saffron); box-shadow: 0 0 10px 3px rgba(244, 168, 29, 0.7); }
@media (hover: hover) { .lanes a:hover { color: var(--cream); background: rgba(255, 255, 255, 0.06); } }
@media (min-width: 900px) { .lanes ul { justify-content: center; } }

/* ---------- decorative light strings ---------- */
.lights {
  height: 30px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 21px, #ffd27a 0 4px, rgba(255, 190, 90, 0.35) 5px, transparent 12px) 0 0 / 64px 30px repeat-x,
    radial-gradient(circle at 50% 21px, #ff7a5c 0 4px, rgba(255, 110, 80, 0.3) 5px, transparent 12px) 32px 0 / 128px 30px repeat-x,
    radial-gradient(circle at 50% 21px, #8de3a8 0 4px, rgba(140, 227, 168, 0.3) 5px, transparent 12px) 96px 0 / 128px 30px repeat-x,
    linear-gradient(var(--twine), var(--twine)) 0 13px / 100% 1.5px no-repeat;
  opacity: 0.85;
}

/* ---------- hero: the alley ---------- */
.hero {
  position: relative; overflow: clip;
  background: radial-gradient(80% 60% at 75% 18%, rgba(124, 53, 80, 0.4), transparent 70%), var(--night);
}
.hero__in {
  max-width: var(--maxw); margin-inline: auto; padding: 12px var(--gutter) 20px;
  min-height: calc(100svh - var(--hdr-h) - var(--lane-h));
  display: grid; gap: 14px; align-content: center;
}
.hero__copy { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.2rem, 1.35rem + 4vw, 4.5rem); line-height: 1.02; margin: 10px 0 12px; }
html[lang="ar"] .hero h1 { font-size: clamp(3.2rem, 2.2rem + 5vw, 6.6rem); line-height: 0.92; margin-block: 6px 10px; }
.hero__lede { color: var(--muted); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hero__ctas .btn { flex: 1 1 auto; padding-inline: 18px; }
.alley { order: -1; position: relative; }
.alley__frame {
  position: relative; height: clamp(210px, 39svh, 360px); background: #241c3c;
  clip-path: polygon(0% 100%, 0% 30%, 0.44% 25.82%, 1.72% 22.23%, 3.74% 19.16%, 6.41% 16.55%, 9.66% 14.32%, 13.38% 12.4%, 17.5% 10.72%, 21.92% 9.23%, 26.57% 7.83%, 31.34% 6.47%, 36.16% 5.08%, 40.93% 3.58%, 45.58% 1.91%, 50% 0%, 54.42% 1.91%, 59.07% 3.58%, 63.84% 5.08%, 68.66% 6.47%, 73.43% 7.83%, 78.08% 9.23%, 82.5% 10.72%, 86.62% 12.4%, 90.34% 14.32%, 93.59% 16.55%, 96.26% 19.16%, 98.28% 22.23%, 99.56% 25.82%, 100% 30%, 100% 100%);
}
.alley__poster, .alley__canvas, .alley__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.alley__canvas { opacity: 0; transition: opacity 0.9s ease; touch-action: pan-y; }
.alley.is-live .alley__canvas { opacity: 1; }
.alley__arch { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; overflow: visible; }
.alley__arch polyline { fill: none; stroke: var(--brass); stroke-width: 3; vector-effect: non-scaling-stroke; }
.alley__arch .inner { stroke: rgba(201, 164, 92, 0.35); stroke-width: 1.5; }
.alley__key { position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; color: var(--saffron); filter: drop-shadow(0 0 8px rgba(244, 168, 29, 0.8)); pointer-events: none; }
.alley__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 0.875rem; text-align: center; }
.alley__hint .ico { width: 18px; height: 18px; color: var(--saffron); }
.alley__base { height: 10px; margin-top: -1px; border-radius: 0 0 6px 6px; background: linear-gradient(#6b4a2c, #3a2718); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 28px 36px; }
  .alley { order: 0; }
  .alley__frame { height: min(calc(100svh - var(--hdr-h) - var(--lane-h) - 110px), 640px); min-height: 380px; }
  .hero__lede { font-size: 1.125rem; }
  .hero__ctas .btn { flex: 0 0 auto; min-width: 170px; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(52px, 7vw, 100px); }
.sec--alt { background: var(--night-2); --hole: var(--night-2); }
.sec > .lights:first-child { position: absolute; inset-inline: 0; top: 0; }

/* how it works */
.steps { display: grid; gap: 12px; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; align-content: start; padding: 18px 16px; border-radius: var(--radius); background: var(--night-3); box-shadow: inset 0 0 0 1px var(--line); }
.step__no {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe0a0, var(--saffron) 58%, #b97508);
  color: var(--night); font-family: var(--f-sign); font-size: 1.3rem;
  box-shadow: 0 0 0 4px rgba(244, 168, 29, 0.16), 0 0 22px rgba(244, 168, 29, 0.45);
}
.step__ico { display: none; }
.step h3 { font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--cream); margin-top: 2px; }
.step p { color: var(--muted); margin-top: 4px; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 34px; position: relative; }
  .steps::before { content: ""; position: absolute; inset-inline: -10px; top: 0; height: 22px; border-bottom: 2px solid var(--twine); border-radius: 0 0 50% 50% / 0 0 22px 22px; }
  .step { grid-template-columns: 1fr; padding: 22px 20px 24px; }
  .step::before, .step::after { content: ""; position: absolute; top: -26px; width: 2px; height: 28px; background: var(--twine); }
  .step::before { inset-inline-start: 26%; } .step::after { inset-inline-end: 26%; }
  .step__head { display: flex; align-items: center; justify-content: space-between; }
  .step__ico { display: block; width: 34px; height: 34px; color: var(--brass); }
}

/* ---------- hanging kraft tags (product cards) ---------- */
.hang { position: relative; display: flex; flex-direction: column; padding-top: 24px; }
.hang::before { content: ""; position: absolute; top: 0; inset-inline: -9px; height: 13px; border-bottom: 2px solid var(--twine); border-radius: 0 0 50% 50% / 0 0 13px 13px; }
.hang::after { content: ""; position: absolute; top: 12px; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: var(--twine); transform-origin: 50% 0; transform: rotate(calc(var(--tilt, 0deg) * -0.5)); }
.tag {
  position: relative; flex: 1; display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0;
  transition: transform 0.7s cubic-bezier(0.25, 1.7, 0.45, 1), filter 0.2s;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}
.tag:focus-visible { outline: 3px solid var(--saffron); outline-offset: 5px; border-radius: 10px; }
@media (hover: hover) { .tag:hover { transform: rotate(calc(var(--tilt, 0deg) * -1.8)); } .tag:hover .tag__name { text-decoration: underline; text-underline-offset: 3px; } }
.tag:active { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.tag__paper {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 12px 13px;
  background: var(--kraft) linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.04));
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
  border-radius: 0 0 8px 8px;
}
.tag__paper::before { content: ""; position: absolute; top: 8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--hole); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--brass); }
.tag__win {
  display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: radial-gradient(70% 65% at 50% 72%, color-mix(in srgb, var(--g, #f4a81d) 50%, transparent), transparent 72%), #23204b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.tag__win .art { width: 100%; height: 100%; }
.tag__stamp {
  align-self: flex-start; margin: 4px 0 0; padding: 5px 7px 4px;
  font: 800 0.75rem/1.1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pom-d); border: 2px solid currentColor; border-radius: 4px; transform: rotate(-3deg);
}
html[lang="ar"] .tag__stamp { font-family: var(--f-ar); font-weight: 700; letter-spacing: normal; text-transform: none; font-size: 0.8125rem; }
.tag__name { font: 800 1rem/1.28 var(--f-body); color: var(--ink); }
html[lang="ar"] .tag__name { font-family: var(--f-body); }
.tag__desc { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; display: none; }
.tag__by { color: var(--ink-2); font-size: 0.875rem; line-height: 1.35; }
.tag__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1.5px dashed rgba(43, 29, 18, 0.35); }
.tag__price { font-family: var(--f-sign); font-size: 1.3125rem; line-height: 1; color: var(--ink); white-space: nowrap; }
.tag__mat { font: 800 0.75rem/1 var(--f-body); letter-spacing: 0.06em; padding: 5px 7px; border-radius: 4px; background: var(--ink); color: var(--kraft); }
@media (min-width: 600px) { .hang--big .tag__desc { display: block; } }

/* rows: native horizontal scroll with snap, next card peeking */
.row { position: relative; }
.row__track {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 24px; scrollbar-width: thin; scrollbar-color: var(--brass-d) transparent;
}
.row__track:focus-visible { outline-offset: -3px; }
.row__track > li { flex: 0 0 min(64vw, 250px); scroll-snap-align: start; }
.row__arrows { display: none; gap: 8px; }
.arrow {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--night-3); color: var(--cream); box-shadow: inset 0 0 0 2px var(--brass);
  transition: background-color 0.2s, opacity 0.2s, transform 0.12s;
}
.arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .arrow:not(:disabled):hover { background: var(--saffron); color: var(--night); box-shadow: none; } }
.arrow:not(:disabled):active { transform: scale(0.94); }
@media (min-width: 900px) {
  .row__arrows { display: flex; }
  .row.no-overflow .row__arrows { display: none; }
  .row__track { --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding-inline: var(--edge); scroll-padding-inline: var(--edge); gap: 22px; }
  .row__track > li { flex-basis: 262px; }
}
.trending .row__track > li { flex-basis: min(60vw, 240px); }
@media (min-width: 900px) { .trending .row__track > li { flex-basis: 262px; } }

/* ---------- our collection: a stall front ---------- */
.stallfront { position: relative; --hole: #24214d; background: linear-gradient(#2a2757, #22204a); border-radius: 0 0 16px 16px; padding-bottom: 26px; box-shadow: 0 30px 60px -30px #000; }
.stallfront::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 12px; border-radius: 0 0 16px 16px; background: linear-gradient(#8a5a34, #5e3c24); }
.awning {
  --a1: var(--pom); --a2: var(--cream); --sw: 40px;
  position: relative; height: 46px;
  background: repeating-linear-gradient(90deg, var(--a1) 0 var(--sw), var(--a2) var(--sw) calc(var(--sw) * 2));
  -webkit-mask: radial-gradient(circle at calc(var(--sw) / 2) 26px, #000 calc(var(--sw) / 2), transparent calc(var(--sw) / 2 + 0.5px)) 0 0 / var(--sw) 46px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 26px no-repeat;
  mask: radial-gradient(circle at calc(var(--sw) / 2) 26px, #000 calc(var(--sw) / 2), transparent calc(var(--sw) / 2 + 0.5px)) 0 0 / var(--sw) 46px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 26px no-repeat;
}
.awning::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.28), transparent 40%, rgba(0, 0, 0, 0.2)); }
.stallfront__sign { display: flex; justify-content: center; margin-top: -4px; }
.stallfront__sign span { padding: 8px 18px; border-radius: 6px; background: var(--saffron); color: var(--night); font-family: var(--f-sign); font-size: 1.0625rem; box-shadow: 0 4px 0 var(--saffron-d); transform: rotate(-1.5deg); }
html[lang="ar"] .stallfront__sign span { font-family: var(--f-ar); font-weight: 700; }
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 18px 12px 0; }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 26px 28px 0; } }

/* ---------- stall strip (categories) ---------- */
.strip__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.strip__where { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); font-weight: 700; }
.strip__where .ico { color: var(--saffron); }
.strip__where b { color: var(--saffron); font-weight: 800; }
.strip .row__track { align-items: flex-start; }
.strip .row__track > li { flex-basis: min(82vw, 330px); }
@media (min-width: 900px) { .strip .row__track > li { flex-basis: 330px; } }
.stall { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 0 0 14px 14px; background: #221f49; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s; }
.stall:focus-visible { outline-offset: 4px; }
.stall.is-here { box-shadow: inset 0 0 0 2px var(--saffron), 0 0 44px -14px rgba(244, 168, 29, 0.9); }
.stall .awning { --a1: var(--c); --a2: var(--s); --sw: 30px; height: 40px; }
.stall__sign { margin: 4px 14px 0; padding: 9px 12px 10px; border-radius: 8px; background: var(--c); color: var(--k); text-align: center; transform: rotate(-1deg); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(0, 0, 0, 0.12); }
.stall__no { display: block; font: 800 0.75rem/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="ar"] .stall__no { font-family: var(--f-ar); letter-spacing: normal; font-size: 0.8125rem; }
.stall__name { font-family: var(--f-sign); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin-top: 2px; }
html[lang="ar"] .stall__name { font-family: var(--f-ar-sign); font-size: 2.6rem; line-height: 0.95; }
.stall__display { height: 104px; margin: 14px 14px 0; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(60% 80% at 50% 90%, color-mix(in srgb, var(--c) 45%, transparent), transparent 75%), #2a2758; }
.stall__display .art { width: 36%; flex: none; margin-inline: -3%; }
.stall__count { margin: 12px 16px 2px; color: var(--muted); font-size: 0.875rem; }
.stall__goods { padding: 0 8px 10px; }
.good { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 5px 8px; border-radius: 10px; color: var(--cream); text-decoration: none; }
@media (hover: hover) { .good:hover { background: rgba(255, 255, 255, 0.07); } .good:hover .good__name { text-decoration: underline; text-underline-offset: 3px; } }
.good__art { width: 52px; height: 39px; border-radius: 6px; overflow: hidden; background: #2d2a62; }
.good__art .art { width: 100%; height: 100%; }
.good__name { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.good__price { font-family: var(--f-sign); color: var(--saffron); white-space: nowrap; font-size: 1rem; }
.stall__counter { margin-top: auto; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(#8a5a34, #5e3c24); }

/* souq map */
.map { margin-top: 26px; padding: 16px; border-radius: 16px; background: #1a1940; box-shadow: inset 0 0 0 1px var(--line); }
.map__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.map__title { font-family: var(--f-sign); font-weight: 400; font-size: 1.375rem; color: var(--cream); }
html[lang="ar"] .map__title { font-family: var(--f-ar); font-weight: 700; }
.map__hint { color: var(--muted); font-size: 0.875rem; }
.map svg { width: 100%; height: auto; max-width: 620px; margin-inline: auto; }
.map__no { font: 800 13px/1 var(--f-body); }
.map__gate { font: 700 12px/1 var(--f-body); fill: var(--muted); }
html[lang="ar"] .map__gate { font-family: var(--f-ar); }
@media (max-width: 599px) { .map { padding: 14px 10px; } }
@media (min-width: 900px) {
  .map { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "svg head" "svg legend"; gap: 10px 40px; align-items: center; padding: 26px 30px; }
  .map svg { grid-area: svg; max-width: 560px; }
  .map__head { grid-area: head; align-self: end; flex-direction: column; align-items: flex-start; margin: 0; }
  .map__legend { grid-area: legend; align-self: start; margin: 0; }
}
.map__stall rect.body { fill: #2d2a62; stroke: rgba(201, 164, 92, 0.45); stroke-width: 1.5; transition: fill 0.2s; }
.map__stall text { fill: var(--cream); font: 700 14px/1 var(--f-body); }
html[lang="ar"] .map__stall text { font-family: var(--f-ar); font-size: 15px; }
.map__stall:focus { outline: none; }
.map__stall:focus-visible rect.body { stroke: var(--saffron); stroke-width: 3.5; }
@media (hover: hover) { .map__stall:hover rect.body { fill: #3a3678; } }
.map__stall.is-here rect.body { fill: #3d3870; stroke: var(--saffron); stroke-width: 3; }
.map__pin { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.map__legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 0.875rem; }
.map__legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 10px 2px rgba(244, 168, 29, 0.7); }
.map__legend b { color: var(--cream); }
@media (min-width: 900px) {
  .stalls__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 40px; align-items: center; margin-bottom: 10px; }
  .stalls__top .map { margin-top: 0; }
  .stalls__top .sec__head { margin-bottom: 0; }
}

/* ---------- seller band ---------- */
.band { overflow: clip; background: radial-gradient(60% 80% at 85% 30%, rgba(111, 191, 142, 0.16), transparent 70%), var(--night); }
.band__grid { display: grid; gap: 28px; align-items: center; }
.band .h2 { color: var(--cream); }
.band__text { color: var(--cream); font-size: 1.0625rem; max-width: 52ch; margin-top: 14px; }
.band__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.band__ctas .btn { flex: 1 1 200px; }
.band__art { max-width: 460px; width: 100%; justify-self: center; }
.band__art svg { width: 100%; height: auto; }
.band__art text { font-family: var(--f-sign); }
html[lang="ar"] .band__art text { font-family: var(--f-ar); font-weight: 700; }
@media (min-width: 900px) { .band__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; } .band__ctas .btn { flex: 0 0 auto; } }

/* ---------- trust: brass plaques ---------- */
.plaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plaque {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 140px; padding: 22px 14px 20px; border-radius: 10px; text-align: center; color: #241906;
  background: linear-gradient(155deg, #efd594 0%, #cfab62 36%, #b08d4a 62%, #dcbd74 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 5px rgba(120, 90, 30, 0.25), 0 14px 28px -16px #000;
}
.plaque::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    radial-gradient(circle, #7a5f28 2.5px, rgba(255, 240, 200, 0.6) 3px, transparent 3.6px) 0 0 / 8px 8px no-repeat,
    radial-gradient(circle, #7a5f28 2.5px, rgba(255, 240, 200, 0.6) 3px, transparent 3.6px) 100% 0 / 8px 8px no-repeat,
    radial-gradient(circle, #7a5f28 2.5px, rgba(255, 240, 200, 0.6) 3px, transparent 3.6px) 0 100% / 8px 8px no-repeat,
    radial-gradient(circle, #7a5f28 2.5px, rgba(255, 240, 200, 0.6) 3px, transparent 3.6px) 100% 100% / 8px 8px no-repeat;
}
.plaque .ico { width: 32px; height: 32px; stroke-width: 1.8; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45)); }
.plaque p { font-weight: 800; line-height: 1.3; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
@media (min-width: 900px) { .plaques { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .plaque { min-height: 170px; } }

/* ---------- footer ---------- */
.foot { background: var(--night-deep); border-top: 1px solid var(--line); padding: 44px 0 calc(24px + env(safe-area-inset-bottom)); }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.foot__brand { grid-column: 1 / -1; }
.foot__brand .logo { margin-inline-start: -6px; }
.foot__brand p { color: var(--muted); margin-top: 8px; }
.foot__domain { font-family: var(--f-sign); color: var(--saffron) !important; letter-spacing: 0.02em; }
.foot h2 { font: 800 0.8125rem/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--saffron); margin-bottom: 4px; }
html[lang="ar"] .foot h2 { font-family: var(--f-ar); letter-spacing: normal; font-size: 0.95rem; }
.foot nav a { display: flex; align-items: center; min-height: 44px; color: var(--cream); text-decoration: none; }
@media (hover: hover) { .foot nav a:hover { color: var(--saffron-hi); text-decoration: underline; text-underline-offset: 3px; } }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.foot__lang { display: flex; align-items: center; gap: 12px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .foot__brand { grid-column: auto; } }

/* toast */
.toast {
  position: fixed; z-index: 120; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--toast-lift, 0px));
  max-width: 440px; margin-inline: auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px; background: var(--kraft); color: var(--ink); font-weight: 700;
  box-shadow: 0 18px 40px -14px #000, inset 0 0 0 2px rgba(43, 29, 18, 0.12);
  transform: translateY(150%); opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.25s; pointer-events: none;
}
.toast.is-on { transform: none; opacity: 1; }
.toast .ico { color: var(--mint-d); }

/* ---------- product page ---------- */
.crumbs { padding-top: 6px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.crumbs li { display: flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--brass); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; color: var(--muted); text-underline-offset: 3px; }
@media (hover: hover) { .crumbs a:hover { color: var(--cream); } }
.crumbs [aria-current] { color: var(--cream); font-weight: 700; }
.pdp { display: grid; gap: 22px; padding-bottom: 40px; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: start; padding-bottom: 72px; } }
.viewer { position: relative; }
.viewer__stage { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #121128; touch-action: pan-y; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 600px) { .viewer__stage { aspect-ratio: 5 / 4; } }
.viewer__stage:focus-visible { outline-offset: 3px; }
.viewer__view { position: absolute; inset: 0; border-radius: inherit; }
.viewer__view:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; }
.viewer__awning { position: absolute; top: 0; inset-inline: 0; --a1: var(--saffron); --a2: #2b2858; --sw: 28px; height: 40px; pointer-events: none; z-index: 1; }
.viewer__poster, .viewer__canvas, .viewer__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hint-desk { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-desk { display: inline; } .hint-touch { display: none; } }
.viewer__canvas { opacity: 0; transition: opacity 0.7s; touch-action: pan-y; cursor: grab; }
.viewer__canvas:active { cursor: grabbing; }
.viewer.is-live .viewer__canvas { opacity: 1; }
.viewer__top { position: absolute; z-index: 2; top: 46px; inset-inline-start: 12px; inset-inline-end: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.viewer__state { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 20px; background: rgba(18, 17, 40, 0.88); color: var(--cream); font-size: 0.875rem; font-weight: 700; }
.viewer__state i { width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 10px 2px rgba(244, 168, 29, 0.7); }
.viewer.is-neutral .viewer__state i { background: #e8e8ea; box-shadow: none; }
.viewer__tools { position: absolute; bottom: 12px; inset-inline: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chipbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 22px;
  background: rgba(18, 17, 40, 0.9); color: var(--cream); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--brass);
  transition: background-color 0.2s, color 0.2s;
}
.chipbtn .ico { width: 20px; height: 20px; }
.chipbtn[aria-pressed="true"] { background: var(--saffron); color: var(--night); box-shadow: 0 0 22px -2px rgba(244, 168, 29, 0.8); }
.zoom { display: inline-flex; gap: 6px; }
.zoom button { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(18, 17, 40, 0.9); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--brass); }
@media (hover: hover) { .zoom button:hover, .chipbtn:hover { background: #2e2b64; } .chipbtn[aria-pressed="true"]:hover { background: var(--saffron-hi); } }
.zoom button:active, .chipbtn:active { transform: scale(0.95); }
.viewer__hint { margin-top: 10px; color: var(--muted); font-size: 0.875rem; text-align: center; }
.viewer.no-3d .viewer__tools .zoom, .viewer.no-3d .viewer__hint, .viewer.no-3d .chipbtn { display: none; }
.viewer__no3d { display: none; }
.viewer.no-3d .viewer__no3d { display: block; position: absolute; bottom: 12px; inset-inline: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(18, 17, 40, 0.9); font-size: 0.875rem; }

.buy { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .buy { position: sticky; top: calc(var(--hdr-h) + 18px); } }
.buy__title { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem); line-height: 1.04; }
html[lang="ar"] .buy__title { font-size: clamp(3.2rem, 2.6rem + 2.6vw, 4.6rem); }
.buy__maker { color: var(--muted); margin-top: 6px; }
.buy__maker b { color: var(--cream); }
.buy__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pricetag { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 8px 18px 8px 30px; background: var(--kraft); color: var(--ink); font-family: var(--f-sign); font-size: 1.75rem; line-height: 1; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); border-radius: 0 8px 8px 0; }
[dir="rtl"] .pricetag { padding: 8px 30px 8px 18px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.pricetag::before { content: ""; position: absolute; inset-inline-start: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--night); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.pod { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-weight: 700; }
.pod .ico { color: var(--mint); }
.field-label { display: block; font-weight: 800; color: var(--cream); margin-bottom: 8px; }
.field-label span { font-weight: 400; color: var(--muted); }
.matbox { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line); }
.matbox__chip { flex: none; padding: 8px 10px; border-radius: 8px; background: var(--mint); color: #0f2618; font-weight: 900; letter-spacing: 0.04em; }
.matbox p { color: var(--muted); }
.matbox b { color: var(--cream); }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--night), 0 0 0 4px rgba(201, 164, 92, 0.5);
  transition: box-shadow 0.2s, transform 0.15s;
}
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--night), 0 0 0 6px var(--saffron); }
.swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 9px; border: solid var(--ck, #1b1a3a); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.swatch:active { transform: scale(0.94); }
.qtyrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border-radius: 26px; box-shadow: inset 0 0 0 2px var(--brass); }
.qty button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--cream); display: grid; place-items: center; }
@media (hover: hover) { .qty button:hover { background: rgba(255, 255, 255, 0.08); } }
.qty button:disabled { opacity: 0.35; }
.qty output { min-width: 34px; text-align: center; font-weight: 800; font-size: 1.125rem; }
.buy__actions { display: grid; gap: 10px; }
.buy__actions .btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.buy__note { color: var(--muted); font-size: 0.875rem; text-align: center; margin-top: -2px; }
.pinfo { display: grid; gap: 28px; padding-block: 8px 56px; }
.pinfo h2 { font-family: var(--f-sign); font-weight: 400; font-size: 1.5rem; color: var(--cream); margin-bottom: 10px; }
html[lang="ar"] .pinfo h2 { font-family: var(--f-ar); font-weight: 700; }
.pinfo p { color: var(--muted); max-width: 62ch; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px dashed var(--line); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 800; text-align: end; }
@media (min-width: 900px) { .pinfo { grid-template-columns: 1.3fr 1fr; gap: 56px; } }

.buybar {
  position: fixed; z-index: 55; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: #141331; border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -18px #000;
  transform: translateY(110%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.buybar.is-on { transform: none; visibility: visible; transition: transform 0.25s ease; }
.buybar__price { font-family: var(--f-sign); font-size: 1.25rem; color: var(--saffron); white-space: nowrap; margin-inline-end: auto; }
.buybar .btn { min-height: 48px; padding-inline: 16px; }
.buybar .btn--ghost { width: 48px; padding: 0; }
@media (max-width: 899px) { body[data-page="product"] { --toast-lift: 72px; } body[data-page="product"] .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- sell page ---------- */
.sell-hero { padding-block: 12px 40px; background: radial-gradient(70% 70% at 80% 20%, rgba(111, 191, 142, 0.14), transparent 70%), var(--night); }
.sell-hero__grid { display: grid; gap: 22px; align-items: center; }
.sell-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem); line-height: 1.03; margin-top: 10px; }
html[lang="ar"] .sell-hero h1 { font-size: clamp(3.2rem, 2.3rem + 4.4vw, 6rem); }
.sell-hero__lede { color: var(--muted); max-width: 52ch; margin-top: 14px; font-size: 1.0625rem; }
.nots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nots li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 10px; border-radius: 20px; background: rgba(111, 191, 142, 0.12); box-shadow: inset 0 0 0 1px rgba(111, 191, 142, 0.5); color: var(--cream); font-weight: 700; }
.nots .ico { width: 20px; height: 20px; color: var(--mint); }
.sell-hero__art { max-width: 520px; width: 100%; justify-self: center; }
.sell-hero__art svg { width: 100%; height: auto; }
.sell-hero__art text { font-family: var(--f-sign); }
html[lang="ar"] .sell-hero__art text { font-family: var(--f-ar); font-weight: 700; }
@media (min-width: 900px) { .sell-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } .sell-hero { padding-block: 24px 72px; } }
.steps6 { display: grid; gap: 12px; }
.steps6 li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 18px 16px; border-radius: var(--radius); background: var(--night-3); box-shadow: inset 0 0 0 1px var(--line); }
.steps6 h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.steps6 p { color: var(--muted); margin-top: 4px; }
@media (min-width: 600px) { .steps6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1000px) { .calc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.panel { padding: 18px; border-radius: 16px; background: var(--night-3); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 600px) { .panel { padding: 24px; } }
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc legend { padding: 0; }
.calc__group + .calc__group { margin-top: 24px; }
.drop { padding: 14px; border-radius: 14px; border: 2px dashed rgba(201, 164, 92, 0.55); background: rgba(0, 0, 0, 0.14); }
.drop__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.drop__head .ico { width: 30px; height: 30px; color: var(--saffron); }
.drop__head b { display: block; color: var(--cream); }
.drop__head span { color: var(--muted); font-size: 0.9375rem; }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .files { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pickcard { position: relative; display: block; cursor: pointer; }
.pickcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pickcard__box { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 8px 8px 10px; border-radius: 12px; background: var(--night-2); box-shadow: inset 0 0 0 1.5px rgba(201, 164, 92, 0.35); transition: box-shadow 0.2s, background-color 0.2s; }
.pickcard__art { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #1f1d47; }
.pickcard__art .art { width: 100%; height: 100%; }
.pickcard__name { font-weight: 800; line-height: 1.25; font-size: 0.9375rem; }
.pickcard__file { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.pickcard input:checked + .pickcard__box { background: #36326e; box-shadow: inset 0 0 0 2.5px var(--saffron); }
.pickcard input:focus-visible + .pickcard__box { outline: 3px solid var(--saffron); outline-offset: 3px; }
@media (hover: hover) { .pickcard:hover .pickcard__box { background: #312d66; } }
.est { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(111, 191, 142, 0.12); color: var(--cream); }
.est .ico { color: var(--mint); margin-top: 1px; }
.est.is-reading .ico { animation: spin 1s linear infinite; }
.mats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mat .pickcard__box { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; line-height: 1.3; }
.matdot { width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.18); }
.matdot.pla { background: radial-gradient(circle at 35% 30%, #ffe0a0, var(--saffron) 60%, #b97508); }
.matdot.petg { background: radial-gradient(circle at 35% 30%, #c8f0d6, var(--mint) 60%, #2f7a52); }
.calc__side { min-width: 0; }
.mat b { font-size: 1.125rem; }
.mat span { color: var(--muted); font-size: 0.875rem; }
.calc__help { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--saffron); font-weight: 700; text-underline-offset: 3px; }
.money { display: flex; align-items: center; max-width: 320px; border-radius: 12px; background: #15143a; box-shadow: inset 0 0 0 2px var(--brass); }
.money:focus-within { box-shadow: inset 0 0 0 2px var(--saffron), 0 0 0 3px rgba(244, 168, 29, 0.3); }
.money span { padding-inline: 14px 4px; font-weight: 800; color: var(--muted); }
.money input { flex: 1; min-width: 0; height: 56px; padding-inline: 8px 14px; border: 0; background: transparent; font-size: 1.375rem; font-weight: 800; color: var(--cream); }
.money input:focus { outline: none; }
.money.is-bad { box-shadow: inset 0 0 0 2.5px #ff6b6b; }
.calc__hint { color: var(--muted); font-size: 0.9375rem; margin-top: 8px; }
.calc__err { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(200, 50, 60, 0.18); box-shadow: inset 0 0 0 1.5px #ff6b6b; color: #ffe1dc; font-weight: 700; }
.calc__err:empty { display: none; }
.calc__err .ico { color: #ff8a80; flex: none; }
.ledger { position: relative; padding: 22px 18px 18px; border-radius: 14px; background: var(--kraft); color: var(--ink); }
@media (min-width: 1000px) { .ledger { position: sticky; top: calc(var(--hdr-h) + 20px); } }
.ledger__rates { position: absolute; top: 14px; inset-inline-end: 14px; padding: 5px 8px; border: 2px solid var(--pom-d); border-radius: 4px; color: var(--pom-d); font: 800 0.75rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(3deg); }
html[lang="ar"] .ledger__rates { font-family: var(--f-ar); letter-spacing: normal; font-size: 0.8125rem; }
.ledger__min { font-weight: 800; color: var(--ink-2); }
.ledger__big { font-family: var(--f-sign); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; margin-top: 4px; }
.ledger dl { margin: 16px 0 0; }
.ledger dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 10px; border-top: 1.5px dashed rgba(43, 29, 18, 0.3); }
.ledger dt { color: var(--ink-2); font-weight: 700; }
.ledger dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .earn { background: rgba(47, 122, 82, 0.14); margin-inline: -10px; padding-inline: 10px; border-radius: 8px; border-top-color: transparent; }
.ledger .earn dt, .ledger .earn dd { color: #174d31; }
.ledger .earn dd { font-family: var(--f-sign); font-weight: 400; font-size: 1.5rem; }
.ledger details { margin-top: 12px; border-top: 1.5px dashed rgba(43, 29, 18, 0.3); }
.ledger summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-weight: 800; color: var(--ink); }
.ledger summary::-webkit-details-marker { display: none; }
.ledger summary::after { content: "+"; font-size: 1.4rem; line-height: 1; }
.ledger details[open] summary::after { content: "−"; }
.ledger summary:focus-visible { outline-color: var(--pom-d); }
.ledger details dl { margin-top: 0; }
.ledger details dl div { padding-block: 7px; border-top-style: dotted; font-size: 0.9375rem; }
.ledger details dt small { display: block; font-weight: 400; color: var(--ink-2); }
.ledger details .total dd, .ledger details .total dt { color: var(--ink); font-weight: 900; }
.ledger.is-bad .earn dd, .ledger.is-bad .keep dd, .ledger.is-bad .markup dd { color: var(--ink-2); }
.howest { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line); }
.howest h3 { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 800; color: var(--cream); }
.howest h3 .ico { color: var(--saffron); }
.howest p { color: var(--muted); margin-top: 8px; }
.calcstrip {
  position: fixed; z-index: 55; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--kraft); color: var(--ink);
  box-shadow: 0 -10px 30px -12px #000; transform: translateY(110%); visibility: hidden; transition: transform 0.25s, visibility 0s linear 0.25s;
}
.calcstrip.is-on { transform: none; visibility: visible; transition: transform 0.25s; }
.calcstrip span { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.calcstrip b { font-family: var(--f-sign); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.calcstrip .earn b { color: #174d31; }
.calcstrip.is-bad .earn b { color: var(--pom-d); font-family: var(--f-body); font-weight: 800; font-size: 0.9375rem; }

@media (max-width: 999px) { .calc-sec { padding-bottom: 96px; } }
@media (min-width: 1000px) { .calcstrip { display: none; } }

.guide { margin-top: 4px; }
.gtable { width: 100%; border-collapse: separate; border-spacing: 0; }
.gtable th, .gtable td { text-align: start; vertical-align: top; padding: 14px 16px; }
.gtable thead th { padding-block: 16px; }
.gtable thead th[scope="col"] { width: 40%; }
.gtable .gh { display: flex; align-items: center; gap: 10px; }
.gtable .gh b { font-family: var(--f-sign); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.gtable .gh small { display: block; color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.gtable .gh .ico { width: 34px; height: 34px; }
.gtable .pla .ico { color: var(--saffron); }
.gtable .petg .ico { color: var(--mint); }
.gtable tbody th { color: var(--saffron); font-weight: 800; font-size: 0.9375rem; }
.gtable td { color: var(--cream); }
.gtable tbody tr + tr > * { border-top: 1px dashed var(--line); }
.gtable .petg { background: rgba(111, 191, 142, 0.07); }
.gtable .pla { background: rgba(244, 168, 29, 0.06); }
.gtable-wrap { border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--night-3); }
@media (max-width: 699px) {
  .gtable, .gtable tbody { display: block; }
  .gtable thead { display: block; }
  .gtable thead tr, .gtable tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .gtable thead td { display: none; }
  .gtable tbody th { grid-column: 1 / -1; padding: 14px 14px 4px; border-top: 1px dashed var(--line); }
  .gtable tbody tr + tr > * { border-top: 0; }
  .gtable tbody tr + tr > th { border-top: 1px dashed var(--line); }
  .gtable td { padding: 8px 14px 14px; font-size: 0.9375rem; }
  .gtable .gh b { font-size: 1.4rem; }
  .gtable thead th { padding: 14px; }
}
.notes { display: grid; gap: 12px; margin-top: 16px; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line); }
.note .ico { color: var(--saffron); margin-top: 2px; }
.note--food .ico { color: var(--mint); }
.note p { color: var(--muted); }
.note b { color: var(--cream); }
@media (min-width: 900px) { .notes { grid-template-columns: 1fr 1fr; } }

.board { position: relative; padding: 26px 20px 22px; border-radius: 10px; background: var(--kraft) linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.05)); color: var(--ink); box-shadow: 0 20px 40px -20px #000; max-width: 760px; }
.board::before, .board::after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5dc9c, #9a7a34); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.board::before { inset-inline-start: 12px; } .board::after { inset-inline-end: 12px; }
.board__lede { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; font-size: 1.0625rem; }
.board__lede .ico { color: var(--mint-d); }
.board h3 { margin-top: 18px; color: var(--pom-d); font: 800 0.8125rem/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="ar"] .board h3 { font-family: var(--f-ar); letter-spacing: normal; font-size: 0.95rem; }
.board ul { margin-top: 8px; display: grid; gap: 6px; }
.board li { display: flex; gap: 10px; align-items: center; min-height: 40px; font-weight: 700; }
.board li .ico { color: var(--pom-d); }
.scta { text-align: center; }
.scta .h2 { margin-inline: auto; }
.scta p { color: var(--muted); margin: 12px auto 0; max-width: 52ch; }
.scta .btn { margin-top: 22px; min-width: 220px; }
.scta__note { font-size: 0.875rem; margin-top: 12px !important; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .tag, .tag:hover { transform: rotate(var(--tilt, 0deg)); }
}