/* ==========================================================================
   PALMER'S العراق — نظام التصميم
   النصوص  -> داخل القالب (tpl/package.html) أو من لوحة التحكم
   الأسعار -> content/catalogue.json
   لون البكج (--accent) يحقنه palmers.js من الكتالوك حسب الصفحة.
   ========================================================================== */
@import url(/assets/fonts/plex-arabic.css);

:root{
  --cream:#F8F2E6;        /* أرضية الصفحة — نفس palmersiraq.com */
  --cream-deep:#EFE6D3;   /* أرضية الأقسام المتناوبة */
  --paper:#FFFDF8;        /* البطاقات */
  --ink:#2A2118;          /* النص الأساسي */
  --muted:#6F6259;
  --green:#2F4A1E;        /* أزرار الشراء والعناوين الثقيلة */
  --green-deep:#213515;
  --orange:#FF6600;       /* برتقالي بالمرز: الشارات، العلم الأمريكي، الاستعجال */
  --orange-deep:#D85400;
  --orange-soft:#FFEBDD;
  --line:#E3D9C6;
  --star:#E8A33D;
  --ok:#1F7A4D;
  --bad:#B42318;
  --accent:#5c6f3a;       /* يُستبدل من الكتالوك */
  --accent-soft:#eef1e6;

  --font:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --shadow-s:0 1px 2px rgba(42,33,24,.06),0 2px 8px rgba(42,33,24,.05);
  --shadow-m:0 6px 18px rgba(42,33,24,.10);
  --shadow-l:0 18px 45px rgba(42,33,24,.18);
  --r:14px; --r-l:22px;
  --bar-h:74px;
  --tick-h:36px;          /* ارتفاع الشريط المتحرك — ثابت حتى تلتصق الترويسة تحته */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.8;
  /* لا overflow-x هنا: على body يكسر position:sticky للشريط والترويسة. يكفي على html. */
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
h1,h2,h3,h4{line-height:1.35;margin:0;font-weight:700;color:var(--ink)}
h1{font-size:1.85rem;letter-spacing:-.01em}
h2{font-size:1.45rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--green)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
strong,b{font-weight:700}
.strike{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.6}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:560px;margin:0 auto;padding:0 18px}
.sec{padding:44px 0}
.sec-tight{padding:26px 0}
.bg-deep{background:var(--cream-deep)}
.bg-paper{background:var(--paper)}
.bg-green{background:var(--green);color:#EEF3E6}
.bg-green h2,.bg-green h3{color:#fff}
.bg-green .muted{color:#C9D3B9}
.center{text-align:center}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec-head{text-align:center;margin-bottom:26px}
.sec-head p{max-width:440px;margin:8px auto 0;color:var(--muted);font-size:.95rem}

/* ---------- الأيقونات: SVG مضمّنة، تأخذ لون النص ---------- */
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.3em}
.ic-lg{width:28px;height:28px}
.ic-xl{width:36px;height:36px}

/* ---------- التوقيع البصري ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.78rem;
  background:var(--orange-soft);color:var(--orange-deep);
  padding:5px 14px;border-radius:99px;margin-bottom:14px;border:1px solid #FFD3B8;
}
.eyebrow.is-green{background:var(--accent-soft);color:var(--green);border-color:transparent}
.eyebrow.is-ink{background:var(--ink);color:var(--cream);border-color:transparent}

/* شارة «صنع في أمريكا» — العلم برتقالي بلون بالمرز */
.usa{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);white-space:nowrap}
.usa .flag{width:30px;height:20px;border-radius:3px;box-shadow:0 0 0 1px rgba(42,33,24,.12);flex:none}
.usa.lg .flag{width:44px;height:29px}
.usa.lg{font-size:1.1rem}
.usa small{display:block;font-weight:500;font-size:.72rem;color:var(--muted);line-height:1.3}

/* ---------- الشريط المتحرك ---------- */
/* يبقى ظاهراً أثناء التمرير — والترويسة تلتصق تحته مباشرة */
.ticker{position:sticky;top:0;z-index:41;height:var(--tick-h);background:var(--green);color:#EEF3E6;font-size:.8rem;font-weight:600;overflow:hidden;white-space:nowrap}
.ticker-in{display:inline-flex;align-items:center;height:var(--tick-h);animation:tick 34s linear infinite}
.ticker-in span{padding:0 22px;position:relative}
.ticker-in span::before{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--orange);transform:translateY(-50%)}
@keyframes tick{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none}}

