/* ==========================================================================
   RAWDAT AL-MISK — روضة المسك
   Haute Parfumerie · Pure Attar Oil Archives
   Stylesheet
   --------------------------------------------------------------------------
   Sections
   01. Tokens / Root
   02. Reset & Base
   03. Typography & Ornaments
   04. Buttons, Pills, Badges
   05. Header & Navigation
   06. Hero
   07. Trust Bar
   08. Section Shells
   09. Collection Cards
   10. Product Cards & Grid
   11. Product Detail Page
   12. Cart Drawer & Checkout
   13. Toast
   14. Story / Craft / Editorial blocks
   15. Delivery, FAQ, Contact
   16. Footer
   17. Floating WhatsApp
   18. Utilities, Reveal, Responsive
   ========================================================================== */

/* ---------- 01. TOKENS ---------- */
:root{
  --emerald-990:#02160F;
  --emerald-950:#04211A;
  --emerald-900:#062B22;
  --emerald-850:#08352A;
  --emerald-800:#0B4133;
  --emerald-700:#12523F;
  --emerald-600:#1B6B52;

  --gold:#C9A34E;
  --gold-soft:#D9BC77;
  --gold-pale:#EBD9A8;
  --gold-deep:#9C7A2E;

  --bone:#F8F4E9;
  --bone-2:#F1EADA;
  --sand:#E4D9C3;
  --ink:#101E19;
  --ink-soft:#3C4B44;

  --wa:#25D366;
  --wa-dark:#128C7E;

  --hair:rgba(201,163,78,.34);
  --hair-soft:rgba(201,163,78,.18);
  --glass:rgba(255,255,255,.05);

  --serif:"Optima","Palatino Linotype","Palatino","Book Antiqua",Palatino,"Times New Roman",Georgia,serif;
  --sans:"Optima","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --arabic:"Traditional Arabic","Amiri","Scheherazade New","Noto Naskh Arabic","Geeza Pro","Times New Roman",serif;

  --wrap:1240px;
  --r-sm:3px;
  --r-md:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-lg:0 40px 90px -50px rgba(2,22,15,.85);
}

