/* ==========================================================================
   قالب «سوق» (souq) — theme.css
   --------------------------------------------------------------------------
   العقد: docs/THEME_ENGINE.md
   - يستخدم متغيّرات --sf-* فقط (لا hex، لا --ds-*). كل لون/خط/زاوية/كثافة
     يأتي من <style id="sf-vars"> الذي يولّده resolveStorePalette() + الإعدادات العامة.
   - إعدادات غير رقمية تُطبَّق كسمات على <html>:
       data-buttons = solid | outline | pill     (buttons.style)
       data-cards   = plain | bordered | raised  (cards.style)
       data-motion  = none | subtle              (motion)
       data-scale   = normal | large             (typography.scale)
   - خصائص منطقية فقط (inline/block) — لا left/right فيزيائية.
   - هذا الملف هو ما يُشحن كما هو (بعد التصغير). أدوات النموذج في proto.css ولا تُشحن.
   ========================================================================== */

/* ---------- 0. قيم مشتقّة (هندسة لا هوية) ---------- */
:root {
  --sf-dur: 160ms;
  --sf-ease: cubic-bezier(.2, .7, .2, 1);
  --sf-shadow-xs: 0 1px 2px color-mix(in srgb, var(--sf-fg) 10%, transparent);
  --sf-shadow-sheet: 0 -8px 32px color-mix(in srgb, var(--sf-fg) 18%, transparent);
  --sf-hairline: var(--sf-divider);
  --sf-glow: color-mix(in srgb, var(--sf-primary) 16%, transparent);
  --sf-dots: color-mix(in srgb, var(--sf-fg) 9%, transparent);
  --sf-tabbar-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
:root { --_sy: var(--sf-section-y, 32px); }
@media (min-width: 1024px) { :root { --_sy: var(--sf-section-y-lg, 48px); } }
html[data-motion="none"] { --sf-dur: 0ms; }
html[data-scale="large"] { --sf-text-base: 17px; }

/* ---------- 1. أساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (min-width: 1024px) { html { scroll-padding-top: 136px; } }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--sf-bg); color: var(--sf-fg);
  font-family: var(--sf-font-body); font-size: var(--sf-text-base, 16px); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--sf-font-heading); font-weight: 700; line-height: 1.35; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* حلقة التركيز: :focus احتياطًا للمتصفحات التي لا تعرف :focus-visible (أندرويد قديم) */
:focus { outline: 3px solid var(--sf-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--sf-ring); outline-offset: 2px; border-radius: 4px; }
/* الحلقة تتبع السطح: على النغمات الملوّنة تأخذ لون نصّها (≥ 3:1 مضمون من المحرّك) — a11y B1 */
.tone-primary, .slide.s-primary, .announce, .logo-mark { --sf-ring: var(--sf-primary-fg); }
.tone-dark, .slide.s-dark, .ftr.dark { --sf-ring: var(--sf-tone-dark-fg); }
.slide.s-accent { --sf-ring: var(--sf-accent-fg); }
/* على الأسطح الداكنة: الرابط والنص الثانوي يُعاد ربطهما بلوحة النغمة الداكنة، فأي رابط أو زر ثانوي جديد
   داخلها يبقى ≥ 4.5:1 دون استثناءات يدوية (a11y M3). البطاقات داخلها أسطح فاتحة ⇒ تستعيد قيم الصفحة. */
:root { --sf-link-page: var(--sf-link); --sf-fg-muted-page: var(--sf-fg-muted); }
.tone-dark, .slide.s-dark, .ftr.dark { --sf-link: var(--sf-tone-dark-fg); --sf-fg-muted: var(--sf-tone-dark-muted); }
.tone-dark .pcard, .tone-dark .card { --sf-link: var(--sf-link-page); --sf-fg-muted: var(--sf-fg-muted-page); }
/* الزر الفاتح داخل شريحة ملوّنة: الحلقة خارجه على لون الشريحة ⇒ تبقى بلون نص الشريحة (موروثة أعلاه) */
::selection { background: var(--sf-primary); color: var(--sf-primary-fg); }
a, button, label, summary, .tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.num, .m, time, .tnum { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* رابط التخطّي يظهر عند التركيز — a11y B2 */
a.sr:focus { position: fixed !important; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; overflow: visible; background: var(--sf-bg); color: var(--sf-fg); border-radius: var(--sf-radius-control); box-shadow: var(--sf-shadow-sheet); font-weight: 700; --sf-ring: var(--sf-link); }
.muted { color: var(--sf-fg-muted); }
.wrap { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .wrap { padding-inline: 24px; } }

svg.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.s { width: 18px; height: 18px; }
svg.ic.xs { width: 16px; height: 16px; stroke-width: 2; }
svg.dv { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .flip { transform: scaleX(-1); }

/* ---------- 2. أزرار (buttons.style) ---------- */
.btn {
  --_bg: transparent; --_fg: var(--sf-link); --_bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1.5px solid var(--_bd); border-radius: var(--sf-radius-btn);
  background: var(--_bg); color: var(--_fg);
  font: 700 16px/1.2 var(--sf-font-heading); white-space: nowrap; text-align: center;
  transition: background-color var(--sf-dur) var(--sf-ease), border-color var(--sf-dur), transform 80ms ease-out, color var(--sf-dur);
}
.btn:active { transform: scale(.97); }
.btn-primary { --_bg: var(--sf-primary); --_fg: var(--sf-primary-fg); --_bd: var(--sf-primary); }
.btn-primary:hover { --_bg: var(--sf-primary-hover); --_bd: var(--sf-primary-hover); }
.btn-primary:active { --_bg: var(--sf-primary-active); }
.btn-secondary { --_bd: var(--sf-link); --_fg: var(--sf-link); }
.btn-secondary:hover { --_bg: var(--sf-primary-subtle); --_fg: var(--sf-primary-subtle-fg); }
.btn-ghost { --_fg: var(--sf-fg); padding-inline: 12px; }
.btn-ghost:hover { --_bg: var(--sf-surface-muted); }
.btn-lg { min-height: 52px; font-size: 17px; }
.btn-sm { min-height: 40px; padding-inline: 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { --_bg: var(--sf-surface-muted); --_fg: var(--sf-fg-muted); --_bd: var(--sf-surface-muted); cursor: not-allowed; transform: none; }
/* outline: الأساسي يصبح محدّدًا، والثانوي يُشتق ghost (THEME_ENGINE §1.1) */
html[data-buttons="outline"] .btn-primary { --_bg: transparent; --_fg: var(--sf-link); --_bd: var(--sf-link); }
html[data-buttons="outline"] .btn-primary:hover { --_bg: var(--sf-primary-subtle); --_fg: var(--sf-primary-subtle-fg); }
html[data-buttons="outline"] .btn-secondary { --_bd: transparent; text-decoration: underline; text-underline-offset: 4px; }
/* داخل شريط الشراء الثابت يبقى الثانوي زرًّا محدّدًا حتى مع outline (لا رابط مسطّر داخل شريط) */
html[data-buttons="outline"] .buybar .btn-secondary { --_bd: var(--sf-border); --_fg: var(--sf-fg); text-decoration: none; }
html[data-buttons="pill"] { --sf-radius-btn: 9999px; }
html[data-buttons] .btn[disabled], html[data-buttons] .btn[aria-disabled="true"] { --_bg: var(--sf-surface-muted); --_fg: var(--sf-fg-muted); --_bd: var(--sf-surface-muted); text-decoration: none; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--sf-radius-control); color: var(--sf-fg);
  transition: background-color var(--sf-dur);
}
.icon-btn:hover { background: var(--sf-surface-muted); }
.icon-btn:active { transform: scale(.94); }
.count {
  position: absolute; inset-block-start: 2px; inset-inline-end: 0;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--sf-accent); color: var(--sf-accent-fg); border: 2px solid var(--sf-bg);
  font: 700 11px/16px var(--sf-font-heading); text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- 3. شارات ورقائق ---------- */
/* position:relative ⇒ نص .sr داخل الرقاقة يبقى محصورًا في الشريط القابل للتمرير ولا يوسّع الصفحة أفقيًا */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--sf-divider); border-radius: 9999px; background: var(--sf-surface);
  font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--sf-fg);
  transition: border-color var(--sf-dur), background-color var(--sf-dur);
}
.chip:hover { border-color: var(--sf-link); }
.chip[aria-current="true"], .chip.on { background: var(--sf-fg); color: var(--sf-bg); border-color: var(--sf-fg); }
.chip .x { width: 16px; height: 16px; }
/* شارة الخصم = «تذكرة سعر» بقصّة جانبية — توقيع القالب */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding-block: 3px; padding-inline: 10px 12px;
  background: var(--sf-accent); color: var(--sf-accent-fg);
  font: 700 13px/1.3 var(--sf-font-heading); border-radius: 4px; white-space: nowrap;
  /* القصّة على حافة inline-end (يسار في RTL، يمين في LTR) والحشوة الأوسع في جهتها */
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%);
          mask: radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%);
}
[dir="ltr"] .tag {
  -webkit-mask: radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%);
          mask: radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%);
}
.tag.dark { background: var(--sf-fg); color: var(--sf-bg); }
.sample {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px;
  background: var(--sf-bg); color: var(--sf-fg); border: 1px dashed var(--sf-border);
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.pill-ok, .pill-low, .pill-out, .pill-info {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px;
  font-size: 13px; font-weight: 700;
}
.pill-ok { background: var(--sf-success-subtle); color: var(--sf-success); }
.pill-low { background: var(--sf-warning-subtle); color: var(--sf-warning); }
.pill-out { background: var(--sf-danger-subtle); color: var(--sf-danger); }
.pill-info { background: var(--sf-primary-subtle); color: var(--sf-primary-subtle-fg); }

/* ---------- 4. المال ---------- */
/* المبلغ معزول اتجاهيًا: «112,000 ر.ي (صنعاء)» و«−» لا ينقلبان بجوار نص لاتيني أو أقواس */
.m { white-space: nowrap; unicode-bidi: isolate; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.price .now { font: 700 18px/1.2 var(--sf-font-heading); color: var(--sf-fg); }
.price .now.deal { color: var(--sf-accent-text); }
.price .was { font-size: 14px; color: var(--sf-fg-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rg-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sf-fg-muted); }
.rg-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-accent); }