/* ---------- الترويسة ---------- */
.top{position:sticky;top:var(--tick-h);z-index:40;background:rgba(248,242,230,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:block;height:34px}
.logo img,.logo svg{height:100%;width:auto}
.top-usa{font-size:.8rem}
.top-wa{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--green);text-decoration:none;background:var(--paper);border:1px solid var(--line);padding:6px 12px;border-radius:99px}

/* ---------- البطل ---------- */
.hero{padding:26px 0 8px;position:relative;overflow:hidden}
.hero h1{margin:6px 0 10px}
.hero .lead{font-size:1.02rem;color:var(--muted);margin:0 0 18px;max-width:460px}
.rating{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:.9rem}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars .ic{width:1.05em;height:1.05em;fill:currentColor;stroke:none}
.rating b{font-size:1.05rem}

.stage{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--cream-deep);box-shadow:var(--shadow-m);aspect-ratio:4/5;margin:0 0 18px}
.stage>img.model{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.stage .pack{position:absolute;right:0;bottom:-4%;width:64%;filter:drop-shadow(0 16px 24px rgba(42,33,24,.28))}
.stage .tag{position:absolute;top:14px;right:14px;background:var(--paper);border-radius:99px;padding:6px 12px;font-size:.78rem;font-weight:700;box-shadow:var(--shadow-s)}
.stage .tag2{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;border-radius:99px;padding:6px 12px;font-size:.78rem;font-weight:700;box-shadow:var(--shadow-s)}

/* بطاقة السعر والزر */
.buy{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;box-shadow:var(--shadow-s)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.price-now{font-size:2.1rem;font-weight:700;color:var(--green);line-height:1}
.price-now small{font-size:.9rem;font-weight:600;margin-inline-start:4px}
.price-was{font-size:1rem;color:var(--muted)}
.price-off{background:var(--orange);color:#fff;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:99px}
.price-note{font-size:.86rem;color:var(--ok);font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:6px}

.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--green);color:#fff;font-weight:700;font-size:1.08rem;
  padding:16px 18px;border-radius:var(--r);box-shadow:0 6px 0 var(--green-deep),var(--shadow-m);
  transition:transform .08s,box-shadow .08s;text-decoration:none;position:relative
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-deep)}
.btn.is-orange{background:var(--orange);box-shadow:0 6px 0 var(--orange-deep),var(--shadow-m)}
.btn.is-orange:active{box-shadow:0 2px 0 var(--orange-deep)}
.btn.ghost{background:var(--paper);color:var(--green);box-shadow:none;border:1.5px solid var(--green)}
.btn[disabled]{opacity:.7;pointer-events:none}
.btn-note{text-align:center;font-size:.82rem;color:var(--muted);margin:10px 0 0}
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 0}
.trust li{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.84rem;font-weight:600;line-height:1.35}
.trust .ic{color:var(--green);width:22px;height:22px}
.trust .flag{width:26px;height:17px;border-radius:2px;flex:none}

