/* store.css — «الفاخر الصناعي» (2026-09-25): معرض أجهزة ليلي، كل جهاز على منصّة مضاءة.
   كل الألوان توكِنات (tokens.css + /api/brand.css) فتبقى الحزم والثيمات والقوالب من اللوحة نافذة.
   مشتقّات الهوية المحلية أدناه (ذهب معدني، بئر إضاءة الصور، شبكة المسرح) تُبنى من التوكِنات لا من قيم حرفية
   إلا الذهب المعدني نفسه: تدرّج مادي ثابت يقرأ كمعدن في الوضعين. */

:root {
  --font-display: 'Reem Kufi', var(--font-head);
  --gold: var(--volt);
  --gold-metal: linear-gradient(120deg, #8A6A2B 0%, #E9CF86 38%, #B08A3E 58%, #F0DC9E 78%, #A7823A 100%);
  /* ذهب كنص فوق الأرضية: يُمزج بلون النص ليبقى مقروءاً نهاراً فوق العاجي */
  --gold-ink: color-mix(in srgb, var(--volt) 55%, var(--text));
  --hair: var(--bw-1) solid var(--line);
  --hair-gold: var(--bw-1) solid color-mix(in srgb, var(--volt) 55%, transparent);
  /* بئر الضوء لصور المنتجات: الصور SVG/PNG بخلفية بيضاء ⇒ multiply يذيب الأبيض في الإضاءة الدافئة */
  --well: radial-gradient(120% 95% at 50% 18%, #FFFFFF 0%, #F1EDE5 52%, #DDD6C8 100%);
  --glow: color-mix(in srgb, var(--volt) 22%, transparent);
  --sec: clamp(56px, 7vw, 104px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --head-h: calc(var(--hdr-h) + 46px);          /* ارتفاع الرأس اللاصق (صف رئيسي + صف الأقسام) */
  --stick-top: calc(var(--head-h) + 16px);
}
/* الرأس الذكي (ديسكتوب): يختفي مع التمرير للأسفل ويعود للأعلى — والعناصر اللاصقة تتبعه */
html.hdr-hidden { --head-h: 0px; }
.site-head { transition: transform .35s var(--ease); }
html.hdr-hidden .site-head { transform: translateY(-100%); }

body:not(.admin) { background: var(--paper); }
body:not(.admin) :is(h1, h2) { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
::selection { background: var(--volt); color: var(--on-volt); }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; box-shadow: none; }

/* == أزرار: كبسولات مشغولة — الذهبي معدن حقيقي، والشبح خط شعرة == */
.btn { border-radius: var(--radius-pill); border-width: var(--bw-1); letter-spacing: .01em;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), background-position .6s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-volt { background: var(--gold-metal); background-size: 220% 100%; background-position: 0% 50%; color: #111; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 28px -12px var(--glow); }
.btn-volt:hover { filter: none; background-position: 100% 50%; }
.btn-ghost { border-color: var(--edge); }
.btn-ghost:hover { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); }

/* == مسافات الأقسام ورؤوسها == */
.sec { padding-block: var(--sec) 0; }
.sec-h { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; margin-bottom: clamp(20px, 3vw, 36px); }
.sec-h h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; grid-column: 1; }
.sec-h p { grid-column: 1; margin: 0; color: var(--text-2); font-size: 15px; max-width: 56ch; }
.sec-h .more { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 14px; font-weight: 600; color: var(--gold-ink);
  border-bottom: var(--hair-gold); padding-bottom: 2px; white-space: nowrap; }
.sec-h .more:hover { color: var(--text); border-bottom-color: var(--text); }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin-block: calc(32px * var(--dens)) calc(16px * var(--dens)); }
.section-h h2 { font-size: clamp(24px, 3vw, 34px); }
.section-h .more { font-size: 14px; font-weight: 600; color: var(--gold-ink); }

/* == ظهور مع التمرير: CSS خالص بلا JS — مرئي افتراضياً حيث لا دعم، ومطفأ مع تقليل الحركة == */
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

/* == شريط الإعلان العلوي == */
.annbar .container { display: flex; align-items: center; gap: 16px; min-height: 44px; padding-block: 7px; }
.annbar.bg-volt { background: var(--gold-metal); color: #111; }
.annbar.bg-ink { background: var(--chrome); color: var(--on-chrome); border-bottom: var(--hair-gold); }
.annbar.bg-paper { background: var(--surface); color: var(--text); border-bottom: var(--hair); }
.annbar.bg-deal { background: var(--deal); color: var(--on-deal); }
.ann-txt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.ann-badge { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  border: var(--bw-1) solid currentColor; border-radius: var(--radius-pill); padding: 1px 10px; white-space: nowrap; }
.ann-txt b { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.ann-sub { font-size: 13px; opacity: .82; }
.ann-cta { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ann-clock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-head); font-weight: 700;
  font-size: 14px; border: var(--bw-1) solid currentColor; border-radius: var(--radius-pill); padding: 1px 12px; font-variant-numeric: tabular-nums; }
.ann-x { background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; padding: 6px; opacity: .65; }
.ann-x:hover { opacity: 1; }

/* == الهيدر: شريط خدمات نحيف + رأس لاصق داكن ثابت في الوضعين == */
.topbar { background: var(--chrome); color: var(--on-chrome-3); font-size: 12.5px; border-bottom: var(--bw-1) solid var(--line); border-bottom: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 8%, transparent); }
.topbar .container { display: flex; align-items: center; gap: 22px; min-height: 34px; }
.tb-fact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tb-fact::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.tb-tel { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--on-chrome-2); }
.tb-tel:hover { color: var(--volt); }
.topbar .lang-btn { margin-inline-start: 0; border-color: var(--line); border-color: color-mix(in srgb, var(--on-chrome) 30%, transparent); color: var(--on-chrome-2); border-radius: var(--radius-pill); padding: 0 10px; }
.topbar .tb-tel[hidden] + .lang-btn { margin-inline-start: auto; }

.site-head { position: sticky; top: 0; z-index: 60; background: var(--chrome); background: color-mix(in srgb, var(--chrome) 96%, transparent); color: var(--on-chrome);
  border-bottom: var(--hair-gold); }
.header-main .container { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); height: var(--hdr-h); }
.logo { flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
/* شعار مرفوع من اللوحة فوق السطح الداكن: لوحة فاتحة صغيرة (الشعار الافتراضي مصمم للسطح الداكن) */
.site-head .logo img[src*="brand-logo"], .site-foot img[src*="brand-logo"] { background: #FFFFFF; padding: 4px 8px; border-radius: var(--radius-sm); }

.searchbox { flex: 1; max-width: 640px; position: relative; }
.searchbox input {
  width: 100%; height: 50px; border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 16%, transparent); border-radius: var(--radius-pill);
  padding-inline: 22px 60px; background: transparent; background: color-mix(in srgb, var(--on-chrome) 6%, transparent); color: var(--on-chrome); font-size: 15px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.searchbox input::placeholder { color: var(--on-chrome-3); }
.searchbox input:focus { outline: none; border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--on-chrome) 9%, transparent); }
.searchbox input::-webkit-search-cancel-button { filter: invert(.7); }
.s-btn { position: absolute; inset-inline-end: 5px; top: 5px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--gold-metal); background-size: 200% 100%; color: #111; display: inline-flex; align-items: center; justify-content: center; }
.s-btn:hover { background-position: 100% 50%; }
.search-pop { position: absolute; top: calc(100% + 10px); inset-inline: 0; background: var(--surface); color: var(--text); border: var(--hair);
  box-shadow: var(--shadow-3); z-index: 70; border-radius: var(--radius-lg); overflow: hidden; }
.search-pop a { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: var(--hair); font-size: 14px; }
.search-pop a:last-child { border-bottom: 0; }
.search-pop a:hover { background: var(--stripe); }
.search-pop a span { flex: 1; min-width: 0; }
.search-pop img { width: 48px; height: 48px; object-fit: contain; background: #FFFFFF; border-radius: 10px; }
.search-pop b { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.icon-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--on-chrome-2); position: relative;
  padding: 6px 10px; border-radius: var(--radius-sm); background: none; border: 0; transition: color .2s var(--ease), background-color .2s var(--ease); }
.icon-btn:hover { color: var(--volt); background: transparent; background: color-mix(in srgb, var(--on-chrome) 6%, transparent); }
.icon-btn .cnt { position: absolute; top: 0; inset-inline-start: 2px; background: var(--volt); color: var(--on-volt);
  font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; padding-inline: 4px; box-shadow: 0 0 0 2px var(--chrome); }
.cart-btn { color: var(--on-chrome); }
.mode-btn .i-sun { display: none; }
.mode-btn.is-dark .i-sun { display: block; }
.mode-btn.is-dark .i-moon { display: none; }

.nav-cats { border-top: var(--bw-1) solid var(--line); border-top: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 7%, transparent); }
.nav-cats .container { display: flex; align-items: center; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.nav-cats .container::-webkit-scrollbar { display: none; }
.nav-links { display: flex; gap: 30px; }
.nav-cats a { font-size: 14.5px; font-weight: 500; padding: 13px 0 12px; color: var(--on-chrome-2); white-space: nowrap; position: relative; transition: color .2s var(--ease); }
.nav-cats a::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--gold-metal);
  transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-cats a:hover, .nav-cats a.active { color: var(--on-chrome); }
.nav-cats a:hover::after, .nav-cats a.active::after { transform: scaleX(1); }
.nav-home { color: var(--volt) !important; }

/* == المسرح (هيرو) == */
.stage { position: relative; background: var(--chrome); color: var(--on-chrome); overflow: hidden; isolation: isolate; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 22% 45%, transparent 0%, transparent 70%),
    linear-gradient(transparent 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, transparent 1px, transparent 1px) 0 0 / 56px 56px;
  background:
    radial-gradient(55% 70% at 22% 45%, color-mix(in srgb, var(--volt) 16%, transparent) 0%, transparent 70%),
    linear-gradient(color-mix(in srgb, var(--on-chrome) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, color-mix(in srgb, var(--on-chrome) 5%, transparent) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.stage-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding-block: clamp(36px, 6vw, 84px); }
.stage-in:not(.full) { grid-template-columns: minmax(0, 1fr); }
.stage-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 56px); min-height: min(62vh, 560px); }
.stage-copy-in { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.stage-title { font-size: clamp(36px, 5.2vw, 72px); line-height: 1.15; text-wrap: balance; color: var(--on-chrome); }
.stage-title a:hover { color: var(--volt); }
.stage-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--on-chrome-2); max-width: 46ch; margin: 0; line-height: 1.8; }
.stage-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.stage-price .tag { font-size: 12px; font-weight: 700; color: var(--volt); border: var(--hair-gold); border-radius: var(--radius-pill); padding: 3px 12px; }
.stage-price b { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1; white-space: nowrap;
  color: var(--volt); }
.stage-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.stage-cta .btn-ghost { color: var(--on-chrome); border-color: var(--line); border-color: color-mix(in srgb, var(--on-chrome) 30%, transparent); }
.stage-cta .btn { padding: 15px 30px; }

.stage-visual { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.stage-visual .orbit { position: absolute; inset: 2%; border-radius: 50%; border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, var(--volt) 45%, transparent);
  box-shadow: 0 0 60px -10px var(--glow), inset 0 0 40px -20px var(--glow); }
.stage-visual .orbit::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: var(--bw-1) dashed var(--line); border: var(--bw-1) dashed color-mix(in srgb, var(--on-chrome) 14%, transparent); }
.stage-visual .orbit::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--volt); top: 12%; inset-inline-end: 14%; box-shadow: 0 0 16px 2px var(--volt); }
.stage-visual .well { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--well); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 10px transparent;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 10px color-mix(in srgb, var(--on-chrome) 4%, transparent); display: grid; place-items: center; }
.stage-visual img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.stage-visual:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .stage-visual .orbit { animation: orbit 60s linear infinite; }
  @keyframes orbit { to { transform: rotate(360deg); } }
}

.stage-side { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.side-tile { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 14px; padding: 18px 20px; min-height: 132px;
  border-radius: var(--radius-lg); border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 12%, transparent);
  background: transparent;
  background: color-mix(in srgb, var(--on-chrome) 4%, transparent); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.side-tile:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); transform: translateY(-2px); }
.side-tile.bg-volt { background: var(--gold-metal); color: #111; border-color: transparent; }
.side-tile .st-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-tile b { font-family: var(--font-head); font-size: 18px; line-height: 1.35; }
.side-tile .st-txt span { font-size: 13px; opacity: .8; }
.side-tile .st-img { aspect-ratio: 1; border-radius: 14px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.side-tile img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }

.strip { background: var(--gold-metal); color: #111; text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 700; }

/* == عرض الفلاش: لوحة عدّاد كأنها شاشة جهاز == */
.flash-sec { padding-block: var(--sec) 0; }
.flash { display: grid; grid-template-columns: minmax(0, 1.2fr) auto 260px; gap: 32px; align-items: center; position: relative; overflow: hidden;
  border: var(--hair-gold); border-radius: var(--radius-lg); background: var(--surface); padding: 28px 32px; }
.flash .ft { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fbadge { background: var(--deal); color: var(--on-deal); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  padding: 3px 12px; border-radius: var(--radius-pill); }
.flash .fbadge { align-self: start; }
.flash h2 { font-size: clamp(24px, 2.6vw, 34px); }
.flash .fsub { font-size: 14px; color: var(--text-2); margin: 0; }
.flash .fprice { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.flash .now { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--gold-ink); }
.flash .was { text-decoration: line-through; color: var(--text-3); font-size: 17px; }
.flash .save, .pcard .save, .buybox .save { background: none; color: var(--deal); border: var(--bw-1) solid var(--deal); border: var(--bw-1) solid color-mix(in srgb, var(--deal) 60%, transparent);
  font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); }
.fimg-w { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--well); overflow: hidden; }
.flash .fimg { width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; }
.flash .fcol { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.flash .flb { font-size: 12px; font-weight: 600; color: var(--text-2); }
.cd { display: flex; gap: 8px; }
.cd .cdb { display: flex; flex-direction: column; align-items: center; background: var(--chrome); color: var(--volt);
  border: var(--bw-1) solid var(--line);
  border: var(--bw-1) solid color-mix(in srgb, var(--volt) 30%, transparent); border-radius: 12px; padding: 8px 4px; min-width: 62px; }
.cd .cdb b { font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd .cdb i { font-style: normal; font-size: 11px; color: var(--on-chrome-3); }
.cd-over { font-family: var(--font-head); font-weight: 700; color: var(--deal); }

/* == صفحة هبوط العرض == */
.offer-page { padding-block: 32px 8px; }
.offer-hero { display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: start; }
.offer-hero .oimg { background: var(--well); border-radius: var(--radius-lg); padding: 32px; }
.offer-hero .oimg img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.offer-box { background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); padding: 28px; }
.offer-box h1 { font-size: clamp(26px, 3vw, 36px); margin-block: 10px 6px; }
.offer-box .osub { font-size: 15px; color: var(--text-2); }
.offer-box .oprice { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block: 16px; }
.offer-box .oprice .now { font-family: var(--font-head); font-weight: 700; font-size: 40px; color: var(--gold-ink); }
.offer-box .oprice .was { text-decoration: line-through; color: var(--text-3); font-size: 19px; }
.offer-cd { border-block: var(--hair); padding-block: 16px; margin-block: 16px; display: flex; flex-direction: column; gap: 8px; }
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.offer-actions .btn { flex: 1 1 160px; }
.offer-body { padding-block: 32px 40px; max-width: 70ch; }
.offer-body p { font-size: 16px; line-height: 1.9; }
.offer-note { background: var(--stripe); border: var(--hair); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; }

/* == الأقسام: بطاقات عريضة ببئر ضوء وسعر بداية == */
.cats-rail .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cat-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: var(--hair); transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.cat-tile:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cat-tile .well { display: grid; place-items: center; aspect-ratio: 1.1; border-radius: 14px; background: var(--well); overflow: hidden; }
.cat-tile img { width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.cat-tile:hover img { transform: scale(1.06); }
.cat-meta { display: flex; flex-direction: column; gap: 2px; padding-inline-end: 28px; }
.cat-meta .nm { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.cat-meta .ct { font-size: 13px; color: var(--text-3); }
.cat-meta .from { font-size: 13px; font-weight: 600; color: var(--gold-ink); margin-top: 4px; }
.cat-tile .go { position: absolute; inset-inline-end: 16px; bottom: 20px; color: var(--text-3); transition: color .3s var(--ease), transform .3s var(--ease); }
.cat-tile:hover .go { color: var(--volt); transform: translateX(-4px); }
[dir="ltr"] .cat-tile .go { transform: scaleX(-1); }
[dir="ltr"] .cat-tile:hover .go { transform: scaleX(-1) translateX(-4px); }

/* == بطاقة المنتج: بئر ضوء + حافة مشغولة + سعر بطل == */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap, 20px); }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: var(--hair); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.pcard:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, transparent); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pcard a { display: contents; }
.pcard .imgw { position: relative; margin: 10px 10px 0; border-radius: calc(var(--radius-lg) - 6px); background: var(--well); padding: calc(var(--card-img-pad) * var(--dens)); overflow: hidden; }
/* لمعة تمرّ على البئر عند المرور — طبقة واحدة، transform فقط */
.pcard .imgw::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; mix-blend-mode: soft-light; }
.pcard:hover .imgw::after { transform: translateX(120%); }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.pcard:hover img { transform: scale(1.05); }
.pcard .body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard a .body { padding-bottom: 0; flex: 0 0 auto; }
.pcard .br { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.pcard .nm { font-size: 15px; line-height: 1.55; min-height: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .sp { font-size: 12px; color: var(--text-2); }
.pcard .sw, .sold-week { font-size: 12px; color: var(--warn); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sold-week { font-size: 14px; margin-block: 8px; }
.pcard .prw { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.pcard .pr { font-family: var(--font-head); font-weight: 700; font-size: calc(21px * var(--scale-head)); white-space: nowrap; color: var(--gold-ink); }
.pcard .old { text-decoration: line-through; color: var(--text-3); font-size: 13px; }
.pcard .stock { font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.pcard .dot { width: 7px; height: 7px; border-radius: 50%; }
.pcard .dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pcard .dot.low { background: var(--warn); }
.pcard .dot.out { background: var(--deal); }
.pcard .add { width: 100%; margin-top: 8px; padding: 11px; border-radius: var(--radius-pill); border: var(--bw-1) solid var(--edge);
  background: transparent; color: var(--text); font-family: var(--font-head); font-weight: 600; font-size: 14px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background-position .6s var(--ease); }
.pcard .add:hover, .pcard:hover .add:not(:disabled) { background: var(--gold-metal); background-size: 200% 100%; color: #111; border-color: transparent; }
.pcard .add:hover { background-position: 100% 50%; }
.pcard .add:disabled { opacity: .45; cursor: not-allowed; }
.pcard .add.alt { background: transparent; color: var(--gold-ink); border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); }

/* أزرار البطاقة العائمة: قلب ومقارنة — دوائر صغيرة فوق البئر */
.fav-btn, .cmp-btn { position: absolute; z-index: 2; inset-inline-end: 18px; width: 34px; height: 34px; border-radius: 50%;
  border: var(--bw-1) solid rgba(18,18,20,.12); background: rgba(255,255,255,.92); color: #121214;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.fav-btn { top: 18px; }
.cmp-btn { top: 58px; }
.fav-btn:hover, .cmp-btn:hover { transform: scale(1.08); }
.fav-btn.on { background: var(--gold-metal); color: #111; border-color: transparent; }
.cmp-btn.on { background: var(--chrome); color: var(--volt); }
/* منتج من صنف تاني غير صنف المقارنة الحالية: باهت (الكبسة بتشرح السبب) */
.cmp-btn.off { opacity: .4; }
.cmp-btn.off:hover { transform: none; }
.btn.cmp-off { opacity: .6; }
.buybox .fav-btn, .best-item .fav-btn { position: static; flex-shrink: 0; border-color: var(--line); }

/* == عرض القائمة == */
.view-toggle { display: inline-flex; border: var(--hair); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface); }
.view-toggle button { width: 42px; height: 40px; border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.view-toggle button.on { background: var(--ink); color: var(--on-ink); }
.grid4.list { grid-template-columns: minmax(0, 1fr); }
.grid4.list .pcard { flex-direction: row; align-items: stretch; }
.grid4.list .pcard:hover { transform: none; }
.grid4.list .pcard .imgw { width: 200px; flex-shrink: 0; margin: 10px; padding: 16px; }
.grid4.list .pcard .body { padding: 18px; }
.grid4.list .pcard .body:last-child { min-width: 240px; justify-content: center; border-inline-start: var(--hair); }
.grid4.list .pcard .nm { min-height: 0; -webkit-line-clamp: 3; font-size: 16px; }
.grid4.list .pcard .desc { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.grid4.list .pcard .prw { margin-top: 0; }
.grid4.list :is(.fav-btn, .cmp-btn) { inset-inline-end: auto; inset-inline-start: 18px; }

/* == الماركات: لوحات معدنية == */
.brands-sec { margin-top: var(--sec); background: var(--chrome); color: var(--on-chrome); padding-bottom: var(--sec); border-block: var(--hair-gold); }
.brands-sec .sec-h p { color: var(--on-chrome-3); }
.brand-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.brand-plate { display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; border-radius: var(--radius-lg);
  border: var(--bw-1) solid var(--line);
  border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 12%, transparent);
  background: linear-gradient(160deg, transparent, transparent 60%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--on-chrome) 7%, transparent), transparent 60%);
  transition: border-color .3s var(--ease), transform .3s var(--ease); }
.brand-plate:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 65%, transparent); transform: translateY(-3px); }
.brand-plate b { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: .08em; text-align: start;
  color: var(--on-chrome); }
[dir="rtl"] .brand-plate b { text-align: right; }
.brand-plate span { font-size: 14px; color: var(--on-chrome-2); }
.brand-plate i { font-style: normal; font-size: 12px; color: var(--on-chrome-3); }

/* == الأكثر مبيعاً: ترتيب بأرقام ذهبية كبيرة == */
.best-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.best-item { display: flex; align-items: center; gap: 18px; padding-block: 16px; border-bottom: var(--hair); position: relative; }
.best-item .rank { font-family: var(--font-head); font-weight: 800; font-size: 44px; line-height: 1; width: 52px; flex-shrink: 0; text-align: center;
  color: var(--text-3); }
/* بئر ضوء عاجي معزول: الدمج multiply داخل الغلاف فقط فلا تذوب الصورة في الفحم */
.thumb-well { display: grid; place-items: center; flex-shrink: 0; width: 88px; height: 88px; border-radius: 14px; background: var(--well); isolation: isolate; overflow: hidden; }
.thumb-well img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.best-item .bi { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.best-item .br { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.best-item .nm { font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.best-item .pr { font-family: var(--font-head); font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--gold-ink); }
.best-item:hover .nm { color: var(--gold-ink); }

/* == ليش شركة الوليد + كيف تطلب == */
.why { margin-top: var(--sec); border-top: var(--hair); }
/* لوحة تعريف واحدة مشغولة (بروح لوحة بيانات الجهاز): إطار ذهبي شعري وأعمدة مسطّرة، لا بطاقات متشابهة */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--hair-gold); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.why-item { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; }
.why-item + .why-item { border-inline-start: var(--hair); }
.why-item svg { color: var(--volt); margin-bottom: 6px; }
.why-item b { font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.why-item span { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.how-h { margin-top: 40px; margin-bottom: 14px; font-size: 18px; }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.how li { display: flex; align-items: center; gap: 12px; padding: 14px 0; position: relative; font-weight: 600; font-size: 15px; }
.how li:not(:last-child)::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), var(--volt)); background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--volt) 50%, transparent)); margin-inline: 8px 16px; }
.how i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: var(--hair-gold); color: var(--gold-ink); font-family: var(--font-head); font-weight: 700; }

/* == «نبّهني لما يتوفّر» == */
.salert-wrap { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 16px; }
.salert-bg { position: absolute; inset: 0; background: rgba(8, 8, 10, .6); }
.salert { position: relative; width: 380px; max-width: 100%; background: var(--surface); color: var(--text); border: var(--hair-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 22px; }
.salert b { font-family: var(--font-head); font-size: 18px; }

/* == الفوتر == */
.site-foot { background: var(--chrome); color: var(--on-chrome-2); margin-top: var(--sec); border-top: var(--hair-gold); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding-block: clamp(44px, 6vw, 72px) 40px; }
.foot-brand img { height: 46px; width: auto; margin-bottom: 16px; }
.foot-brand h4 { font-family: var(--font-head); color: var(--on-chrome); font-size: 18px; margin-bottom: 8px; }
.foot-brand p { font-size: 14px; color: var(--on-chrome-3); max-width: 36ch; line-height: 1.8; }
.site-foot h4 { color: var(--volt); font-size: 14px; margin-bottom: 14px; }
.site-foot a { display: block; font-size: 14px; padding-block: 4px; color: var(--on-chrome-2); transition: color .2s var(--ease); }
.site-foot a:hover { color: var(--volt); }
.foot-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--on-chrome-3); }
.foot-facts li { display: flex; align-items: center; gap: 8px; }
.foot-facts li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }
.site-foot .cop { border-top: var(--bw-1) solid var(--chrome-hover); padding-block: 18px; font-size: 13px; color: var(--on-chrome-3); }

/* == ص87: المحادثة مع المتجر + مجموعة الأزرار العائمة ==
   الأزرار: كبسولة واحدة على الهيكل الداكن (المستشار ✦ ثم المحادثة) بدل دوائر متفرقة فوق المحتوى.
   اللوحة: لوحة عائمة في الزاوية على الكمبيوتر، وورقة بملء الشاشة على الهاتف (آمنة للنوتش ولوحة المفاتيح). */
.chatw { position: fixed; inset-block-end: max(22px, calc(env(safe-area-inset-bottom) + 12px)); inset-inline-end: 22px; z-index: 900; }
.fab-dock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px; border-radius: var(--radius-pill);
  background: var(--chrome);
  background: color-mix(in srgb, var(--chrome) 94%, transparent); border: var(--hair-gold); box-shadow: var(--shadow-2), inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fab-dock .adv { display: contents; }
.fab-dock :is(.adv-fab, .chat-fab) { position: relative; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.fab-dock .adv-fab::after { inset: -2px; opacity: .55; }
.chat-fab { border: 0; background: transparent; background: color-mix(in srgb, var(--on-chrome) 7%, transparent); color: var(--volt); }
.chat-fab svg { width: 24px; height: 24px; }
.chat-fab:hover { background: transparent; background: color-mix(in srgb, var(--on-chrome) 13%, transparent); }
.fab-dock :is(.adv-fab, .chat-fab):active { transform: scale(.94); }
.chat-fab:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.chat-bdg { position: absolute; top: -3px; inset-inline-start: -3px; background: var(--deal); color: var(--on-deal);
  min-width: 20px; height: 20px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-inline: 5px; border: 2px solid var(--chrome); }
/* التسمية: مخفية بصرياً، وتظهر تلميحاً بجانب الزر عند المرور بالفأرة أو التركيز */
.fab-dock .adv-fab > span, .chat-fab .chat-lb { position: absolute; inset-inline-end: calc(100% + 14px); top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  padding: 7px 14px; border-radius: var(--radius-pill); background: var(--chrome); color: var(--on-chrome); border: var(--hair-gold); box-shadow: var(--shadow-1);
  font: 600 13px var(--font-head); opacity: 0; scale: .96; transition: opacity .2s var(--ease), scale .2s var(--ease); width: auto; height: auto; overflow: visible; clip: auto; }
@media (hover: hover) and (pointer: fine) {
  .fab-dock :is(.adv-fab, .chat-fab):is(:hover, :focus-visible) > :is(span, .chat-lb) { opacity: 1; scale: 1; }
}
@media (hover: none) { .fab-dock .adv-fab > span, .chat-fab .chat-lb { display: none; } }

/* ── اللوحة ── */
.chatbox { position: fixed; z-index: 2; inset-block-end: max(22px, calc(env(safe-area-inset-bottom) + 12px)); inset-inline-end: 22px;
  width: 400px; height: min(680px, calc(100dvh - 44px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--text); border: var(--hair-gold); border-radius: 24px; box-shadow: var(--shadow-3), 0 0 0 1px rgb(0 0 0 / .04);
  transform-origin: 0% 100%; }
html[dir="ltr"] .chatbox { transform-origin: 100% 100%; }
.chat-tr { transition: opacity .26s var(--ease), transform .42s cubic-bezier(.2, .9, .2, 1); }
.chat-tr-out { transition-duration: .16s, .2s; }
.chat-off { opacity: 0; transform: translateY(18px) scale(.97); }

.chat-h { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: var(--on-chrome);
  background: radial-gradient(130% 160% at 90% -40%, transparent 0%, transparent 55%), var(--chrome);
  background: radial-gradient(130% 160% at 90% -40%, color-mix(in srgb, var(--volt) 30%, transparent) 0%, transparent 55%), var(--chrome); }
.chat-h::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--volt), transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--volt) 75%, transparent), transparent); }
.chat-av { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: var(--gold-metal); box-shadow: 0 0 22px -6px var(--volt); }
.chat-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--chrome); display: block; }
.chat-live { position: absolute; bottom: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--volt); border: 2px solid var(--chrome); box-shadow: 0 0 8px var(--volt); }
.chat-ht { flex: 1; min-width: 0; }
.chat-ht b { display: block; font: 700 16px/1.35 var(--font-head); color: var(--on-chrome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ht small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.5; color: var(--on-chrome-3); }
.chat-x { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--on-chrome);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--on-chrome) 16%, transparent); background: transparent; background: color-mix(in srgb, var(--on-chrome) 6%, transparent); transition: background-color .2s var(--ease); }
.chat-x:hover { background: transparent; background: color-mix(in srgb, var(--on-chrome) 14%, transparent); }
.chat-x:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.chat-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 6px 14px 16px;
  background: radial-gradient(120% 50% at 50% 0%, transparent, transparent 70%), var(--paper);
  background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--volt) 6%, transparent), transparent 70%), var(--paper);
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
.chat-log::-webkit-scrollbar { width: 6px; } .chat-log::-webkit-scrollbar-thumb { border-radius: 6px; background: transparent; background: color-mix(in srgb, var(--text) 22%, transparent); }
.chat-log ::selection { background: transparent; background: color-mix(in srgb, var(--volt) 35%, transparent); }
.chat-row { display: flex; flex-direction: column; margin-top: 12px; }
.chat-row.cont { margin-top: 3px; }
.chat-day { align-self: center; margin: 6px 0 2px; }
.chat-day span { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-3);
  background: var(--surface); border: var(--hair); }
.chat-new { display: flex; align-items: center; gap: 10px; color: var(--gold-ink, var(--volt)); font-size: 12px; font-weight: 700; }
.chat-new::before, .chat-new::after { content: ''; flex: 1; height: 1px; background: var(--volt); background: color-mix(in srgb, var(--volt) 55%, transparent); }

/* فقاعات المحادثة */
.cmsg { max-width: 84%; padding: 9px 13px 7px; border-radius: 18px; background: var(--surface); border: var(--hair); box-shadow: 0 1px 0 rgb(0 0 0 / .03); }
.cmsg p { margin: 0; font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.is-customer .cmsg { align-self: flex-start; background: var(--gold-metal); background-size: 180% 100%; color: #111; border-color: transparent; border-end-start-radius: 6px;
  box-shadow: 0 8px 20px -14px var(--volt);
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--volt) 90%, #000); }
.is-customer:not(.last) .cmsg { border-end-start-radius: 18px; }
.is-customer.cont .cmsg { border-start-start-radius: 6px; }
.is-staff .cmsg { align-self: flex-end; border-end-end-radius: 6px; }
.is-staff:not(.last) .cmsg { border-end-end-radius: 18px; }
.is-staff.cont .cmsg { border-start-end-radius: 6px; }
.cmsg-who { display: block; margin-bottom: 2px; font: 700 12px var(--font-head); color: var(--gold-ink, var(--volt)); }
.cmeta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.is-customer .cmeta { color: #4A3B14; }
.cmeta-ok { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmeta-st { display: inline-flex; align-items: center; gap: 6px; }
.cmsg.sending { opacity: .78; }
.cmsg.failed { background: var(--surface); color: var(--text); border: 1px solid var(--deal); border: 1px solid color-mix(in srgb, var(--deal) 60%, transparent); }
.cmsg-fail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12px; color: var(--deal); }
.cmsg-fail button { border: 0; background: none; padding: 2px 0; color: var(--text); font: 700 12px var(--font-head); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmsg-fail button:last-child { margin-inline-start: auto; width: 26px; height: 26px; display: grid; place-items: center; text-decoration: none; color: var(--text-3); }
.cmsg-fail svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: chat-dot 1s infinite ease-in-out; }
.chat-dots b:nth-child(2) { animation-delay: .15s; } .chat-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* إشعارات المتجر: بطاقة بأيقونة وعنوان ورقم مرجعي ورابط — ليست رسالة من شخص */
.cnote { --tone: var(--volt); align-self: stretch; padding: 14px; border-radius: 18px; background: var(--surface); border: var(--hair);
  box-shadow: 0 10px 24px -20px rgb(0 0 0 / .5); animation: chat-rise .4s cubic-bezier(.2, .9, .2, 1) both; }
.cnote.is-ok { --tone: var(--ok); }
.cnote.is-warn { --tone: var(--deal); }
.cnote-h { display: flex; align-items: flex-start; gap: 11px; }
.cnote-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--tone);
  background: transparent;
  background: color-mix(in srgb, var(--tone) 13%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); }
.cnote-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cnote-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 1px; }
.cnote-t b { font: 700 15px/1.35 var(--font-head); color: var(--text); }
.cnote-ref { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); border: var(--hair); background: var(--paper); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cnote-tm { flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.cnote-b { margin: 10px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cnote-kv { margin: 10px 0 0; padding: 4px 12px; border-radius: 12px; background: var(--paper); border: var(--hair); }
.cnote-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.cnote-kv div + div { border-top: 1px dashed var(--line); }
.cnote-kv dt { flex: none; font-size: 12.5px; color: var(--text-3); }
.cnote-kv dd { margin: 0; min-width: 0; text-align: end; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cnote-f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.cnote-wa { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); }
.cnote-wa svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cnote-go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  border: var(--hair-gold); color: var(--text); font: 600 13px var(--font-head); text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.cnote-go:hover { background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); border-color: var(--volt); }
.cnote-go:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.cnote-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.cnote-go:hover svg { transform: translateX(-2px); }
html[dir="ltr"] .cnote-go svg { scale: -1 1; }
html[dir="ltr"] .cnote-go:hover svg { transform: translateX(2px); }
.chat-row:not(.is-system) .cmsg { animation: chat-rise .32s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes chat-rise { from { opacity: 0; transform: translateY(8px); } }

/* التحميل والحالة الفارغة */
.chat-skel { display: grid; gap: 10px; padding-top: 14px; }
.chat-skel i { display: block; height: 58px; border-radius: 18px; background: linear-gradient(90deg, var(--surface) 0%, var(--stripe) 50%, var(--surface) 100%); background-size: 200% 100%; animation: chat-shim 1.2s linear infinite; }
.chat-skel i:nth-child(2) { width: 70%; align-self: end; justify-self: end; height: 44px; } .chat-skel i:nth-child(3) { width: 60%; height: 44px; }
@keyframes chat-shim { to { background-position: -200% 0; } }
.chat-empty { margin: auto 0; padding: 28px 12px 12px; display: grid; justify-items: center; text-align: center; gap: 8px; }
.chat-emark { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #111; background: var(--gold-metal); background-size: 180% 100%;
  box-shadow: 0 16px 34px -18px var(--volt), inset 0 1px 0 rgb(255 255 255 / .4);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--volt) 90%, #000), inset 0 1px 0 rgb(255 255 255 / .4); margin-bottom: 6px; }
.chat-emark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-empty b { font: 700 18px var(--font-head); }
.chat-empty p { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.75; color: var(--text-2); }

.chat-err { flex: none; background: var(--err-bg); color: var(--err-tx); font-size: 13px; padding: 8px 16px; }

/* خانة الكتابة */
.chat-f { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--hair); }
.chat-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding: 2px 12px; scroll-padding-inline: 12px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: var(--hair-gold); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface));
  color: var(--text); font: 600 13px var(--font-head); cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.chat-quick button:hover { background: var(--surface); background: color-mix(in srgb, var(--volt) 14%, var(--surface)); border-color: var(--volt); }
