/* ============================================================
   Habibi Perfume — mobile-first delivery-app layout
   Architecture base: Habibiperfumemaybe (Faloodeh)
   Visual: habibi_perfume.html  ·  Curtains: Habibiperfume_start
   ============================================================ */
:root {
  --gold:#C9A84C; --gold-l:#E8C97A; --gold-d:#8A6E30;
  --teal:#0B2424; --teal2:#0F2C2C; --teal3:#153535; --teal4:#1A4040;
  --dark:#070E0E; --cream:#F5EDD6;
  --ink:#F5EDD6; --bg:#070E0E; --card:#0F2C2C;
  --red:#C0392B; --green:#1f7a3a;
  --shadow:0 6px 22px rgba(0,0,0,.45);
  --r:4px;
}

* { box-sizing: border-box; }
html, body { margin:0; }
html { background:var(--bg); }
body {
  font-family:'Jost',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:transparent;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* Site backdrop: Curtains_perfume.webp, proportional (cover), fixed so it
   doesn't scroll, dimmed so foreground content stays legible. */
body::before {
  content:""; position:fixed; inset:0; z-index:-2;
  background-image:url("assets/Curtains_perfume.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:.45;
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(201,168,76,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(31,78,58,.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7,14,14,.78) 0%, rgba(7,14,14,.62) 50%, rgba(7,14,14,.85) 100%);
}

/* ===== Lock screen ===== */
body.crm-locked > *:not(#crm-lock) { display:none !important; }
.crm-lock {
  display:none; position:fixed; inset:0; z-index:99999;
  background:
    radial-gradient(ellipse at center, rgba(201,168,76,.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--teal) 0%, var(--dark) 100%);
  align-items:center; justify-content:center; padding:20px;
}
.crm-lock.show { display:flex; }
.crm-lock-box {
  background:rgba(15,44,44,.92);
  border:1px solid rgba(201,168,76,.25);
  border-radius:10px; padding:36px 28px;
  width:100%; max-width:360px; text-align:center;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.lock-lamp {
  display:block; width:64px; height:64px;
  object-fit:contain;
  margin:0 auto 10px;
  filter:drop-shadow(0 0 14px rgba(201,168,76,.55));
}
.crm-lock-box h2 {
  font-family:'Cinzel Decorative',serif; color:var(--gold);
  margin:0 0 4px; font-size:1.3rem; letter-spacing:.05em;
}
.crm-lock-box p {
  color:rgba(245,237,214,.55); font-size:.85rem; margin:0 0 20px;
  font-style:italic; font-family:'Cormorant Garamond',serif;
}
.crm-lock-box input {
  width:100%; padding:12px 14px; font-size:1rem; font-family:inherit;
  background:rgba(255,255,255,.05); color:var(--ink);
  border:1px solid rgba(201,168,76,.25); border-radius:var(--r);
  outline:none; margin-bottom:12px;
}
.crm-lock-box input:focus { border-color:var(--gold); }
.crm-lock-box button {
  width:100%; padding:12px; border:0; border-radius:var(--r);
  background:var(--gold); color:var(--dark);
  font-weight:700; font-size:.85rem; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer; font-family:'Jost',sans-serif;
  transition:background .2s;
}
.crm-lock-box button:hover { background:var(--gold-l); }
.crm-pw-err { color:var(--red); font-size:.78rem; margin-top:10px !important; margin-bottom:0 !important; }

/* ===== Topbar ===== */
.topbar {
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 1.2rem;
  background:rgba(7,14,14,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,168,76,.2);
}
.brand { display:flex; align-items:center; gap:.8rem; }
.brand-lamp {
  display:block; width:42px; height:42px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(201,168,76,.45));
}
.brand h1 {
  margin:0; font-family:'Cinzel Decorative',serif;
  color:var(--gold); font-size:1.15rem; letter-spacing:.04em;
  line-height:1;
}
.tagline {
  margin:.2rem 0 0; color:rgba(245,237,214,.45);
  font-size:.7rem; letter-spacing:.08em;
  font-family:'Cormorant Garamond',serif; font-style:italic;
}
.admin-link {
  color:var(--gold); text-decoration:none; font-size:.65rem;
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  border:1px solid rgba(201,168,76,.4); padding:.45rem .9rem; border-radius:var(--r);
  transition:all .2s;
}
.admin-link:hover { background:var(--gold); color:var(--dark); }

/* ===== Intro splash (banner-as-window + smoke dispersal) ===== */
.splash {
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.92) 70%);
  backdrop-filter:blur(10px);
  overflow:hidden;
  animation:splashIn .6s ease;
}
.splash[hidden] { display:none; }
@keyframes splashIn { from { opacity:0; } to { opacity:1; } }

.splash-window {
  position:relative;
  width:min(100%, 1100px);
  border-radius:8px;
  overflow:hidden;
  box-shadow:
    0 30px 90px rgba(0,0,0,.85),
    0 0 80px rgba(201,168,76,.18),
    0 0 0 1px rgba(201,168,76,.25) inset;
  animation:windowIn .9s cubic-bezier(.2,.7,.2,1);
  transform-origin:center;
}
@keyframes windowIn {
  from { opacity:0; transform:scale(.85); filter:blur(8px); }
  to   { opacity:1; transform:scale(1);   filter:blur(0); }
}
.splash-window img {
  display:block; width:100%; height:auto;
}
.splash-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 6% 6%;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Banner window fades out first when Continue is clicked */
.splash-window { transition:opacity .7s ease, transform .7s ease; }
.splash.granting .splash-window { opacity:0; transform:scale(.96); pointer-events:none; }

/* The wish sits in its own centered layer, revealed only after the window */
.splash-wish {
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:0 8%; pointer-events:none;
}
.splash-line {
  margin:0;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  color:var(--gold);
  font-size:clamp(1.4rem, 3.4vw, 2.4rem);
  letter-spacing:.04em;
  text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 28px rgba(201,168,76,.4);
  opacity:0;            /* hidden until the "wishing" phase */
}
/* After the window fades: the wish fades in, holds, fades out */
.splash.wishing .splash-line { animation:wishFlash 2.2s ease forwards; }
@keyframes wishFlash {
  0%   { opacity:0; transform:translateY(12px); }
  24%  { opacity:1; transform:translateY(0); }
  70%  { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-10px); }
}
.splash-continue {
  background:var(--gold); color:var(--dark);
  border:0; border-radius:3px;
  padding:14px 38px;
  font-family:'Jost', sans-serif;
  font-size:.78rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(201,168,76,.4), 0 0 24px rgba(232,201,122,.3);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.splash-continue:hover {
  background:var(--gold-l); transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(201,168,76,.5);
}

/* Smoke puffs — hidden until dispersal */
.splash .smoke {
  position:absolute; left:50%; top:50%;
  width:60vmin; height:60vmin;
  margin:-30vmin 0 0 -30vmin;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(220,210,180,.45) 0%,
    rgba(180,170,140,.25) 35%,
    rgba(120,110,90,.1) 60%,
    transparent 75%);
  filter:blur(20px);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.splash .smoke-2 { width:80vmin; height:80vmin; margin:-40vmin 0 0 -40vmin; }
.splash .smoke-3 { width:45vmin; height:45vmin; margin:-22vmin 0 0 -22vmin; }

/* Dispersal: window is already gone — smoke puffs swell, then everything fades */
.splash.dispersing .smoke-1 { animation:puff 1.4s ease-out forwards;             animation-delay:.05s; }
.splash.dispersing .smoke-2 { animation:puff 1.4s ease-out forwards;             animation-delay:.15s; }
.splash.dispersing .smoke-3 { animation:puff 1.2s ease-out forwards;             animation-delay:.0s; }
.splash.dispersing           { animation:splashOut 1.4s ease forwards; animation-delay:.3s; }

@keyframes smokeOut {
  0%   { opacity:1; transform:scale(1)    rotate(0);    filter:blur(0); }
  50%  { opacity:.5; transform:scale(1.12) rotate(.6deg); filter:blur(18px); }
  100% { opacity:0;  transform:scale(1.35) rotate(-.4deg); filter:blur(48px); }
}
@keyframes puff {
  0%   { opacity:0; transform:scale(.4)  translateY(0); }
  35%  { opacity:.9; transform:scale(1)   translateY(-4vmin); }
  100% { opacity:0;  transform:scale(1.8) translateY(-14vmin); filter:blur(40px); }
}
@keyframes splashOut { to { opacity:0; } }

@media (max-width:640px) {
  .splash { padding:16px; }
  .splash-line { margin-bottom:14px; }
  .splash-continue { padding:12px 28px; font-size:.72rem; letter-spacing:.2em; }
}

/* ===== Hero banner =====
   Image is 16:9 with baked-in art + text; show the whole thing (contain).
   On wide screens the centered image is flanked by side bars — those bars
   gradient from the image's dark edge out to transparent so the curtain
   backdrop bleeds through instead of looking like hard black bars. */
.hero {
  display:flex; align-items:center; justify-content:center;
  width:100%;
  background:linear-gradient(
    90deg,
    transparent 0,
    transparent calc(50% - 800px),
    #000 calc(50% - 700px),
    #000 calc(50% + 700px),
    transparent calc(50% + 800px),
    transparent 100%
  );
  border-bottom:1px solid rgba(201,168,76,.18);
  overflow:hidden;
  line-height:0;
}
.hero img {
  display:block;
  width:100%; height:auto;
  max-width:1600px;
  max-height:62vh;
  object-fit:contain;
}
@media (max-width:640px) {
  .hero img { max-height:38vh; }
}

/* ===== Category band (search + infinity slider) ===== */
.cat-band {
  max-width:1400px; margin:0 auto;
  padding:1.25rem 1.25rem .25rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.cat-band .search-wrap { max-width:380px; width:100%; }

/* ===== Infinity Slider ===== */
.cat-slider-wrap{position:relative;}
.cat-slider{position:relative;height:138px;overflow:hidden;cursor:grab;outline:none;user-select:none;
  touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}

/* Paging buttons — siblings of the slider so the edge mask doesn't fade them */
.islider-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  background:rgba(7,14,14,.78);color:var(--gold);
  border:1px solid rgba(201,168,76,.4);border-radius:999px;
  padding:9px 14px;font-family:'Jost',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:background .2s,color .2s,transform .15s;
}
.islider-nav:hover{background:var(--gold);color:var(--dark);}
.islider-nav:active{transform:translateY(-50%) scale(.94);}
.islider-nav.prev{left:6px;}
.islider-nav.next{right:6px;}
@media(max-width:640px){
  .islider-nav{padding:8px 11px;font-size:.56rem;letter-spacing:.1em;}
}
.cat-slider:active{cursor:grabbing;}
.islider-track{position:absolute;inset:0;}
.islider-item{position:absolute;top:50%;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  height:98px;padding:.6rem .55rem;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:#0F2C2C;
  color:rgba(245,237,214,.6);font-family:'Cinzel',serif;font-size:.82rem;font-weight:600;letter-spacing:.07em;text-align:center;
  overflow:hidden;isolation:isolate;cursor:pointer;will-change:transform,opacity;transition:border-color .25s,color .25s,box-shadow .3s;}
.islider-bg{position:absolute;inset:0;z-index:-2;background:var(--img,none) center/cover;filter:grayscale(1) brightness(.35);opacity:.5;transition:filter .35s,opacity .35s;}
.islider-spot{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 85% 80% at 50% 42%,rgba(201,168,76,.22),transparent 65%),linear-gradient(180deg,rgba(7,14,14,.4),rgba(7,14,14,.7));}
.islider-label{position:relative;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.islider-count{position:relative;z-index:1;font-family:'Jost',sans-serif;font-size:.66rem;color:rgba(245,237,214,.5);background:rgba(7,14,14,.55);padding:1px 9px;border-radius:999px;}
.islider-item.active{color:#E8C97A;border-color:rgba(201,168,76,.55);box-shadow:0 10px 34px rgba(201,168,76,.2),inset 0 0 0 1px rgba(201,168,76,.28);}
.islider-item.active .islider-bg{filter:grayscale(0) brightness(.7);opacity:.92;}

/* ===== Layout ===== */
.layout {
  display:grid;
  grid-template-columns:170px 1fr 340px;
  gap:1.25rem;
  padding:1.25rem;
  max-width:1400px;
  margin:0 auto;
}
/* Two-column variant: category picker now lives in the band above */
.layout-2col { grid-template-columns:1fr 340px; }

/* ===== Sidebar (search + categories) ===== */
.sidebar { display:flex; flex-direction:column; gap:.8rem; align-content:start; }

.search-wrap {
  position:relative; display:flex; align-items:center;
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); transition:border-color .2s;
}
.search-wrap:focus-within { border-color:rgba(201,168,76,.55); }
.search-icon {
  padding:0 .55rem 0 .7rem; color:rgba(201,168,76,.55); font-size:.85rem;
  pointer-events:none;
}
.search-wrap input {
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:var(--ink); font-family:inherit; font-size:.85rem;
  padding:.65rem .4rem .65rem 0;
}
.search-wrap input::placeholder { color:rgba(245,237,214,.3); }
.search-clear {
  background:transparent; border:0; color:rgba(245,237,214,.45);
  font-size:.95rem; cursor:pointer; padding:0 .65rem; line-height:1;
}
.search-clear:hover { color:var(--gold); }

.categories { display:flex; flex-direction:column; gap:.55rem; align-content:start; }

/* Each category is a spotlight tile: blurred grayscale image behind, golden
   radial glow ("spotlight") centered on the label, and a dark vignette so the
   serif name stays legible. Active tile loses the grayscale + brightens. */
.cat {
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.95rem 1rem;
  min-height:62px;
  border:1px solid rgba(255,255,255,.05);
  border-left:3px solid transparent;
  border-radius:var(--r);
  background:var(--card);
  cursor:pointer;
  color:rgba(245,237,214,.55);
  font-family:'Cinzel',serif; font-size:.85rem; font-weight:600;
  letter-spacing:.1em; text-align:left;
  overflow:hidden;
  transition:color .25s, border-color .25s, transform .2s;
  isolation:isolate;
}

/* Grayed-out background image (each tile sets --cat-img inline) */
.cat-bg {
  position:absolute; inset:0; z-index:-2;
  background-image:var(--cat-img,none);
  background-size:cover; background-position:center;
  filter:grayscale(1) brightness(.35) contrast(1.05);
  opacity:.55;
  transition:filter .35s ease, opacity .35s ease, transform .6s ease;
}
/* Spotlight — radial glow + dark edges so the word feels lit from behind */
.cat-spot {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 90% at 30% 50%,
      rgba(201,168,76,.25) 0%,
      rgba(201,168,76,.08) 30%,
      transparent 60%),
    linear-gradient(90deg, rgba(7,14,14,.55) 0%, rgba(7,14,14,.2) 55%, rgba(7,14,14,.75) 100%);
  transition:opacity .3s ease;
}

