/* ==========================================================
   الحسين فود — CSS المتجر (ملف واحد — يتلصق كله في «CSS مخصص» في سلة)
   الأقسام: 0) الخط   1) تنضيف   2) الفوتر   3) كارت الواتساب فوق الفوتر   4) الأقسام بعد السلايدر   5) تنسيق منتج مميز   6) البنرات الفرعية   7) آراء العملاء بالخريطة   8) بادج العرض في بطاقة المنتج   9) الأسئلة الشائعة   10) بنرات الأقسام المدمجة   11) الهيدر   12) صفحة المنتج   13) لمسات الرئيسية
   أي عنصر جديد يتضاف كقسم جديد في آخر الملف.
   ========================================================== */

/* ---------- 0) خط المتجر كله: Thmanyah Serif Display (نفس ملف أغصان الطيب بالظبط) ---------- */
@font-face {
  font-family: 'thmanyahserifdisplay';
  src: url('https://cdn.jsdelivr.net/gh/kadrimed01/thmanyah-fonts@66d7a1e7e5e42d5c145e79fb0b5cce744204d81a/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --font-main: 'thmanyahserifdisplay'; }
body,
button,
input,
select,
textarea {
  font-family: 'thmanyahserifdisplay', 'Cairo', -apple-system, system-ui, sans-serif !important;
}

/* ---------- 1) تنضيف ---------- */
footer.store-footer:not(.hf),
.index [data-testid="store-home-products-section"],
.socialScroll {
  display: none !important;
}

/* ---------- 2) الفوتر الجديد ---------- */
.hf {
  --hf-bg: #1F4D3A;          /* أخضر الهيل */
  --hf-text: #D9971E;        /* زعفران */
  --hf-line: #e5e7eb;
  --hf-font: 'thmanyahserifdisplay', 'Cairo', -apple-system, system-ui, sans-serif;

  position: relative;
  margin-top: 5rem;
  background: var(--hf-bg);
  color: var(--hf-text);
  font-family: var(--hf-font);
  font-size: 15px;
  line-height: 26px;
}
.hf *,
.hf *::before,
.hf *::after { box-sizing: border-box; }
.hf a { color: inherit; text-decoration: none; transition: opacity .15s cubic-bezier(.4,0,.2,1); }
.hf a:hover { opacity: .75; }
.hf ul { list-style: none; margin: 0; padding: 0; }

/* المنحنى أعلى الفوتر */
.hf__curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin-top: -20px;
  color: var(--hf-bg);
  pointer-events: none;
}

.hf__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 10px;
}

/* الصف الرئيسي */
.hf__inner {
  padding: 32px 0;
  border-bottom: 1px dashed var(--hf-line);
}
.hf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* عمود الروابط */
.hf__menu { text-align: center; order: 1; }
.hf__title {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: inherit;
}
.hf__menu .s-menu-footer-list { display: block !important; margin: 0; padding: 0; }
.hf__menu .s-menu-footer-item {
  display: block;
  margin: 0 !important;
  padding: 8px 0;
  font-size: 16px;
  line-height: 24px;
}

/* عمود الهوية (الشعار + الوصف + السجل التجاري) */
.hf__brand { position: relative; z-index: 1; }
.hf__logo { display: flex; justify-content: center; align-items: center; }
.hf__logo img { height: 64px; width: auto; object-fit: contain; }
.hf__desc {
  margin: 12px 0 20px;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}
.hf__badges { display: flex; justify-content: center; align-items: center; }
.hf__badges .s-trust-badges-wrapper { color: inherit; }
.hf__badges .s-trust-badges-label { margin: 0 0 4px; font-size: 14px; line-height: 20px; }
.hf__badges .s-trust-badges-number { font-size: 14px; line-height: 20px; font-weight: 700; }

/* عمود منصة الأعمال */
.hf__sbc { margin-top: 8px; }
.hf__sbc a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.hf__sbc img { width: 72px; height: auto; object-fit: contain; margin-bottom: 6px; }

/* صف التواصل */
.hf__contacts {
  padding: 16px 0;
  border-bottom: 1px dashed var(--hf-line);
}
.hf__contacts-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.hf__contacts-list a {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
}
.hf__contacts-list span { direction: ltr; unicode-bidi: isolate; }
.hf__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  opacity: .7;
  font-size: 14px;
}
.hf__contacts-list .hf__icon { margin-left: 10px; }

/* السوشيال */
.hf .hf__social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.hf__social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hf-line);
  border-radius: 9999px;
  font-size: 14px;
}

/* الشريط السفلي */
.hf__bottom-inner {
  padding: 16px 10px;
  text-align: center;
}
.hf__rights { margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.hf__bottom salla-payments .s-payments-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.hf__bottom salla-payments .s-payments-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  padding: 4px;
  background: #fff;
  border-radius: 12px;
}
.hf__bottom salla-payments .s-payments-list-item img { width: 40px; height: 24px; object-fit: contain; }

@media (min-width: 640px) {
  .hf__curve { height: 64px; margin-top: -40px; }
}
@media (min-width: 768px) {
  .hf__sbc { margin-top: 20px; }
  .hf__bottom-inner { display: flex; align-items: center; justify-content: space-between; }
  .hf__rights { margin: 0; }
}
@media (min-width: 1024px) {
  .hf__container { padding: 0 30px; }
  .hf__inner { padding: 64px 0 32px; }
  .hf__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hf__menu { order: 0; }
  .hf__brand { grid-column: 2; grid-row: 1; margin-top: -45px; }
  .hf__bottom-inner { padding: 16px 30px; }
}