.chat-quick button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.chat-id { display: flex; gap: 8px; }
.chat-id input, .chat-send textarea { flex: 1 1 0; min-width: 0; border: var(--hair); background: var(--paper); color: var(--text); font: inherit; font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); caret-color: var(--volt); }
.chat-id input { border-radius: 14px; padding: 10px 14px; min-height: 44px; }
.chat-send { display: flex; gap: 8px; align-items: flex-end; }
.chat-send textarea { resize: none; display: block; min-height: 46px; max-height: 132px; padding: 11px 16px; border-radius: 23px; line-height: 1.5; }
.chat-id input:focus, .chat-send textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px var(--glow, transparent); box-shadow: 0 0 0 3px var(--glow, color-mix(in srgb, var(--volt) 22%, transparent)); }
.chat-send textarea::placeholder, .chat-id input::placeholder { color: var(--text-3); }
.chat-go { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #111;
  background: var(--gold-metal); background-size: 200% 100%; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 20px -12px var(--volt);
  transition: background-position .6s var(--ease), opacity .2s var(--ease), transform .15s var(--ease); }
.chat-go:hover:not(:disabled) { background-position: 100% 0; }
.chat-go:active:not(:disabled) { transform: scale(.94); }
.chat-go:disabled { opacity: .4; cursor: default; box-shadow: none; }
.chat-go.busy { opacity: 1; animation: chat-pulse 1s ease-in-out infinite; }
.chat-go:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.chat-go svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .chat-go svg { scale: -1 1; }
@keyframes chat-pulse { 50% { transform: scale(.92); } }

/* الهاتف: ورقة بملء الجزء الظاهر من الشاشة، والرأس تحت النوتش دائماً */
@media (max-width: 640px) {
  .chatw { inset-block-end: calc(env(safe-area-inset-bottom) + 14px); inset-inline-end: 12px; }
  .fab-dock { padding: 4px; gap: 4px; }
  .fab-dock :is(.adv-fab, .chat-fab) { width: 46px; height: 46px; }
  .chatbox { inset: auto 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .chat-h { padding: calc(12px + env(safe-area-inset-top)) 12px 12px 16px; }
  .chat-off { transform: translateY(32px); }
  html.chat-on, html.chat-on body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-off { transform: none; }
  .cnote, .chat-row .cmsg, .chat-skel i, .chat-dots b, .chat-go.busy { animation: none; }
}

/* == الحقول (متجر): أسطح داكنة بحدّ شعرة وتركيز ذهبي == */
body:not(.admin) .field input, body:not(.admin) .field select, body:not(.admin) .field textarea {
  border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 12px 14px; }
body:not(.admin) .field input:focus, body:not(.admin) .field select:focus, body:not(.admin) .field textarea:focus { border-color: var(--volt); box-shadow: 0 0 0 3px var(--glow); }
body:not(.admin) .field label { color: var(--text-2); }

/* == صفحات الدخول/التسجيل == */
body:not(.admin) .login-box { border: var(--hair-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); background: var(--surface); }
body:not(.admin) .login-wrap { background:
  radial-gradient(60% 50% at 50% 0%, transparent, transparent 70%), var(--paper); background:
  radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--volt) 12%, transparent), transparent 70%), var(--paper); }

/* == قائمة التصفح == */
.crumbs { padding-block: 18px 0; font-size: 13px; color: var(--text-3); }
.crumbs a:hover { color: var(--gold-ink); }
.listing { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; padding-block: calc(24px * var(--dens)); align-items: start; }
.listing.cols-side { grid-template-columns: minmax(0, 1fr) var(--side, 360px); }
.filters-toggle { display: none; }
.filters { background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); position: sticky; top: var(--stick-top); overflow: hidden; transition: top .35s var(--ease); }
.fgroup { border-bottom: var(--hair); }
.fgroup:last-child { border-bottom: 0; }
.fgroup summary { padding: 14px 18px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: '−'; color: var(--gold-ink); font-size: 18px; line-height: 1; }
.fgroup:not([open]) summary::after { content: '+'; }
.fgroup .fbody { padding: 0 18px 14px; }
.fopt { display: flex; align-items: center; gap: 10px; padding-block: 5px; font-size: 14px; }
.fopt input { accent-color: var(--volt); width: 16px; height: 16px; }
.fopt .cnt { color: var(--text-3); font-size: 12px; margin-inline-start: auto; }
.fopt.off { opacity: .4; pointer-events: none; }
.range-in { display: flex; gap: 8px; align-items: center; }
.range-in input { width: 100%; border: var(--hair); padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--text); }

.listing-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.listing-bar h1 { font-size: clamp(28px, 3.4vw, 42px); }
.listing-bar .count { font-size: 14px; color: var(--text-3); }
.listing-bar select { border: var(--hair); padding: 9px 14px; border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { background: var(--surface); border: var(--hair-gold); border-radius: var(--radius-pill); padding: 4px 14px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.chip button { background: none; border: none; font-size: 14px; padding: 0; color: var(--deal); }

.pager { display: flex; gap: 8px; justify-content: center; padding-block: 36px; }
.pager a, .pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair); border-radius: 50%; font-family: var(--font-head); font-weight: 600; }
.pager a:hover { border-color: var(--volt); }
.pager .cur { background: var(--gold-metal); color: #111; border-color: transparent; }

/* == صفحة المنتج == */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); padding-block: calc(24px * var(--dens)); align-items: start;
  grid-template-areas: "gallery buy" "more buy"; }
.pdp > .gallery { grid-area: gallery; min-width: 0; }
.pdp > .buybox { grid-area: buy; }
.pdp > .pdp-more { grid-area: more; min-width: 0; }
.pdp-more .specline:first-of-type { padding-top: 8px; }
.gallery .main-img { background: var(--well); border-radius: var(--radius-lg); position: relative; outline-offset: -3px; overflow: hidden; }
.gallery .main-img::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, #8A6A2B 22%, transparent); pointer-events: none; }
.gallery .main-img img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: var(--bw-1) solid rgba(18,18,20,.14); background: rgba(255,255,255,.9); color: #121214;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease); }
.gal-nav:hover { background: var(--gold-metal); }
.gal-prev { inset-inline-start: 14px; }
.gal-next { inset-inline-end: 14px; }
[dir="ltr"] .gal-prev svg, [dir="rtl"] .gal-next svg { transform: scaleX(-1); }
.gal-count { position: absolute; bottom: 14px; inset-inline-end: 14px; background: #121214; color: #EFE9DC; font-size: 12px; padding: 3px 12px; border-radius: var(--radius-pill); font-family: var(--font-head); }
.gallery .thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gallery .thumbs img { width: 76px; height: 76px; object-fit: contain; border: var(--hair); border-radius: 12px; padding: 6px; background: #FFFFFF; cursor: pointer; transition: border-color .2s var(--ease); }
.gallery .thumbs img.sel { border-color: var(--volt); box-shadow: 0 0 0 2px var(--glow); }

.buybox { position: sticky; top: var(--stick-top); transition: top .35s var(--ease); background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); padding: 28px; }
.buybox .br { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-ink); font-weight: 700; }
.buybox .title-row { display: flex; align-items: flex-start; gap: 12px; margin-block: 6px 10px; }
body:not(.admin) .buybox h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.4; text-wrap: balance; min-width: 0; }
.buybox .model { font-size: 13px; color: var(--text-3); }
.buybox .price-row { display: flex; align-items: baseline; gap: 12px; margin-block: 18px 12px; flex-wrap: wrap; padding-block: 16px; border-block: var(--hair); }
.buybox .price { font-family: var(--font-head); font-weight: 700; font-size: calc(38px * var(--scale-head)); line-height: 1; white-space: nowrap; color: var(--gold-ink); }
.buybox .old { text-decoration: line-through; color: var(--text-3); font-size: 17px; }
.buybox .stock { margin-block: 4px; }
.buybox .btn { border-radius: var(--radius-pill); }
.buybox > .btn:not(.btn-volt):not(.btn-ghost) { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.qty-row { display: flex; gap: 12px; align-items: center; margin-block: 16px; }
.qty-row .qty { display: flex; border: var(--hair); border-radius: var(--radius-pill); overflow: hidden; background: var(--paper); }
.qty-row button { width: 44px; height: 46px; background: transparent; color: var(--text); border: none; font-size: 20px; }
.qty-row button:hover { color: var(--volt); }
.qty-row input { width: 52px; text-align: center; border: none; background: transparent; color: var(--text); font-family: var(--font-head); font-weight: 600; }
.spec3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-block: 14px; }
.spec3 div { font-size: 13px; background: var(--paper); border: var(--hair); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.spec3 b { color: var(--text-3); font-weight: 500; font-size: 12px; }
.buy-facts { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: var(--hair); display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.buy-facts li { display: flex; align-items: center; gap: 10px; }
.buy-facts svg { color: var(--volt); flex-shrink: 0; }
/* مختار ألوان المنتج (2026-10-09): دوائر لون بحلقة شعرية؛ المختار بحلقة ذهبية وفراغ صغير؛ غير المتوفر مشطوب وباهت */
.pd-colors { margin-top: 18px; }
.pd-colors-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.pd-colors-h b { color: var(--text); font-family: var(--font-head); font-weight: 600; }
.pd-colors-h small { margin-inline-start: auto; font-size: 12px; color: var(--text-3); }
.pd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-sw { position: relative; width: 40px; height: 40px; padding: 4px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pd-sw-c { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), inset 0 6px 10px -6px rgba(255,255,255,.45); }
.pd-sw:hover:not(.off) { box-shadow: 0 0 0 1px var(--edge); transform: translateY(-1px); }
.pd-sw.on { box-shadow: 0 0 0 2px var(--volt), 0 6px 18px -8px var(--volt); box-shadow: 0 0 0 2px var(--volt), 0 6px 18px -8px color-mix(in srgb, var(--volt) 70%, transparent); }
.pd-sw:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.pd-sw.off { cursor: not-allowed; }
.pd-sw.off .pd-sw-c { opacity: .38; }
.pd-sw.off::after { content: ''; position: absolute; inset: 50% 6px auto; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--text-2); transform: rotate(-45deg); }
/* السلة: شارة اللون + دوائر صغيرة لتغييره */
.cart-clr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cart-clr .clr-chip { margin-top: 0; }
.clr-mini { display: flex; gap: 6px; }
.clr-dot { position: relative; width: 24px; height: 24px; padding: 3px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.clr-dot::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.clr-dot.on { box-shadow: 0 0 0 2px var(--volt); }
.clr-dot:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.clr-dot.off { cursor: not-allowed; opacity: .4; }
@media (prefers-reduced-motion: reduce) { .pd-sw { transition: none; } .pd-sw:hover:not(.off) { transform: none; } }
/* أفعال صفحة المنتج بثلاث طبقات: [الكمية | اشترِ الآن] ← السلة ← شريط أدوات مضغوط (واتساب/قارن/من الداخل) */
.buy-cta { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.buy-cta .qty { display: flex; align-items: center; border: var(--hair); border-radius: var(--radius-pill); background: var(--paper); flex-shrink: 0; }
.buy-cta .qty button { width: 40px; height: 100%; min-height: 50px; background: transparent; color: var(--text); border: 0; font-size: 19px; line-height: 1; cursor: pointer; border-radius: var(--radius-pill); }
.buy-cta .qty button:hover { color: var(--volt); }
.buy-cta .qty input { width: 30px; padding: 0; text-align: center; border: 0; background: transparent; color: var(--text); font-family: var(--font-head); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.buy-cta .qty input::-webkit-inner-spin-button, .buy-cta .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy-cta .buy-now { order: -1; flex: 1; min-width: 0; min-height: 50px; padding: 0 18px; font-size: 16px; }
.qty-cap { margin: 6px 4px 0; font-size: 12.5px; color: var(--text-3); }
.buybox .buy-add { width: 100%; min-height: 44px; padding: 0 18px; margin-top: 8px; font-size: 14.5px; }
.pd-tools { display: flex; margin-top: 12px; border: var(--hair); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.pd-tools[hidden], .pd-tool[hidden] { display: none; }
.pd-tool { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; padding: 8px 6px;
  background: transparent; border: 0; color: var(--text-2); font: 600 12.5px/1.3 var(--font-head); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.pd-tool + .pd-tool { border-inline-start: var(--hair); }
.pd-tool svg { color: var(--volt); flex-shrink: 0; transition: transform .25s var(--ease); }
.pd-tool:hover { background: transparent; background: color-mix(in srgb, var(--volt) 9%, transparent); color: var(--text); }
.pd-tool:hover svg { transform: translateY(-1px); }
.pd-tool:focus-visible { outline: 2px solid var(--volt); outline-offset: -3px; }
.pd-tool.on { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); color: var(--text); }
.pd-tool.cmp-off { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .pd-tool, .pd-tool svg { transition: none; } .pd-tool:hover svg { transform: none; } }

.specline { padding-block: 36px 0; }
.specline h2 { margin-bottom: 18px; font-size: clamp(24px, 2.6vw, 32px); }
.spec-table { background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.spec-group-h { padding: 12px 18px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--gold-ink); background: var(--stripe); border-bottom: var(--hair); }
.spec-table table { background: transparent; }
.spec-table td { border-bottom: var(--hair); padding: 12px 18px; }
.spec-table td:first-child { width: 40%; color: var(--text-3); }
.spec-table tr:nth-child(even) td { background: transparent; }
.desc-box { background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); padding: 22px; line-height: 1.9; }

/* == سلة + دفع == */
body:not(.admin) table { background: transparent; }
body:not(.admin) th { color: var(--text-3); border-bottom: var(--hair); font-weight: 600; }
.cart-table .thumb-well { width: 76px; height: 76px; }
.summary { background: var(--surface); border: var(--hair-gold); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: var(--stick-top); transition: top .35s var(--ease); }
.summary h2, .summary h3 { font-size: 22px; margin-bottom: 10px; }
.summary .row { display: flex; justify-content: space-between; padding-block: 7px; font-size: 15px; }
.summary .tot { border-top: var(--hair); margin-top: 10px; padding-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: 22px; }
.summary .tot span:last-child { color: var(--gold-ink); }
.summary .tot-note { margin: 0 0 14px; font-size: 13px; color: var(--text-3); text-align: end; }
.summary .btn { width: 100%; border-radius: var(--radius-pill); }


.copy-btn { border: var(--hair); background: var(--paper); color: var(--text); padding: 4px 14px; border-radius: var(--radius-pill); font-size: 13px; }


.pay-deadline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: var(--hair-gold); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.pay-deadline.urgent { background: var(--warn-bg); border-color: var(--warn); }
.pay-deadline.over { background: var(--err-bg); border-color: var(--deal); color: var(--err-tx); }
.pay-deadline .pd-clock { display: inline-flex; gap: 6px; margin-inline-start: 8px; }
.pay-deadline .pd-box { display: inline-flex; flex-direction: column; align-items: center; min-width: 42px; background: var(--chrome); color: var(--volt);
  border-radius: 10px; padding: 2px 6px; font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.2; }
.pay-deadline .pd-box i { font-style: normal; font-size: 10px; font-weight: 400; opacity: .8; }

/* == الحساب == */
.tabs { display: flex; gap: 4px; border-bottom: var(--hair); margin-block: 16px; overflow-x: auto; }
.tabs button { border: none; background: none; color: var(--text-2); padding: 12px 20px; font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { border-bottom-color: var(--volt); color: var(--text); font-weight: 700; }

.order-stepper { display: flex; gap: 0; margin-block: 24px; }
.ostep { flex: 1; text-align: center; position: relative; font-size: 12px; color: var(--text-3); }
.ostep .b { width: 16px; height: 16px; border-radius: 50%; border: var(--bw-1) solid var(--line); background: var(--surface); margin: 0 auto 6px; position: relative; z-index: 1; }
.ostep.done .b { background: var(--volt); border-color: var(--volt); }
.ostep.done { color: var(--text); font-weight: 500; }
.ostep.cur .b { border-color: var(--volt); box-shadow: 0 0 0 4px var(--glow); }
.ostep::before { content: ''; position: absolute; top: 8px; inset-inline-start: calc(-50% + 8px); width: calc(100% - 16px); height: 1px; background: var(--line); }
.ostep:first-child::before, .ostep:first-of-type::before { display: none; }   /* ص93: أول عنصر فعلي بعد <template> لـAlpine — كان خطه يخرج يميناً خارج الصفحة */
.ostep.done::before, .ostep.cur::before { background: var(--volt); }   /* الخط الواصل للمرحلة الحالية = وصلها */
.ship-card .ship-row { display: flex; gap: 10px; align-items: start; font-size: 14px; padding-block: 6px; }
.ship-card .ship-row svg { flex: 0 0 auto; color: var(--text-2); margin-top: 2px; }
/* لوحات عامة في صفحات الحساب/الطلب/الدفع */
body:not(.admin) .panel { border-radius: var(--radius-lg) !important; border-color: var(--line) !important; background: var(--surface) !important; overflow: hidden; }

/* == المقارنة == */
  background: color-mix(in srgb, var(--chrome) 96%, transparent); color: var(--on-chrome); border-top: var(--hair-gold); padding: 12px 16px; box-shadow: var(--shadow-2); font-size: 14px; }

/* == الحالات الفارغة == */
.empty-state { padding: 72px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state h3 { font-size: calc(20px * var(--scale-head)); line-height: 1.5; max-width: 32ch; text-wrap: balance; }
.empty-state p { max-width: 44ch; margin: 0; color: var(--text-2); }
.empty-state .btn { margin-top: 8px; }
.section-h:has(> label) { flex-wrap: wrap; gap: 8px 16px; }
.section-h > label { white-space: nowrap; }

/* toast */
#toast .t { background: var(--chrome); color: var(--on-chrome); border: var(--hair-gold); border-radius: var(--radius-pill); padding: 12px 26px; display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); }
#toast .t:has(.t-act) { padding: 8px 8px 8px 8px; padding-inline-start: 20px; pointer-events: auto; }
#toast .t-act { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--gold-metal); background-size: 220% 100%; color: #111; font: 700 13px var(--font-head); text-decoration: none; cursor: pointer; white-space: nowrap; }

/* == لوح (≤1100) == */
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-in.full { grid-template-columns: minmax(0, 1fr); }
  .stage-side { flex-direction: row; }
  .side-tile { flex: 1; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-item:nth-child(3) { border-inline-start: 0; }
  .why-item:nth-child(n+3) { border-top: var(--hair); }
  .flash { grid-template-columns: minmax(0, 1fr) 220px; }
  .flash .fcol { grid-column: 1; grid-row: 2; align-items: start; }
  .fimg-w { grid-column: 2; grid-row: 1 / span 2; }
}

/* == تابلت/موبايل (≤960) == */
@media (max-width: 960px) {
  .site-head { position: static; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .listing, .listing.cols-side { grid-template-columns: minmax(0, 1fr); }
  .summary, .buybox, .filters { position: static; }
  .filters { display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
  .pdp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "buy" "more"; gap: 24px; }
  .gallery .thumbs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
  .gallery .thumbs img { scroll-snap-align: start; flex-shrink: 0; }
  .best-row { grid-template-columns: minmax(0, 1fr); }
  .offer-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .how li::after { display: none; }
  .stage-main { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .stage-visual { max-width: 380px; grid-row: 1; }
  .cats-rail .rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .cats-rail .rail::-webkit-scrollbar { display: none; }
  .cat-tile { flex: 0 0 44%; scroll-snap-align: start; }
}

/* == موبايل (≤640) == */
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .topbar .container { gap: 12px; min-height: 32px; font-size: 11.5px; }
  .tb-fact:nth-child(n+2) { display: none; }
  .header-main .container { flex-wrap: wrap; height: auto; padding-block: 12px; gap: 12px; }
  .logo img { height: 38px; }
  .searchbox { order: 3; max-width: 100%; flex-basis: 100%; }
  .searchbox input { height: 46px; }
  .s-btn { width: 36px; height: 36px; }
  .header-actions { gap: 0; }
  .icon-btn { padding: 6px 7px; font-size: 10.5px; }
  .nav-cats .container { gap: 22px; }
  .nav-links { gap: 22px; }
  .annbar .container { flex-wrap: wrap; gap: 6px 10px; }
  .ann-txt { flex: 1 1 100%; order: 2; gap: 6px; }
  .ann-txt b { font-size: 14px; }
  .ann-clock { order: 1; font-size: 13px; }
  .ann-x { order: 1; margin-inline-start: auto; }
  .stage-in { padding-block: 24px 32px; }
  .stage-visual { max-width: 290px; }
  .stage-title { font-size: clamp(30px, 8.6vw, 40px); }
  .stage-cta .btn { flex: 1 1 auto; padding: 14px 20px; }
  .stage-side { flex-direction: column; }
  .side-tile { grid-template-columns: minmax(0, 1fr) 76px; min-height: 104px; padding: 14px 16px; }
  .flash { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 18px; }
  .fimg-w { grid-column: 1; grid-row: 1; max-width: 200px; justify-self: center; width: 100%; }
  .flash .fcol { grid-row: auto; }
  .cd .cdb { min-width: 52px; }
  .cd .cdb b { font-size: 21px; }
  .cat-tile { flex-basis: 58%; }
  .cat-meta .nm { font-size: 19px; }
  .pcard .imgw { margin: 6px 6px 0; }
  .pcard .body { padding: 10px 12px 12px; }
  .pcard .nm { font-size: 13.5px; min-height: 42px; }
  .pcard .pr { font-size: 17px; }
  .pcard .add { padding: 9px; font-size: 13px; }
  .pcard .save { display: none; }
  .fav-btn { top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; }
  .cmp-btn { top: 50px; inset-inline-end: 12px; width: 32px; height: 32px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-item { padding: 18px; }
  .why-item + .why-item { border-inline-start: 0; border-top: var(--hair); }
  .how { grid-template-columns: minmax(0, 1fr); }
  .best-item .rank { font-size: 34px; width: 40px; }
  .best-item .thumb-well { width: 72px; height: 72px; }
  .brand-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-plate { padding: 16px; }
  .brand-plate b { font-size: 18px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-foot { padding-bottom: 96px; }
  .offer-box h1 { font-size: 24px; }
  .offer-box .oprice .now { font-size: 32px; }
  .grid4.list .pcard .imgw { width: 110px; padding: 10px; margin: 6px; }
  .grid4.list .pcard .body:last-child { min-width: 130px; padding: 10px; }
  .grid4.list .pcard .desc { display: none; }
  .empty-state { padding: 44px 8px; }
  .buybox { padding: 20px; }
}

/* شبكة القائمة بجانب الفلاتر: ثلاثة أعمدة على المكتب كي تبقى البطاقة بعرض كريم */
.listing .grid4:not(.list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .listing .grid4:not(.list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* == الأجهزة من الداخل: مسار تمرير طويل ومسرح لاصق — المشهد WebGL والوسوم HTML فوقه == */
.td { --td-top: var(--head-h); margin-top: var(--sec); background: var(--chrome); color: var(--on-chrome); border-block: var(--hair-gold); }
/* صفحة مخصّصة (/inside): مسرح بارتفاع الشاشة بلا «مسار تمرير» — التفكيك بالشريط والتدوير بالسحب، والصفحة ما بتتحرّك */
.td-track { position: relative; }
/* ناقص مسار الصفحة فوق المسرح (~٤٤px) ⇒ الأشرطة ظاهرة بأول شاشة */
.td-stage { padding-block: 18px 22px; }
/* المسرح بارتفاع الشاشة كحد أدنى، وبيطول مع اللوحة إذا عائلة فيها أقسام كتير (بدل ما ينقصّ شي) */
.td-in { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  min-height: clamp(560px, calc(100vh - var(--td-top) - 84px), 880px); }
.td-panel { display: flex; flex-direction: column; gap: 14px; }
.td-panel h2 { font-size: clamp(28px, 3.2vw, 42px); }
.td-sub { color: var(--on-chrome-2); margin: 0; font-size: 15px; line-height: 1.8; }
/* اختيار القسم: خمس عائلات بشبكة ثابتة (أيقونة + اسم + عدد) وتحتها أقسام العائلة بتلف — ٢٩ قسم بلا تمرير أفقي ولا زر مقصوص */
.td-pick { display: grid; gap: 12px; }
.td-fams { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.td-fams button { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 74px; padding: 10px 4px 8px; border-radius: 14px; cursor: pointer;
  border: var(--bw-1) solid var(--line);
  border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 14%, transparent); background: transparent; background: color-mix(in srgb, var(--on-chrome) 4%, transparent); color: var(--on-chrome-2);
  font: 700 12px/1.35 var(--font-head, inherit); text-align: center; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.td-fams button:hover { border-color: var(--volt); color: var(--on-chrome); }
.td-fams button:focus-visible, .td-tabs button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.td-fams button.on { border-color: var(--volt); color: var(--on-chrome); background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent);
  box-shadow: 0 10px 22px -16px var(--volt);
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--volt) 90%, transparent); }
.td-fam-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
.td-fam-ic svg { width: 18px; height: 18px; }
.td-fams button.on .td-fam-ic { background: var(--gold-metal); color: #111; }
.td-fam-t { text-wrap: balance; }
.td-fam-n { position: absolute; top: 5px; inset-inline-end: 6px; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--on-chrome-3); background: transparent; background: color-mix(in srgb, var(--on-chrome) 8%, transparent); }
.td-fams button.on .td-fam-n { color: #111; background: var(--volt); }
.td-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.td-tabs button { border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 18%, transparent); background: transparent; color: var(--on-chrome-2);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .25s var(--ease); }
.td-tabs button:hover { border-color: var(--volt); color: var(--on-chrome); }
.td-tabs button.on { background: var(--gold-metal); color: #111; border-color: transparent; }
.td-desc { margin: 0; font-size: 14px; color: var(--on-chrome-3); line-height: 1.75; height: 5.25em; overflow: hidden; }
/* ارتفاع ثابت يتّسع لـ١٢ قطعة (٦ صفوف) — تبديل الجهاز ما بيغيّر قياس اللوحة فما يرتجّ المشهد */
.td-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 22px; gap: 6px 14px; align-content: start; height: calc(6 * 22px + 5 * 6px); }
.td-parts li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--on-chrome-3); transition: color .3s var(--ease); }
.td-parts li i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px;
  border: var(--bw-1) solid var(--line);
  border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 20%, transparent); transition: all .3s var(--ease); }
.td-parts li.on { color: var(--on-chrome); }
.td-parts li.on i { background: var(--volt); color: #111; border-color: var(--volt); }
.td-cta { align-self: flex-start; min-height: 48px; padding-inline: 26px; background: var(--gold-metal); color: #111; border-color: transparent;
  font-weight: 800; box-shadow: 0 10px 26px -12px rgba(212, 175, 55, .75); transition: transform .2s var(--ease), box-shadow .2s, filter .2s; }
.td-cta:hover { color: #111; filter: brightness(1.06); box-shadow: 0 14px 32px -12px rgba(212, 175, 55, .9); transform: translateY(-1px); }
.td-cta:active { transform: translateY(0); }
.td-cta:focus-visible { outline: 2px solid #E9CF86; outline-offset: 3px; }
.td-note { font-size: 11.5px; color: var(--on-chrome-3); }
.td-view { align-self: stretch; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.td-box { position: relative; min-height: 0; direction: ltr; }
.td-box::before { content: ''; position: absolute; inset: 6% 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent, transparent 75%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--volt) 18%, transparent), transparent 75%); }
.td-canvas, .td-labels { position: absolute; inset: 0; }
.td-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.td-labels { pointer-events: none; overflow: hidden; }
.td-lbl { position: absolute; left: 0; top: 0; margin: -13px 0 0 -13px; display: flex; align-items: center; gap: 7px; white-space: nowrap; direction: rtl;
  font-size: 12px; font-weight: 600; color: #EFE9DC; background: rgba(11, 11, 13, .82); border: 1px solid rgba(214, 181, 102, .45);
  border-radius: 999px; padding: 2px 3px 2px 11px; opacity: 0; will-change: transform, opacity; }
html.ltr .td-lbl { direction: ltr; padding: 2px 11px 2px 3px; }
.td-lbl i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-metal); color: #111; font-size: 11px; }
.td-hint { position: absolute; bottom: 10px; white-space: nowrap; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--on-chrome-3); direction: rtl; pointer-events: none;
  border: var(--bw-1) solid var(--line);
  border: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 16%, transparent); border-radius: var(--radius-pill); padding: 4px 14px; background: var(--chrome); background: color-mix(in srgb, var(--chrome) 70%, transparent); }
html.ltr .td-hint { direction: ltr; }
/* أشرطة التحكّم: صف مستقل تحت المجسّم — شريطان متجاوران على الكمبيوتر، فوق بعض على الجوال */
.td-ctls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 860px; width: 100%; margin-inline: auto; }
.td-ctl { display: flex; align-items: center; gap: 8px; direction: rtl; min-width: 0; padding: 6px 8px 6px 6px; border-radius: 999px;
  background: transparent;
  background: color-mix(in srgb, var(--on-chrome) 6%, transparent); border: 1px solid rgba(214, 181, 102, .28); }
html.ltr .td-ctl { direction: ltr; padding: 6px 6px 6px 8px; }
.td-ctl-t { flex-shrink: 0; padding-inline: 10px 4px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--volt); }
.td-end { flex-shrink: 0; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(214, 181, 102, .35); background: transparent;
  color: #EFE9DC; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.td-end:hover { border-color: #D6B566; }
.td-end.on { background: var(--gold-metal); color: #111; border-color: transparent; }
/* touch-action: none — سحب الشريط ما بيمرّر الصفحة (كان pan-y فيتحرّك المتصفح مع السحب) */
.td-range { --p: 0%; flex: 1; min-width: 0; height: 40px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: none; }
.td-range:focus-visible { outline: 2px solid #E9CF86; outline-offset: 2px; border-radius: 999px; }
.td-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px;
  background: linear-gradient(to left, #D6B566 var(--p), rgba(239, 233, 220, .18) var(--p)); }
html.ltr .td-range::-webkit-slider-runnable-track { background: linear-gradient(to right, #D6B566 var(--p), rgba(239, 233, 220, .18) var(--p)); }
.td-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--gold-metal); border: 2px solid #0B0B0D; box-shadow: 0 0 0 2px rgba(214, 181, 102, .6), 0 4px 12px rgba(0, 0, 0, .5); }
.td-range::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(239, 233, 220, .18); }
.td-range::-moz-range-progress { height: 6px; border-radius: 6px; background: #D6B566; }
.td-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #D6B566; border: 2px solid #0B0B0D; }
/* بلا WebGL: قائمة القطع بس */
.td-nogl .td-stage { padding-block: var(--sec); }
.td-nogl .td-in { min-height: 0; }
.td-nogl .td-in { grid-template-columns: minmax(0, 640px); }
.td-nogl .td-parts { height: auto; }
@media (max-width: 960px) {
  .td { --td-top: 0px; }
  /* الجوال: تدفّق عادي — العنوان والتبويبات، ثم المجسّم بارتفاع ثابت (svh ما بيتغيّر مع شريط العنوان)، ثم الأشرطة والقطع */
  .td-stage { padding-block: 16px 22px; }
  .td-in { display: flex; flex-direction: column; align-items: stretch; height: auto; gap: 12px; }
  .td-panel { display: contents; }
  .td-panel h2 { font-size: 24px; order: 1; }
  .td-pick { order: 2; gap: 10px; }
  /* الموبايل: أقسام العائلة (≤١٢) بصف يتمرّر باللمس من طرف الشاشة لطرفها — المشهد بيضل قريب من فوق */
  .td-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 2px;
    margin-inline: calc(var(--sp) * -6 * var(--dens)); padding-inline: calc(var(--sp) * 6 * var(--dens)); }
  .td-tabs::-webkit-scrollbar { display: none; }
  .td-tabs button { flex-shrink: 0; min-height: 40px; }
  .td-in { min-height: 0; }
  .td-fams button { min-height: 66px; padding: 8px 2px 6px; font-size: 11px; }
  .td-view { order: 3; height: auto; grid-template-rows: auto auto; gap: 12px; }
  .td-box { height: 50svh; min-height: 300px; max-height: 460px; }
  .td-parts { order: 4; }
  .td-cta { order: 5; align-self: stretch; justify-content: center; }
  .td-sub, .td-note, .td-desc { display: none; }
  .td-ctls { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* الموبايل: أرقام فقط على المجسّم، والأسماء بقائمة مرقّمة مضغوطة تحته */
  .td-parts { grid-auto-rows: 18px; gap: 5px 10px; height: calc(6 * 18px + 5 * 5px); }
  .td-parts li { font-size: 11.5px; gap: 6px; }
  .td-parts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-parts li i { width: 18px; height: 18px; font-size: 10px; }
  .td-lbl { padding: 2px; margin: -11px 0 0 -11px; }
  .td-lbl span { display: none; }
  .td-lbl i { width: 18px; height: 18px; font-size: 10px; }
  .td-nogl .td-parts { display: grid; height: auto; }
}

/* الماركات بعد قسم التفكيك مباشرة: خط شعري واحد بينهما لا شريطاً فارغاً */
.td + .brands-sec { margin-top: 0; border-top: 0; }

/* == شريط الخدمات تحت المسرح: ثلاث حقائق بأيقونات وخطوط فاصلة == */
.facts { background: var(--chrome); color: var(--on-chrome); border-top: var(--bw-1) solid var(--line); border-top: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 8%, transparent); border-bottom: var(--hair-gold); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-width: 0; }
.facts li + li { border-inline-start: var(--bw-1) solid var(--line); border-inline-start: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 10%, transparent); }
.facts svg { color: var(--volt); flex-shrink: 0; }
.facts b { display: block; font-family: var(--font-head); font-size: 15px; }
.facts span { display: block; font-size: 12.5px; color: var(--on-chrome-3); line-height: 1.6; }
@media (max-width: 960px) {
  .facts ul { grid-template-columns: minmax(0, 1fr); }
  .facts li { padding: 12px 4px; }
  .facts li + li { border-inline-start: 0; border-top: var(--bw-1) solid var(--line); border-top: var(--bw-1) solid color-mix(in srgb, var(--on-chrome) 10%, transparent); }
}

/* == الأزرار العائمة: دوائر أيقونية مضغوطة، وتنسحب حين يظهر زر شراء أو ملخص السلة == */
.chatw { transition: opacity .3s var(--ease), transform .3s var(--ease); }
body.fab-tuck .chatw:not(:has(.chatbox:not([style*="display: none"]))) { opacity: 0; transform: translateY(24px); pointer-events: none; }

/* == انتقالات الصفحات: تلاشٍ قصير للصفحة، وصورة المنتج تنتقل من البطاقة إلى صفحته == */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
::view-transition-group(pdp-hero) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(pdp-hero), ::view-transition-new(pdp-hero) { height: 100%; width: 100%; object-fit: contain; overflow: clip; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* == الهياكل المبدئية (skeleton): نفس مقاسات المحتوى الحقيقي فلا قفزة، ولمعة transform فقط == */
.sk { display: block; position: relative; overflow: hidden; background: transparent; background: color-mix(in srgb, var(--text) 9%, transparent); border-radius: 8px; }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, transparent, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--volt) 14%, transparent), transparent); animation: sk 1.4s var(--ease) infinite; }
[dir="rtl"] .sk::after { animation-direction: reverse; }
@keyframes sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }
.sk-line { height: 12px; margin-block: 6px; }
.sk-title { height: 26px; margin-block: 10px; width: 90%; }
.sk-price { height: 40px; width: 45%; margin-block: 24px 20px; }
.sk-btn { height: 50px; border-radius: 999px; margin-top: 10px; }
.pcard.skel { pointer-events: none; }
.pcard.skel .imgw { aspect-ratio: 1; }
.pdp-skel .main-img img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
.pdp-skel .buybox { position: static; min-height: 420px; }

/* == ضوء يتبع المؤشر على البطاقات (ديسكتوب فقط) — «مصباح على معدن مصقول» == */
@media (hover: hover) and (pointer: fine) {
  :is(.pcard, .cat-tile)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), transparent, transparent 45%);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--volt) 13%, transparent), transparent 45%);
    transition: opacity .35s var(--ease); }
  :is(.pcard, .cat-tile):hover::before { opacity: 1; }
}
/* الموبايل (بلا مرور): لمعة البئر تمرّ مرة واحدة حين تدخل البطاقة الشاشة — نفس إشارة الفخامة بلا hover */
@supports (animation-timeline: view()) {
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    .pcard .imgw::after { animation: sheen linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; transition: none; }
    @keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  }
}

