/* Home page sections. Ported from the original inline CSS:
   deduplicated (.selected-bundle was defined 4×), dead exit-popup and
   fake live-activity styles removed, 799px radius typos corrected to 999px. */

/* TOP BAR */
.bar{background:var(--surf-dark);color:#D6C9B0;text-align:center;font-size:.94rem;font-weight:500;padding:12px 16px;letter-spacing:.01em;line-height:1.7}
.bar b{color:var(--c4);font-weight:700}
.bar s{color:#4A3828;margin:0 12px;text-decoration:none}
@media(max-width:640px){.bar{font-size:.88rem;padding:12px 10px;line-height:1.8}}

/* NAV */
.nav{background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.nav-i{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-ring{width:42px;height:42px;background:var(--surf-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-ring svg{width:24px;height:24px;fill:var(--c4)}
.logo-txt{font-size:1.3rem;font-weight:900;color:var(--c1);letter-spacing:-.01em;line-height:1}
.logo-txt span{display:block;font-size:.56rem;font-weight:600;color:var(--gray);letter-spacing:.28em;margin-top:1px}
.nav-btn{background:var(--surf-dark);color:var(--on-dark);text-decoration:none;padding:10px 26px;border-radius:50px;font-size:.87rem;font-weight:700;transition:.2s}
.nav-btn:hover{background:var(--c2)}

/* HERO */
.hero{padding:60px 0 80px}
.hero-g{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.hero-img{border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg);background:var(--c5);height:clamp(520px,62vw,680px)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hero-copy{padding-top:12px}
.hero-label{display:inline-flex;align-items:center;gap:8px;background:var(--c5);border:1px solid var(--line2);padding:6px 14px;border-radius:50px;font-size:.76rem;font-weight:700;color:var(--c2);margin-bottom:22px;letter-spacing:.02em}
.hero-label::before{content:"";width:6px;height:6px;background:var(--c4);border-radius:50%;flex-shrink:0}
.hero h1{font-size:2.7rem;font-weight:900;color:var(--c1);line-height:1.18;margin-bottom:18px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--c3)}
.hero-desc{font-size:1.05rem;color:var(--gray);line-height:1.75;margin-bottom:26px;max-width:480px}
.hero-stars{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.hero-stars .s{color:var(--c4);font-size:1rem;letter-spacing:1px}
.hero-stars .sc{font-weight:800;color:var(--c1)}
.hero-stars .ct{color:var(--gray);font-size:.9rem}
.hero-price{margin-bottom:26px}
.hero-price .lbl{font-size:.77rem;font-weight:600;color:var(--gray);margin-bottom:5px}
.hero-price .num{font-size:2.8rem;font-weight:900;color:var(--c1);line-height:1;letter-spacing:-.02em}
.hero-price .num small{font-size:1.1rem;color:var(--gray);font-weight:600;margin-inline-end:6px}
.hero-price .num .old{font-size:.9rem;color:#aaa;text-decoration:line-through;font-weight:500}
.hero-price .ship{font-size:.85rem;color:#2E7D5C;font-weight:700;margin-top:8px}
.hero-guarantee{display:inline-flex;align-items:center;gap:8px;background:#EDF5F0;border:1px solid #B8D9C8;padding:7px 14px;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--green);margin-bottom:28px}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--surf-dark);color:var(--on-dark);text-decoration:none;padding:16px 38px;border-radius:50px;font-size:1rem;font-weight:700;box-shadow:0 10px 28px rgba(43,26,13,.22);transition:.2s}
.hero-cta:hover{background:var(--c2);transform:translateY(-2px)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px}
.hero-stat{background:var(--white);padding:16px;text-align:center}
.hero-stat .v{font-size:1.2rem;font-weight:900;color:var(--c1);display:block;line-height:1.1}
.hero-stat .l{font-size:.72rem;color:var(--gray);margin-top:4px;font-weight:600}

/* STRIP */
.strip{background:var(--surf-dark);overflow:hidden;padding:13px 0;border-top:1px solid rgba(196,154,86,.2);border-bottom:1px solid rgba(196,154,86,.2)}
.strip-t{display:flex;gap:50px;width:max-content;animation:slide 28s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-i{color:#D6C9B0;font-size:.85rem;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.strip-i b{color:var(--c4);font-weight:700}
.strip-dot{width:4px;height:4px;border-radius:50%;background:var(--c4);opacity:.6}

/* TRUST FACTS (honest static indicators — replaces the removed fake live-activity) */
.trust-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:980px;margin:0 auto}
.trust-fact{background:var(--white);border:1.5px solid rgba(212,162,74,.26);border-radius:18px;padding:22px 18px;box-shadow:var(--sh-md);display:flex;align-items:center;gap:12px}
.trust-fact .ti{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--c4),#8D5A1F);color:#1A0F06;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.trust-fact b{font-size:.95rem;line-height:1.55;color:var(--c1)}
@media(max-width:900px){.trust-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.trust-facts{grid-template-columns:1fr}}

/* FEATURES — 5 equal cards */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.feat{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:32px 26px;transition:.25s;cursor:default}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line2)}
.feat-ic{width:52px;height:52px;background:var(--c5);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:20px;border:1px solid var(--line)}
.feat h3{font-size:1.05rem;font-weight:800;color:var(--c1);margin-bottom:10px}
.feat p{font-size:.9rem;color:var(--gray);line-height:1.72}
@media(max-width:960px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.feats{grid-template-columns:1fr}}

/* SIZE */
.size-details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:0 auto}
.size-card-mini{background:var(--white);border:1.5px solid rgba(212,162,74,.28);border-radius:18px;padding:18px;box-shadow:var(--sh-md);text-align:center}
.size-card-mini .num{font-size:2.2rem;font-weight:900;color:var(--green);line-height:1}
.size-card-mini .txt{color:var(--gray);font-size:.88rem;font-weight:700;margin-top:6px}
@media(max-width:760px){.size-details-grid{grid-template-columns:1fr}}

/* VIDEO SLIDER */
.vslider-wrap{position:relative;max-width:1100px;margin:0 auto}
.vslider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 40px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vslider::-webkit-scrollbar{display:none}
.vslide{flex:0 0 280px;scroll-snap-align:center;border-radius:16px;overflow:hidden;position:relative;background:#1A1108;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:.35s}
/* contain (not cover): shows the whole calendar with no cropping/zoom.
   Any leftover space is filled by the dark wood background — intentional. */
.vslide video{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;display:block;background:#1A1108;pointer-events:auto}
.vslide-num{position:absolute;top:12px;inset-inline-start:12px;background:rgba(212,162,74,.9);color:#1A0F06;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:20px;pointer-events:none}
/* A2 — arrows on the sides of the track, dots below.
   `top:46%` rather than 50%: the videos carry native `controls`, whose bar sits
   along the bottom edge. Nudging the arrows above the midpoint keeps them clear
   of it at every viewport, so an arrow can never swallow a tap meant for play.
   The 48px box already exceeds the 44×44 touch minimum, and the mobile rule
   below holds that floor rather than shrinking past it. */
.vslider-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px}
.vslider-btn{position:absolute;top:46%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;border-radius:50%;
  background:rgba(20,12,5,.62);border:1px solid rgba(212,162,74,.5);color:#fff;
  font-size:1.7rem;cursor:pointer;transition:.2s;display:flex;align-items:center;
  justify-content:center;line-height:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 22px rgba(0,0,0,.5)}
.vslider-prev{inset-inline-start:2px}
.vslider-next{inset-inline-end:2px}
.vslider-btn:hover{background:rgba(212,162,74,.95);color:#1A0F06;border-color:rgba(212,162,74,.95)}
.vslider-btn:focus-visible{outline:2px solid var(--c4);outline-offset:3px}
.vdots{display:flex;gap:8px;align-items:center}
.vdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:.25s;border:none;padding:0}
.vdot.on{background:rgba(212,162,74,.9);transform:scale(1.35)}
@media(max-width:720px){
  /* Pulled onto the inner edges so they overlay the track's padding rather than
     the video itself, and held at the 44px touch floor. */
  .vslider-btn{width:44px;height:44px;font-size:1.45rem}
  .vslider-prev{inset-inline-start:-2px}
  .vslider-next{inset-inline-end:-2px}
}
@media(prefers-reduced-motion:reduce){.vslider-btn{transition:none}}

/* GALLERY */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal-item{aspect-ratio:3/4;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;background:var(--c5);border:none;padding:0}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:.45s}
.gal-item:hover img{transform:scale(1.06)}
.gal-item::after{content:"⤢";position:absolute;bottom:10px;inset-inline-start:10px;width:34px;height:34px;background:rgba(43,26,13,.8);color:var(--on-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;opacity:0;transition:.2s;backdrop-filter:blur(4px)}
.gal-item:hover::after{opacity:1}
@media(max-width:960px){.gal-grid{grid-template-columns:repeat(2,1fr)}}

/* RETURNING-CUSTOMER TRACKING STRIP */
.track-strip{display:flex;align-items:center;justify-content:center;gap:12px;
  max-width:1180px;margin:0 auto;padding:16px 28px;text-decoration:none;
  background:var(--c5);border-block:1px solid var(--line2);
  color:var(--c2);font-size:.95rem;font-weight:700;transition:background .2s ease}
.track-strip:hover{background:#E9DCC4}
.track-strip:focus-visible{outline:2px solid var(--c3);outline-offset:-3px}
.track-strip b{color:var(--c1);font-weight:900}
.track-strip-ic{font-size:1.15rem;line-height:1}
.track-strip-arrow{transition:transform .2s ease}
.track-strip:hover .track-strip-arrow{transform:translateX(-4px)}
@media(max-width:560px){
  .track-strip{padding:14px 16px;gap:8px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .track-strip,.track-strip-arrow{transition:none}
  .track-strip:hover .track-strip-arrow{transform:none}
}

/* BUNDLES */
.bnds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin:0 auto}
.bnd{background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:36px 26px 28px;display:flex;flex-direction:column;position:relative;transition:.28s}
.bnd:hover{transform:translateY(-4px);border-color:var(--c3);box-shadow:0 14px 38px rgba(43,26,13,.1)}
.bnd.hot{background:var(--surf-dark);border-color:var(--surf-dark)}
.bnd.hot:hover{border-color:var(--c4)}
.bnd-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--c4);color:var(--c1);font-size:.73rem;font-weight:800;padding:5px 18px;border-radius:30px;white-space:nowrap}
.bnd:not(.hot) .bnd-flag{background:var(--c2);color:var(--on-dark)}
.bnd-name{font-size:1.3rem;font-weight:900;color:var(--c1);margin-bottom:4px}
.bnd.hot .bnd-name{color:var(--on-dark)}
.bnd-sub{font-size:.85rem;color:var(--gray);margin-bottom:24px}
.bnd.hot .bnd-sub{color:#B5A898}
.bnd-old{font-size:.9rem;color:var(--gray2);text-decoration:line-through;min-height:1.3em}
.bnd.hot .bnd-old{color:#6B6055}
.bnd-new{font-size:2.3rem;font-weight:900;color:var(--c1);line-height:1;margin:4px 0;letter-spacing:-.02em}
.bnd.hot .bnd-new{color:var(--on-dark)}
.bnd-new small{font-size:.88rem;color:var(--gray);font-weight:600;margin-inline-end:5px}
.bnd.hot .bnd-new small{color:#B5A898}
.bnd-save{display:inline-block;background:var(--green-soft);color:var(--green);font-size:.78rem;font-weight:800;padding:5px 14px;border-radius:30px;margin-top:14px}
.bnd.hot .bnd-save{background:rgba(196,154,86,.18);color:var(--c4)}
.bnd-btn{margin-top:auto;padding-top:22px}
.bnd-btn button{width:100%;background:transparent;color:var(--c1);border:1.5px solid var(--c1);padding:13px;border-radius:50px;font-weight:700;font-size:.92rem;cursor:pointer;transition:.2s}
.bnd-btn button:hover{background:var(--surf-dark);color:var(--on-dark)}
.bnd.hot .bnd-btn button{background:var(--c4);color:var(--c1);border-color:var(--c4)}
.bnd.hot .bnd-btn button:hover{background:transparent;color:var(--c4)}
.bnd[data-bundle]{cursor:pointer}
.bnd[data-bundle]:hover{transform:translateY(-3px)}
.bnd.selected-bundle{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(30,107,71,.14),0 18px 46px rgba(30,107,71,.18)!important;transform:translateY(-4px)}
.bnd.selected-bundle::after{content:'✓ الباقة المختارة';position:absolute;top:12px;inset-inline-end:12px;background:var(--green);color:#fff;border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:900;box-shadow:0 8px 18px rgba(30,107,71,.22);z-index:4}
.bnd.selected-bundle .bnd-btn button{background:var(--green)!important;color:#fff!important}
@media(max-width:960px){.bnds{grid-template-columns:1fr;max-width:400px}}

/* TESTIMONIALS / REVIEWS SLIDER */
.tsti{background:rgba(255,255,255,.05);border:1px solid rgba(196,154,86,.2);border-radius:14px;padding:28px 24px;transition:.2s}
.tsti:hover{background:rgba(255,255,255,.07);border-color:rgba(196,154,86,.35)}
.tsti-sts{color:var(--c4);letter-spacing:2px;margin-bottom:14px;font-size:.95rem}
.tsti-txt{color:#E0D4C0;font-size:.95rem;line-height:1.8;margin-bottom:20px}
.tsti-who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(196,154,86,.15)}
.tsti-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--c2),var(--c3));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.tsti-nm{font-size:.92rem;font-weight:700;color:var(--on-dark)}
.tsti-ct{font-size:.78rem;color:var(--c4);margin-top:2px}
.reviews-slider-wrap{position:relative;max-width:1120px;margin:0 auto}
.reviews-slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 56px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reviews-slider::-webkit-scrollbar{display:none}
.review-slide{flex:0 0 340px;scroll-snap-align:center;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.reviews-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(212,162,74,.45);background:rgba(255,255,255,.10);color:#fff;font-size:2rem;line-height:1;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;transition:.2s;backdrop-filter:blur(10px)}
.reviews-nav:hover{background:rgba(212,162,74,.95);color:#1A0F06;border-color:rgba(212,162,74,.95)}
.reviews-prev{inset-inline-start:0}
.reviews-next{inset-inline-end:0}
.reviews-nav:focus-visible{outline:2px solid var(--c4);outline-offset:3px}
.reviews-slider:focus-visible{outline:2px solid var(--c4);outline-offset:4px;border-radius:14px}
/* A6: dot indicators, generated from the live slide count */
.reviews-dots{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.rev-dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(212,162,74,.55);background:transparent;transition:.2s}
.rev-dot.on{background:var(--c4);border-color:var(--c4);transform:scale(1.25)}
.rev-dot:focus-visible{outline:2px solid var(--c4);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.rev-dot{transition:none}}
@media(max-width:720px){
  .reviews-slider{padding:8px 8px 18px;gap:14px}
  .review-slide{flex:0 0 86%;min-height:270px}
  .reviews-nav{width:42px;height:42px;top:auto;bottom:-58px;transform:none}
  .reviews-prev{inset-inline-start:calc(50% - 52px)}
  .reviews-next{inset-inline-end:calc(50% - 52px)}
  /* the arrows drop below the track on mobile — keep the dots clear of them */
  .reviews-dots{margin-top:68px}
}

/* FAQ */
.faq{max-width:700px;margin:0 auto}
.faq-i{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:.2s}
.faq-i:hover{border-color:var(--line2)}
.faq-i.on{border-color:var(--c3);box-shadow:0 4px 16px rgba(43,26,13,.06)}
.faq-q{width:100%;background:none;border:none;text-align:start;padding:18px 20px;font-weight:700;font-size:.97rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--c1);user-select:none}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--c3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:50%;flex-shrink:0;transition:.25s;font-weight:400}
.faq-i.on .faq-q::after{transform:rotate(45deg);background:var(--c3);color:var(--on-dark);border-color:var(--c3)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-i.on .faq-a{max-height:220px}
.faq-a p{padding:0 20px 20px;font-size:.92rem;color:var(--gray);line-height:1.8}

/* ORDER */
.ord-wrap{max-width:590px;margin:0 auto}
.ord-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:42px 36px;box-shadow:0 16px 48px rgba(43,26,13,.08);position:relative;overflow:hidden}
.ord-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c2),var(--c4),var(--c2))}
.ord-card h2{text-align:center;font-size:1.7rem;font-weight:900;color:var(--c1);margin-bottom:5px}
.ord-sub{text-align:center;font-size:.88rem;color:var(--gray);margin-bottom:28px}
.ord-btn{width:100%;background:var(--surf-dark);color:var(--on-dark);border:none;padding:16px;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(43,26,13,.22);transition:.25s}
.ord-btn:hover{background:var(--c2);transform:translateY(-2px)}
.ord-btn:disabled{opacity:.6;cursor:wait;transform:none}
.ord-trust{display:flex;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
.ord-trust span{font-size:.78rem;color:var(--gray);font-weight:600}
.form-alert{display:none;background:var(--red-soft);border:1px solid rgba(178,53,48,.25);color:var(--red);border-radius:10px;padding:12px 14px;font-size:.84rem;font-weight:700;margin-bottom:16px}
.form-alert.on{display:block}
@media(max-width:560px){.ord-card{padding:28px 20px}.frow{grid-template-columns:1fr}}

/* FOOTER — 4 columns */
footer{background:var(--surf-dark);padding:56px 24px 26px}
.ft-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;text-align:start}
.ft-col h4{color:var(--c4);font-size:.95rem;font-weight:900;margin-bottom:16px}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:10px}
.ft-col a{color:#D6C9B0;text-decoration:none;font-size:.88rem;font-weight:600;transition:.2s}
.ft-col a:hover{color:var(--c4)}
.ft-brand .logo-txt{color:var(--on-dark)}
.ft-brand .logo-txt span{color:#7A6A58}
.ft-about{color:#B5A898;font-size:.86rem;line-height:1.8;margin-top:14px;max-width:280px}
.ft-badges{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.ft-badges span{background:rgba(255,255,255,.06);border:1px solid rgba(196,154,86,.25);color:#D6C9B0;font-size:.74rem;font-weight:700;padding:6px 12px;border-radius:999px}
.ft-copy{font-size:.8rem;color:#5C4D3E;padding-top:22px;margin-top:40px;border-top:1px solid #3A2A1A;text-align:center;max-width:1180px;margin-inline:auto}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-grid{grid-template-columns:1fr}}

/* STICKY CTA — all screen sizes */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--white);border-top:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;transform:translateY(120%);transition:.3s;box-shadow:0 -6px 24px rgba(43,26,13,.1)}
.sticky.on{transform:translateY(0)}
.sticky .p{font-size:1.3rem;font-weight:900;color:var(--c1);line-height:1}
.sticky .p small{display:block;font-size:.7rem;color:var(--gray);font-weight:500;margin-top:2px}
.sticky a{background:var(--surf-dark);color:var(--on-dark);text-decoration:none;padding:11px 26px;border-radius:50px;font-weight:700;font-size:.9rem;white-space:nowrap;transition:.2s}
.sticky a:hover{background:var(--c2)}

/* RESPONSIVE — hero & misc */
@media(max-width:960px){
  .hero-g{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-img{height:auto;aspect-ratio:4/5;max-width:520px;margin-inline:auto}
  .hero-stars,.hero-cta,.hero-guarantee{justify-content:center}
  .hero-desc{margin-inline:auto}
}
@media(max-width:560px){
  .hero-img{aspect-ratio:4/5;max-width:100%}
  .hero h1{font-size:2.1rem}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stat:last-child{grid-column:1/3;border-top:1px solid var(--line)}
}

/* ── B3: theme toggle button ─────────────────────────────────────────────── */

/* ── B2: trust badges under the order form ───────────────────────────────── */
.ord-badges{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ord-badges li{display:flex;align-items:center;gap:9px;background:var(--c5);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:.78rem;font-weight:700;color:var(--c1);line-height:1.5}
.ord-badges .ob-ic{font-size:1.05rem;flex-shrink:0}
@media(max-width:420px){.ord-badges{grid-template-columns:1fr}}

/* Package 7 / A2: the form-recovery notice was removed at the owner's request —
   recovery itself still works, silently (see checkout.js).
   Package 7 / A3: the sharing section was removed entirely. */

/* ══ Package 7 — owner font control ══════════════════════════════════════════
   Active ONLY under :root[data-fonts="custom"], which site-content.js stamps
   when any stored font value differs from its default. The !important is
   deliberate and contained: this is the owner's explicit typography override
   layer, and it must beat component-level sizes (.hero h1{font-size:2.7rem})
   whatever their specificity. Without the attribute none of this matches. */
:root[data-fonts="custom"]{font-size:var(--fs-body)}   /* rem ramp follows the body slider */
:root[data-fonts="custom"] h1,
:root[data-fonts="custom"] h2{font-size:var(--fs-h1)!important;font-weight:var(--fw-head)!important}
:root[data-fonts="custom"] h3,
:root[data-fonts="custom"] h4{font-size:var(--fs-h3)!important;font-weight:var(--fw-head)!important}
:root[data-fonts="custom"] p,
:root[data-fonts="custom"] .hero-desc{font-weight:var(--fw-body)}
:root[data-fonts="custom"] .hero-cta,
:root[data-fonts="custom"] .nav-btn,
:root[data-fonts="custom"] .ord-btn,
:root[data-fonts="custom"] .bnd-btn button,
:root[data-fonts="custom"] .sticky a{font-size:var(--fs-btn)!important}
@media(max-width:560px){
  /* A fixed heading size chosen on desktop must not overwhelm a phone. */
  :root[data-fonts="custom"] h1,
  :root[data-fonts="custom"] h2{font-size:calc(var(--fs-h1) * .8)!important}
}

/* ══ Package 7 (م1) — announcement bar ═══════════════════════════════════════
   Injected by site-content.js above the existing dark info bar, only while
   store_settings.announcement_enabled is true. Gold on ink: unmissable but
   unmistakably part of the brand. */
.announce-bar{background:var(--c4);color:var(--c1);text-align:center;
  font-weight:800;font-size:.95rem;padding:11px 16px;line-height:1.6}

/* ══ Package 7 (Phase E) — stock pause ═══════════════════════════════════════
   Everything below renders only while stock_status = 'paused'. The bar is the
   brand's dark copper, injected as the first element of <body> so it is on
   screen before any scroll. */
.stock-bar{background:linear-gradient(135deg,var(--c2),var(--c3));color:var(--on-dark);
  text-align:center;padding:14px 18px;font-weight:800;font-size:1.02rem;line-height:1.7}
.stock-bar b{color:var(--c4)}
.stock-notify{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:10px}
.stock-notify input{border:none;border-radius:999px;padding:10px 16px;min-width:200px;
  font-family:var(--font);font-size:.9rem;text-align:start}
.stock-notify input:focus-visible{outline:2px solid var(--c4);outline-offset:2px}
.stock-notify button{background:var(--c4);color:var(--c1);border:none;border-radius:999px;
  padding:10px 20px;font-family:var(--font);font-size:.9rem;font-weight:800;cursor:pointer}
.stock-notify button:hover{background:var(--c5)}
.stock-notify button:disabled{opacity:.6;cursor:default}
.stock-notify-msg{display:block;font-size:.85rem;font-weight:700;margin-top:6px}

/* The submit button in its "unmistakably inactive" state. */
.ord-btn.stock-off,.ord-btn.stock-off:hover{background:var(--gray2);color:var(--white);
  cursor:not-allowed;box-shadow:none;transform:none}

/* Header / hero / sticky CTAs while paused: red-dot label, muted ground,
   pointing at the top bar instead of the dead form. */
.cta-paused,.cta-paused:hover{background:var(--gray)!important;color:var(--white)!important;
  transform:none!important;box-shadow:none!important}

/* Sold-out ribbon on the three package cards. .bnd gains position so the
   ribbon can anchor; harmless when no ribbon exists. */
.bnd{position:relative}
.bnd .bnd-stock{position:absolute;top:10px;inset-inline-end:10px;background:var(--red);color:var(--white);
  border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:800;z-index:2}

/* ══════════ Package 8 — bilingual layer ══════════ */

/* Directional icons mirror; neutral icons do not.
   The three sliders use ‹ and › as bare text, and "previous" points RIGHT in
   Arabic. In English that same glyph has to point left or the control lies
   about which way it moves. Only the glyph is flipped — scaleX on the button
   would also mirror its focus ring and border radius, and .vslider-btn /
   .reviews-nav already carry translateY(-50%) for centring, which a second
   `transform` would silently replace. So the flip goes on an inline wrapper
   the browser creates for us: nothing else about the button changes. */
html[dir="ltr"] .vslider-btn,
html[dir="ltr"] .reviews-nav,
html[dir="ltr"] .lb-n{
  font-family:inherit;
}
html[dir="ltr"] .vslider-btn > .dir-glyph,
html[dir="ltr"] .reviews-nav > .dir-glyph,
html[dir="ltr"] .lb-n > .dir-glyph{
  display:inline-block;
  transform:scaleX(-1);
}

/* The language switch. Always visible — icon-only when the bar gets tight,
   never hidden. 44×44 minimum touch target on every screen. */
.lang-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-inline-size:44px;min-block-size:44px;
  text-decoration:none;white-space:nowrap;
}
.lang-switch:focus-visible{outline:2px solid var(--c3);outline-offset:3px}

/* On pages with no nav bar the switch floats in the top corner. `fixed` with
   logical insets so it sits in the same visual corner in both directions. */
.lang-float{
  position:fixed;inset-block-start:14px;inset-inline-end:14px;z-index:200;
  background:var(--surface,#fff);color:var(--c2,#5C3D1E);
  border:1.5px solid var(--line2,#D6CDB8);border-radius:999px;
  padding:9px 14px;font-family:var(--font,'Cairo',sans-serif);
  font-size:.84rem;font-weight:700;
  box-shadow:0 6px 18px rgba(43,26,13,.12);
}
.lang-float:hover{background:var(--c5,#F0E6D3);border-color:var(--c3,#8B5E2F)}

@media(max-width:560px){
  /* icon only — the globe still says what it does, and it stays on screen */
  .nav-actions .lang-switch [data-lang-label]{display:none}
  .lang-float{padding:9px 11px}
}

/* Latin text in the English build wants the Latin font stack; Cairo carries
   Latin glyphs but sets them tight beside Arabic-tuned metrics. */
html[dir="ltr"] body{letter-spacing:0}

/* The "Translated from Arabic" line under a translated review. Quiet by
   design — it must be readable without competing with the review itself. */
.tsti-tr{
  margin-block-start:-6px;margin-block-end:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--on-dark-3,#B5A898);opacity:.85;
}