/* FATHIUM - custom styles (loaded after css/tailwind.css) */
:root{--brand:#DDBE6F;--deep:#2A5A3A;--surface:#224D31;--green:#093F30;--ink:#EAF1EC;--mute:#B9CBC0;--line:#4A7F5E;--gold:#B89A55;--leaf:#58B368}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'Droid Arabic Kufi','Noto Kufi Arabic',Tahoma,sans-serif;color:var(--ink);background:#fff;line-height:1.85;overflow-x:hidden}
img{max-width:100%;height:auto}
.latin{font-family:'Josefin Sans',Arial,sans-serif;letter-spacing:.12em}
.num{font-family:'Josefin Sans',sans-serif;font-weight:600}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ico{width:20px;height:20px;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;font-weight:700;background:var(--brand);color:#fff;border:1px solid var(--brand);transition:background .2s,border-color .2s}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5}
.btn .ico{transition:transform .2s}
.btn:hover .ico{transform:translateX(-4px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font-weight:700;background:#fff;color:var(--brand);border:1px solid var(--brand);transition:background .2s,color .2s}
.btn-ghost:hover{background:var(--brand);color:#fff}
.btn-white{background:#fff;color:var(--deep);border-color:#fff}
.btn-white:hover{background:var(--gold);color:var(--deep);border-color:var(--gold)}

/* Brand banner heading (from the client's own ad) */
.banner-wrap{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.banner{display:inline-flex;align-items:center;gap:14px;background:var(--deep);color:#fff;border:1.5px solid var(--gold);border-radius:999px;padding:10px clamp(24px,5vw,56px);font-weight:700;font-size:clamp(1.35rem,3.6vw,2.4rem);line-height:1.5}
.on-deep .banner{background:var(--deep)}
.lf{width:30px;height:30px;color:var(--gold);flex:none;transform:rotate(-35deg)}
.lf.flip{transform:scaleX(-1) rotate(-35deg)}
.sec-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.35;color:var(--deep)}

/* Check lists */
.chk{display:grid;gap:16px}
.chk li{display:flex;gap:14px;align-items:flex-start;line-height:1.7}
.chk .dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;margin-top:2px}
.chk .dot svg{width:18px;height:18px}
.chk.sm li{gap:10px;font-size:.92rem}
.chk.sm .dot{width:22px;height:22px;margin-top:3px}
.chk.sm .dot svg{width:14px;height:14px}
.dot.on-light{background:var(--brand)}
.b-brand .dot{background:#fff;color:var(--brand)}
.leaf-div{display:flex;align-items:center;gap:14px;margin:28px 0;color:var(--gold)}
.leaf-div span{flex:1;height:1px;background:var(--gold)}
.leaf-div svg{width:26px;height:26px}

/* Hero */
.hero-section{position:relative;background:#fff;color:var(--ink)}
.hero-title{font-size:clamp(2.5rem,8vw,5.5rem);font-weight:700;line-height:1.1;color:var(--deep)}
.hero-frame{position:relative;border:1.5px solid var(--gold);border-radius:32px;padding:36px 24px;display:flex;justify-content:center;background:#fff}
.hero-frame::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);border-radius:24px;pointer-events:none}
.hero-tag{position:absolute;background:var(--deep);color:#fff;border:1px solid var(--gold);border-radius:999px;padding:6px 16px;font-size:.8rem;font-weight:700;z-index:2}
.hero-tag.t1{top:20px;right:20px}
.hero-tag.t2{bottom:20px;left:20px}
.hero-section .opt .num{color:var(--brand)}
.facts{display:flex;margin-top:32px;border-top:1.5px solid var(--gold)}
.facts>div{flex:1 1 0;padding:16px 16px 0;border-inline-start:1px solid var(--line)}
.facts>div:first-child{border-inline-start:0;padding-inline-start:0}
.facts dd{font-weight:700;color:var(--deep);font-size:1.05rem;line-height:1.4}
.facts dt{font-size:.8rem;color:var(--mute);margin-top:4px;order:2}
.facts>div{display:flex;flex-direction:column}

/* Options */
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px 18px;cursor:pointer;transition:border-color .2s}
.opt:hover{border-color:var(--brand)}
.opt:has(input:checked){border:2px solid var(--brand);padding:15px 17px;background:#fff}
.opt input{accent-color:var(--brand);width:20px;height:20px;margin-top:2px;flex:none}

/* Bento (details) */
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.bento>*{border-radius:28px;padding:clamp(24px,3vw,36px)}
.b4{grid-column:span 4;grid-row:span 2}.b2{grid-column:span 2}.b3{grid-column:span 3}
.b-deep{background:var(--deep);color:#fff;border:1.5px solid var(--gold)}
.b-line{background:#fff;border:1px solid var(--line)}
.b-brand{background:var(--brand);color:#fff}
.b-line h3{font-weight:700;font-size:1.25rem;color:var(--deep);margin-bottom:6px}
.b-line p{color:var(--mute);font-size:.95rem}
@media(max-width:1023px){.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important;grid-row:auto!important}}

/* Usage panel (signature) */
.panel{background:var(--deep);color:#fff;border:1.5px solid var(--gold);border-radius:32px;padding:clamp(24px,4vw,44px)}
.panel-h{font-size:1.5rem;font-weight:700;margin-bottom:20px}
.panel .chk li{font-size:1.05rem}
.img-frame{border:1.5px solid var(--gold);border-radius:28px;overflow:hidden;background:#fff}
.img-frame img{display:block;width:100%}

/* Ingredients (filled by main.js) */
#ing{display:flex;flex-wrap:wrap;gap:10px}
#ing li{display:inline-flex;align-items:baseline;gap:10px;border:1px solid var(--gold);border-radius:999px;padding:8px 18px;font-size:.95rem;color:#fff;background:var(--deep);transition:background .2s,color .2s}
#ing li .num{font-size:.7rem;color:var(--gold)}
#ing li:hover{background:var(--gold);color:var(--deep)}
#ing li:hover .num{color:var(--deep)}

/* Why list */
.why-list{border:1.5px solid var(--gold);border-radius:28px;padding:8px clamp(20px,4vw,40px)}
.why-list>div{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)}
.why-list>div:last-child{border-bottom:0}
.why-list h3{font-weight:700;color:var(--deep);font-size:1.15rem}
.why-list p{color:var(--mute);font-size:.95rem;margin-top:2px}

/* Offers */
.offer-card{position:relative;border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;background:#fff;height:100%;transition:border-color .2s}
.offer-card:hover{border-color:var(--brand)}
.offer-card.featured{background:var(--deep);color:#fff;border:1.5px solid var(--gold)}
.offer-card.featured h3,.offer-card.featured .num{color:#fff}
.offer-card.featured .muted{color:rgba(255,255,255,.75)}

/* Sequence steps (how to order / form) */
.sdot{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;border:1px solid var(--gold);font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:.9rem;flex:none}
.how{display:grid;gap:24px}
@media(min-width:640px){.how{grid-template-columns:repeat(3,1fr);gap:0}.how>li{border-inline-start:1px solid var(--line);padding-inline:24px}.how>li:first-child{border-inline-start:0;padding-inline-start:0}}
.how>li p:first-of-type{font-weight:700;color:var(--deep);font-size:1.1rem;margin:12px 0 4px}

/* Form */
.field{width:100%;min-height:52px;border:1px solid #cdd6c9;border-radius:14px;padding:0 16px;background:#fff;font:inherit;transition:border-color .2s}
.field:focus{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:0}
.err{color:#b3261e;font-size:.85rem;min-height:1.3em}
.qty-btn{width:56px;height:56px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:1.5rem;transition:border-color .2s,color .2s}
.qty-btn:hover{border-color:var(--brand);color:var(--brand)}
.fs{border:1px solid var(--line);border-radius:28px;padding:24px}
.fs legend{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--deep);padding:0 8px}

/* FAQ */
summary{list-style:none;cursor:pointer;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;color:var(--deep)}
summary::-webkit-details-marker{display:none}
details[open] .pm{transform:rotate(45deg)}
details[open] summary{color:var(--brand)}
details p{padding-bottom:1.25rem}


/* Motion: one hero sequence, one checklist cascade, user-triggered feedback */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.js .hseq{opacity:0}
.js .hseq.in{opacity:1;animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
.js .cascade li{opacity:0}
.js .cascade.in li{opacity:1;animation:slide .5s ease backwards;animation-delay:calc(var(--i,0)*.08s)}

@media(max-width:640px){
 .hero-frame{padding:28px 12px}
 .hero-section .btn,.hero-section .btn-ghost{width:100%}
 .offer-card{padding:28px}
 .hero-tag{font-size:.7rem;padding:4px 12px}
 .facts>div{padding:14px 10px 0}
 .facts dd{font-size:.9rem}
 .facts dt{font-size:.72rem}
 .fs{padding:20px}
 .banner{gap:8px}.lf{width:22px;height:22px}
 dd,dt{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .hseq,.js .cascade li{opacity:1}
}

/* Mobile ordering */
@media(max-width:1023px){
 .hero-col{display:flex;flex-direction:column}
 .hero-cta{order:1;margin-top:24px}
 .hero-offers{order:2;margin-top:24px;width:100%}
 .hero-facts{order:3}
 .usage-panel{order:-1}
}

/* ===== Dark theme (from client's live design) ===== */
html{color-scheme:dark}
body{background:var(--deep);color:#fff}
.btn{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.btn:hover{background:#EBD08C;border-color:#EBD08C}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--gold)}
.btn-ghost:hover{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.banner{background:var(--surface);color:#fff}
.sec-title,.hero-title{color:#fff}
.hero-section{background:var(--deep);color:#fff}
.hero-frame{background:#fff}
.hero-frame::before{border-color:#E2E8DF}
.hero-tag{background:var(--surface);color:#fff}
.hero-section .opt .num{color:var(--brand)}
.facts dd{color:#fff}
.opt{background:var(--surface);border-color:var(--line)}
.opt:has(input:checked){background:var(--surface);border-color:var(--brand)}
.opt input{accent-color:var(--brand)}
.b-deep{background:var(--surface)}
.b-line{background:transparent;border-color:var(--line)}
.b-line h3{color:#fff}
.b-brand{background:var(--green)}
.b-brand .dot{background:#fff;color:var(--green)}
.dot.on-light{background:var(--leaf)}
.panel{background:var(--surface)}
.img-frame{background:#fff}
#ing li{background:var(--surface)}
#ing li .num{color:var(--brand)}
#ing li:hover{background:var(--brand);color:var(--surface)}
#ing li:hover .num{color:var(--surface)}
.why-list h3{color:#fff}
.offer-card{background:transparent}
.offer-card.featured{background:var(--surface);border:2px solid var(--brand)}
.offer-card.featured .num{color:var(--brand)}
.sdot{background:var(--surface)}
.how>li p:first-of-type{color:#fff}
.field{background:var(--surface);border-color:var(--line);color:#fff}
.field::placeholder{color:#7F9A8B}
.field:focus{border-color:var(--brand);outline-color:var(--brand)}
.err{color:#FF9A92}
.qty-btn{background:var(--surface);border-color:var(--line);color:#fff}
.qty-btn:hover{border-color:var(--brand);color:var(--brand)}
.fs legend{color:#fff}
summary{color:#fff}
details[open] summary{color:var(--brand)}
@media(max-width:1023px){.hero-note{order:1}}

/* ===== Order design from client's reference + outlined buttons ===== */
:root{--btn:#093F30}
.btn{background:var(--btn);color:#fff;border:0;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn:hover{background:#06352A}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:0}
.btn-ghost:hover{background:var(--btn);color:#fff}
.btn-lg{min-height:66px;font-size:1.1rem;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.btn-lg .ico{width:26px;height:26px;color:var(--brand)}
.rule{display:flex;align-items:center;gap:16px;margin:40px 0 28px;color:#fff;font-weight:700;font-size:1.2rem}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--gold)}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;border-radius:24px;padding:30px 12px 24px;min-height:230px;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick.single{background:#fff;color:var(--deep);border:2px solid #093F30;box-shadow:0 0 0 5px #fff}
.pick.bundle{background:#D4B467;color:var(--surface);border:2px solid #9C7E2E;box-shadow:0 0 0 4px var(--gold)}
.pick-leaf{width:44px;height:44px;color:#093F30}
.pick-title{font-size:1.15rem;font-weight:700;line-height:1.4}
.pick-title .latin{letter-spacing:.04em}
.pick-price{font-size:clamp(2rem,9vw,2.9rem);line-height:1.1;font-weight:700}
.pick-price small{font-size:.9rem}
.pick-note{font-size:.8rem;opacity:.85}
.pick-save{margin-top:6px;background:var(--surface);color:var(--brand);border-radius:999px;padding:4px 14px;font-size:.82rem;font-weight:700}
.seal{position:absolute;top:-14px;right:14px;background:var(--surface);color:var(--brand);border:1.5px solid var(--brand);border-radius:999px;padding:3px 14px;font-weight:700;font-size:.78rem}
.tick{position:absolute;top:12px;left:12px;width:28px;height:28px;border-radius:50%;background:var(--surface);color:#fff;display:none;place-items:center}
.tick .ico{width:16px;height:16px}
.pick:has(input:checked){outline:3px solid var(--brand);outline-offset:9px}
.pick:has(input:checked) .tick{display:grid}
.pick:has(input:focus-visible){outline:3px solid #fff;outline-offset:9px}
.pill{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 24px;border-radius:999px;background:var(--surface);border:0;box-shadow:none}
.pill .ico{width:26px;height:26px;color:var(--brand);flex:none}
.pill:focus-within{box-shadow:0 0 0 2px #fff}
.pill-in{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;padding:0}
.pill-in::placeholder{color:#C9D8CE}
.pill.area{align-items:flex-start;padding:16px 24px;border-radius:28px}
.pill.area .ico{margin-top:2px}
.pill.area textarea{resize:none}
.pill .qty-btn{width:42px;height:42px;border-radius:50%;font-size:1.3rem;background:var(--deep);border-color:transparent}
.err{padding:4px 24px 0}
.trust{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.trust li{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--gold);border-radius:999px;font-size:.85rem;color:#fff}
.trust .ico{width:22px;height:22px;color:var(--brand)}
@media(max-width:640px){
 .pick{padding:28px 8px 20px;min-height:210px}
 .pick-leaf{width:36px;height:36px}
 .pill{padding:0 18px;gap:10px}
 .btn-lg{font-size:1rem;padding:0 16px}
 .trust li{font-size:.78rem;padding:8px 14px}
}

/* ===== Shop-style order block ===== */
.total-line{text-align:center;font-size:1.35rem;font-weight:700;color:#fff;margin:32px 0 16px}
.total-line b{color:var(--brand);font-size:1.6rem}
.pay{text-align:center;margin-top:22px}
.pay-main{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:1.15rem;color:#fff}
.pay-sub{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;color:var(--mute);margin-top:2px}
.pay .ico{width:24px;height:24px;color:var(--brand)}
.pay-sub .ico{width:20px;height:20px}
.trust-box{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:28px;padding:22px;border:1.5px solid var(--gold);border-radius:24px;list-style:none}
.trust-box li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:#fff;font-size:.95rem;line-height:1.6}
.trust-box .ico{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px}
.reasons{display:grid;gap:4px}
.reasons li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;font-size:1.05rem;line-height:1.75;color:#fff}
.reasons .ico{width:26px;height:26px;color:var(--brand);flex:none;margin-top:3px}
.wa{position:fixed;right:16px;bottom:96px;z-index:45;width:58px;height:58px;border-radius:50%;background:var(--btn);border:0;display:grid;place-items:center;color:var(--brand)}
.wa[hidden]{display:none}
.wa .ico{width:30px;height:30px}
@media(min-width:768px){.wa{bottom:24px}}
@media(max-width:380px){.trust-box{grid-template-columns:1fr}}

/* ===== Light theme (white page, green accents, from client's reference) ===== */
:root{--g:#093F30;--gd:#062E24;--mint:#fff;--ink2:#1b2a20;--soft:#4a5d50;--ln:#d3e3d8}
html{color-scheme:light}
body{background:#fff!important;color:var(--ink2)!important}
.bg-deep{background:#fff!important}
.bg-surface{background:var(--mint)!important}
.text-white,.text-ink{color:var(--ink2)!important}
.text-mute,.text-white\/80,.text-white\/70,.text-white\/60,.text-white\/50{color:var(--soft)!important}
.text-brand,.text-gold{color:var(--g)!important}
.border-line,.border-gold,.border-brand,.border-white\/20{border-color:var(--ln)!important}
.divide-line>*{border-color:var(--ln)!important}
.hover\:text-brand:hover{color:var(--g)!important}
header.sticky{background:#fff!important;border-bottom:1px solid var(--ln)!important}
#bar{background:#fff!important;border-top:1px solid var(--ln)!important;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
#bar .text-white{color:var(--ink2)!important}
/* buttons: green, no gold border */
.btn{background:var(--g)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px rgba(9,63,48,.28)}
.btn:hover{background:#06352A!important}
.btn-ghost{background:#fff!important;color:var(--g)!important;border:0!important;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.btn-ghost:hover{background:var(--mint)!important;color:var(--g)!important}
.btn-lg{box-shadow:0 8px 20px rgba(9,63,48,.3)!important}
.btn-lg .ico,.btn .ico{color:#fff}
/* hero (like the reference image) */
.hero-section{background:#fff!important;color:var(--ink2)}
.offer-banner{display:block;background:#b30b0b;color:#fff;font-weight:700;font-size:clamp(1.5rem,6vw,2.4rem);line-height:1.5;border-radius:16px;padding:8px 16px;box-shadow:0 4px 14px rgba(179,11,11,.25)}
.sub-pill{display:inline-block;margin-top:14px;background:var(--gd);color:#fff;font-weight:700;font-size:clamp(.9rem,3.6vw,1.15rem);border-radius:999px;padding:6px 22px}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:6px;align-items:center;margin-top:18px}
.hero-img{width:100%;max-height:420px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.hero-checks{display:grid;gap:clamp(28px,9vw,64px);text-align:start}
.hero-checks li{display:flex;gap:6px;align-items:center;font-weight:600;font-size:clamp(.74rem,2.9vw,1rem);line-height:1.5;color:var(--ink2)}
.hc{flex:none;width:clamp(22px,6vw,30px);height:clamp(22px,6vw,30px);border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center}
.hc svg{width:62%;height:62%}
.hero-cta-btn{width:100%;max-width:520px;min-height:60px;margin-top:22px;font-size:1.15rem;border-radius:16px!important}
.band3{background:var(--mint);padding:22px 12px;margin-top:6px}
.band3>div>div{text-align:center;padding:0 6px;border-inline-start:1px solid var(--ln)}
.band3>div>div:first-child{border-inline-start:0}
.band3 .bi{width:52px;height:52px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;margin:0 auto 6px}
.band3 .bi svg{width:28px;height:28px}
.band3 b{display:block;font-size:clamp(.85rem,3.4vw,1.15rem);color:var(--ink2)}
.band3 small{display:block;font-size:.78rem;color:var(--soft);line-height:1.5}
/* headings / panels */
.banner{background:var(--g)!important;color:#fff!important;border:0!important}
.lf{color:#cfe8d6!important}
.sec-title{color:var(--gd)!important}
.leaf-div{color:var(--g)!important}.leaf-div span{background:var(--ln)!important}
.panel{background:#fff!important;color:var(--ink2)!important;border:0!important;box-shadow:0 8px 28px rgba(9,63,48,.12)}
.panel .panel-h,.panel h3{color:var(--gd)!important}
.img-frame{border:0!important;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.reasons li{color:var(--ink2)!important}
.reasons .ico{color:var(--g)}
#ing li{background:var(--mint)!important;color:var(--ink2)!important;border:0!important}
#ing li:hover{background:var(--g)!important;color:#fff!important}
#ing li .num{color:var(--g)!important}
#ing li:hover .num{color:#fff!important}
summary{color:var(--gd)!important}
details[open] summary{color:var(--g)!important}
.sdot{background:var(--g)!important;border:0!important;color:#fff!important}
.how>li p:first-of-type{color:var(--ink2)!important}
/* order */
#order{background:var(--mint)!important}
.order-card{background:#fff;border-radius:28px;padding:clamp(18px,4vw,36px);box-shadow:0 10px 30px rgba(9,63,48,.12)}
.pick.single{background:#fff!important;color:var(--gd)!important;border:2px solid var(--ln)!important;box-shadow:none!important}
.pick.bundle{background:var(--g)!important;color:#fff!important;border:2px solid var(--g)!important;box-shadow:none!important}
.pick.bundle .pick-leaf,.pick.bundle *{color:inherit}
.pick-leaf{color:var(--g)!important}
.pick:has(input:checked){outline:3px solid var(--g)!important;outline-offset:4px!important}
.pick-save{background:#fff!important;color:var(--g)!important}
.seal{background:#b30b0b!important;color:#fff!important;border:0!important}
.tick{background:var(--g)!important}
.pick.single .tick{background:var(--g)!important}
.rule{color:var(--gd)!important}.rule::before,.rule::after{background:var(--ln)!important}
.pill{background:#f5f5f5!important;border:0!important;box-shadow:none!important;color:var(--ink2)}
.pill .ico{color:var(--g)!important}
.pill:focus-within{box-shadow:0 0 0 2px var(--g)!important}
.pill-in{color:var(--ink2)!important}.pill-in::placeholder{color:#8a968e!important}
.pill .qty-btn,.qty-btn{background:#fff!important;color:var(--g)!important;border:1px solid var(--ln)!important}
.err{color:#b3261e!important}
.total-line,.pay-main{color:var(--ink2)!important}
.pay-sub{color:var(--soft)!important}
.trust-box{border:0!important;background:var(--mint)}
.trust-box li{color:var(--ink2)!important}
.trust-box .ico,.trust .ico,.pay .ico{color:var(--g)!important}
#ok{background:var(--mint)!important;border-color:var(--g)!important;color:var(--ink2)}
/* final CTA + footer (green like reference) */
.wa{background:var(--g)!important;border:0!important;color:#fff!important}
.wa .ico{color:#fff}
.hero-section .hero-cta-btn .ico{color:#fff}

/* no light-green backgrounds: white only, thin lines for separation */
.band3{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
#ing li{border:1px solid var(--ln)!important}
.trust-box{border:1px solid var(--ln)!important}
#ok{border:1px solid var(--g)!important}
.order-card{box-shadow:0 6px 24px rgba(0,0,0,.08);border:1px solid var(--ln)}
#order,.bg-surface{border-top:1px solid var(--ln)}
.btn-ghost:hover{background:#f5f5f5!important}

/* gold as a light secondary accent (never on buttons or fields) */
:root{--au:#B89A55;--au2:rgba(184,154,85,.45)}
.lf{color:#E6CD8A!important}
.leaf-div{color:var(--au)!important}.leaf-div span{background:var(--au2)!important}
.rule{color:var(--gd)!important}.rule::before,.rule::after{background:var(--au2)!important}
header.sticky{border-bottom:1px solid var(--au2)!important}
.band3{border-top:1px solid var(--au2)!important;border-bottom:1px solid var(--au2)!important}
.band3>div>div{border-inline-start-color:var(--au2)!important}
.sub-pill{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--au)}
.offer-banner{border-bottom:3px solid var(--au)}
#ing li{border-color:var(--au2)!important}
#ing li .num{color:var(--au)!important}
#ing li:hover .num{color:#fff!important}
.img-frame,.rounded-3xl.border{border:1px solid var(--au2)!important}
.panel{border-top:3px solid var(--au)!important}
.order-card{border:1px solid var(--au2)!important}
.trust-box{border:1px solid var(--au2)!important}
.sdot{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--au)}
.pick-save{color:var(--au)!important;font-weight:700}
.pick.bundle .pick-save{color:#8a6d2b!important}
#order,.bg-surface{border-top:1px solid var(--au2)!important}
.how>li{border-inline-start-color:var(--au2)!important}
.text-gold{color:var(--au)!important}


/* ===== Phone responsiveness ===== */
html,body{max-width:100%;overflow-x:hidden}
.hero-grid>*,.band3 *,.pick,.pill{min-width:0}
.pill-in,.field,select,textarea,input{font-size:16px}
@media(max-width:767px){
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 section .py-14,.py-14{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
 header .h-16{height:3.5rem}
 header .latin{font-size:1rem}
 header .btn{padding:0 16px!important;font-size:.9rem}
 .offer-banner{font-size:clamp(1.2rem,5.6vw,1.6rem);padding:8px 10px;border-radius:14px}
 .sub-pill{font-size:.9rem;padding:5px 16px;max-width:100%}
 .hero-grid{grid-template-columns:1fr 1.05fr 1fr;gap:4px;margin-top:14px}
 .hero-checks{gap:22px}
 .hero-checks li{font-size:.72rem;gap:5px;line-height:1.45}
 .hero-img{max-height:300px}
 .hero-cta-btn{font-size:clamp(1rem,4.5vw,1.15rem);padding:0 14px;min-height:56px}
 .band3{padding:16px 6px}
 .band3 .bi{width:44px;height:44px}.band3 .bi svg{width:24px;height:24px}
 .band3 b{font-size:.82rem;line-height:1.4}.band3 small{font-size:.7rem}
 .banner{display:flex;justify-content:center;text-align:center;font-size:clamp(1.05rem,5vw,1.4rem)!important;padding:8px 16px!important;border-radius:28px!important;gap:6px;line-height:1.45}
 .banner-wrap{margin-bottom:24px}
 .lf{width:20px!important;height:20px!important}
 .order-card{padding:16px;border-radius:22px}
 #order .grid.grid-cols-2{gap:12px}
 .pick{min-height:200px;padding:26px 8px 18px;border-radius:20px}
 .pick-title{font-size:1rem}
 .pick-note{font-size:.72rem}
 .seal{font-size:.7rem;padding:2px 10px;right:8px}
 .pill{min-height:56px;padding:0 16px;gap:10px}
 .pill .ico{width:22px;height:22px}
 .pill .qty-btn{width:44px;height:44px}
 .pill.area{padding:12px 16px}
 .err{padding:4px 12px 0;font-size:.8rem}
 .total-line{font-size:1.15rem;margin:22px 0 12px}
 .btn-lg{min-height:60px;font-size:1rem;padding:0 14px}
 .trust-box{grid-template-columns:1fr;padding:16px;gap:10px}
 .panel{padding:20px}
 #ing li{font-size:.85rem;padding:6px 12px}
 .how>li{padding-block:12px}
 #details .grid-cols-12 img{max-height:340px}
 .sec-title{font-size:1.5rem}
 details summary{min-height:56px;font-size:.95rem}
 .wa{width:52px;height:52px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 section:last-of-type .btn,section:last-of-type .btn-ghost{width:100%}
}
@media(max-width:360px){
 .hero-checks li{font-size:.66rem}
 .hc{width:20px;height:20px}
 .hero-img{max-height:250px}
 .offer-banner{font-size:1.1rem}
 .band3 b{font-size:.74rem}
}

/* usage images: stacked and full width on phone */
@media(max-width:639px){
 .usage-imgs{grid-template-columns:1fr!important;gap:20px}
 .usage-imgs .img-frame{border-radius:20px}
 .usage-imgs img{width:100%;height:auto;display:block}
 #usage .max-w-6xl{padding-left:12px;padding-right:12px}
}

/* ===== Scroll reveal + motion (only when motion is allowed: html.js) ===== */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js .rv.rv-zoom{transform:scale(.9)}
.js .rv.rv-l{transform:translateX(-36px)}
.js .rv.rv-r{transform:translateX(36px)}
.js .rv.in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
.js .hero-img{animation:floaty 5s ease-in-out 1.2s infinite}
.hero-cta-btn{position:relative}
.js .hero-cta-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(9,63,48,.55);pointer-events:none;opacity:0;animation:ring 2.2s ease-out 1.5s infinite}
.js .hero-checks .hc{animation:pop .5s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(.6s + var(--k,0)*.12s)}
.js .offer-banner{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.js .pick:hover{transform:translateY(-4px);transition:transform .25s}
.js .img-frame img{transition:transform .6s ease}
.js .img-frame:hover img{transform:scale(1.04)}
.js .img-frame{overflow:hidden}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

.em{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.17em;margin-inline-end:.4em;flex:none}
.offer-banner .em{width:1.05em;height:1.05em;margin:0;color:#ffd24a}
.sub-pill .em,.seal .em,.pick-save .em{width:1em;height:1em;vertical-align:-.15em}
.sub-pill .em{color:#cfe8d6}
.seal .em{color:#ffd24a}
.order-card,#order h2 .em{color:inherit}
#order h2 .em,.sec-title .em,h2 .em,h3 .em{color:var(--au)}
.pick-note .em{width:1em;height:1em;color:inherit}
.pick-was{opacity:.85;font-size:1rem;line-height:1;margin-top:2px}

.text-white\/85,.text-white\/90,.text-white\/75{color:var(--soft)!important}
#s-total{color:var(--g)!important}
.pick-price,.pick-was,#b-price{direction:ltr;unicode-bidi:isolate}
#b-price{text-align:right}
#order h2{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.2em}

/* real WhatsApp button, bottom right */
.wa{position:fixed!important;right:16px!important;left:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;z-index:50;width:58px!important;height:58px!important;border-radius:50%;background:#25D366!important;border:0!important;display:grid!important;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.wa svg{width:32px;height:32px}
@media(min-width:768px){.wa{bottom:24px!important}}
.js .wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);pointer-events:none;opacity:0;animation:ring 2.4s ease-out 2s infinite}

.lf,.lf.flip{transform:none!important;width:30px;height:30px}
@media(max-width:767px){.lf,.lf.flip{width:24px!important;height:24px!important}}

/* ===== Hero intro: صورة المنتج كتكبر، كتبقى شوية، وكترجع لبلاصتها ===== */
.hero-grid{position:relative;z-index:4}
.hero-img{position:relative;z-index:3;--zoom:1.55;transform-origin:center center}
@media(min-width:768px){.hero-img{--zoom:1.35}}
@keyframes heroZoom{
 0%,55%{transform:scale(var(--zoom))}
 100%{transform:scale(1)}
}
@keyframes heroDim{0%,55%{opacity:.12}100%{opacity:1}}
.js .hero-img{animation:heroZoom 2.8s cubic-bezier(.65,0,.25,1) .3s backwards,floaty 5s ease-in-out 3.3s infinite}
.js .hero-checks{animation:heroDim 2.8s ease .3s backwards}

/* ===== Watermark: شعار FATHIUM فخلفية الأقسام (ثابت، بلا JS) ===== */
main>section{position:relative;isolation:isolate}
main>section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../images/watermark.webp) no-repeat;background-size:min(440px,72vw)}
main>section:first-of-type::before{background-position:calc(100% + 70px) 90px}
#details::before{background-position:-80px 50%}
#usage::before{background-position:50% 50%}
#ingredients::before{background-position:calc(100% + 80px) 50%}
#order::before{background-position:-70px 14%}
#how::before{background-position:calc(100% + 70px) 25%}
main>section:last-of-type::before{background-position:50% 50%}
@media(max-width:767px){main>section::before{background-size:min(300px,78vw)}}

/* ===== UX polish (v2) ===== */
/* زر واتساب: يبقى مخفي حتى يتعمر الرقم (display:grid!important كان كيغلب hidden) */
.wa[hidden]{display:none!important}

/* ما نبقاوش نعتمدو على hover فالموبايل */
@media(hover:none){
 .js .pick:hover,.js .img-frame:hover img{transform:none}
}
.js .pick{transition:transform .25s,outline-color .2s}
.pick:active{transform:scale(.98)}
a,button,label.pick{-webkit-tap-highlight-color:transparent}

/* حقول الفورم: حالات واضحة (focus / خطأ) */
.pill{transition:box-shadow .2s,background .2s}
.pill:focus-within{background:#fff!important;box-shadow:0 0 0 2px var(--g),0 4px 14px rgba(9,63,48,.15)!important}
.pill.invalid{background:#fff5f4!important;box-shadow:0 0 0 2px #d9534f!important}
.pill.invalid .ico{color:#b3261e!important}
.err{min-height:0;font-size:.85rem;line-height:1.5}
.err:not(:empty){padding-top:6px}
.err:not(:empty)::before{content:"⚠ ";font-size:.85em}

/* أزرار الكمية: مساحة لمس مناسبة + حالة disabled */
.qty-btn{min-width:44px;min-height:44px;display:grid;place-items:center;line-height:1}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-btn:not(:disabled):active{background:var(--mint)!important}
#ql{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

/* زر الإرسال */
.btn-lg{text-align:center;line-height:1.4;padding-block:10px}
.btn:focus-visible,.btn-ghost:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--g)}

/* مجموع الطلب أوضح */
.total-line{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 12px;border-radius:18px;background:#f5f5f5}

/* رسالة التأكيد */
#ok{line-height:1.8}

/* بعد حذف الفوتر: آخر قسم كيشد الصفحة مزيان */
main>section:last-of-type{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
@media(min-width:768px){main>section:last-of-type .flex{gap:1rem}}

/* الشريط السفلي فالموبايل */
#bar{box-shadow:0 -6px 20px rgba(0,0,0,.08)}
#bar .btn{min-height:48px}

/* شاشات كبيرة: عرض مريح للقراءة */
@media(min-width:1024px){
 .order-card{padding:40px}
 .hero-img{max-height:480px}
}

/* شاشات صغيرة بزاف (320px) */
@media(max-width:360px){
 .pick-price{font-size:1.8rem}
 .pick-title{font-size:.92rem}
 .pick-note{font-size:.68rem}
 .pill{padding:0 12px;gap:8px}
 .qty-btn{min-width:40px;min-height:40px}
 .pill .qty-btn{width:40px;height:40px}
 #bar{gap:8px;padding-inline:10px}
 #b-price{font-size:1rem}
 .total-line{font-size:1rem}
}

/* لاندسكيب فالموبايل: بلا ارتفاعات كبيرة */
@media(max-height:480px) and (orientation:landscape){
 .hero-img{max-height:220px}
 .wa{bottom:72px!important}
}

/* ===== Reviews (WhatsApp screenshots) ===== */
.reviews-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.review{flex:0 0 76%;max-width:320px;scroll-snap-align:center;margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid var(--au2)}
.review[hidden]{display:none}
.review-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.review img{width:100%;height:auto;display:block}
@media(min-width:768px){
 .reviews-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;padding:0}
 .review{max-width:none;flex:none}
}
.lb{border:0;padding:0;background:transparent;max-width:min(92vw,460px);max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(0,0,0,.8)}
.lb img{display:block;max-width:100%;max-height:88vh;margin:auto;border-radius:16px}
.lb-x{position:absolute;top:-14px;left:-6px;width:40px;height:40px;border-radius:50%;background:#fff;color:#1b2a20;font-size:1.6rem;line-height:1;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:2}

/* model.jpg: صورة عريضة تحت صور "علاش تختار" */
.model-img{display:block;width:100%;max-width:460px;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center;margin-inline:auto}

/* صور كاملة بلا قص ولا ارتفاع محدد */
.details-img,#details .grid-cols-12 img,#ingredients img{height:auto!important;max-height:none!important;object-fit:contain!important}
#details .grid-cols-12{align-items:start}

/* وضع الهاتف: كل صورة فسطر بوحدها وبمقاسها الطبيعي */
@media(max-width:767px){
 #details .grid-cols-12{display:flex;flex-direction:column;gap:16px}
 #details .grid-cols-12>img{width:100%;height:auto!important;max-height:none!important;object-fit:contain!important}
}


/* آراء الزبناء فالهاتف: سكرول جانبي (سلايدر) */
@media(max-width:767px){
 .reviews-track{scroll-padding-inline:16px;overscroll-behavior-x:contain}
 .review{flex:0 0 78%}
}

/* المكونات: لون الـ hover (أخضر + نص أبيض) كيبان مباشرة */
#ing li{background:var(--g)!important;color:#fff!important;border-color:var(--g)!important}
#ing li .num{color:#E6CD8A!important}
#ing li:hover{background:var(--gd)!important;color:#fff!important}
#ing li:hover .num{color:#E6CD8A!important}

/* ===== Performance ===== */
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.12,1.35);opacity:0}}
.wa::after{will-change:transform,opacity}
/* ما كنحتاجوش infinite animations فاش الصفحة مخبية/الحركة مقللة */
@media(prefers-reduced-motion:reduce){.js .hero-cta-btn::after,.js .wa::after{animation:none}}

/* ===== Confirmation modal ===== */
.cm{border:0;padding:0;background:transparent;width:min(92vw,440px);max-height:92vh;overflow:visible;color:var(--ink2)}
.cm::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.cm[open]{animation:cmIn .3s cubic-bezier(.2,.8,.2,1)}
.cm[open]::backdrop{animation:cmFade .3s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
.cm-box{background:#fff;border-radius:28px;padding:28px 22px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35);border-top:4px solid var(--au);max-height:88vh;overflow:auto}
.cm-ic{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 14px;border-radius:50%;background:var(--g);color:#fff;box-shadow:0 8px 20px rgba(9,63,48,.3)}
.cm-ic .ico{width:34px;height:34px;color:#fff}
.cm-ic.ok{animation:pop .5s cubic-bezier(.3,1.5,.5,1) .1s backwards}
.cm-ic.err{background:#b3261e;font-size:2rem;font-weight:700}
.cm-box h3{font-size:1.35rem;font-weight:700;color:var(--gd);line-height:1.5}
.cm-box p{color:var(--soft);font-size:.92rem;line-height:1.8;margin-top:6px}
.cm-list{margin:18px 0;border:1px solid var(--au2);border-radius:18px;padding:4px 16px;text-align:start}
.cm-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ln);font-size:.9rem}
.cm-list>div:last-child{border-bottom:0}
.cm-list dt{color:var(--soft);flex:none}
.cm-list dd{font-weight:700;color:var(--ink2);text-align:end;overflow-wrap:anywhere}
.cm-list>div:last-child dd{color:var(--g)}
@media(prefers-reduced-motion:reduce){.cm[open],.cm[open]::backdrop,.cm-ic.ok{animation:none}}

.cm-dbg{margin-top:10px;font-size:.72rem;color:#8a968e;direction:ltr;overflow-wrap:anywhere}