/* == دخول عنوان المسرح كلمةً كلمة (لا حرفاً: تقطيع الحروف يكسر اتصال العربية) == */
.stage-title .w { display: inline-block; margin-inline-end: .24em; }
@media (prefers-reduced-motion: no-preference) {
  .stage-title .w { animation: wordIn .8s var(--ease) both; animation-delay: calc(120ms + var(--i) * 75ms); }
  @keyframes wordIn { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── الطلب السريع: بطاقة واحدة بعرض قراءة مريح، أربع خانات وزر دفع واحد ── */
.qc { padding-block: 28px 56px; }
.qc-card { max-width: 520px; margin-inline: auto; background: var(--surface); border: var(--hair-gold); border-radius: var(--radius-lg);
  padding: 28px 24px; display: grid; gap: 14px; }
.qc-card h1 { font-size: clamp(24px, 4vw, 30px); margin: 0; }
.qc-sub { margin: -6px 0 4px; color: var(--text-3); font-size: 14px; }
.qc-card .field { display: grid; gap: 6px; margin: 0; }
.qc-card .field > span { font-size: 14px; font-weight: 600; }
.qc-card .field input, .qc-card .field select, .qc-card .field textarea { font-size: 16px; min-height: 50px; }
.qc-items { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--hair); border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.qc-thumbs { display: flex; }
.qc-thumbs img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 8px; border: 2px solid var(--surface); margin-inline-start: -8px; }
.qc-thumbs img:first-child { margin-inline-start: 0; }
.qc-sub-total { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.qc-empty { font-size: 14px; color: var(--text-3); }
.qc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: var(--hair); padding-top: 14px; margin-top: 4px; }
.qc-total small { color: var(--text-3); font-size: 12px; margin-inline-start: 6px; }
.qc-total b { font-family: var(--font-head); font-size: 26px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.qc-err { color: var(--deal); font-size: 14px; margin: 0; }
.qc-pay { width: 100%; min-height: 56px; font-size: 18px; border-radius: var(--radius-pill); }

/* ══════════════════════════════════════════════════════════════════════════════
   ALANWAR DNA — نظام التصميم المستخرج من الصفحة الرئيسية المرجعية (projects/alanwar-hero)
   نفس الحمض لا نفس التصميم: عناوين Cairo سوداء ثقيلة، ذهب صلب واحد، أزرار كبسولية ذهبية بتوهّج
   ناعم، أسطح داكنة بخط شعرة يذهب عند المرور، منتجات تحت إضاءة استوديو، وتكوين مختلف لكل جهاز.
   كل الألوان ما زالت توكِنات الحزم (حزمة luxe هي الافتراضية) — المالك يبدّل الهوية من اللوحة كما كان.
   ══════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Cairo'; font-weight: 800; font-display: swap; src: url(/fonts/cairo-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 900; font-display: swap; src: url(/fonts/cairo-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 800; font-display: swap; src: url(/fonts/cairo-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Cairo'; font-weight: 900; font-display: swap; src: url(/fonts/cairo-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --font-display: 'Cairo', var(--font-head);
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4.2vw, 40px);
  --gold-glow: 0 14px 34px -16px color-mix(in srgb, var(--volt) 80%, transparent);
  /* إضاءة الاستوديو لصور المنتجات: سبوت دافئ من الأعلى على أرضية عاجية (الصور بخلفية بيضاء) */
  --well: radial-gradient(70% 58% at 50% 20%, #FFFFFF 0%, #F4F0E8 48%, #E2DBCD 100%);
}
body:not(.admin) .container { padding-inline: var(--gutter); }

/* ── الخطوط: عناوين Cairo ثقيلة متوازنة، نص IBM Plex مقروء ── */
body:not(.admin) :is(h1, h2) { font-family: var(--font-display); font-weight: 900; letter-spacing: -.005em; text-wrap: balance; }
body:not(.admin) :is(h3, h4) { font-family: var(--font-display); font-weight: 800; }
body:not(.admin) h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.25; }

/* ── الأزرار: الأساسي ذهبي صلب بتوهّج ناعم (لا تدرّج معدني)، الثانوي خط شعرة ── */
body:not(.admin) .btn { background: var(--volt); color: var(--on-volt); border-color: transparent; font-family: var(--font-display); font-weight: 800;
  min-height: 48px; box-shadow: var(--gold-glow); transition: background-color .2s var(--ease-out), border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s; }
body:not(.admin) .btn:hover { background: var(--volt); background: color-mix(in srgb, var(--volt) 86%, #FFFFFF); }
body:not(.admin) .btn-volt { background: var(--volt); background-size: auto; color: var(--on-volt); }
body:not(.admin) .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: none; }
body:not(.admin) .btn-ghost:hover { background: transparent; border-color: var(--volt); color: var(--gold-ink); }
body:not(.admin) .btn-danger { background: transparent; color: var(--deal); border-color: var(--deal); border-color: color-mix(in srgb, var(--deal) 55%, transparent); box-shadow: none; }
body:not(.admin) .btn-sm { min-height: 40px; }
body:not(.admin) .buybox > .btn:not(.btn-volt):not(.btn-ghost) { background: var(--volt); color: var(--on-volt); border-color: transparent; }
@media (pointer: coarse) { body:not(.admin) .btn:not(.btn-sm) { min-height: 52px; } }

/* ── الحقول: ٥٠px، زوايا ١٢، إطار شعرة يذهب عند التركيز مع حلقة ناعمة ── */
body:not(.admin) .field input, body:not(.admin) .field select, body:not(.admin) .field textarea {
  min-height: 50px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface));
  color: var(--text); padding-inline: 14px; transition: border-color .2s, box-shadow .2s; }
body:not(.admin) .field textarea { padding-block: 12px; }
body:not(.admin) .field input:focus, body:not(.admin) .field select:focus, body:not(.admin) .field textarea:focus {
  border-color: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 16%, transparent); }
body:not(.admin) .field label { font-weight: 600; font-size: 14px; color: var(--text-2); }

/* ── الأسطح: لوحات بخط شعرة وزوايا ٢٠ — الذهب للتركيز والمرور فقط ── */
body:not(.admin) .panel { border-radius: var(--r-md); border: 1px solid var(--line) !important; background: var(--surface) !important; overflow: hidden; }
body:not(.admin) .panel .ph { border-bottom: 1px solid var(--line); }
.summary { border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 40%, transparent); border-radius: var(--r-md); }

/* ── الهيدر: صف واحد هادئ، أيقونات بلا تسميات، بحث حاضر دائماً ── */
.site-head { border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--on-chrome) 10%, transparent); }
.icon-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--r-sm); }
.icon-btn .cnt { top: 2px; inset-inline-start: 2px; }
.s-btn { background: var(--volt); color: var(--on-volt); }
.s-btn:hover { background: var(--volt); background: color-mix(in srgb, var(--volt) 86%, #FFFFFF); }
.nav-cats { border-top: 0; }
.nav-cats a::after { background: var(--volt); }
.menu-btn { display: none; }
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); border: 0; }
.drawer-panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 380px); overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  background: var(--paper); color: var(--text); border-inline-end: 1px solid var(--line); padding: 12px 18px max(22px, env(safe-area-inset-bottom));
  animation: drawer-in .38s var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(100%); } }
[dir="ltr"] .drawer-panel { animation-name: drawer-in-ltr; }
@keyframes drawer-in-ltr { from { transform: translateX(-100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.drawer-head .icon-btn { color: var(--text); }
.drawer-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); margin-bottom: -8px; }
.drawer-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-cats a { min-height: 52px; display: flex; align-items: center; padding-inline: 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.drawer-cats a.active, .drawer-cats a:hover { border-color: var(--volt); color: var(--gold-ink); }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.drawer-tools { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drawer-tools > * { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: none; color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; }

@media (max-width: 960px) {
  .topbar { display: none; }
  .header-main .container { flex-wrap: wrap; height: auto; row-gap: 10px; padding-block: 10px 12px; }
  .logo img { height: 40px; }
  .searchbox { order: 3; flex: 1 0 100%; max-width: none; }
  .searchbox input { height: 48px; }
  .s-btn { width: 38px; height: 38px; }
  .hide-sm { display: none !important; }
  .menu-btn { display: flex; }
  .nav-cats { display: none; }
  :root { --head-h: 128px; }
}

/* ── بطاقة المنتج: المنتج بطل — إضاءة استوديو، مرور ذهبي، زر إضافة ذهبي صلب ── */
.pcard { border-radius: var(--r-md); border: 1px solid var(--line); transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s var(--ease-out); }
.pcard:hover { border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 45%, transparent); box-shadow: 0 30px 70px -34px var(--volt); box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--volt) 60%, transparent); }
.pcard .imgw { border-radius: calc(var(--r-md) - 6px); }
.pcard .imgw::before { content: ''; position: absolute; inset-inline: 18%; bottom: 8%; height: 9%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(60,45,10,.28), transparent); pointer-events: none; }
.pcard .nm { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; }
.pcard .br { font-size: 12px; }
.pcard .pr { font-family: var(--font-display); font-weight: 900; }
.pcard .add { min-height: 46px; font-family: var(--font-display); font-weight: 800; }
.pcard .add:hover, .pcard:hover .add:not(:disabled) { background: var(--volt); background-size: auto; color: var(--on-volt); border-color: transparent; }
@media (hover: none) { .pcard .add:not(:disabled) { background: var(--volt); color: var(--on-volt); border-color: transparent; } }

/* ── شبكة المنظور (نفس أرضية المرجع): رأس صفحات القوائم والحسابات، خافتة ولا تزاحم النص ── */
.pgrid-band { position: relative; isolation: isolate; }
.pgrid-band::before { content: ''; position: absolute; inset: -40px -30% 0; z-index: -1; pointer-events: none; transform: perspective(520px) rotateX(58deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, transparent 0 1px, transparent 1px 64px),
              repeating-linear-gradient(0deg, transparent 0 1px, transparent 1px 64px);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--volt) 16%, transparent) 0 1px, transparent 1px 64px),
              repeating-linear-gradient(0deg, color-mix(in srgb, var(--volt) 12%, transparent) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(55% 90% at 50% 100%, #000 10%, transparent 72%); mask-image: radial-gradient(55% 90% at 50% 100%, #000 10%, transparent 72%); opacity: .55; }
@media (max-width: 767px) { .pgrid-band::before { opacity: .35; inset-inline: -10%; } }

@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } .pcard, .pcard:hover { transform: none; } }

/* ── بطاقة المنتج على الهاتف: «بطاقة عرض» أفقية بعرض الشاشة — الصورة بطل على جانب، الاسم كاملاً
   والسعر والتوفر وزر الإضافة على الجانب الآخر. بدل عمودين ضيقين يُقصّ فيهما الاسم ويتكدس السعر. ── */
@media (max-width: 560px) {
  .grid4:not(.list), .listing .grid4:not(.list) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid4:not(.list) .pcard { display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-areas: "img info" "img buy"; grid-template-rows: auto 1fr; }
  .grid4:not(.list) .pcard:hover { transform: none; }
  .grid4:not(.list) .pcard .imgw { grid-area: img; margin: 8px; padding: 12px; align-self: stretch; display: flex; align-items: center; }
  .grid4:not(.list) .pcard a > .body { grid-area: info; padding: 14px 4px 0 14px; gap: 4px; }
  .grid4:not(.list) .pcard > .body { grid-area: buy; padding: 6px 4px 12px 14px; gap: 6px; justify-content: flex-end; }
  [dir="ltr"] .grid4:not(.list) .pcard a > .body, [dir="ltr"] .grid4:not(.list) .pcard > .body { padding-inline: 4px 14px; }
  .grid4:not(.list) .pcard .nm { min-height: 0; -webkit-line-clamp: 3; font-size: 15px; }
  .grid4:not(.list) .pcard .sp { display: none; }
  .grid4:not(.list) .pcard .prw { padding-top: 0; }
  .grid4:not(.list) .pcard .pr { font-size: 20px; }
  .grid4:not(.list) .pcard .add { margin-top: 2px; min-height: 44px; padding: 8px; }
  .grid4:not(.list) .pcard :is(.fav-btn, .cmp-btn) { transform: scale(.9); }
}

/* ══ صفحات بعينها — نفس الحمض، تكوين حسب الوظيفة ══ */

/* رؤوس الصفحات: عنوان Cairo ثقيل فوق أرضية المنظور الخافتة (هوية المرجع، بلا مزاحمة المحتوى) */
body:not(.admin) main > h1, .lst-head, .acc-head { position: relative; isolation: isolate; padding-block: 8px 4px; }
body:not(.admin) main > h1::before, .lst-head::before, .acc-head::before { content: ''; position: absolute; inset: -60px -40vw -20px; z-index: -1; pointer-events: none;
  transform: perspective(480px) rotateX(60deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, transparent 0 1px, transparent 1px 64px),
              repeating-linear-gradient(0deg, transparent 0 1px, transparent 1px 64px);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--volt) 15%, transparent) 0 1px, transparent 1px 64px),
              repeating-linear-gradient(0deg, color-mix(in srgb, var(--volt) 11%, transparent) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(40% 100% at 70% 100%, #000, transparent 75%); mask-image: radial-gradient(40% 100% at 70% 100%, #000, transparent 75%); opacity: .5; }
[dir="ltr"] body:not(.admin) main > h1::before { -webkit-mask-image: radial-gradient(40% 100% at 30% 100%, #000, transparent 75%); mask-image: radial-gradient(40% 100% at 30% 100%, #000, transparent 75%); }
@media (max-width: 767px) { body:not(.admin) main > h1::before, .lst-head::before, .acc-head::before { opacity: .3; } }
.empty-state h3 { max-width: 40ch; }

/* التصنيف/البحث (هاتف): أزرار القلب والمقارنة فوق الصورة لا فوق الاسم */
@media (max-width: 560px) {
  .grid4:not(.list) .pcard :is(.fav-btn, .cmp-btn) { inset-inline-end: auto; inset-inline-start: 14px; }
}

/* صفحة المنتج */
.buybox h1 { font-size: clamp(24px, 3vw, 36px); line-height: 1.3; }
.buybox .price { font-family: var(--font-display); font-weight: 900; color: var(--gold-ink); }
.pdp-bar { display: none; }
@media (max-width: 960px) {
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gallery .main-img img { aspect-ratio: 5 / 4; }
  .pdp-bar { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 55; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 96%, transparent); border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--volt) 35%, transparent);
    box-shadow: 0 -18px 40px -24px rgba(0,0,0,.6); }
  .pdp-bar-in { display: flex; align-items: center; gap: 14px; max-width: 620px; margin-inline: auto; }
  .pdp-bar-p { display: flex; flex-direction: column; min-width: 0; }
  .pdp-bar-p b { font-family: var(--font-display); font-weight: 900; font-size: 21px; color: var(--gold-ink); white-space: nowrap; line-height: 1.2; }
  .pdp-bar-p small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
  .pdp-bar-p .dot { width: 7px; height: 7px; border-radius: 50%; }
  .pdp-bar-p .dot.ok { background: var(--ok); } .pdp-bar-p .dot.low { background: var(--warn); } .pdp-bar-p .dot.out { background: var(--deal); }
  .pdp-bar .btn { flex: 1; margin: 0; }
  body:has(.pdp-bar) .site-foot { padding-bottom: 96px; }
}

/* الدخول والتسجيل: الشعار على الأرضية مباشرة كما في المرجع، وزر الوضع رابط هادئ */
.login-box .logo-d { display: none; }
html[data-mode="dark"] .login-box .logo-l { display: none; }
html[data-mode="dark"] .login-box .logo-d { display: block; }
html[data-mode="dark"] .login-box .logo:not([src*="brand-logo"]) { background: none; padding: 0; }
body:not(.admin) .login-box { text-align: start; }
body:not(.admin) .login-box h1, body:not(.admin) .login-box h2 { text-align: center; }
.login-wrap { position: relative; isolation: isolate; }
.login-wrap::before { content: ''; position: absolute; inset: 40% -20% 0; z-index: -1; pointer-events: none; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, transparent 0 1px, transparent 1px 72px),
              repeating-linear-gradient(0deg, transparent 0 1px, transparent 1px 72px);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--volt) 14%, transparent) 0 1px, transparent 1px 72px),
              repeating-linear-gradient(0deg, color-mix(in srgb, var(--volt) 10%, transparent) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(50% 80% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(50% 80% at 50% 0%, #000, transparent 72%); }
.mode-link { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--text-3); font: inherit; font-size: 13.5px; min-height: 44px; padding-inline: 12px; cursor: pointer; }
.mode-link:hover { color: var(--gold-ink); }
.listing-bar h1 { font-size: clamp(26px, 3vw, 36px); }
/* لوحات المحتوى (الطلب، الحساب، الدفع): رأس بعنوان واضح وحشوة ثابتة */
body:not(.admin) .panel .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
body:not(.admin) .panel .ph h2 { font-size: clamp(18px, 2vw, 22px); font-weight: 800; }
body:not(.admin) .panel .pb { padding: 18px 20px; }
/* صفحة المنتج (هاتف): أزرار التواصل العائمة تختفي متى ظهر شريط الشراء — لا شيء يغطّي «اشترِ الآن» */
@media (max-width: 960px) { body:has(.pdp-bar:not([style*="display: none"]))  .fab-dock { opacity: 0; pointer-events: none; } }

/* ══════════════════════════════════════════════════════════════════════════════
   مكوّنات الصفحة المرجعية (projects/alanwar-hero) منقولة كما هي إلى المتجر:
   الهيدر، الهيرو، العرض، الأكثر مبيعاً، ابنِ منزلك، الماركات، لماذا شركة الوليد، الفوتر، بطاقة المنتج.
   القيم (أحجام، زوايا، شفافيات) مطابقة لكلاسات Tailwind في المرجع. --l = لون الخطوط والطبقات (نص الوضع).
   ══════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(/fonts/anton-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
:root { --l: var(--text); --gold: var(--volt); --muted: var(--text-3); --head-h: 64px; --stick-top: 80px; --sec: clamp(64px, 9vw, 128px);
  --font-num: 'Anton', 'Cairo', sans-serif; }
html.hdr-hidden { --head-h: 64px; } html.hdr-hidden .site-head { transform: none; }
.gold { color: var(--gold); }
.lm { color: var(--l); color: color-mix(in srgb, var(--l) 10%, transparent); }

/* ── الهيدر ── */
.site-head.ah { position: sticky; top: 0; z-index: 60; background: var(--paper); background: color-mix(in srgb, var(--paper) 50%, transparent); color: var(--text);
  border-bottom: 1px solid transparent; transition: background-color .5s, border-color .5s, box-shadow .5s; }
.site-head.ah.scrolled, body:not(:has(.hx)) .site-head.ah { background: var(--paper); background: color-mix(in srgb, var(--paper) 96%, transparent); border-bottom-color: var(--line); border-bottom-color: color-mix(in srgb, var(--l) 10%, transparent); }
.site-head.ah.scrolled { box-shadow: 0 10px 40px rgba(0,0,0,.45); }
/* الوضع الفاتح: الشريط أغمق من الصفحة بدرجة (طلب المالك) وصلب بلا شفافية — ما عاد يبيّن النص من تحته.
   التغميق بطبقة ظل فوق لون الصفحة (بلا color-mix) ⇒ بيشتغل حتى عالمتصفحات القديمة ومع كل الحزم. */
html:not([data-mode="dark"]) .site-head.ah,
html:not([data-mode="dark"]) .site-head.ah.scrolled {
  background-color: var(--paper); background-image: linear-gradient(rgba(20, 16, 8, .15), rgba(20, 16, 8, .15));
  border-bottom-color: rgba(20, 16, 8, .18);
}
html:not([data-mode="dark"]) .site-head.ah.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.16); }
html:not([data-mode="dark"]) .site-head.ah .ah-name small { color: var(--text); color: color-mix(in srgb, var(--text) 72%, transparent); }
.ah-row { display: flex; align-items: center; gap: 12px; height: var(--head-h); }
.ah-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--text); }
/* شعار الحصان المعتمد (نفس المعرض): دائرة سودا مع ظل خفيف — بيبان على الفاتح والداكن */
.ah-mark { display: block; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #0B0B0D; object-fit: contain; padding: 1px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transition: transform .5s; }
.scrolled .ah-mark { transform: scale(.88); }
.ah-name { display: flex; flex-direction: column; line-height: 1; }
.ah-name b { font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 18px; }
.ah-name small { margin-top: 4px; font-size: 12px; letter-spacing: .22em; color: var(--muted); white-space: nowrap; }
.ah-nav { display: none; align-items: center; gap: 20px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); color: color-mix(in srgb, var(--text) 75%, transparent); }
.ah-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; transition: color .2s; min-height: 44px; }
.ah-link:hover, .ah-link[aria-expanded="true"] { color: var(--gold); }
.ah-mega-w { position: relative; }
.ah-mega { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 20px;
  border-radius: 16px; background: var(--paper); background: color-mix(in srgb, var(--paper) 98%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.ah-mega a { display: flex; align-items: center; min-height: 56px; padding-inline: 16px; border-radius: 12px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 8%, transparent);
  font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 15px; color: var(--text); transition: border-color .3s, transform .3s var(--ease-out), background-color .3s; }
.ah-mega a:hover { border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 8%, transparent); transform: translateY(-3px); color: var(--gold); }
.ah-search { position: relative; display: none; flex: 1; max-width: 300px; margin-inline: auto; }
.ah-search > svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ah-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 10%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 5%, transparent);
  padding-inline: 40px 16px; color: var(--text); font-size: 13px; transition: border-color .5s, background-color .5s, box-shadow .5s; }
.ah-search input::placeholder { color: var(--muted); color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ah-search input:focus { outline: none; border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 8%, transparent); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent); }
.ah-search:focus-within > svg { color: var(--gold); }
.ah-icons { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; color: var(--text); color: color-mix(in srgb, var(--text) 85%, transparent); }
.ah-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: none; border: 0; color: inherit; cursor: pointer; transition: color .2s, background-color .2s; }
.ah-ic:hover { color: var(--gold); background: transparent; background: color-mix(in srgb, var(--l) 4%, transparent); }
.ah-ic .cnt { position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding-inline: 4px; border-radius: 999px; background: var(--gold); color: #050505; font-size: 11px; font-weight: 700; line-height: 1; }
.ah-lang { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ah-md { display: none; }
.mode-btn .i-sun, .mode-btn.is-dark .i-moon { display: none; }
.mode-btn.is-dark .i-sun { display: contents; } .mode-btn .i-moon { display: contents; }
@media (min-width: 768px) { .ah-search { display: block; } .ah-md { display: grid; } .ah-icons { margin-inline-start: 0; gap: 6px; } }
@media (min-width: 1024px) { .ah-row { gap: 24px; } .ah-nav { display: flex; } .ah-burger { display: none; } .ah-search { max-width: 240px; } }
@media (min-width: 1280px) { .ah-nav { gap: 28px; } .ah-search { max-width: 340px; } }
.drawer-search { position: relative; display: block; }
.drawer-search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.drawer-search input { width: 100%; height: 48px; border-radius: 999px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 10%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 5%, transparent); padding-inline: 44px 16px; color: var(--text); font-size: 16px; }
.drawer-tools { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { :root { --head-h: 64px; } .header-main, .nav-cats { display: none; } }

/* ── أزرار المرجع ── */
.btn-gold, .btn-line { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding-inline: 28px; border-radius: 999px;
  font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.btn-gold { background: var(--gold); color: #050505; border: 0; box-shadow: 0 14px 34px -14px var(--gold); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--gold) 70%, transparent); }
.btn-gold:hover { background: var(--gold); background: color-mix(in srgb, var(--gold) 86%, #fff); }
.btn-line { border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 18%, transparent); color: var(--text); background: none; }
.btn-line:hover { border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); }
.btn-gold:active, .btn-line:active { transform: scale(.98); }
@media (pointer: coarse) { .btn-gold, .btn-line { min-height: 56px; } }

/* ── إضاءة الاستوديو (مرجع StudioArt): سبوت علوي + هالة + ظل أرضي + انعكاس ── */
.studio { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; max-width: 100%; height: 100%; }
/* الانعكاس لرسوم الهيرو فقط (صور المنتجات تحتاج الدمج مع الأرضية، والانعكاس يعزلها) */
.hx-stage .studio { -webkit-box-reflect: below 4px linear-gradient(transparent 58%, rgba(0,0,0,.16)); }
.studio::before { content: ''; position: absolute; inset: -14% -32% 4%; pointer-events: none; z-index: 0;
  background: radial-gradient(56% 58% at 50% 26%, transparent, transparent 68%);
  background: radial-gradient(56% 58% at 50% 26%, color-mix(in srgb, var(--gold) 19%, transparent), transparent 68%); }
.studio::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 70%; height: 32px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent), radial-gradient(closest-side, transparent, transparent 72%);
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent), radial-gradient(closest-side, color-mix(in srgb, var(--gold) 31%, transparent), transparent 72%); }
.studio > svg, .studio > img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.studio-lg > svg, .studio-lg > img { filter: drop-shadow(0 36px 60px rgba(0,0,0,.65)); }
/* صور المنتجات الحقيقية (رسوم خطية بخلفية بيضاء): ليلاً تُقلب لجهاز داكن بخطوط فاتحة (لغة المرجع)، نهاراً تذوب بالأرضية */
html[data-mode="dark"] .pimg[src$=".svg"] { filter: invert(1) hue-rotate(180deg) contrast(1.05); mix-blend-mode: screen; }
html[data-mode="dark"] .studio-lg > .pimg[src$=".svg"] { filter: invert(1) hue-rotate(180deg) contrast(1.05) drop-shadow(0 36px 60px rgba(0,0,0,.65)); }
html:not([data-mode="dark"]) .pimg { mix-blend-mode: multiply; }
html:not([data-mode="dark"]) .studio::after { background: radial-gradient(closest-side, rgba(60,45,10,.28), transparent); }
/* رسوم الأجهزة نهاراً: بيضاء/فضية (نفس قواعد المرجع) */
html:not([data-mode="dark"]) .studio svg [fill='#101014'] { fill: #EEEBE4; } html:not([data-mode="dark"]) .studio svg [fill='#0B0B0E'] { fill: #E3DFD6; }
html:not([data-mode="dark"]) .studio svg [fill='#0E0E12'] { fill: #E8E4DC; } html:not([data-mode="dark"]) .studio svg [fill='#0C0C10'] { fill: #DCD7CD; }
html:not([data-mode="dark"]) .studio svg [fill='#14141A'] { fill: #CFC9BD; } html:not([data-mode="dark"]) .studio svg [fill='#23232B'] { fill: #C4BEB1; }
html:not([data-mode="dark"]) .studio svg [fill='#1B1B22'] { fill: #D0CABE; } html:not([data-mode="dark"]) .studio svg [stroke='#2E2E36'] { stroke: #B9B2A4; }
html:not([data-mode="dark"]) .studio svg [stroke='#23232B'] { stroke: #C7C0B3; } html:not([data-mode="dark"]) .studio svg [stroke='#26262E'] { stroke: #C2BBAE; }
html:not([data-mode="dark"]) .studio svg [stroke='#3A3A44'] { stroke: #A9A294; }
html:not([data-mode="dark"]) :is(.studio-lg > svg, .studio-lg > img) { filter: drop-shadow(0 26px 34px rgba(60,45,10,.16)); }

/* ── شبكة المنظور (مرجع .pgrid) ── */
.pgrid { position: absolute; inset-inline: -40%; bottom: 0; height: 44%; opacity: .7; pointer-events: none; perspective: 520px; perspective-origin: 50% 0%; }
.pgrid::before { content: ''; position: absolute; inset: 0 0 -30% 0; transform: rotateX(62deg); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, transparent 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, transparent 0 1px, transparent 1px 72px);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 16%, transparent) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--gold) 12%, transparent) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(60% 90% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 90% at 50% 0%, #000 20%, transparent 75%); }
@media (max-width: 1023px) { .pgrid { inset-inline: -10%; height: 34%; opacity: .6; }
  .pgrid::before { -webkit-mask-image: radial-gradient(45% 80% at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(45% 80% at 50% 0%, #000 10%, transparent 70%); } }

/* ── الهيرو (مرجع Hero.tsx) ── */
.home { overflow-x: clip; }
.hx { position: relative; display: flex; flex-direction: column; height: calc(100svh - var(--head-h)); min-height: 560px; overflow: hidden; margin-top: 0; }
.hx-wash { position: absolute; inset: 0; pointer-events: none; transition: background .8s;
  background: radial-gradient(1100px 560px at 74% 108%, var(--hx-tint, transparent), transparent 62%), radial-gradient(800px 420px at 12% -8%, transparent, transparent 55%),
    radial-gradient(540px 540px at 70% 10%, transparent, transparent 70%), radial-gradient(420px 420px at 15% 70%, transparent, transparent 70%);
  background: radial-gradient(1100px 560px at 74% 108%, var(--hx-tint, transparent), transparent 62%), radial-gradient(800px 420px at 12% -8%, color-mix(in srgb, var(--l) 4%, transparent), transparent 55%),
    radial-gradient(540px 540px at 70% 10%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%), radial-gradient(420px 420px at 15% 70%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%); }
.hx-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--paper) 100%); }
.hx-grid { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; gap: 12px 48px; padding-top: 24px; text-align: center;
  grid-template-areas: "h1" "sub" "art" "body"; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.hx-title { grid-area: h1; margin: 0; font-family: 'Cairo', var(--font-head) !important; font-weight: 900 !important; font-size: clamp(34px, 5.6vw, 72px) !important; line-height: 1.18 !important; letter-spacing: -.01em; }
.hx-title > span { display: block; }
.hx-sub { grid-area: sub; margin: 0; font-size: 15px; font-weight: 600; color: var(--text); color: color-mix(in srgb, var(--text) 80%, transparent); }
.hx-body { grid-area: body; }
.hx-chip { display: none; align-items: center; gap: 10px; margin-top: 20px; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gold);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--gold) 33%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.hx-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: hxpulse 2s infinite; }
.hx-chip svg { width: 18px; height: 18px; }
@keyframes hxpulse { 50% { opacity: .35; } }
.hx-desc { display: none; margin: 14px 0 0; max-width: 28rem; font-size: 15px; line-height: 2; color: var(--muted); }
.hx-cta { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 12px auto 4px; }
.hx-cta .btn-line { min-height: 46px; }
.hx-art { grid-area: art; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hx-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; max-height: 520px; min-height: 150px; padding-block: 8px; }
.hx-tag { position: absolute; left: -40px; top: 40px; display: none; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; z-index: 2;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 10%, transparent); background: var(--surface); background: color-mix(in srgb, var(--surface) 95%, transparent); }
.hx-tag-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--gold); }
.hx-tag small { display: block; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.hx-tag b { font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 15px; color: var(--gold); }
.hx-rail { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.hx-idx { display: none; align-items: baseline; gap: 6px; font-family: var(--font-num); }
.hx-idx b { font-size: 36px; font-weight: 400; color: var(--gold); } .hx-idx span { font-size: 16px; color: var(--text); color: color-mix(in srgb, var(--text) 30%, transparent); }
.hx-dots { display: flex; gap: 8px; }
.hx-dots button, .hx-arrows button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; transition: all .5s;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 10%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 3%, transparent); color: var(--muted); }
.hx-dots button.on { border-color: var(--gold); background: transparent; background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--gold); transform: translateY(-4px);
  box-shadow: 0 12px 26px transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--gold) 19%, transparent); }
.hx-arrows { display: none; gap: 8px; }
.hx-arrows button { border-radius: 50%; color: var(--text); color: color-mix(in srgb, var(--text) 80%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--l) 12%, transparent); }
.hx-arrows button.on { color: var(--gold); border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.hx-arrows button:hover { border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); }
.hx-bar { position: absolute; bottom: 0; right: 0; height: 3px; width: 100%; transform-origin: right; z-index: 3;
  background: linear-gradient(to left, transparent, var(--gold), transparent); animation: hxbar 8s linear forwards; }
.hx-bar.paused { animation-play-state: paused; }
@keyframes hxbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 640px) { .hx-cta { flex-direction: row; justify-content: center; max-width: none; gap: 10px; } .hx-rail { justify-content: space-between; } .hx-idx, .hx-arrows { display: flex; } }
@media (min-width: 1024px) {
  .hx { min-height: 640px; }
  .hx-grid { padding-top: 0; text-align: start; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". art" "h1 art" "sub art" "body art" ". art"; }
  .hx-sub { margin-top: 8px; font-size: 17px; }
  .hx-chip { display: inline-flex; } .hx-desc { display: block; }
  .hx-cta { justify-content: flex-start; gap: 16px; margin: 32px 0 0; }
  .hx-stage { height: 56vh; padding: 0; } .hx-tag { display: flex; }
  .hx-rail { padding-bottom: 24px; }
}

/* ── العرض (مرجع ProductStory.tsx) ── */
.ox { position: relative; padding-block: var(--sec); overflow: hidden; scroll-margin-top: 80px; }
.ox-floor { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side at 50% 45%, transparent, transparent 55%, transparent 75%),
    radial-gradient(130% 95% at 50% 42%, var(--paper) 0%, var(--paper) 70%);
  background: radial-gradient(closest-side at 50% 45%, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--gold) 5%, transparent) 55%, transparent 75%),
    radial-gradient(130% 95% at 50% 42%, color-mix(in srgb, var(--gold) 6%, var(--paper)) 0%, var(--paper) 70%); }
.ox-grid { position: relative; display: grid; gap: 24px; align-items: center; }
.ox-text { order: 2; text-align: center; }
.ox-art { order: 1; position: relative; display: flex; justify-content: center; height: min(30vh, 240px); }
.ox-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--gold);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ox-title { margin: 20px 0 0; font-size: clamp(28px, 3.6vw, 44px) !important; line-height: 1.25; }
.ox-sub { margin: 12px auto 0; max-width: 28rem; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.85; color: var(--muted); }
.ox-cd { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.ox-cd div { min-width: 64px; padding: 10px 12px; border-radius: 16px; text-align: center; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 10%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 4%, transparent); }
.ox-cd b { display: block; font-family: var(--font-num); font-weight: 400; font-size: 26px; color: var(--gold); font-variant-numeric: tabular-nums; }
.ox-cd span { font-size: 12px; color: var(--muted); }
.ox-buy { display: flex; flex-direction: column-reverse; align-items: center; gap: 16px; margin-top: 24px; }
.ox-buy .btn-gold { width: 100%; }
.ox-price { font-family: 'Cairo', var(--font-head); font-weight: 900; font-size: 20px; } .ox-price b { color: var(--gold); }
.ox-price small { font-size: 12px; font-weight: 400; color: var(--muted); } .ox-price s { margin-inline-start: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.ox-now { margin-top: 12px; min-height: 46px; padding-inline: 24px; border-radius: 999px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 18%, transparent); background: none; color: var(--text);
  font-family: 'Cairo', var(--font-head); font-weight: 800; cursor: pointer; }