/* ---------- 02. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
hr{border:0}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 03. TYPOGRAPHY & ORNAMENTS ---------- */
.ar{font-family:var(--arabic);direction:rtl;unicode-bidi:isolate;line-height:1.9}
.eyebrow{
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
}
.eyebrow.on-dark{color:var(--gold-soft)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem);letter-spacing:.005em}
h2{font-size:clamp(1.9rem,3.9vw,3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
h4{font-size:1.06rem;letter-spacing:.04em}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-soft);max-width:64ch}
.on-dark,.on-dark .lead{color:rgba(248,244,233,.86)}
.on-dark{color:var(--bone)}
.muted{color:var(--ink-soft)}
.tiny{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.gold{color:var(--gold-deep)}
.on-dark .gold{color:var(--gold-soft)}

.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.orn i{display:block;height:1px;width:min(150px,22vw);background:linear-gradient(90deg,transparent,var(--hair) 45%,var(--hair) 55%,transparent)}
.orn.left{justify-content:flex-start}
.orn svg{flex:none;color:var(--gold)}
.orn.on-dark svg{color:var(--gold-soft)}

.section-head{max-width:760px;margin:0 auto 54px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head p{margin:.4em 0 0}

/* Girih background pattern (data URI, prints no network request) */
.pat{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A34E' stroke-width='1'%3E%3Cpath d='M60 8 74 22 94 22 94 42 108 56 94 70 94 90 74 90 60 104 46 90 26 90 26 70 12 56 26 42 26 22 46 22Z'/%3E%3Cpath d='M60 22 74 36 88 36 88 50 102 56 88 62 88 76 74 76 60 90 46 76 32 76 32 62 18 56 32 50 32 36 46 36Z'/%3E%3Ccircle cx='60' cy='56' r='7'/%3E%3Cpath d='M0 56h12M108 56h12M60 0v8M60 104v16M0 0l12 12M108 0l-12 12M0 112l12-12M108 112l-12-12'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
.pat-dark{opacity:.5}

/* ---------- 04. BUTTONS / PILLS / BADGES ---------- */
.btn{
  --bg:var(--emerald-850);--fg:var(--bone);--bd:var(--emerald-850);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 30px;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:var(--r-sm);
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .35s;
  position:relative;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(2,22,15,.7)}
.btn.gold{--bg:var(--gold);--fg:#1A1405;--bd:var(--gold)}
.btn.gold:hover{--bg:var(--gold-soft)}
.btn.ghost{--bg:transparent;--fg:var(--emerald-850);--bd:var(--hair)}
.btn.ghost:hover{--bg:var(--emerald-850);--fg:var(--bone)}
.btn.ghost.on-dark{--fg:var(--gold-pale);--bd:var(--hair)}
.btn.ghost.on-dark:hover{--bg:var(--gold);--fg:#1A1405;--bd:var(--gold)}
.btn.wa{--bg:var(--wa);--fg:#08251B;--bd:var(--wa);font-weight:700}
.btn.wa:hover{--bg:#31e07a}
.btn.sm{padding:11px 20px;font-size:.66rem;letter-spacing:.2em}
.btn.lg{padding:18px 40px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

.sizebar{display:flex;flex-wrap:nowrap;gap:7px}
.size{
  flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;
  padding:11px 5px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:transparent;color:var(--ink);cursor:pointer;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  transition:all .28s var(--ease);
}
.size b{display:block;font-size:.92rem;letter-spacing:0;text-transform:none;font-family:var(--serif);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.size:hover{border-color:var(--gold)}
.size[aria-pressed="true"]{background:var(--emerald-850);color:var(--bone);border-color:var(--emerald-850)}
.size[aria-pressed="true"] b{color:var(--gold-pale)}
/* Golden available, greyed not available */
.size[data-instock="true"], .size:not([data-instock]){border-color:rgba(201,163,78,.32);color:var(--emerald-900)}
.size[data-instock="true"]:hover, .size:not([data-instock]):hover{border-color:var(--gold);background:rgba(201,163,78,.08);color:var(--emerald-950)}
.size[data-instock="true"][aria-pressed="true"]{background:linear-gradient(100deg,var(--gold),#D9BC77);color:#1A1405;border-color:var(--gold);box-shadow:0 4px 18px -8px rgba(201,163,78,.6)}
.size[data-instock="true"][aria-pressed="true"] b{color:#1A1405}
.size[data-instock="false"], .size:disabled{opacity:.38;background:rgba(0,0,0,.04) !important;border-color:rgba(0,0,0,.08) !important;color:rgba(0,0,0,.35) !important;cursor:not-allowed !important;pointer-events:none !important;box-shadow:none !important}
/* Tray size switcher — golden mood */
.ci .size.sm{flex:0 0 auto;min-width:52px;padding:7px 10px;font-size:.62rem;border-radius:999px;border:1px solid rgba(201,163,78,.28);background:rgba(201,163,78,.08);color:var(--gold-pale);transition:all .25s}
.ci .size.sm:hover{border-color:var(--gold);background:rgba(201,163,78,.18);color:var(--bone);transform:translateY(-1px)}
.ci .size.sm[aria-pressed="true"]{background:linear-gradient(100deg,var(--gold),#D9BC77);color:#1A1405;border-color:var(--gold);box-shadow:0 4px 14px -8px rgba(201,163,78,.6);font-weight:700}
.ci .size.sm[data-instock="false"], .ci .size.sm:disabled{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.08) !important;color:rgba(248,244,233,.28) !important;opacity:.4;pointer-events:none}

.badge{
  display:inline-block;padding:5px 11px;border:1px solid var(--hair);
  border-radius:999px;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);background:rgba(201,163,78,.08);font-weight:700;
}
.badge.dark{background:rgba(4,33,26,.9);color:var(--gold-pale);border-color:var(--hair)}
.badge.solid{background:var(--gold);color:#1A1405;border-color:var(--gold)}

/* ---------- 05. HEADER ---------- */
.topline{
  background:var(--emerald-990);color:var(--gold-pale);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;
  padding:9px 16px;border-bottom:1px solid rgba(201,163,78,.2);
}
.topline span{opacity:.9}
.topline .sm{display:none}
.topline .dot{color:var(--gold);padding:0 10px}

.site-head{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(4,33,26,.97),rgba(4,33,26,.93));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-soft);
  transition:padding .4s var(--ease),box-shadow .4s;
}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-pale) 50%,var(--gold) 80%,transparent);
  opacity:.45;
}
.site-head .bar{
  display:flex;align-items:center;gap:22px;justify-content:space-between;
  padding:14px 0;transition:padding .4s var(--ease);
}
.site-head.shrunk .bar{padding:8px 0}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand .medallion{width:50px;height:50px;flex:none;transition:transform .5s var(--ease),width .4s,height .4s}
.site-head.shrunk .medallion{width:42px;height:42px}
.brand:hover .medallion{transform:rotate(45deg)}
.brand-txt{display:flex;flex-direction:column;line-height:1.06}
.brand-txt .en{
  font-family:var(--serif);color:var(--bone);
  font-size:1.16rem;letter-spacing:.2em;text-transform:uppercase;
}
.brand-txt .arb{font-family:var(--arabic);direction:rtl;color:var(--gold-soft);font-size:1.06rem;letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{
  color:rgba(248,244,233,.84);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  position:relative;padding:6px 0;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav a:hover{color:var(--gold-pale)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold-pale)}
.head-actions{display:flex;align-items:center;gap:14px;flex:none}
.icon-btn{
  position:relative;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--hair-soft);border-radius:var(--r-sm);color:var(--gold-pale);
  transition:all .3s var(--ease);
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,163,78,.08)}
.cart-count{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  background:var(--gold);color:#1A1405;border-radius:999px;
  font-size:.66rem;font-weight:800;display:grid;place-items:center;line-height:1;
}
.cart-count[hidden]{display:none}
.burger{display:none}

.mobile-nav{
  display:none;background:var(--emerald-950);border-top:1px solid var(--hair-soft);
  padding:8px 0 22px;
}
.mobile-nav a{
  display:block;padding:14px 26px;color:var(--bone);border-bottom:1px solid rgba(201,163,78,.12);
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
}
.mobile-nav.open{display:block}

/* ---------- 06. HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(27,107,82,.55),transparent 60%),
    radial-gradient(90% 70% at 10% 100%,rgba(156,122,46,.28),transparent 62%),
    linear-gradient(160deg,var(--emerald-990),var(--emerald-900) 45%,var(--emerald-850));
  color:var(--bone);padding:clamp(60px,9vw,124px) 0 clamp(64px,9vw,120px);
}
.hero .pat-bg{
  position:absolute;inset:-10%;opacity:.13;pointer-events:none;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
}
.hero .glow{
  position:absolute;width:640px;height:640px;right:-190px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,163,78,.22),transparent 66%);pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center}
.hero-copy{max-width:640px}
.hero h1{margin:.18em 0 .3em}
.hero h1 .light{color:var(--gold-pale);font-style:italic}
.hero-ar{font-family:var(--arabic);direction:rtl;font-size:clamp(2.2rem,4.6vw,3.5rem);color:var(--gold-soft);line-height:1.5}
.hero .lead{color:rgba(248,244,233,.82);font-size:clamp(1rem,1.45vw,1.12rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-specs{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;padding-top:26px;border-top:1px solid var(--hair-soft)}
.hero-specs li{display:flex;align-items:center;gap:9px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,233,.72)}
.hero-specs svg{color:var(--gold);flex:none}

.hero-art{position:relative;display:grid;place-items:center;min-height:380px}
.hero-frame{
  position:relative;width:min(100%,430px);aspect-ratio:4/5;border:1px solid var(--hair);
  border-radius:var(--r-md);background:radial-gradient(72% 56% at 50% 34%,rgba(27,107,82,.42),rgba(4,33,26,.55));
  display:grid;place-items:center;overflow:hidden;
}
.hero-frame .pat{position:absolute;inset:0;opacity:.16}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,15,.28) 0%,rgba(2,22,15,0) 34%,rgba(2,22,15,.62) 100%)}
.hero-cap{
  position:absolute;left:20px;right:20px;bottom:18px;z-index:3;text-align:center;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,233,.78);
}
.hero-frame .corner{position:absolute;width:38px;height:38px;border:1px solid var(--gold);opacity:.8}
.hero-frame .corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.hero-frame .corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.hero-frame .corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.hero-frame .corner.br{bottom:12px;right:12px;border-left:0;border-top:0}
.hero-frame .bottle{width:74%;position:relative;z-index:2}

/* ---------- 07. TRUST BAR ---------- */
.trust{background:var(--emerald-990);color:var(--gold-pale);border-bottom:1px solid var(--hair-soft)}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,163,78,.16)}
.trust li{
  background:var(--emerald-990);padding:24px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.trust svg{color:var(--gold);opacity:.95}
.trust .k{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)}
.trust .v{font-size:.78rem;color:rgba(248,244,233,.72);line-height:1.5;letter-spacing:.02em}

/* ---------- 08. SECTION SHELLS ---------- */
section{position:relative}
.sec{padding:clamp(64px,8.4vw,120px) 0}
.sec.tight{padding:clamp(48px,6vw,84px) 0}
.sec.dark{background:linear-gradient(170deg,var(--emerald-950),var(--emerald-900) 60%,var(--emerald-850));color:var(--bone)}
.sec.darker{background:var(--emerald-990);color:var(--bone)}
.sec.sand{background:linear-gradient(180deg,var(--bone),var(--bone-2))}
.sec.pattern{position:relative}
.sec.pattern::before{
  content:"";position:absolute;inset:0;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2312523F' stroke-width='1'%3E%3Cpath d='M60 8 74 22 94 22 94 42 108 56 94 70 94 90 74 90 60 104 46 90 26 90 26 70 12 56 26 42 26 22 46 22Z'/%3E%3Ccircle cx='60' cy='56' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
.sec.dark.pattern::before{opacity:.09}

/* ---------- Bottle artwork sizing (inline SVG, no external files) ---------- */
.card .shot .bottle svg,
.hero-frame .bottle svg,
.story-img svg,
.pd-stage .bottle svg,
.ci .thumb svg,
.pd-thumbs button svg{max-width:100%;max-height:100%;width:auto;height:100%}
.ci .thumb svg{width:100%}
.card .flags{pointer-events:none}
.card .atc,.card .icon-btn{position:relative;z-index:3}
.card .shot .card-link{z-index:1}
.card .names a:hover{color:var(--gold-deep)}

.bottle.photo img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.5));
}
.pd-stage .bottle.photo{inset:4% !important;padding:0 !important}
.card .shot .bottle.photo{padding:10% 16%}

/* ---------- SIZE GUIDE TILES ---------- */
.size-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.size-tile{border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;background:#fff;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.size-tile:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-lg)}
.size-tile .simg{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,#12523F,#04211A 78%)}
.size-tile .simg img{width:100%;height:100%;object-fit:cover;display:block}
.size-tile .simg.slead{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 40%,#12523F,#04211A 78%)}
.slead{position:absolute;inset:0;display:grid;place-items:center}
.slead svg{height:78%;width:auto;max-width:62%}
.slead .coming{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,244,233,.5)}
.size-tile .simg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(201,163,78,.25)}
.size-tile .stxt{padding:22px 24px 26px;position:relative}
.size-tile .sml{
  position:absolute;top:-19px;left:24px;background:var(--gold);color:#1A1405;
  padding:6px 14px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.16em;
}
.size-tile h4{margin:0 0 8px;font-size:1.1rem}
.size-tile p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---------- 09. COLLECTION CARDS ---------- */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.col-card{
  position:relative;padding:40px 32px 34px;border:1px solid var(--hair);
  border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.sec:not(.dark):not(.darker) .col-card{background:linear-gradient(180deg,#fff,var(--bone));border-color:rgba(156,122,46,.28)}
.col-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-lg)}
.col-card .num{
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--gold);
  opacity:.5;float:right;margin:-6px -4px 0 12px;
}
.col-card h3{margin:0}
.col-card .ar{font-size:1.5rem;line-height:1.5}
.col-card p{font-size:.94rem;margin:.2em 0 .6em}
.col-card .meta{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid var(--hair-soft)}
.col-card .price-from{font-family:var(--serif);font-size:1.32rem}
.col-card .price-from span{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.sec.dark .col-card .price-from span,.sec.darker .col-card .price-from span{color:rgba(248,244,233,.6)}
.col-card .go{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:8px}
.sec.dark .col-card .go,.sec.darker .col-card .go{color:var(--gold-soft)}
.col-card .go svg{transition:transform .4s var(--ease)}
.col-card:hover .go svg{transform:translateX(5px)}

/* ---------- 10. PRODUCT CARDS & GRID ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod-grid.three{grid-template-columns:repeat(3,1fr)}
.card{
  position:relative;display:flex;flex-direction:column;border:1px solid rgba(156,122,46,.22);
  border-radius:var(--r-md);background:#fff;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;
}
.card:hover{transform:translateY(-7px);box-shadow:0 36px 70px -44px rgba(2,22,15,.55);border-color:var(--gold)}
.card .shot{position:relative;aspect-ratio:1/1.1;overflow:hidden;background:radial-gradient(72% 56% at 50% 36%,#12523F,#04211A 72%)}
.card .shot .pat{position:absolute;inset:0;opacity:.14}
.card .shot .bottle{position:absolute;inset:0;padding:16% 22%;display:grid;place-items:center;transition:transform .7s var(--ease)}
.card:hover .shot .bottle{transform:scale(1.045)}
.card .flags{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;z-index:2}
.card .wish{
  position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:999px;background:rgba(4,33,26,.55);color:var(--gold-pale);
  transition:all .3s var(--ease);
}
.card .wish:hover,.card .wish.on{background:var(--gold);color:#1A1405;border-color:var(--gold)}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .names h3{margin:0;font-size:1.22rem;letter-spacing:.01em}
.card .names .ar{font-size:1.16rem;color:var(--gold-deep);line-height:1.5}
.card .profile{font-size:.9rem;color:var(--ink-soft);margin:0;flex:1}
.card .sizebar{margin-top:4px}
.card .buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(156,122,46,.18)}
.card .price{font-family:var(--serif);font-size:1.5rem;line-height:1;white-space:nowrap}
.card .price small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.card .atc{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--emerald-850);color:var(--gold-pale);transition:all .35s var(--ease);
}
.card .atc:hover{background:var(--gold);color:#1A1405;transform:translateY(-2px)}
.card-link{position:absolute;inset:0;z-index:1}

/* filter bar */
.filters{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:rgba(255,255,255,.6);margin-bottom:34px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 18px;border:1px solid var(--hair);border-radius:999px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  transition:all .3s var(--ease);white-space:nowrap;
}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.on{background:var(--emerald-850);border-color:var(--emerald-850);color:var(--gold-pale)}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:999px;padding:9px 16px;min-width:250px;color:var(--ink-soft)}
.search input{border:0;background:none;outline:none;width:100%;font-size:.86rem}
.empty-note{text-align:center;padding:60px 20px;color:var(--ink-soft)}

/* ---------- 11. PRODUCT DETAIL ---------- */
.pd{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.6vw,64px);align-items:start}
.pd-gallery{position:sticky;top:104px}
.pd-stage{
  position:relative;aspect-ratio:1/1.06;border:1px solid var(--hair);border-radius:var(--r-md);
  background:radial-gradient(70% 55% at 50% 34%,#12523F,#04211A 74%);overflow:hidden;
  display:grid;place-items:center;
}
.pd-stage .pat{position:absolute;inset:0;opacity:.15}
.pd-stage .bottle{width:62%;position:relative;z-index:2}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pd-thumbs button{
  position:relative;aspect-ratio:1;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--emerald-950);overflow:hidden;padding:12%;
}
.pd-thumbs button .pat{position:absolute;inset:0;opacity:.12}
.pd-thumbs button img,.pd-thumbs button svg{position:relative;z-index:2}
.pd-thumbs button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pd h1{font-size:clamp(2rem,4.2vw,3.2rem);margin:.16em 0 .1em}
.pd .ar-name{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--gold-deep);line-height:1.5;margin-bottom:6px}
.pd .desc{font-size:1rem;color:var(--ink-soft);margin:0 0 26px}
.pd-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.pd-block{border-top:1px solid rgba(156,122,46,.22);padding:24px 0}
.pd-block h4{margin:0 0 14px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.note .n{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.note .v{font-family:var(--serif);font-size:1.02rem;line-height:1.45;margin-top:6px}
.pd-buy{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:6px}
.pd-price{font-family:var(--serif);font-size:2.4rem;line-height:1;min-width:150px}
.pd-price small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px}
.pd-assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(156,122,46,.22)}
.pd-assure li{display:flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft)}
.pd-assure svg{color:var(--gold-deep);flex:none}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs span{opacity:.5}

/* ---------- 12. CART DRAWER ---------- */
.scrim{position:fixed;inset:0;background:rgba(2,15,11,.65);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;z-index:80}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:90;
  background:linear-gradient(180deg,var(--emerald-990) 0%,var(--emerald-950) 40%,var(--emerald-900) 100%);
  color:var(--bone);display:flex;flex-direction:column;
  transform:translateX(103%);transition:transform .55s var(--ease);
  border-left:1px solid rgba(201,163,78,.18);box-shadow:-40px 0 100px -30px rgba(0,0,0,.7);
  overflow:hidden;
}
.drawer.open{transform:none}
.drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:24px 26px;border-bottom:1px solid rgba(201,163,78,.14);background:linear-gradient(180deg,var(--emerald-990),var(--emerald-950));backdrop-filter:blur(8px);flex-shrink:0}
.drawer-head h3{margin:0;font-size:1.28rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.drawer-head h3 span.muted{font-size:.82rem;color:var(--gold-soft);font-family:var(--sans);letter-spacing:.08em}
.drawer-head .ar{color:var(--gold-soft);font-size:1rem;margin-top:2px}
.drawer-head .icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(201,163,78,.18);background:rgba(255,255,255,.04);display:grid;place-items:center;color:var(--gold-pale);transition:all .25s}
.drawer-head .icon-btn:hover{background:rgba(201,163,78,.12);border-color:var(--gold);color:var(--bone);transform:rotate(90deg)}
.drawer-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative}
.drawer-body::-webkit-scrollbar{width:6px}
.drawer-body::-webkit-scrollbar-thumb{background:var(--gold);border-radius:999px}
.drawer-body::-webkit-scrollbar-track{background:transparent}
.drawer-foot{padding:22px 26px 28px;border-top:1px solid rgba(201,163,78,.14);background:linear-gradient(180deg,rgba(2,15,11,.5),rgba(2,15,11,.75));backdrop-filter:blur(10px);flex-shrink:0;overflow-y:auto;max-height:60%;overscroll-behavior:contain}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:20px 26px;border-bottom:1px solid rgba(201,163,78,.1);transition:background .2s}
.ci:hover{background:rgba(255,255,255,.03)}
.ci:last-child{border-bottom:0}
.ci .thumb{
  width:72px;height:72px;border:1px solid rgba(201,163,78,.18);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:grid;place-items:center;padding:10px;
  box-shadow:0 4px 16px -10px rgba(0,0,0,.5);
}
.ci .thumb .pat{display:none}
.ci .nm{font-family:var(--serif);font-size:1.08rem;line-height:1.3;color:var(--bone)}
.ci .nm small{display:block;font-family:var(--arabic);font-size:.82rem;color:var(--gold-soft);margin-top:2px;opacity:.9}
.ci .sub{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,244,233,.58);margin-top:6px;display:flex;align-items:center;gap:8px}
.ci .sub .ml-badge{background:rgba(201,163,78,.14);border:1px solid rgba(201,163,78,.2);padding:2px 8px;border-radius:999px;color:var(--gold-pale);font-size:.66rem}
.ci .pr{font-family:var(--serif);font-size:1.1rem;text-align:right;color:var(--gold-pale);white-space:nowrap;line-height:1.2}
.ci .pr small{display:block;font-family:var(--sans);font-size:.68rem;color:rgba(248,244,233,.5);text-decoration:line-through;margin-bottom:2px}
.qty{display:inline-flex;align-items:center;gap:0;margin-top:12px;border:1px solid rgba(201,163,78,.22);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.qty button{width:34px;height:32px;color:var(--gold-pale);display:grid;place-items:center;transition:all .2s;font-size:1rem}
.qty button:hover{background:rgba(201,163,78,.18);color:var(--bone)}
.qty span{min-width:36px;text-align:center;font-size:.9rem;font-weight:600;color:var(--bone)}
.ci .rm{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,244,233,.45);margin-top:10px;border-bottom:1px solid transparent;padding-bottom:2px;transition:all .2s}
.ci .rm:hover{color:#ff8a8a;border-color:rgba(255,138,138,.4)}
.cart-empty{text-align:center;padding:60px 24px;color:rgba(248,244,233,.7)}
.cart-empty svg{color:var(--gold);opacity:.5;margin:0 auto 20px}
.cart-empty h4{font-family:var(--serif);font-size:1.3rem;color:var(--bone);margin:0 0 8px}
.cart-empty p{font-size:.86rem;line-height:1.6;margin:0 0 24px;color:rgba(248,244,233,.6)}
.sums{display:flex;flex-direction:column;gap:10px;margin:18px 0 20px;padding:16px;background:rgba(255,255,255,.03);border:1px solid rgba(201,163,78,.1);border-radius:10px}
.sums .row{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:rgba(248,244,233,.75)}
.sums .row span:first-child{color:rgba(248,244,233,.6);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.sums .row.total{padding-top:14px;margin-top:6px;border-top:1px solid rgba(201,163,78,.18);font-family:var(--serif);font-size:1.42rem;color:var(--bone)}
.sums .row.total b{color:var(--gold-pale)}
.sums .row.discount{color:var(--gold-pale)}
.sums .row.discount span:last-child{color:var(--gold);font-weight:700}
.deliv{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.deliv-opt{position:relative;display:flex;align-items:flex-start;gap:14px;border:1px solid rgba(201,163,78,.14);border-radius:12px;padding:16px 16px;cursor:pointer;transition:all .3s var(--ease);background:rgba(255,255,255,.03)}
.deliv-opt:hover{border-color:rgba(201,163,78,.28);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.deliv-opt.on{border-color:var(--gold);background:linear-gradient(100deg,rgba(201,163,78,.14),rgba(201,163,78,.06));box-shadow:0 0 0 3px rgba(201,163,78,.12),0 8px 24px -16px rgba(201,163,78,.4)}
.deliv-opt input{accent-color:var(--gold);width:18px;height:18px;margin-top:2px;flex-shrink:0}
.deliv-opt .t{font-size:.88rem;font-weight:600;color:var(--bone);line-height:1.3}
.deliv-opt .t small{display:block;font-size:.74rem;color:rgba(248,244,233,.6);font-weight:400;margin-top:4px;line-height:1.4}
.deliv-opt .p{margin-left:auto;font-family:var(--serif);color:var(--gold-pale);font-size:1.06rem;white-space:nowrap;font-weight:600}
.fields{display:grid;gap:14px;margin-bottom:16px}
.fields .f-group{display:flex;flex-direction:column;gap:6px}
.fields .f-group label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.fields .f-group label span{color:#ff8a8a;margin-left:4px}
.fields input,.fields textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(201,163,78,.18);
  border-radius:10px;padding:14px 16px;color:var(--bone);font-size:.9rem;outline:none;
  transition:all .3s;
}
.fields input::placeholder,.fields textarea::placeholder{color:rgba(248,244,233,.38)}
.fields input:focus,.fields textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(201,163,78,.14)}
.fields textarea{resize:vertical;min-height:72px}
.drawer-note{font-size:.7rem;letter-spacing:.04em;color:rgba(248,244,233,.5);text-align:center;margin-top:14px;line-height:1.7;padding:0 8px}
.drawer-note b{color:var(--gold-pale);font-weight:600}

/* ---------- 13. TOAST ---------- */
.toast-wrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  background:var(--emerald-950);color:var(--bone);border:1px solid var(--gold);
  border-radius:var(--r-sm);padding:13px 22px;font-size:.78rem;letter-spacing:.1em;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
  display:flex;align-items:center;gap:12px;
  animation:tin .45s var(--ease) both;
}
.toast svg{color:var(--gold)}
@keyframes tin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.toast.out{animation:tout .4s var(--ease) both}
@keyframes tout{to{opacity:0;transform:translateY(12px)}}

/* ---------- 14. STORY / CRAFT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.story-img{
  position:relative;aspect-ratio:4/5;border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;
  background:radial-gradient(70% 55% at 50% 32%,#12523F,#04211A 76%);display:grid;place-items:center;
}
.story-img .pat{position:absolute;inset:0;opacity:.16}
.story-img{background-size:cover;background-position:50% 42%}
.story-wash{
  position:absolute;inset:0;
  background:linear-gradient(175deg,rgba(2,22,15,.9) 0%,rgba(4,33,26,.82) 45%,rgba(6,43,34,.86) 100%);
}
.story-img .inner{position:relative;z-index:2}
.story-img .inner{position:relative;z-index:2;text-align:center;padding:34px;color:var(--gold-pale)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:26px;border-top:1px solid var(--hair)}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--serif);font-size:1.1rem;color:var(--gold);
  position:absolute;top:-14px;left:0;background:var(--bone);padding-right:12px;letter-spacing:.1em;
}
.sec.dark .step::before{background:var(--emerald-900)}
.sec.darker .step::before{background:var(--emerald-990)}
.step h4{margin:0 0 8px}
.step p{font-size:.92rem;color:var(--ink-soft);margin:0}
.sec.dark .step p,.sec.darker .step p{color:rgba(248,244,233,.75)}
.quote{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.5;font-style:italic;color:var(--gold-pale);text-align:center;max-width:900px;margin:0 auto}

/* ---------- 15. DELIVERY / FAQ / CONTACT ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info{padding:32px 28px;border:1px solid var(--hair);border-radius:var(--r-md);background:rgba(255,255,255,.5)}
.sec.dark .info,.sec.darker .info{background:rgba(255,255,255,.04)}
.info h4{margin:0 0 10px}
.info p{font-size:.92rem;color:var(--ink-soft);margin:0}
.sec.dark .info p,.sec.darker .info p{color:rgba(248,244,233,.76)}
.info .ic{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:999px;color:var(--gold);margin-bottom:16px}

.faq{max-width:900px;margin:0 auto}
.acc{border-bottom:1px solid rgba(156,122,46,.24)}
.acc summary{
  list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.12rem;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:8px;top:29px;width:12px;height:12px;
  border-right:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .4s var(--ease);
}
.acc[open] summary::after{transform:rotate(-135deg);top:33px}
.acc .a{padding:0 46px 24px 0;color:var(--ink-soft);font-size:.95rem}
.acc .a p{margin:0 0 .8em}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px)}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-list a,.contact-list div.row{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--hair);
  border-radius:var(--r-md);transition:all .35s var(--ease);background:rgba(255,255,255,.5);
}
.contact-list a:hover{border-color:var(--gold);transform:translateX(5px);background:#fff}
.contact-list .ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid var(--hair);border-radius:999px;color:var(--gold-deep)}
.contact-list .lbl{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.contact-list .val{font-size:.98rem}
.form{display:grid;gap:14px}
.form label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.form input,.form select,.form textarea{
  width:100%;border:1px solid rgba(156,122,46,.3);background:#fff;border-radius:var(--r-sm);
  padding:14px 16px;outline:none;transition:border-color .3s;font-size:.92rem;margin-top:7px;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- 16. FOOTER ---------- */
footer{background:var(--emerald-990);color:var(--bone);padding:clamp(54px,6.5vw,84px) 0 0;position:relative}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.foot-grid h4{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px}
.foot-grid p,.foot-grid li{font-size:.88rem;color:rgba(248,244,233,.7);line-height:1.9}
.foot-grid a:hover{color:var(--gold-pale)}
.foot-brand{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.foot-brand .medallion{width:56px;height:56px;flex:none}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair-soft);
  border-radius:999px;color:var(--gold-pale);transition:all .35s var(--ease);
}
.socials a:hover{background:var(--gold);color:#1A1405;border-color:var(--gold);transform:translateY(-3px)}
.foot-bottom{
  margin-top:52px;padding:22px 0;border-top:1px solid rgba(201,163,78,.16);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.7rem;letter-spacing:.12em;color:rgba(248,244,233,.55);
}

/* ---------- 16b. SOCIAL BAND ---------- */
.social-band{
  background:linear-gradient(100deg,var(--emerald-950),var(--emerald-850) 55%,var(--emerald-900));
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
}
.social-band .inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:30px 0}
.social-band h3{margin:0;font-size:1.4rem;color:var(--bone)}
.social-band p{margin:.3em 0 0;font-size:.86rem;color:rgba(248,244,233,.7)}
.social-band .links{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 17. FLOATING WHATSAPP ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:12px;
  background:var(--wa);color:#062B1E;border-radius:999px;padding:13px 22px 13px 16px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  box-shadow:0 20px 44px -18px rgba(37,211,102,.6);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float svg{flex:none}

/* ---------- 18. REVEAL / RESPONSIVE ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.center{text-align:center}
.mt0{margin-top:0}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mb0{margin-bottom:0}
.nowrap{white-space:nowrap}

@media(max-width:1080px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .nav{gap:22px}
  .brand-txt .en{font-size:1.02rem}
}
@media(max-width:920px){
  .nav{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-art{order:-1;min-height:280px}
  .hero-frame{aspect-ratio:16/11;width:100%;max-width:520px}
  .hero-frame .bottle{width:44%}
  .col-grid,.info-grid,.steps,.notes,.size-tiles{grid-template-columns:1fr}
  .size-tile .simg{aspect-ratio:16/11}
  .trust ul{grid-template-columns:1fr 1fr}
  .split,.pd,.contact-grid{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .prod-grid,.prod-grid.three{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pd-stage{aspect-ratio:1/1}
}
@media(max-width:600px){
  body{font-size:16px}
  .head-actions{gap:10px}
  .head-actions .icon-btn[href]{display:none}
  .brand{gap:11px}
  .brand-txt .en{font-size:.84rem;letter-spacing:.1em}
  .brand-txt .arb{font-size:.92rem}
  .topline{padding:8px 14px;font-size:.6rem;letter-spacing:.14em}
  .topline .lg{display:none}
  .topline .sm{display:inline}
  .wrap{padding:0 18px}
  .prod-grid,.prod-grid.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .trust ul{grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch}
  .search{min-width:0}
  .hero-cta .btn{flex:1 1 100%}
  .form .two{grid-template-columns:1fr}
  .wa-float span{display:none}
  .wa-float{padding:15px;border-radius:999px}
  .toast-wrap{top:74px;bottom:auto;width:calc(100% - 36px);left:18px;transform:none}
  .toast{width:100%;justify-content:center;text-align:center;font-size:.72rem;padding:12px 16px}
  .brand-txt .en{font-size:.92rem;letter-spacing:.14em}
  .brand .medallion{width:42px;height:42px}
}

/* ==========================================================================
   19. WELCOME OVERLAY — heartfelt entry animation
   ========================================================================== */
.welcome-overlay{
  position:fixed;inset:0;z-index:200;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(27,107,82,.55),transparent 60%),
    radial-gradient(90% 70% at 10% 100%,rgba(156,122,46,.28),transparent 62%),
    linear-gradient(160deg,var(--emerald-990),var(--emerald-900) 45%,var(--emerald-850));
  display:grid;place-items:center;
  opacity:1;visibility:visible;
  transition:opacity .9s var(--ease),visibility .9s;
  overflow:hidden;
}
.welcome-overlay.out{opacity:0;visibility:hidden;pointer-events:none}
.welcome-overlay.out .welcome-inner{animation:welcomeOut .9s var(--ease) both !important}
.welcome-overlay.out .welcome-ring circle{animation:ringDrawReverse .7s var(--ease) both}
.welcome-pat{
  position:absolute;inset:-10%;opacity:.13;pointer-events:none;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
  animation:patDrift 60s linear infinite;
}
.welcome-glow{
  position:absolute;width:640px;height:640px;right:-190px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,163,78,.22),transparent 66%);
  animation:glowDrift 18s ease-in-out infinite alternate;
}
.welcome-inner{
  position:relative;text-align:center;padding:40px 26px;max-width:520px;
  animation:welcomeIn 1.2s var(--ease) both;
}
.welcome-medallion-wrap{position:relative;width:96px;height:96px;margin:0 auto 22px}
.welcome-medallion{width:96px;height:96px;animation:medallionSpin 20s linear infinite}
.welcome-medallion .medallion{width:100%;height:100%}
.welcome-ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg)}
.welcome-ring circle{
  animation:ringDraw 2.2s cubic-bezier(.22,.61,.36,1) forwards;
}
.welcome-ar{font-family:var(--arabic);font-size:2.6rem;color:var(--gold-soft);line-height:1.5;opacity:0;animation:fadeUp 1s .4s var(--ease) forwards}
.welcome-title{font-family:var(--serif);font-size:2rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);margin:6px 0 8px;opacity:0;animation:fadeUp 1s .6s var(--ease) forwards}
.welcome-sub{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(248,244,233,.62);opacity:0;animation:fadeUp 1s .8s var(--ease) forwards}
.welcome-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0;opacity:0;animation:fadeUp 1s 1s var(--ease) forwards}
.welcome-orn i{display:block;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--hair) 45%,var(--hair) 55%,transparent);animation:hairGrow 1.2s 1.2s var(--ease) forwards}
.welcome-orn svg{color:var(--gold)}
.welcome-heart{font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.7;color:rgba(248,244,233,.82);margin:0 0 26px;opacity:0;animation:fadeUp 1s 1.2s var(--ease) forwards}
.welcome-loader{width:120px;height:1px;background:rgba(201,163,78,.18);margin:18px auto 0;overflow:hidden;opacity:0;animation:fadeUp 1s 1.4s var(--ease) forwards}
.welcome-loader span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-pale));animation:loaderGrow 2.2s 1.6s var(--ease) forwards}
#welcome-enter{opacity:0;animation:fadeUp 1s 1.6s var(--ease) forwards;box-shadow:0 0 0 1px rgba(201,163,78,.2),0 10px 30px -10px rgba(0,0,0,.6);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
#welcome-enter:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(201,163,78,.4),0 14px 36px -12px rgba(0,0,0,.7)}

