/* ============================================================
   MALECK PARFUMS — gold on night, desert luxe
   ============================================================ */

:root{
  --ink:#070503;
  --ink-2:#0e0a06;
  --ink-3:#171009;
  --line:rgba(212,160,70,.22);
  --line-soft:rgba(212,160,70,.12);

  --gold:#e8b55a;
  --gold-hi:#fbe0a2;
  --gold-deep:#b8832c;
  --gold-grad:linear-gradient(180deg,#fbe6b0 0%,#e8b55a 38%,#c98f2e 68%,#8f6014 100%);

  --txt:#f3e7d2;
  --txt-dim:#bda986;
  --txt-mute:#8c7b60;

  --ok:#4ec08a;
  --err:#e5705f;

  --maxw:1180px;
  --r:14px;
  --r-lg:22px;

  --f-display:"Cinzel",Georgia,serif;
  --f-body:"Jost",system-ui,sans-serif;
  --f-ar-display:"Amiri",Georgia,serif;
  --f-ar-body:"Tajawal",system-ui,sans-serif;

  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --glow:0 0 48px -8px rgba(232,181,90,.35);
}

*,*::before,*::after{box-sizing:border-box}

/* the attribute must win over any display rule below */
[hidden]{display:none !important}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
body[dir="rtl"]{font-family:var(--f-ar-body); line-height:1.9}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}