.ox-off { position: absolute; right: 8px; top: 8px; padding: 8px 16px; border-radius: 16px; text-align: center; z-index: 2;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: var(--surface); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.ox-off b { display: block; font-family: var(--font-num); font-weight: 400; font-size: 22px; line-height: 1; color: var(--gold); } .ox-off small { font-size: 12px; color: var(--muted); }
.ox-side { position: relative; display: grid; gap: 12px; margin-top: 40px; }
.ox-tile { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; color: var(--text); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 8%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 3%, transparent); transition: border-color .3s; }
.ox-tile:hover { border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.ox-tile .studio { width: 72px; height: 72px; flex: none; -webkit-box-reflect: none; } .ox-tile .studio::after { display: none; }
.ox-tile b { display: block; font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 15px; } .ox-tile small { font-size: 13px; color: var(--muted); }
@media (min-width: 640px) { .ox-buy { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; } .ox-buy .btn-gold { width: auto; } .ox-art { height: 300px; } .ox-side { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ox-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .ox-text { order: 1; text-align: start; } .ox-art { order: 2; height: 46vh; } .ox-off { right: -16px; }
  .ox-sub { margin-inline: 0; } .ox-cd, .ox-buy { justify-content: flex-start; } .ox-title { font-size: clamp(36px, 4.4vw, 56px) !important; } .ox-side { grid-template-columns: repeat(3, 1fr); } }

/* ── رؤوس الأقسام ── */
.sx { padding-block: var(--sec); scroll-margin-top: 80px; }
.sx-head { margin-bottom: 32px; }
.sx-center { text-align: center; }
.t-h2 { margin: 0; font-family: 'Cairo', var(--font-head) !important; font-weight: 900 !important; font-size: clamp(28px, 3.6vw, 44px) !important; line-height: 1.25; }
.t-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.sx-center .t-sub { margin: 12px auto 0; max-width: 32rem; font-size: clamp(14px, 1.3vw, 16px); line-height: 2; }
.only-touch { display: inline; }
@media (min-width: 1024px) { .only-touch { display: none; } .sx-head { margin-bottom: 40px; } }

/* ── بطاقة المنتج المرجعية (FeaturedCard / CompactCard) ── */
.rc { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 28px; background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 9%, transparent); transition: transform .5s var(--ease-out), border-color .5s, box-shadow .5s; }
.rc:hover { transform: translateY(-6px); border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 30%, transparent); box-shadow: 0 30px 80px -28px transparent; box-shadow: 0 30px 80px -28px color-mix(in srgb, var(--gold) 40%, transparent); }
.rc .fav-btn { top: 16px; inset-inline-end: 16px; }
.rc-art { flex: none; display: grid; place-items: center; padding: 24px; background: radial-gradient(85% 65% at 50% 80%, transparent, transparent), var(--paper); background: radial-gradient(85% 65% at 50% 80%, color-mix(in srgb, var(--gold) 8%, transparent), transparent), color-mix(in srgb, var(--paper) 55%, var(--surface)); }
.rc-art .studio { height: 210px; }
.rc-art .studio > * { transition: transform .7s var(--ease-out); }
.rc:hover .rc-art .studio > * { transform: translateY(-6px) scale(1.03); }
@media (min-width: 640px) { .rc-art .studio { height: 240px; } }
.rc-body { padding: 20px 24px 24px; }
.rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rc-brand { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rc-sold { font-size: 12px; font-weight: 700; color: var(--gold); }
.rc-name { margin: 0; font-family: 'Cairo', var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.7; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.rc-price { font-family: 'Cairo', var(--font-head); font-weight: 900; font-size: 22px; white-space: nowrap; } .rc-price b { color: var(--gold); }
.rc-price small { font-size: 12px; font-weight: 400; color: var(--muted); } .rc-price s { display: block; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1; }
.rc-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 16px; border-radius: 12px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 12%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 4%, transparent); color: var(--text);
  font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 13px; transition: background-color .3s, color .3s, border-color .3s; }
.rc-add:hover:not(:disabled) { background: var(--gold); color: #050505; border-color: transparent; }
.rc-add:disabled { opacity: .45; cursor: not-allowed; }
.rc-wrap { position: relative; height: 100%; }
.rc-badge { position: absolute; right: 16px; top: 16px; z-index: 3; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--gold);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 10%, transparent); }
/* الأكثر مبيعاً: الهاتف/التابلت سكة بطاقات كبيرة؛ الديسكتوب بطل + ٣ مدمجات */
.bx { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
.bx::-webkit-scrollbar { display: none; }
.bx-item { flex: none; width: min(82vw, 360px); scroll-snap-align: start; }
@media (min-width: 640px) { .bx-item { width: 340px; } }
@media (min-width: 1024px) {
  .bx { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .bx-item { width: auto; grid-column: span 3; } .bx-item.lead { grid-row: span 3; }
  .rc-sm { flex-direction: row; align-items: center; gap: 16px; padding: 16px; border-radius: 24px; }
  .rc-sm .rc-art { flex: none; width: 96px; height: 112px; padding: 12px; border-radius: 16px; }
  .rc-sm .rc-art .studio { height: 88px; -webkit-box-reflect: none; } .rc-sm .rc-art .studio::after { display: none; }
  .rc-sm .rc-body { flex: 1; min-width: 0; padding: 0; }
  .rc-sm .rc-name { font-size: 14px; -webkit-line-clamp: 1; }
  .rc-sm .rc-price { font-size: 17px; } .rc-sm .rc-foot { margin-top: 10px; }
  .rc-sm .fav-btn { top: 10px; inset-inline-end: 10px; transform: scale(.85); }
  .bx-item.lead .rc-art { flex: 1; } .bx-item.lead .rc-art .studio { height: 300px; }
}

/* ── ابنِ منزلك (مرجع SmartHomeConfigurator.tsx) ── */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; }
.room { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 12px;
  border-radius: 20px; text-align: center; cursor: pointer; color: var(--text); font: inherit; transition: all .5s var(--ease-out);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 9%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 3.5%, transparent); }
.room.on { border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: linear-gradient(160deg, transparent, transparent 55%); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, transparent), color-mix(in srgb, var(--l) 3%, transparent) 55%);
  box-shadow: 0 24px 60px -22px transparent;
  box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--gold) 40%, transparent); }
.room-top { display: flex; align-items: center; justify-content: space-between; width: 100%; justify-content: center; }
.room-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 16px; color: var(--gold); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.room-n { display: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 12%, transparent); }
.room.on .room-n { color: var(--gold); border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 31%, transparent); }
.room b { font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 14px; line-height: 1.3; }
.room small { display: none; font-size: 13px; line-height: 1.7; color: var(--muted); }
.room i { position: absolute; bottom: 0; right: 0; height: 2.5px; width: 100%; transform-origin: right; transform: scaleX(0); transition: transform .7s var(--ease-out); background: linear-gradient(to left, var(--gold), transparent); }
.room.on i { transform: scaleX(1); }
.sx-stage { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 16px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 8px; }
.sx-stage::-webkit-scrollbar { display: none; }
.st-item { flex: none; width: min(72vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; padding: 20px; border-radius: 20px; text-align: center;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 8%, transparent); background: var(--surface); background: color-mix(in srgb, var(--surface) 80%, transparent); transition: border-color .5s; }
.st-item:hover { border-color: var(--line); border-color: color-mix(in srgb, var(--l) 18%, transparent); }
.st-art { display: grid; place-items: center; width: 100%; height: 144px; }
/* ارتفاع صريح: النسبة المئوية داخل خلية grid ما بتنحسب بالمتصفحات القديمة ⇒ الصورة كانت تطلع بحجمها الكامل فوق النص */
.st-art .studio { height: 144px; -webkit-box-reflect: none; }
.st-item h3 { margin: 16px 0 0; font-family: 'Cairo', var(--font-head); font-weight: 700; font-size: 14.5px; line-height: 1.6; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-price { margin-top: 6px; font-family: 'Cairo', var(--font-head); font-weight: 900; font-size: 18px; } .st-price b { color: var(--gold); } .st-price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.st-item .rc-add { margin-top: 16px; border-radius: 999px; }
.st-empty { padding: 32px; text-align: center; width: 100%; }
@media (min-width: 640px) {
  .rooms { gap: 16px; margin-top: 48px; }
  .room { display: block; min-height: 0; padding: 24px; border-radius: 24px; text-align: start; } .room.on { transform: translateY(-6px); }
  .room-top { justify-content: space-between; } .room-ic { width: 48px; height: 48px; } .room-n { display: inline; }
  .room b { display: block; margin-top: 20px; font-size: 19px; } .room small { display: block; margin-top: 4px; }
  .sx-stage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; overflow: visible; margin: 24px 0 0; padding: 24px; border-radius: 32px;
    border: 1px solid var(--line);
    border: 1px solid color-mix(in srgb, var(--l) 8%, transparent); background: radial-gradient(80% 120% at 50% 0%, transparent, transparent 60%), transparent; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 60%), color-mix(in srgb, var(--l) 2.5%, transparent); }
  .st-item { width: auto; padding: 24px; border-radius: 24px; }
}
@media (min-width: 768px) { .sx-stage { padding: 40px; } .st-art, .st-art .studio { height: 176px; } }
@media (min-width: 1024px) { .sx-stage { grid-template-columns: repeat(3, 1fr); } }

/* ── الماركات (مرجع BrandMarquee.tsx) ── */
.mq { padding-block: 36px; border-block: 1px solid var(--line); border-block: 1px solid color-mix(in srgb, var(--l) 8%, transparent); background: var(--paper); scroll-margin-top: 80px; }
.mq-label { margin: 0 0 16px; text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.mq-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 90s linear infinite; }
.mq-logo { padding-inline: 28px; white-space: nowrap; font-family: var(--font-num); font-size: 26px; letter-spacing: .12em; color: var(--text); opacity: .55; transition: color .3s, opacity .3s; }
.mq-logo:hover { color: var(--gold); opacity: 1; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: mq 135s linear infinite !important; } }

/* ── لماذا شركة الوليد (مرجع Trust.tsx) ── */
.trust { display: grid; gap: 12px; }
.tr { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 8%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 3%, transparent); transition: border-color .5s; }
.tr:hover { border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 25%, transparent); }
.tr-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--gold); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); background: transparent; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.tr b { display: block; margin-bottom: 4px; font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 17px; }
.tr p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); gap: 16px; } .tr { display: block; padding: 28px; border-radius: 24px; } .tr-ic { margin-bottom: 20px; } .tr b { margin-bottom: 8px; } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, 1fr); } }

/* ── الفوتر (ص92) — Mobile First: هوية + تواصل، ثم ٣ مجموعات روابط (أكورديون على الهاتف، أعمدة من 641px)، ثم شريط سفلي.
   الألوان من توكنات الحزمة فقط (فاتح/داكن). `.site-foot.af` تتجاوز قواعد `.site-foot` القديمة العامة. ── */
.site-foot.af { --af-line: color-mix(in srgb, var(--line) 70%, transparent);
  margin-top: 0; padding: 18px 0 max(10px, env(safe-area-inset-bottom)); background: var(--paper); color: var(--text);
  border-top: 1px solid var(--af-line); font-size: 14px; line-height: 1.5; }
.site-foot.af a { display: inline-flex; align-items: center; padding: 0; font-size: inherit; color: inherit; text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.site-foot.af a:hover { color: var(--gold-ink); }
.site-foot.af :is(a, summary, button):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.site-foot.af ul { list-style: none; margin: 0; padding: 0; }
.site-foot.af li:has(> [hidden]) { display: none; }
.site-foot.af .af-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

/* الهوية: الشعار والاسم والسطر بصف، والموقع بطرفه */
.site-foot.af .af-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; }
.site-foot.af .af-logo { gap: 12px; min-width: 0; color: var(--text); }
.site-foot.af .af-logo img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #0B0B0D; object-fit: contain; padding: 1px; }
.site-foot.af .af-logo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.site-foot.af .af-logo b { font-family: var(--font-head); font-size: 16px; font-weight: 800; }
.site-foot.af .af-logo small { font-size: 13px; color: var(--text-2); }
.site-foot.af .af-loc { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; color: var(--text-2); }
.site-foot.af .af-loc svg { color: var(--gold); flex-shrink: 0; }

/* التواصل: أزرار لمس 44px — الهاتف بعرض كامل، واتساب وفيسبوك جنب بعض */
.site-foot.af .af-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-foot.af .af-contact .af-c-tel { grid-column: 1 / -1; }
.site-foot.af .af-contact a { justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--af-line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; color: var(--text); }
.site-foot.af .af-contact a:hover { border-color: var(--gold); color: var(--text); }
.site-foot.af .af-contact a[hidden] { display: none; }
.site-foot.af .af-contact svg { color: var(--gold); flex-shrink: 0; }
.site-foot.af .af-contact bdi { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* مجموعات الروابط: أكورديون بفواصل خفيفة على الهاتف */
.site-foot.af .af-grp:first-of-type { margin-top: 16px; }
.site-foot.af .af-grp { border-top: 1px solid var(--af-line); }
.site-foot.af .af-grp:last-of-type { border-bottom: 1px solid var(--af-line); }
.site-foot.af .af-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: 0; list-style: none; cursor: pointer;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--text); -webkit-tap-highlight-color: transparent; }
.site-foot.af .af-h::-webkit-details-marker { display: none; }
.site-foot.af .af-chev { color: var(--text-3); flex-shrink: 0; transition: transform .25s var(--ease); }
.site-foot.af .af-acc[open] .af-chev { transform: rotate(180deg); }
.site-foot.af .af-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-bottom: 8px; }
.site-foot.af .af-links a, .site-foot.af .ft-guide { width: 100%; min-height: 44px; color: var(--text-2); text-align: start; }
.site-foot.af .ft-guide:hover { color: var(--gold-ink); }

/* الشريط السفلي: الحقوق، حقوق الصور، ولوحة الإدارة (للموظف فقط) — بعيد عن الأزرار العائمة */
.site-foot.af .af-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding-top: 6px; padding-inline-end: 64px; font-size: 12.5px; color: var(--text-3); }
.site-foot.af .af-copy { flex-basis: 100%; margin: 0; padding-top: 8px; }
.site-foot.af .af-bottom a { min-height: 44px; color: var(--text-3); }
.site-foot.af .af-bottom a:hover { color: var(--gold-ink); }
.site-foot.af .af-bottom a[hidden] { display: none; }

/* تابلت: الهوية والتواصل بصف واحد، والمجموعات ٣ أعمدة مفتوحة دائماً */
@media (min-width: 641px) {
  .site-foot.af { padding-top: 32px; }
  .site-foot.af .af-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .site-foot.af .af-id { grid-column: 1 / -1; gap: 16px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--af-line); }
  .site-foot.af .af-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-foot.af .af-contact .af-c-tel { grid-column: auto; }
  .site-foot.af .af-grp, .site-foot.af .af-grp:first-of-type, .site-foot.af .af-grp:last-of-type { margin-top: 0; padding-top: 20px; border: 0; }
  .site-foot.af .af-h { min-height: 0; margin-bottom: 8px; cursor: default; pointer-events: none; font-size: 13.5px; color: var(--text); }
  .site-foot.af .af-chev { display: none; }
  .site-foot.af .af-links { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .site-foot.af .af-links a, .site-foot.af .ft-guide { width: auto; min-height: 36px; }
  .site-foot.af .af-bottom { margin-top: 20px; padding-top: 4px; padding-inline-end: 84px; border-top: 1px solid var(--af-line); }
  .site-foot.af .af-copy { flex: 1 1 auto; flex-basis: auto; padding-top: 0; }
  .site-foot.af .af-bottom a { min-height: 40px; }
}

