/* ============================================================
   Homepage V2 — dedicated store header, editorial hero, emotional hierarchy
   ============================================================ */
:root{ --st-brown:#7c4a37; --st-brown-d:#603626; --st-gold:#c9a24b; --st-blush:#f6e7e2; --st-blush2:#fdf4f1;
       --st-ivory:#faf6f1; --st-line:#efe6dd; --st-sel:#dda490; }

/* ---- Store header ---- */
.esx-sh{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(124,74,55,.10); }
.esx-sh-in{ max-width:1120px; margin:0 auto; padding:9px 16px; display:flex; align-items:center; gap:14px; }
.esx-sh-brand{ display:flex; flex-direction:column; gap:1px; text-decoration:none; line-height:1; }
.esx-sh-logo{ height:28px; width:auto; }
.esx-sh-tag{ font-size:.64rem; color:var(--st-brown); font-weight:800; letter-spacing:.01em; }
.esx-sh-nav{ display:none; }
.esx-sh-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.esx-sh-secondary{ display:none; }
.esx-sh-cart{ position:relative; color:var(--st-brown-d); font-size:1.2rem; text-decoration:none; width:40px; height:40px; display:grid; place-items:center; }
.esx-sh-badge{ position:absolute; top:2px; inset-inline-start:2px; background:var(--st-brown); color:#fff; font-size:.6rem; min-width:17px; height:17px; border-radius:99px; display:grid; place-items:center; font-weight:800; padding:0 3px; }
.esx-sh-burger{ width:42px; height:42px; border:1px solid var(--st-line); background:#fff; border-radius:12px; display:grid; gap:4px; place-content:center; cursor:pointer; }
.esx-sh-burger span{ width:18px; height:2px; background:var(--st-brown-d); border-radius:2px; transition:.2s; }
.esx-sh-scrim{ position:fixed; inset:0; background:rgba(45,30,22,.4); z-index:90; opacity:0; transition:opacity .25s; }
.esx-sh-scrim.is-on{ opacity:1; }
.esx-sh-drawer{ position:fixed; inset-block:0; inset-inline-end:0; width:min(84vw,320px); background:var(--st-ivory); z-index:95;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:-10px 0 40px rgba(45,30,22,.18);
  display:flex; flex-direction:column; }
[dir=rtl] .esx-sh-drawer{ transform:translateX(-100%); }
.esx-sh-drawer.is-open{ transform:translateX(0); }
.esx-sh-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--st-line); }
.esx-sh-close{ width:38px; height:38px; border:none; background:#fff; border-radius:50%; color:var(--st-brown-d); font-size:1.05rem; cursor:pointer; }
.esx-sh-drawer-nav{ display:flex; flex-direction:column; padding:10px; gap:2px; overflow-y:auto; }
.esx-sh-drawer-nav a{ display:flex; align-items:center; gap:12px; padding:14px 14px; border-radius:12px; text-decoration:none;
  color:var(--text-primary,#2c2320); font-weight:700; font-size:1rem; }
.esx-sh-drawer-nav a i{ color:var(--st-brown); width:20px; text-align:center; }
.esx-sh-drawer-nav a:hover{ background:var(--st-blush2); }
.esx-sh-drawer-sep{ height:1px; background:var(--st-line); margin:8px 6px; }
.esx-sh-drawer-sec{ color:var(--st-brown) !important; }

/* ---- Editorial hero ---- */
.esx-hero2{ display:flex; flex-direction:column; gap:18px; padding:22px 4px 8px; }
.esx-hero2-text{ text-align:center; }
.esx-hero2 .esx-home-q{ font-size:clamp(1.55rem,6.4vw,2.4rem); line-height:1.22; font-weight:800; margin:6px 0 8px; letter-spacing:-.4px; }
.esx-hero2 .esx-home-sub{ color:var(--text-secondary,#8a7d76); font-size:1rem; line-height:1.7; margin:0 auto 16px; max-width:40ch; }
.esx-hero2-cta{ margin-top:16px; }
.esx-hero2-media{ border-radius:24px; overflow:hidden; box-shadow:0 16px 40px rgba(124,74,55,.14); background:var(--st-blush2);
  max-height:230px; display:flex; align-items:center; justify-content:center; }
.esx-hero2-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Compact trust ---- */
.esh-trust--compact{ margin-top:6px; }

/* ---- Emotion extra reveal ---- */
.esx-emo-extra{ display:none; }
.esx-emo-extra.show{ display:flex; }

/* ---- How it works (3 warm steps) ---- */
.esx-steps3{ display:grid; grid-template-columns:1fr; gap:14px; }
.esx-step3{ position:relative; background:#fff; border:1px solid var(--st-line); border-radius:20px; padding:22px 18px 20px; text-align:center; box-shadow:var(--shadow-xs); }
.esx-step3-n{ position:absolute; top:14px; inset-inline-start:16px; width:26px; height:26px; border-radius:50%; background:var(--st-blush); color:var(--st-brown); font-weight:800; display:grid; place-items:center; font-size:.85rem; }
.esx-step3-ic{ width:58px; height:58px; border-radius:18px; margin:0 auto 12px; display:grid; place-items:center; font-size:1.5rem; color:var(--st-brown); background:linear-gradient(135deg,var(--st-blush2),var(--st-blush)); }
.esx-step3 h3{ font-size:1.05rem; font-weight:800; margin:0 0 4px; color:var(--text-primary,#2c2320); }
.esx-step3 p{ color:var(--text-secondary,#8a7d76); font-size:.9rem; margin:0; }

/* ---- Concierge example line ---- */
.esx-concierge-eg{ font-size:.86rem !important; opacity:.8; font-style:italic; margin:-6px auto 16px !important; }

/* ---- Signature packages (editorial) ---- */
.esx-pkgs{ display:grid; grid-template-columns:1fr; gap:16px; }
.esx-pkg{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--st-line); border-radius:22px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 8px 26px rgba(80,50,30,.06); transition:transform .18s, box-shadow .18s; }
.esx-pkg:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(124,74,55,.14); }
.esx-pkg-media{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--st-blush2),var(--st-blush)); display:flex; align-items:center; justify-content:center; font-size:2.6rem; overflow:hidden; }
.esx-pkg-media img{ width:100%; height:100%; object-fit:cover; }
.esx-pkg--feature .esx-pkg-media{ aspect-ratio:16/11; }
.esx-pkg-body{ padding:16px; display:flex; flex-direction:column; gap:6px; }
.esx-pkg-tag{ align-self:flex-start; font-size:.68rem; font-weight:800; color:var(--st-gold); background:#fbf3df; border:1px solid #f0e2bf; padding:3px 10px; border-radius:99px; }
.esx-pkg-body h3{ font-size:1.15rem; font-weight:800; margin:0; color:var(--text-primary,#2c2320); }
.esx-pkg--feature .esx-pkg-body h3{ font-size:1.4rem; }
.esx-pkg-body p{ color:var(--text-secondary,#8a7d76); font-size:.92rem; line-height:1.6; margin:0; }
.esx-pkg-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.esx-pkg-cta{ color:var(--st-brown); font-weight:800; font-size:.9rem; }
.esx-pkg-side{ display:grid; gap:16px; }

/* ---- Personalization ---- */
.esx-perso{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.esx-perso-card{ background:#fff; border:1px solid var(--st-line); border-radius:18px; padding:16px 14px; text-align:center; box-shadow:var(--shadow-xs); }
.esx-perso-ic{ width:52px; height:52px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center; font-size:1.25rem; color:var(--st-brown); background:var(--st-blush2); }
.esx-perso-card b{ display:block; font-size:.95rem; font-weight:800; color:var(--text-primary,#2c2320); }
.esx-perso-card span{ display:block; font-size:.78rem; color:var(--text-secondary,#8a7d76); margin-top:3px; line-height:1.5; }

/* ---- Smart card story ---- */
.esx-smart{ background:linear-gradient(135deg,#fbf3ef,#f6e7e2); border:1px solid var(--st-blush); border-radius:26px; padding:28px 18px; }
.esx-smart-head{ text-align:center; margin-bottom:22px; }
.esx-smart-head h2{ font-size:clamp(1.35rem,5vw,1.8rem); font-weight:800; margin:8px 0 6px; color:var(--text-primary,#2c2320); }
.esx-smart-head p{ color:var(--text-secondary,#8a7d76); max-width:46ch; margin:0 auto; line-height:1.7; }
.esx-smart-track{ display:grid; grid-template-columns:1fr; gap:12px; }
.esx-smart-step{ position:relative; background:#fff; border:1px solid var(--st-line); border-radius:18px; padding:16px 16px 16px 60px; }
.esx-smart-n{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:var(--st-brown); color:#fff; font-weight:800; display:grid; place-items:center; }
.esx-smart-ic{ display:none; }
.esx-smart-step b{ display:block; font-size:1rem; font-weight:800; color:var(--text-primary,#2c2320); }
.esx-smart-step span{ display:block; font-size:.86rem; color:var(--text-secondary,#8a7d76); margin-top:2px; }

/* ---- Final CTA ---- */
.esx-finalcta{ margin:40px 0 10px; }
.esx-finalcta-in{ position:relative; overflow:hidden; text-align:center; border-radius:28px; padding:40px 22px; color:#fff;
  background:linear-gradient(135deg,var(--st-brown),var(--st-brown-d)); box-shadow:0 20px 48px rgba(124,74,55,.28); }
.esx-finalcta-in::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(60% 90% at 85% 0,rgba(201,162,75,.30),transparent 60%),
  radial-gradient(50% 80% at 5% 100%,rgba(221,164,144,.30),transparent 60%); pointer-events:none; }
.esx-finalcta-in>*{ position:relative; z-index:1; }
.esx-finalcta-in h2{ font-size:clamp(1.5rem,6vw,2rem); font-weight:800; margin:0 0 8px; }
.esx-finalcta-in p{ color:rgba(255,255,255,.88); margin:0 auto 20px; max-width:38ch; line-height:1.7; }
.esx-finalcta-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.esx-finalcta-in .est-btn-accent{ background:#fff; color:var(--st-brown); }
/* شفّاف على الخلفيّة البنّيّة — كان أبيضَ على أبيض فيبدو زرًّا فارغًا */
.esx-finalcta-in .est-btn-ghost{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.esx-finalcta-in .est-btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ============ Desktop (editorial) ============ */
@media (min-width:768px){
  .esx-sh-nav{ display:flex; gap:22px; margin-inline-start:26px; }
  .esx-sh-nav a{ text-decoration:none; color:var(--text-primary,#2c2320); font-weight:700; font-size:.95rem; }
  .esx-sh-nav a:hover{ color:var(--st-brown); }
  .esx-sh-secondary{ display:inline-block; color:var(--st-brown); font-weight:700; font-size:.88rem; text-decoration:none; }
  .esx-sh-burger{ display:none; }
  .esx-sh-logo{ height:32px; }

  .esx-hero2{ flex-direction:row-reverse; align-items:center; gap:40px; padding:44px 8px 20px; }
  .esx-hero2-text{ flex:1; text-align:start; }
  .esx-hero2-text .esx-home-sub{ margin-inline:0; }
  .esx-hero2-text .esx-recips{ margin-inline:0; }
  .esx-hero2-media{ flex:1; max-height:none; aspect-ratio:5/4; }

  .esx-steps3{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .esx-perso{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .esx-smart-track{ grid-template-columns:repeat(4,1fr); }
  .esx-smart-step{ padding:56px 16px 16px; text-align:center; }
  .esx-smart-n{ inset-inline-start:50%; top:16px; transform:translateX(50%); }
  [dir=rtl] .esx-smart-n{ transform:translateX(50%); }

  .esx-pkgs{ grid-template-columns:1.3fr 1fr; align-items:start; }
  .esx-pkg-side{ grid-template-columns:1fr; }
}
@media (min-width:1024px){
  .esx-pkg-side .esx-pkg{ flex-direction:row; }
  .esx-pkg-side .esx-pkg-media{ width:150px; flex:none; aspect-ratio:1/1; }
  .esx-pkg-side .esx-pkg-body{ flex:1; }
}

/* ============================================================
   V2.1 hotfix — mobile carousels, card density, compact how-it-works
   (جوال فقط < 768؛ الديسكتوب V2 يبقى شبكة كما هو)
   ============================================================ */
@media (max-width:767.98px){
  /* عربة أفقيّة بالانجذاب — البطاقة ~85% مع إطلالة على التالية */
  .esh-products.esh-carousel{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-inline:16px;
    margin-inline:-16px; padding:4px 16px 8px;      /* حافة كاملة العرض مع هامش داخليّ */
    scrollbar-width:none;
  }
  .esh-products.esh-carousel::-webkit-scrollbar{ display:none; }
  .esh-products.esh-carousel > .esh-pcard{
    flex:0 0 85%; max-width:85%; scroll-snap-align:start; margin:0;
  }

  /* كثافة البطاقة داخل العربة — الصورة مهيمنة، النصّ موجَز (عرض فقط) */
  .esh-products.esh-carousel .esh-pcard-body h3{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    line-height:1.35; min-height:0;
  }
  .esh-products.esh-carousel .esh-pcard-desc{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    line-height:1.5;
  }

  /* تقليل ارتفاع «كيف تعمل مودّة؟» ~25% */
  .esx-steps3{ gap:9px; }
  .esx-step3{ padding:13px 16px 12px; }
  .esx-step3-ic{ width:42px; height:42px; border-radius:13px; font-size:1.12rem; margin-bottom:7px; }
  .esx-step3-n{ top:11px; width:22px; height:22px; font-size:.76rem; }
  .esx-step3 h3{ font-size:1rem; margin-bottom:2px; }
  .esx-step3 p{ font-size:.86rem; line-height:1.5; }
}