/* مؤشّر المخزون (من المخزون الحقيقي فقط) */
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock.ok { color: var(--sf-success); }
.stock.low { color: var(--sf-warning); }
.stock.out { color: var(--sf-danger); }
.meter { --v: 3; width: 44px; height: 4px; border-radius: 2px; flex: none;
  background: linear-gradient(to left, currentColor calc(var(--v) * 20%), var(--sf-divider) 0); }
[dir="ltr"] .meter { background: linear-gradient(to right, currentColor calc(var(--v) * 20%), var(--sf-divider) 0); }

/* ---------- 5. الإطار: شريط الإعلان + الرأس ---------- */
.announce { background: var(--sf-primary); color: var(--sf-primary-fg); font-size: 14px; font-weight: 700; }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; text-align: center; }
.announce a { text-decoration: underline; text-underline-offset: 3px; }

/* على الجوال: الرأس الثابت 57px بدل 111px — حيلة sticky بإزاحة سالبة، بلا JS. ملاحظة (قيس في المتصفح):
   الإزاحة السالبة تُخفي الصف الأعلى (الشعار والسلة) ويبقى صف البحث ظاهرًا أثناء التمرير. انظر NOTES §9 «مفتوح». */
.hdr { position: sticky; inset-block-start: -54px; z-index: 40; background: var(--sf-bg); border-block-end: 1px solid var(--sf-hairline); }
.co-hdr { inset-block-start: 0; }
.hdr-row { display: flex; align-items: center; gap: 4px; height: 56px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 var(--sf-font-heading); color: var(--sf-fg); height: 44px; }
.logo-mark {
  width: 32px; height: 32px; border-radius: var(--sf-radius-control); display: grid; place-items: center;
  background: var(--sf-primary); color: var(--sf-primary-fg);
}
.logo-mark svg { width: 20px; height: 20px; }
.hdr .spacer { flex: 1; }
.search { position: relative; display: flex; align-items: center; flex: 1; }
.search input {
  width: 100%; height: 44px; padding-inline: 44px 12px; border-radius: var(--sf-radius-control);
  border: 1.5px solid var(--sf-border); background: var(--sf-surface); font-size: 16px; color: var(--sf-fg);
  transition: border-color var(--sf-dur), box-shadow var(--sf-dur);
}
.search input::placeholder { color: var(--sf-fg-muted); }
.search input:focus { outline: none; border-color: var(--sf-ring); box-shadow: 0 0 0 3px var(--sf-glow); }
.search .ic { position: absolute; inset-inline-start: 12px; color: var(--sf-fg-muted); pointer-events: none; }
.search button[type="submit"] { position: absolute; inset-inline-end: 4px; height: 36px; padding: 0 14px; border-radius: calc(var(--sf-radius-control) - 2px); background: var(--sf-primary); color: var(--sf-primary-fg); font-weight: 700; font-size: 14px; display: none; }
.hdr-search { padding-block-end: 10px; }
.hdr-nav { display: none; }
.hdr-desk { display: none; }
.hdr .track-link { display: none; }
@media (min-width: 1024px) {
  .hdr { inset-block-start: 0; }
  .hdr-row { height: 72px; gap: 16px; }
  .hdr .menu-btn { display: none; }
  .hdr .spacer { display: none; }
  .hdr-search { display: none; }
  .hdr-desk { display: flex; flex: 1; max-width: 620px; margin-inline: 16px auto; }
  .hdr-desk .search input { height: 48px; padding-inline-end: 96px; }
  .hdr-desk .search button[type="submit"] { display: block; height: 40px; }
  .hdr .track-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 8px; font-size: 14px; font-weight: 700; color: var(--sf-fg-muted); }
  .hdr .track-link:hover { color: var(--sf-fg); }
  .logo { font-size: 22px; }
  .logo-mark { width: 40px; height: 40px; }
  .hdr-nav { display: block; border-block-start: 1px solid var(--sf-hairline); }
  .hdr-nav ul { display: flex; align-items: center; gap: 4px; height: 48px; }
  .hdr-nav a { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding-inline: 12px; font-size: 15px; font-weight: 700; color: var(--sf-fg); border-block-end: 2px solid transparent; transition: border-color var(--sf-dur), color var(--sf-dur); }
  .hdr-nav a:hover, .hdr-nav a[aria-current="page"] { border-block-end-color: var(--sf-primary); color: var(--sf-link); }
  .hdr-nav .hot { color: var(--sf-accent-text); }
  .hdr-nav .end { margin-inline-start: auto; }
}