/* كمبيوتر: عمود الهوية والتواصل + ٣ أعمدة روابط */
@media (min-width: 961px) {
  .site-foot.af { padding-top: 40px; }
  .site-foot.af .af-grid { grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .site-foot.af .af-id { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding-bottom: 0; border: 0; }
  .site-foot.af .af-logo img { width: 48px; height: 48px; }
  .site-foot.af .af-logo b { font-size: 17px; }
  .site-foot.af .af-loc { order: 3; }
  /* عمود ضيق ⇒ التواصل أسطر بأيقونات بدل أزرار */
  .site-foot.af .af-contact { order: 2; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-foot.af .af-contact a { justify-content: flex-start; width: auto; min-height: 36px; padding: 0; border: 0; background: none; }
  .site-foot.af .af-contact a:hover { color: var(--gold-ink); }
  .site-foot.af .af-grp, .site-foot.af .af-grp:first-of-type, .site-foot.af .af-grp:last-of-type { padding-top: 6px; }
  .site-foot.af .af-bottom { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .site-foot.af .af-chev, .site-foot.af a { transition: none; } }
/* صفحات الدفع والحساب: بلا فوتر (التركيز على المهمة) */
body[data-nofoot] .site-foot { display: none; }
body:has(.pdp-bar) .site-foot.af { padding-bottom: 110px; }

/* صور المنتجات الحقيقية: بلا انعكاس/عزل حتى يعمل دمج screen مع الأرضية (وإلا تظهر مربعاً أسود) */

/* ── نفس لغة البطاقة والصورة في باقي الصفحات (القوائم، المنتج، السلة، البحث) ── */
.pcard { border-radius: 28px; background: var(--surface); border-color: var(--line); border-color: color-mix(in srgb, var(--l) 9%, transparent); }
.pcard:hover { transform: translateY(-6px); border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 30%, transparent); box-shadow: 0 30px 80px -28px transparent; box-shadow: 0 30px 80px -28px color-mix(in srgb, var(--gold) 40%, transparent); }
.pcard .imgw, .gallery .main-img, .thumb-well { background: radial-gradient(85% 65% at 50% 80%, transparent, transparent), var(--paper); background: radial-gradient(85% 65% at 50% 80%, color-mix(in srgb, var(--gold) 9%, transparent), transparent), color-mix(in srgb, var(--paper) 55%, var(--surface)); }
.pcard .imgw { border-radius: 20px; margin: 8px 8px 0; }
.pcard .imgw::after { display: none; }
.gallery .main-img::before { border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 16%, transparent); }
.pcard .br { color: var(--muted); letter-spacing: .16em; }
.pcard .nm { font-family: 'Cairo', var(--font-head); font-weight: 700; }
.pcard .pr, .buybox .price { font-family: 'Cairo', var(--font-head); font-weight: 900; color: var(--gold); }
.pcard .add { border-radius: 12px; border-color: var(--line); border-color: color-mix(in srgb, var(--l) 12%, transparent); background: transparent; background: color-mix(in srgb, var(--l) 4%, transparent); color: var(--text); }
.pcard .add:hover:not(:disabled), .pcard:hover .add:not(:disabled) { background: var(--gold); color: #050505; border-color: transparent; }
@media (hover: none) { .pcard .add:not(:disabled) { background: transparent; background: color-mix(in srgb, var(--l) 4%, transparent); color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--l) 12%, transparent); } }
html[data-mode="dark"] :is(.pcard .imgw, .gallery, .thumb-well, .summary, .qc-items, .search-pop, .t-cards, .cart-item) img[src$=".svg"] { filter: invert(1) hue-rotate(180deg) contrast(1.05); mix-blend-mode: screen; background: none; }
html[data-mode="dark"] :is(.qc-thumbs img, .search-pop img) { background: #0c0c0e; }
.fav-btn.on { background: var(--gold); color: #050505; border-color: transparent; }
html[data-mode="dark"] .thumb-well { isolation: auto; }

.drawer-label { margin-bottom: 8px !important; }

/* ══ لوحات الألوان البديلة للمعاينة (?palette=copper|platinum|emerald|sapphire، يضبطها mode-boot.js) ══
   تعيد تعريف توكِنات الحزمة للوضعين فقط؛ بلا data-palette تبقى هوية الحزمة/اللوحة كما هي.
   الأولوية (0,2,1) تغلب :root وhtml[data-mode=dark] في /api/brand.css مهما كان ترتيب التحميل. */
html[data-palette='copper'][data-mode='dark'] { --paper:#090605; --surface:#120D0B; --stripe:#18110E; --text:#F7EEE5; --text-2:#CDBFB3; --text-3:#B4A69A; --line:#3F3530; --edge:#7A6152; --ink:#F7EEE5; --on-ink:#090605; --chrome:#090605; --on-chrome:#F7EEE5; --volt:#D08456; --on-volt:#090605; }
html[data-palette='copper']:not([data-mode='dark']) { --paper:#F8F2EC; --surface:#FFFFFF; --stripe:#F0E6DC; --text:#20140E; --text-2:#4E3F35; --text-3:#6A584B; --line:#D6C6B8; --edge:#20140E; --ink:#20140E; --on-ink:#F8F2EC; --chrome:#120B08; --on-chrome:#F7EEE5; --volt:#AA5C2E; --on-volt:#FFFFFF; }
html[data-palette='platinum'][data-mode='dark'] { --paper:#07080A; --surface:#0E1013; --stripe:#13161A; --text:#EEF1F6; --text-2:#C3C9D2; --text-3:#A3ACBA; --line:#363B43; --edge:#6A7380; --ink:#EEF1F6; --on-ink:#07080A; --chrome:#07080A; --on-chrome:#EEF1F6; --volt:#C8D0DC; --on-volt:#07080A; }
html[data-palette='platinum']:not([data-mode='dark']) { --paper:#F1F3F6; --surface:#FFFFFF; --stripe:#E6EAF0; --text:#10141C; --text-2:#3F4652; --text-3:#5A6270; --line:#C7CDD6; --edge:#10141C; --ink:#10141C; --on-ink:#F1F3F6; --chrome:#0B0D11; --on-chrome:#EEF1F6; --volt:#343E50; --on-volt:#FFFFFF; }
html[data-palette='emerald'][data-mode='dark'] { --paper:#040907; --surface:#0A120F; --stripe:#0F1814; --text:#ECF4EF; --text-2:#C0D0C7; --text-3:#9CB0A6; --line:#2F3B35; --edge:#5E7A6C; --ink:#ECF4EF; --on-ink:#040907; --chrome:#040907; --on-chrome:#ECF4EF; --volt:#40C48C; --on-volt:#04100B; }
html[data-palette='emerald']:not([data-mode='dark']) { --paper:#F0F5F1; --surface:#FFFFFF; --stripe:#E3ECE6; --text:#0E1A14; --text-2:#3A4A42; --text-3:#52665C; --line:#C3D3C9; --edge:#0E1A14; --ink:#0E1A14; --on-ink:#F0F5F1; --chrome:#07110C; --on-chrome:#ECF4EF; --volt:#107650; --on-volt:#FFFFFF; }
html[data-palette='sapphire'][data-mode='dark'] { --paper:#05070E; --surface:#0B0E1A; --stripe:#101428; --text:#ECF0FA; --text-2:#C2CAE0; --text-3:#9CA6BE; --line:#30364A; --edge:#5D6886; --ink:#ECF0FA; --on-ink:#05070E; --chrome:#05070E; --on-chrome:#ECF0FA; --volt:#3A6AE0; --on-volt:#FFFFFF; }
html[data-palette='sapphire']:not([data-mode='dark']) { --paper:#F1F4FB; --surface:#FFFFFF; --stripe:#E4EAF6; --text:#0E1426; --text-2:#3C465E; --text-3:#505A74; --line:#C4CDE0; --edge:#0E1426; --ink:#0E1426; --on-ink:#F1F4FB; --chrome:#080B16; --on-chrome:#ECF0FA; --volt:#2856C4; --on-volt:#FFFFFF; }

/* ── عملة العرض (ليرة ↔ دولار) ── */
.ah-cur { font-size: 13px; font-weight: 800; min-width: 44px; font-variant-numeric: tabular-nums; }
.price-alt { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.usd-note { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-top: 2px; }

/* ══ محفظتي (/wallet) — كل الكلاسات .wl-* خاصة بهالصفحة فقط ══
   الترتيب: العنوان ← بطاقة الرصيد ← «شحن المحفظة» ← إجراءات ثانوية ← لوحة الإجراء المفتوح ← الحركات */
.wl { max-width: 640px; padding-block: 20px 112px; }
.wl-head h1 { margin: 0 0 4px; font-size: clamp(26px, 6.4vw, 34px); line-height: 1.25; }
.wl-sub { margin: 0; max-width: 46ch; color: var(--text-2); font-size: 14.5px; line-height: 1.75; }
.wl-muted { color: var(--text-3); font-size: 14px; line-height: 1.75; margin: 0; }
.wl-body { display: flex; flex-direction: column; }
.wl-alert { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface); background: color-mix(in srgb, var(--deal) 8%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 45%, transparent); color: var(--deal); font-size: 14px; }
.wl bdi[dir="ltr"], .wl [dir="ltr"] { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* بطاقة الرصيد = بطاقة معدنية سودا بلمسة ذهب (بالوضعين — غرض بإيدك متل بطاقة بنك): لمعة قطرية، حافة ذهبية،
   الرصيد أكبر رقم بالصفحة، والإجراءات دوائر سريعة بأسفلها بدل زر عريض */
.wl-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 20px 20px 18px; border-radius: 24px;
  color: #F3EEE3; border: 1px solid rgba(214, 181, 102, .32);
  background: radial-gradient(120% 90% at 100% 0%, rgba(214, 181, 102, .26), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(214, 181, 102, .1), transparent 60%), linear-gradient(155deg, #26252A 0%, #141417 55%, #0C0C0E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 200, .16), 0 2px 4px rgba(0, 0, 0, .12), 0 26px 48px -26px rgba(40, 30, 10, .75); }
/* لمعة قطرية خفيفة بتمرّ مرة عند الفتح */
.wl-card::before { content: ''; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 205, .09) 48%, rgba(255, 240, 205, .02) 54%, transparent 60%);
  transform: translateX(-30%); animation: wl-sheen 2.4s cubic-bezier(.2, .7, .2, 1) .3s both; }
@keyframes wl-sheen { from { transform: translateX(-45%); } to { transform: translateX(35%); } }
/* خطوط ناعمة بزاوية (نقش بطاقة) */
.wl-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 9px); -webkit-mask: linear-gradient(200deg, #000, transparent 70%); mask: linear-gradient(200deg, #000, transparent 70%); }
.wl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-card-l { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; color: rgba(243, 238, 227, .72); }
.wl-card-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #111; background: var(--gold-metal); box-shadow: 0 8px 18px -10px rgba(214, 181, 102, .9); }
.wl-card-v { align-self: flex-start; margin-top: 4px; font-family: var(--font-head); font-weight: 800; font-size: clamp(42px, 13vw, 56px); line-height: 1.05; letter-spacing: -.015em; color: #FFF8EA;
  text-shadow: 0 2px 14px rgba(214, 181, 102, .18); }
.wl-card-s { font-size: 13.5px; color: rgba(243, 238, 227, .66); }
.wl-card-s bdi { font-weight: 700; color: #F3EEE3; }
.wl-card-old { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 10px; padding: 12px 0 0; border: 0; border-top: 1px dashed rgba(214, 181, 102, .35); font: inherit; font-size: 13px; color: rgba(243, 238, 227, .66); background: none; text-align: start; cursor: pointer; min-height: 44px; }
/* ص94: مبدّل العملة بالبطاقة — حبّة بخانتين (ل.س | $) متل زر عملة الأسعار */
.wl-cursw { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 248, 234, .08); border: 1px solid rgba(214, 181, 102, .3); }
.wl-cursw button { min-width: 52px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(243, 238, 227, .72); font: 800 15px var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.wl-cursw button.on { color: #111; background: var(--gold-metal); box-shadow: 0 6px 14px -8px rgba(214, 181, 102, .9); }
.wl-cursw button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
html:not([data-mode="dark"]) .wl-cursw { background: rgba(26, 23, 18, .05); border-color: rgba(160, 120, 40, .35); }
html:not([data-mode="dark"]) .wl-cursw button { color: rgba(26, 23, 18, .7); }
html:not([data-mode="dark"]) .wl-cursw button.on { color: #111; }
.wl-seg-sym { font-weight: 800; color: var(--gold-ink); }
.wl-seg { margin-bottom: 4px; }
.wl-card-old b { font-size: 15px; color: #F3EEE3; }
/* الإجراءات السريعة */
.wl-qa { display: flex; justify-content: flex-start; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(214, 181, 102, .18); }
.wl-qa-b { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; padding: 4px 6px; border: 0; border-radius: 16px; background: none; color: rgba(243, 238, 227, .82);
  font: 700 12.5px/1.3 var(--font-body); cursor: pointer; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.wl-qa-c { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #F3EEE3;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), background .25s, border-color .25s, box-shadow .3s; }
.wl-qa-c i { position: absolute; top: 2px; inset-inline-end: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--deal, #B3321F); border: 2px solid #141417; }
.wl-qa-b.main .wl-qa-c { width: 56px; height: 56px; margin-top: -2px; color: #111; background: var(--gold-metal); border-color: transparent;
  box-shadow: 0 0 0 4px rgba(214, 181, 102, .14), 0 12px 24px -12px rgba(214, 181, 102, .95); }
.wl-qa-b.main { color: #F3E3B5; }
.wl-qa-b:hover .wl-qa-c { transform: translateY(-2px); border-color: rgba(214, 181, 102, .55); }
.wl-qa-b:active .wl-qa-c { transform: scale(.94); }
.wl-qa-b.on .wl-qa-c { border-color: #D6B566; background: rgba(214, 181, 102, .16); }
.wl-qa-b.main.on .wl-qa-c { background: var(--gold-metal); box-shadow: 0 0 0 4px rgba(214, 181, 102, .32), 0 12px 24px -12px rgba(214, 181, 102, .95); }
.wl-qa-b.on .wl-qa-t { color: #F3E3B5; }
.wl-qa-b:focus-visible { outline: none; } .wl-qa-b:focus-visible .wl-qa-c { outline: 2px solid #E9CF86; outline-offset: 3px; }
/* الوضع النهاري: نفس البطاقة بس «شامبانيا» — عاجي دافي لذهبي فاتح، حبر غامق، ذهب أغمق للنص، ظل بني ناعم */
html:not([data-mode="dark"]) .wl-card { color: #1A1712; border-color: rgba(184, 146, 60, .42);
  background: radial-gradient(120% 90% at 100% 0%, rgba(214, 181, 102, .38), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(214, 181, 102, .18), transparent 60%), linear-gradient(155deg, #FFFDF7 0%, #F7EFDD 55%, #EEDFBD 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(70, 52, 20, .06), 0 24px 44px -26px rgba(120, 88, 26, .55); }
html:not([data-mode="dark"]) .wl-card::before { background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .15) 54%, transparent 60%); }
html:not([data-mode="dark"]) .wl-card::after { background: repeating-linear-gradient(135deg, rgba(120, 88, 26, .05) 0 1px, transparent 1px 9px); }
html:not([data-mode="dark"]) .wl-card-l { color: rgba(26, 23, 18, .66); }
html:not([data-mode="dark"]) .wl-card-v { color: #1A1712; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
html:not([data-mode="dark"]) .wl-card-s, html:not([data-mode="dark"]) .wl-card-old { color: rgba(26, 23, 18, .64); }
html:not([data-mode="dark"]) :is(.wl-card-s bdi, .wl-card-old b) { color: #1A1712; }
html:not([data-mode="dark"]) .wl-card-old { border-top-color: rgba(160, 120, 40, .4); }
html:not([data-mode="dark"]) .wl-qa { border-top-color: rgba(160, 120, 40, .22); }
html:not([data-mode="dark"]) .wl-qa-b { color: rgba(26, 23, 18, .78); }
html:not([data-mode="dark"]) .wl-qa-c { color: #1A1712; background: rgba(255, 255, 255, .72); border-color: rgba(160, 120, 40, .28); box-shadow: 0 6px 14px -10px rgba(70, 52, 20, .45); }
html:not([data-mode="dark"]) .wl-qa-c i { border-color: #FBF5E8; }
html:not([data-mode="dark"]) .wl-qa-b.main { color: #7A5C16; }
html:not([data-mode="dark"]) .wl-qa-b.main .wl-qa-c { box-shadow: 0 0 0 4px rgba(214, 181, 102, .22), 0 12px 22px -12px rgba(150, 110, 30, .8); }
html:not([data-mode="dark"]) .wl-qa-b:hover .wl-qa-c { border-color: rgba(184, 146, 60, .7); }
html:not([data-mode="dark"]) .wl-qa-b.on .wl-qa-c { border-color: #B8923C; background: rgba(214, 181, 102, .22); }
html:not([data-mode="dark"]) .wl-qa-b.main.on .wl-qa-c { background: var(--gold-metal); }
html:not([data-mode="dark"]) .wl-qa-b.on .wl-qa-t { color: #7A5C16; }
html:not([data-mode="dark"]) .wl-qa-b:focus-visible .wl-qa-c { outline-color: #8A6A1F; }
@media (prefers-reduced-motion: reduce) { .wl-card::before { animation: none; opacity: 0; } .wl-qa-c { transition: none; } }

/* حالة طلب الشحن */
.wl-pend, .wl-done { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.wl-pend { background: var(--surface); background: color-mix(in srgb, var(--volt) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 38%, transparent); }
.wl-pend > i { flex-shrink: 0; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--volt); animation: wa-blink 1.4s ease-in-out infinite; }
@keyframes wa-blink { 50% { opacity: .35; } }
.wl-pend div { display: flex; flex-direction: column; gap: 2px; } .wl-pend small { color: var(--text-2); font-size: 13px; }
.wl-done { align-items: center; background: var(--surface); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); font-weight: 700; }
.wl-done svg { color: var(--ok); flex-shrink: 0; }

.wl-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.wl-note > svg { flex-shrink: 0; margin-top: 4px; color: var(--gold-ink); }
.wl-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0 2px; cursor: pointer; font: inherit; font-weight: 700; }

/* اللوحات */
.wl-panel { margin-top: 16px; padding: 18px 16px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 1px 2px rgba(20, 16, 8, .04), 0 10px 28px -20px rgba(20, 16, 8, .25); }
.wl-panel h2 { margin: 0 0 4px; font-size: 19px; }
.wl-panel > .wl-muted { margin-bottom: 4px; }
.wl-panel h3 { margin: 0 0 8px; font-size: 15px; }
.wl-lbl { margin: 12px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.wl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.wl-seg.one { grid-template-columns: 1fr; }
.wl-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--text-2); font: 700 14.5px var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.wl-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.wl-seg button.on svg { color: var(--gold-ink); }

/* الحقول: 52px، زوايا 12، تركيز ذهبي واضح */
.wl-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.wl-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.wl-span { grid-column: 1 / -1; }
.wl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-flabel { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.wl-help { display: block; font-size: 12.5px; line-height: 1.7; color: var(--text-3); }
.wl-field input, .wl-money { width: 100%; min-height: 52px; border-radius: 12px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: var(--paper); color: var(--text); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.wl-field input { padding: 0 14px; }
.wl-field input::placeholder { color: var(--text-3); opacity: .8; }
.wl-field input:focus, .wl-money:focus-within { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px var(--glow); }
.wl-field input[dir="ltr"] { text-align: left; }
.wl-money { display: flex; align-items: center; direction: ltr; overflow: hidden; }
.wl-money-u { flex-shrink: 0; display: grid; place-items: center; align-self: stretch; padding: 0 14px; font-weight: 800; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); border-inline-end: 1px solid var(--line); border-inline-end: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.wl-money input { min-height: 50px; border: 0; border-radius: 0; background: none; box-shadow: none !important; font-size: 18px; font-weight: 700; }
.wl-code { min-height: 56px !important; font-size: 21px !important; letter-spacing: .14em; font-weight: 800; text-align: center !important; font-variant-numeric: tabular-nums; }
.wl-pin { letter-spacing: .3em; font-size: 20px !important; text-align: center !important; }
.wl-err, .wl-ok { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.wl-err { color: var(--deal); background: var(--surface); background: color-mix(in srgb, var(--deal) 8%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 35%, transparent); }
.wl-ok { color: var(--ok); background: var(--surface); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); font-weight: 700; }
.wl-submit { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; gap: 10px; }
.wl-submit:disabled { opacity: .55; cursor: not-allowed; }
.wl-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: wl-spin .7s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }

/* شام كاش: تنبيه العملة + خطوات مرقّمة */
.wl-cur { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; font-weight: 500; color: var(--text);
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 10%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 35%, transparent); }
.wl-cur svg { flex-shrink: 0; margin-top: 4px; color: var(--gold-ink); }
.wl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wl-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.wl-step:last-child { padding-bottom: 0; }
.wl-step:not(:last-child)::before { content: ''; position: absolute; top: 34px; bottom: 2px; inset-inline-start: 15px; width: 2px; border-radius: 2px; background: transparent; background: color-mix(in srgb, var(--volt) 25%, transparent); }
.wl-step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--volt); color: var(--on-volt, #121214); font: 800 14px var(--font-head); font-variant-numeric: tabular-nums; }
.wl-step-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.wl-step-t { font-size: 15px; line-height: 1.5; }
.wl-acc-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--volt); border: 1px dashed color-mix(in srgb, var(--volt) 50%, transparent); }
.wl-acc-t { flex: 1 1 180px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.wl-acc-name { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.wl-acc { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: var(--text); overflow-wrap: anywhere; }
.wl-copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--volt); background: var(--surface); color: var(--gold-ink); font: 700 13.5px var(--font-body); cursor: pointer; }
.wl-copy:hover { background: var(--surface); background: color-mix(in srgb, var(--volt) 10%, var(--surface)); }
.wl-qr { display: block; width: 112px; height: 112px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }

/* رفع الإشعار: منطقة واضحة بدل حقل المتصفح، ومعاينة بعد الاختيار */
.wl-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.wl-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border-radius: 14px; border: 1.5px dashed var(--volt); border: 1.5px dashed color-mix(in srgb, var(--volt) 55%, transparent);
  background: var(--paper);
  background: color-mix(in srgb, var(--volt) 5%, var(--paper)); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.wl-drop:hover, .wl-file:focus-visible + .wl-drop { border-color: var(--volt); background: var(--paper); background: color-mix(in srgb, var(--volt) 10%, var(--paper)); }
.wl-file:focus-visible + .wl-drop { outline: 2px solid var(--volt); outline-offset: 2px; }
.wl-drop-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
.wl-drop b { font-size: 14.5px; } .wl-drop small { font-size: 12px; color: var(--text-3); }
.wl-file-ok { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.wl-file-ok img, .wl-file-pdf { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface); }
.wl-file-pdf { display: grid; place-items: center; color: var(--gold-ink); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.wl-file-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-file-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-file-t small { align-self: flex-start; font-size: 12px; color: var(--text-3); }
.wl-file-a { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wl-file-a button { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); background: var(--surface); color: var(--text); font: 700 13.5px var(--font-body); cursor: pointer; }
.wl-file-a button.rm { color: var(--deal); }

/* التأكيد قبل التحويل */
.wl-confirm { padding: 14px; border-radius: 14px; background: var(--surface); background: color-mix(in srgb, var(--volt) 8%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 35%, transparent); display: grid; gap: 12px; font-size: 14.5px; line-height: 1.7; }
.wl-confirm p { margin: 0; }

/* طلبات الشحن السابقة */
.wl-topups { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.wl-topups ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.wl-top-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-top-main b { align-self: flex-start; font-size: 15px; }
.wl-top-main small { font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.wl-rej { color: var(--deal); }
.wl-tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
.wl-tag.confirmed { color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 13%, transparent); }
.wl-tag.rejected { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 11%, transparent); }

/* الحركات: قائمة بطاقات — أيقونة الاتجاه، الوصف والتاريخ، المبلغ والرصيد بعده */
.wl-hist { margin-top: 28px; }
.wl-hist h2 { margin: 0 0 12px; font-size: 19px; }
.wl-hist ul { list-style: none; margin: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.wl-e { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.wl-e + .wl-e { border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.wl-e-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.wl-e.in .wl-e-ic { color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 12%, transparent); }
.wl-e-ic > span { display: contents; }
.wl-e-t, .wl-e-r { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-e-r { align-items: flex-end; text-align: end; }
.wl-e-k { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.wl-e-d { align-self: flex-start; font-size: 12px; color: var(--text-3); }
.wl-e-a { font-size: 15.5px; white-space: nowrap; color: var(--text); }
.wl-e.in .wl-e-a { color: var(--ok); }
.wl-e-b { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.wl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border-radius: 18px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); }
.wl-empty p { margin: 4px 0 0; font-weight: 700; font-size: 15px; }

/* التحميل / الخطأ / الدخول */
.wl-skel { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.wl-skel-card { display: flex; flex-direction: column; gap: 12px; height: 236px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.wl-skel-card i, .wl-skel-btn { display: block; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); animation: wl-pulse 1.2s ease-in-out infinite; }
.wl-skel-card i:nth-child(1) { width: 30%; height: 14px; } .wl-skel-card i:nth-child(2) { width: 45%; height: 42px; } .wl-skel-card i:nth-child(3) { width: 38%; height: 14px; }
.wl-skel-btn { height: 54px; border-radius: 16px; }
.wl-skel > .wl-muted { text-align: center; font-size: 13px; }
@keyframes wl-pulse { 50% { opacity: .45; } }
.wl-state { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; padding: 32px 20px; border-radius: 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.wl-state h2 { margin: 6px 0 0; font-size: 19px; }
.wl-state .btn { margin-top: 8px; min-height: 48px; min-width: 200px; }
.wl-state-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 13%, transparent); }
.wl-state-err .wl-state-ic { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); }

@media (min-width: 640px) {
  .wl { padding-block: 32px 96px; }
  .wl-card { padding: 26px 28px 20px; margin-top: 22px; }
  .wl-qa { gap: 14px; }
  .wl-panel { padding: 24px; }
  .wl-grid { grid-template-columns: 1fr 1fr; }
  .wl-qr { width: 128px; height: 128px; }
}
/* الأزرار العائمة بهالصفحة بس: بتنسحب لما يكون في حقل عليه تركيز (الكيبورد مفتوح) أو زر إرسال ظاهر بالشاشة */
body:has(main.wl) .chatw { transition: opacity .25s var(--ease), transform .25s var(--ease); }
@media (max-width: 767px) {
  body:has(main.wl :is(input, textarea):focus) .chatw:not(:has(.chatbox:not([style*="display: none"]))),
  body.wl-tuck .chatw:not(:has(.chatbox:not([style*="display: none"]))) { opacity: 0; transform: translateY(24px); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .wl-pend > i, .wl-spin, .wl-skel-card i, .wl-skel-btn { animation: none; } }

/* السعر بالعملة الأخرى تحت السعر الرئيسي (الزبون يشوف الليرة والدولار معاً) */
.pr2 { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; line-height: 1.5; }
.rc-price .pr2, .st-price .pr2 { flex-basis: 100%; }
/* الوضع الداكن: الشريط بعد التمرير صلب كمان (كان ٩٦٪ ويبيّن العنوان من تحته) */
html[data-mode="dark"] .site-head.ah.scrolled, html[data-mode="dark"] body:not(:has(.hx)) .site-head.ah { background: var(--paper); }
/* المتغيّرات المبنية على color-mix: المتصفح القديم بيقبلها كنص وبتفشل وقت الاستعمال ⇒ قيم بديلة صريحة */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --gold-ink: var(--text); --hair-gold: var(--bw-1) solid var(--volt); --glow: transparent; --gold-glow: 0 14px 34px -16px var(--volt); }
  html[data-mode="dark"] { --gold-ink: var(--volt); }
}

/* ══ مشهد الدخول ثلاثي الأبعاد (منقول من المعرض) ══ */
html.entering:not(.ent-arrived), html.entering:not(.ent-arrived) body { background: #06060a; }
html.entering:not(.ent-arrived) body > :not(.ent) { visibility: hidden; }
.ent { position: fixed; inset: 0; z-index: 2000; overflow: hidden; background: #06060a; touch-action: none; overscroll-behavior: none;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1); color: #EFE9DC; }
.ent[data-phase="arrived"] { opacity: 0; pointer-events: none; }
.ent-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s; }
.ent:not([data-phase="loading"]) .ent-cv { opacity: 1; }
.ent-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .5s; }
.ent-load img { width: 160px; height: 160px; object-fit: contain; animation: ent-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@media (min-width: 640px) { .ent-load img { width: 192px; height: 192px; } }
.ent:not([data-phase="loading"]) .ent-load { opacity: 0; }
@keyframes ent-pulse { 50% { opacity: .5; } }
.ent-veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ent-hint { position: absolute; inset-inline: 0; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  font-family: 'Cairo', var(--font-head); font-size: 14px; font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .7s; }
.ent[data-phase="ready"]:not([data-started]) .ent-hint { opacity: 1; transition-delay: 1.4s; }
.ent-mouse { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(245, 236, 200, .55); border-radius: 12px; }
.ent-mouse::after { content: ''; position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 2px; background: #D4AF37;
  animation: ent-wheel 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ent-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.ent-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .05); }
.ent-bar i { display: block; height: 100%; background: rgba(212, 175, 55, .8); transform-origin: right; transform: scaleX(0); }
.ent-skip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1; min-height: 40px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); color: rgba(239, 233, 220, .8); font-family: 'Cairo', var(--font-head);
  font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); transition: border-color .2s, color .2s; }
.ent-skip:hover { border-color: rgba(212, 175, 55, .6); color: #D4AF37; }
@media (prefers-reduced-motion: reduce) { .ent-mouse::after, .ent-load img { animation: none; } }
/* شعار الحصان بصفحات الدخول والتسجيل */
.login-box .logo[src*="brand-logo-512"] { height: 104px; width: 104px; object-fit: contain; border-radius: 50%; background: #0B0B0D; }
.img-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
/* اسم الشركة جنب الشعار بالفوتر: كان يورث لون نص الشريط الداكن (فاتح) فوق خلفية فاتحة */
.af .ah-logo, .af .ah-name b { color: var(--text); }
.af .ah-name small { color: var(--text-2); }
/* ══ كشف الأقسام (نفس المعرض) ══ */
html.rv-on [data-rv] { transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0s), transform .8s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0s); }
html.rv-on [data-rv]:not(.rv-in) { opacity: 0; transform: translateY(60px); }
@media (prefers-reduced-motion: reduce) { html.rv-on [data-rv]:not(.rv-in) { transform: none; } }
/* عناصر صغيرة (الفوتر): نفس التوقيت بإزاحة أقصر */
html.rv-on [data-rv="s"]:not(.rv-in) { transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { html.rv-on [data-rv="s"]:not(.rv-in) { transform: none; } }
/* الوضع الليلي: الصور الحقيقية (مش رسومات SVG) بلا دمج multiply — الدمج معمول لرسومات بخلفية بيضا فوق أرضية فاتحة،
   وفوق الأسود كان يغمّق صور المعرض لحد ما تختفي (قوائم الأقسام، صفحة المنتج، البطاقات). */
html[data-mode="dark"] img:not([src$=".svg"]) { mix-blend-mode: normal; }

/* ══ «الأجهزة من الداخل» بالوضع النهاري: أرضية الصفحة ونصوصها بدل الهيكل الأسود؛ الشريط والوسوم فاتحة بإطار ذهبي ══ */
html:not([data-mode="dark"]) .td { background: var(--paper); color: var(--text); }
html:not([data-mode="dark"]) .td-sub { color: var(--text-2); }
html:not([data-mode="dark"]) .td-tabs button { border-color: var(--line); border-color: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text-2); }
html:not([data-mode="dark"]) .td-tabs button:hover { border-color: var(--volt); color: var(--text); }
html:not([data-mode="dark"]) .td-fams button { border-color: var(--line); border-color: color-mix(in srgb, var(--text) 14%, transparent); background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text-2); }
html:not([data-mode="dark"]) .td-fams button:is(:hover, .on) { border-color: var(--volt); color: var(--text); }
html:not([data-mode="dark"]) .td-fams button.on { background: var(--paper); background: color-mix(in srgb, var(--volt) 12%, var(--paper)); }
html:not([data-mode="dark"]) .td-fam-ic { color: var(--volt); color: color-mix(in srgb, var(--volt) 70%, var(--text)); }
html:not([data-mode="dark"]) .td-fam-n { color: var(--text-3); background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
html:not([data-mode="dark"]) :is(.td-desc, .td-parts li, .td-note) { color: var(--text-3); }
html:not([data-mode="dark"]) .td-parts li i { border-color: var(--line); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
html:not([data-mode="dark"]) .td-parts li.on { color: var(--text); }
html:not([data-mode="dark"]) .td-hint { color: var(--text-2); background: var(--paper); background: color-mix(in srgb, var(--paper) 85%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 16%, transparent); }
html:not([data-mode="dark"]) .td-lbl { color: var(--text); background: rgba(255, 255, 255, .94); border-color: rgba(168, 132, 35, .5); box-shadow: 0 4px 14px rgba(60, 45, 10, .14); }
html:not([data-mode="dark"]) .td-ctl { background: rgba(255, 255, 255, .82); border-color: rgba(168, 132, 35, .38); box-shadow: 0 8px 24px rgba(60, 45, 10, .12); }
html:not([data-mode="dark"]) .td-end { color: var(--text); border-color: rgba(168, 132, 35, .5); }
html:not([data-mode="dark"]) .td-end:hover { border-color: var(--volt); }
html:not([data-mode="dark"]) .td-range::-webkit-slider-runnable-track { background: linear-gradient(to left, #B8922F var(--p), rgba(18, 18, 20, .14) var(--p)); }
html.ltr:not([data-mode="dark"]) .td-range::-webkit-slider-runnable-track { background: linear-gradient(to right, #B8922F var(--p), rgba(18, 18, 20, .14) var(--p)); }
html:not([data-mode="dark"]) .td-range::-webkit-slider-thumb { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgba(168, 132, 35, .55), 0 4px 12px rgba(60, 45, 10, .25); }
html:not([data-mode="dark"]) .td-range::-moz-range-track { background: rgba(18, 18, 20, .14); }
html:not([data-mode="dark"]) .td-range::-moz-range-thumb { border-color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════════════════════
   صفحة إتمام الدفع (pv) — موبايل أولاً: عمود واحد، بطاقات بيضا بزوايا 20 وظل ناعم على أرضية دافية.
   الذهب للمختار والأزرار الرئيسية فقط، والأخضر (--ok) لحالات النجاح فقط. زر رئيسي واحد بكل مرحلة (لاصق بالموبايل).
   ══════════════════════════════════════════════════════════════════════════════ */
.pv { --pv-r: var(--r-md, 20px); --pv-b: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  --pv-sh: 0 1px 2px rgba(40, 30, 10, .04), 0 10px 28px -14px rgba(40, 30, 10, .16);
  width: 100%; max-width: 620px; margin-inline: auto; padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
html[data-mode="dark"] .pv { --pv-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6); }
.pv svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pv-flow, .pv-sec, .pv-sh { display: flex; flex-direction: column; gap: 12px; }
.pv-card { background: var(--surface); border: var(--pv-b); border-radius: var(--pv-r); box-shadow: var(--pv-sh); padding: 16px; min-width: 0; }

/* رأس الصفحة */
.pv-top { display: flex; align-items: flex-start; gap: 10px; }
.pv-top h1 { font-size: 26px; line-height: 1.3; margin: 0; }
.pv-lead { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.pv-back { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; margin-inline-start: -8px; border-radius: 12px; color: var(--text); }
.pv-back:hover { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.pv .pay-deadline { margin: 0; border-radius: 16px; }

/* عناصر مشتركة */
.pv-h { font-size: 18px; margin: 4px 0 0; }
.pv-h3 { font-size: 16px; margin: 0 0 8px; }
.pv-k { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.pv-mono { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-wrap { white-space: normal; overflow-wrap: anywhere; }
.pv-note { display: block; margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.pv-note a, .pv-alert a { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pv-fine { margin: 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.pv-row { display: flex; align-items: center; gap: 12px; }
.pv-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-line + .pv-line { border-top: var(--pv-b); margin-top: 10px; padding-top: 10px; }
.pv-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: transparent;
  background: color-mix(in srgb, var(--volt) 12%, transparent); color: var(--gold-ink); }
.pv-copy { flex-shrink: 0; min-height: 36px; min-width: 64px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--volt); border: 1px solid color-mix(in srgb, var(--volt) 55%, transparent);
  background: transparent; color: var(--gold-ink); font: 700 13px var(--font-display, var(--font-head)); cursor: pointer; transition: background-color .2s, color .2s; }
.pv-copy:hover { background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); }
@media (pointer: coarse) { .pv-copy { min-height: 44px; } }
.pv-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 8px; border-bottom: var(--pv-b); font-size: 14px; }
.pv-kv > span { color: var(--text-2); }
.pv-kv > b { font-variant-numeric: tabular-nums; }

/* الملخّص: المبلغ أكبر عنصر بالصفحة */
.pv-sum { display: flex; flex-direction: column; gap: 14px; }
.pv-amt { border-top: var(--pv-b); padding-top: 14px; }
.pv-amt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pv-amt-v { font-family: var(--font-display, var(--font-head)); font-weight: 900; font-size: clamp(30px, 9vw, 40px); line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-amt-s { font-size: 20px; font-variant-numeric: tabular-nums; }

/* اختيار الطريقة: بطاقات راديو */
.pv-methods { display: grid; gap: 10px; }
.pv-method { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 14px 16px; text-align: start; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: var(--pv-b); border-radius: var(--pv-r); box-shadow: var(--pv-sh); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pv-method:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, transparent); }
.pv-method.on { border: 1.5px solid var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); box-shadow: 0 0 0 3px transparent, var(--pv-sh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 14%, transparent), var(--pv-sh); }
.pv-method.off { opacity: .6; cursor: not-allowed; }
.pv-m-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-m-txt b { font-size: 15.5px; }
.pv-m-txt small { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.pv-m-ic { color: var(--gold-ink); }
.pv-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); flex-shrink: 0; display: grid; place-items: center; transition: border-color .2s; }
.pv-method.on .pv-radio { border-color: var(--volt); background: var(--volt); }
.pv-method.on .pv-radio::after { content: ''; width: 8px; height: 5px; border: solid var(--on-volt); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

/* تنبيهات */
.pv-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.7;
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 35%, transparent); }
.pv-alert > div { display: flex; flex-direction: column; min-width: 0; }
.pv-alert-err { background: var(--surface); background: color-mix(in srgb, var(--deal) 8%, var(--surface)); border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 40%, transparent); color: var(--text); }
.pv-alert-err svg { color: var(--deal); }
.pv-alert-ok { background: var(--surface); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pv-alert-ok svg { color: var(--ok); }
.pv-err { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--deal); }

/* المحفظة */
.pv-wallet { display: flex; flex-direction: column; gap: 12px; }
.pv-wallet .pv-h { margin: 0; }
.pv-bals { display: grid; gap: 8px; }
.pv-bal { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border: var(--pv-b); border-radius: 14px; cursor: pointer; font-size: 14px; }
.pv-bal b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pv-bal.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); }
.pv-bal:has(input:focus-visible) { outline: 2px solid var(--volt); outline-offset: 2px; }
.pv-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); }
.pv-bal.on .pv-dot { border-color: var(--volt); background: var(--volt); }
.pv-pin { display: flex; flex-direction: column; gap: 8px; }
.pv-pin-in { width: 100%; max-width: 240px; min-height: 56px; text-align: center; font-size: 26px; letter-spacing: .6em; padding-inline: 14px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); color: var(--text); }
.pv-pin-in:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 16%, transparent); }
.pv-pin-in[aria-invalid="true"] { border-color: var(--deal); }
.pv-pin .pv-k { text-align: center; }

/* الزر الرئيسي: عرض كامل، ولاصق بأسفل الشاشة على الموبايل */
.pv-cta { width: 100%; min-height: 54px; border-radius: 999px; font-size: 16px; gap: 8px; }
.pv-bar { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) {
  .pv-bar { position: sticky; bottom: 0; z-index: 5; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--paper) 72%, transparent);
    background: linear-gradient(to top, var(--paper) 72%, color-mix(in srgb, var(--paper) 0%, transparent)); }
}
.pv-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: pv-spin .8s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* شام كاش: مراحل */

.pv-qr { display: flex; align-items: center; gap: 14px; }
.pv-qr img { width: 132px; height: 132px; object-fit: contain; background: #FFFFFF; border-radius: 12px; padding: 6px; border: var(--pv-b); }
.pv-qr p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.8; }

/* أكورديون */
.pv-proof { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.pv-proof .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pv-proof .field > span { font-size: 13px; color: var(--text-2); font-weight: 600; }

/* رفع الإشعار */
.pv-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px 16px; border-radius: 16px;
  border: 1.5px dashed var(--volt);
  border: 1.5px dashed color-mix(in srgb, var(--volt) 55%, transparent); background: transparent; background: color-mix(in srgb, var(--volt) 4%, transparent); transition: background-color .2s, border-color .2s; }
.pv-drop.over { background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); border-color: var(--volt); }
.pv-drop > svg { width: 36px; height: 36px; color: var(--gold-ink); stroke-width: 1.5; }
.pv-drop b { font-size: 15.5px; }
.pv-drop > small { font-size: 13px; color: var(--text-3); }

/* التحليل */
.pv-scan { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-block: 22px; }
.pv-scan b { font-size: 16px; }
.pv-scan small { font-size: 13px; color: var(--text-3); max-width: 34ch; }
.pv-scan-img { position: relative; width: 120px; height: 160px; border-radius: 12px; overflow: hidden; border: var(--pv-b); margin-bottom: 6px; background: #FFFFFF; }
.pv-scan-img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pv-scanline { position: absolute; inset-inline: 0; top: 0; height: 36%; background: linear-gradient(to bottom, transparent, transparent); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--volt) 45%, transparent));
  border-bottom: 2px solid var(--volt); animation: pv-scan 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes pv-scan { from { transform: translateY(-40%); } to { transform: translateY(180%); } }
@media (prefers-reduced-motion: reduce) { .pv-scanline, .pv-spin { animation: none; } }

/* نتيجة التحليل */
.pv-thumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: var(--pv-b); }
.pv-thumb img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; border: var(--pv-b); background: #FFFFFF; }

/* نجاح الإرسال (قيد المراجعة) */
.pv-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 18px; }
.pv-done-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: #FFFFFF; margin-bottom: 8px;
  box-shadow: 0 12px 28px -10px var(--ok);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ok) 70%, transparent); animation: pv-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
.pv-done-ic svg { width: 38px; height: 38px; stroke-width: 2.6; }
@keyframes pv-pop { from { transform: scale(.6); opacity: 0; } }
.pv-done h2 { font-size: 22px; margin: 0; }
.pv-done p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.8; }
.pv-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pv-chip-wait { background: var(--warn-bg); color: var(--text); }
.pv-chip-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.pv-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-block: 10px 6px; padding: 12px 18px; border-radius: 14px; border: var(--pv-b); }
.pv-done .pv-cta { max-width: 360px; margin-top: 6px; }

/* مساعدة + إلغاء */
.pv-help { display: flex; align-items: center; gap: 12px; }
.pv-help > svg { color: var(--gold-ink); width: 26px; height: 26px; }
.pv-help b { font-size: 15px; } .pv-help small { font-size: 13px; color: var(--text-3); }
.pv-cancel { margin: 0; text-align: center; }
.pv-cancel button { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--deal); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.pv-secure svg { width: 16px; height: 16px; color: var(--gold-ink); }

@media (min-width: 768px) {
  .pv { padding-block: 28px 40px; gap: 16px; }
  .pv-top h1 { font-size: 30px; }
  .pv-card { padding: 20px; }
  .pv-methods { grid-template-columns: 1fr 1fr; }
  .pv-cta { width: auto; min-width: 280px; align-self: center; }
  .pv-bar { align-items: center; }
}
/* نموذج PIN: زرّه بمكانه الطبيعي تحت الحقل (اللاصق كان يغطّي الحقل ورسالة الخطأ) */
.pv-pin .pv-bar { position: static; margin-inline: 0; padding: 4px 0 0; background: none; }

/* شام كاش بشاشة وحدة: رقم الخطوة + زر الاختيار + بديل رقم العملية */
.pv-h3 { display: flex; align-items: center; gap: 10px; }
.pv-n { font-style: normal; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--volt); color: var(--on-volt); font-size: 14px; font-weight: 800; }
.pv-drop .pv-pickbtn { margin-top: 8px; width: 100%; max-width: 320px; cursor: pointer; }
.pv-drop .pv-pickbtn:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.pv-proof { padding: 0; }
.pv-thumb { margin-top: 0; padding-top: 0; border-top: 0; }
.pv-file { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pv-link { border: 0; background: none; padding: 0 2px; min-height: 32px; color: var(--gold-ink); font: 700 13.5px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-alert + .pv-alert, .pv-card > .pv-alert { margin-top: 12px; }

/* ── الهيدر: زر بحث على الموبايل + هيدر فرعي للأقسام (ملاحظات المالك ٢٠٢٦-١٠) ── */
.ah-sbtn { display: grid; }
@media (max-width: 767px) {
  .site-head.ah { position: sticky; }
  .ah-search.open { display: block; position: absolute; inset-inline: 12px; top: calc(var(--head-h) - 2px); max-width: none; margin: 0; z-index: 3;
    padding: 8px; border-radius: 16px; background: var(--paper); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35); }
  .ah-search.open > svg { inset-inline-start: 22px; }
  .ah-search.open input { height: 46px; font-size: 16px; }
  .ah-search.open .search-pop { top: calc(100% + 4px); }
}
@media (min-width: 768px) { .ah-sbtn { display: none; } }
.ah-sub { background: var(--paper); border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--l) 8%, transparent); }
.ah-sub-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; scroll-padding-inline: 16px; }
.ah-sub-row::-webkit-scrollbar { display: none; }
.ah-chips { display: contents; }
.ah-chip, .ah-chips a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--text); background: transparent; background: color-mix(in srgb, var(--l) 5%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 9%, transparent); transition: background-color .2s, border-color .2s, color .2s; }
.ah-chip:hover, .ah-chips a:hover { border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.ah-chips a.active { background: var(--gold); border-color: var(--gold); color: #17140c; }
.ah-chip-hot { color: var(--gold-ink, var(--gold)); border-color: var(--line); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* ══ الرئيسية المختصرة (ملاحظات المالك): سلايدر كارد + دوائر الأقسام + أقسام بـ٤ منتجات ══ */
.hm { padding-bottom: 40px; }
.hm-top { display: grid; gap: 12px; padding-top: 14px; }
.hm-slider { position: relative; height: 188px; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--l) 8%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 32px -18px rgba(0, 0, 0, .35); }
.hm-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 8px; padding: 16px 18px 26px;
  color: var(--text); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s;
  background: radial-gradient(120% 120% at 15% 50%, var(--tint, transparent), transparent 60%); }
.hm-slide.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.hm-s-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hm-s-chip { font-size: 11.5px; font-weight: 700; color: var(--gold-ink, var(--gold)); padding: 3px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.hm-s-title { font-family: var(--font-display, var(--font-head)); font-size: clamp(19px, 5.4vw, 30px); line-height: 1.3; font-weight: 800; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-s-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.hm-s-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--gold); color: #17140c; font-size: 13px; font-weight: 800; }
.hm-s-img { width: 100%; height: 100%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25)); }
.hm-dots { position: absolute; bottom: 10px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.hm-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 25%, transparent); cursor: pointer; transition: width .3s, background-color .3s; }
.hm-dots button.on { width: 22px; background: var(--gold); }
.hm-side { display: none; }
.hm-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--l) 8%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 32px -20px rgba(0, 0, 0, .3); transition: border-color .2s, transform .2s; }
.hm-card:hover { border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); transform: translateY(-2px); }
.hm-card > svg { flex-shrink: 0; color: var(--gold); }
.hm-card span { display: flex; flex-direction: column; gap: 3px; } .hm-card b { font-size: 16px; } .hm-card small { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.hm-card-gold { background: linear-gradient(135deg, var(--surface), var(--surface)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface)); }

.hm-cats { padding-block: 14px 4px; }
.hm-cats-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.hm-cats-row::-webkit-scrollbar { display: none; }
.hm-cat { flex-shrink: 0; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-align: center; }
.hm-cat-img { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--surface);
  border: 2px solid var(--line);
  border: 2px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); transition: border-color .2s, transform .2s; }
.hm-cat-img img { width: 78%; height: 78%; object-fit: contain; }
.hm-cat:hover .hm-cat-img { border-color: var(--gold); transform: translateY(-2px); }
.hm-cat b { font-size: 12.5px; font-weight: 700; line-height: 1.3; }

.hm-sec { padding-top: 22px; }
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hm-h { margin: 0; font-family: var(--font-display, var(--font-head)); font-size: 20px; font-weight: 800; }
.hm-all { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 4px; font-size: 13.5px; font-weight: 700; color: var(--gold-ink, var(--gold)); }
.hm-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.hm-grid { --grid-gap: 12px; }
.hm-grid .pcard { position: relative; }
.hm-off { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--deal); color: #fff; font-size: 12px; font-weight: 800; }

@media (max-width: 767px) {
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .hm-top { grid-template-columns: 2fr 1fr; padding-top: 20px; }
  .hm-slider { height: 260px; }
  .hm-slide { padding: 24px 32px 34px; grid-template-columns: 1fr 1fr; }
  .hm-s-img { max-height: 210px; }
  .hm-side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
  .hm-cats-row { gap: 22px; justify-content: flex-start; }
  .hm-cat { width: 92px; } .hm-cat-img { width: 84px; height: 84px; }
  .hm-sec { padding-top: 34px; } .hm-h { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hm-slide { transition: none; } }
/* الرئيسية على الهاتف: بطاقتين بالسطر (عمودية مدمجة) بدل بطاقة أفقية بعرض الشاشة — ٤ منتجات = سطرين بس */
@media (max-width: 560px) {
  .hm-grid.grid4:not(.list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-grid.grid4:not(.list) .pcard { display: flex; flex-direction: column; }
  .hm-grid.grid4:not(.list) .pcard .imgw { margin: 6px; padding: 10px; aspect-ratio: 1; display: grid; place-items: center; }
  .hm-grid.grid4:not(.list) .pcard a > .body { padding: 6px 10px 0; gap: 2px; }
  .hm-grid.grid4:not(.list) .pcard > .body { padding: 4px 10px 10px; gap: 4px; margin-top: auto; }
  .hm-grid.grid4:not(.list) .pcard .nm { font-size: 13px; -webkit-line-clamp: 2; min-height: 2.9em; }
  .hm-grid.grid4:not(.list) .pcard .br { font-size: 10.5px; }
  .hm-grid.grid4:not(.list) .pcard .pr { font-size: 15px; }
  .hm-grid.grid4:not(.list) .pcard .pr2, .hm-grid.grid4:not(.list) .pcard .old { font-size: 11px; }
  .hm-grid.grid4:not(.list) .pcard .add { min-height: 40px; padding: 6px; font-size: 13px; }
  .hm-grid.grid4:not(.list) .pcard .fav-btn { inset-inline-start: auto; inset-inline-end: 8px; top: 8px; transform: scale(.82); }
  .hm-slide { padding-bottom: 30px; }
}

/* اختيار الطريقة: زرّين متناسقين بسطر وحد (بدل كروت كبيرة) */
.pv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.pv-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 10px; border: 0; border-radius: 14px;
  background: none; color: var(--text-2); font: 700 14.5px var(--font-display, var(--font-head)); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.pv-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px -10px rgba(0, 0, 0, .35); }
.pv-seg button.on svg { color: var(--gold-ink, var(--gold)); }
.pv-seg button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ══ قائمة الهاتف الجانبية (.dr — تظهر تحت 1024px فقط؛ الديسكتوب بلا تغيير) ══
   رأس بالشعار ← بحث ← الأقسام (شبكة عمودين بصور) ← التسوق ← حسابي ← الإعدادات. ألوان من التوكِنات ⇒ الوضع الليلي شغّال. */
.dr .drawer-bg { background: rgba(12, 10, 6, .55); }
.dr-panel { width: min(88vw, 400px); gap: 0; padding: 0 0 max(20px, env(safe-area-inset-bottom)); background: var(--paper); overscroll-behavior: contain;
  box-shadow: -12px 0 40px -12px rgba(0, 0, 0, .35); }
[dir="ltr"] .dr-panel { box-shadow: 12px 0 40px -12px rgba(0, 0, 0, .35); }
.dr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; background: var(--paper); }
.dr-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.dr-brand .ah-mark { width: 48px; height: 48px; }
.dr-brand span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dr-brand b { font-family: 'Cairo', var(--font-head); font-weight: 800; font-size: 19px; line-height: 1.2; }
.dr-brand small { font-size: 12.5px; color: var(--text-2); }
.dr-x { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); background: var(--surface); color: var(--text); cursor: pointer; }
.dr-x:hover { border-color: var(--volt); }
.dr-search { position: relative; margin: 0 16px; }
.dr-search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.dr-search input { width: 100%; height: 50px; padding-inline: 46px 16px; border-radius: 14px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 13%, transparent); background: var(--surface);
  color: var(--text); font-size: 16px; box-shadow: 0 1px 2px rgba(20, 16, 8, .04); transition: border-color .2s, box-shadow .2s; }
.dr-search input::placeholder { color: var(--text-3); }
.dr-search input:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px var(--glow); }
.dr-body { display: flex; flex-direction: column; padding: 4px 16px 0; }
.dr-sec { padding-block: 18px 6px; }
.dr-sec + .dr-sec { border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: 'Cairo', var(--font-head) !important; font-size: 17px !important; font-weight: 800 !important; color: var(--text); }
.dr-h-ic { display: grid; place-items: center; color: var(--gold-ink); }
/* الأقسام: بطاقات بيضاء بعمودين — صورة، اسم، سهم */
.dr-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 12px; }
.dr-cats a { display: flex; align-items: center; gap: 8px; min-height: 64px; min-width: 0; padding: 6px 10px 6px 8px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 1px 2px rgba(20, 16, 8, .04); color: var(--text);
  font-family: 'Cairo', var(--font-head); font-weight: 700; font-size: 15px; transition: border-color .2s, background-color .2s; }
[dir="ltr"] .dr-cats a { padding: 6px 8px 6px 10px; }
.dr-cats a img, .dr-cat-ph { flex-shrink: 0; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--paper); background: color-mix(in srgb, var(--paper) 70%, var(--surface)); padding: 3px; }
.dr-cat-ph { display: block; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8952E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='3'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3Cpath d='M8 6.5h2'/%3E%3C/svg%3E") center / 22px no-repeat; background: color-mix(in srgb, var(--volt) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8952E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='3'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3Cpath d='M8 6.5h2'/%3E%3C/svg%3E") center / 22px no-repeat; }
/* اسم القسم: التفاف بين الكلمات بس (الكلمة ما بتنقسم) وحد أقصى سطرين — الأسماء الطويلة («الشوايات وصانعات السندويش») كانت تطلع برّا البطاقة فوق السهم */
.dr-cats a .dr-cat-n { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
html[lang="en"] .dr-cats a .dr-cat-n, [dir="ltr"] .dr-cats a .dr-cat-n { line-height: 1.25; }
/* مساحة الاسم: الصورة والسهم والحشوة بتصغر على الشاشات الضيقة بدل تصغير الخط، وتحت 340px عمود واحد */
@media (max-width: 400px) {
  .dr-cats { gap: 6px; }
  .dr-cats a { gap: 6px; padding-inline: 6px 8px; }
  [dir="ltr"] .dr-cats a { padding-inline: 6px 8px; }
  .dr-cats a img { width: 38px; height: 38px; }
  .dr-cats .dr-chev { width: 12px; height: 12px; }
}
@media (max-width: 339px) { .dr-cats { grid-template-columns: 1fr; } }
/* الإنكليزي: الأسماء أطول (Refrigerators كلمة وحدة ما بتنكسر) ⇒ بطاقة بعرض القائمة بنفس الشكل، بلا تصغير خط */
html[lang="en"] .dr-cats, [dir="ltr"] .dr-cats { grid-template-columns: 1fr; gap: 6px; }
html[lang="en"] .dr-cats a, [dir="ltr"] .dr-cats a { min-height: 56px; }
/* العربي: شبكة مربعات ٣ بالصف (تطبيقات المتاجر) — الصورة فوق والاسم كامل تحتها حتى ٣ أسطر، بلا سهم.
   البطاقات الأفقية بعمودين كانت تقصّ الأسماء الطويلة («الشوايات وصانعات السندويش») وتلزقها بالسهم */
html[dir="rtl"] .dr-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[dir="rtl"] .dr-cats a { flex-direction: column; justify-content: flex-start; gap: 7px; min-height: 0; padding: 10px 6px 11px; text-align: center; border-radius: 16px; }
html[dir="rtl"] .dr-cats a img, html[dir="rtl"] .dr-cats .dr-cat-ph { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; padding: 4px; border-radius: 12px; }
html[dir="rtl"] .dr-cats a .dr-cat-n { flex: 0 0 auto; width: 100%; font-size: 12.5px; line-height: 1.45; -webkit-line-clamp: 3; line-clamp: 3; }
html[dir="rtl"] .dr-cats .dr-chev { display: none; }
@media (max-width: 339px) { html[dir="rtl"] .dr-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dr-cats a:hover, .dr-cats a.active { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); }
.dr-cats a.active { color: var(--gold-ink); }
/* صفوف القوائم: أيقونة | النص | (عدّاد/قيمة) | سهم */
.dr-list { display: flex; flex-direction: column; }
.dr-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 2px; border: 0; background: none; color: var(--text); font: 600 15.5px var(--font-body); text-align: start; cursor: pointer; border-radius: 10px; transition: background-color .15s; }
.dr-row + .dr-row { border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 0; }
.dr-row:hover, .dr-row:active { background: transparent; background: color-mix(in srgb, var(--volt) 6%, transparent); }
.dr-row:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.dr-ic { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 11%, transparent); }
.dr-t { flex: 1; min-width: 0; }
.dr-cnt { flex-shrink: 0; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--deal); color: var(--on-deal, #fff); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-val { flex-shrink: 0; max-width: 46%; padding: 3px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mode="dark"] .dr-v-light, html:not([data-mode="dark"]) .dr-v-dark { display: none; }
.dr-chev { flex-shrink: 0; width: 16px; height: 16px; background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="ltr"] .dr-chev { transform: scaleX(-1); }
.dr-cats .dr-chev { width: 14px; height: 14px; }
/* القائمة جوّا طبقة الهيدر (z 60) وأزرار واتساب/المحادثة فوقها (z 900) ⇒ بتختفي الأزرار طول ما القائمة مفتوحة */
body:has(.drawer.dr:not([style*="display: none"])) .chatw { visibility: hidden; }
/* نص الإرشاد بالبحث: ما بيتقصّ بالإنكليزي (النص المكتوب بيضل 16px كي ما يكبّر iOS الصفحة) */
.dr-search input { padding-inline-end: 12px; text-overflow: ellipsis; }
.dr-search input::placeholder { font-size: 14px; }

/* ── الاتجاه: الأسهم بتأشّر باتجاه القراءة (عربي ← ، إنكليزي →) ── */
.arr-next::before { content: '←'; } [dir="ltr"] .arr-next::before { content: '→'; }
.arr-prev::before { content: '→'; } [dir="ltr"] .arr-prev::before { content: '←'; }
/* أيقونات «تسوّق/عرض الكل» مرسومة لليمين-لليسار ⇒ بتنقلب بالإنكليزي */
[dir="ltr"] :is(.hm-s-cta, .hm-all, .ann-cta, .ox-cta) svg { transform: scaleX(-1); }

/* ── صفحة حقوق الصور (/credits) ── */
.credits h1 { margin-bottom: 8px; }
.cr-lead { max-width: 62ch; margin: 0 0 20px; color: var(--text-2); line-height: 1.8; }
.cr-list { list-style: none; margin: 0; padding: 0; max-width: 640px; border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--l) 8%, transparent); }
.cr-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--l) 8%, transparent); }
.cr-list img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: var(--well-ivory, #F1EDE5); flex-shrink: 0; }
.cr-list div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-list b { font-size: 15px; }
.cr-list span { font-size: 13.5px; color: var(--text-2); }
.cr-list a, .cr-lic a { color: var(--gold-ink, var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
.cr-lic { margin-top: 16px; font-size: 14px; color: var(--text-2); }

/* ══ مقارنة المنتجات — «معرض الليل»: بطاقات بآبار ضوء فوق، والمواصفات صفوف (العنوان فوق والقيم تحته بأعمدة)
   كل الأعمدة بعرض الشاشة بلا سكرول عرضي، وشريط مصغّر ثابت بيطلع لما تختفي البطاقات ══ */
.cmpx-page { padding-block: 22px 40px; }
.cmpx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.cmpx-ttl h1 { margin: 0; font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); line-height: 1.25; }
.cmpx-ttl p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.cmpx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmpx-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 12px; border-radius: var(--radius-pill); border: var(--hair); background: var(--surface); color: var(--text); font: 600 13.5px var(--font-body); cursor: pointer; }
.cmpx-sw i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background-color .2s; flex-shrink: 0; }
.cmpx-sw i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: inset-inline-start .2s var(--ease, ease-out); }
.cmpx-sw[aria-checked="true"] { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); }
.cmpx-sw[aria-checked="true"] i { background: var(--volt); }
.cmpx-sw[aria-checked="true"] i::after { inset-inline-start: 17px; }
.cmpx-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--gold-ink); font: 700 13.5px var(--font-head); text-decoration: none; cursor: pointer; border-radius: var(--radius-pill); }
.cmpx-link:hover { background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); }
.cmpx-link.mute { color: var(--text-2); }
.cmpx-link.mute:hover { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 8%, transparent); }
:is(.cmpx-sw, .cmpx-link, .cmpx-x):focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

