/* ============================================================
   Honey Store — main.css
   متغيّرات الألوان مستخرجة من الشعار (كما في handoff.md)
   والتنسيقات الأساسية + قواعد hover/focus التي تعوّض سمات
   style-hover / style-focus الوهمية من Claude Design.
   ============================================================ */

:root {
  --plum:          #533456;  /* اللون الأساسي: الأزرار، الروابط النشطة، الأسعار */
  --plum-dark:     #3D2540;  /* hover الأزرار، خلفية شريط الإعلان، بانر العرض */
  --lilac:         #EFE3F5;  /* خلفيات فرعية، دوائر التصنيفات */
  --lilac-soft:    #F5EFF7;  /* hover الأيقونات، خلفيات لطيفة */
  --lilac-tint:    #F6EDF9;  /* تدرّج البانر */
  --ink:           #241F27;  /* النص الأساسي + الفوتر */
  --ink-muted:     #7A7280;  /* نص ثانوي */
  --ink-faint:     #9A93A2;  /* تسميات صغيرة */
  --line:          #F0EBF2;  /* حدود البطاقات */
  --line-strong:   #E4DCE8;  /* حدود الحقول */
  --bg:            #FBFAFB;  /* خلفية الصفحة */
  --surface:       #FFFFFF;  /* البطاقات */
  --sale:          #9B2F5B;  /* شارات التخفيض والأسعار المشطوبة */
  --star:          #C9A227;  /* نجوم التقييم */
  --whatsapp:      #25D366;  /* زر إتمام الطلب */
  --whatsapp-ink:  #0B2E18;
  --plum-hover:    #8A5A8F;  /* hover الروابط */
}

/* ── أساسيات (من كتل <style> في التصميم) ─────────────────── */
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--plum); text-decoration: none; }
a:hover { color: var(--plum-hover); }
img { max-width: 100%; }