/* الدرج الجانبي (بلا JS: :target) */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer:target { visibility: visible; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); background: color-mix(in srgb, var(--sf-fg) 45%, transparent); opacity: 0; transition: opacity var(--sf-dur); }
.drawer:target .scrim { opacity: 1; }
.drawer .panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px);
  background: var(--sf-bg); padding: 12px 16px 24px; overflow-y: auto;
  transform: translateX(100%); transition: transform 220ms var(--sf-ease);
}
[dir="ltr"] .drawer .panel { transform: translateX(-100%); }
.drawer:target .panel { transform: none; }
.drawer .panel header { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-block-end: 1px solid var(--sf-hairline); font-weight: 700; }

/* ---------- 6. الأقسام العامة ---------- */
.sec { padding-block: var(--_sy) 0; }
.sec:last-of-type { padding-block-end: var(--_sy); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.sec-head h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.sec-head h2 .bar { width: 4px; height: 22px; border-radius: 2px; background: var(--sf-primary); }
.sec-head .all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--sf-link); }
.sec-head .all:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1024px) { .sec-head h2 { font-size: 24px; } }

/* نغمات الأقسام (Tone) — من اللوحة فقط */
.tone-muted { background: var(--sf-surface-muted); }
.tone-primary { background: var(--sf-primary); color: var(--sf-primary-fg); }
.tone-dark { background: var(--sf-tone-dark-bg); color: var(--sf-tone-dark-fg); }
.tone-dark .muted { color: var(--sf-tone-dark-muted); }