@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes ringDrawReverse{from{stroke-dashoffset:0}to{stroke-dashoffset:276}}
@keyframes welcomeIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes welcomeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}
@keyframes hairGrow{to{width:120px}}
@keyframes loaderGrow{to{width:100%}}
@keyframes medallionSpin{to{transform:rotate(360deg)}}
@keyframes glowDrift{0%{transform:translate(0,0)}100%{transform:translate(-40px,30px)}}
@keyframes patDrift{0%{transform:translate(0,0)}100%{transform:translate(-60px,-40px)}}

/* ==========================================================================
   20. PROMO BANNER — TikTok shareable discounts
   ========================================================================== */
.promo-banner{
  background:linear-gradient(100deg,var(--gold),#E7C97A 50%,var(--gold));
  color:#1A1405;
  text-align:center;
  padding:10px 18px;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(26,20,5,.12);
}
.promo-banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:shimmerMove 3.5s ease-in-out infinite;
}
.promo-banner .promo-code{
  display:inline-block;background:#1A1405;color:var(--gold-pale);
  padding:2px 10px;border-radius:999px;margin:0 8px;letter-spacing:.18em;font-size:.7rem;
}
.promo-banner .promo-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;border-radius:999px;
  background:rgba(26,20,5,.1);cursor:pointer;
}
@keyframes shimmerMove{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.price-was{font-size:.9rem;opacity:.55;text-decoration:line-through;margin-right:8px}
.price-now{color:var(--emerald-800);font-weight:700}

/* ==========================================================================
   21. LUXURY ANIMATIONS — upgraded reveals, floats, flights
   ========================================================================== */
/* Upgraded reveal with blur + hairline; keep content visible without JavaScript. */
html.js .reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none;filter:none}
html.js .reveal .orn i{width:0;transition:width 1s var(--ease) .3s}
html.js .reveal.in .orn i{width:min(150px,22vw)}