/* النصوص البيضا: «روابط مهمة» + «السجل التجاري» + «موثق لدى منصة الأعمال» + سطر الحقوق */
footer.hf .hf__title,
footer.hf .hf__badges .s-trust-badges-label,
footer.hf .hf__sbc-text,
footer.hf .hf__rights { color: #fff; }

/* ---------- 3) كارت الواتساب فوق الفوتر ---------- */
footer.hf.hf--cta { margin-top: 7rem; }
footer.hf.hf--cta .hf__curve { display: none; }
footer.hf.hf--cta .hf__inner { padding-top: 48px; }
footer.hf .hf__cta {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: -56px auto 0;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #FAF5EC;
  color: #1F4D3A;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
footer.hf .hf__cta-title { margin: 0 0 4px; font-size: 22px; line-height: 30px; font-weight: 700; color: #1F4D3A; }
footer.hf .hf__cta-text { margin: 0; font-size: 15px; line-height: 24px; color: #5b5243; }
footer.hf .hf__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #1F4D3A;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
}
footer.hf .hf__cta-btn i { font-size: 20px; }
@media (min-width: 1024px) {
  footer.hf.hf--cta .hf__brand { margin-top: 0; }
}
@media (max-width: 767px) {
  footer.hf .hf__cta { flex-direction: column; text-align: center; margin: -48px 12px 0; padding: 20px; }
}


/* ---------- 4) الأقسام بعد السلايدر: الشاشة بتثبت والكروت بتطلع بالترتيب (نفس PEPHUB) ---------- */
/* على الجوال overflow-x: hidden على html وbody مع بعض بيخلّي body حاوية سكرول، فالتثبيت (sticky) ما بيشتغلش */
@media (max-width: 1023px) {
  body.index {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

.hf-cats {
  --gold: #d9971e;
  --copper: #b9742a;
  --cream: #faf5ec;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --card-w: 580px;
  --card-h: 420px;
  --gap: 20px;
  --pad: max(16px, calc(50vw - 624px));
  --hf-header: 70px; /* الهيدر الثابت وقت السكرول */
  position: relative;
  color: var(--cream);
}

.hf-cats__stage {
  overflow: hidden;
  padding-block: 72px 56px;
  background:
    radial-gradient(60% 70% at 50% 100%, rgb(217 151 30 / 0.1), transparent 70%),
    linear-gradient(180deg, #12362a, #0b241b);
}

.hf-cats *,
.hf-cats *::before,
.hf-cats *::after {
  box-sizing: border-box;
}

.hf-cats__ask {
  margin: 0 0 22px;
  padding-inline: var(--pad);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
}

.hf-cats__ask b {
  color: var(--gold);
  font-weight: inherit;
}

/* الشريط */
.hf-cats__cards {
  height: var(--card-h);
  direction: ltr;
}

.hf-cats__row {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  padding: 0;
  padding-inline: var(--pad);
  list-style: none;
  direction: rtl;
  will-change: transform;
}

.hf-cats__row > li {
  position: relative;
  flex: none;
  margin: 0;
  transform-origin: 50% 100%;
}

/* الكارت اللي عليه الدور (والهوفر): حرف دهبي وهالة في طبقة لوحدها، بتظهر بالـopacity بس */
.hf-cats__row > li::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgb(217 151 30 / 0.55),
    0 40px 80px -40px rgb(217 151 30 / 0.45);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  will-change: opacity;
}

.hf-cats__row > li.is-active::before,
.hf-cats__row > li:hover::before {
  opacity: 1;
}

.hf-cats__card,
.hf-cats__card:hover {
  color: var(--cream);
  text-decoration: none;
}

.hf-cats__card {
  --card-glow: rgb(217 151 30 / 0.22);
  position: relative;
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: 24px;
  background:
    radial-gradient(90% 80% at 85% 100%, var(--card-glow), transparent 70%),
    linear-gradient(160deg, #123026, #06130e 70%);
  isolation: isolate;
  transition: transform 0.6s var(--ease);
}

.hf-cats__card.is-copper {
  --card-glow: rgb(185 116 42 / 0.26);
}

.hf-cats__card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* لمعة بتمشي مع الماوس */
.hf-cats__card::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.hf-cats__head {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 70%;
}

.hf-cats__en {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  unicode-bidi: isolate;
}

.hf-cats__label {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.hf-cats__icon {
  position: absolute;
  z-index: 2;
  inset-block-start: 22px;
  inset-inline-end: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(217 151 30 / 0.32);
  border-radius: 50%;
  background: rgb(217 151 30 / 0.08);
  color: var(--gold);
  transition: background 0.4s, color 0.4s, transform 0.6s var(--ease);
}

.hf-cats__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-cats__row > li.is-active .hf-cats__icon {
  background: var(--gold);
  color: #0b0a09;
}

.hf-cats__foot {
  position: absolute;
  z-index: 2;
  inset-block-end: 20px;
  inset-inline-start: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hf-cats__meta {
  color: rgb(250 245 236 / 0.7);
  font-size: 13px;
  line-height: 1.45;
}

.hf-cats__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  color: var(--cream);
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}

.hf-cats__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* الصورة على أسود، وlighten بيخلّي الأسود ياخد لون الكارت. التلاشي مطبوع جوه الصورة */
.hf-cats__art {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: 74%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  pointer-events: none;
  transition: transform 0.9s var(--ease);
}

/* الهوفر: بيقف وقت حركة السكرول عشان الكارت ما يترعشش وهو معدّي تحت الماوس */
.hf-cats:not(.is-scrolling) .hf-cats__card:hover {
  transform: translateY(-6px);
}

.hf-cats:not(.is-scrolling) .hf-cats__card:hover::before {
  opacity: 1;
}

.hf-cats:not(.is-scrolling) .hf-cats__card:hover .hf-cats__icon {
  background: var(--gold);
  color: #0b0a09;
  transform: rotate(-8deg);
}

.hf-cats:not(.is-scrolling) .hf-cats__card:hover .hf-cats__go {
  border-color: var(--gold);
  background: var(--gold);
  color: #0b0a09;
}

.hf-cats:not(.is-scrolling) .hf-cats__card:hover .hf-cats__art {
  transform: scale(1.04);
}

/* العدّاد تحت الكروت */
.hf-cats__hud {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 18px;
  margin-block-start: 26px;
  padding-inline: var(--pad);
  color: rgb(250 245 236 / 0.65);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  direction: ltr;
  transition: opacity 0.5s var(--ease);
}

.hf-cats__count b {
  color: var(--gold);
  font-size: 15px;
}

.hf-cats__bar {
  flex: 1;
  max-width: 420px;
  height: 1px;
  background: rgb(250 245 236 / 0.18);
}

.hf-cats__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  will-change: transform;
}

.hf-cats__now {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * بالحركة: الشاشة بتثبت زي PEPHUB، والكروت بتطلع من تحت ورا بعض من الـJS، والجملة والعدّاد بيظهروا معاها.
 * --hf-header: طول الهيدر الثابت، عشان المحتوى يتوسّط في المساحة الظاهرة.
 */
.hf-cats.is-live .hf-cats__stage {
  position: sticky;
  touch-action: pan-y;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-block: var(--hf-header, 0px) 0;
}

/* تحت الجوال فيه شريط سفلي ثابت 64px */
@media (max-width: 767px) {
  .hf-cats.is-live .hf-cats__stage {
    padding-block-end: 64px;
  }
}

.hf-cats.is-live .hf-cats__row > li {
  transform: translate3d(0, 100vh, 0);
}

.hf-cats.is-live .hf-cats__ask {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}

.hf-cats.is-live .hf-cats__ask.is-on {
  opacity: 1;
  translate: 0 0;
}

.hf-cats.is-live .hf-cats__hud {
  opacity: 0;
}

.hf-cats.is-live .hf-cats__hud.is-on {
  opacity: 1;
}

/* مسك وسحب بالماوس */
@media (hover: hover) and (pointer: fine) {
  .hf-cats.is-live .hf-cats__cards,
  .hf-cats.is-live .hf-cats__cards a {
    cursor: grab;
  }

  .hf-cats__stage.is-dragging,
  .hf-cats__stage.is-dragging * {
    cursor: grabbing !important;
    user-select: none;
  }
}

/* من غير حركة: شريط بيتسحب بالعرض */
.hf-cats:not(.is-live) .hf-cats__cards {
  height: auto;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.hf-cats:not(.is-live) .hf-cats__row > li {
  scroll-snap-align: center;
}

/* التابلت */
@media (max-width: 1023px) {
  .hf-cats {
    --card-w: 50vw;
    --card-h: min(70vw, 520px);
  }
}

/* الموبايل */
@media (max-width: 767px) {
  .hf-cats {
    --card-w: 78vw;
    --card-h: min(112vw, 440px);
    --gap: 12px;
  }

  .hf-cats:not(.is-live) .hf-cats__stage {
    padding-block: 48px 40px;
  }

  .hf-cats__label {
    font-size: 18px;
  }

  .hf-cats__head {
    max-width: 76%;
  }

  .hf-cats__card,
  .hf-cats__row > li::before {
    border-radius: 20px;
  }

  .hf-cats__card {
    padding: 20px 16px;
  }

  .hf-cats__foot {
    inset-inline-start: 16px;
    inset-block-end: 16px;
  }

  .hf-cats__icon {
    inset-block-start: 18px;
    inset-inline-end: 16px;
    width: 40px;
    height: 40px;
  }

  .hf-cats__art {
    inset-block: 18% auto;
    inset-inline: 0;
    width: 100%;
    height: 62%;
  }

  .hf-cats__hud {
    gap: 12px;
  }

  .hf-cats__bar {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-cats__card,
  .hf-cats__art,
  .hf-cats__icon {
    transition: none;
  }
}

/* شريط الثقة فوق الأقسام: ظاهر من أول ما السكشن يدخل، فمفيش مساحة فاضية والكروت لسه طالعة */
.hf-cats__trust {
  margin: 0 var(--pad) 28px;
  padding-block-end: 22px;
  border-block-end: 1px solid rgb(250 245 236 / 0.12);
}

.hf-cats__trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-cats__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

.hf-cats__trust-item.is-copy {
  display: none;
}

.hf-cats__trust-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(217 151 30 / 0.32);
  border-radius: 50%;
  background: rgb(217 151 30 / 0.08);
  color: var(--gold);
}

.hf-cats__trust-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-cats__trust-item b {
  display: block;
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.hf-cats__trust-item small {
  display: block;
  color: rgb(250 245 236 / 0.65);
  font-size: 12.5px;
  line-height: 1.4;
}

/* الشاشات القصيرة: الكروت أولى بالمساحة */
@media (min-width: 768px) and (max-height: 660px) {
  .hf-cats.is-live .hf-cats__trust {
    display: none;
  }
}

/* التابلت والجوال: سطر واحد ماشي لوحده */
@media (max-width: 1023px) {
  .hf-cats__trust {
    margin: 0 0 18px;
    padding-block-end: 14px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .hf-cats__trust-row {
    display: flex;
    gap: 26px;
    width: max-content;
    animation: hf-cats-trust 26s linear infinite;
  }

  .hf-cats__trust-item {
    flex: none;
    gap: 8px;
  }

  .hf-cats__trust-item.is-copy {
    display: flex;
  }

  .hf-cats__trust-icon {
    width: 32px;
    height: 32px;
  }

  .hf-cats__trust-icon svg {
    width: 16px;
    height: 16px;
  }

  .hf-cats__trust-item b {
    font-size: 13px;
  }

  .hf-cats__trust-item small {
    font-size: 11px;
  }
}

/* الموبايل القصير: الكارت بيصغر عشان كله يفضل ظاهر */
@media (max-width: 767px) and (max-height: 720px) {
  .hf-cats {
    --card-h: min(92vw, 350px);
  }
}

@keyframes hf-cats-trust {
  to {
    transform: translateX(calc(50% + 13px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-cats__trust {
    overflow-x: auto;
  }

  .hf-cats__trust-row {
    animation: none;
  }
}

/* ---------- 5) تنسيق عنصر «منتج مميز» من ساجي ---------- */
.single-product-section-home {
  --sp-green: #1f4d3a;
  --sp-gold: #b87a12;
  --sp-line: rgb(31 77 58 / 0.12);
}

.single-product-section-home > .container {
  max-width: 1200px;
  margin-inline: auto;
}

.single-product-section-home .saji-main-title {
  color: var(--sp-green);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.25;
}

.single-product-section-home .saji-main-subtitle {
  max-width: 58ch;
  margin-inline: auto;
  font-size: clamp(0.94rem, 0.88rem + 0.25vw, 1.06rem);
  line-height: 1.8;
  text-align: center;
  text-wrap: balance;
}

/* الكارت */
.single-product-section-home .main-content {
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 28px;
  background: linear-gradient(150deg, #fff 45%, #fbf5e9);
  box-shadow: 0 34px 70px -44px rgb(31 77 58 / 0.55);
}

/* الصورة: بتملا طول الكارت كله */
.single-product-section-home .main-content > div:first-child {
  position: relative !important;
  top: auto !important;
  flex: none;
  width: 46% !important;
  height: auto !important;
  align-self: stretch;
  overflow: hidden;
}

.single-product-section-home :is(.saji-single-product__media, .single-product-slider, .s-slider-container, .swiper-wrapper) {
  height: 100% !important;
}

.single-product-section-home .main-content .swiper-slide {
  height: 100% !important;
  aspect-ratio: auto;
}

.single-product-section-home .lazy__bg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.single-product-section-home .main-content:hover .lazy__bg {
  transform: scale(1.04);
}

/* المحتوى */
.single-product-section-home .saji-single-product__content {
  position: relative;
  justify-content: center;
  gap: 14px;
  padding: 48px 52px;
  background: transparent !important;
}

/* زرار المشاركة في الركن */
.single-product-section-home .saji-single-product__content > .center-between {
  position: absolute;
  z-index: 2;
  inset-block-start: 22px;
  inset-inline-end: 22px;
}

.single-product-section-home .s-social-share-btn.s-button-element {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sp-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sp-green);
}

.single-product-section-home .s-social-share-btn.s-button-element svg {
  fill: currentColor;
}

/* عنوان فرعي مكرر من بيانات المنتج نفسه */
.single-product-section-home .saji-single-product__content > p.text-store-desc {
  display: none;
}

.single-product-section-home .saji-single-product__title {
  display: block;
  width: auto;
  color: var(--sp-green);
}

.single-product-section-home .saji-single-product__title::before {
  content: 'منتج مميز';
  display: block;
  width: fit-content;
  margin-block-end: 12px;
  padding: 4px 14px;
  border-radius: 99px;
  background: rgb(217 151 30 / 0.14);
  color: var(--sp-gold);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.single-product-section-home .saji-single-product__title > span {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.15rem);
  line-height: 1.3;
}

.single-product-section-home .saji-single-product__content small {
  width: fit-content;
  padding: 4px 12px 4px 10px;
  border-radius: 99px;
  background: rgb(31 77 58 / 0.07);
  color: var(--sp-green);
  font-size: 13px;
}

.single-product-section-home .product__description {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
}

.single-product-section-home #more-content {
  line-height: inherit;
}

/* السعر والشراء */
.single-product-section-home .product-form {
  margin-block-start: 6px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--sp-line);
}

.single-product-section-home .product-form > .flex {
  gap: 18px;
  margin: 0;
}

.single-product-section-home .total-price {
  color: var(--sp-gold);
  font-size: 2rem;
  line-height: 1.2;
}

.single-product-section-home .product-form .center-between:has(salla-quantity-input) {
  flex-wrap: nowrap;
  gap: 10px;
}

.single-product-section-home salla-quantity-input {
  flex: none;
}

.single-product-section-home .s-quantity-input-container {
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: #fff;
}

.single-product-section-home .s-quantity-input-button,
.single-product-section-home .s-quantity-input-input {
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--sp-green);
}

.single-product-section-home .product-form .flex.gap-2 {
  flex: 1;
  min-width: 0;
  gap: 10px;
}

.single-product-section-home .add-btn {
  flex: 1;
  min-width: 0;
}

.single-product-section-home .add-btn :is(salla-add-product-button, salla-add-product-button > div, salla-button) {
  display: block;
  width: 100% !important;
}

.single-product-section-home .add-btn button {
  width: 100%;
  height: 54px !important;
  border-radius: 14px !important;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.25s, box-shadow 0.25s;
}

.single-product-section-home .add-btn button:hover {
  box-shadow: 0 14px 26px -14px var(--sp-green);
  transform: translateY(-2px);
}

.single-product-section-home button.btn--wishlist {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
}

.single-product-section-home .s-payments-list {
  justify-content: flex-start;
  gap: 8px;
  opacity: 0.85;
}

/* التابلت */
@media (max-width: 1023px) {
  .single-product-section-home .main-content > div:first-child {
    width: 42% !important;
  }

  .single-product-section-home .saji-single-product__content {
    padding: 34px 28px;
  }
}

/* الجوال: الصورة فوق والمحتوى تحتها */
@media (max-width: 767px) {
  .single-product-section-home .main-content {
    border-radius: 22px;
  }

  .single-product-section-home .main-content > div:first-child {
    width: 100% !important;
    aspect-ratio: 1 / 0.86;
  }

  .single-product-section-home .saji-single-product__content {
    padding: 24px 20px 22px;
  }

  .single-product-section-home .saji-single-product__content > .center-between {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 16px;
  }

  .single-product-section-home .saji-main-subtitle {
    padding-inline: 8px;
  }

  .single-product-section-home .product__description {
    font-size: 14.5px;
  }

  .single-product-section-home .total-price {
    font-size: 1.75rem;
  }

  .single-product-section-home .s-quantity-input-container {
    width: 112px;
    height: 50px;
  }

  .single-product-section-home .s-quantity-input-button {
    width: 34px;
  }

  .single-product-section-home .s-quantity-input-input {
    width: 44px;
  }

  .single-product-section-home .add-btn button,
  .single-product-section-home button.btn--wishlist {
    height: 50px !important;
  }

  .single-product-section-home button.btn--wishlist {
    width: 50px !important;
  }

  .single-product-section-home .add-btn button {
    padding-inline: 8px;
    font-size: 15px;
  }

  .single-product-section-home .s-payments-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-product-section-home .lazy__bg,
  .single-product-section-home .add-btn button {
    transition: none;
  }
}

/* ---------- 6) البنرات الفرعية: بعرض الشاشة كلها بمسافات بسيطة، وكل صورة بتاخد أبعادها الأصلية على أي شاشة ---------- */
:is(.triple-banner-saji, .double-banner-saji) > .container {
  width: 100%;
  max-width: none;
  padding-inline: 8px;
}

:is(.triple-banner-saji-columns, .double-banner-saji-columns) {
  column-gap: 8px;
}

:is(.triple-banner-data, .double-banner-data) {
  margin-block-end: 0;
}

:is(.triple-banner-data, .double-banner-data) img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* الجوال: قريبة من البنر اللي فوقها */
@media (max-width: 767px) {
  section:is(.triple-banner-saji, .double-banner-saji) {
    margin-block-start: 4px;
  }

  :is(.triple-banner-saji, .double-banner-saji) > .container {
    padding-inline: 4px;
  }

  :is(.triple-banner-saji-columns, .double-banner-saji-columns) {
    column-gap: 4px;
  }
}

/* ---------- 7) آراء العملاء بخريطة السعودية (منقول من موقع سمر بألوان الحسين) ---------- */
.hfv {
  --hfv-gap: 1rem;
  overflow: clip;
  padding-block: clamp(0.5rem, 1.5vw, 1.5rem) clamp(3rem, 6vw, 5rem);
}

.hfv__shell {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

.hfv__head {
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.hfv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* الخريطة: الكانفاس أكبر من البوكس عشان الميل والظل والأشعة ما يتقصوش. */
.hfv__map {
  position: relative;
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
}

.hfv__map svg {
  width: 92%;
  height: auto;
  filter: drop-shadow(0 24px 30px rgba(20, 40, 30, 0.25));
}

.hfv__gl {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  pointer-events: none;
}

.hfv.is-live .hfv__map svg {
  visibility: hidden;
}

/* أعمدة التقييمات */
.hfv__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hfv-gap);
  height: clamp(30rem, 70vh, 38rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.hfv__col {
  display: flex;
  flex-direction: column;
  gap: var(--hfv-gap);
  min-width: 0;
}

.hfv__track {
  display: flex;
  flex-direction: column;
  gap: var(--hfv-gap);
  animation: hfv-rise 34s linear infinite;
  will-change: transform;
}

.hfv__col--down .hfv__track {
  animation-direction: reverse;
  animation-duration: 38s;
}

@keyframes hfv-rise {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% - var(--hfv-gap))); }
}

.hfv__cols:hover .hfv__track,
.hfv__cols.is-paused .hfv__track {
  animation-play-state: paused;
}

/* كارت التقييم */
.hfv-voice {
  margin: 0;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px #E8DFCF, 0 18px 40px -30px rgba(31, 77, 58, 0.45);
}

.hfv-voice__stars {
  margin-block-end: 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: #D9971E;
}

.hfv-voice__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: #1E1B16;
}

.hfv-voice__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid #EFE7D8;
}

.hfv-voice__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #1F4D3A;
  background: rgba(31, 77, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 58, 0.18);
}

.hfv-voice__avatar svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hfv-voice__by strong,
.hfv-voice__by small {
  display: block;
}

.hfv-voice__by strong {
  font-size: 0.95rem;
  color: #1E1B16;
}

.hfv-voice__by small {
  font-size: 0.8rem;
  color: #7a7064;
}

/* الجوال: الخريطة فوق، وصفّين بيتحركوا بالعرض */
@media (max-width: 48rem) {
  .hfv__grid {
    grid-template-columns: 1fr;
  }

  .hfv__map {
    width: min(100%, 24rem);
    margin-inline: auto;
  }

  .hfv__cols {
    grid-template-columns: 1fr;
    height: auto;
    margin-inline: calc(clamp(16px, 3vw, 32px) * -1);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
  }

  .hfv__col {
    flex-direction: row;
    width: max-content;
  }

  .hfv__track {
    flex-direction: row;
    animation-name: hfv-slide;
  }

  .hfv-voice {
    width: 17rem;
  }
}

/* الصف RTL: المحتوى ماشي شمال، فالزحلقة يمين بمقدار قايمة بتلف من غير قطع. */
@keyframes hfv-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + var(--hfv-gap))); }
}

@media (prefers-reduced-motion: reduce) {
  .hfv__track {
    animation: none;
  }
}

/* ---------- 8) بادج العرض في بطاقة المنتج («اشتر باكت والثاني مجانًا»): شريط أحمر لازق في ركن الكارت وماشي مع الكيرف بتاعه، من غير نبض ---------- */
custom-salla-product-card .promotion-badge {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 5px;
  padding: 6px 12px 7px 12px !important;
  border: 0 !important;
  border-radius: 0 0 0 14px !important; /* الركن اللي فوق بيتقص مع كيرف الكارت */
  background: linear-gradient(135deg, #BE3F33, #A8322D 55%, #8E2924) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #FAF5EC !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  text-align: start;
  box-shadow: 0 6px 14px -8px rgba(168, 50, 45, 0.6);
  animation: none !important;
  opacity: 1 !important;
}

custom-salla-product-card .promotion-badge::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background: #F3D9A4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2A3 3 0 0 0 12 3.8 3 3 0 0 0 6.2 7H4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h.5v8a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-8h.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1Zm-5-2a1 1 0 1 1 0 2h-2a2 2 0 0 1 2-2ZM9 5a2 2 0 0 1 2 2H9a1 1 0 1 1 0-2Zm2 15H6.5v-8H11Zm0-10H5V9h6Zm6.5 10H13v-8h4.5ZM19 11h-6V9h6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2A3 3 0 0 0 12 3.8 3 3 0 0 0 6.2 7H4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h.5v8a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-8h.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1Zm-5-2a1 1 0 1 1 0 2h-2a2 2 0 0 1 2-2ZM9 5a2 2 0 0 1 2 2H9a1 1 0 1 1 0-2Zm2 15H6.5v-8H11Zm0-10H5V9h6Zm6.5 10H13v-8h4.5ZM19 11h-6V9h6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* الكروت اللي فيها عرض بس: الصورة بتنزل شوية تحت البادج، فما يغطيهاش */
custom-salla-product-card .product-entry__image:has(.promotion-badge) .card-slide-images {
  box-sizing: border-box;
  padding-top: 34px;
}

@media (max-width: 767px) {
  custom-salla-product-card .promotion-badge {
    gap: 4px;
    padding: 5px 9px 5px 9px !important;
    border-radius: 0 0 0 11px !important;
    font-size: 10.5px !important;
  }

  custom-salla-product-card .product-entry__image:has(.promotion-badge) .card-slide-images {
    padding-top: 28px;
  }

  custom-salla-product-card .promotion-badge::before {
    width: 11px;
    height: 11px;
  }
}

/* ---------- 9) الأسئلة الشائعة: كروت مرقّمة بعلامة +، فتح ناعم، وصورة مالية مكانها وعليها كارت واتساب ---------- */
.s-block--common_questions .container > .flex {
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
  align-items: flex-start;
}

.s-block--common_questions .tab-accordion {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  counter-reset: hfq;
}

.s-block--common_questions .saji-common-questions__item {
  counter-increment: hfq;
  border: 1px solid #E8DFCF !important;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 10px 30px -24px rgba(31, 77, 58, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.s-block--common_questions .saji-common-questions__item:hover {
  border-color: rgba(31, 77, 58, 0.35) !important;
}

.s-block--common_questions .saji-common-questions__item:has(.saji-common-questions__answer.active) {
  border-color: #1F4D3A !important;
  box-shadow: 0 18px 40px -26px rgba(31, 77, 58, 0.55);
}

.s-block--common_questions .saji-common-questions__question {
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  background: transparent !important;
  font-size: 16.5px !important;
  line-height: 1.5 !important;
  color: #1E1B16 !important;
}

.s-block--common_questions .saji-common-questions__question::before {
  content: counter(hfq, decimal-leading-zero);
  flex: none;
  min-width: 26px;
  font-size: 15px;
  color: #D9971E;
}

/* علامة + بدل السهم، وبتبقى − والسؤال مفتوح */
.s-block--common_questions .saji-common-questions__question .arrow {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  margin-inline-start: auto;
  padding: 0 !important;
  border-radius: 50%;
  background: #F4EEE2 !important;
  color: #1F4D3A !important;
  font-size: 0 !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.s-block--common_questions .saji-common-questions__question .arrow::before,
.s-block--common_questions .saji-common-questions__question .arrow::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.s-block--common_questions .saji-common-questions__question .arrow::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.s-block--common_questions .saji-common-questions__item:has(.saji-common-questions__answer.active) .arrow {
  background: #1F4D3A !important;
  color: #FAF5EC !important;
}

.s-block--common_questions .saji-common-questions__item:has(.saji-common-questions__answer.active) .arrow::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* الإجابة بتتفتح بنعومة (grid من 0 لـ 1) */
.s-block--common_questions .saji-common-questions__answer {
  display: grid !important;
  grid-template-rows: 0fr;
  height: auto !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent !important;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease, padding 0.35s ease !important;
}

.s-block--common_questions .saji-common-questions__answer.active {
  grid-template-rows: 1fr;
  opacity: 1 !important;
  padding-top: 14px;
  padding-bottom: 18px;
  border-top-color: #E8DFCF !important; /* الخط اللي بين السؤال والإجابة أهدى */
}

.s-block--common_questions .saji-common-questions__desc {
  min-height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding-inline: 60px 20px;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #5d554a;
}

/* الصورة: مالية مكانها بحواف مدوّرة، ودرجة غامقة تحت عشان كارت الواتساب */
.s-block--common_questions .saji-common-questions__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px -40px rgba(20, 40, 30, 0.6);
}

.s-block--common_questions .saji-common-questions__media > .lazy {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 1.2s ease;
}

.s-block--common_questions .saji-common-questions__media:hover > .lazy {
  transform: scale(1.04);
}

.s-block--common_questions .saji-common-questions__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 36, 26, 0.88), rgba(15, 36, 26, 0.2) 45%, transparent 70%);
  pointer-events: none;
}