/* ---------- layout helpers ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:16px}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}
.center{text-align:center}

.kicker{
  font-family:var(--f-body);
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
  display:flex; align-items:center; gap:14px; justify-content:center;
}
body[dir="rtl"] .kicker{font-family:var(--f-ar-body); letter-spacing:.12em}
.kicker::before,.kicker::after{
  content:""; height:1px; width:clamp(24px,8vw,64px);
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}

h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.15; margin:0}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{font-family:var(--f-ar-display); line-height:1.35}

h2.title{
  font-size:clamp(28px,4.4vw,48px);
  letter-spacing:.02em; margin:0 0 18px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
body[dir="rtl"] h2.title{letter-spacing:0}

.lede{color:var(--txt-dim); max-width:62ch; margin-inline:auto}

.divider{
  width:100%; max-width:220px; height:14px; margin:26px auto;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 2px, transparent 2.5px),
    linear-gradient(90deg,transparent,var(--gold-deep) 20%,var(--gold-deep) 80%,transparent);
  background-size:100% 100%, 100% 1px;
  background-position:center, center;
  background-repeat:no-repeat;
  opacity:.65;
}

/* ---------- ornamental background ---------- */
.glowfield{position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(232,181,90,.13), transparent 70%),
    radial-gradient(700px 500px at 95% 40%, rgba(184,131,44,.07), transparent 70%),
    radial-gradient(700px 500px at 5% 75%, rgba(184,131,44,.06), transparent 70%);
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:60;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  background:rgba(7,5,3,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.hdr-in{display:flex; align-items:center; gap:18px; height:68px}

.brand{display:flex; align-items:center; gap:11px; margin-inline-end:auto}
.brand-ar{
  font-family:var(--f-ar-display); font-size:27px; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-lat{display:flex; flex-direction:column; line-height:1.05}
.brand-lat b{font-family:var(--f-display); font-size:15px; letter-spacing:.2em; color:var(--gold-hi); font-weight:600}
.brand-lat span{font-size:8.5px; letter-spacing:.42em; color:var(--txt-mute); text-transform:uppercase}

.nav{display:flex; gap:26px; align-items:center}
.nav a{font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); transition:color .25s; white-space:nowrap}
body[dir="rtl"] .nav a{letter-spacing:0; text-transform:none; font-size:15px}
.nav a:hover{color:var(--gold-hi)}

.hdr-actions{display:flex; align-items:center; gap:10px}

.langbtn{
  width:40px; height:36px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--gold);
  display:grid; place-items:center; font-size:13px; letter-spacing:.08em;
  transition:border-color .25s, background .25s, color .25s;
}
.langbtn:hover{border-color:var(--gold); background:rgba(232,181,90,.1); color:var(--gold-hi)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:0;
  font-size:14px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  background:var(--gold-grad); color:#1d1205;
  box-shadow:0 10px 30px -12px rgba(232,181,90,.6);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, filter .22s;
  text-align:center;
}
body[dir="rtl"] .btn{letter-spacing:0; text-transform:none; font-size:16px; font-weight:700}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(232,181,90,.75); filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; filter:grayscale(.3)}
.btn.sm{padding:11px 20px; font-size:12px}
.btn.ghost{
  background:transparent; color:var(--gold); border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover{border-color:var(--gold); background:rgba(232,181,90,.08); box-shadow:none}
.btn.wa{background:linear-gradient(180deg,#36d26b,#1faa52); color:#04210f; box-shadow:0 10px 30px -14px rgba(37,211,102,.7)}
.btn.block{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  padding:110px 0 70px; overflow:hidden; z-index:1;
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  object-position:center bottom;
  opacity:.5; filter:saturate(1.15);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,5,3,.75) 0%, rgba(7,5,3,.45) 35%, rgba(7,5,3,.92) 88%, var(--ink) 100%),
    radial-gradient(70% 55% at 50% 45%, transparent, rgba(7,5,3,.6));
}
.hero-in{position:relative; z-index:2; display:grid; gap:40px; grid-template-columns:1.05fr .95fr; align-items:center}

.hero-eyebrow{
  font-size:11.5px; letter-spacing:.38em; text-transform:uppercase; color:var(--gold);
  margin:0 0 20px;
}
body[dir="rtl"] .hero-eyebrow{letter-spacing:.1em}

.hero h1{
  font-size:clamp(56px,11vw,124px); line-height:.95; margin:0 0 6px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 70px rgba(232,181,90,.22);
  letter-spacing:.04em;
}
body[dir="rtl"] .hero h1{font-size:clamp(64px,13vw,150px); letter-spacing:0}

.hero-sub{
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(22px,3.2vw,34px); color:var(--gold-hi); margin:0 0 18px; letter-spacing:.03em;
}
.hero-lede{font-size:clamp(17px,2vw,21px); color:var(--txt-dim); max-width:50ch; margin:0 0 30px}

.price-row{display:flex; align-items:baseline; gap:14px; margin:0 0 10px; flex-wrap:wrap}
.price{
  font-family:var(--f-display); font-size:clamp(32px,5vw,46px); font-weight:700;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price-old{font-size:20px; color:var(--txt-mute); text-decoration:line-through}
.price-save{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:rgba(78,192,138,.14); color:var(--ok);
  border:1px solid rgba(78,192,138,.35); padding:5px 12px; border-radius:999px;
}
body[dir="rtl"] .price-save{letter-spacing:0; text-transform:none}
.promo-line{color:var(--gold); font-size:14.5px; margin:0 0 26px}

.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}

.badges{display:flex; gap:22px; flex-wrap:wrap; color:var(--txt-mute); font-size:13.5px}
.badges div{display:flex; align-items:center; gap:8px}
.badges svg{width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.6; flex:none}

/* hero product card */
.hero-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow),var(--glow);
  background:var(--ink-2);
  transform:perspective(1200px) rotateY(-6deg);
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
body[dir="rtl"] .hero-card{transform:perspective(1200px) rotateY(6deg)}
.hero-card:hover{transform:perspective(1200px) rotateY(0deg) translateY(-6px)}
.hero-card img{width:100%; height:auto}
.hero-card .ribbon{
  position:absolute; top:16px; inset-inline-start:16px; z-index:2;
  background:rgba(7,5,3,.72); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--gold-hi);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
}
body[dir="rtl"] .hero-card .ribbon{letter-spacing:.06em; text-transform:none; font-size:13px}

/* ============================================================
   STORY
   ============================================================ */