/* Bottle float + gold glow */
@keyframes bottleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.card:hover .shot .bottle{animation:bottleFloat 4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(201,163,78,.45))}
.card .shot .bottle{transition:transform .7s var(--ease),filter .7s var(--ease)}

/* Girih drift */
.hero .pat-bg,.card .shot .pat{animation:patDrift 60s linear infinite}
.trust{position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A34E' stroke-width='1'%3E%3Cpath d='M60 8 74 22 94 22 94 42 108 56 94 70 94 90 74 90 60 104 46 90 26 90 26 70 12 56 26 42 26 22 46 22Z'/%3E%3C/g%3E%3C/svg%3E");background-size:120px 120px;animation:patDrift 80s linear infinite reverse;pointer-events:none}

/* Size pill morph */
.size{position:relative;overflow:hidden}
.size::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--emerald-850);transition:width .45s var(--ease);z-index:0}
.size[aria-pressed=\"true\"]::before{width:100%}
.size{position:relative;z-index:1}
.size *{position:relative;z-index:2}

/* Collection number parallax */
.col-card .num{transition:transform .8s var(--ease)}
.col-card:hover .num{transform:translateY(-6px) scale(1.08)}

/* Story wash wipe */
.story-wash{transform:translateX(0);transition:transform 1.2s var(--ease)}
html.js .story-img.reveal .story-wash{transform:translateX(-101%)}
html.js .story-img.reveal.in .story-wash{transform:translateX(0);animation:wipeReveal 1.4s var(--ease) forwards}
@keyframes wipeReveal{0%{transform:translateX(-101%)}100%{transform:translateX(0)}}

/* Drawer spring */
.drawer{transition:transform .65s cubic-bezier(.22,1,.36,1)}
.drawer.open{animation:drawerSpring .7s cubic-bezier(.22,1,.36,1)}
@keyframes drawerSpring{0%{transform:translateX(103%)}70%{transform:translateX(-4%)}100%{transform:translateX(0)}}
.ci{opacity:0;transform:translateX(18px);animation:ciIn .5s var(--ease) forwards}
@keyframes ciIn{to{opacity:1;transform:none}}

/* Flight animation for add-to-cart */
.fly-bottle{
  position:fixed;z-index:150;pointer-events:none;
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--emerald-950);border:1px solid var(--gold);border-radius:6px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity .8s;
}
.fly-bottle svg{width:70%;height:70%}