.hfq-cta {
  position: absolute;
  inset-inline: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: #FAF5EC;
}

.hfq-cta strong {
  font-size: 20px;
  line-height: 1.35;
}

.hfq-cta span {
  font-size: 14px;
  opacity: 0.85;
}

.hfq-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #D9971E;
  color: #1E1B16;
  font-size: 15px;
  transition: background-color 0.25s ease;
}

.hfq-cta a:hover {
  background: #E9AE3F;
}

.hfq-cta a i {
  font-size: 18px;
}

@media (min-width: 1024px) {
  .s-block--common_questions .tab-accordion {
    width: 62% !important;
  }

  .s-block--common_questions .saji-common-questions__media {
    position: sticky !important; /* بتفضل ثابتة جنب الأسئلة وهي بتنزل */
    width: 38% !important;
    top: 96px !important;
  }
}

@media (max-width: 767px) {
  .s-block--common_questions .saji-common-questions__media {
    aspect-ratio: 4 / 3.4 !important;
  }

  .s-block--common_questions .saji-common-questions__question {
    gap: 12px !important;
    padding: 15px 16px !important;
    font-size: 15px !important;
  }

  .s-block--common_questions .saji-common-questions__question::before {
    min-width: 24px;
    font-size: 14px;
  }

  .s-block--common_questions .saji-common-questions__desc {
    padding-inline: 52px 16px;
    font-size: 14px !important;
  }

  .hfq-cta strong {
    font-size: 18px;
  }
}