.story{position:relative; z-index:1}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
.story-img{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.story-txt h2{text-align:start}
.story-txt .kicker{justify-content:flex-start}
.story-txt .kicker::before{display:none}
.story-txt p{color:var(--txt-dim); font-size:18px}

/* ============================================================
   COLLECTION
   ============================================================ */
.coll{position:relative; z-index:1; background:linear-gradient(180deg,transparent,var(--ink-2) 12%,var(--ink-2) 88%,transparent)}

.gtabs{display:inline-flex; gap:4px; margin:34px auto 44px; padding:5px;
  border:1px solid var(--line-soft); border-radius:999px; background:rgba(7,5,3,.5)}
.gtab{background:none; border:0; border-radius:999px; padding:10px 26px; color:var(--txt-mute);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; transition:.25s; white-space:nowrap}
body[dir="rtl"] .gtab{letter-spacing:0; text-transform:none; font-size:15px}
.gtab:hover{color:var(--txt-dim)}
.gtab.on{background:var(--gold-grad); color:#1d1205; font-weight:600}

.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:start;
  max-width:1060px; margin-inline:auto}

.prod{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(232,181,90,.06),rgba(7,5,3,.5));
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.prod:hover{border-color:var(--line); transform:translateY(-6px); box-shadow:0 24px 46px -26px rgba(232,181,90,.45)}
.prod.selected{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--glow)}
.prod.out{opacity:.62}

.prod-media{position:relative; aspect-ratio:5/6; overflow:hidden; background:var(--ink-3)}
.prod-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.prod:hover .prod-media img{transform:scale(1.05)}
.prod-chip{
  position:absolute; top:12px; inset-inline-start:12px;
  background:rgba(7,5,3,.76); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--gold-hi);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