/* شريط تمرير أفقي بـ scroll-snap (لا carousel بـ JS) */
.rail { display: grid; grid-auto-flow: column; gap: var(--sf-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 4px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ---------- 7. بطاقة المنتج (compare-friendly: subgrid يحاذي الصفوف) ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-gap); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rail .pcard { width: 168px; }
@media (min-width: 1024px) { .rail .pcard { width: 224px; } }

.pcard {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px;
  padding: 8px 8px 12px; border-radius: var(--sf-radius-card); background: var(--sf-surface);
  transition: border-color var(--sf-dur), box-shadow var(--sf-dur), transform var(--sf-dur) var(--sf-ease);
}
@supports (grid-template-rows: subgrid) {
  .grid > .pcard { grid-row: span 5; grid-template-rows: subgrid; row-gap: 6px; }
  .grid { row-gap: calc(var(--sf-gap) + 4px); }
}
html[data-cards="bordered"] .pcard { border: 1px solid var(--sf-hairline); }
html[data-cards="raised"] .pcard { box-shadow: var(--sf-shadow-xs); }
html[data-cards="plain"] .pcard { padding-inline: 0; background: transparent; }
@media (hover: hover) {
  .pcard:hover { border-color: var(--sf-link); }
  .pcard:hover .pmedia svg.dv { transform: translateY(-3px) scale(1.03); }
}
.pcard .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard .stretch:focus, .pcard .stretch:focus-visible { outline: none; }
/* الحلقة على ::after الممتد (يغطي البطاقة) — تعمل بلا :has() */
.pcard .stretch:focus::after { outline: 3px solid var(--sf-ring); outline-offset: 2px; }
.pcard .stretch:focus:not(:focus-visible)::after { outline: none; }

.pmedia {
  position: relative; aspect-ratio: var(--sf-card-ratio, 1 / 1); overflow: hidden;
  border-radius: calc(var(--sf-radius-card) - 4px);
  background:
    radial-gradient(60% 55% at 50% 58%, var(--sf-glow), transparent 70%),
    radial-gradient(var(--sf-dots) 1px, transparent 1.2px) 0 0 / 12px 12px,
    var(--sf-surface-muted);
  background-color: var(--sf-surface-muted);
  display: grid; place-items: center; color: var(--sf-fg);
}
html[data-cards="plain"] .pmedia { border-radius: var(--sf-radius-card); }
.pmedia svg.dv { width: 64%; height: 64%; transition: transform 220ms var(--sf-ease); }
.pmedia .badges { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; align-items: start; gap: 4px; z-index: 2; }
.pmedia .sample { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; }
.pmedia .rank {
  position: absolute; inset-block-end: 4px; inset-inline-start: 10px; z-index: 2;
  font: 700 44px/1 var(--sf-font-heading); color: transparent; -webkit-text-stroke: 1.5px var(--sf-fg);
  font-variant-numeric: tabular-nums; opacity: .85;
}
.pmedia.is-out svg.dv { opacity: .45; }
.pmedia .veil { position: absolute; inset-inline: 8px; inset-block-end: 8px; z-index: 2; text-align: center; padding: 4px; border-radius: 6px; background: var(--sf-bg); color: var(--sf-danger); font-size: 13px; font-weight: 700; }

.pcard .ttl { font: 700 15px/1.45 var(--sf-font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.specs { display: flex; flex-wrap: wrap; gap: 4px; align-content: start; }
.specs span { font-size: 12px; line-height: 1.5; padding: 1px 6px; border-radius: 4px; background: var(--sf-surface-muted); color: var(--sf-fg-muted); font-weight: 700; }
.pcard .price { align-self: end; }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
/* إضافة سريعة (منتج بمتغيّر واحد فقط): نموذج حقيقي فوق الرابط الممتد، 44px، يعمل بلا JS */
.qadd { position: relative; z-index: 2; margin: 0; flex: none; }
.qadd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px;
  padding-inline: 10px 12px; border: 1.5px solid var(--sf-link); border-radius: var(--sf-radius-btn);
  color: var(--sf-link); font: 700 14px/1 var(--sf-font-heading); background: var(--sf-surface);
  transition: background-color var(--sf-dur), color var(--sf-dur);
}
.qadd-btn:hover { background: var(--sf-primary-subtle); color: var(--sf-primary-subtle-fg); }
.qadd-btn:active { transform: scale(.96); }
.qadd-btn[aria-busy="true"] { cursor: progress; }
.qadd-btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: sf-spin .8s linear infinite; }
@media (min-width: 1024px) { .pcard { padding: 10px 10px 14px; } .pcard .ttl { font-size: 15px; } .price .now { font-size: 19px; } }

/* ---------- 8. الأقسام الخاصة بالرئيسية ---------- */
/* 8.1 hero (variant: slider) — scroll-snap + نقاط روابط، بلا تشغيل تلقائي */
.hero { padding-block-start: 12px; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--sf-radius-card); overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; align-content: space-between;
  min-height: 340px; padding: 20px 20px; overflow: hidden; isolation: isolate;
}
.slide::before { /* شبكة خطوط زخرفية بلون النص نفسه — لا تمسّ التباين */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12;
  background:
    linear-gradient(currentColor 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask: radial-gradient(90% 80% at 20% 70%, #000, transparent 75%);
          mask: radial-gradient(90% 80% at 20% 70%, #000, transparent 75%);
}
.slide.s-primary { background: linear-gradient(150deg, var(--sf-primary), var(--sf-primary-active)); color: var(--sf-primary-fg); }
.slide.s-dark { background: var(--sf-tone-dark-bg); color: var(--sf-tone-dark-fg); }
.slide.s-accent { background: var(--sf-accent); color: var(--sf-accent-fg); }
.slide .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; opacity: .92; }
.slide h2 { font-size: 30px; line-height: 1.25; margin-block: 8px 8px; max-width: 14ch; }
.slide p { font-size: 16px; max-width: 34ch; opacity: .92; }
.slide .cta { margin-block-start: 16px; }
.slide .cta .btn { --_bg: var(--sf-bg); --_fg: var(--sf-fg); --_bd: var(--sf-bg); }
.slide .art { justify-self: center; width: 52%; max-width: 200px; aspect-ratio: 1; margin-block-start: 8px; }
.slide .art svg { width: 100%; height: 100%; stroke-width: 1.8; }
.slide .from { justify-self: end; margin-block-start: -8px; text-align: end; font-size: 13px; font-weight: 700; }
@media (min-width: 768px) { .slide .from { position: absolute; margin: 0; inset-block-end: 20px; inset-inline-end: 20px; } }
.slide .from b { display: block; font: 700 24px/1.1 var(--sf-font-heading); }
.dots { display: flex; justify-content: center; gap: 4px; margin-block-start: 8px; }
.dots a { display: grid; place-items: center; width: 32px; height: 32px; }
.dots a::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--sf-border); transition: width var(--sf-dur), background-color var(--sf-dur); }
.dots a[aria-current="true"]::before { width: 24px; background: var(--sf-primary); }
@media (min-width: 768px) {
  .slide { grid-template-columns: 1.1fr .9fr; align-items: center; min-height: 400px; padding: 40px 48px; }
  .slide h2 { font-size: 44px; }
  .slide .art { grid-row: 1 / span 2; grid-column: 2; width: 100%; max-width: 280px; margin: 0; }
  .slide .from { inset-block-end: 32px; inset-inline-end: 48px; }
}
/* 8.1b banner (variant: two_up) — بلا صور فوتوغرافية ⇒ tone + رسم خطّي */
.two-up { display: grid; gap: var(--sf-gap); }
.bnr { position: relative; display: grid; align-content: center; gap: 6px; min-height: 148px; padding: 20px; padding-inline-end: 132px; border-radius: var(--sf-radius-card); overflow: hidden; isolation: isolate; transition: transform var(--sf-dur) var(--sf-ease); }
.bnr h3 { font-size: 20px; line-height: 1.3; }
.bnr p { font-size: 14px; opacity: .92; }
.bnr .go { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.bnr svg.dv { position: absolute; z-index: -1; inset-inline-end: 12px; inset-block-end: 50%; transform: translateY(50%); width: 116px; height: 116px; stroke-width: 2.2; opacity: .95; }
.bnr.b-muted { background: var(--sf-primary-subtle); color: var(--sf-fg); }
.bnr.b-muted svg.dv { color: var(--sf-primary-subtle-fg); }
@media (hover: hover) { .bnr:hover { transform: translateY(-2px); } }
@media (min-width: 768px) { .two-up { grid-template-columns: 1fr 1fr; } .bnr { min-height: 180px; padding: 28px; padding-inline-end: 180px; } .bnr h3 { font-size: 24px; } .bnr svg.dv { width: 150px; height: 150px; inset-inline-end: 20px; } }
/* شريط أفقي يصبح شبكة على المكتب (carousel ⇄ grid) */
@media (min-width: 1024px) {
  .rail.to-grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .rail.to-grid .pcard { width: auto; }
}
/* best_sellers + showRank: بطاقة أفقية مرقّمة على المكتب */
.ranked { counter-reset: r; }

/* 8.2 categories (variant: tiles — صغيرة كثيفة) */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 88px; gap: 8px; }
.cat { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--sf-radius-card); text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35; transition: background-color var(--sf-dur); }
.cat:hover { background: var(--sf-surface-muted); }
.cat .ico { width: 56px; height: 56px; border-radius: var(--sf-radius-card); display: grid; place-items: center; background: var(--sf-primary-subtle); color: var(--sf-primary-subtle-fg); }
.cat .ico svg { width: 36px; height: 36px; stroke-width: 3.2; }
@media (min-width: 1024px) {
  .cats { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); overflow: visible; margin: 0; padding: 0; }
  .cat .ico { width: 72px; height: 72px; }
  .cat .ico svg { width: 44px; height: 44px; }
  .cat { font-size: 14px; }
}

/* 8.3 offers (tone: dark) + العدّاد الصادق */
.deals { border-radius: var(--sf-radius-card); padding: 20px 16px; margin-inline: -16px; border-radius: 0; }
@media (min-width: 768px) { .deals { margin-inline: 0; border-radius: var(--sf-radius-card); padding: 28px; } }
.deals-head { display: grid; gap: 12px; margin-block-end: 16px; }
.deals-head h2 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.deals-head h2 .ic { color: var(--sf-tone-dark-accent); }
.deals .all { color: var(--sf-tone-dark-fg); }
.cd { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.cd .seg { display: grid; justify-items: center; min-width: 48px; padding: 6px 4px 4px; border-radius: var(--sf-radius-control); background: color-mix(in srgb, var(--sf-tone-dark-fg) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sf-tone-dark-fg) 22%, transparent); }
.cd .seg b { font: 700 22px/1 var(--sf-font-heading); font-variant-numeric: tabular-nums; color: var(--sf-tone-dark-fg); }
.cd .seg small { font-size: 11px; color: var(--sf-tone-dark-muted); margin-block-start: 2px; }
.cd .sep { font: 700 20px/1 var(--sf-font-heading); opacity: .5; }
.cd .tick { animation: sf-tick 180ms var(--sf-ease); }
@keyframes sf-tick { from { transform: translateY(-4px); opacity: .3; } }
.deals[data-expired] .cd { opacity: .7; }
.deals .pcard { background: var(--sf-surface); color: var(--sf-fg); }
html[data-cards="plain"] .deals .pcard { padding-inline: 8px; background: var(--sf-surface); }
@media (min-width: 768px) { .deals-head { grid-template-columns: 1fr auto; align-items: center; } }

/* 8.4 brand_logos (row_scroll + grayscale) */
.brands { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; }
.brand { display: grid; place-items: center; height: 64px; border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); font: 700 18px/1 var(--sf-font-heading); color: var(--sf-fg-muted); transition: color var(--sf-dur), border-color var(--sf-dur); }
.brand:hover, .brand:focus-visible { color: var(--sf-link); border-color: var(--sf-link); }
.brand small { display: block; font-size: 11px; font-weight: 400; margin-block-start: 2px; text-align: center; }
@media (min-width: 1024px) { .brands { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; } }