/* ---------- 10) بنرات الأقسام: خلفية شفافة وظهور ناعم، والصورة بحوافها زي ما هي من غير ضبابية (أول سلايدر في الصفحة مش داخل) ---------- */
section.s-block--default-home-slider ~ section.s-block--default-home-slider {
  background: transparent !important;
}

/* ظهور ناعم أول ما البنر يدخل الشاشة (بيشتغل بس لو الـJS اشتغل) */
html.hf-blend-js section.s-block--default-home-slider ~ section.s-block--default-home-slider .swiper-slide-image {
  opacity: 0;
  transform: translateY(28px) scale(1.03);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.hf-blend-js section.s-block--default-home-slider ~ section.s-block--default-home-slider.hf-in .swiper-slide-image {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.hf-blend-js section.s-block--default-home-slider ~ section.s-block--default-home-slider .swiper-slide-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 11) الهيدر: إخفاء الشريط العلوي، والمحتوى ما يتحركش لما الهيدر يصغر، والتصغير نفسه ناعم ---------- */
html body .top-navbar {
  display: none !important;
}

/* الفراغ مكان الهيدر بنفس طوله الأصلي (الطول بيتقاس في قسم 11 بـ store.js) */
html.hf-header-ready #saji-header-sticky-spacer {
  height: var(--hf-header-h) !important;
}