body[dir="rtl"] .prod-chip{letter-spacing:0; text-transform:none; font-size:13px}
/* each line reads at a glance, before the label is even parsed */
.prod-chip.femme{color:#f6c8d6; border-color:rgba(246,200,214,.42); background:rgba(246,200,214,.13)}
.prod-chip.homme{color:#bcd4f2; border-color:rgba(188,212,242,.38); background:rgba(188,212,242,.11)}

/* women's cards pick up a rose cast instead of the house gold */
.prod.femme:hover{border-color:rgba(246,200,214,.5); box-shadow:0 24px 46px -26px rgba(246,200,214,.4)}
.prod.femme.selected{border-color:#f6c8d6; box-shadow:0 0 0 1px #f6c8d6, 0 0 48px -8px rgba(246,200,214,.4)}
.prod.femme .prod-name{color:#f8d6df}
.prod-out{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(7,5,3,.68); color:var(--err);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
}
body[dir="rtl"] .prod-out{letter-spacing:0; text-transform:none; font-size:17px}

.prod-body{padding:22px 20px 20px; display:flex; flex-direction:column; flex:1; gap:10px}
.prod-name{font-family:var(--f-display); font-size:20px; color:var(--gold-hi); margin:0; line-height:1.25}
body[dir="rtl"] .prod-name{font-family:var(--f-ar-display); font-size:23px}
.prod-insp{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:16px; color:var(--txt-dim); margin:0}
body[dir="rtl"] .prod-insp{font-family:var(--f-ar-body); font-style:normal; font-size:15px}
.prod-desc{margin:0; color:var(--txt-mute); font-size:14px; line-height:1.6}

.prod-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:8px}
.prod-price b{font-family:var(--f-display); font-size:25px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.prod-price s{color:var(--txt-mute); font-size:15px}
.prod-price .off{font-size:11px; letter-spacing:.08em; font-weight:700;
  background:rgba(78,192,138,.14); color:var(--ok);
  border:1px solid rgba(78,192,138,.3); padding:3px 9px; border-radius:999px}
body[dir="rtl"] .prod-price .off{letter-spacing:0}

.prod-notes{border-top:1px solid var(--line-soft); padding-top:12px; margin-top:4px}
.prod-notes summary{
  list-style:none; cursor:pointer; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px;
}
body[dir="rtl"] .prod-notes summary{letter-spacing:0; text-transform:none; font-size:14px}
.prod-notes summary::-webkit-details-marker{display:none}
.prod-notes summary::after{content:"+"; margin-inline-start:auto; font-size:17px; transition:transform .3s}
.prod-notes[open] summary::after{transform:rotate(45deg)}
.prod-notes dl{margin:14px 0 0; display:grid; gap:9px}
.prod-notes dt{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute)}
body[dir="rtl"] .prod-notes dt{letter-spacing:0; text-transform:none; font-size:13px}
.prod-notes dd{margin:2px 0 0; font-size:14px; color:var(--txt-dim)}

.prod .btn{margin-top:14px; width:100%}

.coll-empty{margin-top:40px; color:var(--txt-mute)}

/* ============================================================
   PRODUCT PICKER (order form)
   ============================================================ */
.picker-field{position:relative; z-index:5}
.picker{position:relative}

.picker-trigger{
  width:100%; display:flex; align-items:center; gap:13px;
  padding:11px 14px; border-radius:var(--r);
  background:rgba(7,5,3,.6); border:1px solid var(--line-soft);
  color:var(--txt); text-align:start; min-height:70px;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.picker-trigger:hover{border-color:var(--line)}
.picker-trigger:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,181,90,.14)}
.picker-trigger[aria-expanded="true"]{border-color:var(--gold); background:rgba(7,5,3,.85)}
.picker-trigger[aria-invalid="true"]{border-color:var(--err); box-shadow:0 0 0 3px rgba(229,112,95,.14)}

.picker-caret{width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.8;
  margin-inline-start:auto; flex:none; transition:transform .3s}
.picker-trigger[aria-expanded="true"] .picker-caret{transform:rotate(180deg)}

.picker-current{display:flex; align-items:center; gap:13px; min-width:0; flex:1}
.picker-ph{color:var(--txt-mute); font-size:16px}

/* one row: thumb + text + price — shared by the trigger and the options */
.popt{display:flex; align-items:center; gap:13px; width:100%; min-width:0}
.popt img{width:46px; height:56px; object-fit:cover; border-radius:8px; flex:none;
  border:1px solid var(--line-soft); background:var(--ink-3)}
.popt-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; text-align:start}
.popt-name{font-family:var(--f-display); font-size:16px; color:var(--gold-hi); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body[dir="rtl"] .popt-name{font-family:var(--f-ar-display); font-size:18px}
.popt-sub{font-size:12.5px; color:var(--txt-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the contenance is the first thing to go when the row gets tight */
@media (max-width:620px){
  .popt-size,.popt-dot{display:none}
  .popt img{width:42px; height:50px}
  .popt-name{font-size:15px}
  body[dir="rtl"] .popt-name{font-size:17px}
  .popt-price b{font-size:16px}
  .popt-price s{font-size:11px}
  /* wrap rather than truncate: a half-cut perfume name helps nobody */
  .popt-name,.popt-sub{white-space:normal; overflow:visible; text-overflow:clip}
  .popt-sub{line-height:1.35}
  .picker-trigger{min-height:76px}
}
.popt-price{display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:none; text-align:end}
body[dir="rtl"] .popt-price{align-items:flex-start; text-align:start}
.popt-price b{font-family:var(--f-display); font-size:17px; line-height:1.2;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.popt-price s{color:var(--txt-mute); font-size:12px}

/* the dropdown panel */
.picker-panel{
  position:absolute; inset-inline:0; top:calc(100% + 8px); z-index:40;
  max-height:min(62vh,420px); overflow-y:auto; overscroll-behavior:contain;
  padding:7px; border-radius:var(--r-lg);
  border:1px solid var(--gold); background:linear-gradient(180deg,#140d06,#0a0603);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 26px 60px -22px #000, var(--glow);
  animation:pickerIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes pickerIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}

.picker-group{
  padding:12px 12px 7px; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt-mute);
}
body[dir="rtl"] .picker-group{letter-spacing:0; text-transform:none; font-size:13px}
.picker-group + .picker-opt{margin-top:0}

.picker-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border:0; border-radius:12px; background:none;
  cursor:pointer; transition:background .18s;
}
.picker-opt:hover,.picker-opt.active{background:rgba(232,181,90,.11)}
.picker-opt[aria-selected="true"]{background:rgba(232,181,90,.16)}
.picker-opt .tick{width:17px; height:17px; flex:none; stroke:var(--gold); fill:none; stroke-width:2.2; opacity:0}
.picker-opt[aria-selected="true"] .tick{opacity:1}

.picker-panel::-webkit-scrollbar{width:8px}
.picker-panel::-webkit-scrollbar-track{background:transparent}
.picker-panel::-webkit-scrollbar-thumb{background:rgba(232,181,90,.26); border-radius:99px}

.from-label{font-size:14px; color:var(--txt-mute); letter-spacing:.06em}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{position:relative; z-index:1}
.gal-grid{display:grid; grid-template-columns:1fr 1.45fr; gap:22px; margin-top:52px}
.gal figure{margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--ink-2); box-shadow:var(--shadow)}
.gal figure img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{
  padding:14px 18px; font-size:13px; color:var(--txt-mute);
  letter-spacing:.1em; text-transform:uppercase; border-top:1px solid var(--line-soft);
}
body[dir="rtl"] .gal figcaption{letter-spacing:0; text-transform:none; font-size:14.5px}

/* ============================================================
   QUALITY
   ============================================================ */
.qual{position:relative; z-index:1; background:linear-gradient(180deg,transparent,var(--ink-2) 18%,var(--ink-2) 82%,transparent)}
.qual-intro{margin:0 auto 52px; color:var(--txt-dim); max-width:72ch}
.qual-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.qual-card{
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding:30px 22px; text-align:center; background:rgba(232,181,90,.03);
  transition:border-color .35s, transform .35s;
}
.qual-card:hover{border-color:var(--line); transform:translateY(-4px)}
.qual-card svg{width:38px; height:38px; stroke:var(--gold); fill:none; stroke-width:1.3; margin:0 auto 16px; display:block}
.qual-card p{margin:0; font-size:15px; color:var(--txt)}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev{position:relative; z-index:1}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.rev-card{
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:32px 26px; background:linear-gradient(180deg,rgba(232,181,90,.05),transparent);
}
.stars{display:flex; gap:4px; margin-bottom:16px}
body[dir="rtl"] .stars{justify-content:flex-start}
.stars svg{width:16px; height:16px; fill:var(--gold); stroke:none}
.rev-card p{margin:0 0 18px; color:var(--txt); font-size:16px}
.rev-name{color:var(--gold); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase}
body[dir="rtl"] .rev-name{letter-spacing:0; text-transform:none; font-size:15px}

/* ============================================================
   ORDER
   ============================================================ */
.order{position:relative; z-index:1; background:linear-gradient(180deg,transparent,var(--ink-2) 14%,var(--ink-2) 86%,transparent)}
.order-card{
  max-width:640px; margin:46px auto 0;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(232,181,90,.07),rgba(7,5,3,.6));
  padding:clamp(26px,4vw,44px);
  box-shadow:var(--shadow),var(--glow);
}
.fields{display:grid; gap:18px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field label{display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
body[dir="rtl"] .field label{letter-spacing:0; text-transform:none; font-size:15px}
.field input,.field select{
  width:100%; padding:14px 16px; border-radius:var(--r);
  background:rgba(7,5,3,.6); border:1px solid var(--line-soft);
  color:var(--txt); font:inherit; font-size:16px;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{color:var(--txt-mute)}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:rgba(7,5,3,.85);
  box-shadow:0 0 0 3px rgba(232,181,90,.14);
}
.field input[aria-invalid="true"]{border-color:var(--err); box-shadow:0 0 0 3px rgba(229,112,95,.14)}
.field .msg{color:var(--err); font-size:13.5px; margin-top:6px; min-height:0}
.field input[dir="ltr"]{text-align:start}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
body[dir="rtl"] .field select{background-position:20px calc(50% + 2px),26px calc(50% + 2px)}
.field select option{background:var(--ink-2); color:var(--txt)}

.totals{margin:26px 0 22px; border-top:1px solid var(--line-soft); padding-top:20px; display:grid; gap:10px}
.totals div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; color:var(--txt-dim)}
.totals .grand{font-size:20px; color:var(--txt)}
.totals .grand b{
  font-family:var(--f-display); font-size:26px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.totals .free{color:var(--ok)}

.or{display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--txt-mute); font-size:13px; letter-spacing:.2em; text-transform:uppercase}
body[dir="rtl"] .or{letter-spacing:0; text-transform:none}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line-soft)}

.form-note{text-align:center; color:var(--txt-mute); font-size:13.5px; margin-top:16px}

.success{text-align:center; padding:22px 6px}
.success .tick{
  width:74px; height:74px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(78,192,138,.4); background:rgba(78,192,138,.1);
}
.success .tick svg{width:34px; height:34px; stroke:var(--ok); fill:none; stroke-width:2}
.success h3{font-size:26px; color:var(--gold-hi); margin:0 0 12px}
.success p{color:var(--txt-dim); margin:0 0 26px}

.soldout{
  text-align:center; padding:18px; border-radius:var(--r);
  border:1px solid rgba(229,112,95,.35); background:rgba(229,112,95,.08);
  color:var(--err); font-size:16px; margin-bottom:22px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{position:relative; z-index:1}
.faq-list{max-width:800px; margin:46px auto 0; display:grid; gap:12px}
.faq-item{border:1px solid var(--line-soft); border-radius:var(--r); background:rgba(232,181,90,.03); overflow:hidden; transition:border-color .3s}
.faq-item[open]{border-color:var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; align-items:center; gap:16px; font-size:17px; color:var(--gold-hi);
  font-family:var(--f-display);
}
body[dir="rtl"] .faq-item summary{font-family:var(--f-ar-display); font-size:19px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; margin-inline-start:auto; font-size:24px; color:var(--gold);
  transition:transform .3s; line-height:1; flex:none;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 22px; color:var(--txt-dim); font-size:16px; margin:0}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final{position:relative; z-index:1; text-align:center; padding:clamp(70px,10vw,130px) 0; overflow:hidden}
.final::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 100% at 50% 50%, rgba(232,181,90,.13), transparent 70%);
}
.final h2{font-size:clamp(30px,5.5vw,56px); margin-bottom:34px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.foot{position:relative; z-index:1; border-top:1px solid var(--line-soft); padding:50px 0 40px; text-align:center}
.foot .brand{justify-content:center; margin:0 0 16px}
.foot-tag{color:var(--txt-mute); font-size:14px; margin:0 0 26px}
.foot-note{color:var(--txt-mute); font-size:12.5px; max-width:70ch; margin:0 auto 18px; line-height:1.7; opacity:.8}
.foot-rights{color:var(--txt-mute); font-size:12.5px; margin:0}
.foot a.admin-link{color:var(--txt-mute); font-size:12px; opacity:.5; transition:opacity .3s}
.foot a.admin-link:hover{opacity:1; color:var(--gold)}

/* floating whatsapp */
.wa-float{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(180deg,#36d26b,#1faa52);
  display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .25s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px; height:28px; fill:#04210f}

/* sticky mobile bar */
.mbar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:65;
  display:none; gap:12px; align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,5,3,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
}
.mbar .mprice{display:flex; flex-direction:column; line-height:1.2; flex:none}
.mbar .mprice b{font-family:var(--f-display); font-size:21px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.mbar .mprice s{color:var(--txt-mute); font-size:12.5px}
.mbar .btn{flex:1; padding:14px 18px}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr; gap:46px}
  .hero-card{transform:none; max-width:460px; margin-inline:auto}
  body[dir="rtl"] .hero-card{transform:none}
  .hero-txt{text-align:center}
  .hero-lede{margin-inline:auto}
  .hero-cta,.badges,.price-row{justify-content:center}
  .story-grid{grid-template-columns:1fr}
  .story-txt{text-align:center}
  .story-txt .kicker{justify-content:center}
  .story-txt .kicker::before{display:block}
  .story-txt h2{text-align:center}
  .gal-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .qual-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .hdr-in .btn{display:none}
  .rev-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr; gap:18px}
  .gtabs{width:100%; justify-content:center}
  .gtab{flex:1; padding:10px 12px}
  .row2{grid-template-columns:1fr}
  .mbar{display:flex}
  .wa-float{inset-block-end:86px}
  .foot{padding-bottom:110px}
  .hero{min-height:auto; padding-top:100px}
}
@media (max-width:420px){
  .qual-grid{grid-template-columns:1fr}
  .badges{gap:14px; font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}