/* 8.5 trust_badges (row) — مشتقّة */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trust li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--sf-radius-card); background: var(--sf-surface-muted); font-size: 14px; line-height: 1.4; }
.trust li .ic { color: var(--sf-link); }
.trust li b { display: block; font-size: 14px; }
.trust li span { color: var(--sf-fg-muted); font-size: 13px; }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, 1fr); } .trust li { padding: 16px; } }

/* 8.6 faq */
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq details { border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); background: var(--sf-surface); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; font-weight: 700; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--sf-dur); margin-block-start: -4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: 4px; }
.faq .a { padding: 0 16px 16px; color: var(--sf-fg-muted); }

/* whatsapp floating (social.floatingWhatsapp) — رابط عادي */
.fab-wa { position: fixed; z-index: 30; inset-block-end: calc(16px + var(--safe-b)); inset-inline-end: 16px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sf-success); color: var(--sf-bg); box-shadow: var(--sf-shadow-sheet); }

/* ---------- 9. التذييل (footer.tone) ---------- */
.ftr { margin-block-start: var(--_sy); background: var(--sf-surface-muted); padding-block: 32px calc(24px + var(--safe-b)); font-size: 14px; }
.ftr.dark { background: var(--sf-tone-dark-bg); color: var(--sf-tone-dark-fg); }
.ftr-cols { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ftr-cols > :first-child { grid-column: 1 / -1; }
.ftr h3 { font-size: 15px; margin-block-end: 8px; }
.ftr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-fg-muted); }
.ftr a:hover { color: var(--sf-link); }
/* التذييل الداكن: كل نص ثانوي وفاصل من لوحة النغمة الداكنة لا من لوحة الصفحة — a11y M2 */
.ftr.dark a, .ftr.dark .muted, .ftr.dark .ftr-base, .ftr.dark .powered { color: var(--sf-tone-dark-muted); }
.ftr.dark a:hover { color: var(--sf-tone-dark-fg); }
.ftr.dark .ftr-base, .ftr.dark .pay span { border-color: color-mix(in srgb, var(--sf-tone-dark-fg) 22%, transparent); }
.ftr.dark .pay span { background: transparent; color: var(--sf-tone-dark-fg); }
.ftr.dark .sample { background: transparent; color: var(--sf-tone-dark-fg); border-color: var(--sf-tone-dark-muted); }
.ftr.dark .logo { color: var(--sf-tone-dark-fg); }
.ftr .pay { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; }
.ftr .pay span { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--sf-hairline); background: var(--sf-bg); font-size: 12px; font-weight: 700; }
.ftr-base { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--sf-hairline); color: var(--sf-fg-muted); font-size: 13px; }
.powered { font-size: 12px; color: var(--sf-fg-muted); }
@media (min-width: 1024px) { .ftr-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .ftr-cols > :first-child { grid-column: auto; } }

/* ---------- 10. نماذج ---------- */
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-size: 14px; font-weight: 700; }
.field .req { color: var(--sf-danger); }
.field .hint { font-size: 13px; color: var(--sf-fg-muted); }
.field .err { font-size: 13px; color: var(--sf-danger); font-weight: 700; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--sf-radius-control);
  border: 1.5px solid var(--sf-border); background: var(--sf-surface); font-size: 16px; color: var(--sf-fg);
  transition: border-color var(--sf-dur), box-shadow var(--sf-dur);
}
.textarea { min-height: 88px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--sf-fg-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sf-ring); box-shadow: 0 0 0 3px var(--sf-glow); }
.input[aria-invalid="true"] { border-color: var(--sf-danger); }
.select { appearance: none; padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  background-position: left 20px center, left 14px center; }
[dir="ltr"] .select { background-position: right 14px center, right 20px center; }
.select option:disabled { color: var(--sf-fg-muted); }
/* حقل الهاتف LTR عمدًا (+967 ثم الرقم) ⇒ الزوايا الفيزيائية و text-align:left هنا مقصودة، ليست خطأ RTL */
.phone { display: flex; direction: ltr; }
.phone .cc { display: grid; place-items: center; padding-inline: 12px; border: 1.5px solid var(--sf-border); border-inline-end: 0; border-radius: var(--sf-radius-control) 0 0 var(--sf-radius-control); background: var(--sf-surface-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.phone .input { border-radius: 0 var(--sf-radius-control) var(--sf-radius-control) 0; text-align: left; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--sf-primary); flex: none; }

/* خيار كبطاقة (شحن/دفع) */
.optcard { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border: 1.5px solid var(--sf-hairline); border-radius: var(--sf-radius-card); background: var(--sf-surface); cursor: pointer; transition: border-color var(--sf-dur), background-color var(--sf-dur); }
.optcard input[type="radio"] { width: 20px; height: 20px; accent-color: var(--sf-primary); margin: 0; }
.optcard:has(input:checked) { border-color: var(--sf-link); background: var(--sf-primary-subtle); }
.optcard:has(input:checked) .d { color: var(--sf-fg); }
.optcard:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.optcard .t { font-weight: 700; }
.optcard .d { display: block; font-size: 13px; color: var(--sf-fg-muted); font-weight: 400; }
.optcard .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.optgroup { display: grid; gap: 8px; }
/* تفاصيل التحويل ظاهرة افتراضيًا وتُخفى فقط حيث يعمل :has() — المتصفح القديم يرى الحقول بدل أن تختفي */
.optbody { display: grid; gap: 12px; margin-block-start: -4px; padding: 16px; border: 1.5px solid var(--sf-link); border-block-start: 0; border-radius: 0 0 var(--sf-radius-card) var(--sf-radius-card); background: var(--sf-surface); }
.payopt:has(> .optcard input:checked) > .optcard { border-end-start-radius: 0; border-end-end-radius: 0; }
.payopt:has(> .optcard input:not(:checked)) > .optbody { display: none; }

/* الكمية */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-control); height: 44px; }
.qty button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--sf-fg); }
.qty button:disabled { color: var(--sf-fg-muted); opacity: .5; }
.qty input { width: 44px; height: 100%; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* بلا JS: زرّا − / + لا يعملان ⇒ يُخفيان ويبقى الحقل قابلًا للكتابة (no-js تُزال بسطر في <head>) */
html.no-js .qty [data-step] { display: none; }
html.no-js .qty input { width: 64px; }

/* تنبيهات */
.alert { display: flex; gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--sf-radius-card); font-size: 14px; }
.alert .ic { margin-block-start: 1px; }
.alert.ok { background: var(--sf-success-subtle); color: var(--sf-success); }
.alert.warn { background: var(--sf-warning-subtle); color: var(--sf-warning); }
.alert.err { background: var(--sf-danger-subtle); color: var(--sf-danger); }
.alert.info { background: var(--sf-primary-subtle); color: var(--sf-primary-subtle-fg); }
.alert b { font-weight: 700; }
.alert p { color: var(--sf-fg); }