@keyframes hfHeaderEnter {
  from {
    transform: translate3d(0, var(--hf-enter, 0), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

html body #header.hf-sticky-enter {
  animation: hfHeaderEnter 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

@media (min-width: 1024px) {
  @keyframes hfMenuCollapse {
    from {
      max-height: var(--hf-menu-h, 80px);
      opacity: 1;
    }

    to {
      max-height: 0;
      padding-block: 0;
      opacity: 0;
      visibility: hidden;
    }
  }

  html body #header[data-saji-scroll-nav].is-saji-sticky .saji-header-menu--below {
    display: block !important;
    overflow: hidden;
    animation: hfMenuCollapse 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
}

#header[data-saji-scroll-nav] .header-components-inner.saji-header-bar {
  transition: padding 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html body #header.hf-sticky-enter,
  html body #header[data-saji-scroll-nav].is-saji-sticky .saji-header-menu--below {
    animation-duration: 0.01ms;
  }
}


/* ---------- 12) صفحة المنتج: «مسرح» أخضر للمنتج بنور وذرات زعفران، وقصة المنتج من الوصف، وحركة شراء (كل المحتوى من لوحة سلة) ---------- */
body.product-single {
  --hp-green: #1F4D3A;
  --hp-deep: #123024;
  --hp-gold: #D9971E;
  --hp-gold-2: #F0C26B;
  --hp-red: #A8322D;
  --hp-cream: #FAF5EC;
  --hp-ink: #1E1B16;
  --hp-line: rgba(250, 245, 236, 0.16);
  --hp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--hp-cream);
}

body.product-single .breadcrumbs {
  font-size: 13px;
}

/* المسرح: الجزء اللي فوق كله بقى خلفية خضرا عميقة بنور وحبيبات خفيفة */
body.product-single .hp-stage {
  position: relative;
  overflow: hidden;
  overflow: clip;
  --hp-r: clamp(28px, 4vw, 56px);
  padding: 46px 0 84px;
  background: radial-gradient(120% 95% at 70% 28%, #2c6c50 0%, #1F4D3A 42%, var(--hp-deep) 100%);
  color: var(--hp-cream);
}

/* الحواف المدوّرة تحت: ركنين كريمي ثابتين بدل قص المسرح كله بشكل مدوّر (القص المدوّر كان بيوقّع فريمات) */
body.product-single .hp-stage::before,
body.product-single .hp-stage::after {
  content: '';
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: var(--hp-r);
  height: var(--hp-r);
  pointer-events: none;
}

body.product-single .hp-stage::before {
  right: 0;
  background: radial-gradient(circle at 0 0, transparent calc(var(--hp-r) - 0.5px), var(--hp-cream) var(--hp-r));
}

body.product-single .hp-stage::after {
  left: 0;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--hp-r) - 0.5px), var(--hp-cream) var(--hp-r));
}

body.product-single .hp-amb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* حبيبات خفيفة على المسرح (ثابتة) */
body.product-single .hp-amb::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}

body.product-single .hp-amb__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 820px;
  height: 820px;
  margin: -410px 0 0 -410px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 194, 107, 0.24) 0%, rgba(240, 194, 107, 0.08) 34%, transparent 68%);
  transform: translate3d(var(--hp-gx, 68vw), var(--hp-gy, 380px), 0);
  transition: transform 1.1s var(--hp-ease);
  will-change: transform;
}

body.product-single .hp-amb__dust {
  position: absolute;
  inset: 0;
}

body.product-single .hp-stage .container.product-details {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* الفورم بقى عمود واحد بنرتبه بـ order (المحتوى نفسه من سلة) */
body.product-single .saji-pdp__layout {
  gap: 24px;
  align-items: flex-start;
}

body.product-single .saji-pdp__content {
  position: relative !important;
  top: auto !important;
  min-width: 0;
}

body.product-single form#single-product-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

body.product-single .saji-pdp__info-col,
body.product-single .saji-pdp__info {
  display: contents;
}

body.product-single form#single-product-form > *,
body.product-single .saji-pdp__info-col > *,
body.product-single .saji-pdp__info > * {
  margin-top: 0 !important;
}

body.product-single #options-panel-trigger:has(#options-menu:empty) {
  display: none;
}

/* الصورة: كارت كريمي بيميل مع الماوس وعليه لمعة */
body.product-single .saji-pdp__gallery {
  min-width: 0;
  margin-top: 0 !important;
}

body.product-single .saji-pdp__slider {
  position: relative;
  padding: 0 !important;
  border-radius: 32px;
  transition: transform 0.7s var(--hp-ease);
  will-change: transform;
}

body.product-single .saji-details-slider {
  overflow: hidden;
  border-radius: 32px;
  background: #FBF8F2;
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240, 194, 107, 0.22);
}

body.product-single .saji-pdp__slide {
  background: #FBF8F2 !important;
}

body.product-single .saji-pdp__slide img {
  object-fit: contain;
  padding: 22px;
}

body.product-single .hp-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 32px;
  pointer-events: none;
}

body.product-single .hp-glare::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.42), transparent 42%);
  opacity: 0;
  transform: translate3d(var(--hp-lx, 0), var(--hp-ly, 0), 0);
  transition: opacity 0.4s ease;
}

body.product-single .saji-pdp__slider.is-tilt .hp-glare::before {
  opacity: 1;
}

body.product-single .saji-pdp__thumb {
  border: 1px solid rgba(31, 77, 58, 0.15);
  border-radius: 14px;
  background: #fff;
  opacity: 0.65;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

body.product-single .saji-pdp__thumb img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

body.product-single .saji-pdp__thumb.swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--hp-gold);
}

body.product-single .hp-gallery-badge,
body.product-single .hp-gallery-count {
  position: absolute;
  z-index: 4;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
}

body.product-single .hp-gallery-badge {
  top: 18px;
  right: 18px;
  background: var(--hp-red);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(168, 50, 45, 0.8);
}

body.product-single .hp-gallery-badge[hidden] {
  display: none;
}

body.product-single .hp-gallery-count {
  top: 18px;
  left: 18px;
  background: rgba(30, 27, 22, 0.78);
  color: #fff;
}

/* المفضلة والمشاركة: دواير صغيرة فوق شمال */
body.product-single .saji-pdp__meta {
  order: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 2;
  display: flex;
  width: auto !important;
  margin: 0;
}

body.product-single .saji-pdp__meta > div,
body.product-single .saji-pdp__actions {
  width: auto !important;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
}

body.product-single .saji-pdp__delivery:empty,
body.product-single .saji-pdp__meta .saji-wishlist-link-btn strong {
  display: none;
}

body.product-single .saji-pdp__meta button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hp-line) !important;
  border-radius: 50% !important;
  background: rgba(250, 245, 236, 0.06) !important;
  color: var(--hp-cream) !important;
  transition: background-color 0.25s ease;
}

body.product-single .saji-pdp__meta button:hover {
  background: rgba(250, 245, 236, 0.14) !important;
}