/* Price flash */
@keyframes priceFlash{0%{color:var(--gold)}100%{color:inherit}}
.price.flash{animation:priceFlash .6s var(--ease)}

/* Vault badge pulse */
.badge.solid{animation:vaultPulse 2.2s ease-in-out infinite}
@keyframes vaultPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,163,78,.4)}50%{box-shadow:0 0 0 8px rgba(201,163,78,0)}}

/* Toast gold edge draw */
.toast{position:relative;overflow:hidden}
.toast::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-pale));transform:scaleX(0);transform-origin:left;animation:toastEdge .5s .1s var(--ease) forwards}
@keyframes toastEdge{to{transform:scaleX(1)}}

/* Product detail spotlight */
.pd-stage{position:relative}
.pd-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 300px at var(--mx,50%) var(--my,50%),rgba(201,163,78,.14),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:3}
.pd-stage:hover::after{opacity:1}

/* Pyramid line grow */
.notes .note{position:relative;padding-left:16px}
.notes .note::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,var(--gold),transparent);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.notes .note.in::before{transform:scaleY(1)}

/* ---------- PRINT ---------- */
@media print{
  .site-head,.wa-float,.drawer,.scrim,.topline,.welcome-overlay,.promo-banner,.checkout-success{display:none !important}
  body{background:#fff}
}

/* ==========================================================================
   22. CHECKOUT SUCCESS
   ========================================================================== */
.checkout-success{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(120% 90% at 78% 8%,rgba(27,107,82,.55),transparent 60%),radial-gradient(90% 70% at 10% 100%,rgba(156,122,46,.28),transparent 62%),linear-gradient(160deg,var(--emerald-990),var(--emerald-900) 45%,var(--emerald-850));color:var(--bone);text-align:center}
.checkout-success[hidden]{display:none}
.checkout-success-inner{max-width:480px;padding:36px 26px;animation:welcomeIn .8s var(--ease) both}
.success-medallion-wrap{position:relative;width:96px;height:96px;margin:0 auto 18px}
.success-medallion{width:96px;height:96px;animation:medallionSpin 20s linear infinite}
.success-ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg)}
.success-ring circle{animation:ringDraw 1.8s .3s cubic-bezier(.22,.61,.36,1) forwards}
.success-check{position:absolute;inset:0;display:grid;place-items:center;font-size:2.2rem;color:var(--gold);opacity:0;animation:fadeUp .6s 1s var(--ease) forwards}
.checkout-success.out{animation:welcomeOut .6s var(--ease) both}
.checkout-success.out .checkout-success-inner{animation:welcomeOut .6s var(--ease) both}