/* ============================================================
   home-redesign.css — أقسام الصفحة الرئيسية الجديدة (data-driven)
   حباش حمدي — Mobile First / RTL
   يعتمد على style.css + home.css للـ classes المشتركة
   (.section, .container, .product-card, .btn-hero, .section--warm/brown)
   ويضيف فقط مكوّنات الأقسام الجديدة (بادئة hh-).
   ============================================================ */

.page-home {
  --hh-cream:   #FAF4E9;
  --hh-cream-2: #F3E9D6;
  --hh-brown:   #3B2417;
  --hh-brown-2: #5A3A22;
  --hh-gold:    #C9A24B;
  --hh-orange:  #D98324;
  --hh-ink:     #2B2018;
  --hh-muted:   #7A6A58;
  --hh-radius:  20px;
  --hh-shadow:  0 10px 30px rgba(59,36,23,.10);
}

/* منع أي Scroll أفقي على مستوى الصفحة */
.page-home { overflow-x: hidden; }
.page-home .section { overflow: hidden; }

/* ============================================================
   موشن خلفية خفيف — الصفحة الرئيسية فقط (.page-home على body)
   دوائر ضوء ذهبية/بنية شفافة جدًا تنجرف ببطء شديد فوق الكريمي.
   طبقة fixed واحدة + transform فقط (compositor-only — بلا repaint
   أثناء السكروول)، خلف كل المحتوى (z-index:-1) فلا تغطي نصًا ولا
   كارتًا ولا الهيرو، وpointer-events:none فلا تلمس أي تفاعل.
   ============================================================ */
.page-home::before {
  content: '';
  position: fixed;
  inset: -15%;                 /* أكبر من الشاشة حتى لا تظهر حواف أثناء الحركة */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 42rem at 18% 25%, rgba(201, 162, 75, .13), transparent 62%),
    radial-gradient(48rem 48rem at 85% 55%, rgba(217, 131, 36, .09), transparent 62%),
    radial-gradient(36rem 36rem at 55% 95%, rgba(90, 58, 34, .07),  transparent 62%);
  animation: hhAmbientDrift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hhAmbientDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
/* موبايل: نفس الطبقة لكن أبطأ وأخف — حمل أقل وإحساس أهدأ */
@media (max-width: 700px) {
  .page-home::before { animation-duration: 52s; opacity: .75; }
}
/* احترام تفضيل تقليل الحركة: خلفية ثابتة تمامًا */
@media (prefers-reduced-motion: reduce) {
  .page-home::before { animation: none; transform: none; }
}

/* ---------- Reveal (progressive) ---------- */
.hh-reveal { opacity: 1; }
body.hh-js .hh-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
body.hh-js .hh-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.hh-js .hh-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- أزرار الهيرو ---------- */
.btn-hero {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--hh-orange); color: #fff;
  padding: .8rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; border: 2px solid transparent;
  box-shadow: 0 8px 20px rgba(217,131,36,.28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217,131,36,.36); }
.btn-hero--ghost {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.55); box-shadow: none; backdrop-filter: blur(3px);
}
.btn-hero--ghost:hover { background: rgba(255,255,255,.20); }
.btn-hero--wa { background: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,.30); }

/* ============================================================
   1) HERO
   ============================================================ */
.hh-hero { position: relative; }
.hh-hero__slider { position: relative; }
.hh-hero__slide {
  position: relative;
  display: none;
  /* موبايل: هيرو أطول عشان الفيديو الغني بالتفاصيل يظهر بمساحة رأسية أكبر */
  min-height: clamp(560px, 82vh, 720px);
}
.hh-hero__slide.is-active { display: block; }
.hh-hero__media,
.hh-hero__media img,
.hh-hero__media video,
.hh-hero__slide > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* موبايل: توسيط كامل — الفيديو العريض يملأ الارتفاع ويُقص من الأطراف بالتساوي */
  object-position: center center;
  z-index: 0;
}
.hh-hero__slide--fallback,
.hh-hero__slide:has(.hh-hero__content):not(:has(.hh-hero__media)):not(:has(video)) {
  background: linear-gradient(135deg, var(--hh-brown) 0%, var(--hh-brown-2) 60%, var(--hh-orange) 140%);
}
.hh-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* تعتيم متدرّج أخفّ قليلًا: النص الأبيض واضح (مع text-shadow) وتفاصيل
     الفيديو لا تختفي — مش غامق زيادة */
  background: linear-gradient(180deg, rgba(38,22,13,.22) 0%, rgba(38,22,13,.46) 62%, rgba(38,22,13,.70) 100%);
}
.hh-hero__content {
  position: relative; z-index: 2;
  min-height: inherit;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 2.5rem; padding-bottom: 2.5rem; color: #fff;
}
.hh-hero__title {
  font-size: clamp(1.6rem, 6vw, 2.9rem); font-weight: 800; line-height: 1.25;
  margin: 0 0 .6rem; text-shadow: 0 2px 14px rgba(0,0,0,.35); max-width: 18ch;
  color: #fff; /* صريح — لأن العنوان أصبح h1 وقاعدة h1 العامة لونها بني */
}
.hh-hero__desc {
  font-size: clamp(1rem, 3.6vw, 1.25rem); margin: 0 0 1.4rem;
  max-width: 34ch; color: #f3e9d6; text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.hh-hero__btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.hh-hero__dots {
  position: absolute; z-index: 3; bottom: 1rem; left: 0; right: 0;
  display: flex; gap: .5rem; justify-content: center;
}
.hh-hero__dot {
  width: 9px; height: 9px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: all .2s ease;
}
.hh-hero__dot.is-active { background: var(--hh-gold); width: 26px; }