.cmpx { --cols: repeat(var(--n, 2), minmax(0, 1fr)); }
.cmpx-tiles { display: grid; grid-template-columns: var(--cols); gap: 10px; }
.cmpx-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 12px; border-radius: var(--radius-lg); border: var(--hair); background: var(--surface); color: var(--text); }
.cmpx-x { position: absolute; z-index: 1; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; background: color-mix(in srgb, #fff 82%, transparent); color: #1a1a1a; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.cmpx-x:hover { background: #fff; color: var(--deal); }
.cmpx-well { display: block; aspect-ratio: 1; border-radius: var(--radius-sm, 12px); background: var(--well, #F1EDE5); overflow: hidden; }
.cmpx-well img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.cmpx-well:hover img { transform: scale(1.04); }
.cmpx-brand { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cmpx-name { font: 700 14px/1.45 var(--font-head); color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.35em; }
.cmpx-name:hover { color: var(--gold-ink); }
.cmpx-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cmpx-pr b { font: 700 18px/1.15 var(--font-head); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.cmpx-tag { padding: 2px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cmpx-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.cmpx-stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--stock-ok, #3fa66b); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--stock-ok, #3fa66b) 18%, transparent); }
.cmpx-stock.out i { background: var(--deal); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--deal) 18%, transparent); }
.cmpx-add { margin-top: auto; width: 100%; justify-content: center; }

.cmpx-mini { position: sticky; top: var(--stick-top, 0); z-index: 20; display: grid; grid-template-columns: var(--cols); gap: 10px; margin: 0 -2px; padding: 8px 2px; background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: var(--hair); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.16, 1, .3, 1), top .35s var(--ease, ease-out); }
.cmpx-mini.on { opacity: 1; transform: none; }
.cmpx-mini span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cmpx-mini img { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--well, #F1EDE5); object-fit: contain; padding: 2px; }
.cmpx-mini b { font: 700 12px/1.3 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmpx-rows { margin-top: 6px; border-radius: var(--radius-lg); border: var(--hair); background: var(--surface); color: var(--text); overflow: hidden; }
.cmpx-row { padding: 12px 14px; border-top: var(--hair); }
.cmpx-row:first-child { border-top: 0; }
.cmpx-lab { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cmpx-lab i { font-style: normal; font-weight: 500; color: var(--text-3); }
.cmpx-lab em { margin-inline-start: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--gold-ink); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, transparent); }
.cmpx-vals { display: grid; grid-template-columns: var(--cols); gap: 10px; }
.cmpx-v { min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cmpx-v.none { color: var(--text-3); font-weight: 400; }
.cmpx-row.same .cmpx-v { color: var(--text-2); font-weight: 500; }
.cmpx-row.diff { background: linear-gradient(to left, transparent, transparent 60%); background: linear-gradient(to left, color-mix(in srgb, var(--volt) 5%, transparent), transparent 60%); }
html.ltr .cmpx-row.diff { background: linear-gradient(to right, transparent, transparent 60%); background: linear-gradient(to right, color-mix(in srgb, var(--volt) 5%, transparent), transparent 60%); }
.cmpx-allsame { margin: 0; padding: 18px 14px; font-size: 14px; color: var(--text-2); }

.cmpx-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; border-radius: var(--radius-lg); border: 1px dashed var(--line); border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); }
.cmpx-empty-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); color: var(--gold-ink); }
.cmpx-empty h2 { margin: 4px 0 0; font: 700 18px/1.4 var(--font-head); }
.cmpx-empty p { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }
.cmpx-sk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmpx-sk i { height: 320px; border-radius: var(--radius-lg); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); animation: cmpxPulse 1.4s ease-in-out infinite; }
@keyframes cmpxPulse { 50% { opacity: .55; } }

@media (min-width: 900px) {
  .cmpx-tiles, .cmpx-vals, .cmpx-mini { gap: 16px; }
  .cmpx-tile { padding: 14px 14px 16px; }
  .cmpx-name { font-size: 15.5px; }
  .cmpx-pr b { font-size: 21px; }
  .cmpx-row { display: grid; grid-template-columns: 180px 1fr; align-items: baseline; gap: 16px; padding: 14px 18px; }
  .cmpx-lab { margin: 0; }
  .cmpx-page .cmpx-tiles, .cmpx-page .cmpx-mini { padding-inline: 215px 19px; }
}
@media (max-width: 420px) {
  .cmpx.n3, .cmpx.n4 { --gap: 6px; }
  .cmpx.n3 :is(.cmpx-tiles, .cmpx-vals, .cmpx-mini), .cmpx.n4 :is(.cmpx-tiles, .cmpx-vals, .cmpx-mini) { gap: 6px; }
  .cmpx.n3 .cmpx-tile, .cmpx.n4 .cmpx-tile { padding: 6px 6px 8px; }
  .cmpx.n3 .cmpx-name, .cmpx.n4 .cmpx-name { font-size: 12px; }
  .cmpx.n3 .cmpx-pr b, .cmpx.n4 .cmpx-pr b { font-size: 14px; }
  .cmpx.n3 .cmpx-v, .cmpx.n4 .cmpx-v { font-size: 12.5px; }
  .cmpx.n3 .cmpx-add, .cmpx.n4 .cmpx-add { font-size: 11.5px; padding-inline: 4px; }
  .cmpx.n4 .cmpx-x { width: 26px; height: 26px; top: 10px; inset-inline-end: 10px; }
  .cmpx.n4 .cmpx-mini b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmpx-mini, .cmpx-well img, .cmpx-sw i, .cmpx-sw i::after { transition: none; } .cmpx-sk i { animation: none; } }
/* الشريط المصغّر ما بياخد مكان وهو مخفي (بيطلع فوق الصفوف لما يثبت) */
.cmpx-mini { margin-bottom: -46px; }
.cmpx-add { gap: 6px; }
.cmpx-pr b { white-space: nowrap; }
@media (max-width: 420px) {
  .cmpx.n3 .cmpx-pr b { font-size: 13.5px; }
  .cmpx.n4 .cmpx-pr b { font-size: 12px; }
  .cmpx.n4 .cmpx-tag { font-size: 10px; padding: 1px 6px; }
  .cmpx.n4 .cmpx-brand { font-size: 9.5px; letter-spacing: .06em; }
  .cmpx.n4 .cmpx-stock { font-size: 11px; }
  .cmpx:is(.n3, .n4) .cmpx-add span { display: none; }
  .cmpx:is(.n3, .n4) .cmpx-add { min-height: 38px; padding: 0; }
  .cmpx:is(.n3, .n4) .cmpx-v { font-size: 12px; }
  .cmpx:is(.n3, .n4) .cmpx-x { width: 26px; height: 26px; top: 10px; inset-inline-end: 10px; }
  .cmpx:is(.n3, .n4) .cmpx-x svg { width: 13px; height: 13px; }
}
/* شريط الشراء الثابت بصفحة المنتج: خلفية مصمتة (ما بيبيّن من تحته شي) وفصل واضح عن المحتوى */
@media (max-width: 960px) {
  .pdp-bar { background: var(--paper); backdrop-filter: none; box-shadow: 0 -8px 24px -10px rgb(0 0 0 / .28); }
  .pdp-bar-p b { font-size: 19px; }
}
/* القائمة › ذيل «تسجيل الخروج»: آخر القائمة، زر هادئ بحدّ رفيع ولون التحذير — إجراء لا تنقّل */
.dr-foot { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dr-out { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 30%, transparent);
  border-radius: 12px; background: none; color: var(--deal); font: 700 15px var(--font-body); cursor: pointer; transition: background-color .15s; }
.dr-out:hover, .dr-out:active { background: transparent; background: color-mix(in srgb, var(--deal) 7%, transparent); }
/* صفحة حسابي › «تسجيل الخروج» في آخر الصفحة بنفس شكل ذيل القائمة */
.acc-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.acc-foot .dr-out { max-width: 320px; margin-inline: auto; }
/* القائمة › حسابي: اسم الزبون بجانب العنوان، وبطاقة دخول/تسجيل للزائر */
.dr-who { margin-inline-start: auto; max-width: 55%; font: 600 13px var(--font-body); color: var(--text-2, var(--ink-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-h:has(.dr-who) { display: flex; align-items: center; gap: 8px; }
.dr-guest { margin: 6px 0 4px; padding: 14px; border-radius: 14px; background: var(--surface); background: color-mix(in srgb, var(--volt) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 28%, transparent); }
.dr-guest p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--text); }
.dr-guest-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dr-guest-b .btn { min-height: 44px; justify-content: center; font-size: 14px; padding-inline: 10px; }

/* ===== صفحة حسابي (2026-10-05) — بطاقة هوية، تبويبات بعرض متساوٍ، طلبات كصفوف قابلة للقراءة ===== */
.acc { max-width: 880px; padding-block: 20px 8px; }
.acc h1, .acc h2 { margin: 0; }
/* الحقول تملأ بطاقتها ولا تفرض عرض محتواها (بريد/اسم طويل كان يدفع البطاقة خارج الشاشة) */
.acc .field input, .acc .field select { width: 100%; min-width: 0; box-sizing: border-box; }
.acc-pane, .acc-id { min-width: 0; }
/* بطاقة الهوية */
.acc-id { position: relative; overflow: hidden; isolation: isolate; padding: 20px; background: var(--surface); border: var(--hair-gold); border-radius: var(--radius-lg); }
.acc-id::before { content: ''; position: absolute; inset: -40% 40% 40% -20%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }
.acc-id-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av txt st"; align-items: center; gap: 4px 14px; }
.acc-av { grid-area: av; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); font: 800 24px/1 var(--font-head); }
.acc-id-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-id h1 { font: 800 clamp(22px, 5.4vw, 30px)/1.25 var(--font-head); overflow-wrap: anywhere; text-wrap: balance; }
.acc-phone { align-self: flex-start; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.acc-state { grid-area: st; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font: 700 13px var(--font-head); white-space: nowrap; }
.acc-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acc-state.ok { background: var(--st-delivered-bg); color: var(--st-delivered-tx); }
.acc-state.warn { background: var(--st-pending_review-bg); color: var(--st-pending_review-tx); }
/* دعوة التأكيد */
.acc-verify { margin-top: 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent); }
.acc-verify-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--text); }
.acc-verify b { display: block; font: 700 15px/1.4 var(--font-head); color: var(--text); }
.acc-verify p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.acc-verify .btn { min-height: 44px; white-space: nowrap; }
.acc-otp { margin-top: 18px; max-width: 420px; }
/* سطر المحفظة */
.acc-wallet { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--stripe); color: var(--text); text-decoration: none; transition: background-color .2s var(--ease); }
.acc-wallet:hover { background: var(--stripe); background: color-mix(in srgb, var(--volt) 10%, var(--stripe)); }
.acc-wallet-ic { display: grid; place-items: center; color: var(--text-2); }
.acc-wallet-t { font: 600 14px var(--font-head); color: var(--text-2); }
.acc-wallet-v { margin-inline-start: auto; font: 700 16px var(--font-head); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.acc-chev { display: grid; place-items: center; color: var(--text-3); }
.acc-chev svg { width: 16px; height: 16px; }
html[dir="ltr"] .acc-chev svg { transform: scaleX(-1); }
/* التبويبات: شريحة مقسّمة بأربع خانات متساوية */
.acc-tabs { margin: 20px 0 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 5px; border-radius: 18px; background: var(--stripe); border: var(--hair); }
.acc-tabs button, .acc-tabs .acc-tab-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 13px;
  background: none; color: var(--text-2); font: 600 13px/1.2 var(--font-head); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.acc-tabs button:hover, .acc-tabs .acc-tab-link:hover { color: var(--text); }
.acc-tabs .acc-tab-link { text-decoration: none; text-align: center; }
.acc-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 8px 20px -12px rgb(0 0 0 / .45); }
.acc-tabs button[aria-selected="true"] svg { color: var(--volt); }
.acc-tabs button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.acc-tabs em { position: absolute; top: 7px; inset-inline-end: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--volt); color: var(--on-volt); font: 700 11px/1 var(--font-head); font-style: normal; }
/* الحالة الفارغة */
.acc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 16px 36px; text-align: center; }
.acc-empty-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: transparent; background: color-mix(in srgb, var(--volt) 13%, transparent); color: var(--text); }
.acc-empty-ic svg { width: 26px; height: 26px; }
.acc-empty h2 { font: 700 19px/1.4 var(--font-head); }
.acc-empty p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.acc-empty .btn { margin-top: 8px; min-width: 200px; }
/* الطلبات */
.acc-orders, .acc-addrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.acc-order { display: grid; grid-template-columns: 64px 1fr auto 16px; align-items: center; gap: 14px; padding: 12px; background: var(--surface); border: var(--hair); border-radius: 16px;
  color: var(--text); text-decoration: none; transition: border-color .25s var(--ease), box-shadow .3s var(--ease); }