.cat-label { position:relative; z-index:1; text-shadow:0 1px 8px rgba(0,0,0,.7); }
.cat-count {
  position:relative; z-index:1;
  color:rgba(245,237,214,.45);
  font-family:'Jost',sans-serif; font-size:.7rem; font-weight:500;
  background:rgba(7,14,14,.55); padding:2px 8px; border-radius:999px;
}

.cat:hover {
  color:var(--gold); border-color:rgba(201,168,76,.25);
  transform:translateX(2px);
}
.cat:hover .cat-bg { filter:grayscale(.6) brightness(.5); opacity:.7; }

.cat.active {
  color:var(--gold);
  border-left-color:var(--gold);
  border-color:rgba(201,168,76,.4);
}
.cat.active .cat-bg { filter:grayscale(0) brightness(.65) contrast(1.1); opacity:.9; }
.cat.active .cat-spot {
  background:
    radial-gradient(ellipse 75% 100% at 30% 50%,
      rgba(232,201,122,.4) 0%,
      rgba(201,168,76,.18) 35%,
      transparent 65%),
    linear-gradient(90deg, rgba(7,14,14,.45) 0%, rgba(7,14,14,.1) 55%, rgba(7,14,14,.7) 100%);
}
.cat.active .cat-count { color:var(--gold); background:rgba(7,14,14,.7); }