/* ---------- 11. التصنيف (PLP) ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-block: 12px 4px; font-size: 13px; color: var(--sf-fg-muted); }
.crumbs a { min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--sf-link); }
.plp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plp-head h1 { font-size: 24px; }
.plp-head .n { font-size: 14px; color: var(--sf-fg-muted); font-weight: 700; }
.subcats { margin-block: 12px 0; display: flex; gap: 8px; }
/* الثابت = صف «الفلاتر + الترتيب» وحده (44 + 2×6 = 56px)؛ مع الرأس 57px ⇒ 113px بدل ≈ 165px.
   الفاصل ظلّ بسماكة 1px لا يضيف ارتفاعًا. */
.toolbar { position: sticky; inset-block-start: 56px; z-index: 20; background: var(--sf-bg); padding-block: 6px; margin-block-start: 6px; box-shadow: 0 1px 0 var(--sf-hairline); }
.toolbar-row { display: flex; align-items: center; gap: 8px; }
.toolbar .btn { min-height: 44px; }
.toolbar .select { min-height: 44px; width: auto; flex: 1; max-width: 240px; font-size: 15px; }
/* صف الفلاتر (يمرّ مع المحتوى): المطبّقة أولًا بـ ×، ثم اقتراحات سريعة بـ + — كلها روابط GET */
.qf { display: flex; gap: 6px; margin-block-start: 10px; }
.qf .chip { min-height: 40px; font-size: 13px; }
.qf .chip.on .x { opacity: .85; }
.qf .chip:not(.on) .ic { color: var(--sf-fg-muted); }
.qf .clear { border-color: transparent; background: transparent; color: var(--sf-link); text-decoration: underline; text-underline-offset: 3px; }
.qf .sep { width: 1px; align-self: stretch; margin-block: 8px; background: var(--sf-divider); scroll-snap-align: none; }
.plp { display: grid; gap: 16px; padding-block: 16px 0; }
.filters { display: none; }
@media (min-width: 1024px) {
  .toolbar { inset-block-start: 121px; }
  .toolbar .filters-btn { display: none; }
  .plp { grid-template-columns: 256px 1fr; gap: 32px; }
  .filters { display: block; position: sticky; inset-block-start: 190px; align-self: start; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); overflow-y: auto; }
}
.fgroup { padding-block: 16px; border-block-end: 1px solid var(--sf-hairline); }
.fgroup:first-child { padding-block-start: 0; }
.fgroup h3 { font-size: 15px; margin-block-end: 10px; }
.ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.ranges .chip { min-height: 36px; font-size: 13px; }
.minmax { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.minmax .input { min-height: 44px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding-block: 24px 0; }

/* Sheet الفلاتر (جوال) — بلا JS عبر :target */
.sheet { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.sheet:target, .sheet.open { visibility: visible; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); background: color-mix(in srgb, var(--sf-fg) 45%, transparent); opacity: 0; transition: opacity var(--sf-dur); }
.sheet:target .scrim, .sheet.open .scrim { opacity: 1; }
.sheet .panel {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-height: 85vh; max-height: 85dvh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--sf-bg); border-radius: var(--sf-radius-sheet) var(--sf-radius-sheet) 0 0; box-shadow: var(--sf-shadow-sheet);
  transform: translateY(100%); transition: transform 240ms var(--sf-ease);
}
.sheet:target .panel, .sheet.open .panel { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--sf-border); margin: 8px auto 0; }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 16px; }
.sheet header h2 { font-size: 18px; }
.sheet .body { overflow-y: auto; padding: 0 16px 16px; }
.sheet footer { display: flex; gap: 8px; align-items: center; padding: 12px 16px calc(12px + var(--safe-b)); border-block-start: 1px solid var(--sf-hairline); }
.sheet footer .btn-primary { flex: 1; }

/* ---------- 12. صفحة المنتج (PDP) ---------- */
/* ورقة «أُضيف إلى السلة» (JS فقط؛ بلا JS يوجَّه النموذج إلى /cart?added=) */
.sheet.added .panel { grid-template-rows: auto auto auto; }
.added-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 4px 16px 16px; }
.added-item .thumb { width: 64px; aspect-ratio: 1; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); display: grid; place-items: center; }
.added-item .thumb svg { width: 70%; height: 70%; stroke-width: 3; }
.added-item b { display: block; line-height: 1.4; }
.added-item span { font-size: 14px; color: var(--sf-fg-muted); }
.sheet.added header h2 { display: flex; align-items: center; gap: 8px; color: var(--sf-success); }
.sheet.added footer { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .sheet.added .panel { inset-inline: auto; inset-inline-end: 24px; inset-block-end: 24px; width: 400px; border-radius: var(--sf-radius-sheet); } }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 8px 0; }
/* أول شاشة على الجوال (قيس على 360×640): المسار يختفي (يبقى BreadcrumbList في JSON-LD ورابط العلامة في سطر الرمز)،
   والمعرض بسقف 44svh ⇒ العنوان كاملًا فوق الشريط الثابت الذي يحمل السعر والإضافة. 52svh لم تكفِ بالقياس. */
@media (max-width: 1023px) {
  .crumbs.pdp-crumbs { display: none; }
  /* ارتفاع صريح بدل max-height (مع aspect-ratio كان يضيّق العرض أيضًا)؛ الصورة في الإنتاج object-fit: contain */
  .gal-track figure { aspect-ratio: auto; width: 100%; height: min(100vw, 44vh); height: min(100vw, 44svh); }
  .gal-track figure img { width: 100%; height: 100%; object-fit: contain; }
}
.pdp > * { min-width: 0; }
.gallery { position: relative; margin-inline: -16px; }
.gal-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track figure { margin: 0; scroll-snap-align: center; aspect-ratio: 1; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(55% 50% at 50% 55%, var(--sf-glow), transparent 70%),
    radial-gradient(var(--sf-dots) 1px, transparent 1.2px) 0 0 / 14px 14px,
    var(--sf-surface-muted); background-color: var(--sf-surface-muted); }