/* ديسكتوب/لابتوب: هيرو أطول + رفع الكادر قليلًا (center 45%) لإظهار
   توازن أفضل بين الهلال والإبريق والمنتجات والطبق والسفرة — بدون contain
   ولا فراغات. لابتوب 1366px: 72vh لا يقل عن 620px بفضل الـ clamp. */
@media (min-width: 768px) {
  .hh-hero__slide { min-height: clamp(620px, 72vh, 780px); }
  .hh-hero__media,
  .hh-hero__media img,
  .hh-hero__media video,
  .hh-hero__slide > video { object-position: center 45%; }
  .hh-hero__content { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================
   2) شريط الثقة
   ============================================================ */
.hh-trust-sec { background: var(--hh-cream); padding-block: 1.4rem; }
.hh-trust-heading {
  text-align: center; color: var(--hh-brown);
  font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem;
}
.hh-trust-strip { display: flex; gap: .8rem; }
.hh-trust-item {
  flex: 0 0 auto; min-width: 210px;
  display: flex; align-items: center; gap: .7rem;
  background: #fff; border: 1px solid var(--hh-cream-2);
  border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--hh-shadow);
}
.hh-trust-item__icon { font-size: 1.6rem; line-height: 1; }
.hh-trust-item__title { margin: 0; font-weight: 700; color: var(--hh-ink); font-size: .98rem; }
.hh-trust-item__desc  { margin: .1rem 0 0; color: var(--hh-muted); font-size: .8rem; }

/* ============================================================
   Scroll أفقي على الموبايل لأقسام الكروت
   ============================================================ */
.hh-scroll-x {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; padding-bottom: .4rem;
  scrollbar-width: none;
}
.hh-scroll-x::-webkit-scrollbar { display: none; }
.hh-scroll-x > * { scroll-snap-align: start; }
/* على الموبايل: صفّ أفقي بدل الشبكة لمنتجات الأقسام */
@media (max-width: 700px) {
  .products-grid.hh-scroll-x { display: flex; gap: .8rem; }
  .products-grid.hh-scroll-x > .product-card { flex: 0 0 76%; max-width: 300px; }
  .products-grid.hh-scroll-x > .hh-gcard { flex: 0 0 78%; max-width: 300px; }
}

/* ============================================================
   4) اختار مزاجك
   ============================================================ */
.hh-moods { display: flex; gap: .8rem; }
.hh-mood-card {
  position: relative; flex: 0 0 auto; width: 160px; height: 190px;
  border-radius: var(--hh-radius); overflow: hidden; display: flex; align-items: flex-end;
  background: linear-gradient(150deg, var(--hh-brown-2), var(--hh-orange));
  background-size: cover; background-position: center;
  box-shadow: var(--hh-shadow); text-decoration: none; isolation: isolate;
  transition: transform .2s ease;
}
.hh-mood-card__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(38,22,13,.72) 100%);
}
.hh-mood-card__badge {
  position: absolute; top: .55rem; inset-inline-start: .55rem; z-index: 2;
  background: var(--hh-gold); color: #3b2417; font-size: .68rem; font-weight: 800;
  padding: .18rem .55rem; border-radius: 999px;
}
.hh-mood-card__text { position: relative; z-index: 2; padding: .8rem; color: #fff; }
.hh-mood-card__title { display: block; font-weight: 800; font-size: 1.05rem; }
.hh-mood-card__desc  { display: block; font-size: .78rem; color: #f0e6d6; margin-top: .15rem; }

/* ============================================================
   5) العرض الموسمي
   ============================================================ */
.hh-offer {
  display: block; border-radius: var(--hh-radius); overflow: hidden;
  background: #fff; box-shadow: var(--hh-shadow); text-decoration: none;
}
.hh-offer__media { position: relative; aspect-ratio: 16/9; background: var(--hh-cream-2); }
.hh-offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-offer__tag {
  position: absolute; top: .7rem; inset-inline-start: .7rem;
  background: var(--hh-orange); color: #fff; font-weight: 800; font-size: .78rem;
  padding: .25rem .7rem; border-radius: 999px;
}
.hh-offer__body { padding: 1.3rem 1.2rem 1.5rem; text-align: center; }
.hh-offer__eyebrow { color: var(--hh-orange); font-weight: 700; font-size: .82rem; }
.hh-offer__title { color: var(--hh-brown); font-size: 1.5rem; font-weight: 800; margin: .3rem 0 .4rem; }
.hh-offer__sub { color: var(--hh-ink); font-size: 1rem; margin: 0 0 .5rem; }
.hh-offer__desc { color: var(--hh-muted); font-size: .92rem; margin: 0 auto 1rem; max-width: 52ch; }
.hh-offer__btn { pointer-events: none; }

/* ============================================================
   6) خطوات الطلب
   ============================================================ */
.hh-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.hh-step {
  background: #fff; border: 1px solid var(--hh-cream-2); border-radius: 16px;
  padding: 1.1rem 1rem; text-align: center; box-shadow: var(--hh-shadow);
}
.hh-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--hh-brown); color: var(--hh-gold);
  font-weight: 800; font-size: 1.15rem; margin-bottom: .6rem;
}
.hh-step__title { margin: 0 0 .25rem; font-weight: 700; color: var(--hh-ink); font-size: 1rem; }
.hh-step__desc { margin: 0; color: var(--hh-muted); font-size: .82rem; }

