/* Layout: COD storefront, black bands for brand moments, light bands for shopping; one wrapper width */
:root{
  --ink:#0E0E0C; --ink-2:#16160F; --line-dark:#2E2C25;
  --paper:#FFFFFF; --paper-2:#F4F3EF; --line:#E4E2DB;
  --text:#141412; --muted:#5A5850; --muted-dark:#C9C6BD;
  --gold:#C9A24A; --gold-text:#8A6A1E; --gold-soft:#FBF6EA;
  --ok:#2F6B3F;
  --display:"Cinzel",Georgia,serif; --body:"Inter",system-ui,-apple-system,sans-serif; --ar:"Tajawal","Noto Sans Arabic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ar{font-family:var(--ar)}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.dark .eyebrow{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:700 15px var(--body);border:0;cursor:pointer;text-decoration:none}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid #5A5850}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn:hover{filter:brightness(1.08)}

.promo{background:var(--gold);color:var(--ink);font-size:13px;font-weight:600;text-align:center;padding-block:9px}
header{background:var(--ink);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;cursor:pointer;padding:0}
.logo b{font:700 24px var(--display);letter-spacing:.18em}
.links{display:flex;gap:20px;font-size:14px;font-weight:500}
.links button{background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:8px 0}
.links button:hover{color:var(--gold)}

.dark{background:var(--ink);color:#fff}
.hero{padding-block:64px 80px}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero h1{font:700 clamp(40px,6vw,68px)/1.05 var(--display)}
.hero .ar-line{font-size:26px;color:#E2C27A}
.hero p{margin:0;color:var(--muted-dark);font-size:18px;max-width:34em}
.hero-row{display:flex;flex-wrap:wrap;gap:12px}
.stage{flex:1 1 360px;min-width:0;min-height:380px;border-radius:24px;background:radial-gradient(circle at 50% 62%,#2A2416 0%,var(--ink) 66%);display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:40px 12px}

/* bottle mockup */
.bottle{display:flex;flex-direction:column;align-items:center;--s:1}
.bottle .cap{width:calc(78px*var(--s));height:calc(26px*var(--s));background:#1E1E1B;border:1px solid #3A3830;border-radius:6px 6px 2px 2px}
.bottle .body{width:calc(120px*var(--s));height:calc(168px*var(--s));background:var(--ink-2);border:1px solid #3A3830;border-radius:calc(16px*var(--s));display:flex;align-items:center;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.bottle .label{width:100%;background:var(--tint);padding:calc(12px*var(--s)) 0;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink)}
.bottle .label b{font:700 calc(17px*var(--s)) var(--display);letter-spacing:.16em}
.bottle .label span{font-size:calc(9.5px*var(--s));font-weight:700;letter-spacing:.12em}

.trust{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:24px}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.t{display:flex;gap:12px;align-items:center}
.t i{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.t strong{display:block;font-size:15px}.t small{color:var(--muted);font-size:13px}

section.block{padding-block:72px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
.head h2{font:700 38px var(--display)}
.head p{margin:0;max-width:26em;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.card .pic{background:var(--ink);height:240px;display:grid;place-items:center;position:relative}
.tag{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px}
.card .in{padding:20px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card h3{font-size:19px}
.card p{margin:0;color:var(--muted);font-size:14px;flex-grow:1}
.card .bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.price{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.value{border:1px solid var(--line-dark);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:10px}
.value h3{font-size:20px}.value p{margin:0;color:var(--muted-dark)}

details{border:1px solid var(--line);border-radius:14px;padding:16px 20px}
summary{font-weight:600;cursor:pointer}
details p{margin:10px 0 0;color:var(--muted)}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

/* product view */
.pv{padding-block:40px 72px}
.back{background:none;border:0;color:var(--gold-text);font:600 14px var(--body);cursor:pointer;padding:8px 0;margin-bottom:16px}
.pv-grid{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.gallery{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:12px}
.gallery .main{border-radius:24px;height:480px;background:radial-gradient(circle at 50% 60%,#2A2416 0%,var(--ink) 70%);display:grid;place-items:center}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.thumbs div{aspect-ratio:1;max-width:100%;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;text-align:center;font-size:12px;color:var(--muted);padding:6px}
.info{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.info h1{font:700 42px var(--display)}
.benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.benefits li{display:flex;gap:10px}
.offers{display:flex;flex-direction:column;gap:10px}
.offer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;border:1px solid #C9C6BD;background:var(--paper);font:15px var(--body);color:var(--text);cursor:pointer;text-align:left;min-height:58px}
.offer[aria-pressed="true"]{border:2px solid var(--ink);background:var(--gold-soft)}
.offer small{display:block;color:var(--muted);font-size:13px}
.save{background:var(--ink);color:var(--gold);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-left:6px}

form.order{background:var(--paper-2);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:13px;font-weight:600}
.f input,.f select{height:48px;border:1px solid #B9B6AC;border-radius:12px;padding:0 14px;font:15px var(--body);background:var(--paper);color:var(--text);width:100%}
.f .err{color:#A3281C;font-size:12px;min-height:0}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:12px}
.note{font-size:12px;color:var(--muted);text-align:center}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:48px}
.spec{border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:8px}
.spec h2{font-size:18px}.spec p{margin:0;color:var(--muted)}

/* success */
.done{padding-block:80px;text-align:center}
.done .box{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;align-items:center}
.done .tick{width:72px;height:72px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.done h1{font:700 34px var(--display)}
.recap{width:100%;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.recap dt{color:var(--muted)}.recap dd{margin:0;font-weight:600}

footer{padding-block:48px 28px;color:var(--muted-dark)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-bottom:24px}
footer b{font:700 22px var(--display);letter-spacing:.18em;color:#fff}
footer small{display:block;border-top:1px solid var(--line-dark);padding-top:16px}
@media (prefers-reduced-motion:no-preference){.view{animation:in .35s ease both}@keyframes in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* base (plain HTML install) */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
.pimg{width:100%;height:100%;object-fit:contain}
.card .pic .pimg{max-height:220px;width:auto}
.gallery .main .pimg{max-height:440px;width:auto}
.float-wa{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;width:56px;height:56px;border-radius:50%;background:#1FAF55;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sending{opacity:.6;pointer-events:none}