.gal-track figure:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 375px; }
.gal-track figure svg.dv { width: 62%; height: 62%; stroke-width: 1.6; }
.gal-track figcaption { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--sf-bg); }
.gal-dots { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: flex; gap: 2px; }
.gal-dots a { width: 28px; height: 28px; display: grid; place-items: center; }
.gal-dots a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-border); }
.gal-dots a[aria-current="true"]::before { background: var(--sf-fg); }
.gal-count { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: var(--sf-bg); font-variant-numeric: tabular-nums; }
.gal-badges { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; display: flex; gap: 6px; z-index: 2; }
.thumbs { display: none; }
.pdp h1 { font-size: 22px; line-height: 1.4; }
.pdp .sku { font-size: 13px; color: var(--sf-fg-muted); }
.pdp .sku .brand-link { font-weight: 700; color: var(--sf-link); text-decoration: underline; text-underline-offset: 3px; }
.pdp .price .now { font-size: 28px; }
.pdp .price .was { font-size: 16px; }
.pdp .sar { font-size: 13px; color: var(--sf-fg-muted); margin-block-start: 2px; }
.auto-disc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sf-accent-text); }
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); overflow: hidden; background: var(--sf-hairline); }
.highlights div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; background: var(--sf-surface); text-align: center; }
.highlights b { font: 700 17px/1.2 var(--sf-font-heading); font-variant-numeric: tabular-nums; }
.highlights span { font-size: 12px; color: var(--sf-fg-muted); line-height: 1.3; }
.opt-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.opt-group legend { padding: 0; margin-block-end: 8px; font-size: 15px; font-weight: 700; }
.opt-group legend output { font-weight: 400; color: var(--sf-fg-muted); margin-inline-start: 4px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 56px; justify-content: center; padding: 0 14px; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-control); font-weight: 700; font-size: 15px; transition: border-color var(--sf-dur), background-color var(--sf-dur); }
.opt span i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--sf-border); flex: none; }
.opt input:checked + span { border-color: var(--sf-fg); background: var(--sf-fg); color: var(--sf-bg); }
.opt input:focus-visible + span { outline: 3px solid var(--sf-ring); outline-offset: 2px; }
.opt.na span { color: var(--sf-fg-muted); text-decoration: line-through; border-style: dashed; }
.opt.na input:checked + span { background: var(--sf-surface-muted); color: var(--sf-fg-muted); border-color: var(--sf-fg-muted); border-style: solid; }
.opt small { font-weight: 400; font-size: 12px; opacity: .85; }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.buy-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; grid-column: 1 / -1; }
@media (min-width: 1280px) { .buy-btns { grid-column: auto; } }
.info-list { display: grid; border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); }
.info-list li { display: flex; gap: 12px; align-items: start; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.info-list li + li { border-block-start: 1px solid var(--sf-hairline); }
.info-list .ic { color: var(--sf-link); margin-block-start: 1px; }
.info-list b { display: block; font-size: 14px; }
.info-list span { color: var(--sf-fg-muted); }
.wa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--sf-link); }
.desc h2, .specs-t h2 { font-size: 18px; margin-block-end: 10px; }
.desc p { color: var(--sf-fg); }
.desc { display: grid; }
.desc h2 { order: 0; } .desc .clamp { order: 1; } .desc details { order: 2; }
.desc .clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.desc details[open] ~ .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.desc details[open] .more, .desc details:not([open]) .less { display: none; }
.desc summary { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; color: var(--sf-link); cursor: pointer; list-style: none; }
.desc summary::-webkit-details-marker { display: none; }
.spec-list { display: grid; border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); overflow: hidden; }
.spec-list li { display: grid; grid-template-columns: 38% 1fr; font-size: 14px; }
.spec-list li:nth-child(odd) { background: var(--sf-surface-muted); }
.spec-list strong, .spec-list span { padding: 10px 14px; }
.spec-list strong { color: var(--sf-fg-muted); font-weight: 700; }
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; margin-block-start: 8px; }
.vtable th, .vtable td { text-align: start; padding: 8px; border-block-end: 1px solid var(--sf-hairline); }
.vtable th { color: var(--sf-fg-muted); font-weight: 700; }

/* الشريط الثابت للشراء (templates.product.stickyBuyBar — جوال) */
.buybar {
  position: fixed; z-index: 35; inset-inline: 0; inset-block-end: 0;
  /* السعر (لا يلتف) · الأساسي يأخذ الباقي · الثانوي بعرض نصّه — يتّسع في 360px حتى مع Readex */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 10px 16px calc(10px + var(--safe-b)); background: var(--sf-bg);
  border-block-start: 1px solid var(--sf-hairline); box-shadow: var(--sf-shadow-sheet);
}
.buybar .p { display: grid; line-height: 1.2; white-space: nowrap; }
.buybar .p b { font: 700 15px/1.25 var(--sf-font-heading); font-variant-numeric: tabular-nums; }
.buybar .p small { font-size: 12px; color: var(--sf-fg-muted); }
.buybar .btn { min-height: 48px; padding-inline: 12px; font-size: 15px; min-width: 0; }
.buybar .btn-primary { overflow: hidden; text-overflow: ellipsis; }
.buybar .btn-wa { grid-column: 2 / -1; }
.btn-wa svg { flex: none; }
body.has-bar { padding-block-end: calc(76px + var(--safe-b)); }
/* شريط الدفع أطول (زر 52 + سطر الموافقة ≈ 19 + حشوات ≈ 97px) ⇒ حشوة أكبر كي لا يُغطّى آخر حقل */
body.has-bar.bar-tall { padding-block-end: calc(112px + var(--safe-b)); }
@media (min-width: 1024px) {
  .pdp { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 40px; align-items: start; padding-block-start: 16px; }
  .gallery { margin: 0; display: grid; grid-template-columns: 1fr 76px; gap: 12px; position: sticky; inset-block-start: 136px; }
  .gal-track { border-radius: var(--sf-radius-card); }
  .thumbs { display: grid; gap: 8px; align-content: start; }
  .thumbs a { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); border: 1.5px solid transparent; }
  .thumbs a[aria-current="true"] { border-color: var(--sf-fg); }
  .thumbs svg { width: 70%; height: 70%; stroke-width: 3; }
  .gal-dots, .gal-count { display: none; }
  .pdp-info { position: sticky; inset-block-start: 136px; }
  .pdp h1 { font-size: 28px; }
  .buybar { display: none; }
  body.has-bar { padding-block-end: 0; }
}

