/* ============================================================
   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; }

/* أزرار الأيقونات الدائرية في الهيدر */
.icon-btn { 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 { transition: background .2s; }
.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;
  /* سحب الإصبع أفقيًا للصور، والرأسي يبقى للصفحة */
  touch-action: pan-y pinch-zoom;
  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;
  cursor: 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; }
  .pd-thumbs { display: none; }
  .pd-counter { bottom: 10px; inset-inline-start: 16px; }
  .pd-zoom-hint { bottom: 10px; inset-inline-end: 16px; }
  .pd-dots { display: flex; }
  .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; }
}
/* مؤشّر التحديث أثناء الفلترة — 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; }
  .products-layout aside { position: static !important; }
  .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);
}