/* ===== Product grid ===== */
.menu {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1rem;
  align-content:start;
}

/* ===== Product card with curtain ===== */
.product {
  --curtain-light:#4a3018; --curtain-mid:#2a1a08; --curtain-dark:#0a0604;
  background:var(--card);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.23,1,.32,1), border-color .2s, box-shadow .3s;
}
.product:hover {
  transform:translateY(-4px);
  border-color:rgba(201,168,76,.35);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.product.oud   { --curtain-light:#4a3018; --curtain-mid:#2a1a08; --curtain-dark:#0a0604; }
.product.floral{ --curtain-light:#7a1830; --curtain-mid:#3a0a14; --curtain-dark:#150406; }
.product.oriental,.product.amber { --curtain-light:#6a2818; --curtain-mid:#3a0e06; --curtain-dark:#150603; }
.product.spicy { --curtain-light:#7a3a10; --curtain-mid:#3a1a06; --curtain-dark:#150803; }
.product.woody { --curtain-light:#3a2a14; --curtain-mid:#20160a; --curtain-dark:#0a0604; }

.product-visual {
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(135deg, var(--teal3), var(--teal4));
  display:flex; align-items:center; justify-content:center;
}
.bottle-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:1;
}

/* === GRADIENT SHADOW — present at rest, fades away on hover ======
   Darkens the fragrance at rest; clears as the card opens so it
   "lights up" alongside the .reveal-fx glow.                       */
.product-visual::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:1; transition:opacity .6s ease;
  background:
    radial-gradient(ellipse 78% 64% at 50% 46%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 28%, transparent 68%, rgba(0,0,0,.5) 100%);
}
.product.open .product-visual::before { opacity:0; }
/* === END GRADIENT SHADOW ======================================== */

/* === REVEAL-FX LAYER — easy to delete ===========================
   Sits between the bottle image (z1) and the curtains (z4). Glows /
   sheens in as a card opens. To remove: delete this block AND the
   <span class="reveal-fx"> in app.js's card template.            */
.reveal-fx {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
  background:
    radial-gradient(ellipse 62% 52% at 50% 44%, rgba(232,201,122,.30), transparent 70%),
    linear-gradient(115deg, transparent 42%, rgba(255,245,220,.20) 50%, transparent 58%);
}
.product.open .reveal-fx { opacity:1; }
/* === END REVEAL-FX LAYER ======================================== */
/* subtle window-frame vignette so the image reads as a view through glass */
.product-visual::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.bottle-placeholder {
  font-size:3.2rem; color:rgba(201,168,76,.35);
  z-index:1;
}

/* Velvet curtains — ported from Habibiperfume_start */
.curtain {
  position:absolute; top:0; bottom:0;
  width:52%;
  background:
    linear-gradient(180deg, rgba(255,220,180,.1) 0%, transparent 25%, rgba(0,0,0,.4) 100%),
    linear-gradient(to right,
      var(--curtain-dark) 0%,
      var(--curtain-light) 16%,
      var(--curtain-mid) 30%,
      var(--curtain-light) 50%,
      var(--curtain-mid) 70%,
      var(--curtain-light) 86%,
      var(--curtain-dark) 100%);
  z-index:4;
  transition:transform .55s cubic-bezier(.5,0,.2,1);
  will-change:transform;
}
.curtain::before {
  content:""; position:absolute; top:0; left:0; right:0; height:14%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 80%, transparent 100%),
    linear-gradient(to right,
      var(--curtain-dark) 0%, var(--curtain-mid) 12%,
      var(--curtain-dark) 24%, var(--curtain-mid) 38%,
      var(--curtain-dark) 50%, var(--curtain-mid) 62%,
      var(--curtain-dark) 76%, var(--curtain-mid) 88%,
      var(--curtain-dark) 100%);
  border-bottom:1px solid rgba(0,0,0,.55);
  z-index:1;
}
.curtain::after {
  content:""; position:absolute; bottom:8%;
  width:7px; height:14px;
  background:radial-gradient(ellipse at 50% 25%, var(--gold-l) 0%, var(--gold) 50%, #8a6e3d 100%);
  border-radius:50% 50% 60% 60% / 35% 35% 70% 70%;
  box-shadow:0 2px 4px rgba(0,0,0,.7), 0 0 6px rgba(232,201,122,.45);
  z-index:2;
}
/* Default: curtains parted to 3/5 open (each retracted ~60% of its own width) */
.curtain-left  { left:0;  box-shadow:inset -10px 0 16px rgba(0,0,0,.55); transform:translateX(-60%); }
.curtain-right { right:0; box-shadow:inset 10px 0 16px rgba(0,0,0,.55);  transform:translateX(60%); }
.curtain-left::after  { right:8%; }
.curtain-right::after { left:8%; }

/* Hover / tap: opens further to ~5/7 (each retracted ~72%) */
/* Only ONE card is "open" at a time — managed in JS on hover/tap.
   Every other card stays at the default partial-open (3/5) position above. */
.product.open .curtain-left  { transform:translateX(-72%); }
.product.open .curtain-right { transform:translateX(72%); }

.product-badge {
  position:absolute; top:10px; left:10px; z-index:5;
  background:var(--gold); color:var(--dark);
  font-size:.55rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:3px 9px; border-radius:1px;
}

.product-body { padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.product-cat {
  font-size:.55rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold-d);
}
.product-name {
  margin:0; font-family:'Cinzel',serif; font-size:.95rem; font-weight:600;
  color:var(--cream); line-height:1.25;
}
.product-notes {
  margin:0; font-size:.75rem; color:rgba(245,237,214,.45); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:'Cormorant Garamond',serif; font-style:italic;
}
.product-foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.6rem; gap:.5rem;
}
.product-price {
  font-family:'Cinzel',serif; font-size:1.05rem; font-weight:600; color:var(--gold);
}
.product-price small { font-family:'Jost',sans-serif; font-size:.6rem; color:var(--gold-d); }
.product button.add {
  background:transparent; color:var(--gold);
  border:1px solid rgba(201,168,76,.35);
  font-family:'Jost',sans-serif; font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem .85rem; border-radius:1px; cursor:pointer;
  transition:all .2s;
}
.product button.add:hover { background:var(--gold); color:var(--dark); }

/* Read More Details — gold pill inside each card */
.details-btn {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; margin-top:.7rem;
  padding:.6rem .9rem;
  background:linear-gradient(180deg, rgba(20,10,4,.65) 0%, rgba(7,4,2,.85) 100%);
  color:var(--gold-l);
  border:1.5px solid;
  border-image:linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 45%, var(--gold-d) 100%) 1;
  border-radius:999px;
  font-family:'Cinzel',serif; font-weight:700;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer;
  text-shadow:0 1px 6px rgba(0,0,0,.7), 0 0 12px rgba(232,201,122,.35);
  box-shadow:
    inset 0 0 12px rgba(232,201,122,.15),
    0 4px 12px rgba(0,0,0,.35);
  transition:all .2s ease;
}
.details-btn:hover {
  color:#fff2c7;
  box-shadow:
    inset 0 0 18px rgba(232,201,122,.28),
    0 6px 18px rgba(201,168,76,.35),
    0 0 24px rgba(232,201,122,.25);
  transform:translateY(-1px);
}
.details-star {
  color:var(--gold-l); font-size:.7rem; line-height:1;
  filter:drop-shadow(0 0 6px rgba(232,201,122,.5));
}
@media (max-width:640px) {
  .details-btn { font-size:.54rem; letter-spacing:.16em; padding:.55rem .7rem; }
}

/* ============================================================
   PRODUCT DETAILS MODAL
   Two-column layout: big image + info panel with characteristics,
   description, payment & returns. Dark Habibi palette + gold.
   ============================================================ */
.pd-modal {
  position:fixed; inset:0; z-index:3000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.pd-modal.open { display:flex; animation:pdFade .25s ease; }
@keyframes pdFade { from{opacity:0} to{opacity:1} }

.pd-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
}
.pd-panel {
  position:relative; z-index:1;
  width:min(1080px, 100%);
  max-height:92vh; overflow:hidden;
  background:var(--card);
  border:1px solid rgba(201,168,76,.3);
  border-radius:8px;
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(201,168,76,.18);
  display:grid;
  grid-template-columns:1fr 1fr;
  animation:pdRise .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes pdRise { from{opacity:0; transform:translateY(20px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }

.pd-close {
  position:absolute; top:14px; right:14px; z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(7,14,14,.7); border:1px solid rgba(201,168,76,.4);
  color:var(--gold); font-size:.9rem; cursor:pointer;
  transition:background .2s, transform .15s;
}
.pd-close:hover { background:var(--gold); color:var(--dark); transform:rotate(90deg); }

/* Media column */
.pd-media {
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(201,168,76,.08), transparent 70%),
    linear-gradient(135deg, var(--teal3), var(--teal4));
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
}
.pd-hero { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.pd-hero-img {
  max-width:100%; max-height:56vh; object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
}

/* Info column */
.pd-info {
  padding:38px 36px 32px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:.75rem;
  max-height:92vh;
}
.pd-info::-webkit-scrollbar { width:6px; }
.pd-info::-webkit-scrollbar-thumb { background:rgba(201,168,76,.3); border-radius:3px; }

.pd-eyebrow {
  font-family:'Jost',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.35em; text-transform:uppercase; color:var(--gold-d);
}
.pd-name {
  font-family:'Cinzel',serif; font-size:clamp(1.4rem, 3vw, 1.9rem);
  font-weight:600; color:var(--cream); margin:0; line-height:1.15;
}
.pd-price {
  font-family:'Cinzel',serif; font-size:1.35rem; font-weight:600; color:var(--gold);
  margin:.2rem 0 .8rem;
}

.pd-size-label {
  font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,237,214,.55); margin-top:.2rem;
}
.pd-sizes { display:flex; gap:.5rem; flex-wrap:wrap; }
.pd-size {
  background:transparent; color:var(--cream);
  border:1px solid rgba(245,237,214,.2); border-radius:2px;
  padding:.55rem 1rem; font-family:'Jost',sans-serif; font-size:.85rem;
  cursor:pointer; transition:all .2s;
}
.pd-size.active, .pd-size:hover { border-color:var(--gold); color:var(--gold); }

.pd-actions { display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.pd-btn {
  padding:.85rem 1rem;
  font-family:'Jost',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  border-radius:3px; cursor:pointer; transition:all .2s;
}
.pd-btn-primary {
  background:var(--gold); color:var(--dark); border:0;
  box-shadow:0 8px 22px rgba(201,168,76,.32);
}
.pd-btn-primary:hover { background:var(--gold-l); transform:translateY(-1px); }
.pd-btn-ghost {
  background:transparent; color:var(--cream);
  border:1px solid rgba(245,237,214,.3);
}
.pd-btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* Collapsibles */
.pd-section {
  border-top:1px solid rgba(201,168,76,.15);
  padding:.9rem 0 .3rem;
}
.pd-section summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Cinzel',serif; font-size:.82rem; font-weight:600;
  letter-spacing:.08em; color:var(--cream);
  padding:.15rem 0;
}
.pd-section summary::-webkit-details-marker { display:none; }
.pd-section summary::after {
  content:"▾"; color:var(--gold); font-size:.7rem;
  transition:transform .2s;
}
.pd-section[open] summary::after { transform:rotate(180deg); }
.pd-section p {
  margin:.6rem 0 .3rem;
  font-size:.86rem; font-family:'Cormorant Garamond',serif;
  color:rgba(245,237,214,.7); line-height:1.7;
}
.pd-dl {
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem;
  margin:.7rem 0 .3rem; font-size:.82rem;
}
.pd-dl dt { color:rgba(245,237,214,.5); font-family:'Jost',sans-serif; letter-spacing:.05em; }
.pd-dl dd { color:var(--cream); font-family:'Jost',sans-serif; font-weight:600; margin:0; word-break:break-all; }

/* Mobile: stack image over info */
@media (max-width:820px) {
  .pd-panel { grid-template-columns:1fr; max-height:96vh; }
  .pd-media { min-height:280px; }
  .pd-hero-img { max-height:36vh; }
  .pd-info { padding:24px 20px 24px; }
}

/* ===== Cart aside ===== */
.cart {
  background:var(--card);
  border:1px solid rgba(201,168,76,.15);
  border-radius:var(--r);
  padding:1.2rem;
  height:fit-content;
  position:sticky; top:5rem;
  box-shadow:var(--shadow);
}
.cart-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.cart-lamp {
  display:block; width:30px; height:30px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(201,168,76,.4));
}
.foot-brand { display:inline-flex; align-items:center; gap:.5rem; }
.foot-brand img { width:20px; height:20px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(201,168,76,.35)); }
.cart h2 {
  margin:0; font-family:'Cinzel',serif; color:var(--gold); font-size:1.05rem;
  letter-spacing:.05em; flex:1;
}
.cart-close {
  display:none; background:transparent; border:0; color:rgba(245,237,214,.5);
  font-size:1.4rem; cursor:pointer; line-height:1; padding:0 4px;
}
#cart-items { list-style:none; padding:0; margin:0 0 .8rem; }
#cart-items li {
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.85rem; gap:.5rem;
}
#cart-items .ci-name { font-family:'Cormorant Garamond',serif; font-size:.95rem; color:var(--cream); flex:1; }
#cart-items .ci-price { color:var(--gold); font-weight:600; font-family:'Cinzel',serif; font-size:.85rem; }
#cart-items button {
  background:transparent; border:0; color:rgba(192,57,43,.6);
  cursor:pointer; font-size:1.1rem; padding:0 4px;
}
#cart-items button:hover { color:var(--red); }
.cart-empty {
  text-align:center; padding:1rem 0; color:rgba(245,237,214,.3);
  font-size:.85rem; font-family:'Cormorant Garamond',serif; font-style:italic;
}
.cart-empty span { font-size:.75rem; opacity:.7; }
.total {
  font-family:'Cinzel',serif; color:var(--gold); font-size:1rem; font-weight:600;
  border-top:1px solid rgba(201,168,76,.2); padding-top:.8rem; margin-bottom:1rem;
  display:flex; justify-content:space-between;
}
#order-form { display:flex; flex-direction:column; gap:.55rem; }
#order-form input, #order-form textarea {
  padding:.6rem .8rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);
  color:var(--ink); font-family:inherit; font-size:.88rem;
  outline:none; transition:border-color .2s;
}
#order-form input::placeholder, #order-form textarea::placeholder { color:rgba(245,237,214,.25); }
#order-form input:focus, #order-form textarea:focus { border-color:rgba(201,168,76,.5); }
#order-form textarea { resize:vertical; min-height:60px; }