/* ---------- 13. السلة والدفع ---------- */
.page-title { display: flex; align-items: baseline; gap: 8px; padding-block: 16px 12px; }
.page-title h1 { font-size: 24px; }
.page-title .n { color: var(--sf-fg-muted); font-weight: 700; }
.two-col { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .two-col.cart { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 32px; align-items: start; }
  .two-col.co { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 32px; align-items: start; }
  .sticky-card { position: sticky; inset-block-start: 96px; }
}
.line { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding-block: 16px; border-block-end: 1px solid var(--sf-hairline); }
.line:first-child { padding-block-start: 0; }
.line .thumb { width: 88px; aspect-ratio: 1; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); display: grid; place-items: center; }
.line .thumb svg { width: 70%; height: 70%; stroke-width: 3; }
.line h3 { font: 700 15px/1.45 var(--sf-font-body); }
.line .var { font-size: 13px; color: var(--sf-fg-muted); }
.line .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 8px; flex-wrap: wrap; }
.line.is-out .del { color: var(--sf-fg); }
.line .del { min-height: 44px; padding-inline: 8px; font-size: 14px; font-weight: 700; color: var(--sf-fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.line .sub { font-size: 14px; color: var(--sf-fg-muted); }
.line .sub b { color: var(--sf-fg); font-variant-numeric: tabular-nums; }
.line.is-out { background: var(--sf-danger-subtle); margin-inline: -16px; padding-inline: 16px; }
.card { border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); background: var(--sf-surface); padding: 16px; }
.sum { display: grid; gap: 10px; font-size: 15px; }
.sum div { display: flex; justify-content: space-between; gap: 8px; }
.sum dt { color: var(--sf-fg-muted); }
.sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.sum .disc dd { color: var(--sf-success); }
.sum .total { padding-block-start: 12px; border-block-start: 1px dashed var(--sf-border); font-size: 17px; align-items: baseline; }
.sum .total dt { color: var(--sf-fg); font-weight: 700; }
.sum .total dd { font: 700 22px/1.2 var(--sf-font-heading); }
.sum .total small { display: block; font: 400 12px/1.4 var(--sf-font-body); color: var(--sf-fg-muted); }
.freeship { display: grid; gap: 8px; font-size: 14px; }
.freeship .bar { height: 6px; border-radius: 3px; background: var(--sf-surface-muted); overflow: hidden; }
.freeship .bar i { display: block; height: 100%; width: var(--p, 50%); background: linear-gradient(to left, var(--sf-primary), var(--sf-accent)); border-radius: 3px; }
[dir="ltr"] .freeship .bar i { background: linear-gradient(to right, var(--sf-primary), var(--sf-accent)); }
.coupon summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--sf-link); cursor: pointer; list-style: none; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon form { display: flex; gap: 8px; padding-block-end: 8px; }
.actionbar {
  position: fixed; z-index: 35; inset-inline: 0; inset-block-end: 0; padding: 10px 16px calc(10px + var(--safe-b));
  background: var(--sf-bg); border-block-start: 1px solid var(--sf-hairline); box-shadow: var(--sf-shadow-sheet);
}
.actionbar .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--sf-fg-muted); margin-block-end: 6px; }
.actionbar .meta b { color: var(--sf-fg); font-variant-numeric: tabular-nums; }
.actionbar .fine { text-align: center; font-size: 12px; color: var(--sf-fg-muted); margin-block-start: 6px; }
.actionbar .fine a { color: var(--sf-link); text-decoration: underline; }
.desk-only { display: none; }
@media (min-width: 1024px) { .actionbar { display: none; } .desk-only { display: block; } .mob-only { display: none; } }

/* الدفع */
.co-hdr .hdr-row { justify-content: space-between; }
.secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sf-success); }
.step { padding-block: 20px; border-block-end: 1px solid var(--sf-hairline); display: grid; gap: 14px; }
.step h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.step h2 .no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-fg); color: var(--sf-bg); font-size: 14px; font-variant-numeric: tabular-nums; }
.step.done h2 .no { background: var(--sf-success); color: var(--sf-bg); }
.fgrid { display: grid; gap: 14px; }
@media (min-width: 768px) { .fgrid.two { grid-template-columns: 1fr 1fr; } .fgrid .full { grid-column: 1 / -1; } }
.xfer { gap: 10px; }
p > svg.ic { display: inline-block; vertical-align: -4px; }
.xfer .acct { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); }
.xfer .acct b { font: 700 20px/1.2 var(--sf-font-heading); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.xfer .amt { font-size: 15px; }
.xfer .amt b { font-variant-numeric: tabular-nums; }
.xfer .amt-wait { display: flex; gap: 8px; align-items: start; font-size: 14px; color: var(--sf-warning); font-weight: 700; }
.xfer .amt-wait .ic { margin-block-start: 2px; }
.summary-m summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 8px 16px; font-weight: 700; cursor: pointer; list-style: none; background: var(--sf-surface-muted); margin-inline: -16px; }
.summary-m summary::-webkit-details-marker { display: none; }
.summary-m summary .m { font: 700 17px var(--sf-font-heading); }
.summary-m .items { padding-block: 12px; }
.mini { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding-block: 8px; font-size: 14px; }
.mini .thumb { width: 56px; aspect-ratio: 1; border-radius: var(--sf-radius-control); background: var(--sf-surface-muted); display: grid; place-items: center; position: relative; }
.mini .thumb svg { width: 70%; height: 70%; stroke-width: 3.4; }
.mini .thumb .q { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--sf-fg); color: var(--sf-bg); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.mini b { display: block; font-weight: 700; line-height: 1.4; }
.mini span { color: var(--sf-fg-muted); font-size: 13px; }
@media (min-width: 1024px) { .summary-m { display: none; } }

/* ---------- 14. التتبّع ---------- */
.order-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-block: 16px 8px; }
.order-hd h1 { font-size: 24px; }
.order-hd h1 span, .order-hd h1 bdi { font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 9999px; font-weight: 700; font-size: 14px; background: var(--sf-primary-subtle); color: var(--sf-primary-subtle-fg); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); }
.timeline { position: relative; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding-block-end: 20px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block: 28px 0; width: 2px; background: var(--sf-divider); }
.timeline li.done::before { background: var(--sf-success); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--sf-divider); background: var(--sf-bg); color: var(--sf-fg-muted); }
.timeline li.done .dot { background: var(--sf-success); border-color: var(--sf-success); color: var(--sf-bg); }
.timeline li.now .dot { border-color: var(--sf-link); color: var(--sf-link); box-shadow: 0 0 0 6px var(--sf-glow); }
.timeline li.now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
html[data-motion="subtle"] .timeline li.now .dot { animation: sf-pulse 2.4s var(--sf-ease) infinite; }
@keyframes sf-pulse { 50% { box-shadow: 0 0 0 10px transparent; } }
.timeline b { display: block; font-weight: 700; margin-block-start: 4px; }
.timeline time { font-size: 13px; color: var(--sf-fg-muted); }
.timeline li:not(.done):not(.now) b { color: var(--sf-fg-muted); font-weight: 400; }
.kv { display: grid; gap: 8px; font-size: 14px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--sf-fg-muted); }
.kv dd { margin: 0; font-weight: 700; text-align: end; }
@media (min-width: 1024px) { .track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

/* رقم العملية يظهر فقط مع «حوّلت الآن» (بلا JS: :has) */
.refwrap { display: grid; }
.xfer:has(input[value="later"]:checked) .refwrap { display: none; }
.xfer .choice { display: grid; gap: 4px; }

/* ---------- 15. هياكل التحميل ---------- */
.skel { background: linear-gradient(90deg, var(--sf-surface-muted) 0 40%, color-mix(in srgb, var(--sf-surface-muted) 50%, var(--sf-bg)) 50%, var(--sf-surface-muted) 60% 100%) 0 0 / 300% 100%; border-radius: 6px; }
html[data-motion="subtle"] .skel { animation: sf-shimmer 1.4s linear infinite; }
@keyframes sf-shimmer { to { background-position: -150% 0; } }
.skel-card { display: grid; gap: 8px; }
.skel-card .a { aspect-ratio: 1; border-radius: var(--sf-radius-card); }
.skel-card .b { height: 14px; }
.skel-card .c { height: 14px; width: 60%; }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 32px 16px; }
.empty .ic-wrap { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-surface-muted); color: var(--sf-fg-muted); }
.empty h3 { font-size: 18px; }
.empty p { color: var(--sf-fg-muted); max-width: 36ch; }

/* ---------- 16. حركة الدخول (subtle فقط) ---------- */
@keyframes sf-rise { from { opacity: 0; transform: translateY(8px); } }
html[data-motion="subtle"] .rise { animation: sf-rise 180ms var(--sf-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}