/* ---------- الصور داخل الأقسام ---------- */
figure{margin:0}
figcaption{font-size:.82rem;color:var(--muted);margin-top:8px;text-align:center}
.stories-h{display:flex;align-items:center;gap:10px;font-size:.92rem;margin-bottom:12px}
.stories-h .ring{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--orange),#e1306c,#833ab4,var(--orange));flex:none}
.stories-h .muted{font-size:.78rem}
.stories{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.stories img{flex:0 0 62%;max-width:250px;aspect-ratio:9/16;object-fit:cover;border-radius:18px;scroll-snap-align:center;box-shadow:var(--shadow-m);background:#222}
.pain-img{margin:0 0 18px}
.pain-img img{border-radius:var(--r-l);aspect-ratio:3/2;object-fit:cover;width:100%;box-shadow:var(--shadow-s)}
.ing{position:relative;margin:0 0 16px;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m)}
.ing img{aspect-ratio:3/2;object-fit:cover;width:100%}
.ing figcaption{position:absolute;inset:auto 0 0 0;padding:40px 18px 16px;margin:0;text-align:right;color:#fff;background:linear-gradient(to top,rgba(20,14,8,.78),transparent)}
.ing figcaption b{display:block;font-size:1.15rem}
.shelf{margin:16px 0 0}
.shelf img{border-radius:var(--r-l);aspect-ratio:4/5;object-fit:cover;object-position:center 60%;width:100%;box-shadow:var(--shadow-s)}
.hair-img{margin:0 0 16px}
.hair-img img{border-radius:var(--r-l);aspect-ratio:16/10;object-fit:cover;width:100%;box-shadow:var(--shadow-s)}
.usa-img{margin:18px 0}
.usa-img img{border-radius:var(--r-l);aspect-ratio:3/2;object-fit:cover;width:100%}
.usa-img figcaption{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:right;color:#C9D3B9;margin-top:10px}
.usa-img figcaption .usa{color:#fff}
.deliv{display:grid;grid-template-columns:1fr;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:14px;box-shadow:var(--shadow-s)}
.deliv img{border-radius:14px;aspect-ratio:1;object-fit:cover;width:100%}
.deliv h3{font-size:1.05rem;margin-bottom:6px}
.deliv p{font-size:.88rem;margin-bottom:10px}
.mini{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;font-weight:600}
.mini li{display:inline-flex;align-items:center;gap:5px}
.mini .ic{color:var(--green);width:18px;height:18px}
@media (min-width:600px){
  .deliv{grid-template-columns:200px 1fr;align-items:center}
  .stories img{flex-basis:32%}
}

/* ---------- المشكلة ---------- */
.pains{display:grid;gap:12px}
.pain{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;display:flex;gap:14px;align-items:flex-start}
.pain .ic{color:var(--orange);width:28px;height:28px;margin-top:3px}
.pain h3{font-size:1rem;margin-bottom:4px}
.pain p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- الروتين ---------- */
.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;position:relative;overflow:hidden}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:10px;left:14px;font-size:2.6rem;font-weight:700;color:var(--accent-soft);line-height:1}
.step img{width:96px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(42,33,24,.18))}
.step .k{font-size:.74rem;font-weight:600;color:var(--accent);margin-bottom:2px}
.step h3{font-size:1.02rem;margin-bottom:4px}
.step .sz{font-size:.78rem;color:var(--muted);font-weight:500}
.step p{margin:6px 0 0;font-size:.88rem;color:var(--muted)}
.step .how{margin-top:8px;font-size:.82rem;background:var(--accent-soft);border-radius:8px;padding:6px 10px;color:var(--ink)}
.step .how b{color:var(--accent)}
.honest{margin:18px 0 0;background:var(--orange-soft);border-inline-start:4px solid var(--orange);border-radius:10px;padding:12px 14px;font-size:.9rem}

/* ---------- الفيديوهات ---------- */
.ugc-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 14px;margin:0 -18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ugc-row::-webkit-scrollbar{display:none}
.ugc{flex:0 0 66%;max-width:250px;scroll-snap-align:center;position:relative;border-radius:var(--r-l);overflow:hidden;background:#111;aspect-ratio:9/16;box-shadow:var(--shadow-m)}
.ugc-row.one{justify-content:center}
.ugc-row.one .ugc{flex-basis:78%;max-width:300px}
.ugc video{width:100%;height:100%;object-fit:cover}
.ugc .snd{position:absolute;bottom:12px;right:12px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.ugc .snd .ic{width:20px;height:20px}
.ugc .cap{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px}
.ugc-hint{text-align:center;font-size:.8rem;color:var(--muted);margin:4px 0 0}

/* ---------- النتائج ---------- */
.benefits{display:grid;gap:10px}
.benefits li{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:600;font-size:.95rem}
.benefits .ic{color:var(--green);width:24px;height:24px}
.actives{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.actives li{background:var(--accent-soft);color:var(--ink);font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:99px;border:1px solid transparent}
.freefrom{display:flex;flex-wrap:wrap;gap:8px}
.freefrom li{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);font-size:.82rem;padding:6px 11px;border-radius:99px}
.freefrom .ic{color:var(--bad);width:16px;height:16px;stroke-width:2.4}
.sub-h{font-size:.98rem;margin:24px 0 10px;display:flex;align-items:center;gap:8px}
.sub-h .ic{color:var(--accent)}

/* ---------- أنواع الشعر ---------- */
.hair{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hair li{background:var(--paper);border:1px solid var(--line);padding:8px 16px;border-radius:99px;font-weight:600;font-size:.9rem}
.hair li.hi{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- ليش بالمرز ---------- */
.brand-img{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-m);margin:0 0 20px;aspect-ratio:3/2;background:#3a2a1e}
.brand-img img{width:100%;height:100%;object-fit:cover}
.brand-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.brand-stats li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 8px;text-align:center}
.brand-stats b{display:block;font-size:1.3rem;color:#fff;line-height:1.2}
.brand-stats span{font-size:.74rem;color:#C9D3B9}
.warn{background:rgba(255,102,0,.14);border:1px solid rgba(255,102,0,.4);border-radius:12px;padding:12px 14px;font-size:.88rem;display:flex;gap:10px;align-items:flex-start;color:#FFE4D0}
.warn .ic{color:var(--orange);width:24px;height:24px;flex:none;margin-top:2px}
.bg-green .usa{color:#fff}.bg-green .usa small{color:#C9D3B9}

/* ---------- التقييمات ---------- */
.rev-sum{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;margin-bottom:14px}
.rev-sum .big{font-size:2.6rem;font-weight:700;line-height:1;color:var(--green)}
.rev-sum .bars{flex:1;display:grid;gap:4px;font-size:.74rem}
.rev-sum .rrow{display:grid;grid-template-columns:22px 1fr 34px;align-items:center;gap:8px}
.rev-sum .rrow i{height:6px;border-radius:99px;background:var(--cream-deep);overflow:hidden;display:block}
.rev-sum .rrow i::after{content:"";display:block;height:100%;width:var(--w);background:var(--star)}
.reviews{display:grid;gap:12px}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.rev-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rev-h .av{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.rev-h b{display:block;font-size:.92rem;line-height:1.2}
.rev-h span{font-size:.74rem;color:var(--muted)}
.rev-h .ok{margin-inline-start:auto;font-size:.7rem;color:var(--ok);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.rev-h .ok .ic{width:14px;height:14px;stroke-width:2.6}
.rev p{margin:0;font-size:.9rem}
.rev .stars{margin:2px 0 6px}
.rev-more{margin-top:12px}

/* ---------- بطاقة العرض ---------- */
.offer{background:var(--paper);border:2px solid var(--green);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l)}
.offer-h{background:var(--green);color:#fff;padding:12px 18px;font-weight:700;display:flex;align-items:center;justify-content:space-between;font-size:.95rem}
.offer-h span{font-size:.76rem;font-weight:600;background:var(--orange);padding:3px 10px;border-radius:99px}
.offer-b{padding:18px}
.offer .pack{width:78%;margin:-6px auto 6px}
.inbox{display:grid;gap:8px;margin:0 0 14px}
.inbox li{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;font-weight:600;padding:9px 12px;background:var(--cream);border-radius:10px}
.inbox li span{font-size:.78rem;color:var(--muted);font-weight:500}
.inbox li .ic{color:var(--green);width:18px;height:18px;stroke-width:2.4;margin-inline-end:8px}
.compare{font-size:.86rem;color:var(--muted);background:var(--cream-deep);border-radius:10px;padding:10px 12px;margin:0 0 16px}
.compare b{color:var(--ink)}
.stock{margin:14px 0 6px}
.stock-row{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-bottom:6px}
.stock-row b{color:var(--orange-deep)}
.stock-bar{height:8px;border-radius:99px;background:var(--cream-deep);overflow:hidden}
.stock-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-deep));transition:width 1.2s ease}
.cd{display:flex;gap:8px;justify-content:center;margin:12px 0 16px}
.cd-unit{background:var(--ink);color:#fff;border-radius:10px;min-width:62px;padding:6px 8px;text-align:center}
.cd-unit b{display:block;font-size:1.3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cd-unit span{font-size:.66rem;opacity:.75}
.cd-lbl{text-align:center;font-size:.78rem;color:var(--muted);margin:0 0 6px}

/* ---------- الأسئلة ---------- */
.faq{display:grid;gap:8px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 16px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.95rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--green);transition:transform .2s;flex:none}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{margin:0 0 14px;font-size:.9rem;color:var(--muted)}

/* ---------- الختام والتذييل ---------- */
.final{padding:44px 0 36px;text-align:center}
.final h2{margin-bottom:8px}
.final p{color:var(--muted);margin-bottom:18px}
footer{background:var(--ink);color:#C9BFB2;padding:30px 0 24px;font-size:.78rem}
footer .logo{height:28px;margin:0 auto 14px}
footer .links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin:0 0 14px}
footer .links a{color:#EDE5D8;text-decoration:none;font-weight:600}
footer p{margin:0 0 6px;text-align:center}
footer .legal{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:.68rem;color:#8F857A;line-height:1.6}

/* ---------- الشريط اللاصق ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,253,248,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s}
.bar.show{transform:none}
.bar .wrap{display:flex;align-items:center;gap:12px;padding:0}
.bar img{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--cream)}
.bar .p{flex:1;min-width:0;line-height:1.25}
.bar .p b{display:block;font-size:1.05rem;color:var(--green)}
.bar .p span{font-size:.74rem;color:var(--muted)}
.bar .btn{width:auto;padding:12px 18px;font-size:.95rem;box-shadow:0 4px 0 var(--green-deep)}

/* ---------- إشعار الطلب ---------- */
.pop{position:fixed;left:14px;right:14px;bottom:calc(var(--bar-h) + 10px + env(safe-area-inset-bottom));z-index:45;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-l);transform:translateY(20px);opacity:0;pointer-events:none;transition:.3s}
.pop.show{transform:none;opacity:1}
.pop img{width:44px;height:44px;border-radius:9px;object-fit:cover}
.pop b{display:block;font-size:.86rem}
.pop span{font-size:.74rem;color:var(--muted)}
.pop-ok{color:var(--ok);font-weight:700}

/* ---------- النوافذ (السياسات) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(42,33,24,.55);z-index:80;display:none}
.modal-bg.show{display:block}
.modal{position:fixed;inset:auto 0 0 0;max-height:82vh;overflow:auto;background:var(--paper);border-radius:22px 22px 0 0;padding:20px 18px 30px;z-index:81;transform:translateY(100%);transition:.25s;font-size:.9rem}
.modal.show{transform:none}
.modal h3{margin-bottom:10px}
.modal .x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;background:var(--cream-deep);display:grid;place-items:center}

/* ==========================================================================
   صفحة الطلب
   ========================================================================== */
.co-steps{display:flex;justify-content:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--muted);margin:14px 0 20px}
.co-steps li{display:flex;align-items:center;gap:6px}
.co-steps li.on{color:var(--green)}
.co-steps li i{width:20px;height:20px;border-radius:50%;background:var(--cream-deep);display:grid;place-items:center;font-style:normal;font-size:.7rem}
.co-steps li.on i{background:var(--green);color:#fff}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;margin-bottom:14px}
.card h2{font-size:1.1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .ic{color:var(--green)}
.ci{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border:0}
.ci img{width:66px;height:66px;border-radius:12px;object-fit:cover;background:var(--cream)}
.ci-name{display:block;font-weight:700;font-size:.95rem}
.ci-var{display:block;font-size:.76rem;color:var(--muted);line-height:1.35}
.ci-price{font-size:.9rem;font-weight:700;color:var(--green);margin-top:3px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-inline-start:auto;flex:none}
.qty button{width:32px;height:32px;background:var(--cream);font-size:1.1rem;font-weight:700}
.qty span{min-width:28px;text-align:center;font-weight:700;font-size:.92rem}
.del{font-size:.74rem;color:var(--bad);background:none;padding:2px 4px;margin-top:2px}

/* الترقية */
.upsell{border:2px dashed var(--orange);background:var(--orange-soft)}
.upsell h2{color:var(--orange-deep)}
.upsell h2 .ic{color:var(--orange-deep)}
.upsell .lead{font-size:.88rem;margin:-4px 0 12px;color:var(--ink)}
.up{display:grid;grid-template-columns:72px 1fr;gap:10px 12px;align-items:start;background:var(--paper);border:1px solid #FFD3B8;border-radius:14px;padding:12px;margin-bottom:10px}
.up img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--cream);grid-row:span 2}
.up b{display:block;font-size:.95rem}
.up .why{display:block;font-size:.76rem;color:var(--muted);line-height:1.4;margin:1px 0 6px}
.up .pr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:1rem;font-weight:700;color:var(--green)}
.up .pr s{font-weight:500;color:var(--muted);font-size:.8rem}
.up .save{font-size:.7rem;background:var(--orange);color:#fff;border-radius:99px;padding:2px 9px;font-weight:700;white-space:nowrap}
.up button{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-weight:700;border-radius:10px;padding:10px 16px;font-size:.88rem;white-space:nowrap;box-shadow:0 3px 0 var(--green-deep)}
.up button.added{background:var(--ok);box-shadow:0 3px 0 #145a37}

.f{margin-bottom:14px}
.f label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.f label small{color:var(--muted);font-weight:500}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232A2118' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:36px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(47,74,30,.12)}
.f input.bad,.f select.bad{border-color:var(--bad)}
.f .err{display:none;color:var(--bad);font-size:.78rem;margin-top:5px}
.f .err.show{display:block}
.f input[dir=ltr]{text-align:right}
.trap{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.sum{display:grid;gap:8px;font-size:.92rem}
.sum div{display:flex;justify-content:space-between}
.sum .tot{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;font-size:1.1rem;font-weight:700}
.sum .tot span:last-child{color:var(--green)}
.sum .ok{color:var(--ok);font-weight:700}
.sum .dis{color:var(--orange-deep);font-weight:600}
.cod{display:flex;gap:10px;align-items:center;background:var(--accent-soft);border-radius:12px;padding:10px 12px;font-size:.84rem;margin:12px 0 0}
.cod .ic{color:var(--green);width:24px;height:24px;flex:none}
.form-err{display:none;background:#FDECEC;border:1px solid #F5B5B5;color:var(--bad);border-radius:12px;padding:12px 14px;font-size:.88rem;margin-bottom:14px}
.secure{text-align:center;font-size:.76rem;color:var(--muted);margin:12px 0 0;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.secure span{display:inline-flex;align-items:center;gap:4px}
.empty{text-align:center;padding:30px 10px}
.empty p{color:var(--muted)}

/* ==========================================================================
   صفحة الشكر
   ========================================================================== */
.th-hero{text-align:center;padding:36px 0 10px}
.th-hero .ok-ic{width:76px;height:76px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 10px 24px rgba(31,122,77,.3)}
.th-hero .ok-ic .ic{width:40px;height:40px;stroke-width:2.6}
.th-hero h1{font-size:1.6rem}
.th-hero .oid{display:inline-block;background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:6px 14px;font-weight:700;margin:8px 0 0;font-variant-numeric:tabular-nums}
.next{display:grid;gap:10px}
.next li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem}
.next li i{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;flex:none}
.next li>div>b{display:block}
.next li span{color:var(--muted);font-size:.84rem}
.kv{display:grid;gap:6px;font-size:.9rem}
.kv div{display:flex;justify-content:space-between;gap:12px}
.kv div span:first-child{color:var(--muted)}
.wa-btn{background:#25D366;box-shadow:0 6px 0 #1a9e4b}
.wa-btn:active{box-shadow:0 2px 0 #1a9e4b}

@media (min-width:600px){
  h1{font-size:2.2rem}
  .hero{padding-top:36px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .trust li{flex-direction:column;text-align:center;gap:6px;padding:12px 8px}
  .ugc{flex-basis:32%}
  .pains{grid-template-columns:1fr 1fr}
}