.acc-order:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, transparent); box-shadow: var(--shadow-2); }
.acc-order:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.acc-order-img { width: 64px; aspect-ratio: 1; border-radius: 12px; background: var(--well); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.acc-order-img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.acc-order-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acc-order-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.acc-order-no { font: 700 15px var(--font-head); font-variant-numeric: tabular-nums; }
.acc-order-row .badge { font-size: 12px; }
.acc-order-meta { font-size: 13px; color: var(--text-3); }
.acc-order-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }
.acc-order-total { font: 700 16px var(--font-head); color: var(--gold-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-order-cta { font: 700 12px var(--font-head); color: var(--st-pending_review-tx); background: var(--st-pending_review-bg); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
/* العناوين */
.acc-addr { min-width: 0; overflow-wrap: anywhere; padding: 16px 18px; background: var(--surface); border: var(--hair); border-radius: 16px; display: grid; gap: 6px; }
.acc-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.acc-addr-label { font: 700 13px var(--font-head); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--stripe); color: var(--text); }
.acc-addr p { margin: 0; line-height: 1.65; }
.acc-addr-who { font-size: 15px; font-weight: 600; color: var(--text); }
.acc-addr-where { font-size: 14px; color: var(--text-2); }
.acc-addr-mark { font-size: 13px; color: var(--text-3); }
.acc-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); cursor: pointer; transition: background-color .2s var(--ease); }
.acc-icon-btn svg { width: 18px; height: 18px; }
.acc-icon-btn.danger { color: var(--deal); }
.acc-icon-btn.danger:hover { background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); }
.acc-icon-btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.acc-add { margin-top: 12px; }
.acc-empty .btn svg, .acc-add svg { width: 18px; height: 18px; }
/* البطاقات والنماذج */
.acc-card { min-width: 0; padding: 20px; background: var(--surface); border: var(--hair); border-radius: var(--radius-lg); }
.acc-card h2 { font: 700 18px/1.4 var(--font-head); margin-bottom: 16px; }
.acc-form { margin-top: 16px; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.acc-settings .acc-card .btn { min-width: 140px; }
.acc-more { display: inline-block; margin-top: 18px; font: 600 14px var(--font-head); color: var(--text); text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 5px; }
.acc .grid4 .pr { font: 700 18px var(--font-head); }
@media (min-width: 768px) {
  .acc { padding-block: 32px 8px; }
  .acc-id { padding: 26px 28px; }
  .acc-av { width: 64px; height: 64px; }
  .acc-tabs { display: inline-grid; grid-template-columns: repeat(5, auto); }
  .acc-tabs button, .acc-tabs .acc-tab-link { flex-direction: row; min-height: 46px; padding: 0 18px; gap: 8px; font-size: 14px; }
  .acc-tabs em { position: static; }
  .acc-addrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc .grid4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .acc-id { padding: 18px 16px; }
  .acc-id-top { grid-template-columns: auto 1fr; grid-template-areas: "av txt" "av st"; }
  .acc-state { justify-self: start; margin-top: 4px; }
  .acc-verify { grid-template-columns: auto 1fr; }
  .acc-verify .btn { grid-column: 1 / -1; width: 100%; }
  .acc-order { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 10px; }
  .acc-order-img { width: 56px; }
  .acc-order .acc-chev { display: none; }
  .acc-add { width: 100%; }
  .acc-actions .btn { flex: 1; }
}

/* ── «حدّد موقعي» (partials/geo-pick.html) — مجموعة بخط رفيع، بلا بطاقة داخل بطاقة ── */
.geo { display: grid; gap: 10px; padding: 14px 0 2px; border-top: var(--hair); }
.geo-head { display: flex; align-items: flex-start; gap: 10px; }
.geo-head b { display: block; font-size: 14px; font-weight: 600; }
.geo-head small { display: block; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.geo-pin { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.geo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border-radius: var(--radius-pill); font-size: 15px; }
.geo-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.geo-btn[aria-busy="true"] svg { -webkit-animation: geo-spin 1.4s linear infinite; animation: geo-spin 1.4s linear infinite; }
@-webkit-keyframes geo-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes geo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .geo-btn[aria-busy="true"] svg { -webkit-animation: none; animation: none; } }
.geo-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--ok); font-size: 14px; font-weight: 600; }
.geo-set a { color: var(--gold-ink); font-weight: 700; text-underline-offset: 3px; }
.geo-ok { width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.geo-link { justify-self: start; padding: 4px 0; min-height: 36px; background: none; border: 0; color: var(--gold-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.geo-set .geo-link { margin-inline-start: auto; min-height: 0; color: var(--text-3); }
.geo-paste { display: flex; gap: 8px; }
.geo-photo { display: grid; }
.geo-photo label.geo-link { display: inline-flex; align-items: center; }
.geo-shot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.geo-shot img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.geo-shot div { display: grid; gap: 2px; min-width: 0; }
.geo-shot b { font-size: 14px; }
.geo-shot small { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.geo-shot .geo-link { color: var(--text-3); }
.geo-paste input { flex: 1; min-width: 0; min-height: 46px; font-size: 16px; }
.geo-paste .btn { min-height: 46px; flex-shrink: 0; }
.geo-warn { margin: 0; font-size: 13px; color: var(--warn); font-weight: 600; }
.geo-err { margin: 0; font-size: 13.5px; color: var(--deal); }
.acc-addr-loc { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--gold-ink); text-underline-offset: 3px; }

/* ── دخول الزبون: «نسيت كلمة المرور؟» + صفحة الاستعادة الذاتية (reset.html بلا token) ── */
.lg h2 { margin-bottom: 8px; }
.lg-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--text-3); text-align: center; }
.lg-btn { width: 100%; padding: 14px; }
.lg-skip { margin-top: 8px; }
.lg-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.lg-alt { display: block; margin: 16px auto 0; padding: 6px; border: 0; background: none; color: var(--gold-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acc-complete { align-self: flex-start; margin-top: 6px; padding: 4px 12px; border: 1px solid var(--volt); border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); color: var(--gold-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.acc-note { margin: 0 0 10px; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.forgot-link { display: inline-block; margin: -4px 0 14px; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.login-err { display: grid; gap: 6px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--deal); border-radius: var(--radius-sm); font-size: 14px; color: var(--deal); }
.login-err a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fg h2 { margin: 0 0 6px; }
.fg-sub { margin: 0 0 14px; font-size: 14px; color: var(--text-3); line-height: 1.7; }
.fg-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px; text-decoration: none; }
.fg-code { font-size: 22px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.fg-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.fg-link { padding: 6px 0; min-height: 40px; background: none; border: 0; color: var(--gold-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fg-link:disabled { color: var(--text-3); text-decoration: none; cursor: default; }
.fg-help { display: block; margin-top: 6px; font-size: 13px; color: var(--text-3); text-underline-offset: 3px; line-height: 1.7; }
.fg-fail { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--warn); border-radius: var(--radius-sm); }
.fg-fail b { color: var(--warn); }
.fg-fail p { margin: 0; font-size: 14px; line-height: 1.7; }
.fg-done { margin: 12px 0 0; font-weight: 700; color: var(--ok); }
.fg-err { color: var(--deal); font-size: 14px; margin: 12px 0 0; }
.fg-back { display: block; margin-top: 14px; text-align: center; font-size: 14px; text-decoration: underline; }

/* أزرار التدوير ±45°: أيقونة دائرية بنفس ارتفاع أزرار التفكيك */
.td-ico { min-height: 40px; width: 40px; padding: 0; display: grid; place-items: center; }
.td-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ══ «أجهزتك من الداخل»: زر الهيدر + أزرار المنتج/القسم + الصفحة ══ */
.ah-chip-ins { display: inline-flex; align-items: center; gap: 6px; }
.ah-chip-ins svg { flex-shrink: 0; }
.ins-link { width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ins-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--gold-ink); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); text-decoration: none; }
.ins-chip:hover { background: transparent; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ins-bc { padding-top: 16px; font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.ins-bc a { color: inherit; }
.ins .td { margin-top: 12px; margin-bottom: 0; }
.ins-empty { padding-block: 48px; text-align: center; color: var(--text-3); }

/* ══ تتبع التوصيل للزبون: باركود الاستلام + الكابتن على الخريطة ══ */
.trk-live { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; margin: 14px 0 20px; }
.trk-qr, .trk-mapc { border: var(--hair-gold); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2, 0 4px 18px rgba(0,0,0,.06)); }
.trk-qr { padding: 16px; text-align: center; display: grid; gap: 8px; align-content: start; }
.trk-qr h2 { margin: 0; font-size: 18px; }
.trk-qr p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.trk-qr small { color: var(--deal); font-size: 12px; line-height: 1.6; }
.trk-qr-box { justify-self: center; width: min(100%, 230px); aspect-ratio: 1; padding: 10px; border-radius: 14px; background: #fff; }
.trk-qr-box svg { width: 100%; height: 100%; display: block; }
.trk-mapc { overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 340px; }
.trk-maph { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; padding: 10px 14px; }
.trk-maph small { color: var(--text-3); font-size: 12.5px; }
.trk-cmap { min-height: 280px; background: #e8e4dc; }
.trk-capbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.trk-capbar small { color: var(--text-3); }
.trk-cap span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid #C9A227; box-shadow: 0 2px 8px rgba(0,0,0,.35); font-size: 18px; }
.trk-cap .trk-veh { color: #121417; }
.trk-cap .trk-veh svg { width: 21px; height: 21px; }
.trk-home span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #121417; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.leaflet-container { font-family: var(--font-body); }
@media (max-width: 760px) { .trk-live { grid-template-columns: minmax(0, 1fr); } .trk-cmap { min-height: 300px; } }

/* ══ «الكفالات والصيانة» للزبون (/support) ══ */
.sp { padding-block: 16px 40px; max-width: 920px; }
.sp-bc { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.sp-bc a { color: inherit; }
.sp-hd h1 { margin: 10px 0 4px; font-size: clamp(24px, 3vw, 32px); }
.sp-hd p { margin: 0; color: var(--text-2); line-height: 1.8; font-size: 15px; }
.sp-tabs { margin: 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border-radius: 16px; background: var(--stripe); border: var(--hair); }
.sp-tabs button { position: relative; min-height: 48px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: 700 14px var(--font-head); cursor: pointer; }
.sp-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 8px 20px -12px rgb(0 0 0 / .45); }
.sp-tabs em { margin-inline-start: 6px; padding: 1px 7px; border-radius: 9px; background: var(--volt); color: var(--on-volt); font: 700 11px var(--font-head); font-style: normal; }
.sp-card { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: var(--hair); box-shadow: 0 6px 22px -16px rgb(0 0 0 / .35); }
.sp-card h2 { font-size: 17px; margin: 0 0 12px; }
.sp-card h2 + .field { margin-top: 0; }
.sp-card form > h2:not(:first-child), .sp-card > h2:not(:first-child) { margin-top: 18px; }
.sp-card textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--line); background: var(--paper); color: var(--text); resize: vertical; }
.sp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.sp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.sp-ph { position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border: 1.5px dashed var(--line); border-radius: 14px; cursor: pointer; text-align: center; overflow: hidden; }
.sp-ph span { font-size: 26px; }
.sp-ph img { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; }
.sp-ph b { font-size: 13.5px; }
.sp-ph small { font-size: 11.5px; color: var(--text-3); }
.sp-wnote { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; }
.sp-wnote.active { background: transparent; background: color-mix(in srgb, var(--ok, #1E7B45) 12%, transparent); color: var(--ok, #1E7B45); }
.sp-wnote.expired { background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); color: var(--deal); }
.sp-send { width: 100%; margin-top: 14px; padding: 14px; }
.sp-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.sp-empty { padding: 30px 10px; text-align: center; color: var(--text-3); }
.sp-req { margin-bottom: 12px; display: grid; gap: 8px; }
.sp-req header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sp-st { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: transparent; background: color-mix(in srgb, var(--volt) 15%, transparent); color: var(--gold-ink, var(--text)); }
.sp-st.done { background: transparent; background: color-mix(in srgb, var(--ok, #1E7B45) 14%, transparent); color: var(--ok, #1E7B45); }
.sp-st.rejected, .sp-st.cancelled { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
.sp-st.on_the_way { background: #2563EB1F; color: #2563EB; }
.sp-meta { color: var(--text-3); font-size: 12.5px; }
.sp-steps { list-style: none; margin: 4px 0; padding: 0; display: flex; gap: 4px; }
.sp-steps li { flex: 1; display: grid; gap: 4px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.sp-steps li i { height: 5px; border-radius: 3px; background: var(--line); }
.sp-steps li.done i { background: var(--volt); } .sp-steps li.done { color: var(--text-2); }
.sp-steps li.cur i { background: linear-gradient(90deg, var(--volt), transparent); background: linear-gradient(90deg, var(--volt), color-mix(in srgb, var(--volt) 30%, transparent)); } .sp-steps li.cur { color: var(--text); font-weight: 700; }
.sp-steps li.bad i { background: var(--deal); } .sp-steps li.bad { color: var(--deal); font-weight: 700; }
.sp-line { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sp-line.bad { color: var(--deal); } .sp-line.ok { color: var(--ok, #1E7B45); }
.sp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-thumbs a { display: grid; gap: 2px; text-align: center; font-size: 11px; color: var(--text-3); text-decoration: none; }
.sp-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: var(--hair); }
.sp-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sp-w { display: grid; gap: 6px; }
.sp-w small { color: var(--text-3); font-size: 12.5px; }
.sp-w p { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ok, #1E7B45); }
.sp-w.expired p { color: var(--deal); }
.sp-wbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sp-wbar i { display: block; height: 100%; background: var(--volt); }
.sp-wact { display: flex; gap: 8px; margin-top: 4px; }
@media (max-width: 560px) { .sp-two { grid-template-columns: minmax(0, 1fr); } }
.sp .field :is(input, select, textarea) { width: 100%; min-width: 0; box-sizing: border-box; }

/* ===== المنظومة القانونية: الموافقة · نافذة النسخة الجديدة · /legal · /disputes ===== */
.lgl-agree { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 14px; line-height: 1.7; color: var(--text-2); cursor: pointer; }
.lgl-agree input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--volt); }
.lgl-agree a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lgl-agree small { display: inline; color: var(--text-3); }
.qc-agree { margin-top: 12px; }
.lgl-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.lgl-box { width: min(480px, 100%); max-height: 86vh; overflow: auto; padding: 22px; border-radius: 18px; background: var(--surface, #fff); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.lgl-box h2 { margin: 0 0 6px; font-size: 20px; }
.lgl-p { margin: 0 0 12px; color: var(--text-2); line-height: 1.7; }
.lgl-list { margin: 0 0 16px; padding-inline-start: 18px; display: grid; gap: 8px; line-height: 1.6; }
.lgl-list a { font-weight: 700; color: var(--text); }
.lgl-list small { color: var(--text-3); }
.lgl-err { color: var(--deal); font-weight: 700; margin: 0 0 10px; }
.lgl-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.lgp { padding-block: 16px 48px; max-width: 860px; }
.lgp-hd h1 { font-size: clamp(24px, 4vw, 32px); margin: 8px 0; }
.lgp-hd > p { color: var(--text-2); line-height: 1.8; margin: 0 0 16px; }
.lgp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.lgp-card { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: var(--text); text-decoration: none; }
.lgp-card:hover { border-color: var(--volt); }
.lgp-card b { font-size: 16px; }
.lgp-card small { color: var(--text-3); }
.lgp-pend { justify-self: start; padding: 2px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--warn, #b45309) 15%, transparent); color: var(--text); font-size: 12px; font-weight: 700; }
.lgp-staff { margin: 16px 0; font-size: 13.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lgp-staff a { color: var(--text-2); }
.lgp-me { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.lgp-me h2 { font-size: 20px; margin: 0 0 12px; }
.lgp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lgp-none { color: var(--text-3); }
.lgp-table { overflow-x: auto; }
.lgp-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lgp-table th, .lgp-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.lgp-table th { color: var(--text-3); font-size: 12.5px; }
.lgp-meta { color: var(--text-3); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.lgp-old { padding: 2px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); font-weight: 700; font-size: 12.5px; }
.lgp-sum { padding: 10px 12px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); line-height: 1.7; }
.lgp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; font-size: 13.5px; color: var(--text-2); }
.lgp-tools label { display: inline-flex; align-items: center; gap: 6px; }
.lgp-tools select, .lgp-tools input { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; background: var(--surface, #fff); color: var(--text); font: inherit; }
.lgp-toc { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; margin: 8px 0 20px; border: 1px solid var(--line); border-radius: 12px; }
.lgp-toc a { padding: 4px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-2); font-size: 13px; text-decoration: none; }
.lgp-body { line-height: 2; font-size: 15.5px; }
.lgp-body h3 { font-size: 18px; margin: 26px 0 8px; scroll-margin-top: 90px; }
.lgp-body ul { padding-inline-start: 22px; margin: 6px 0 12px; }
.lgp-body li { margin-bottom: 4px; }
.lgp-body blockquote { margin: 0 0 18px; padding: 12px 14px; border-inline-start: 4px solid var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); border-radius: 8px; font-size: 14px; color: var(--text-2); }
.lgp-foot { display: grid; gap: 6px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); }
.lgp-foot bdi { word-break: break-all; font-family: ui-monospace, monospace; font-size: 11.5px; }
@media print { .site-head, .site-foot, .lgp-tools, .lgp-toc, .sp-bc, .chatw { display: none !important; } .lgp { max-width: none; } }

.dsp-hint { padding: 10px 12px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); font-size: 14px; line-height: 1.7; margin: 0 0 12px; }
.dsp-drop { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; font-weight: 700; }
.dsp-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.dsp-files li { display: flex; gap: 8px; align-items: center; }
.dsp-files button { border: 0; background: none; color: var(--deal); cursor: pointer; font-size: 15px; }
.dsp-row { display: grid; gap: 4px; width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit; margin-bottom: 10px; }
.dsp-r1, .dsp-dh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dsp-row small { color: var(--text-3); }
.dsp-new { color: var(--text) !important; font-weight: 700; }
.dsp-st { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
.dsp-st.open, .dsp-st.in_review { background: transparent; background: color-mix(in srgb, var(--warn, #b45309) 15%, transparent); }
.dsp-st.awaiting_customer { background: transparent; background: color-mix(in srgb, var(--volt) 25%, transparent); }
.dsp-st.resolved { background: transparent; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.dsp-st.rejected { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
.dsp-dh h2 { font-size: 19px; margin: 0 0 4px; }
.dsp-dh small { color: var(--text-3); }
.dsp-decision { margin: 12px 0; padding: 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); line-height: 1.8; }
.dsp-ev { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.dsp-ev li { padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); max-width: 92%; }
.dsp-ev li.customer { justify-self: start; }
.dsp-ev li.staff { justify-self: end; background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
.dsp-ev li.system { justify-self: center; background: none; text-align: center; font-size: 13px; }
.dsp-ev p { margin: 4px 0; white-space: pre-wrap; line-height: 1.7; }
.dsp-ev small { color: var(--text-3); font-size: 11.5px; }
.dsp-who { font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.dsp-sys { color: var(--text-3); font-size: 13px; }
.dsp-att { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-att a { font-size: 13px; }
.dsp-reply { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.dsp-reply textarea { width: 100%; box-sizing: border-box; }
.dsp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dsp .field :is(input, select, textarea) { width: 100%; min-width: 0; box-sizing: border-box; }
.dsp .sp-tabs { grid-template-columns: repeat(2, 1fr); }

/* ===== /categories: كل الأقسام (بدل عرضها كلها بقائمة الهاتف) ===== */
.dr-cats-link { margin-top: 8px; }
.cats-pg { padding-block: 14px 48px; }
.cats-hd { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin: 6px 0 18px; }
.cats-hd h1 { margin: 0 0 4px; font-size: clamp(24px, 4vw, 34px); }
.cats-hd p { margin: 0; color: var(--text-2); }
.cats-q { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 0; min-height: 46px; padding: 0 14px; border: var(--hair); border-radius: 14px; background: var(--surface); color: var(--text-3); }
.cats-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 500 15px var(--font-body); }
.cats-q:focus-within { border-color: var(--volt); box-shadow: 0 0 0 3px var(--glow); }
.cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.cats-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--hair); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cats-card:hover { transform: translateY(-3px); border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); }
.cats-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.cats-img img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.cats-card:hover .cats-img img { transform: scale(1.04); }
html[data-mode="dark"] .cats-img img { mix-blend-mode: normal; }
.cats-txt { display: grid; gap: 2px; padding: 10px 12px 12px; }
.cats-txt b { font-size: 15.5px; line-height: 1.4; }
.cats-txt small { color: var(--text-3); font-size: 12.5px; }
.cats-skel .cats-card { min-height: 190px; background: linear-gradient(90deg, var(--stripe) 0 40%, var(--stripe) 50%, var(--stripe) 60% 100%); background: linear-gradient(90deg, var(--stripe) 0 40%, color-mix(in srgb, var(--stripe) 50%, var(--surface)) 50%, var(--stripe) 60% 100%); background-size: 300% 100%; animation: catsSk 1.2s linear infinite; }
@keyframes catsSk { to { background-position: -150% 0; } }
.cats-none { text-align: center; color: var(--text-3); padding: 30px 0; }
@media (max-width: 560px) {
  .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cats-q { flex: 1 1 100%; }
  .cats-txt b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .cats-card, .cats-skel .cats-card { transition: none; animation: none; } }

/* ══ القائمة الجانبية v2 (2026-10-07، ترتيب ص87 2026-10-14): مرتّبة حسب الاستخدام ══
   حسابي (للمسجَّل: بطاقات صغيرة) ← التسوق (شبكة ٣، الاختصارات الأكثر استخداماً) ← [زائر: بطاقة الدخول]
   ← الأقسام بعائلات أكورديون (<details name> = وحدة مفتوحة) ← المساعدة (ما بعد البيع + شرح الصفحة) ← الإعدادات ← الخروج.
   كل قسم ظاهر يفصله خط رفيع عن الذي قبله، بإيقاع مسافات واحد (١٨ فوق العنوان / ١٨ تحت المحتوى). نفس التوكِنات ⇒ الفاتح/الداكن والحزم شغّالين. */
.dr-panel { width: min(90vw, 420px); }
.dr-body { gap: 0; padding-top: 2px; }
.dr-body > .dr-acc, .dr-body > .dr-sec { padding-block: 18px; }
.dr-body > .dr-acc:first-child { padding-top: 14px; }
/* الفاصل: حسابي (للمسجَّل فقط) يحمل خطه السفلي؛ بقية الأقسام خط علوي عبر .dr-sec + .dr-sec.
   القسم الأول للزائر هو التسوق (قبله حسابي المخفي وليس .dr-sec) ⇒ بلا خط فوقه */
.dr-body > .dr-acc { border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dr-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dr-sh .dr-h { margin: 0; }
.dr-h { font-size: 16px !important; }
.dr-h-sm { font-size: 14px !important; color: var(--text-2); margin-bottom: 8px; }
.dr-who { color: var(--text-2); font-size: 13px; font-weight: 600; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-more { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; color: var(--gold-ink); font: 700 13px var(--font-body); background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); }
.dr-more:hover { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
.dr-more:focus-visible, .drg-s:focus-visible, .dr-tiles a:focus-visible, .dr-quick a:focus-visible, .drg-grid a:focus-visible, .dr-set-b:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* حسابي: ٤ بطاقات صغيرة بصف واحد (أيقونة فوق، اسم تحت) */
.dr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dr-tiles a { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 10px 4px 9px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font: 700 12px/1.35 var(--font-body); text-align: center; transition: border-color .2s, background-color .2s; }
.dr-tiles a:hover { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); }
.dr-tiles .dr-ic, .dr-quick .dr-ic { width: 34px; height: 34px; }

/* أكورديون العائلات */
.drg-box { display: grid; gap: 6px; }
.drg { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; transition: border-color .2s; }
.drg[open] { border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 45%, transparent); }
.drg-s { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; list-style: none; cursor: pointer; color: var(--text); font: 700 15px var(--font-body); user-select: none; -webkit-tap-highlight-color: transparent; }
.drg-s::-webkit-details-marker { display: none; }
.drg-s:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.drg-ic { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 11%, transparent); }
.drg-t { flex: 1; min-width: 0; }
.drg-n { flex-shrink: 0; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.drg-chev { flex-shrink: 0; width: 16px; height: 16px; background: var(--text-3); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.drg[open] > .drg-s .drg-chev { transform: rotate(180deg); background: var(--gold-ink); }
.drg[open] > .drg-s { border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
/* التصنيفات جوّا العائلة: شرائح مضغوطة بعمودين (صورة ٣٢ + اسم سطرين كحد أقصى) */
.drg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.drg-grid a { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 6px 8px; border-radius: 12px; color: var(--text);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 55%, var(--surface)); border: 1px solid transparent; font: 600 13.5px/1.35 var(--font-body); transition: border-color .2s, background-color .2s; }
.drg-grid a:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 50%, transparent); }
.drg-grid a.active { border-color: var(--volt); color: var(--gold-ink); background: var(--surface); background: color-mix(in srgb, var(--volt) 8%, var(--surface)); }
.drg-grid img, .drg-grid .dr-cat-ph { flex-shrink: 0; width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: var(--surface); padding: 2px; }
html[data-mode="dark"] .drg-grid img { background: #F1EDE5; }
.drg-grid .cg-n { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: keep-all; }
@media (max-width: 339px) { .drg-grid { grid-template-columns: 1fr; } .dr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .drg-chev { transition: none; } }

/* التسوق: شبكة ٣ بطاقات مضغوطة بدل ٥ صفوف طويلة */
.dr-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dr-quick a { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 11px 4px 10px; border-radius: 14px; color: var(--text);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); background: var(--surface); font: 700 12px/1.35 var(--font-body); text-align: center; transition: border-color .2s, background-color .2s; }
.dr-quick a:hover { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); }
.dr-quick .dr-cnt { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; }

/* المساعدة: ما بعد البيع (أكورديون بنفس شكل العائلات) + «اشرح لي هذه الصفحة» بطاقة مطابقة تحتها */
.dr-help { display: grid; gap: 6px; }
.dr-svc .dr-list { padding: 2px 10px 6px; }
.dr-help .dr-guide, .dr-help .dr-app { gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  font: 700 15px var(--font-body); transition: border-color .2s, background-color .2s; }
.dr-help .dr-guide:hover, .dr-help .dr-app:hover { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 5%, var(--surface)); }
.dr-help .dr-guide .dr-ic, .dr-help .dr-app .dr-ic { width: 34px; height: 34px; }   /* ص102: «التطبيق والإشعارات» بنفس شكل جيرانها */
/* زائر: بطاقة الدخول تحت التسوق */
.dr-acc-guest .dr-guest { margin: 0; display: flex; align-items: center; gap: 12px; padding: 12px; }
.dr-acc-guest .dr-guest p { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.6; }
.dr-acc-guest .dr-guest-b { display: block; flex-shrink: 0; }
.dr-acc-guest .dr-guest-b .btn { min-height: 42px; padding-inline: 16px; white-space: nowrap; font-size: 13.5px; }
@media (max-width: 359px) { .dr-acc-guest .dr-guest { flex-direction: column; align-items: stretch; } }

/* الإعدادات: صف ٣ أزرار (أيقونة + اسم + القيمة الحالية) بدل ٣ صفوف */
.dr-set-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dr-set-b { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background: var(--surface); color: var(--text); cursor: pointer; font: inherit; text-align: center; transition: border-color .2s; }
.dr-set-b:hover { border-color: var(--volt); }
.dr-set-ic { display: grid; place-items: center; color: var(--gold-ink); }
.dr-set-ic svg { width: 18px; height: 18px; }
.dr-set-l { color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.dr-set-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.dr-foot { margin-top: 0; padding-top: 18px; }

/* التابلت (قائمة أعرض): أعمدة أكثر */
@media (min-width: 600px) {
  .dr-panel { width: min(80vw, 460px); }
  .drg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drg-grid a { flex-direction: column; text-align: center; gap: 5px; padding: 8px 4px; }
  .drg-grid img, .drg-grid .dr-cat-ph { width: 40px; height: 40px; }
}

/* ══ قائمة «الأقسام» بالكمبيوتر — صالة عرض ليلية (cat-groups.js paintMega) ══
   لوحة داكنة بالوضعين (واجهة عرض مضاءة فوق الصفحة)، عمود العائلات على البداية، وعلى المسرح صور الأقسام كفسيفساء:
   أول قسم بطاقة كبيرة، والمرور على صورة بيطفّي الباقي شوي (بقعة ضوء). ارتفاع ثابت ⇒ تبديل العائلة ما بيهزّ اللوحة. */
.ah-row { position: relative; }
.ah-mega-w:has(> .mg) { position: static; }
.ah-mega.mg {
  --mg-bg: #0E0E10; --mg-ink: #F3EEE3; --mg-ink2: rgba(243, 238, 227, .64); --mg-ink3: rgba(243, 238, 227, .44); --mg-gold: #D6B566; --mg-line: rgba(214, 181, 102, .16);
  inset-inline: 12px; width: auto; top: calc(100% + 6px); display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden;
  border-radius: 22px; color: var(--mg-ink); border: 1px solid var(--mg-line); white-space: normal; font-size: 14px; font-weight: 400;
  background: radial-gradient(70% 90% at 30% 0%, rgba(214, 181, 102, .09), transparent 60%), linear-gradient(180deg, #141416, var(--mg-bg));
  box-shadow: inset 0 1px 0 rgba(233, 207, 134, .22), 0 40px 90px -24px rgba(0, 0, 0, .65), 0 14px 30px -18px rgba(0, 0, 0, .5);
}
.ah-mega.mg a { min-height: 0; padding: 0; border: 0; border-radius: 0; font: inherit; color: inherit; background: none; transform: none; }
/* عمود العائلات */
.mg-rail { display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 16px; border-inline-end: 1px solid var(--mg-line); background: rgba(255, 255, 255, .015); }
.mg-fams { display: grid; gap: 4px; }
.mg-fam { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--mg-ink2); text-align: start; font: inherit; transition: background .3s var(--ease-out), color .3s; }
.mg-fam:hover { background: rgba(255, 255, 255, .04); color: var(--mg-ink); }
.mg-fam.on { background: linear-gradient(90deg, rgba(214, 181, 102, .05), rgba(214, 181, 102, .14)); color: var(--mg-ink); }
html.ltr .mg-fam.on { background: linear-gradient(270deg, rgba(214, 181, 102, .05), rgba(214, 181, 102, .14)); }
.mg-fam:focus-visible, .ah-mega.mg a:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }
.mg-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--mg-gold); border: 1px solid var(--mg-line); background: rgba(214, 181, 102, .05);
  transition: background .3s, color .3s, border-color .3s; }
.mg-ic svg { width: 19px; height: 19px; }
.mg-fam.on .mg-ic { background: var(--gold-metal); color: #111; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(214, 181, 102, .9); }
.mg-ft { display: grid; gap: 1px; min-width: 0; }
.mg-ft b { font: 800 15px/1.4 'Cairo', var(--font-head); }
.mg-ft small { font-size: 12px; color: var(--mg-ink3); }
.mg-chev { width: 8px; height: 8px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .25s, transform .3s var(--ease-out); }
html.ltr .mg-chev { transform: rotate(-135deg); }
.mg-fam.on .mg-chev { opacity: .8; color: var(--mg-gold); }
.mg-foot { margin-top: auto; display: grid; gap: 8px; }
.ah-mega.mg .mg-inside { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; color: var(--mg-ink);
  border: 1px solid var(--mg-line); background: linear-gradient(135deg, rgba(214, 181, 102, .1), rgba(214, 181, 102, 0) 70%); transition: border-color .3s, background .3s; }
.ah-mega.mg .mg-inside:hover { border-color: rgba(214, 181, 102, .5); background: linear-gradient(135deg, rgba(214, 181, 102, .18), rgba(214, 181, 102, .02) 70%); color: var(--mg-ink); transform: none; }
.ah-mega.mg .mg-all { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 0; border-radius: 12px; font: 800 13.5px 'Cairo', var(--font-head); color: var(--mg-gold); border: 0; }
.ah-mega.mg .mg-all::after { content: ''; width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease-out); }
html.ltr .ah-mega.mg .mg-all::after { transform: rotate(-135deg); }
.ah-mega.mg .mg-all:hover { background: rgba(214, 181, 102, .08); color: var(--mg-gold); }
/* المسرح */
.mg-stage { display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 20px 22px 22px; min-width: 0; }
.mg-head { display: flex; align-items: baseline; gap: 12px; }
.mg-title { margin: 0; font: 800 24px/1.3 'Cairo', var(--font-head); color: var(--mg-ink); letter-spacing: -.01em; }
.mg-sub { font-size: 13px; color: var(--mg-ink3); }
.mg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; height: clamp(330px, 52vh, 420px); }
.mg-grid.few { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ah-mega.mg .mg-tile { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #1A1A1D; color: #fff; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); animation: mgIn .55s var(--ease-out) both; animation-delay: calc(var(--i) * 32ms); }
.ah-mega.mg .mg-tile.big { grid-column: span 2; grid-row: span 2; }
.mg-well { position: absolute; inset: 0; z-index: -1; }
.mg-well img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .45s, opacity .45s; }
/* الصور المقصوصة (شفافة) على منصّة بضوء ذهبي من تحت */
.mg-tile.cut .mg-well { background: radial-gradient(90% 70% at 50% 100%, rgba(214, 181, 102, .32), transparent 70%), linear-gradient(180deg, #1B1B1E, #111113); }
.mg-tile.cut .mg-well img { object-fit: contain; padding: 12% 14% 26%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.mg-tile.big.cut .mg-well img { padding: 8% 18% 20%; }
.mg-cap { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 36px 14px 12px;
  background: linear-gradient(0deg, rgba(8, 8, 10, .86), rgba(8, 8, 10, .5) 55%, transparent); }
.mg-tn { min-width: 0; font: 800 14px/1.4 'Cairo', var(--font-head); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.mg-tile.big .mg-tn, .mg-grid.few .mg-tn { font-size: 20px; }
.mg-tile.big .mg-cap, .mg-grid.few .mg-cap { padding: 60px 20px 18px; }
.mg-go { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-metal); opacity: 0; transform: translateX(8px) scale(.8);
  transition: opacity .3s, transform .4s var(--ease-out); }
html.ltr .mg-go { transform: translateX(-8px) scale(.8); }
.mg-go::before { content: ''; width: 7px; height: 7px; margin-inline-start: 3px; border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); }
html.ltr .mg-go::before { transform: rotate(-135deg); margin-inline: 0 3px; }
.ah-mega.mg .mg-tile:hover, .ah-mega.mg .mg-tile:focus-visible { color: #fff; background: #1A1A1D; transform: none; box-shadow: inset 0 0 0 1px rgba(214, 181, 102, .7), 0 18px 40px -20px rgba(214, 181, 102, .45); }
.mg-tile:hover .mg-well img, .mg-tile:focus-visible .mg-well img { transform: scale(1.06); }
.mg-tile:hover .mg-go, .mg-tile:focus-visible .mg-go { opacity: 1; transform: none; }
.mg-tile.active { box-shadow: inset 0 0 0 1.5px var(--mg-gold); }
/* بقعة الضوء: المرور على صورة بيطفّي جاراتها */
.mg-grid:hover .mg-tile:not(:hover) .mg-well img { filter: brightness(.55) saturate(.8); }
/* الوضع النهاري: نفس الصالة بس عاجية مضاءة — ورق دافئ، حبر غامق، ذهب أغمق للنص (تباين AA)، ظلال بنية ناعمة.
   صور الأقسام بتضل بتدرّج غامق تحت الاسم (الصور مزدحمة)، والصور المقصوصة على منصّة عاجية باسم غامق. */
html:not([data-mode="dark"]) .ah-mega.mg {
  --mg-ink: #1A1712; --mg-ink2: rgba(26, 23, 18, .7); --mg-ink3: rgba(26, 23, 18, .54); --mg-gold: #8A6A1F; --mg-line: rgba(160, 128, 56, .24);
  background: radial-gradient(70% 90% at 30% 0%, rgba(214, 181, 102, .16), transparent 60%), linear-gradient(180deg, #FFFDF8, #F5F0E6);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 36px 80px -28px rgba(70, 52, 20, .38), 0 12px 28px -18px rgba(70, 52, 20, .3);
}
html:not([data-mode="dark"]) .mg-rail { background: rgba(160, 128, 56, .05); }
html:not([data-mode="dark"]) .mg-fam:hover { background: rgba(26, 23, 18, .045); }
html:not([data-mode="dark"]) .mg-fam.on { background: linear-gradient(90deg, rgba(214, 181, 102, .1), rgba(214, 181, 102, .26)); }
html.ltr:not([data-mode="dark"]) .mg-fam.on { background: linear-gradient(270deg, rgba(214, 181, 102, .1), rgba(214, 181, 102, .26)); }
html:not([data-mode="dark"]) .mg-ic { background: #FFFFFF; box-shadow: 0 4px 10px -6px rgba(70, 52, 20, .35); }
html:not([data-mode="dark"]) .mg-fam.on .mg-ic { box-shadow: 0 8px 18px -10px rgba(160, 120, 40, .8); }
html:not([data-mode="dark"]) .ah-mega.mg .mg-inside { background: linear-gradient(135deg, rgba(214, 181, 102, .2), rgba(255, 255, 255, .6) 70%); }
html:not([data-mode="dark"]) .ah-mega.mg .mg-inside:hover { background: linear-gradient(135deg, rgba(214, 181, 102, .3), rgba(255, 255, 255, .7) 70%); }
html:not([data-mode="dark"]) .ah-mega.mg .mg-all:hover { background: rgba(214, 181, 102, .14); }
html:not([data-mode="dark"]) .ah-mega.mg .mg-tile { background: #EDE6D8; box-shadow: inset 0 0 0 1px rgba(26, 23, 18, .07), 0 10px 24px -18px rgba(70, 52, 20, .45); }
html:not([data-mode="dark"]) .ah-mega.mg .mg-tile:hover, html:not([data-mode="dark"]) .ah-mega.mg .mg-tile:focus-visible {
  background: #EDE6D8; box-shadow: inset 0 0 0 1.5px rgba(184, 146, 60, .85), 0 20px 40px -20px rgba(120, 90, 30, .5); }
html:not([data-mode="dark"]) .mg-tile.cut .mg-well { background: radial-gradient(90% 70% at 50% 100%, rgba(214, 181, 102, .38), transparent 70%), linear-gradient(180deg, #FFFFFF, #F1EADC); }
html:not([data-mode="dark"]) .mg-tile.cut .mg-well img { filter: drop-shadow(0 16px 14px rgba(70, 52, 20, .28)); }
html:not([data-mode="dark"]) .mg-tile.cut .mg-cap { background: linear-gradient(0deg, rgba(255, 253, 248, .95), rgba(255, 253, 248, .6) 55%, transparent); }
html:not([data-mode="dark"]) .mg-tile.cut .mg-tn { color: var(--mg-ink); text-shadow: none; }
html:not([data-mode="dark"]) .mg-grid:hover .mg-tile:not(:hover) .mg-well img { filter: saturate(.55) brightness(.92); opacity: .62; }
@keyframes mgIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ah-mega.mg .mg-tile { animation: none; } .mg-well img, .mg-go, .mg-chev { transition: none; } }
@media (max-width: 1180px) { .ah-mega.mg { grid-template-columns: 248px minmax(0, 1fr); } .mg-tn { font-size: 13px; } .mg-ft b { font-size: 14px; } .mg-grid:not(.few) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* الإنكليزي: أسماء الأقسام كلمة وحدة طويلة (Refrigerators) ⇒ عمود واحد بالهاتف بدل قص الكلمة */
@media (max-width: 599px) { html[lang="en"] .drg-grid { grid-template-columns: 1fr; } }
html[lang="en"] .drg-grid .cg-n { word-break: normal; }
/* رمز الاستلام النصي تحت الباركود (بديل المسح) */
.trk-code { margin: 0; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.trk-code b { font: 700 20px/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .08em; color: var(--text); user-select: all; }
.trk-code-full b { font-size: 17px; line-height: 1.45; letter-spacing: .03em; text-align: center; }
.trk-code-full b span { display: inline-block; }   /* القيمة الكاملة: ALWD-DLV:رقم الطلب: ثم الرمز — يلتف بين الجزأين فقط */
/* الطلب السريع: سبب تعطيل زر الدفع + ملاحظة «شراء هالمنتج بس» */
.qc-miss { margin: 6px 0 0; font-size: 13px; color: var(--text-2); text-align: center; line-height: 1.7; }
.qc-miss b { color: var(--text); font-weight: 600; }
.qc-buy { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); font-size: 13px; }
/* تأكيد الإيصال المقروء قبل الإرسال */
.pv-confirm { display: grid; gap: 10px; padding: 14px; border: var(--hair-gold, 1px solid var(--line)); border-radius: 16px; background: var(--surface); }
.pv-confirm .pv-scan-img img { max-height: 180px; width: auto; margin-inline: auto; display: block; border-radius: 10px; }
.pv-chk { margin: 0; display: grid; gap: 6px; }
.pv-chk > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pv-chk dt { color: var(--text-2); font-size: 13px; }
.pv-chk dd { margin: 0; text-align: end; }
.pv-chk-bad { display: block; color: var(--deal); font-size: 12.5px; font-weight: 600; }
.pv-chk-b { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-chk-b .btn { flex: 1 1 140px; min-height: 48px; }
/* صفحة طلب الزبون: روابط الفاتورة والشكوى + خطأ التحميل */
.ord-more { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 12px; font-size: 13.5px; }
.ord-more a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.ord-err { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--deal); font-size: 14px; }

/* الدخول: بديل تلغرام لرمز واتساب */
.lg-tg { display: block; margin-top: 12px; padding: 10px 12px; border: var(--bw-1, 1px) dashed var(--line); border-radius: 12px; text-align: center; color: var(--gold-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; min-height: 44px; }
.lg-tg:hover { border-style: solid; }

/* صفحة الدفع: «رمز الدفع» الشخصي بملاحظة شام كاش */
.pv-pc { display: grid; gap: 8px; }
.pv-pc-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 2px dashed var(--gold, #b08a3e); border-radius: 14px; background: var(--gold-soft, rgba(176,138,62,.08)); cursor: pointer; font: inherit; color: inherit; min-height: 56px; }
.pv-pc-code b { font-size: 28px; letter-spacing: 6px; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.pv-pc-tap { font-size: 13px; font-weight: 700; color: var(--gold-ink, inherit); white-space: nowrap; }
.pv-pc-how { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2, inherit); }
.pv-notify { display: grid; gap: 8px; margin-bottom: 6px; }
.pv-up-toggle { justify-self: start; margin-top: 4px; }
.wl-opt { font-weight: 500; color: var(--ink-2, inherit); font-size: 12.5px; }
/* الفني بالطريق داخل بطاقة طلب الصيانة: نفس تتبع الكابتن */
.sp-trk { margin: 12px 0 4px; }
.sp-trk .trk-cap span svg { display: block; }
.sp-trk .trk-code-full b { font-size: clamp(13px, 3.9vw, 17px); letter-spacing: 0; }   /* ص93: البطاقة داخل بطاقة الطلب أضيق ⇒ «ALWD-MNT:رقم الطلب:» يتسع لسطر واحد على الهاتف */

/* ══ ص46: جرس إشعارات الزبون — قائمة منسدلة أنيقة: الأحدث فوق، نقطة خضرا لغير المقروء متل واتساب ══ */

/* ص56/ص87: شاشة «أكّد رقمك عبر واتساب» انتقلت لـcss/wa-verify.css (مشتركة مع لوحات العمال) */

/* ص61: رأس الموبايل — اسم العلامة بيتقلّص وبينقطع بـ«…» بدل ما يدفش الأيقونات برّا الشاشة
   (جرس الإشعارات للمسجّلين صار ٤ أيقونات: بحث/جرس/سلة/قائمة) */
@media (max-width: 767px) {
  .ah-row { gap: 8px; }
  .ah-logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .ah-mark { width: 40px; height: 40px; }
  .ah-name { min-width: 0; }
  .ah-name b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ah-name small { overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; font-size: 11px; }
  .ah-icons { flex-shrink: 0; gap: 0; }
  .ah-ic { width: 40px; height: 40px; }
}
@media (max-width: 360px) { .ah-name small { display: none; } .ah-name b { font-size: 14px; } .ah-mark { width: 36px; height: 36px; } }

/* ص62: اختيار واتساب / واتساب أعمال بالدخول */
.lg-app { margin: -4px 0 14px; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.lg-app-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.lg-app-b a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-weight: 700; text-decoration: none; }
.lg-app-b a:hover { border-color: var(--wa); }

/* ── ص63: أقسام الرئيسية — صف واحد ← «شاهد كل الأقسام» ← «عرض أقل»، و«إخفاء» بيطوي القسم ── */
.ah-chip-ic { display: inline-flex; align-items: center; gap: 6px; }
.ah-chip-ic svg { flex-shrink: 0; opacity: .85; }
.ah-sub-sep { flex-shrink: 0; align-self: center; width: 1px; height: 20px; margin-inline: 2px; background: var(--line); background: color-mix(in srgb, var(--gold) 45%, var(--line)); }

.hm-cats { padding-block: 18px 6px; }
.hm-cats-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hm-cats-h { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--font-display, var(--font-head)); font-size: 19px; font-weight: 800; }
.hm-cats-h small { font-family: var(--font-body, inherit); font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.hm-cats-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s; }
.hm-cats-tg:hover { color: var(--text); border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.hm-cats-tg svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.hm-cats[data-ui="hidden"] .hm-cats-tg svg { transform: rotate(180deg); }
.hm-cats-tg:focus-visible, .hm-cats-more:focus-visible, .hm-cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* الطيّ: ارتفاع متحرّك بـgrid-template-rows (0fr ⇄ 1fr) بلا قياس بالـJS */
.hm-cats-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.hm-cats-fold.shut { grid-template-rows: 0fr; opacity: 0; }
.hm-cats-in { min-height: 0; overflow: hidden; }
.hm-cats-fold.shut .hm-cats-in { visibility: hidden; transition: visibility 0s .45s; }

.hm-cats-grid { list-style: none; margin: 0; padding: 4px 2px 6px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px 10px; }
.hm-cats-grid li { min-width: 0; }
.hm-cats-grid li.late { animation: hmCatIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes hmCatIn { from { opacity: 0; transform: translateY(12px) scale(.94); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.hm-cats-grid .hm-cat { width: auto; flex-shrink: 1; gap: 7px; text-decoration: none; }
.hm-cats-grid .hm-cat-img { position: relative; width: min(100%, 78px); height: auto; aspect-ratio: 1; isolation: isolate;
  background: radial-gradient(circle at 50% 38%, var(--surface) 55%, var(--surface) 100%);
  background: radial-gradient(circle at 50% 38%, var(--surface) 55%, color-mix(in srgb, var(--gold) 10%, var(--surface)) 100%);
  border: 1.5px solid var(--line);
  border: 1.5px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  box-shadow: 0 8px 18px -12px rgba(60, 44, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .35s; }
/* حلقة ذهبية بتلمع تحت المؤشر/اللمس */
.hm-cats-grid .hm-cat-img::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 210deg, transparent 0 20%, var(--gold) 35%, transparent 55% 100%);
  background: conic-gradient(from 210deg, transparent 0 20%, color-mix(in srgb, var(--gold) 70%, transparent) 35%, transparent 55% 100%);
  transition: opacity .35s; }
.hm-cats-grid .hm-cat:hover .hm-cat-img, .hm-cats-grid .hm-cat:focus-visible .hm-cat-img { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 24px -14px rgba(60, 44, 10, .7); }
.hm-cats-grid .hm-cat:hover .hm-cat-img::after, .hm-cats-grid .hm-cat:focus-visible .hm-cat-img::after { opacity: 1; }
.hm-cats-grid .hm-cat:active .hm-cat-img { transform: scale(.96); }
.hm-cats-grid .hm-cat-img img { width: 76%; height: 76%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hm-cats-grid .hm-cat:hover .hm-cat-img img { transform: scale(1.06); }
.hm-cats-grid .hm-cat b { max-width: 100%; font-size: 13px; font-weight: 800; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-cats-grid .hm-cat small { margin-top: -3px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }

.hm-cats-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; padding: 0 18px;
  border-radius: 14px; border: 1.5px dashed var(--gold); border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); background: transparent; background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--gold-ink, var(--text)); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background-color .25s, border-color .25s, transform .2s; }
.hm-cats-more:hover { background: transparent; background: color-mix(in srgb, var(--gold) 14%, transparent); border-style: solid; }
.hm-cats-more:active { transform: scale(.99); }
.hm-cats-more svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.hm-cats-grid.all + .hm-cats-more svg { transform: rotate(180deg); }
.hm-cats[data-ui="hidden"] { padding-bottom: 0; }
.hm-cats[data-ui="hidden"] .hm-cats-bar { margin-bottom: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); background: color-mix(in srgb, var(--surface) 60%, transparent); }

@media (min-width: 640px) { .hm-cats-grid .hm-cat-img { width: min(100%, 88px); } .hm-cats-more { width: auto; margin-inline: auto; padding: 0 26px; } }
@media (min-width: 1024px) { .hm-cats { padding-top: 28px; } .hm-cats-h { font-size: 23px; } .hm-cats-grid { gap: 22px 16px; } .hm-cats-grid .hm-cat-img { width: min(100%, 100px); } .hm-cats-grid .hm-cat b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hm-cats-fold, .hm-cats-grid li.late, .hm-cats-grid .hm-cat-img, .hm-cats-grid .hm-cat-img img { transition: none; animation: none; } }

/* ══════════ ص64: رحلة الشراء (السلة ← التوصيل ← المراجعة ← الدفع) — طبقة co-* على توكنات المتجر ══════════
   مسافات بمضاعفات 4px · أزرار 48–52px · عناوين 24–28 / أقسام 18–20 / نص 15–16 / مساعد 13–14 */
.co-page { --co-r: 16px; --co-r-sm: 12px; --co-gap: 16px; --co-line: color-mix(in srgb, var(--text) 12%, transparent);
  --co-card: var(--surface); --co-soft: color-mix(in srgb, var(--gold) 7%, var(--surface)); --co-ink2: var(--text-2);
  padding-block: 16px 32px; max-width: 1080px; }
body:has(.co-page) .chatw { display: none; }   /* الزر العائم للمحادثة/واتساب بيغطي أزرار الشراء — المساعدة موجودة داخل صفحة الدفع */
.co-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.co-page .btn { min-height: 48px; border-radius: 14px; font-size: 16px; font-weight: 800; }

/* مؤشر المراحل */
.co-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: s; }
.co-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-3); text-align: center; }
.co-steps li::before { content: ""; position: absolute; top: 13px; inset-inline-start: calc(50% + 16px); inset-inline-end: calc(-50% + 16px); height: 2px; border-radius: 2px; background: var(--co-line); }
.co-steps li:last-child::before { display: none; }
.co-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; background: var(--surface); border: 2px solid var(--co-line); color: var(--text-3); }
.co-steps i b { font-size: 12.5px; font-weight: 800; }
.co-steps i svg { display: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* منجزة */
:is([data-co-step="2"]) .co-steps li[data-s="1"], :is([data-co-step="3"]) .co-steps li:is([data-s="1"], [data-s="2"]), :is([data-co-step="4"]) .co-steps li:is([data-s="1"], [data-s="2"], [data-s="3"]) { color: var(--text-2); }
:is([data-co-step="2"]) .co-steps li[data-s="1"] i, [data-co-step="3"] .co-steps li:is([data-s="1"], [data-s="2"]) i, [data-co-step="4"] .co-steps li:is([data-s="1"], [data-s="2"], [data-s="3"]) i { background: var(--gold); border-color: var(--gold); color: #17140c; }
:is([data-co-step="2"]) .co-steps li[data-s="1"] i svg, [data-co-step="3"] .co-steps li:is([data-s="1"], [data-s="2"]) i svg, [data-co-step="4"] .co-steps li:is([data-s="1"], [data-s="2"], [data-s="3"]) i svg { display: block; }
:is([data-co-step="2"]) .co-steps li[data-s="1"] i b, [data-co-step="3"] .co-steps li:is([data-s="1"], [data-s="2"]) i b, [data-co-step="4"] .co-steps li:is([data-s="1"], [data-s="2"], [data-s="3"]) i b { display: none; }
[data-co-step="2"] .co-steps li[data-s="1"]::before, [data-co-step="3"] .co-steps li:is([data-s="1"], [data-s="2"])::before, [data-co-step="4"] .co-steps li:is([data-s="1"], [data-s="2"], [data-s="3"])::before { background: var(--gold); }
/* الحالية */
[data-co-step="1"] .co-steps li[data-s="1"], [data-co-step="2"] .co-steps li[data-s="2"], [data-co-step="3"] .co-steps li[data-s="3"], [data-co-step="4"] .co-steps li[data-s="4"] { color: var(--text); }
[data-co-step="1"] .co-steps li[data-s="1"] i, [data-co-step="2"] .co-steps li[data-s="2"] i, [data-co-step="3"] .co-steps li[data-s="3"] i, [data-co-step="4"] .co-steps li[data-s="4"] i {
  border-color: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }

.co-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.co-title h1 { margin: 0; font-size: clamp(22px, 5vw, 28px); font-weight: 800; }
.co-count { font-size: 14px; font-weight: 700; color: var(--text-3); }

/* الحالات: تحميل/خطأ/فارغة */
.co-skel { display: grid; gap: 12px; }
.co-skel > div { border-radius: var(--co-r); background: linear-gradient(90deg, var(--co-line) 0 30%, transparent 50%, var(--co-line) 70%) 0 0 / 300% 100%; background: linear-gradient(90deg, var(--co-line) 0 30%, color-mix(in srgb, var(--text) 5%, transparent) 50%, var(--co-line) 70%) 0 0 / 300% 100%; animation: coSk 1.4s linear infinite; opacity: .6; }
.co-sk-line { height: 104px; } .co-sk-sum { height: 180px; }
@keyframes coSk { to { background-position: -300% 0; } }
.co-state { display: grid; justify-items: center; gap: 8px; max-width: 440px; margin: 24px auto; padding: 32px 20px; text-align: center; border-radius: 20px; background: var(--co-card); border: 1px solid var(--co-line); }
.co-state > svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--co-soft); }
.co-state h2 { margin: 4px 0 0; font-size: 20px; }
.co-state p { margin: 0 0 8px; color: var(--co-ink2); font-size: 15px; line-height: 1.7; }
.co-state-err > svg { stroke: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); }

/* السلة */
.co-grid { display: grid; gap: 16px; }
.co-lines { display: grid; gap: 12px; align-content: start; }
.co-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--co-r); background: var(--co-card); border: 1px solid var(--co-line); transition: opacity .2s, border-color .2s; }
.co-line.off { border-style: dashed; }
.co-line.off .co-thumb { opacity: .5; }
.co-line.busy { opacity: .7; }
.co-thumb { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--co-r-sm); background: #fff; overflow: hidden; }
.co-thumb img { width: 88%; height: 88%; object-fit: contain; }
.co-info { min-width: 0; display: grid; gap: 4px; align-content: start; }
.co-name { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.45; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-name:hover { color: var(--gold-ink); }
.co-meta { font-size: 13px; color: var(--text-3); }
.co-bad { font-size: 13px; font-weight: 700; color: var(--deal); }
.co-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.co-qty { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--co-line); background: var(--paper); }
.co-qty button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--text); border-radius: 50%; cursor: pointer; }
.co-qty button:disabled { opacity: .35; cursor: not-allowed; }
.co-qty button:not(:disabled):hover { color: var(--gold-ink); }
.co-qty svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.co-qty output { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.co-lt { margin-inline-start: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-del { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px; background: none; color: var(--text-3); cursor: pointer; }
.co-del:hover { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); }
.co-del svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.co-line .cart-clr { margin: 2px 0 0; }
.co-clear { display: flex; justify-content: flex-start; padding: 0 4px; }
.co-link { min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.co-link.bad { color: var(--deal); }
.co-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--text); }

/* ملخّص الطلب */
.co-sum { align-self: start; padding: 16px; border-radius: var(--co-r); background: var(--co-card); border: 1px solid var(--co-line); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--co-line)); }
.co-sum h2 { margin: 0 0 12px; font-size: 18px; }
.co-sum dl { margin: 0; display: grid; gap: 8px; }
.co-sum dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.co-sum dt { color: var(--co-ink2); } .co-sum dd { margin: 0; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-sum dd small { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.co-muted { font-weight: 600 !important; font-size: 13.5px; color: var(--co-ink2); }
.co-tot { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--co-line); }
.co-tot dt { color: var(--text); font-weight: 800; } .co-tot dd { font-size: 20px; color: var(--gold-ink); }
.co-tot .usd-note { font-size: 12.5px; }
.co-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 16px; text-decoration: none; }
.co-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); color: var(--deal); font-size: 14px; }
.co-trust { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.co-trust svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* الشريط الثابت (موبايل) — بيحترم safe-area، وبينخفى إذا الكيبورد مفتوح (co-kb) */
.co-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--co-line); box-shadow: 0 -8px 24px -18px rgba(0,0,0,.4); }
.co-bar > span { display: grid; min-width: 0; } .co-bar small { font-size: 12px; color: var(--text-3); } .co-bar b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
.co-bar .co-cta { width: auto; flex: 1; max-width: 240px; margin: 0 0 0 auto; margin-inline-start: auto; }
.co-page:has(.co-bar:not([style*="display: none"])) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
html.co-kb .co-bar { display: none !important; }
.co-cta-side { display: none; }
@media (min-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; }
  .co-sum { position: sticky; top: calc(var(--head-h, 72px) + 16px); }
  .co-cta-side { display: flex; }
  .co-bar { display: none !important; }
  .co-page:has(.co-bar) { padding-bottom: 32px; }
  .co-steps { max-width: 560px; margin-inline: auto; margin-bottom: 24px; }
}
@media (max-width: 360px) { .co-line { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 10px; } .co-thumb { width: 60px; height: 60px; } .co-qty button { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .co-skel > div { animation: none; } }

/* ص64 — هيدر الشراء المختصر + بطاقات النموذج والمراجعة */
.co-head { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; margin: -16px -16px 16px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--co-line); }
.co-hback { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--co-line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.co-hback svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.co-htxt { display: grid; min-width: 0; flex: 1; }
.co-htxt small { font-size: 12px; font-weight: 700; color: var(--text-3); }
.co-htxt b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-hlogo img { display: block; width: 36px; height: 36px; border-radius: 50%; background: #0b0b0d; object-fit: contain; }
.co-card { padding: 16px; border-radius: var(--co-r); background: var(--co-card); border: 1px solid var(--co-line); display: grid; gap: 16px; align-content: start; }
.co-h { margin: 0; font-size: 20px; font-weight: 800; }
.co-buy { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--co-soft); font-size: 14px; }
.co-f { display: grid; gap: 6px; }
.co-f > label { font-size: 15px; font-weight: 700; color: var(--text); }
.co-f > label small { font-weight: 600; color: var(--text-3); font-size: 13px; }
.co-f :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--co-r-sm); border: 1.5px solid var(--co-line); background: var(--paper); color: var(--text); font: inherit; font-size: 16px; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.co-f textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.co-f :is(input, select, textarea):focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.co-f.bad :is(input, select, textarea) { border-color: var(--deal); }
.co-fh { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.co-fe { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--deal); }
.co-center { text-align: center; margin: 0; }
/* الموقع (اختياري بينطوي) */
.co-geo { border-radius: var(--co-r-sm); border: 1px solid var(--co-line); background: var(--co-soft); overflow: hidden; }
.co-geo-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.co-geo-h > span { display: grid; flex: 1; gap: 2px; } .co-geo-h b { font-size: 15px; } .co-geo-h small { font-size: 13px; color: var(--text-3); }
.co-geo-pin, .co-chev { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--gold-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.co-chev { stroke: var(--text-3); transition: transform .25s; } .co-geo.open .co-chev { transform: rotate(180deg); }
.co-geo-ok { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--st-delivered-bg, #e6f4ea); color: var(--st-delivered-tx, #1e6b3a); }
.co-geo-ok svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.co-geo-ok > span { display: grid; flex: 1; min-width: 0; } .co-geo-ok b { font-size: 14px; } .co-geo-ok small { font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-geo-ok .co-link { color: inherit; }
.co-geo-b { padding: 0 12px 12px; }
.co-geo-b .geo { margin: 0; padding: 0; border: 0; background: none; }
.co-geo-b .geo-head { display: none; }
/* المراجعة */
.co-rblk { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--co-line); }
.co-rhead { display: flex; align-items: center; justify-content: space-between; } .co-rhead h2 { margin: 0; font-size: 17px; }
.co-ritems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.co-ritems li { display: flex; align-items: center; gap: 10px; }
.co-ritems img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--co-line); }
.co-rn { display: grid; flex: 1; min-width: 0; } .co-rn b { font-size: 14px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-rn small { font-size: 12.5px; color: var(--text-3); }
.co-rp { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-rkv, .co-rtot { margin: 0; display: grid; gap: 8px; }
.co-rkv > div, .co-rtot > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
.co-rkv dt, .co-rtot dt { color: var(--co-ink2); flex-shrink: 0; } .co-rkv dd, .co-rtot dd { margin: 0; text-align: end; font-weight: 700; overflow-wrap: anywhere; }
.co-rtot dd { font-variant-numeric: tabular-nums; } .co-rtot dt small { font-weight: 600; color: var(--text-3); }
.co-rtot .usd-note { display: block; font-size: 12px; font-weight: 600; }
.co-ok-t { color: var(--st-delivered-tx, #1e6b3a); }
.co-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; }
.co-agree input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); }
.co-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); color: var(--deal); font-size: 14px; font-weight: 600; line-height: 1.6; }
.co-alert svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.co-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: coSpin .8s linear infinite; margin-inline-end: 8px; }
@keyframes coSpin { to { transform: rotate(360deg); } }
.co-check .co-cta, .co-review .co-cta { margin-top: 0; }
.co-sum-mini .co-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--co-line); color: inherit; text-decoration: none; font-size: 14px; font-weight: 700; }
/* موبايل: الملخّص الجانبي بيصير فوق النموذج (مختصر) — والمراجعة فيها زرها بالشريط الثابت */
@media (max-width: 899px) { .co-check .co-sum-mini { order: -1; padding: 12px; } .co-check .co-sum-mini h2 { display: none; } .co-check .co-sum-mini .co-mini { margin-bottom: 8px; }
  .co-check .co-sum-mini dl > div:not(.co-tot) { font-size: 14px; } .co-check .co-sum-mini .co-tot dd { font-size: 17px; }
  .co-review .co-cta-side { display: none; } }
@media (min-width: 900px) { .co-check .co-grid { grid-template-columns: minmax(0, 1fr) 320px; } .co-head { margin-inline: 0; border-radius: 0 0 16px 16px; } }
.co-check .co-form .co-cta { display: flex; }

/* ص64 — صفحة الدفع */
.co-pay-wrap { display: grid; gap: 16px; max-width: 640px; margin-inline: auto; }
.co-pay .co-steps { max-width: 640px; margin-inline: auto; margin-bottom: 16px; }
.co-pno { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-pno > span:first-child { display: grid; flex: 1; min-width: 0; } .co-pno small { font-size: 12.5px; color: var(--text-3); font-weight: 700; }
.co-pno .pv-mono { font-size: 17px; font-weight: 800; }
.co-copy { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--co-line); background: var(--paper); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.co-copy:hover { border-color: var(--gold); }
.co-chip { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: transparent; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.co-chip.is-review { background: transparent; background: color-mix(in srgb, #2f6fdb 14%, transparent); color: #2557ad; }
.co-chip.is-rejected, .co-chip.is-expired { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
html[data-mode="dark"] .co-chip.is-review { color: #8fb4f5; }
.co-due dd { display: flex; align-items: center; gap: 8px; } .co-due dd b { font-size: 22px; color: var(--gold-ink); }
.co-dl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--co-soft); font-size: 14px; line-height: 1.6; }
.co-dl svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.co-dl.urgent { background: transparent; background: color-mix(in srgb, #d98a00 14%, transparent); } .co-dl.over { background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); color: var(--deal); }
.co-dl-c { display: inline-flex; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 800; } .co-dl-c i { font-style: normal; font-weight: 600; font-size: 12.5px; }
.co-track { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.co-track li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-3); text-align: center; }
.co-track li::before { content: ""; position: absolute; top: 6px; inset-inline-start: calc(50% + 10px); inset-inline-end: calc(-50% + 10px); height: 2px; background: var(--co-line); }
.co-track li:last-child::before { display: none; }
.co-track i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--co-line); }
.co-track li.done { color: var(--text-2); } .co-track li.done i { background: var(--gold); border-color: var(--gold); } .co-track li.done::before { background: var(--gold); }
.co-track li.cur { color: var(--text); } .co-track li.cur i { border-color: var(--gold); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); animation: coPulse 1.8s ease-in-out infinite; }
.co-track li.bad { color: var(--deal); } .co-track li.bad i { border-color: var(--deal); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--deal) 16%, transparent); animation: none; }
@keyframes coPulse { 50% { box-shadow: 0 0 0 7px transparent; box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 10%, transparent); } }
.co-done { justify-items: center; text-align: center; }
.co-done h2 { margin: 0; font-size: 20px; } .co-done p { margin: 0; color: var(--co-ink2); line-height: 1.7; }
.co-done-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--st-delivered-bg, #e6f4ea); color: var(--st-delivered-tx, #1e6b3a); }
.co-done-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.co-pflow { display: grid; gap: 16px; }
.co-alert-ok { background: var(--st-delivered-bg, #e6f4ea); color: var(--st-delivered-tx, #1e6b3a); }
.co-alert-info { background: var(--co-soft); color: var(--text); }
.co-methods { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.co-methods legend { margin-bottom: 8px; padding: 0; font-size: 18px; }
.co-mcard { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: var(--co-r); border: 1.5px solid var(--co-line); background: var(--co-card); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.co-mcard:hover { border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--co-line)); }
.co-mcard.on { border-color: var(--gold); background: var(--co-soft); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.co-mcard.dis { cursor: default; opacity: .85; } .co-mcard.dis .co-mic { filter: grayscale(1); opacity: .6; }
.co-mcard:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.co-mic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-ink); }
.co-mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.co-mt { display: grid; gap: 2px; flex: 1; min-width: 0; } .co-mt b { font-size: 16px; } .co-mt small { font-size: 13px; color: var(--text-3); line-height: 1.55; }
.co-radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--co-line); transition: border-color .2s, box-shadow .2s; }
.co-mcard.on .co-radio { border-color: var(--gold); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 12px var(--gold); }
.co-wopts { display: grid; gap: 8px; }
.co-wopt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--co-line); cursor: pointer; font-size: 14.5px; }
.co-wopt.on { border-color: var(--gold); background: var(--co-soft); }
.co-wq .co-tot dd { color: var(--gold-ink); font-size: 18px; }
.co-pin { display: grid; gap: 8px; } .co-pin label { font-weight: 700; }
.co-pin .pv-pin-in { min-height: 52px; text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 800; border-radius: 12px; border: 1.5px solid var(--co-line); background: var(--paper); color: var(--text); }
.co-pin .pv-pin-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.co-ssteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.co-ssteps > li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.co-ssteps > li:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 4px; inset-inline-start: 15px; width: 2px; background: var(--co-line); }
.co-ssteps > li > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 14px; background: transparent; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.co-sb { display: grid; gap: 8px; min-width: 0; padding-top: 4px; } .co-sb > b, .co-sb label b { font-size: 15.5px; } .co-sb > small { font-size: 13.5px; color: var(--co-ink2); line-height: 1.7; }
.co-sline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--co-line); }
.co-big { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
/* ص97: عملة دفع الفاتورة (ليرة | دولار) + سطر المقابل تحت المطلوب */
.co-curpick { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--paper); border: 1px solid var(--co-line); }
.co-curpick > span:first-child { display: grid; gap: 2px; min-width: 0; }
.co-curpick b { font-size: 15px; }
.co-curpick small { font-size: 12.5px; color: var(--text-2); }
.co-rtot > .co-alt { margin-top: -4px; font-size: 13px; color: var(--text-2); }
.co-acc { display: grid; min-width: 0; } .co-acc .pv-mono { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; } .co-acc small { font-size: 12.5px; color: var(--text-3); }
.co-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; text-align: center; } .co-qr img { width: 168px; height: 168px; border-radius: 16px; background: #fff; padding: 8px; border: 1px solid var(--co-line); }   /* ص104: أكبر ليمسحه الجوال بسهولة */
.co-qr small { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.co-txn { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--co-line); background: var(--paper); color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: .04em; box-sizing: border-box; }
.co-txn:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.co-sham .co-cta, .co-wal .co-cta, .co-done .co-cta { margin-top: 4px; }
.co-help { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.co-help > svg { width: 24px; height: 24px; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; } .co-help > span { display: grid; } .co-help small { font-size: 13px; color: var(--text-3); }
.co-pay .co-trust { justify-content: center; }
/* ص64 تصحيحات: حذف السطر بزاوية البطاقة (السطر السفلي = الكمية + المجموع بس) · الملخّص المختصر ما بيتكرر بمراجعة الموبايل */
.co-line { position: relative; }
.co-line .co-del { position: absolute; top: 6px; inset-inline-end: 6px; width: 36px; height: 36px; }
.co-line .co-name { padding-inline-end: 34px; }
@media (max-width: 899px) { .co-hide-m { display: none; } }
@media (max-width: 400px) { .co-qty button { width: 34px; height: 36px; } .co-lt { font-size: 14px; } }
@media (max-width: 360px) { .co-line { grid-template-columns: 56px minmax(0, 1fr); } .co-thumb { width: 56px; height: 56px; } }
.co-page h1.co-h, .co-page .co-title h1 { font-size: clamp(22px, 5vw, 26px); line-height: 1.3; }
/* ص68: بيانات الزبون المسجّل الجاهزة بالطلب + لافتة الدخول قبل الطلب */
.co-saved { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--co-r-sm); background: var(--co-soft); border: 1px solid var(--co-line); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--co-line)); }
.co-saved-b { margin: 0; font-size: 14.5px; line-height: 1.8; overflow-wrap: anywhere; } .co-saved-b small { color: var(--text-3); font-size: 13px; }
.co-saved-n { margin: 0; font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.co-full { display: grid; gap: 16px; }
.lg-co { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: 14px; font-weight: 600; line-height: 1.7; }
/* ص69: حالة «تجاوز سقف التأكيد» + زر «ابعتولي الرمز» البارز */

/* ===== ص71: «عندي مشكلة» — خطوات بأزرار كبيرة وأيقونات (للمتعلّم والأمّي) ===== */
.dsp-tabs { grid-template-columns: repeat(2, 1fr); }
.dsp-form { display: grid; gap: 14px; }
.dsp-rest { display: grid; gap: 14px; scroll-margin-top: 90px; }
.dsp-step { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: var(--hair); box-shadow: 0 6px 22px -16px rgb(0 0 0 / .35); }
.dsp-q { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; line-height: 1.4; }
.dsp-q small { font-size: 13px; font-weight: 500; color: var(--text-3); }
.dsp-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--volt); color: var(--on-volt); font: 800 15px var(--font-head); }
.dsp-step.done .dsp-q { margin-bottom: 10px; }
.dsp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.dsp-cat { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 112px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: 700 15px/1.35 var(--font-head); text-align: center; cursor: pointer; transition: border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.dsp-cat svg, .dsp-chosen svg { width: 34px; height: 34px; fill: none; stroke: var(--volt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dsp-cat:hover { border-color: var(--volt); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 0 0 / .5); }
.dsp-cat:focus-visible, .dsp-pill:focus-visible, .dsp-want:focus-visible, .dsp-chosen:focus-visible, .dsp-cam:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }
.dsp-chosen { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--volt); background: var(--paper); background: color-mix(in srgb, var(--volt) 9%, var(--paper)); color: var(--text); font: 700 16px var(--font-head); text-align: start; cursor: pointer; }
.dsp-chosen svg { width: 28px; height: 28px; }
.dsp-chg { margin-inline-start: auto; font-size: 13.5px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.dsp-subj { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dsp-pill { display: grid; gap: 2px; padding: 11px 12px; min-height: 58px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.dsp-pill b { font-size: 14.5px; overflow-wrap: anywhere; }
.dsp-pill small { color: var(--text-3); font-size: 12.5px; }
.dsp-pill.on { border-color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); background: var(--paper); background: color-mix(in srgb, var(--volt) 9%, var(--paper)); }
.dsp-text { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.8; resize: vertical; }
.dsp-text:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 22%, transparent); }
.dsp-mic { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.7; }
.dsp-mic svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dsp-cam { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; border-radius: 16px; border: 2px dashed var(--volt); border: 2px dashed color-mix(in srgb, var(--volt) 55%, var(--line)); background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); cursor: pointer; }
.dsp-cam svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--volt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dsp-cam span { display: grid; gap: 2px; }
.dsp-cam b { font-size: 15.5px; }
.dsp-cam small { color: var(--text-3); font-size: 12.5px; }
.dsp-thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dsp-thumbs li { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--stripe); display: grid; place-items: center; }
.dsp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dsp-pdf { font: 800 14px var(--font-head); color: var(--text-2); }
.dsp-thumbs button { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .65); color: #fff; cursor: pointer; }
.dsp-thumbs button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.dsp-wants { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-want { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: 700 14.5px var(--font-head); cursor: pointer; }
.dsp-want.on { border-color: var(--volt); background: var(--volt); color: var(--on-volt); }
.dsp-contact p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--stripe); font-size: 14.5px; line-height: 1.7; }
.dsp-contact p > svg { width: 22px; height: 22px; fill: none; stroke: var(--text-2); stroke-width: 1.7; }
.dsp-link { margin-inline-start: auto; border: 0; background: none; color: var(--text); font-family: inherit; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 36px; }
.dsp-send { width: 100%; min-height: 56px; font-size: 17px; }
.dsp-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 0; }
.dsp-empty p { margin: 0; }
.dsp-drop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dsp-track { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dsp-track li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--text-3); position: relative; }
.dsp-track i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); z-index: 1; }
.dsp-track li:not(:last-child)::after { content: ''; position: absolute; top: 7px; inset-inline-start: calc(50% + 10px); width: calc(100% - 14px); height: 2px; background: var(--line); }
.dsp-track li.done { color: var(--text); }
.dsp-track li.done i { background: var(--ok); border-color: var(--ok); }
.dsp-track li.done:not(:last-child)::after { background: var(--ok); }
.dsp-track li.cur { color: var(--text); font-weight: 700; }
.dsp-track li.cur i { border-color: var(--volt); background: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 25%, transparent); }
.dsp-track li.bad i { background: var(--deal); border-color: var(--deal); }
@media (max-width: 480px) {
  .dsp-cats { grid-template-columns: repeat(2, 1fr); }
  .dsp-step { padding: 14px; }
  .dsp-subj { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dsp-cat { transition: none; } .dsp-cat:hover { transform: none; } }

/* ===== ص73/ص74: إثبات الدفع (صورة + رقم) والصراف ===== */
.co-sb-wrap { min-width: 0; }
.co-proof { gap: 10px; }
.co-pf-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 14px; border-radius: 14px; border: 2px dashed var(--gold); border: 2px dashed color-mix(in srgb, var(--gold) 55%, var(--co-line)); background: var(--paper); background: color-mix(in srgb, var(--gold) 6%, var(--paper)); cursor: pointer; transition: border-color .2s, background .2s; }
.co-pf-drop:hover, .co-pf-drop.over { border-color: var(--gold); background: var(--paper); background: color-mix(in srgb, var(--gold) 12%, var(--paper)); }
.co-pf-drop:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.co-pf-drop.has { border-style: solid; border-color: var(--ok); background: var(--paper); background: color-mix(in srgb, var(--ok) 7%, var(--paper)); }
.co-pf-drop > svg { flex: none; width: 38px; height: 38px; fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linejoin: round; }
.co-pf-drop img { flex: none; width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid var(--co-line); }
.co-pf-pdf { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--stripe); font-weight: 800; color: var(--co-ink2); }
.co-pf-t { display: grid; gap: 3px; min-width: 0; }
.co-pf-t b { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.co-pf-t small { font-size: 12.5px; color: var(--co-ink2); overflow-wrap: anywhere; line-height: 1.6; }
.co-pf-ok { margin-inline-start: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); }
.co-pf-ok svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.co-pf-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; background: transparent; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-ink); }
.co-pf-l { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; margin-top: 4px; }
.co-pf-miss { margin: 0; font-size: 13px; color: var(--co-ink2); }
.co-exo { display: flex; flex-wrap: wrap; gap: 8px; }
.co-exo-b { min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--co-line); background: var(--paper); color: var(--text); font: 700 14.5px var(--font-head); cursor: pointer; text-align: start; }
.co-exo-b.on { border-color: var(--gold); background: var(--paper); background: color-mix(in srgb, var(--gold) 14%, var(--paper)); box-shadow: inset 0 0 0 1px var(--gold); }
.co-exo-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.co-exr { margin: 0; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--co-line); }
.co-exr > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.co-exr dt { font-size: 13px; color: var(--co-ink2); }
.co-exr dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wl-pf { --co-line: color-mix(in srgb, var(--text) 12%, transparent); --co-ink2: var(--text-2); margin-top: 4px; }
.ah-guide { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; } .ft-guide { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.co-wload { display: flex; align-items: center; gap: 8px; }

/* ===== ص83: التقييمات الموثّقة ===== */
.rv-stars { --v: 0; --sz: 16px; display: inline-block; width: calc(var(--sz) * 5); height: var(--sz); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x;
  background: linear-gradient(to left, var(--volt) calc(var(--v) / 5 * 100%), transparent 0);
  background: linear-gradient(to left, var(--volt) calc(var(--v) / 5 * 100%), color-mix(in srgb, var(--text) 18%, transparent) 0); }
html.ltr .rv-stars { background: linear-gradient(to right, var(--volt) calc(var(--v) / 5 * 100%), transparent 0); background: linear-gradient(to right, var(--volt) calc(var(--v) / 5 * 100%), color-mix(in srgb, var(--text) 18%, transparent) 0); }
.rv-stars.lg { --sz: 22px; }
.rv-stars i { display: none; }
/* بقية أنماط التقييمات (الملخّص، البطاقات، نموذج الكتابة، بطاقة صفحة الطلب) في css/reviews.css — ص87 */

/* ===== ص81: مستشار اختيار الجهاز ===== */
.adv { align-self: flex-end; }
.adv-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--volt) 0%, var(--volt) 45%, var(--volt) 100%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--volt) 92%, #fff) 0%, var(--volt) 45%, color-mix(in srgb, var(--volt) 70%, #000) 100%); color: var(--on-volt, #111);
  font: 800 14.5px var(--font-head); box-shadow: 0 10px 26px -10px var(--volt), inset 0 1px 0 rgb(255 255 255 / .45); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--volt) 85%, #000), inset 0 1px 0 rgb(255 255 255 / .45); position: relative; isolation: isolate; }