.send-buttons { display:flex; flex-direction:column; gap:.5rem; margin-top:.3rem; }
.btn-send {
  padding:.8rem; border:0; border-radius:var(--r); cursor:pointer;
  font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:white; font-family:'Jost',sans-serif; transition:all .2s;
}
.btn-send.btn-wa { background:#25d366; color:#08361a; }
.btn-send.btn-wa:hover { background:#1eb858; }
.btn-send.btn-sms { background:var(--teal4); color:var(--gold); border:1px solid var(--gold); }
.btn-send.btn-sms:hover { background:var(--gold); color:var(--dark); }
.btn-send.btn-confirm { background:var(--gold); color:var(--dark); }
.btn-send.btn-confirm:hover { background:var(--gold-l); }
.btn-send:disabled { opacity:.6; cursor:wait; }
#order-confirm {
  margin-top:1rem; padding:.75rem .85rem; border-radius:var(--r);
  font-size:.82rem; background:rgba(31,122,58,.18); color:#7be0a0;
  border:1px solid rgba(31,122,58,.4);
}

/* ===== Footer ===== */
.sitefoot {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.5rem; margin-top:2rem;
  background:rgba(7,14,14,.6); border-top:1px solid rgba(201,168,76,.15);
  color:rgba(245,237,214,.35); font-size:.72rem; letter-spacing:.08em;
  flex-wrap:wrap;
}

/* ===== Floating cart FAB ===== */
.fab-cart {
  position:fixed; bottom:18px; right:18px; z-index:80;
  background:var(--gold); color:var(--dark);
  border:0; border-radius:999px;
  padding:12px 18px;
  cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
  box-shadow:0 10px 28px rgba(201,168,76,.35);
  transition:transform .15s, background .15s, opacity .2s;
}
.fab-cart:hover { background:var(--gold-l); transform:translateY(-2px); }
.fab-cart .fab-icon { font-size:1.2rem; line-height:1; letter-spacing:0; }
.fab-cart .fab-count {
  background:var(--dark); color:var(--gold);
  border-radius:999px; padding:2px 8px;
  font-size:.7rem; font-weight:800; min-width:22px; text-align:center;
}
.fab-cart.empty { opacity:0; pointer-events:none; }

/* ===== Add-to-cart toast ===== */
.cart-toast {
  position:fixed; top:80px; left:50%;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(15,44,44,.95); color:var(--gold);
  border:1px solid rgba(201,168,76,.35);
  padding:10px 18px; border-radius:999px;
  font-family:inherit; font-size:.78rem; font-weight:600;
  letter-spacing:.08em;
  box-shadow:0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(8px);
  z-index:110; opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; max-width:90vw; text-align:center;
}
.cart-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Mobile: tablet ===== */
@media (max-width:980px) {
  .layout { grid-template-columns:1fr; gap:1rem; padding:1rem; }
  .categories { flex-direction:row; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; }
  .categories::-webkit-scrollbar { display:none; }
  .cat {
    flex:0 0 auto; min-width:130px; min-height:54px;
    border-left:0; border-bottom:2px solid transparent;
    padding:.55rem .85rem; white-space:nowrap;
  }
  .cat.active { border-left:0; border-bottom-color:var(--gold); }

  /* Cart becomes a slide-up sheet on tablet+phone, triggered by FAB */
  .cart {
    position:fixed; top:auto; bottom:0; left:0; right:0;
    border-radius:14px 14px 0 0;
    max-height:88vh; overflow-y:auto;
    transform:translateY(105%);
    transition:transform .35s cubic-bezier(.23,1,.32,1);
    z-index:200;
    box-shadow:0 -16px 40px rgba(0,0,0,.6);
  }
  .cart.open { transform:translateY(0); }
  .cart-close { display:block; }
}

/* ===== Mobile: phone ===== */
@media (max-width:640px) {
  body { font-size:16px; }
  .topbar { padding:.7rem .9rem; }
  .brand h1 { font-size:1rem; }
  .tagline { font-size:.62rem; }
  .brand-lamp { font-size:1.4rem; }
  .admin-link { font-size:.58rem; padding:.35rem .65rem; }

  .layout { padding:.75rem; gap:.75rem; }
  .menu { grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .product-body { padding:.7rem .75rem .8rem; }
  .product-name { font-size:.82rem; }
  .product-notes { font-size:.7rem; -webkit-line-clamp:2; }
  .product-price { font-size:.95rem; }
  .product button.add { padding:.5rem .65rem; font-size:.58rem; letter-spacing:.1em; }

  #order-form input, #order-form textarea { font-size:16px; /* iOS no-zoom */ padding:.7rem .8rem; }
  .sitefoot { padding:1rem; font-size:.65rem; flex-direction:column; gap:.4rem; text-align:center; }

  .fab-cart { bottom:14px; right:14px; padding:11px 16px; font-size:.66rem; }
  .fab-cart .fab-label { display:none; }
}

@media (max-width:380px) {
  .menu { grid-template-columns:1fr; }
}