/* ============================================================
   8) من قلب دمنهور
   ============================================================ */
.hh-damanhur { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.hh-damanhur__media {
  width: 100%; border-radius: var(--hh-radius); overflow: hidden;
  box-shadow: var(--hh-shadow); background: #fff;
}
.hh-damanhur__media img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 320px; }
.hh-damanhur__text { text-align: center; }
.hh-damanhur__body { color: var(--hh-ink); font-size: 1rem; line-height: 1.9; margin: 0 0 1.1rem; }

/* ============================================================
   9) آراء العملاء
   ============================================================ */
.hh-testimonials { display: flex; gap: .9rem; }
.hh-review {
  flex: 0 0 auto; min-width: 260px; max-width: 320px; position: relative;
  background: #fff; border: 1px solid var(--hh-cream-2); border-radius: 16px;
  padding: 1.6rem 1.2rem 1.2rem; box-shadow: var(--hh-shadow); margin: 0;
}
.hh-review__quote {
  position: absolute; top: .1rem; inset-inline-start: .8rem;
  font-size: 3rem; line-height: 1; color: var(--hh-gold); opacity: .5;
}
.hh-review__body { margin: 0 0 .8rem; color: var(--hh-ink); font-size: .95rem; line-height: 1.7; }
.hh-review__name { color: var(--hh-orange); font-weight: 700; font-size: .88rem; }

/* ============================================================
   10) CTA الختامي
   ============================================================ */