body.product-single .saji-pdp__meta svg {
  fill: currentColor;
}

/* العنوان والقسم */
body.product-single .saji-pdp__header {
  order: 1;
  position: relative;
  margin-bottom: 18px;
}

body.product-single .product-category {
  width: fit-content;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(240, 194, 107, 0.35);
  border-radius: 999px;
  background: rgba(240, 194, 107, 0.08);
  font-size: 13px;
}

body.product-single .product-category span {
  display: none;
}

body.product-single .product-category a {
  color: var(--hp-gold-2) !important;
  text-decoration: none;
}

body.product-single h1.product-title {
  margin: 0;
  color: var(--hp-cream) !important;
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 700;
  line-height: 1.22;
}

/* العنوان بيطلع كلمة كلمة */
body.product-single .hp-w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0 0.2em;
  margin: -0.14em 0 -0.2em;
  vertical-align: top;
}

body.product-single .hp-w > span {
  display: inline-block;
}

body.product-single .hp-stage.hp-anim .hp-w > span {
  transform: translateY(115%);
  transition: transform 1s var(--hp-ease) calc(0.25s + var(--i) * 0.08s);
}

body.product-single .hp-stage.hp-anim.hp-ready .hp-w > span {
  transform: none;
}

/* السعر */
body.product-single .saji-pdp__price-display {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 20px;
  white-space: normal;
}

body.product-single .saji-pdp__price-display .total-price {
  color: var(--hp-gold-2) !important;
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.1;
}

body.product-single .saji-pdp__price-display .before-price {
  color: rgba(250, 245, 236, 0.5) !important;
  font-size: 18px;
}

body.product-single .saji-pdp__save {
  border: 0 !important;
  border-radius: 999px;
  background: rgba(250, 245, 236, 0.1) !important;
}

body.product-single .saji-pdp__save > div {
  display: none;
}

body.product-single .saji-pdp__save span {
  padding: 5px 11px;
  color: var(--hp-cream) !important;
  animation: none !important;
}

body.product-single .saji-pdp__stock {
  order: 2;
  margin: 0;
}

body.product-single .saji-pdp__stock small,
body.product-single .price_is_on_sale > small {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--hp-red) !important;
  color: #fff !important;
  font-weight: 700;
  opacity: 1 !important;
  animation: none !important;
}

body.product-single .installment-wrap:has(salla-installment *) {
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--hp-cream);
}

/* أهم المميزات (من وصف المنتج نفسه) */
body.product-single .hp-hls {
  order: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

body.product-single .hp-hl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(240, 194, 107, 0.22);
  border-radius: 16px;
  background: rgba(250, 245, 236, 0.05);
  color: var(--hp-cream);
  font-size: 14px;
  line-height: 1.5;
}

body.product-single .hp-hl::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hp-gold-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

body.product-single .saji-pdp__options {
  order: 4;
  margin: 0 0 8px !important;
}

/* صندوق الشراء */
body.product-single .saji-pdp__buybox-col {
  order: 5;
  width: 100%;
  position: static;
  margin: 0 !important;
}

body.product-single .saji-pdp__buybox {
  padding: 18px;
  border: 1px solid rgba(240, 194, 107, 0.24) !important;
  border-radius: 26px;
  background: rgba(8, 26, 19, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.product-single .saji-pdp__form-price {
  margin: 0;
  background: transparent !important;
}

body.product-single .saji-pdp__buybox-price {
  display: none;
}

body.product-single .saji-qty-theme {
  border: 1px solid rgba(250, 245, 236, 0.28);
  border-radius: 999px;
  background: transparent;
}

body.product-single .saji-qty-theme .s-quantity-input-container {
  height: 58px;
}

body.product-single .saji-qty-theme .s-quantity-input-container {
  display: flex;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}

body.product-single .saji-qty-theme .s-quantity-input-button {
  flex: 0 0 44px;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hp-cream) !important;
  transition: background-color 0.2s ease;
}

body.product-single .saji-qty-theme .s-quantity-input-button:hover {
  background: rgba(250, 245, 236, 0.1) !important;
}

body.product-single .saji-qty-theme .s-quantity-input-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-inline: 1px solid rgba(250, 245, 236, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hp-cream) !important;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

body.product-single .saji-qty-theme svg {
  fill: currentColor;
}

body.product-single .saji-add-btn-theme,
body.product-single .saji-add-btn-theme .s-add-product-button-main {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: 100% !important;
  max-width: none !important;
}

body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button {
  display: block;
  width: 100% !important;
}

/* زرار السلة: دهبي وعليه لمعة بتعدّي كل شوية */
body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #F5CC74 0%, #E2A53A 55%, #D9971E 100%) !important;
  opacity: 1 !important;
  color: var(--hp-ink) !important;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 20px 40px -20px rgba(217, 151, 30, 0.75);
  transition: transform 0.3s var(--hp-ease), box-shadow 0.3s ease;
}

body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button .s-button-text,
body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button i {
  color: var(--hp-ink) !important;
}

body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button svg {
  fill: currentColor;
}

body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: hp-shine 4.2s ease-in-out 2s infinite;
}

body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 50px -18px rgba(217, 151, 30, 0.9);
}

@keyframes hp-shine {
  0%,
  72% {
    transform: translateX(0) skewX(-20deg);
  }

  100% {
    transform: translateX(430%) skewX(-20deg);
  }
}

body.product-single salla-mini-checkout-widget {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: 1.5px solid rgba(250, 245, 236, 0.4) !important;
  border-radius: 16px !important;
  background: transparent !important;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.product-single salla-mini-checkout-widget:hover {
  border-color: var(--hp-gold-2) !important;
  background: rgba(250, 245, 236, 0.07) !important;
}

body.product-single .s-add-product-button-mini-checkout-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hp-cream) !important;
  font-weight: 700;
}

body.product-single .s-add-product-button-mini-checkout-content svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body.product-single salla-quick-buy,
body.product-single salla-quick-buy apple-pay-button {
  display: block;
  width: 100% !important;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 52px;
  --apple-pay-button-border-radius: 16px;
}

body.product-single .hp-buy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  color: rgba(250, 245, 236, 0.66);
  font-size: 12px;
}

body.product-single .hp-buy-note::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fd39b;
  box-shadow: 0 0 0 4px rgba(111, 211, 155, 0.18);
  animation: hp-pulse 2s ease-in-out infinite;
}

@keyframes hp-pulse {
  50% {
    transform: scale(1.3);
    opacity: 0.75;
  }
}

body.product-single .out-of-stock {
  color: #ffb4ad !important;
  opacity: 1 !important;
}

/* مربعات الثقة */
body.product-single .hp-trust {
  order: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

body.product-single .hp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 12px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  background: rgba(250, 245, 236, 0.04);
  color: var(--hp-cream) !important;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s var(--hp-ease);
}

body.product-single a.hp-trust-item:hover {
  background: rgba(250, 245, 236, 0.1);
  transform: translateY(-3px);
}

body.product-single .hp-trust-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(240, 194, 107, 0.14);
}

body.product-single .hp-trust-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--hp-gold-2);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.product-single .hp-trust-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

body.product-single .hp-trust-item small {
  display: block;
  margin-top: 2px;
  color: rgba(250, 245, 236, 0.62);
  font-size: 11px;
  line-height: 1.45;
}

body.product-single .product-sku {
  order: 8;
  margin-top: 16px !important;
  color: rgba(250, 245, 236, 0.5) !important;
  font-size: 12px;
}

body.product-single .product-sku .text-primary,
body.product-single .product-sku .text-store-desc {
  color: inherit !important;
}

body.product-single .saji-pdp__payments {
  order: 9;
  padding: 8px 0 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  opacity: 0.85;
}

body.product-single .s-payments-list {
  justify-content: flex-start;
  gap: 8px;
}

/* الوصف بيتنقل لقسم «قصة المنتج» تحت */
body.product-single.hp-has-story .saji-pdp__desc,
body.product-single.hp-has-story #btn-show-more {
  display: none !important;
}

/* الشريط الدهبي المتحرك على حافة المسرح */
body.product-single .hp-marquee {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 32px));
  margin: -28px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hp-gold);
  color: var(--hp-ink);
  box-shadow: 0 24px 44px -26px rgba(31, 77, 58, 0.6);
}

body.product-single .hp-marquee__track {
  display: flex;
  width: max-content;
  animation: hp-marquee 36s linear infinite;
}

body.product-single .hp-marquee.is-paused .hp-marquee__track,
body.product-single .hp-marquee:hover .hp-marquee__track {
  animation-play-state: paused;
}

body.product-single .hp-marquee__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 15px 0 15px 26px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

body.product-single .hp-marquee__item::after {
  content: '✦';
  color: var(--hp-green);
  font-size: 12px;
}

@keyframes hp-marquee {
  to {
    transform: translateX(50%);
  }
}