.adv-fab svg { width: 22px; height: 22px; }
.adv-fab::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: conic-gradient(from 0deg, transparent 0 70%, var(--volt) 85%, transparent); background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--volt) 70%, #fff) 85%, transparent); animation: adv-spin 3.6s linear infinite; opacity: .7; filter: blur(2px); }
@keyframes adv-spin { to { transform: rotate(360deg); } }
.adv-fab:hover { transform: translateY(-1px); }
.adv-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
html.adv-on { overflow: hidden; }
.adv-wrap { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgb(6 6 8 / .62); backdrop-filter: blur(6px); }
.adv-sheet { position: relative; width: min(600px, 100%); max-height: min(88dvh, 820px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: var(--surface); color: var(--text); box-shadow: 0 40px 90px -30px rgb(0 0 0 / .8); outline: none; }
.adv-in { transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .3s; } .adv-in-0 { transform: translateY(24px) scale(.98); opacity: 0; }
.adv-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; color: #f4ecd8; overflow: hidden;
  background: radial-gradient(120% 140% at 85% -20%, var(--volt) 0%, transparent 55%), linear-gradient(160deg, #1b1a17, #0d0d0f 70%);
  background: radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--volt) 55%, transparent) 0%, transparent 55%), linear-gradient(160deg, #1b1a17, #0d0d0f 70%); }
.adv-head::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--volt), transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--volt) 80%, #fff), transparent); }
.adv-ht { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.adv-ht b { display: block; font: 800 18px var(--font-head); color: #fff; }
.adv-ht small { display: block; color: #c9bfa6; font-size: 13px; margin-top: 2px; }
.adv-spark { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #1a1408; background: linear-gradient(135deg, #f6e3a8, var(--volt)); box-shadow: 0 0 24px -4px var(--volt); }
.adv-spark svg { width: 26px; height: 26px; }
.adv-ib { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.adv-ib svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.adv-prog { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 14px 18px 0; }
.adv-prog li { height: 5px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background .3s; }
.adv-prog li.on { background: var(--volt); } .adv-prog li.now { box-shadow: 0 0 10px var(--volt); }
.adv-body { overflow-y: auto; padding: 18px; }
.adv-q h3 { margin: 4px 0 16px; font: 800 22px/1.35 var(--font-display, var(--font-head)); }
.adv-q { animation: adv-up .35s cubic-bezier(.2, .9, .2, 1); }
@keyframes adv-up { from { opacity: 0; transform: translateY(10px); } }
.adv-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.adv-tile { display: grid; justify-items: center; gap: 10px; padding: 20px 10px; min-height: 120px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: 800 16px var(--font-head); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.adv-tile svg { width: 40px; height: 40px; fill: none; stroke: var(--volt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.adv-tile:hover, .adv-tile.on { border-color: var(--volt); transform: translateY(-2px); box-shadow: 0 14px 28px -20px var(--volt); box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--volt) 90%, #000); }
.adv-opts { display: grid; gap: 10px; }
.adv-opt { display: grid; gap: 3px; text-align: start; padding: 16px 18px; min-height: 60px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; font: inherit; }
.adv-opt b { font: 800 16px var(--font-head); } .adv-opt small { color: var(--text-3); font-size: 13px; }
.adv-opt:hover, .adv-opt.on { border-color: var(--volt); background: var(--paper); background: color-mix(in srgb, var(--volt) 8%, var(--paper)); }
.adv-tile:focus-visible, .adv-opt:focus-visible, .adv-pick:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.adv-think { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; text-align: center; }
.adv-think small { color: var(--text-3); }
.adv-orb { width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(from 0deg, var(--volt), transparent 40%, var(--volt) 70%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%); mask: radial-gradient(farthest-side, transparent 62%, #000 64%); animation: adv-spin 1.1s linear infinite; }
.adv-res { display: grid; gap: 12px; }
.adv-pick { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; animation: adv-up .5s cubic-bezier(.2, .9, .2, 1) both; animation-delay: var(--d); }
.adv-pick.top { border-color: var(--volt); background: linear-gradient(160deg, var(--paper), var(--paper) 60%); background: linear-gradient(160deg, color-mix(in srgb, var(--volt) 10%, var(--paper)), var(--paper) 60%); box-shadow: 0 18px 40px -26px var(--volt); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--volt) 90%, #000); }
.adv-pick img { width: 88px; height: 88px; object-fit: contain; border-radius: 14px; background: var(--surface); }
.adv-badge { position: absolute; top: -10px; inset-inline-start: 16px; padding: 3px 12px; border-radius: 999px; background: var(--volt); color: var(--on-volt, #111); font: 800 12px var(--font-head); }
.adv-pi { display: grid; gap: 4px; min-width: 0; }
.adv-pi b { font: 800 15px/1.45 var(--font-head); }
.adv-price strong { font: 800 17px var(--font-head); color: var(--gold-ink, var(--text)); }
.adv-oos { margin-inline-start: 8px; font-size: 12px; color: var(--deal); }
.adv-pi ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.adv-pi li { position: relative; padding-inline-start: 16px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.adv-pi li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.adv-ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--volt) calc(var(--p) * 1%), transparent 0); background: conic-gradient(var(--volt) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0); }
.adv-ring i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font: 800 13px var(--font-head); font-style: normal; }
.adv-end { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: 4px; }
.adv-none { color: var(--text-2); }
@media (max-width: 640px) {
  .adv-wrap { place-items: end stretch; padding: 0; }
  .adv-sheet { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  .adv-cats { grid-template-columns: repeat(2, 1fr); }
  .adv-pick { grid-template-columns: 72px minmax(0, 1fr); } .adv-pick img { width: 72px; height: 72px; }
  .adv-ring { position: absolute; top: 10px; inset-inline-end: 10px; width: 48px; height: 48px; } .adv-ring i { width: 38px; height: 38px; font-size: 12px; }
  .adv-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .adv-fab { width: 50px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .adv-fab::after, .adv-orb, .adv-q, .adv-pick { animation: none; } }
/* ص84: البحث بالصورة */
.ah-cam { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.ah-cam:hover, .ah-cam:focus-within { color: var(--gold); background: transparent; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.ah-search input { padding-inline-end: 44px; }
.ims-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.ims-top img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); }
.ims-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; } .ims-tags span { padding: 3px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); font-weight: 700; font-size: 13px; }
.ims-hint { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.ims-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ims-card { display: grid; gap: 4px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; animation: adv-up .45s cubic-bezier(.2, .9, .2, 1) both; animation-delay: var(--d); }
.ims-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--surface); }
.ims-card b { font: 700 13.5px/1.45 var(--font-head); } .ims-card span { font-weight: 800; color: var(--gold-ink, var(--text)); } .ims-card small { color: var(--deal); font-size: 12px; }
.ims-card:hover { border-color: var(--volt); }
@media (max-width: 640px) { .ims-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══════════ ص90 — نظام أزرار المتجر الموحّد (طلب المالك: «ادفع الآن» و«تواصل معنا» كبيرة جداً) ══════════
   مقاسان فقط: عادي ٤٨px · مضغوط ‎.btn-sm‎ ٤٠px. سطر واحد دائماً (لا التفاف)، كبسولة، Cairo 800 بحجم ١٥/١٤.
   الأنواع: أساسي ذهبي (.btn) · ثانوي بخط (.btn-ghost) · رابط (.btn-link) · خطر (.btn-danger).
   العرض الكامل فقط بـ ‎.btn-block‎ أو داخل سياق يفرضه (نموذج، شريط شراء). مجموعة أزرار: ‎.btn-row‎.
   هذه الطبقة الأخيرة في الملف وتغلب المقاسات القديمة المتفرقة (٥٢/٥٤/٥٦/٥٨px وزوايا ١٢/١٤px). */
body:not(.admin) .btn {
  min-height: 48px; padding: 0 22px; gap: 8px; max-width: 100%;
  border-radius: var(--radius-pill); font-size: 15px; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 20px -12px var(--volt);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--volt) 75%, transparent);
}
body:not(.admin) .btn[hidden] { display: none !important; }
body:not(.admin) .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
body:not(.admin) .btn:active:not(:disabled) { transform: scale(.98); background: var(--volt); background: color-mix(in srgb, var(--volt) 88%, #000); box-shadow: none; }
body:not(.admin) .btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
body:not(.admin) .btn:disabled, body:not(.admin) .btn[aria-disabled="true"] { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
/* المضغوط */
body:not(.admin) .btn-sm { min-height: 40px; padding: 0 16px; gap: 6px; font-size: 14px; }
body:not(.admin) .btn-sm svg { width: 16px; height: 16px; }
@media (pointer: coarse) { body:not(.admin) .btn:not(.btn-sm) { min-height: 48px; } }
/* الثانوي: خط شعرة، يذهب عند المرور، ضغطة بظل لوني خفيف */
body:not(.admin) .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 20%, transparent); box-shadow: none; }
body:not(.admin) .btn-ghost:hover { background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); border-color: var(--volt); color: var(--text); }
body:not(.admin) .btn-ghost:active:not(:disabled) { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
body:not(.admin) .btn-ghost svg { color: var(--gold-ink, var(--volt)); }
/* الرابط: إجراء ثانوي هادئ بلا إطار */
body:not(.admin) .btn-link { min-height: 40px; padding: 0 8px; background: none; border-color: transparent; box-shadow: none; color: var(--text-2);
  font-family: var(--font-head); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body:not(.admin) .btn-link:hover, body:not(.admin) .btn-link:active:not(:disabled) { background: none; color: var(--text); }
/* الخطر: خط بلون التحذير */
body:not(.admin) .btn-danger { background: transparent; color: var(--deal); border-color: var(--deal); border-color: color-mix(in srgb, var(--deal) 50%, transparent); box-shadow: none; }
body:not(.admin) .btn-danger:hover { background: transparent; background: color-mix(in srgb, var(--deal) 7%, transparent); border-color: var(--deal); color: var(--deal); }
body:not(.admin) .btn-danger:active:not(:disabled) { background: transparent; background: color-mix(in srgb, var(--deal) 13%, transparent); }
/* العرض الكامل والمجموعات */
body:not(.admin) .btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-row:not(:has(> .btn:not([hidden]):not([style*="display: none"]))) { display: none; }
.btn-row > .btn { flex: 1 1 auto; }
.btn-row > .btn-block { flex-basis: 100%; }
.ship-card .btn-row { margin-top: 12px; }
/* المقاسات القديمة الخاصة بالصفحات ⇒ نفس السلّم (الشراء، الدفع، المحفظة، الشكاوى، الدخول، المنتج) */
body:not(.admin) :is(.co-page, .co-bar) .btn,
body:not(.admin) .btn:is(.co-cta, .wl-submit, .dsp-send, .sp-send, .lg-btn, .rvc-send, .td-cta) { min-height: 48px; padding-block: 0; border-radius: var(--radius-pill); font-size: 15px; }
body:not(.admin) :is(.co-page, .co-bar) .btn-sm { min-height: 40px; font-size: 14px; }
body:not(.admin) .buy-cta .buy-now, body:not(.admin) .buybox .buy-add { min-height: 48px; font-size: 15px; }
body:not(.admin) .buy-cta .qty button { min-height: 46px; }   /* القيمة مع الإطار = ٤٨ مثل الزر */
body:not(.admin) .pdp-bar .btn { min-height: 48px; }
/* زر «أضف للسلة» في البطاقات: كبسولة مضغوطة ٤٠px مثل .btn-sm */
body:not(.admin) .pcard .add, body:not(.admin) .grid4:not(.list) .pcard .add { min-height: 40px; padding-block: 0; border-radius: var(--radius-pill); line-height: 1.2; white-space: nowrap; }
/* المساعد داخل نافذة المحادثة يعرض تسميات ديناميكية طويلة ⇒ يُسمح بالتفاف هناك فقط */
.chatw .btn { white-space: normal; }

/* ══════════ ص90 — «رجوع» في الهيدر المشترك + «الرئيسية» دائماً على بعد لمسة ══════════
   نفس شكل رأس الدفع (.co-hback): مربع بزوايا ١٢ وخط شعرة. يختفي في الرئيسية (html.is-home). */
.ah-back { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--surface); background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text); transition: border-color .2s var(--ease, ease), background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ah-back:hover { border-color: var(--volt); }
.ah-back:active { transform: scale(.94); background: var(--surface); background: color-mix(in srgb, var(--volt) 12%, var(--surface)); }
.ah-back:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
html[dir="ltr"] .ah-back svg { transform: scaleX(-1); }
.is-home .ah-back, .is-home .ah-chip-home { display: none; }
@media (min-width: 768px) { .ah-back { width: 44px; height: 44px; } }
/* الهاتف: مع زر الرجوع يبقى الشعار (رابط الرئيسية) ويُخفى الاسم الطويل بدل أن يُقصّ «شركة الوليد التـ…» */
@media (max-width: 420px) { html:not(.is-home) .ah-name { display: none; } }
/* «الرئيسية»: الشعار في كل المقاسات + شريحة أولى في الشريط الفرعي + بلاطة في القائمة الجانبية.
   الديسكتوب: رابطا «من الداخل» و«طلباتي» مكرّران في الشريط الفرعي ⇒ يُخفيان من الصف الأول كي يتّسع لزر الرجوع وأيقونات الحساب. */
.ah-nav .ah-dup { display: none; }
.ah-chip-home svg { opacity: 1; color: var(--gold-ink, var(--volt)); }
/* صفحات الدخول (بلا هيدر): زر رجوع في زاوية البطاقة */
body:not(.admin) .login-box { position: relative; }
.lg-back { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--surface); color: var(--text); -webkit-tap-highlight-color: transparent; }
.lg-back:hover { border-color: var(--volt); }
.lg-back:active { transform: scale(.94); }
.lg-back:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
html[dir="ltr"] .lg-back svg { transform: scaleX(-1); }
/* الديسكتوب: البحث ينكمش قبل أن تُقصّ أيقونات الحساب/السلة عند وجود زر الرجوع */
/* ١٠٢٤–١٢٧٩: ثماني أيقونات + روابط التنقّل + الشعار لا تتّسع (كانت تُقصّ قبل ص90 أيضاً) ⇒ يبقى نمط التابلت (قائمة جانبية) حتى ١٢٨٠ */
@media (min-width: 1024px) and (max-width: 1279px) { .ah-nav { display: none; } .ah-burger { display: grid; } .ah-search { max-width: 300px; } }
@media (min-width: 1280px) { .ah-search { min-width: 120px; } .ah-search input { min-width: 0; } html:not(.is-home) .ah-row { gap: 16px; } html:not(.is-home) .ah-nav { gap: 22px; } html:not(.is-home) .ah-icons { gap: 2px; } }

/* ص104: مبدّل العملة جنب سعر المنتج (نفس $store.money تبع الشريط) */
.cur-sw { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, var(--paper)); vertical-align: middle; }
.cur-sw button { min-width: 40px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 14px/1 var(--font-body, inherit); cursor: pointer; transition: background-color .15s, color .15s; }
.cur-sw button[aria-pressed="true"] { background: var(--text); color: var(--paper); }
.cur-sw button:focus-visible { outline: 2px solid var(--gold, #C9A227); outline-offset: 2px; }