.hh-final { text-align: center; padding-block: .5rem; }
.hh-final__title { color: #fff; font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 800; margin: 0 0 .5rem; }
.hh-final__sub { color: #f0e6d6; font-size: 1.05rem; margin: 0 auto 1.4rem; max-width: 46ch; }
.hh-final__btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   زر واتساب العائم
   ============================================================ */
.hh-wa-float {
  position: fixed; z-index: 60; inset-block-end: 84px; inset-inline-end: 16px;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.45);
  transition: transform .18s ease;
}
.hh-wa-float svg { width: 28px; height: 28px; }
.hh-wa-float:hover { transform: scale(1.06); }
/* رفع الزر فوق الـ sticky-bar على الموبايل حتى لا يغطي زر السلة */
@media (max-width: 860px) { .hh-wa-float { inset-block-end: 92px; } }
@media (min-width: 861px) { .hh-wa-float { inset-block-end: 22px; } }

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 701px) {
  .hh-trust-strip { justify-content: center; flex-wrap: wrap; }
  .hh-moods { flex-wrap: wrap; justify-content: center; }
  .hh-mood-card { width: 200px; height: 220px; }
  .hh-mood-card:hover { transform: translateY(-4px); }
  .hh-testimonials { flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 861px) {
  .hh-steps { grid-template-columns: repeat(4, 1fr); }
  .hh-damanhur { flex-direction: row; text-align: start; }
  .hh-damanhur__media { width: 45%; flex: 0 0 45%; }
  .hh-damanhur__text { text-align: start; flex: 1; }
  .hh-offer { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .hh-offer__media { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .hh-offer__body { display: flex; flex-direction: column; justify-content: center; text-align: start; }
  .hh-offer__desc { margin-inline: 0; }
}

/* ============================================================
   Glass Card — كارت منتجات الهوم فقط (.hh-gcard)
   بلدي فاخر: خلفية بني/ذهبي شفافة + Glassmorphism خفيف + Border
   شبه أبيض + ظل دافئ. لا يؤثر على /products (prod-card) إطلاقًا.
   ============================================================ */
.hh-gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--hh-radius);
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 42%),
    linear-gradient(160deg, var(--hh-brown-2) 0%, var(--hh-brown) 68%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 26px rgba(59,36,23,.22), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .28s ease, box-shadow .28s ease;
}
/* ظهور fade-up خفيف (يشتغل مع نظام hh-reveal الموجود) */
body.hh-js .hh-gcard.hh-reveal { opacity: 0; transform: translateY(16px); }
body.hh-js .hh-gcard.hh-reveal.is-visible { opacity: 1; transform: none; }

/* الصورة */
.hh-gcard__media {
  position: relative; display: block;
  aspect-ratio: 1 / 1; width: 100%;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.hh-gcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.hh-gcard:hover .hh-gcard__media img { transform: scale(1.04); }

/* Badge */
.hh-gcard__badge {
  position: absolute; inset-inline-start: 10px; inset-block-start: 10px;
  z-index: 2; font-size: .72rem; font-weight: 700;
  padding: .28rem .64rem; border-radius: 999px;
  background: rgba(255,255,255,.85); color: var(--hh-brown);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.hh-gcard__badge--sale { background: var(--color-red, #A93E2A); color: #fff; }

/* الجسم */
.hh-gcard__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem .9rem 1rem;
  flex: 1 1 auto;
}
.hh-gcard__name {
  margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35;
  color: #fff;
}
.hh-gcard__name a { color: inherit; text-decoration: none; }
.hh-gcard__name a:hover { color: var(--hh-gold); }
.hh-gcard__desc {
  margin: 0; font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* سطر السعر المرجعي */
.hh-gcard__price {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin-top: -.1rem;
}
.hh-gcard__price-amount { font-size: 1.14rem; font-weight: 800; color: var(--hh-gold); }
.hh-gcard__price-unit { font-size: .72rem; color: rgba(255,255,255,.62); }
.hh-gcard__price-old {
  font-size: .82rem; color: rgba(255,255,255,.55); text-decoration: line-through;
}

/* شارات نوع البيع (بالوزن/بالعبوة) — نفس منطق صفحة المنتجات، عرض فقط */
.hh-gcard__tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: -.05rem; }
.hh-gcard__tag {
  font-size: .68rem; font-weight: 700; line-height: 1;
  padding: .26rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #f3e9d6;
  border: 1px solid rgba(255,255,255,.22);
}

/* Dropdown اختيار الوزن/العبوة */
.hh-gcard__selector { margin-top: .1rem; }
.hh-gcard__select-wrap { position: relative; }
.hh-gcard__select {
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  color: var(--hh-brown);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 12px;
  padding: .62rem 2.2rem .62rem .9rem;
  min-height: 44px;
  cursor: pointer;
  transition: box-shadow .2s ease, background .2s ease;
}
.hh-gcard__select:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,162,75,.45);
}
.hh-gcard__select-arrow {
  position: absolute; inset-inline-start: .8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--hh-brown); pointer-events: none;
  transition: transform .2s ease;
}
.hh-gcard__select:focus + .hh-gcard__select-arrow { transform: translateY(-50%) rotate(180deg); }

/* زر أضف للسلة */
.hh-gcard__add {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; flex-wrap: wrap;
  width: 100%; min-height: 46px;
  padding: .6rem .9rem;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  color: var(--hh-brown);
  background: linear-gradient(180deg, var(--hh-gold) 0%, #b98f3c 100%);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(201,162,75,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hh-gcard__add:hover { background: linear-gradient(180deg, #d8b25a 0%, #c1973f 100%); }
.hh-gcard__add:active { transform: translateY(1px); }
.hh-gcard__add.is-added { background: #2f7d4f; color: #fff; box-shadow: 0 6px 16px rgba(47,125,79,.35); }
.hh-gcard__add:disabled { cursor: default; }
.hh-gcard__line-total { font-weight: 800; }
.hh-gcard__line-total.is-hidden { display: none; }

/* Hover lift — ديسكتوب فقط (أجهزة بمؤشر) */
@media (hover: hover) and (pointer: fine) {
  .hh-gcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(59,36,23,.32), inset 0 1px 0 rgba(255,255,255,.18);
  }
}

/* موبايل: إحكام المسافات ومنع تزاحم الاسم/السعر */
@media (max-width: 430px) {
  .hh-gcard__body { padding: .75rem .8rem .9rem; gap: .45rem; }
  .hh-gcard__name { font-size: .96rem; }
  .hh-gcard__desc { display: none; }            /* توفير مساحة على الموبايل الصغير */
  .hh-gcard__price-amount { font-size: 1.06rem; }
  .hh-gcard__add { font-size: .88rem; min-height: 44px; }
}