/* قصة المنتج: الصورة ثابتة والأقسام بتنوّر واحدة واحدة */
body.product-single .hp-story {
  padding: clamp(64px, 8vw, 120px) 0 clamp(32px, 5vw, 72px);
}

body.product-single .hp-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 88px);
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

body.product-single .hp-story__head {
  grid-column: 1 / -1;
}

body.product-single .hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hp-gold);
  font-size: 14px;
  font-weight: 700;
}

body.product-single .hp-eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: currentColor;
}

body.product-single .hp-story__title {
  margin: 12px 0 0;
  color: var(--hp-green);
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.2;
}

body.product-single .hp-story__media {
  position: sticky;
  top: 110px;
  align-self: start;
}

body.product-single .hp-story__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 44px 90px -56px rgba(31, 77, 58, 0.6), 0 0 0 1px rgba(31, 77, 58, 0.06);
}

body.product-single .hp-story__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s ease, transform 1.4s var(--hp-ease);
}

body.product-single .hp-story__frame img.is-on {
  opacity: 1;
  transform: scale(var(--hp-zoom, 1));
}

body.product-single .hp-story__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

body.product-single .hp-story__num {
  color: transparent;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(31, 77, 58, 0.45);
  direction: ltr;
}

body.product-single .hp-story__bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(31, 77, 58, 0.12);
}

body.product-single .hp-story__bar i {
  display: block;
  height: 100%;
  background: var(--hp-gold);
  transform: scaleX(var(--hp-p, 0));
  transform-origin: right;
  transition: transform 0.7s var(--hp-ease);
}

body.product-single .hp-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52vh;
  padding: 26px 0;
  border-bottom: 1px solid rgba(31, 77, 58, 0.1);
  opacity: 0.26;
  transition: opacity 0.6s ease;
}

body.product-single .hp-step:last-child {
  border-bottom: 0;
}

body.product-single .hp-step.is-active {
  opacity: 1;
}

body.product-single .hp-step__num {
  color: var(--hp-gold);
  font-size: 15px;
  font-weight: 700;
  direction: ltr;
  text-align: right;
}

body.product-single .hp-step h3 {
  margin: 6px 0 16px;
  color: var(--hp-green);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3;
}

body.product-single .hp-step__body {
  color: #4a443b;
  font-size: 17px;
  line-height: 2;
}

body.product-single .hp-step__body p {
  margin: 0 0 10px;
}

body.product-single .hp-step__body ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.product-single .hp-step__body li {
  position: relative;
  padding-inline-start: 32px;
}

body.product-single .hp-step__body li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hp-gold-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

body.product-single .hp-step__body strong {
  color: var(--hp-green);
}

/* ظهور ناعم وانت بتنزل */
body.product-single [data-hp-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 1s var(--hp-ease);
}

body.product-single [data-hp-reveal].hp-in {
  opacity: 1;
  transform: none;
}

/* شريط الشراء الثابت على اللابتوب */
body.product-single .hp-bar {
  position: fixed;
  right: 50%;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(980px, calc(100% - 32px));
  padding: 12px 14px 12px 12px;
  border: 1px solid rgba(240, 194, 107, 0.3);
  border-radius: 22px;
  background: var(--hp-deep);
  color: var(--hp-cream);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 130%);
  transition: transform 0.6s var(--hp-ease), opacity 0.4s ease;
}

body.product-single .hp-bar.hp-bar-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(50%, 0);
}

body.product-single .hp-bar img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #FBF8F2;
  object-fit: contain;
}

body.product-single .hp-bar-copy {
  flex: 1;
  min-width: 0;
}