::-webkit-scrollbar { height: 6px; width: 8px; }
::-webkit-scrollbar-thumb { background: #DED5E2; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
input[type=range] { accent-color: var(--plum); }

/* ── حركات (keyframes) ──────────────────────────────────── */
@keyframes marquee   { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes shimmer   { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes pulseCart { 0%,100% { transform: scale(1); } 40% { transform: scale(1.28); } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes toastIn   { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes floaty    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes driftA    { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-10px,-14px) rotate(4deg); } }
@keyframes driftB    { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(12px,10px) rotate(-5deg); } }

/* نبضة أيقونة السلة عند الإضافة (يُفعّلها store.js) */
.cart-pulse { animation: pulseCart .45s ease; }

/* ══════════════════════════════════════════════════════════
   قواعد hover / focus — تعويض style-hover / style-focus
   ══════════════════════════════════════════════════════════ */

/* روابط التنقّل العلوية */
.nav-link { transition: color .2s, border-color .2s; }
.nav-link:hover { color: var(--plum); }
.cat-tab { transition: color .2s, border-color .2s; }
.cat-tab:hover { color: var(--plum); border-bottom-color: #E4D5A8 !important; }
.cat-tab-sale:hover { border-bottom-color: #E8BFD2 !important; }

/* أزرار الأيقونات الدائرية في الهيدر */
/* flex:none إجباري — الأيقونات عناصر flex داخل شريط الهيدر، ومقاسها
   مضمّن في القالب (42px) فلا يمنع الانكماش. كانت تنضغط إلى 21px عرضًا
   على الجوال — دائرة بيضاوية بنصف مساحة لمسها. */
.icon-btn, .icon-btn-warm { flex: none; transition: background .2s; }
.icon-btn:hover { background: var(--lilac-soft); }
.icon-btn-warm:hover { background: #F3EBE1; }

/* بطاقة المنتج: الشكل + رفع وظل عند المرور */
.hs-card {
  background: var(--surface); border: 1px solid #EDE6DD; border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .35s, transform .35s, border-color .35s;
}
.hs-card:hover { box-shadow: 0 16px 34px rgba(83,52,86,.13); transform: translateY(-3px); border-color: #E3D8CB; }

/* صورة داخل البطاقة: تكبير خفيف عند المرور */
.zoom-img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.zoom-img:hover { transform: scale(1.07); }

/* زر «أضيفي للسلة» العائم (الرئيسية) */
.add-pill { transition: background .2s, color .2s; }
.add-pill:hover { background: var(--plum) !important; color: #fff !important; }

/* زر + الدائري لإضافة السلة (قائمة المنتجات) */
.add-round { transition: transform .2s, background .2s; }
.add-round:hover { transform: scale(1.1); background: var(--plum-dark) !important; }

/* زر القلب */
.heart-btn { transition: transform .2s, background .2s; }
.heart-btn:hover { transform: scale(1.12); background: #fff; }

/* الأزرار البنفسجية الأساسية — الارتفاع/الحشو/الوزن تبقى مضمّنة لأنها تختلف */
.btn-plum {
  background: var(--plum); color: #fff; border: none; border-radius: 999px;
  font-family: inherit; cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-plum:hover { background: var(--plum-dark) !important; color: #fff !important; }

/* الأزرار المحدّدة (outline) */
.btn-outline { transition: background .2s, border-color .2s, color .2s; }
.btn-outline:hover { background: #fff; border-color: var(--plum) !important; }
.btn-outline-fill:hover { background: var(--plum) !important; color: #fff !important; }

/* أزرار واتساب */
.btn-wa {
  background: var(--whatsapp); color: var(--whatsapp-ink); border: none;
  border-radius: 999px; font-family: inherit; cursor: pointer;
  transition: background .2s;
}
.btn-wa:hover { background: #1FBE5B !important; }
/* الحالة المعطّلة (سلة فارغة) — كانت سمة style ثانية يتجاهلها المتصفّح */
.btn-wa:disabled { opacity: .5; cursor: not-allowed; }
.btn-wa:disabled:hover { background: var(--whatsapp) !important; }

/* لا نستخرج ألوان btn-wa-soft: الاستعمالات الثلاثة تختلف في الحدود
   والخلفية (صفحة التواصل بلا إطار على خلفية خضراء) */
.btn-wa-soft { transition: background .2s; }
.btn-wa-soft:hover { background: #E4F7EC !important; }
.wa-float { transition: transform .25s; }
.wa-float:hover { transform: scale(1.07); }

/* بطاقات وتأثيرات عامة */
.tile-lift { transition: transform .3s, box-shadow .3s; }
.tile-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(83,52,86,.12); }
.cat-circle { transition: transform .35s, box-shadow .35s; }
.cat-item:hover .cat-circle { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(83,52,86,.14); }
.cat-item:hover .cat-name { color: var(--plum); }
.value-card { transition: box-shadow .35s, transform .35s; }
.value-card:hover { box-shadow: 0 16px 34px rgba(83,52,86,.1); transform: translateY(-3px); }
.recent-tile { transition: box-shadow .3s; }
.recent-tile:hover { box-shadow: 0 10px 22px rgba(83,52,86,.12); }

/* الحقول: الشكل المشترك + التركيز (الحدود والخلفية تختلف فتبقى مضمّنة) */
.hs-input {
  width: 100%; font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.hs-input:focus { border-color: var(--plum); background: #fff; box-shadow: 0 0 0 3px rgba(83,52,86,.09); outline: none; }
.hs-input-plain:focus { border-color: var(--plum); background: #fff; outline: none; }

/* أزرار صغيرة داخل الدرج/الفلاتر */
.qty-btn { transition: background .2s; }
.qty-btn:hover { background: #F7F3F9; }
/* زرّ الإغلاق: الشكل هنا لا في كل موضع يستعمله.
   كان الصنف يحمل الحركة وحدها، وكل زرّ يمرّر مقاسه وخلفيته مضمّنَين —
   فأيّ زرّ لا يمرّرهما (زرّ درج السلة بعد إعادة تصميمه) يظهر مربّعًا
   رماديًا بلا أيقونة: لا مقاس له ولا مقاس لأيقونته. */
.close-btn {
  flex: none; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%; background: #F6F1EA;
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.close-btn svg { width: 17px; height: 17px; display: block; }
.close-btn:hover { background: #EFE7F2; }
.link-muted:hover { color: var(--plum); }
.chip-btn { transition: background .2s; }
.chip-btn:hover { background: #EADBEF; }

/* روابط الفوتر الداكن */
.foot-link { transition: color .2s; }
.foot-link:hover { color: #fff; }

/* أزرار الاختيار (radio/checkbox) المنسّقة كحبوب */
.topic-pill span, .sort-pill span, .rating-opt span, .subcat .cbox { transition: all .2s; }
.topic-pill input:checked + span,
.sort-pill input:checked + span {
  background: #533456 !important; color: #fff !important;
  border-color: #533456 !important; font-weight: 600;
}
.rating-opt input:checked + span {
  background: #F5EFF7 !important; border-color: #533456 !important;
}
.subcat { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: #4A4453; }
.subcat .cbox {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #D8CFDD;
  background: #fff; display: grid; place-items: center; flex: none;
}
.subcat .cbox svg { opacity: 0; }
.subcat input:checked + .cbox { background: #533456 !important; border-color: #533456 !important; }
.subcat input:checked + .cbox svg { opacity: 1 !important; }

/* أزرار عامة تكبر قليلًا */
.press:hover { transform: scale(1.1); }

/* شارة «الأكثر طلباً» فوق دائرة اللون — مستخلصة من الطلبات الفعلية */
.hs-top-color {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--star);
  color: #2A1E2E;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(201, 162, 39, .35);
}
/* مثلّث صغير يربط الشارة بالدائرة */
.hs-top-color::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--star);
}

/* الأزرار المعطّلة (قطعة نفدت) — تُلغى تأثيرات المرور أيضًا */
.add-pill:disabled, .add-round:disabled, .btn-outline-fill:disabled,
.btn-plum:disabled {
  opacity: .5; cursor: not-allowed;
}
.add-pill:disabled:hover { background: rgba(255,255,255,.94) !important; color: #3D2540 !important; }
.add-round:disabled:hover { transform: none; background: var(--plum) !important; }
.btn-outline-fill:disabled:hover { background: #fff !important; color: var(--plum) !important; }
.btn-plum:disabled:hover { background: var(--plum) !important; }

/* ══════════════════════════════════════════════════════════
   مكوّنات مستخرجة — القيم منقولة حرفيًا من الأنماط المضمّنة،
   ولا شيء منها يغيّر الشكل. ما يختلف بين المواضع (الارتفاع،
   الحشو الرأسي، نصف القطر) يبقى مضمّنًا في القالب.
   ══════════════════════════════════════════════════════════ */

/* نموذج البحث في الهيدر — المقاسات في CSS لا مضمّنة، ليتمكّن استعلام
   الوسائط من إنزاله سطرًا كاملًا على الجوال (المضمَّن يهزم الفئة) */
.hs-search { flex: 1; max-width: 520px; }

/* صفحة الدخول: عمودان على سطح المكتب، عمود واحد على الجوال */
.auth-page { display: grid; grid-template-columns: 1fr 1fr; }

/* ══════════════════════════════════════════════════════════
   عمود النموذج في صفحة الدخول — الوضع (دخول/حساب جديد) يُقاد
   بسمة data-mode على الغلاف، فالـ CSS وحده يُظهر ويخفي الحقول
   بلا لمس أنماط مضمّنة من الجافاسكربت.
   ══════════════════════════════════════════════════════════ */
[data-auth][data-mode="login"] [data-signup-only],
[data-auth][data-mode="signup"] [data-login-only] { display: none !important; }

/* المبدّل: التبويب النشط ممتلئ بالبنفسجي — تمييز لا يحتاج تدقيقًا */
.auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 30px;
  background: #F4EFF6; border: 1px solid #EBE1EF; border-radius: 999px;
}
.auth-tab {
  flex: 1; height: 46px; border: none; border-radius: 999px;
  background: transparent; color: var(--ink-muted);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .22s, color .22s, box-shadow .22s;
}
.auth-tab:hover { background: rgba(255,255,255,.75); color: var(--plum); }
.auth-tab[aria-selected="true"] {
  background: var(--plum); color: #fff;
  box-shadow: 0 6px 16px rgba(83,52,86,.22);
}
.auth-tab[aria-selected="true"]:hover { background: var(--plum-dark); color: #fff; }
.auth-tab:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* سطر التبديل أسفل النموذج — طريق ثانٍ واضح بين الوضعين */
.auth-switch {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-muted); text-align: center;
}
.auth-switch__btn {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--plum);
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-switch__btn:hover { color: var(--plum-dark); }
.auth-switch__btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; }

.auth-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }

/* خانة رمز التحقّق — أرقام متباعدة كبيرة، الرمز نفسه هو بطل الشاشة */
.otp-input {
  width: 100%; height: 62px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: #FCFAFD; color: var(--ink);
  font-family: inherit; font-size: 26px; font-weight: 600;
  letter-spacing: .5em; text-indent: .5em; text-align: center;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.otp-input:focus {
  border-color: var(--plum); background: #fff;
  box-shadow: 0 0 0 3px rgba(83,52,86,.09);
}
.auth-switch__btn:disabled {
  color: var(--ink-faint); text-decoration: none; cursor: default;
}

/* صندوق رمز التطوير — يظهر فقط بلا بوّابة رسائل (OTP_SHOW_IN_DEBUG) */
.otp-dev {
  background: #FFF8E1; border: 1px dashed #E8CE7A; border-radius: 14px;
  padding: 13px 15px 15px; margin-bottom: 18px;
}
.otp-dev__label { font-size: 12px; color: #8A6A08; margin-bottom: 10px; }
.otp-dev__row { display: flex; align-items: center; gap: 12px; }
.otp-dev__code {
  flex: 1; font-size: 24px; font-weight: 700; color: #6B4E00;
  letter-spacing: .28em; font-variant-numeric: tabular-nums;
}
.otp-dev__fill {
  flex: none; height: 38px; padding: 0 16px;
  border: 1px solid #E0C368; border-radius: 999px; background: #fff;
  color: #7A5B00; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .18s, color .18s;
}
.otp-dev__fill:hover { background: #7A5B00; color: #fff; border-color: #7A5B00; }
.auth-hint { margin: 7px 0 0; font-size: 12px; color: var(--ink-faint); font-weight: 300; }
.auth-brand-mobile { display: none; }

/* خريطة صفحة التواصل — الارتفاع في CSS ليصغر على الجوال */
.hs-map-wrap { position: relative; }
.hs-map { display: block; width: 100%; height: 220px; border: 0; }

/* مبدّل قمر صناعي / خريطة فوق الإطار */
.hs-map-toggle {
  position: absolute; top: 10px; inset-inline-start: 10px;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.92); border-radius: 999px;
  box-shadow: 0 3px 12px rgba(36,31,39,.2);
}
.hs-map-btn {
  border: none; border-radius: 999px; padding: 6px 13px;
  background: transparent; color: #5C5566;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s;
}
.hs-map-btn:hover { color: var(--plum); }
.hs-map-btn.is-active { background: var(--plum); color: #fff; }

@media (max-width: 720px) {
  .hs-map { height: 180px; }
  .hs-map-btn { padding: 6px 11px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════
   معرض صفحة المنتج — شريط scroll-snap واحد للجوال وسطح المكتب
   ══════════════════════════════════════════════════════════ */
.pd-gallery {
  display: grid; grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px; position: sticky; top: 106px;
}
.pd-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pd-thumb {
  padding: 0; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden;
  cursor: pointer; background: none; border: 2px solid transparent;
  transition: border-color .2s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.is-active { border-color: var(--plum); }
.pd-thumb:hover { border-color: #C9B4CE; }

.pd-media { position: relative; }
.pd-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  aspect-ratio: 3 / 4; border-radius: 16px; background: #F4F0EA;
  scrollbar-width: none; -ms-overflow-style: none;
  /* سحب الإصبع أفقيًا للصور، والرأسي يبقى للصفحة.
     كانت pan-y — وهي تعني عكس المقصود تمامًا: «لا تُسلّم هذا العنصر إلا
     الإيماءة الرأسية». فالشريط يُمرَّر أفقيًا ولا أحد يمرّره: السحب على
     الصور كان ميّتًا على كل جوال. manipulation = pan-x pan-y pinch-zoom،
     يترك للمتصفّح اختيار المحور من اتجاه الإصبع، ويُسقط تأخير النقر
     المزدوج فيصير فتح المكبّر فوريًا. */
  touch-action: manipulation;
  overscroll-behavior-x: contain;
}
.pd-track::-webkit-scrollbar { display: none; }
.pd-slide { flex: 0 0 100%; scroll-snap-align: center; height: 100%; }
.pd-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* لا zoom-in: الصورة نفسها لم تعد تفتح المكبّر، والمؤشّر يَعِد
     بما لا يحدث. زرّ العدسة وحده يفتحه. */
  user-select: none; -webkit-user-drag: none;
}

.pd-counter {
  position: absolute; bottom: 12px; inset-inline-start: 12px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(36,31,39,.62); color: #fff;
  font-size: 12px; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px); pointer-events: none;
}
.pd-zoom-hint {
  position: absolute; bottom: 12px; inset-inline-end: 12px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: var(--plum);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(36,31,39,.14); transition: background .2s;
}
.pd-zoom-hint svg { width: 19px; height: 19px; }
.pd-zoom-hint:hover { background: #fff; }
.pd-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 7px;
}

/* سهمان فوق الصورة: يظهران بمرور المؤشّر، ويبقيان ظاهرين على اللمس */
.pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: var(--plum);
  cursor: pointer; display: grid; place-items: center; z-index: 2;
  box-shadow: 0 4px 14px rgba(36,31,39,.16);
  /* ظاهران بخفوت دائمًا: سهم يظهر بالمرور فقط لا يعرف الزبون أنّه موجود */
  opacity: .6; transition: opacity .2s, background .2s;
}
.pd-nav svg { width: 20px; height: 20px; }
.pd-media:hover .pd-nav, .pd-nav:focus-visible { opacity: 1; }
.pd-nav:hover { background: #fff; }
.pd-nav:disabled { opacity: 0 !important; }     /* لا سهم في نهاية الشريط */
.pd-nav--prev { right: 12px; }
.pd-nav--next { left: 12px; }
@media (hover: none) {
  .pd-nav { display: none; }                    /* على اللمس: السحب والنقاط */
}

/* نقاط تحت الصورة — لمسة واحدة تنقل بين الصور */
.pd-dots { display: none; gap: 7px; justify-content: center; margin-top: 12px; }
.pd-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px;
  background: #D9CFE0; cursor: pointer; transition: width .25s, background .25s;
}
.pd-dot.is-active { width: 22px; background: var(--plum); }
.pd-heart {
  position: absolute; top: 14px; left: 14px;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); cursor: pointer;
  display: grid; place-items: center;
}

@media (max-width: 980px) {
  /* المصغّرات تحت الصورة صفًّا أفقيًا حين يضيق العمود */
  .pd-gallery { grid-template-columns: minmax(0, 1fr); position: static; }
  .pd-thumbs {
    flex-direction: row; overflow-x: auto; order: 2; gap: 8px;
    scrollbar-width: none;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { flex: 0 0 62px; }
  .pd-media { order: 1; }
}
@media (max-width: 720px) {
  /* من حدّ الشاشة إلى حدّها كما في تطبيقات المتاجر — الحشو 16px عبر pad-mobile */
  .pd-media { margin-inline: -16px; }
  .pd-track { border-radius: 0; aspect-ratio: 4 / 5; }
  /* ── شريط المصغّرات على الجوال ────────────────────────────
     كان display:none، فلم يبقَ للتنقّل بين الصور داخل الصفحة شيء
     والزبونة مضطرّة لفتح المكبّر. يعود شريطًا أفقيًا يُسحَب تحت
     الصورة كما في شي إن: المصغّرة تُظهر ما بعدها فتُغري بالتصفّح،
     والنقطة لا تُظهر شيئًا. */
  .pd-thumbs {
    display: flex;
    /* من حافة الشاشة إلى حافتها كالصورة فوقه، مع حشو داخلي يمنع
       التصاق أوّل مصغّرة وآخرها بالحافّة */
    margin-inline: -16px;
    padding: 12px 16px 2px;
    gap: 8px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }
  .pd-thumb {
    flex: 0 0 58px;
    border-radius: 8px;
    border-width: 1.5px;
    scroll-snap-align: start;
  }
  /* الحدّ وحده باهت على شاشة صغيرة: غير النشطة تُخفَّت قليلًا
     فيبرز موضعك في الشريط من بعيد */
  .pd-thumb img { opacity: .58; transition: opacity .2s; }
  .pd-thumb.is-active img { opacity: 1; }

  /* النقاط تكرار للمصغّرات — الشريط يقول الموضع ويزيد عليه المحتوى */
  .pd-dots { display: none; }

  .pd-counter { bottom: 10px; inset-inline-start: 16px; }
  .pd-zoom-hint { bottom: 10px; inset-inline-end: 16px; }
  .pd-badge { top: 10px; right: 16px; }
  .pd-heart { top: 10px; left: 16px; width: 38px; height: 38px; }
}

/* عمود التفاصيل — القيم هنا هي قيم سطح المكتب كما كانت */
.pd-eyebrow { font-size: 11.5px; letter-spacing: .28em; color: #8A5A8F; font-weight: 500; }
.pd-title {
  margin: 12px 0 0; font-size: 32px; font-weight: 600;
  line-height: 1.35; letter-spacing: -.01em;
}
.pd-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pd-price-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.pd-price { font-size: 32px; font-weight: 600; color: var(--plum); }
.pd-old { font-size: 17px; color: #A9A2B0; text-decoration: line-through; }
.pd-save {
  background: #FCE9F0; color: #9B2F5B; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 6px;
}
.pd-choice { margin-top: 24px; }
.pd-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-colors { display: flex; gap: 12px; flex-wrap: wrap; }

/* المقاس: الشكل هنا لا مضمّنًا كي يعمل استعلام الوسائط ووضع «نفد» */
.pd-size {
  min-width: 52px; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: #3C3644;
  font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
/* المشطوب: خطّ مائل عبر الخانة — أشهر إشارة «نفد» في المتاجر */
.pd-size--out {
  color: #B7AFBD; border-color: #EFE9F2; cursor: not-allowed;
  background-image: linear-gradient(to top left,
    transparent calc(50% - 1px), #CFC5D6 calc(50% - 1px),
    #CFC5D6 calc(50% + 1px), transparent calc(50% + 1px));
}
.pd-size--out:hover { border-color: #EFE9F2; }

.pd-color {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #DED5E2;
  cursor: pointer; transition: box-shadow .2s;
}
/* اللون المشطوب: خطّ مائل فوق الدائرة + خفوت، والدائرة معطّلة */
.pd-color--out { cursor: not-allowed; opacity: .5; position: relative; }
.pd-color--out::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%;
  background-image: linear-gradient(to top left,
    transparent calc(50% - 1px), rgba(90,80,96,.9) calc(50% - 1px),
    rgba(90,80,96,.9) calc(50% + 1px), transparent calc(50% + 1px));
}
.pd-actions { display: flex; gap: 12px; margin-top: 30px; align-items: center; flex-wrap: wrap; }
.pd-qty {
  display: flex; align-items: center; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 999px; height: 56px; overflow: hidden;
}
.pd-fav {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); background: #fff;
  cursor: pointer; display: grid; place-items: center;
}
.pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 22px; }
.pd-specs > div {
  display: flex; justify-content: space-between; font-size: 13px;
  padding-bottom: 10px; border-bottom: 1px dashed #EDE7F0;
}
.pd-acc { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.pd-acc__head { display: none; }        /* رأس قابل للنقر على الجوال فقط */
.pd-acc__label { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.pd-reviews__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 26px; flex-wrap: wrap; gap: 12px;
}

/* ── صفحة المنتج على الجوال ────────────────────────────────
   الهدف: قرار الشراء يُتَّخذ في أوّل شاشة، والتفاصيل الطويلة تُطوى.
   كل ما دون 721px فقط — سطح المكتب لا يتغيّر.                */
@media (max-width: 720px) {
  /* مسار التنقّل سطر واحد هادئ — اسم المنتج يظهر في العنوان تحته */
  .pd-crumbs { font-size: 11.5px !important; margin-bottom: 14px !important; }
  .pd-crumbs .pd-crumbs__current { display: none; }

  .pd-eyebrow { font-size: 10.5px; letter-spacing: .22em; }
  .pd-title { margin-top: 10px; font-size: 19px; line-height: 1.55; }
  .pd-meta { gap: 9px; margin-top: 10px; font-size: 12.5px; }
  .pd-meta > span:first-child { font-size: 13px; }

  .pd-price-row {
    margin-top: 14px; padding-bottom: 16px; gap: 10px;
  }
  .pd-price { font-size: 25px; }
  .pd-old { font-size: 14px; }
  .pd-save { font-size: 11.5px; padding: 4px 9px; }

  .pd-choice { margin-top: 20px; }
  /* المقاسات صفّ يُسحَب: الالتفاف كان يبني ثلاثة أسطر على شاشة ضيّقة */
  .pd-sizes {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; margin-inline: -16px; padding-inline: 16px;
  }
  .pd-sizes::-webkit-scrollbar { display: none; }
  .pd-sizes button { flex: none; height: 44px; min-width: 48px; }
  /* 44px أدنى مساحة لمس مقبولة — الدائرة كانت 38px */
  .pd-colors button { width: 44px !important; height: 44px !important; }

  .pd-actions { margin-top: 22px; gap: 10px; }
  /* زرّ الإضافة موجود في الشريط السفلي الثابت — تكراره هنا حشو */
  .pd-add { display: none; }
  .pd-qty { flex: 1; height: 50px; justify-content: space-between; }
  .pd-qty button { height: 50px; }
  .pd-fav { width: 50px; height: 50px; }

  /* الأقسام الطويلة تُطوى: رأس قابل للنقر + سهم يدور */
  .pd-acc { margin-top: 22px; padding-top: 0; border-top: none; }
  .pd-acc__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-top: 1px solid var(--line);
    font-size: 14.5px; font-weight: 600; color: var(--ink);
    cursor: pointer; list-style: none;
  }
  .pd-acc__head::-webkit-details-marker { display: none; }
  .pd-acc__head::after {
    content: ''; width: 8px; height: 8px; flex: none; margin-inline-start: 10px;
    border-right: 1.6px solid #8B8291; border-bottom: 1.6px solid #8B8291;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s;
  }
  .pd-acc[open] > .pd-acc__head::after { transform: rotate(-135deg) translateY(-2px); }
  .pd-acc__body { padding-bottom: 18px; }
  .pd-acc__label { display: none; }        /* الرأس يقول «الوصف» أصلًا */
  .pd-specs { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .pd-specs > div { padding: 11px 0; }

  /* لوح التقييمات كان يأكل 72px حشوًا من عرض 375 */
  .pd-reviews { margin-top: 36px !important; padding: 20px 16px !important;
                border-radius: 14px !important; }
  .pd-reviews__head h2 { font-size: 17px !important; }
  .pd-reviews__head { margin-bottom: 18px; }

  /* «قد يعجبك أيضاً» شريط أفقي بدل شبكة تطوّل الصفحة */
  .pd-similar { margin-top: 36px !important; }
  .pd-similar h2 { font-size: 17px !important; margin-bottom: 14px !important; }
  .pd-similar__row {
    display: flex !important; grid-template-columns: none !important;
    gap: 12px !important; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-inline: -16px; padding-inline: 16px;
  }
  .pd-similar__row::-webkit-scrollbar { display: none; }
  .pd-similar__row > * { flex: 0 0 46%; scroll-snap-align: start; }

  /* الصورة ترتفع إلى أعلى الشاشة، والشريط السفلي الثابت يحتاج مساحة تحته */
  main[data-pd] { padding-top: 12px !important; padding-bottom: 96px !important; }

  /* زرّ واتساب العائم كان يجلس فوق «أضف إلى السلة»: bottom:26px والشريط
     ارتفاعه 73px. يُرفع فوقه ويصغر قليلًا كي لا يزاحم الزرّ. */
  body:has(.mobile-buybar) .wa-float {
    bottom: 88px !important; width: 48px !important; height: 48px !important;
    box-shadow: 0 6px 18px rgba(37,211,102,.34) !important;
  }
  body:has(.mobile-buybar) .wa-float svg { width: 23px !important; height: 23px !important; }
}

/* ══════════════════════════════════════════════════════════
   عارض الصورة المكبّرة (lightbox) — عجلة/قرص للتكبير وسحب للتحريك
   ══════════════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,16,22,.94);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .22s;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
body.lb-open { overflow: hidden; }

.lb__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px; color: #fff;
}
.lb__counter { font-size: 13px; color: #D9CFE0; font-variant-numeric: tabular-nums; }
.lb__tools { display: flex; align-items: center; gap: 8px; }
.lb__zoom {
  min-width: 46px; text-align: center; font-size: 12.5px; color: #D9CFE0;
  font-variant-numeric: tabular-nums;
}
.lb__btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; display: grid; place-items: center; transition: background .2s;
}
.lb__btn svg { width: 18px; height: 18px; }
.lb__btn:hover { background: rgba(255,255,255,.22); }
.lb__btn:disabled { opacity: .4; cursor: default; }
.lb__btn--close { background: rgba(255,255,255,.2); }

.lb__stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: grid; place-items: center;
  touch-action: none;                /* الزوم والسحب يُدارَان بالكود */
  cursor: zoom-in;
}
.lb__stage.is-zoomed { cursor: grab; }
.lb__stage.is-dragging { cursor: grabbing; }
.lb__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; will-change: transform;
  transition: transform .18s ease-out; user-select: none; -webkit-user-drag: none;
}
.lb__stage.is-dragging .lb__img { transition: none; }

.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; display: grid; place-items: center; transition: background .2s;
}
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav:hover { background: rgba(255,255,255,.26); }
.lb__nav--prev { right: 18px; }
.lb__nav--next { left: 18px; }

.lb__strip {
  flex: none; display: flex; gap: 8px; justify-content: center;
  padding: 12px 18px 18px; overflow-x: auto; scrollbar-width: none;
}
.lb__strip::-webkit-scrollbar { display: none; }
.lb__strip button {
  flex: 0 0 46px; aspect-ratio: 3 / 4; padding: 0; border-radius: 7px;
  overflow: hidden; border: 2px solid transparent; background: none;
  cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s;
}
.lb__strip button.is-active { border-color: #fff; opacity: 1; }
.lb__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .lb__nav { display: none; }        /* السحب بالإصبع يكفي */
  .lb__strip { display: none; }
  .lb__bar { padding: 10px 14px; }
}

/* ══════════════════════════════════════════════════════════
   صفحات الحساب: حسابي + الإعدادات
   ══════════════════════════════════════════════════════════ */
.acc-layout {
  display: grid; grid-template-columns: 262px minmax(0, 1fr);
  gap: 22px; margin-top: 34px; align-items: start;
}
.acc-nav { position: sticky; top: 104px; }
.acc-nav__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 10px;
}
.acc-nav__who {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 12px 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.acc-nav__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--plum); color: #fff; display: grid; place-items: center;
  font-size: 16px; font-weight: 600;
}
.acc-nav__name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-nav__phone { font-size: 12px; color: var(--ink-faint); margin-top: 3px; text-align: start; }
.acc-nav__link {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: none; border-radius: 12px;
  background: transparent; color: #4A4453;
  font-family: inherit; font-size: 13.5px; text-align: start; cursor: pointer;
  transition: background .18s, color .18s;
}
.acc-nav__link svg { width: 17px; height: 17px; flex: none; }
.acc-nav__link:hover { background: var(--lilac-soft); color: var(--plum); }
.acc-nav__link.is-active { background: var(--lilac); color: var(--plum); font-weight: 600; }
.acc-nav__link--danger:hover { background: #FCE9F0; color: #9B2F5B; }

/* صفوف «تسمية ← قيمة» في بطاقة الهوية */
.acc-rows { display: flex; flex-direction: column; }
.acc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.acc-row:first-child { padding-top: 0; }
.acc-row:last-child { border-bottom: none; padding-bottom: 0; }
.acc-row__label { font-size: 13px; color: var(--ink-muted); flex: none; }
.acc-row__value {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-align: end; min-width: 0;
}

.acc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: #F1EDF3; color: #6E6577;
}
.acc-badge--ok { background: #E9F7EF; color: #14663A; }
.acc-badge--new { background: #FFF4DC; color: #8A6A08; }
.acc-badge--contacted { background: var(--lilac); color: var(--plum); }
.acc-badge--done { background: #E9F7EF; color: #14663A; }

.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.acc-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 22px;
}
.acc-stat__value {
  font-size: 25px; font-weight: 600; color: var(--plum);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.acc-stat__label { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px; }

.acc-order {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.acc-order:last-child { border-bottom: none; padding-bottom: 0; }

.acc-readonly {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 52px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #F7F4F8; color: #6E6577; font-size: 14px;
}
.acc-note {
  border-radius: 12px; padding: 12px 15px; font-size: 13px;
  border: 1px solid transparent;
}
.acc-note--ok { background: #F1FBF5; color: #14663A; border-color: #CDEBD9; }
.acc-note--bad { background: #FCE9F0; color: #9B2F5B; border-color: #F3D3E0; }

@media (max-width: 980px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-nav { position: static; }
}
@media (max-width: 560px) {
  .acc-stats { grid-template-columns: 1fr; }
  .acc-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .acc-row__value { text-align: start; }
}

/* ══════════════════════════════════════════════════════════
   قائمة المستخدم في الهيدر — تُظهر اسمه فيعرف أنّه مسجّل الدخول
   ══════════════════════════════════════════════════════════ */
.user-menu { position: relative; flex: none; }
.user-menu__trigger {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 10px 0 6px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; font-family: inherit; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.user-menu__trigger:hover, .user-menu[data-open] .user-menu__trigger {
  background: var(--lilac-soft); border-color: #E9DDEE;
}
.user-menu__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--plum); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.user-menu__name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu__chev { width: 15px; height: 15px; transition: transform .22s; }
.user-menu[data-open] .user-menu__chev { transform: rotate(180deg); }

.user-menu__panel {
  /* المحاذاة على inset-inline-end: في RTL يقع الزرّ قرب حدّ الشاشة الأيسر،
     ولو انفتحت اللوحة نحوه لخرج طرفها عن الشاشة */
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 232px; z-index: 50;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(36,31,39,.14); overflow: hidden;
  padding: 6px;
}
.user-menu__panel[hidden] { display: none; }
.user-menu__head { padding: 12px 12px 13px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu__item {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: none; border-radius: 10px;
  background: transparent; color: #4A4453;
  font-family: inherit; font-size: 13.5px; text-align: start; cursor: pointer;
  transition: background .18s, color .18s;
}
.user-menu__item svg { width: 17px; height: 17px; flex: none; }
.user-menu__item:hover { background: var(--lilac-soft); color: var(--plum); }
.user-menu__item--danger:hover { background: #FCE9F0; color: #9B2F5B; }

@media (max-width: 720px) {
  /* العمود البصري مخفي على الجوال، فالشعار يظهر أعلى النموذج بدلًا منه */
  .auth-brand-mobile { display: block; }
  .auth-tabs { margin-bottom: 24px; }
}

/* حاوية الصفحة — تكرّرت في 18 موضعًا */
.hs-wrap {
  max-width: 1360px; margin-left: auto; margin-right: auto;
  padding-left: 32px; padding-right: 32px;
}

/* لوح أبيض: الفلاتر، شريط الترتيب، بطاقات «من نحن»، صندوق التقييمات… */
.hs-panel { background: var(--surface); border: 1px solid var(--line); }

/* عنوان القسم الصغير (شرطة ذهبية + نص متباعد) */
.hs-rule { width: 22px; height: 1px; background: var(--star); }
.hs-eyebrow { font-size: 11px; letter-spacing: .26em; color: #96751F; font-weight: 500; }

/* خلفية «مكان الصورة» المخطّطة — 9 مواضع بألوان وفجوات مختلفة */
.hs-ph {
  background-color: var(--ph, #EFEAE2);
  background-image: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, var(--ph-a, .7)) 0 2px,
      transparent 2px var(--ph-gap, 10px));
}

/* أجزاء بطاقة المنتج */
.hs-card__media {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #F4F0EA;
}
.hs-card__link { position: absolute; inset: 0; display: grid; place-items: center; }

/* الصورة الثانية فوق الأولى، تظهر بالمرور — الأولى تبقى هي المُحمّلة أولًا */
.hs-card__img-alt {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .45s ease;
}
.hs-card:hover .hs-card__img-alt { opacity: 1; }
/* على اللمس لا مرور مؤشّر: الصورة الثانية تبقى مخفية بلا وميض عند الضغط */
@media (hover: none) {
  .hs-card__img-alt { display: none; }
}
.hs-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 42px;
  font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--ink);
}
.hs-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 600; padding: 4px 9px;
  border-radius: 6px; letter-spacing: .02em;
}
.hs-price {
  font-size: 15px; font-weight: 600; color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.hs-price-old {
  font-size: 12px; color: #A9A2B0; text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   السلة الجانبية + الطبقة + الـ toast (تُدار عبر body.cart-open)
   ══════════════════════════════════════════════════════════ */
#cart-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(36,31,39,.42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
body.cart-open #cart-overlay { opacity: 1; pointer-events: auto; }

#cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 420px; max-width: 92vw; background: #fff;
  box-shadow: -20px 0 50px rgba(36,31,39,.16);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
body.cart-open #cart-drawer { transform: translateX(0); }

/* toast يبنيه store.js */
#hs-toast {
  position: fixed; bottom: 32px; left: 50%; z-index: 80;
  transform: translate(-50%, 24px); opacity: 0;
  background: #241F27; color: #fff; padding: 15px 26px;
  border-radius: 22px; font-size: 13.5px; line-height: 1.65;
  box-shadow: 0 14px 40px rgba(36,31,39,.3);
  display: flex; align-items: center; gap: 11px;
  /* كان nowrap: أي رسالة طويلة تتجاوز عرض الشاشة على الجوال.
     width:max-content ضروري لأن left:50% يحصر المساحة المتاحة في نصف
     العرض، فيتقلّص العنصر إلى عمود ضيّق بدل بلوغ max-width */
  width: max-content; max-width: min(92vw, 460px); text-align: start;
  pointer-events: none; transition: opacity .3s, transform .3s;
}
#hs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#hs-toast .hs-toast__check {
  width: 20px; height: 20px; border-radius: 50%; background: var(--whatsapp);
  display: grid; place-items: center; flex: none;
}

@media (max-width: 720px) {
  #hs-toast { bottom: 20px; padding: 13px 18px; font-size: 13px; gap: 9px; }
  /* لا يختبئ خلف شريط الشراء الثابت في صفحة المنتج */
  body:has(.mobile-buybar) #hs-toast { bottom: 92px; }
}

/* أدوات مساعدة */
.no-scrollbar::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
  .hide-on-mobile { display: none !important; }
  .pad-mobile { padding-left: 16px !important; padding-right: 16px !important; }

  /* البحث ينزل سطرًا كاملًا تحت الشعار والأيقونات بدل أن يُخفى */
  .hs-headbar {
    height: auto !important; flex-wrap: wrap; gap: 12px !important;
    padding-top: 12px; padding-bottom: 12px;
  }
  .hs-headbar .hs-search { order: 3; flex-basis: 100%; max-width: none; }
  /* ارتفاع صريح: بدونه يتمدّد صفّ nav بمقدار 42px لكل أيقونة فيه
     (168px لأربع) رغم أنّها كلّها على سطر واحد، فيأكل الشريط 284px
     من شاشة 812px. القيمة = ارتفاع الأيقونة + هامش بصري. */
  .hs-headbar > nav { height: 46px; align-self: center; }
}
/* مؤشّر التحديث أثناء الفلترة — htmx يضع htmx-request على العنصر المُطلِق
   (الفورم)، فيخفت محتوى الشبكة ويظهر الدوّار بجانب العدّاد */
.filter-spinner { opacity: 0; transition: opacity .2s; pointer-events: none; }
.products-layout.htmx-request .filter-spinner { opacity: 1; }
.products-layout.htmx-request #product-grid {
  opacity: .4; pointer-events: none; transition: opacity .18s;
}
#product-grid { transition: opacity .18s; }

/* استجابة شبكة قائمة المنتجات وصفحة المنتج (حفاظًا على العمل على الموبايل) */
@media (max-width: 1180px) {
  .products-layout { grid-template-columns: 1fr !important; }
  /* كان هنا position:static !important ليكسر sticky المضمّن في القالب.
     انتقل sticky إلى main.css فبطل سببه، وصار هو نفسه يمنع اللوح
     السفلي (position:fixed) من العمل. */
  .product-detail-grid { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-5-sim { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 980px) {
  /* الصورة فوق والتفاصيل تحتها — نفس نقطة انتقال المصغّرات إلى صفّ أفقي */
  .product-gallery { grid-template-columns: 1fr !important; gap: 26px !important; }
}
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-5-sim { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
  .auth-visual { display: none !important; }
  /* الغلاف نفسه هو الشبكة — .auth-wrap عليه display:contents فلا شبكة له.
     minmax(0,1fr) لا 1fr: الأخيرة لا تصغر تحت عرض المحتوى الذاتي للحقول */
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-wrap > div { padding-left: 20px !important; padding-right: 20px !important; }
  .auth-wrap input { min-width: 0; }
  .mobile-buybar { display: flex !important; }
}

/* شبكات الصفحة الرئيسية — نفس نقاط التوقف في التصميم */
@media (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-cats { grid-template-columns: repeat(4, 1fr) !important; }
  .grid-services { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-proof { grid-template-columns: 1fr !important; }
  .grid-ig { grid-template-columns: repeat(3, 1fr) !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cats { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-services { grid-template-columns: 1fr !important; }
  .grid-ig { grid-template-columns: repeat(2, 1fr) !important; }
  .foot-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════
   بانر الرئيسية
   ───────────────────────────────────────────────────────────
   قرارات مبنية على الصور الفعلية (1200×800، شخص يملأ الإطار):

   * تخطيط مقسوم لا صورة ملء العرض: البانر العريض يقصّ 3:2 رأسيًا نحو
     النصف فيقطع رأس العارضة أو ساقيها. عمود الصورة ‎~1.6:1 فالقصّ لطيف.
   * الصورة تلامس الحواف بلا هامش ولا إطار داخلي — «بطاقة داخل بطاقة»
     تحوّل صورة جيدة إلى مصغّرة.
   * حافة ذائبة بين الصورة واللوح بدل خطّ قاطع.
   * لوح عاجي دافئ بنصّ بنفسجي، لا نصّ فوق الصورة: صور المتجر تتراوح بين
     كريمي فاتح جدًّا وأسود عالي التباين، فأي لون نصّ فوقها يسقط على إحداها.
   ═══════════════════════════════════════════════════════════ */

.hs-hero {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #F4EBE1;
    box-shadow: 0 18px 50px rgba(61, 37, 64, .10);
}
.hs-hero-track {
    display: flex;
    width: 100%;
    transition: transform .75s cubic-bezier(.4, 0, .2, 1);
}
.hs-hero-slide {
    flex: 0 0 100%;
    display: grid;
    /* الصور لقطات 3:4 طولية؛ عمود عريض يقصّها إلى الجذع فيقطع الوجه.
       عمود شبه مربّع + object-position من الأعلى يُبقي الوجه والقطعة. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
    /* height لا min-height: مع صفّ تلقائي ترث الصورة نسبتها الطبيعية
       (3:4) فيرتفع البانر إلى 735px ولا يقصّ object-fit شيئًا */
    height: clamp(470px, 47vw, 600px);
}

/* ── اللوح النصّي ── */
.hs-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 17px;
    padding: 56px clamp(32px, 4vw, 60px);
    background: linear-gradient(155deg, #FBF7F1 0%, #F4EBE1 100%);
}
.hs-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 11.5px;
    letter-spacing: .3em;
    color: #96751F;
    font-weight: 600;
}
.hs-hero-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--star);
    flex: none;
}
.hs-hero-title {
    margin: 0;
    font-size: clamp(32px, 3.3vw, 50px);
    line-height: 1.18;
    font-weight: 600;
    color: #2A1E2E;
    letter-spacing: -.02em;
}
.hs-hero-text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.9;
    color: #5C5566;
    font-weight: 300;
    max-width: 42ch;
}

/* ── العدّاد: أرقام بفواصل شعرية، لا ثلاث علب ── */
.hs-hero-countdown {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: fit-content;
    margin-top: 2px;
    padding: 10px 4px;
    border-top: 1px solid rgba(83, 52, 86, .14);
    border-bottom: 1px solid rgba(83, 52, 86, .14);
}
.hs-hero-cd-unit {
    padding: 0 18px;
    text-align: center;
    min-width: 62px;
}
.hs-hero-cd-unit + .hs-hero-cd-unit {
    border-inline-start: 1px solid rgba(83, 52, 86, .14);
}
.hs-hero-cd-num {
    font-size: 25px;
    font-weight: 600;
    color: var(--plum);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hs-hero-cd-label {
    font-size: 10px;
    color: var(--ink-muted);
    margin-top: 3px;
    letter-spacing: .04em;
}

/* ── الأزرار: أساسي ممتلئ + ثانوي تحريري بخطّ سفلي ── */
.hs-hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.hs-hero-cta {
    height: 52px;
    padding: 0 34px;
    display: inline-flex;
    align-items: center;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 8px 22px rgba(83, 52, 86, .22);
}
.hs-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--plum);
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(83, 52, 86, .32);
    transition: gap .2s, border-color .2s;
}
.hs-hero-link:hover { gap: 12px; border-bottom-color: var(--plum); }
.hs-hero-link svg { width: 15px; height: 15px; flex: none; }

/* ── الصورة ── */
.hs-hero-media { position: relative; overflow: hidden; }
.hs-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, center top);
    display: block;
}
/* الحافة الذائبة: الصورة تلامس اللوح على يمينها الفيزيائي، فتُمزَج فيه
   بتدرّج بدل خطّ قاطع. اتجاه فيزيائي عمدًا — الشريحة RTL والخلط يقع
   دائمًا على الحافة الملامسة للوح. */
.hs-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent 62%, rgba(244, 235, 225, .55) 84%, #F4EBE1 100%);
}

/* ── التنقّل ── */
.hs-hero-dots {
    position: absolute;
    bottom: 26px;
    inset-inline-end: clamp(32px, 4vw, 60px);
    display: flex;
    gap: 7px;
    z-index: 2;
}
.hs-hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(83, 52, 86, .26);
    transition: width .32s cubic-bezier(.4, 0, .2, 1), background .32s;
}
.hs-hero-dot.is-active { width: 30px; background: var(--plum); }

.hs-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(36, 31, 39, .16);
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
    opacity: 0;
    transition: opacity .25s, background .2s;
}
.hs-hero:hover .hs-hero-nav { opacity: 1; }
.hs-hero-nav:focus-visible { opacity: 1; }
.hs-hero-nav:hover { background: #fff; }
.hs-hero-nav--prev { inset-inline-end: 18px; }
.hs-hero-nav--next { inset-inline-start: 18px; }

/* ── الجوال: الصورة فوق والنصّ تحتها ── */
@media (max-width: 860px) {
    /* height الثابت للحالة العريضة يسحق التخطيط المكدّس — auto هنا */
    .hs-hero-slide { grid-template-columns: 1fr; height: auto; min-height: 0; }
    /* 4:5 لا 4:3: المصدر لقطات 3:4 طولية، والإطار العرضي يقصّ العارضة
       إلى شريط من جذعها */
    .hs-hero-media { order: -1; aspect-ratio: 4 / 5; }
    /* الحافة الذائبة تصير أفقية: من أسفل الصورة إلى اللوح */
    .hs-hero-media::after {
        background: linear-gradient(to bottom, transparent 68%, #F4EBE1 100%);
    }
    .hs-hero-copy { padding: 30px 24px 62px; gap: 14px; }
    .hs-hero-title { font-size: clamp(27px, 7vw, 36px); }
    .hs-hero-text { font-size: 14.5px; line-height: 1.85; }
    .hs-hero-actions { gap: 16px; }
    .hs-hero-cta { height: 48px; padding: 0 26px; font-size: 14px; }
    .hs-hero-dots { inset-inline-end: 0; inset-inline-start: 0; justify-content: center; bottom: 22px; }
    .hs-hero-nav { opacity: 1; width: 38px; height: 38px; top: 32%; }
}

/* ═══════════════════════════════════════════════════════════
   شريط السعر بمقبضين (أدنى/أعلى)
   مدخلا range متراكبان على مسار واحد. كلاهما شفّاف المسار
   و pointer-events:none، ويُعاد تفعيل الالتقاط على المقبض وحده
   وإلّا حجب المدخل العلوي مقبض السفلي فتعذّر سحب أحدهما.
   ═══════════════════════════════════════════════════════════ */
.hs-range { position: relative; height: 26px; }

.hs-range-track,
.hs-range-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
}
.hs-range-track { inset-inline: 0; background: #E8E1EB; }
.hs-range-fill  { background: var(--plum); }

.hs-range-input {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;      /* المسار لا يلتقط — المقبض فقط */
}
.hs-range-input:focus { outline: none; }

.hs-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--plum);
  box-shadow: 0 2px 6px rgba(83, 52, 86, .28);
  cursor: grab;
}
.hs-range-input::-webkit-slider-thumb:active { cursor: grabbing; }
.hs-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--plum);
  box-shadow: 0 2px 6px rgba(83, 52, 86, .28);
  cursor: grab;
}
.hs-range-input::-moz-range-track { background: none; }
.hs-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(83, 52, 86, .18);
}

/* أيقونات التواصل الاجتماعي في الفوتر الداكن */
.social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid #3A3340;
  color: #C6BBCD;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.social-btn:hover {
  background: var(--plum); border-color: var(--plum);
  color: #fff; transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════════
   طبقة اللمس — @media (pointer: coarse)
   ══════════════════════════════════════════════════════════════
   الاستعلام يسأل عن أداة التأشير لا عن عرض الشاشة: الجوال واللوحي
   والشاشة اللمسية داخلون، وفأرة على نافذة ضيّقة خارجة. الأزرار
   الدائرية 30–38px تُقرأ جميلة بالعين وتُخطئها الإصبع (الحدّ العملي
   44px). القاعدة توسّع ما يلتقط اللمسة عبر طبقة وهمية شفّافة، فلا
   يتغيّر شكل الزرّ ولا يُزاح جاره.
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* الطبقة الوهمية تحتاج صندوقًا موضَعًا تستند إليه. الأزرار العائمة
     فوق الصور (.pd-zoom-hint و.pd-heart و.hs-hero-nav و.heart-btn
     و.add-round) موضَعة absolute أصلًا وهي صندوق استناد صالح — وكتابة
     relative عليها هنا كانت ستُلغي موضعها وتُسقطها من فوق الصورة إلى
     مجرى النصّ. فلا تُذكر إلا الأزرار الساكنة. */
  .social-btn,
  .hs-map-btn,
  .qty-btn,
  .close-btn {
    position: relative;
  }
  .hs-search button::after,
  .add-round::after,
  .heart-btn::after,
  .pd-zoom-hint::after,
  .pd-heart::after,
  .social-btn::after,
  .hs-map-btn::after,
  .qty-btn::after,
  .close-btn::after,
  [data-pw-toggle]::after,
  .hs-hero-nav::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 44px;
    height: 44px;
    min-width: 100%;
    min-height: 100%;
    transform: translate(50%, -50%);   /* RTL: inset-inline-start يقيس من اليمين */
  }

  /* روابط نصّية في الفوتر ومسار التنقّل: سطر 19px لا يُلمس.
     الحشو الرأسي يوسّع الصندوق نفسه — لا طبقة وهمية هنا لأن
     الروابط متجاورة رأسيًا وتتداخل طبقاتها. */
  .foot-link { display: inline-block; padding-block: 8px; }
  .link-muted { display: inline-block; padding-block: 8px; }
  .auth-switch__btn { min-height: 40px; padding-inline: 4px; }
  .hs-hero-link { padding-block: 8px; }

  /* ── نقاط المعرضين ─────────────────────────────────────────
     النقطة 7px هي الوسيلة الوحيدة الباقية لتغيير الصورة على
     الجوال بعد إخفاء الأسهم والمصغّرات. لا تصلح طبقة 44px هنا:
     النقاط متجاورة أفقيًا فتتداخل مربّعاتها ويبتلع الجارُ اللمسة.
     الحلّ صندوق حقيقي واسع، والنقطة تُرسم داخله بـ::before. */
  .pd-dots { gap: 0; margin-top: 4px; }
  .pd-dot {
    width: 34px; height: 40px;
    background: none;
    display: grid; place-items: center;
    transition: none;
  }
  .pd-dot::before {
    content: '';
    width: 7px; height: 7px; border-radius: 999px;
    background: #D9CFE0;
    transition: width .25s, background .25s;
  }
  .pd-dot.is-active { width: 44px; background: none; }
  .pd-dot.is-active::before { width: 22px; background: var(--plum); }

  .hs-hero-dots { gap: 0; }
  .hs-hero-dot {
    width: 30px; height: 38px;
    background: none;
    display: grid; place-items: center;
    transition: none;
  }
  .hs-hero-dot::before {
    content: '';
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(83, 52, 86, .26);
    transition: width .25s, background .25s;
  }
  .hs-hero-dot.is-active { width: 46px; background: none; }
  .hs-hero-dot.is-active::before { width: 30px; background: var(--plum); }
}

/* ══════════════════════════════════════════════════════════════
   قائمة الجوال (body.menu-open)
   ══════════════════════════════════════════════════════════════ */
.hs-burger {
  display: none;                       /* تظهر عبر .show-on-mobile */
  width: 42px; height: 42px; flex: none;
  border: none; background: transparent; cursor: pointer;
  border-radius: 50%; place-items: center;
}
.hs-burger:hover { background: rgba(83, 52, 86, .07); }
/* ثلاثة خطوط من عنصر واحد: الأوسط هو الجسم، والطرفان ظلّان له */
.hs-burger__bars,
.hs-burger__bars::before,
.hs-burger__bars::after {
  display: block; width: 19px; height: 1.7px; border-radius: 2px;
  background: #241F27; transition: transform .25s, opacity .2s;
}
.hs-burger__bars { position: relative; }
.hs-burger__bars::before,
.hs-burger__bars::after { content: ''; position: absolute; inset-inline-start: 0; }
.hs-burger__bars::before { top: -6px; }
.hs-burger__bars::after  { top: 6px; }
body.menu-open .hs-burger__bars { background: transparent; }
body.menu-open .hs-burger__bars::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .hs-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

#menu-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(36, 31, 39, .42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
body.menu-open #menu-overlay { opacity: 1; pointer-events: auto; }

#mobile-menu {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 71;
  width: 320px; max-width: 86vw;
  background: #fff; box-shadow: 20px 0 50px rgba(36, 31, 39, .18);
  /* inset-inline-start في RTL = اليمين، فالانزلاق يخرج يمينًا */
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  /* شريط المتصفّح السفلي على iOS يأكل آخر عنصر */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.menu-open #mobile-menu { transform: translateX(0); }

.mm__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid #F1ECF4;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.mm__brand {
  font-family: 'Cormorant Garamond', serif; font-size: 25px;
  letter-spacing: .14em; color: #241F27; line-height: 1;
}
.mm__brand-sub {
  font-size: 9.5px; letter-spacing: .4em; color: var(--gold); margin-top: 3px;
}

.mm__account {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 16px 4px; padding: 13px 14px;
  border-radius: 13px; background: #F7F3F9;
}
.mm__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--plum); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
}
.mm__account-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm__account-name { font-size: 14px; font-weight: 600; color: #241F27; }
.mm__account-phone { font-size: 12px; color: #9A93A2; text-align: start; }

.mm__auth { display: flex; flex-direction: column; gap: 9px; margin: 14px 16px 4px; }
.mm__auth-in {
  height: 46px; border-radius: 999px; font-size: 14px; font-weight: 600;
  display: grid; place-items: center;
}
.mm__auth-up {
  height: 44px; border-radius: 999px; border: 1px solid #E4DCE8;
  color: var(--plum); font-size: 13.5px; font-weight: 500;
  display: grid; place-items: center;
}

.mm__group { padding: 14px 16px 6px; }
.mm__group + .mm__group { border-top: 1px solid #F4F0F6; }
.mm__label {
  font-size: 10.5px; letter-spacing: .22em; color: #A9A2B0;
  font-weight: 600; padding: 0 10px 8px;
}
.mm__item {
  display: flex; align-items: center; gap: 8px;
  /* 50px: فوق حدّ اللمس 44px، والقائمة تُقرأ مرتّبة */
  min-height: 50px; padding: 0 10px; border-radius: 10px;
  font-size: 14.5px; color: #3C3644;
}
.mm__item:hover, .mm__item:focus-visible { background: #F7F3F9; color: var(--plum); }
.mm__item--sale { color: #9B2F5B; font-weight: 500; }
.mm__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--plum); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; margin-inline-start: auto;
}

.mm__foot {
  margin-top: auto; padding: 16px; border-top: 1px solid #F1ECF4;
  display: flex; flex-direction: column; gap: 12px;
}
.mm__wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.mm__social { display: flex; gap: 10px; justify-content: center; }
.mm__social-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #E7DFEB; color: #7A7280;
  display: grid; place-items: center; transition: all .2s;
}
.mm__social-btn:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.mm__logout-form { margin: 0; }
.mm__logout {
  width: 100%; min-height: 44px; border: none; background: none;
  color: #A03A5B; font-family: inherit; font-size: 13.5px; cursor: pointer;
  border-radius: 10px;
}
.mm__logout:hover { background: #FCF2F5; }

/* الهمبرغر لا يظهر إلا حيث تختفي روابط الهيدر — نقطة الانتقال نفسها */
.show-on-mobile { display: none; }
@media (max-width: 720px) {
  .show-on-mobile { display: grid; }
}

/* ══════════════════════════════════════════════════════════════
   فلاتر المنتجات على الجوال — لوح يُفتح بزرّ
   ══════════════════════════════════════════════════════════════
   لوح الفلاتر 753px كان يعلو الشبكة، فأوّل منتج يبدأ عند 1262px:
   أكثر من شاشة ونصف من الفلاتر قبل رؤية قطعة واحدة. على الشاشة
   الضيّقة تأتي البضاعة أوّلًا، والفلاتر خلف زرّ.
   ══════════════════════════════════════════════════════════════ */
/* سطح المكتب: عمود ملتصق يرافق التمرير. 170px = الهيدر + شريط
   التصنيفات. القيمة كانت مضمّنة في القالب فتغلب استعلام الوسائط
   أدناه ولا يصير اللوح سفليًا أبدًا. */
.products-layout > aside { position: sticky; top: 170px; }

.filters-toggle { display: none; }
.filters-done { display: none; }

@media (max-width: 1180px) {
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px; border-radius: 999px;
    border: 1px solid #E4DCE8; background: #fff; color: var(--plum);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .filters-toggle svg { width: 16px; height: 16px; }
  .filters-toggle__n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--plum); color: #fff; font-size: 10.5px;
    display: grid; place-items: center;
  }

  .products-layout > aside {
    position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: 71;
    width: auto; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 44px rgba(36, 31, 39, .2);
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  }
  body.filters-open .products-layout > aside { transform: translateY(0); }

  /* «عرض النتائج» مثبّت أسفل اللوح: الشبكة تتحدّث فورًا خلفه،
     فدور الزرّ إغلاق اللوح لا إرسال شيء */
  .filters-done {
    display: block; position: sticky; bottom: 0;
    margin: 10px -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid #F1ECF4;
  }
  .filters-done button {
    width: 100%; height: 48px; border-radius: 999px; border: none;
    background: var(--plum); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
}

/* ══════════════════════════════════════════════════════════════
   درج السلة — رأس ثابت، بنود تُمرَّر، وأسفلٌ مضغوط
   ══════════════════════════════════════════════════════════════
   منطقة تمرير واحدة فقط (.cart-body). كان الأسفل يُمرَّر هو أيضًا
   (تمرير داخل تمرير) لأنّ بطاقتَي الدفع وصفوف المجموع تجاوزت نصف
   الشاشة — فيغيب زرّ الإتمام ولا شيء يدلّ عليه.
   ══════════════════════════════════════════════════════════════ */
.cart-head {
  flex: none; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid #EFE7EF;
}
.cart-head__title { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.cart-head__count {
  font-size: 12px; color: var(--ink-faint); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* شريط الشحن المجاني: دعوة لإضافة قطعة، فمكانه فوق البنود لا تحت المجموع */
.cart-ship {
  flex: none; padding: 11px 22px; background: #FBF6F0;
  border-bottom: 1px solid #F1E8DE;
}
.cart-ship__text { font-size: 12px; color: #6C6575; font-weight: 300; }
.cart-ship__text b { font-weight: 600; color: var(--plum); font-variant-numeric: tabular-nums; }
.cart-ship__bar {
  height: 4px; margin-top: 7px; border-radius: 999px;
  background: #EADFD2; overflow: hidden;
}
.cart-ship__bar span { display: block; height: 100%; border-radius: 999px; background: var(--star); }
.cart-ship__done {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #14663A;
}
.cart-ship__done svg { width: 15px; height: 15px; }

.cart-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px; }

/* ── بند ────────────────────────────────────────────────── */
.cart-line {
  display: grid; grid-template-columns: 68px 1fr; gap: 13px;
  padding: 16px 0; border-bottom: 1px solid #F5F1F6;
}
.cart-line:last-child { border-bottom: none; }
.cart-line__img {
  display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  background: #F4EFF1; --ph: #EFE9E1;
}
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cart-line__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cart-line__row--end { align-items: center; margin-top: auto; }
.cart-line__name {
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line__name:hover { color: var(--plum); }
.cart-line__del {
  flex: none; border: none; background: none; cursor: pointer; padding: 2px;
  color: #C0B7C6; transition: color .18s;
}
.cart-line__del svg { width: 16px; height: 16px; display: block; }
.cart-line__del:hover { color: var(--sale); }
.cart-line__variant {
  font-size: 11.5px; color: #7A7280; background: #F6F2F7;
  border-radius: 6px; padding: 3px 8px; width: fit-content;
}
.cart-line__warn { font-size: 11.5px; color: var(--sale); font-weight: 600; }
.cart-line__price { text-align: left; line-height: 1.4; }
.cart-line__price b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--plum);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cart-line__price span {
  display: block; font-size: 11px; color: var(--ink-faint);
  white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* عدّاد الكمية — مشترك بين درجَي التجزئة والجملة */
.qty-box {
  display: flex; align-items: center; flex: none;
  border: 1px solid #E7DEEB; border-radius: 999px; overflow: hidden; background: #fff;
}
.qty-box .qty-btn {
  width: 32px; height: 32px; border: none; background: #fff; cursor: pointer;
  color: var(--plum); font-size: 17px; line-height: 1;
}
.qty-box__n {
  min-width: 30px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── السلة الفارغة ──────────────────────────────────────── */
.cart-empty { padding: 66px 10px; text-align: center; }
.cart-empty__icon {
  width: 66px; height: 66px; margin: 0 auto; border-radius: 50%;
  background: #F3EBE1; display: grid; place-items: center;
}
.cart-empty__icon svg { width: 28px; height: 28px; }
.cart-empty__title { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 18px; }
.cart-empty__text { margin: 7px 0 0; font-size: 13px; color: var(--ink-faint); font-weight: 300; }
.cart-empty__btn {
  margin-top: 20px; height: 44px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--plum);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* ── طريقة الدفع: مفتاح مجزّأ ───────────────────────────── */
.pay-block { margin-bottom: 14px; }
.pay-block__label {
  font-size: 12px; font-weight: 600; color: #6C6575; margin-bottom: 8px;
}
.pay-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px; background: #F3EEF5;
}
.pay-seg__opt { position: relative; display: block; cursor: pointer; }
/* الزرّ مخفيّ بصريًا لا محذوفًا: يبقى للكيبورد ولقارئ الشاشة */
.pay-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pay-seg__opt > span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; border-radius: 999px; color: #6C6575;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.pay-seg__opt svg { width: 18px; height: 18px; flex: none; }
.pay-seg__opt img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.pay-seg__opt input:checked + span {
  background: #fff; color: var(--plum);
  box-shadow: 0 2px 8px rgba(61,37,64,.12);
}
.pay-seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(83,52,86,.22); }

/* سطر الشرح يتبع الخيار المحدَّد — بلا جافاسكربت */
.pay-note { margin-top: 9px; font-size: 11.5px; color: var(--ink-faint); font-weight: 300; line-height: 1.65; }
.pay-note [data-pay-note] { display: none; }
.pay-block:has(input[value="cod"]:checked) [data-pay-note="cod"],
.pay-block:has(input[value="sham_cash"]:checked) [data-pay-note="sham_cash"] { display: block; }

/* ══════════════════════════════════════════════════════════════
   توفّر القطعة في الفروع
   ══════════════════════════════════════════════════════════════ */
.pd-branches { margin-top: 18px; }
.pd-branches__head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #241F27; margin-bottom: 10px;
}
.pd-branches__head svg { width: 16px; height: 16px; color: var(--plum); }
.pd-branches__row { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-branch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid #E4DCE8; background: #FBF8FC;
  font-size: 12.5px; color: #4A4453;
}
.pd-branch::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #2E8B57; flex: none;
}
.pd-branches__all {
  font-size: 12.5px; color: #7A7280; font-weight: 300; line-height: 1.8;
}

/* فلتر الفرع في لوح فلاتر المنتجات */
.branch-opt { display: block; cursor: pointer; }
.branch-opt + .branch-opt { margin-top: 8px; }
.branch-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.branch-opt__box {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid #EDE7F0; background: #fff; border-radius: 9px;
  padding: 10px 11px; font-size: 12.5px; color: #4A4453;
  transition: border-color .18s, background .18s;
}
.branch-opt input:checked + .branch-opt__box {
  border-color: var(--plum); background: #FBF8FC;
  color: var(--plum); font-weight: 600;
}
.branch-opt input:focus-visible + .branch-opt__box {
  box-shadow: 0 0 0 3px rgba(83, 52, 86, .16);
}
.branch-opt__n { margin-inline-start: auto; font-size: 11.5px; color: #A9A2B0; }

/* ── رمز التحويل عبر شام كاش ────────────────────────────────
   يُكشف بـCSS لا بجافاسكربت: يعمل قبل تحميل store.js وبعد كل مبادلة
   htmx للدرج بلا إعادة ربط مستمعات. */
.pay-qr { display: none; }
/* يُكشف عند اختيار شام كاش فقط — :has على الكتلة، بلا جافاسكربت،
   فيعمل بعد كل مبادلة htmx للدرج بلا إعادة ربط مستمعات. */
.pay-block:has(input[value="sham_cash"]:checked) .pay-qr {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 10px; border-radius: 13px;
  background: #FBF8FC; border: 1px solid #EDE4F0;
}
.pay-qr img {
  width: 88px; height: 88px; flex: none; display: block;
  border-radius: 9px; background: #fff; padding: 5px;
  border: 1px solid #EFE9F2; object-fit: contain;
}
.pay-qr__side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-qr__side p {
  margin: 0; font-size: 11.5px; line-height: 1.7; color: #6C6575; font-weight: 300;
}
.pay-qr__save {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--plum); background: #fff; color: var(--plum);
  font-size: 12.5px; font-weight: 600; transition: background .18s, color .18s;
}
.pay-qr__save svg { width: 15px; height: 15px; }
.pay-qr__save:hover { background: var(--plum); color: #fff; }

/* الرمز مفتوحًا يرفع أسفل الدرج إلى ~796px على شاشة 812px، فيُدفع زرّ
   «إتمام الطلب» خارج الشاشة ولا شيء يدلّ عليه. الحلّ شقّان:
   الأسفل يُمرَّر، وشريط الإجراء يلتصق فيبقى الزرّ مرئيًا دائمًا. */
.cart-foot {
  flex: none; padding: 14px 22px 18px;
  border-top: 1px solid #EFE7EF; background: #FCFAF6;
}
.cart-sum { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cart-sum__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: #6C6575; font-variant-numeric: tabular-nums;
}
.cart-sum__row .is-free { color: #14663A; font-weight: 600; }
.cart-cta__btn {
  width: 100%; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14.5px; font-weight: 700;
}
.cart-cta__btn svg { width: 20px; height: 20px; flex: none; }
/* المبلغ داخل الزرّ: يفصله خطّ رفيع فيُقرأ رقمًا لا امتدادًا للنصّ */
.cart-cta__btn b {
  padding-inline-start: 9px; margin-inline-start: 2px;
  border-inline-start: 1px solid rgba(11,46,24,.25);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cart-cta__note {
  margin: 10px 0 0; font-size: 11px; color: var(--ink-faint);
  text-align: center; line-height: 1.7; font-weight: 300;
}

/* الشاشة القصيرة: البنود تتنازل عن الارتفاع لا الزرّ */
@media (max-height: 700px) {
  .cart-line { padding: 12px 0; }
  .cart-cta__note { display: none; }
  .pay-qr img { width: 72px; height: 72px; }
}

/* ============================================================
   قسم الجملة
   لونان يميّزانه عن المتجر: البنفسجي الداكن للهوية والذهبي للسعر.
   الأصناف هنا مشتركة بين الرئيسية (الشريط) وصفحات القسم كلّها.
   ============================================================ */
.ws-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; background: #C9A227; color: #2A1E2E;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.ws-eyebrow {
  font-size: 11.5px; letter-spacing: .28em; color: #8A7E92; font-weight: 500;
}
.ws-note {
  font-size: 12.5px; color: #6B5C72; background: #F6EFF9;
  border: 1px solid #E9DCEF; border-radius: 10px; padding: 9px 13px;
  line-height: 1.75; margin: 0;
}
.ws-hint { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-faint); font-weight: 300; line-height: 1.75; }
.ws-alert {
  background: #FCE9F0; color: #9B2F5B; border: 1px solid #F3D3E0;
  border-radius: 12px; padding: 12px 15px; font-size: 13px; line-height: 1.7;
}
.ws-ok {
  background: #F1FBF5; color: #14663A; border: 1px solid #CDEBD9;
  border-radius: 12px; padding: 12px 15px; font-size: 13px;
}

/* ── شريط الجملة أعلى الرئيسية ─────────────────────────── */
.ws-strip {
  background: linear-gradient(115deg, #3D2540 0%, #533456 62%, #6B4470 100%);
  color: #EEE4F1;
}
.ws-strip__inner {
  padding-top: 0 !important; padding-bottom: 0 !important; min-height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ws-strip__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-strip__tag {
  flex: none; display: inline-flex; align-items: center; height: 21px;
  padding: 0 9px; border-radius: 999px; background: #C9A227; color: #2A1E2E;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
.ws-strip__msg {
  font-size: 13px; font-weight: 300; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-strip__cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 0 15px; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s;
}
.ws-strip__cta svg { width: 15px; height: 15px; }
.ws-strip__cta:hover { background: #C9A227; border-color: #C9A227; color: #2A1E2E; }

/* ── صفحة التعريف ──────────────────────────────────────── */
.ws-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.ws-hero__card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px; box-shadow: 0 18px 40px rgba(83,52,86,.07);
}
.ws-hero__title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.ws-steps { margin: 0; padding: 0; list-style: none; counter-reset: ws; }
.ws-steps li {
  counter-increment: ws; position: relative; padding: 0 40px 20px 0;
  border-right: 1px dashed #E7DDEC; margin-right: 13px;
}
.ws-steps li:last-child { padding-bottom: 0; border-right-color: transparent; }
.ws-steps li::before {
  content: counter(ws); position: absolute; right: -13px; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--lilac);
  color: var(--plum); font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.ws-steps b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ws-steps span { display: block; font-size: 12.5px; line-height: 1.85; color: var(--ink-muted); font-weight: 300; margin-top: 3px; }
.ws-cta {
  display: inline-flex; align-items: center; justify-content: center; height: 52px;
  padding: 0 30px; margin-top: 26px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
}
.ws-cta--ghost { border: 1px solid var(--line-strong); background: #fff; color: var(--plum); }
.ws-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ws-perk { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; }
.ws-perk__title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ws-perk p { margin: 8px 0 0; font-size: 13px; line-height: 1.9; color: var(--ink-muted); font-weight: 300; }

/* ── حالة التوثيق ──────────────────────────────────────── */
.ws-status {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 28px; text-align: center;
}
.ws-status__icon { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.ws-wa {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; margin-top: 22px;
  padding: 0 22px; border-radius: 999px; background: #EDFAF1; color: #0B2E18;
  font-size: 13.5px; font-weight: 600;
}

/* ── النماذج ───────────────────────────────────────────── */
.ws-form label { display: block; margin-bottom: 16px; }
.ws-form__section {
  font-size: 12px; letter-spacing: .18em; color: var(--ink-faint);
  font-weight: 600; margin: 6px 0 16px;
}
.ws-field {
  width: 100%; height: 50px; border: 1px solid var(--line-strong); background: #fff;
  border-radius: 12px; padding: 0 15px; font-family: inherit; font-size: 14px;
  color: var(--ink); outline: none;
}

/* ── الكتالوج ──────────────────────────────────────────── */
.ws-chip { flex: none; cursor: pointer; }
.ws-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ws-chip span {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: #fff;
  font-size: 13px; color: #4A4453; transition: all .2s; white-space: nowrap;
}
.ws-chip input:checked + span { background: var(--plum); border-color: var(--plum); color: #fff; font-weight: 600; }
.ws-chip:hover span { border-color: #C9B4CE; }
.ws-minqty { font-size: 11.5px; color: var(--ink-faint); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* صفّ الإضافة في البطاقة: كمية + زرّ. الحقل لا ينكمش تحت 68px مهما ضاقت
   البطاقة، وإلّا اختفت الأرقام خلف أسهم المتصفّح. */
.ws-add { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.ws-add__btn {
  flex: 1; min-width: 0; height: 42px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.ws-qty {
  flex: none; width: 68px; height: 42px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 999px; padding: 0 8px; font-family: inherit;
  font-size: 14px; font-weight: 600; text-align: center; color: var(--ink);
  outline: none; font-variant-numeric: tabular-nums;
}
.ws-qty:focus { border-color: var(--plum); }

/* ── لوح الطلب في صفحة المنتج ──────────────────────────── */
.ws-order { margin-top: 24px; padding: 20px; background: #FBF8FC; border: 1px solid var(--line); border-radius: 16px; }
.ws-stepper {
  display: flex; align-items: center; margin-top: 8px; height: 52px;
  border: 1px solid var(--line-strong); background: #fff; border-radius: 999px;
  overflow: hidden; width: fit-content;
}
.ws-stepper .qty-btn {
  width: 50px; height: 100%; border: none; background: #fff; cursor: pointer;
  color: var(--plum); font-size: 21px; line-height: 1;
}
.ws-stepper input {
  width: 92px; height: 100%; border: none; outline: none; text-align: center;
  font-family: inherit; font-size: 18px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; background: #fff;
}
/* أسهم المتصفّح فوق زرَّينا = زرّان متجاوران يفعلان الشيء نفسه */
.ws-stepper input::-webkit-outer-spin-button,
.ws-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ws-total {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed #E4DACC;
}
.ws-total__label { font-size: 11.5px; color: var(--ink-faint); }
.ws-total__unit { font-size: 17px; font-weight: 600; color: #3C3644; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ws-total__sum { font-size: 22px; font-weight: 600; color: var(--plum); margin-top: 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .ws-hero { grid-template-columns: 1fr; gap: 30px; }
  .ws-perks { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* الشريط يبقى سطرًا واحدًا على الجوال: النصّ يُقصّ والزرّ لا يتزحزح،
     فلا يأكل الشريط ثلث الشاشة قبل أن تبدأ الصفحة. */
  .ws-strip__inner { min-height: 48px; gap: 10px; }
  .ws-strip__msg { font-size: 12px; }
  .ws-strip__cta { height: 30px; padding: 0 11px; font-size: 11.5px; }
  .ws-order { padding: 16px; }
  .ws-status { padding: 26px 20px; }

  /* البطاقة على الجوال عمودان من 162px: الكمية والزرّ في سطر واحد كانا
     يتركان للزرّ 56px، فيتكسّر «أضف للسلة» على حرفين. سطران أوضح. */
  .ws-add { flex-direction: column; align-items: stretch; gap: 7px; }
  .ws-qty { width: 100%; height: 38px; }
  /* flex:none لازم مع العمود: flex:1 يجعل الأساس صفرًا في المحور الرأسي
     فينكمش الزرّ إلى ارتفاع سطر النصّ ويتجاهل height. */
  .ws-add__btn { flex: none; height: 42px; }
}

/* ── أيقونتا التواصل في شريط التصنيفات (يسار الصفّ) ────── */
.catbar-social {
  flex: none; display: flex; align-items: center; gap: 4px;
  /* فاصل يفصلهما عن التصنيفات المتحرّكة، فلا تُقرآن تبويبًا انزلق */
  padding-inline-start: 8px;
  border-inline-start: 1px solid #EFE8F2;
}
.catbar-social__btn {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #6B6474; transition: background .2s, color .2s;
}
.catbar-social__btn svg { width: 17px; height: 17px; display: block; }
.catbar-social__btn:hover { background: var(--lilac-soft); color: var(--plum); }

/* على الجوال تنتقلان إلى صفّ البحث في الهيدر: هناك سطر كامل نازل أصلًا
   وفيه فراغ، بينما شريط التصنيفات يُسحب بالإصبع وصفّ الأيقونات ممتلئ. */
.headbar-social { display: none; align-items: center; gap: 4px; flex: none; }
/* display:contents على سطح المكتب: الغلاف يختفي من التخطيط فيبقى البحث
   ابنًا مباشرًا للهيدر بقواعده كما هي (flex:1; max-width:520px). */
.headbar-mid { display: contents; }
@media (max-width: 720px) {
  /* الغلاف يصير صفًّا كامل العرض: البحث والأيقونتان معًا في سطر ثانٍ،
     والشعار وأيقونات الحساب/السلة في الأوّل. */
  .headbar-mid {
    display: flex; align-items: center; gap: 8px;
    order: 3; flex: 1 0 100%;
  }
  .hs-headbar .headbar-mid .hs-search { flex: 1 1 auto; max-width: none; }
  .headbar-social { display: flex; }
}
/* --always: صفحات الجملة تعرضهما على الحالتين — لا شريط تصنيفات فيها
   يحملهما على سطح المكتب كما في المتجر. */
.headbar-social--always { display: flex; }
.headbar-social__btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid;
  place-items: center; color: #6B6474; background: #F6F1F8;
  transition: background .2s, color .2s;
}
.headbar-social__btn svg { width: 18px; height: 18px; display: block; }
.headbar-social__btn:hover { background: var(--lilac); color: var(--plum); }

/* حقل الملاحظة في درج الجملة */
.cart-note { display: block; margin-bottom: 12px; }
.cart-note > span {
  display: block; font-size: 12px; font-weight: 600; color: #6C6575; margin-bottom: 7px;
}
.cart-note textarea {
  width: 100%; border: 1px solid var(--line-strong); background: #fff;
  border-radius: 12px; padding: 9px 12px; font-family: inherit; font-size: 12.5px;
  color: var(--ink); outline: none; resize: vertical; line-height: 1.7;
}
.cart-note textarea:focus { border-color: var(--plum); }

/* خيار دفع واحد (شام كاش مُعطَّل): سطر لا مفتاح */
.pay-block--single { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-block--single .pay-block__label { margin-bottom: 0; }
.pay-single {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line-strong); color: var(--plum);
  font-size: 12.5px; font-weight: 600;
}
.pay-single svg { width: 17px; height: 17px; }

/* ══════════════════════════════════════════════════════════════
   منتقي الفرع في شريط التصنيفات
   ══════════════════════════════════════════════════════════════
   اللوح مثبَّت بالنافذة (position:fixed) لا بالشريط: شريط التصنيفات
   عليه overflow:hidden (ينطوي عند النزول) فكان يقصّ أي قائمة منسدلة
   داخله. الموضع يُحسب في store.js من موقع الزرّ.
   ══════════════════════════════════════════════════════════════ */
.branch-pick { position: relative; flex: none; }
.branch-pick__btn {
  display: flex; align-items: center; gap: 6px; max-width: 168px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: #4A4453;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s;
}
.branch-pick__btn:hover { border-color: #C9B4CE; color: var(--plum); }
.branch-pick__btn > svg { width: 15px; height: 15px; flex: none; color: var(--plum); }
.branch-pick__now { overflow: hidden; text-overflow: ellipsis; }
.branch-pick__chev { width: 13px !important; height: 13px !important; color: #9A93A2 !important; transition: transform .2s; }
.branch-pick[data-open] .branch-pick__btn { border-color: var(--plum); color: var(--plum); }
.branch-pick[data-open] .branch-pick__chev { transform: rotate(180deg); }

.branch-pick__scrim { display: none; }

.branch-pick__sheet {
  position: fixed; z-index: 72; width: 328px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(61,37,64,.18);
}
/* التمرير هنا لا على اللوح: max-height على عنصر مثبَّت بـbottom:0 يجعل
   المتصفّح يحسب موضعه من ارتفاعه غير المقيَّد فيطلع فوق الشاشة */
.branch-pick__list { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.branch-pick__head { display: none; }
.branch-pick__opt {
  display: block; padding: 11px 13px; border-radius: 12px;
  border: 1px solid transparent; transition: background .18s;
}
.branch-pick__opt + .branch-pick__opt { margin-top: 2px; }
.branch-pick__opt { background: #FBF8FC; }
.branch-pick__opt b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.branch-pick__opt > span {
  display: block; font-size: 11.5px; line-height: 1.7; color: var(--ink-muted);
  font-weight: 300; margin-top: 3px;
}
.branch-pick__acts { display: flex; gap: 8px; margin-top: 8px; }
.branch-pick__acts a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; background: #F3EEF5; color: var(--plum);
  font-size: 11.5px; font-weight: 600;
}
.branch-pick__acts a:hover { background: var(--lilac); }

@media (max-width: 720px) {
  .branch-pick__btn { max-width: 132px; height: 32px; padding: 0 10px; font-size: 12px; }
  /* لوح سفلي كامل العرض — أسهل للإبهام من قائمة معلّقة أعلى الشاشة */
  .branch-pick__sheet {
    inset: auto 0 0 0 !important; width: auto;
    border-radius: 20px 20px 0 0; border-bottom: none;
    padding: 6px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .branch-pick__list { max-height: 64vh; }
  .branch-pick__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 2px 10px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  }
  /* الطبقة تتبع body لا الزرّ: اللوح وطبقته خارج الهيدر الآن */
  body.branch-open .branch-pick__scrim {
    display: block; position: fixed; inset: 0; z-index: 71;
    background: rgba(20,16,22,.42);
  }
  body.branch-open { overflow: hidden; }
}

/* قوائم الاختيار في صفحات الحساب — بنفس مظهر الحقول لا بمظهر النظام */
.auth-select {
  width: 100%; height: 52px; border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 0 16px; background: #fff;
  font-family: inherit; font-size: 14px; color: var(--ink);
  outline: none; cursor: pointer;
  /* السهم مرسوم يسارًا (RTL) بدل سهم النظام الذي يقع يمينًا فوق النصّ */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8291' stroke-width='1.8'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  /* الصيغة الرباعية لا «left 14px center»: الثلاثية أُسقطت من المواصفة
     فيتجاهلها المتصفّح ويقع السهم في الزاوية العليا */
  background-repeat: no-repeat; background-position: left 14px top 50%;
  background-size: 18px; padding-left: 42px;
}
.auth-select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(83,52,86,.12); }