body.product-single .hp-bar-title {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.product-single .hp-bar-price {
  margin-top: 2px;
  color: var(--hp-gold-2);
  font-size: 16px;
  font-weight: 700;
}

body.product-single .hp-bar button {
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #F5CC74, #D9971E);
  color: var(--hp-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s var(--hp-ease);
}

body.product-single .hp-bar button:hover {
  transform: translateY(-2px);
}

/* الصورة اللي بتطير للسلة */
.hp-ghost {
  position: fixed;
  z-index: 10000;
  border-radius: 22px;
  background: #FBF8F2;
  object-fit: contain;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* دخول المسرح أول ما الصفحة تفتح */
body.product-single .hp-stage.hp-anim .saji-pdp__gallery,
body.product-single .hp-stage.hp-anim .product-category,
body.product-single .hp-stage.hp-anim .saji-pdp__price-display,
body.product-single .hp-stage.hp-anim .hp-hls,
body.product-single .hp-stage.hp-anim .hp-trust,
body.product-single .hp-stage.hp-anim .saji-pdp__meta {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease var(--hp-d, 0s), transform 1s var(--hp-ease) var(--hp-d, 0s);
}

body.product-single .hp-stage.hp-anim .saji-pdp__gallery {
  transform: translateY(34px) scale(0.965);
}

body.product-single .hp-stage.hp-anim .product-category { --hp-d: 0.15s; }
body.product-single .hp-stage.hp-anim .saji-pdp__price-display { --hp-d: 0.55s; }
body.product-single .hp-stage.hp-anim .hp-hls { --hp-d: 0.7s; }
body.product-single .hp-stage.hp-anim .hp-trust { --hp-d: 0.95s; }
body.product-single .hp-stage.hp-anim .saji-pdp__meta { --hp-d: 0.4s; }

body.product-single .hp-stage.hp-anim.hp-ready .saji-pdp__gallery,
body.product-single .hp-stage.hp-anim.hp-ready .product-category,
body.product-single .hp-stage.hp-anim.hp-ready .saji-pdp__price-display,
body.product-single .hp-stage.hp-anim.hp-ready .hp-hls,
body.product-single .hp-stage.hp-anim.hp-ready .hp-trust,
body.product-single .hp-stage.hp-anim.hp-ready .saji-pdp__meta {
  opacity: 1;
  transform: none;
}

@media (min-width: 1024px) {
  body.product-single .saji-pdp__layout {
    display: flex;
    flex-direction: row;
    gap: 64px;
    max-width: 1320px;
    margin-inline: auto;
  }

  body.product-single .saji-pdp__gallery {
    position: sticky;
    top: 110px;
    order: 1;
    flex: 0 0 52%;
    width: 52%;
  }

  body.product-single .saji-pdp__content {
    order: 2;
    flex: 1 1 48%;
    width: 48%;
    padding-top: 6px;
  }

  body.product-single form#single-product-form {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  body.product-single #sticky-bar,
  body.product-single #sticky-bar.sticky-bar-vite {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* الكمية والزرار في سطر، وتحتهم «اشترِ الآن» وApple Pay نص ونص */
  body.product-single .saji-pdp__buybox {
    display: grid;
    grid-template-columns: 150px calc(50% - 160px) minmax(0, 1fr);
    gap: 10px;
  }

  body.product-single .saji-pdp__buybox-actions,
  body.product-single .saji-add-btn-theme,
  body.product-single .saji-add-btn-theme .s-add-product-button-main {
    display: contents !important;
  }

  body.product-single .saji-pdp__form-price {
    grid-column: 1;
    grid-row: 1;
  }

  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  body.product-single salla-mini-checkout-widget {
    grid-column: 1 / 3;
    grid-row: 2;
    width: auto !important;
  }

  body.product-single salla-quick-buy {
    grid-column: 3 / 4;
    grid-row: 2;
  }

  body.product-single .hp-buy-note {
    grid-column: 1 / 4;
  }
}

@media (max-width: 1023px) {
  body.product-single {
    padding-bottom: 170px;
  }

  body.product-single .hp-stage {
    padding: 16px 0 64px;
  }

  body.product-single .hp-stage .container.product-details {
    padding-inline: 10px;
  }

  body.product-single .saji-pdp__gallery {
    margin: 0 !important;
  }

  /* شريط الشراء الثابت لازم يبقى فوق كل السكاشن اللي بعده، فالحاويات اللي حواليه ما تعملش طبقة لوحدها */
  body.product-single .hp-stage .container.product-details,
  body.product-single .saji-pdp__content {
    z-index: auto !important;
  }

  body.product-single .saji-pdp__slider,
  body.product-single .saji-details-slider,
  body.product-single .hp-glare {
    border-radius: 26px;
  }

  body.product-single .saji-pdp__content {
    margin-top: 22px;
    padding-inline: 4px;
  }

  body.product-single .saji-pdp__header {
    padding-inline-end: 0;
    padding-top: 56px;
  }

  body.product-single h1.product-title {
    font-size: 32px;
  }

  body.product-single .hp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.product-single .hp-trust-item {
    flex-direction: row;
    align-items: center;
    padding: 11px;
  }

  body.product-single .hp-hl {
    font-size: 13px;
  }

  /* شريط الشراء الثابت بتاع الثيم: أخضر غامق بزرار دهبي */
  body.product-single .saji-pdp__buybox {
    position: fixed;
    right: 0;
    bottom: 64px;
    left: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border: 0 !important;
    border-top: 1px solid rgba(240, 194, 107, 0.3) !important;
    border-radius: 22px 22px 0 0;
    background: var(--hp-deep) !important;
    box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, 0.5);
  }

  body.product-single .saji-pdp__form-price > .center-between {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.product-single .saji-pdp__buybox-price {
    display: flex;
    order: -1;
    justify-content: flex-start;
  }

  body.product-single .saji-pdp__buybox-price .total-price {
    color: var(--hp-gold-2) !important;
    font-size: 21px;
  }

  body.product-single .saji-pdp__buybox-price .before-price {
    color: rgba(250, 245, 236, 0.5) !important;
    font-size: 13px;
  }

  body.product-single .saji-qty-theme .s-quantity-input-container {
    height: 38px;
  }

  body.product-single .saji-pdp__buybox-actions,
  body.product-single .saji-add-btn-theme,
  body.product-single .saji-add-btn-theme .s-add-product-button-main {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
  }

  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button {
    flex: 1.6;
    width: auto !important;
  }

  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button {
    min-height: 50px;
    font-size: 15px;
  }

  /* سلة بتسيب أيقونة السلة بس في الشريط ده، فبنرجّع الكلمة */
  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button .s-button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button .s-button-text svg {
    width: 20px;
    height: 20px;
  }

  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button .s-button-text:not(:has(i))::after {
    content: 'أضف للسلة';
    font-weight: 700;
  }

  body.product-single salla-mini-checkout-widget {
    flex: 1;
    width: auto !important;
    min-height: 50px;
    font-size: 13px;
  }

  body.product-single salla-quick-buy,
  body.product-single .saji-pdp__buybox .hp-buy-note,
  body.product-single .hp-bar {
    display: none !important;
  }

  body.product-single .hp-marquee {
    width: calc(100% - 20px);
    margin-top: -24px;
  }

  body.product-single .hp-marquee__item {
    padding: 12px 0 12px 20px;
    gap: 20px;
    font-size: 13px;
  }

  body.product-single .hp-story__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.product-single .hp-story__media {
    display: none;
  }

  body.product-single .hp-step {
    min-height: 0;
    margin-bottom: 12px;
    padding: 22px 20px;
    border: 1px solid rgba(31, 77, 58, 0.1);
    border-radius: 24px;
    background: #fff;
    opacity: 1;
  }

  body.product-single .hp-step__body {
    font-size: 15px;
    line-height: 1.95;
  }

  body.product-single .hp-gallery-badge {
    top: 12px;
    right: 12px;
  }

  body.product-single .hp-gallery-count {
    top: 12px;
    left: 12px;
  }
}

/* التابلت: الصورة تقريباً نص الصفحة بدل تلتها */
@media (min-width: 768px) and (max-width: 1023px) {
  body.product-single .saji-pdp__layout {
    flex-direction: row;
    gap: 28px;
  }

  body.product-single .saji-pdp__gallery {
    flex: 0 0 46%;
    width: 46% !important;
  }

  body.product-single .saji-pdp__content {
    flex: 1 1 auto;
    width: auto !important;
    margin-top: 0;
  }

  body.product-single .hp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.product-single .hp-stage.hp-anim .hp-w > span,
  body.product-single [data-hp-reveal],
  body.product-single .hp-stage.hp-anim .saji-pdp__gallery,
  body.product-single .hp-stage.hp-anim .product-category,
  body.product-single .hp-stage.hp-anim .saji-pdp__price-display,
  body.product-single .hp-stage.hp-anim .hp-hls,
  body.product-single .hp-stage.hp-anim .hp-trust,
  body.product-single .hp-stage.hp-anim .saji-pdp__meta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.product-single .hp-marquee__track,
  body.product-single .saji-add-btn-theme .s-add-product-button-main > salla-button button::after,
  body.product-single .hp-buy-note::before {
    animation: none;
  }
}

/* ---------- 13) الرئيسية: سكشن المنتج المميز «مسرح» أخضر بنور وذرات زعفران، وشريط دهبي متحرك، وطيران الصورة للسلة (نفس روح صفحة المنتج) ---------- */
body.index .hp-home-stage {
  --hp-r: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  overflow: clip;
  margin-block: 0 !important;
  padding-block: clamp(56px, 7vw, 96px) clamp(80px, 9vw, 120px);
  background: radial-gradient(120% 95% at 30% 30%, #2c6c50 0%, #1F4D3A 42%, #123024 100%);
}

/* الحواف المدوّرة: أركان كريمي ثابتة (قص المسرح كله مدوّر بيوقّع فريمات) */
body.index .hp-home-stage .hp-corner {
  position: absolute;
  z-index: 1;
  width: var(--hp-r);
  height: var(--hp-r);
  pointer-events: none;
}

body.index .hp-home-stage .hp-corner--tr { top: 0; right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--hp-r) - 0.5px), #FAF5EC var(--hp-r)); }
body.index .hp-home-stage .hp-corner--tl { top: 0; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--hp-r) - 0.5px), #FAF5EC var(--hp-r)); }
body.index .hp-home-stage .hp-corner--br { bottom: 0; right: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--hp-r) - 0.5px), #FAF5EC var(--hp-r)); }
body.index .hp-home-stage .hp-corner--bl { bottom: 0; left: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--hp-r) - 0.5px), #FAF5EC var(--hp-r)); }

body.index .hp-home-stage .hp-amb {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.index .hp-home-stage .hp-amb::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}

body.index .hp-home-stage .hp-amb__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 820px;
  height: 820px;
  margin: -410px 0 0 -410px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 194, 107, 0.22) 0%, rgba(240, 194, 107, 0.07) 34%, transparent 68%);
  transform: translate3d(var(--hp-gx, 30vw), var(--hp-gy, 300px), 0);
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

body.index .hp-home-stage .hp-amb__dust {
  position: absolute;
  inset: 0;
}

body.index .hp-home-stage > .container {
  position: relative;
  z-index: 2;
}

/* العنوان على الأخضر */
body.index .hp-home-stage .saji-main-title {
  color: #FAF5EC !important;
}

body.index .hp-home-stage .saji-main-subtitle {
  color: rgba(250, 245, 236, 0.72) !important;
}

body.index .hp-home-stage .saji-title-ornament {
  filter: brightness(0) invert(78%) sepia(42%) saturate(640%) hue-rotate(353deg);
}

body.index .hp-home-stage .main-content {
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240, 194, 107, 0.22) !important;
}

/* زرار السلة دهبي بلمعة بتعدّي كل شوية */
body.index .hp-home-stage .add-btn button {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background: linear-gradient(135deg, #F5CC74 0%, #E2A53A 55%, #D9971E 100%) !important;
  color: #1E1B16 !important;
  box-shadow: 0 20px 40px -20px rgba(217, 151, 30, 0.75);
}

body.index .hp-home-stage .add-btn button * {
  color: #1E1B16 !important;
}

body.index .hp-home-stage .add-btn button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: hp-shine 4.2s ease-in-out 2s infinite;
}

@keyframes hp-shine {
  0%,
  72% { transform: translateX(0) skewX(-20deg); }
  100% { transform: translateX(430%) skewX(-20deg); }
}

/* الشريط الدهبي المتحرك على حافة المسرح */
body.index .hp-marquee {
  position: relative;
  z-index: 3;
  width: min(1320px, calc(100% - 32px));
  margin: -28px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: #D9971E;
  color: #1E1B16;
  box-shadow: 0 24px 44px -26px rgba(31, 77, 58, 0.6);
}

body.index .hp-marquee__track {
  display: flex;
  width: max-content;
  animation: hp-marquee 36s linear infinite;
}

body.index .hp-marquee.is-paused .hp-marquee__track,
body.index .hp-marquee:hover .hp-marquee__track {
  animation-play-state: paused;
}

body.index .hp-marquee__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 15px 0 15px 26px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

body.index .hp-marquee__item::after {
  content: '✦';
  color: #1F4D3A;
  font-size: 12px;
}

@keyframes hp-marquee {
  to { transform: translateX(50%); }
}

/* الصورة اللي بتطير للسلة (من كروت المنتجات) */
.hp-ghost {
  position: fixed;
  z-index: 10000;
  border-radius: 22px;
  background: #FBF8F2;
  object-fit: contain;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@media (max-width: 767px) {
  body.index .hp-marquee {
    width: calc(100% - 20px);
    margin-top: -24px;
  }

  body.index .hp-marquee__item {
    gap: 20px;
    padding: 12px 0 12px 20px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.index .hp-marquee__track,
  body.index .hp-home-stage .add-btn button::after {
    animation: none;
  }
}