/* ==== Brand tokens: change these to rebrand ==== */
:root {
  --bg: #0e0b0d;
  --bg-2: #17121a;
  --gold: #c9a46a;
  --gold-soft: #e6cfa3;
  --rose: #6b2e3e;
  --text: #f3ece3;
  --muted: #a99f95;
  --line: #2c2429;
  --juice: #8a2f45; /* perfume liquid colour */
  --shadow: rgba(0,0,0,.7);
}
/* Light theme: switched by the sun/moon button in the header (data-theme on <html>) */
:root[data-theme="light"] {
  --bg: #f7f2eb;
  --bg-2: #efe6da;
  --gold: #94702f;
  --gold-soft: #b08a4e;
  --rose: #ecd9da;
  --text: #221b1e;
  --muted: #6f655d;
  --line: #ddd1c4;
  --shadow: rgba(60,40,30,.28);
}
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Montserrat, system-ui, sans-serif; font-weight:300; line-height:1.7; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
section { padding:120px 0; }
h1,h2,h3 { font-family:"Bodoni Moda", Georgia, serif; font-weight:400; line-height:1.1; margin:0 0 18px; }
h1, h2 { font-size:clamp(2.2rem,4.5vw,3.6rem); }
em { color:var(--gold); font-style:italic; }
.kicker { text-transform:uppercase; letter-spacing:.35em; font-size:.7rem; color:var(--gold); font-weight:500; }
.muted { color:var(--muted); }
.center { text-align:center; max-width:680px; margin:0 auto 64px; }
.btn { display:inline-block; padding:17px 40px; background:var(--gold); color:var(--bg); letter-spacing:.22em; text-transform:uppercase; font-size:.74rem; font-weight:500; border:1px solid var(--gold); cursor:pointer; font-family:inherit; transition:all .35s; }
.btn:hover { background:transparent; color:var(--gold); }
.btn-line { background:transparent; color:var(--gold); }
.btn-line:hover { background:var(--gold); color:var(--bg); }

.announce { text-align:center; font-size:.72rem; letter-spacing:.2em; padding:10px; background:var(--rose); text-transform:uppercase; }
header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
header nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:80px; }
header .side { display:flex; gap:32px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
header .side a:hover { color:var(--gold); }
header .right { justify-content:flex-end; }
.brand { font-family:"Bodoni Moda",serif; font-size:1.6rem; letter-spacing:.35em; }
@media (max-width:800px){ header .left{display:none} header nav{grid-template-columns:auto 1fr} header .side{gap:16px} }


/* Bottle: SVG drawing (#ml-bottle in index.html). To use a photo, replace the <svg> inside .bottle with <img src="images/bottle.png"> */
.bottle { position:relative; width:200px; animation:float 6s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-14px); } }
.bottle svg { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 28px 36px rgba(0,0,0,.55)); }
.bottle text { font-family:"Bodoni Moda",serif; font-size:10px; letter-spacing:.2em; text-anchor:middle; fill:#3a2912; }
.ml-juice { fill:var(--juice); transition:fill .6s; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.bottle::after { content:""; position:absolute; left:10%; right:10%; bottom:-26px; height:22px; background:radial-gradient(ellipse,var(--shadow),transparent 70%); }
/* clear glass needs a faint outline and softer shadow to read on the light background */
[data-theme="light"] .bottle svg, [data-theme="light"] .scents svg { filter:drop-shadow(0 0 .6px rgba(40,25,15,.55)) drop-shadow(0 22px 28px rgba(60,40,30,.22)); }

/* Theme toggle */
.theme-toggle { background:none; border:1px solid var(--line); color:var(--text); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color .3s, color .3s; }
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.theme-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.theme-toggle .i-moon { display:none; }
[data-theme="light"] .theme-toggle .i-sun { display:none; }
[data-theme="light"] .theme-toggle .i-moon { display:block; }
header .right { align-items:center; }
body, header, .announce { transition:background-color .4s, color .4s; }



/* ==== Buy ==== */
#buy { padding-top:64px; }
.buy { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
@media (max-width:880px){ .buy{grid-template-columns:1fr; gap:40px} .buy .stage{max-width:560px; width:100%; margin:0 auto} }
.buy .stage { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:start; }
.viewport { position:relative; overflow:hidden; aspect-ratio:4/5; background:radial-gradient(circle,color-mix(in srgb,var(--juice) 35%,transparent),transparent 65%); }

/* Thumbnails down the left of the gallery */
.thumbs { display:flex; flex-direction:column; gap:10px; }
.thumb { width:64px; height:80px; padding:0; border:1px solid var(--line); background:var(--bg-2); overflow:hidden; cursor:pointer; opacity:.55; transition:opacity .3s, border-color .3s; }
.thumb:hover { opacity:.85; }
.thumb.on { opacity:1; border-color:var(--gold); }
.thumb svg, .thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.thumb-bottle svg { padding:8px 0; filter:none; }

/* Photo and scene slides: picture fills the frame, caption sits on a dark fade */
.slide.scene-slide { position:relative; padding:0; justify-content:flex-end; }
.scene-slide > svg, .scene-slide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide .scene-cap { position:relative; max-width:none; width:100%; text-align:left; padding:90px 28px 26px; background:linear-gradient(transparent, rgba(8,5,7,.82)); color:#ddd3c7; font-size:.86rem; }
.slide .scene-cap span { display:block; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:#e6cfa3; margin-bottom:6px; }
.slide .scene-cap b { color:#fff; font-size:1.45rem; }
.best-for { font-size:.82rem; color:var(--muted); margin-top:10px; }
.best-for span { font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-right:6px; }

/* Stage slider: one slide per scent, moved by applyScent() */
.track { display:flex; height:100%; transition:transform .7s cubic-bezier(.65,0,.35,1); }
.slide { flex:0 0 100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:44px; padding:24px 64px; opacity:.25; transition:opacity .7s; }
.slide.on { opacity:1; }
.slide .bottle { width:140px; }
.slide .bottle svg { transform-origin:50% 100%; transition:transform .4s; }
.slide figcaption { max-width:320px; text-align:center; font-size:.88rem; line-height:1.6; color:var(--muted); }
.slide figcaption b { display:block; font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.25rem; color:var(--gold); margin-bottom:6px; }
.slide-arrow { position:absolute; top:44%; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 70%,transparent); color:var(--text); display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color .3s, color .3s; }
.slide-arrow:hover { border-color:var(--gold); color:var(--gold); }
.slide-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.slide-arrow.prev { left:8px; } .slide-arrow.next { right:8px; }
.opt-label { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:28px 0 12px; }
.opts { display:flex; gap:10px; flex-wrap:wrap; }
.opts button { background:none; border:1px solid var(--line); color:var(--text); padding:14px 22px; font-family:inherit; font-size:.85rem; cursor:pointer; transition:border-color .3s; }
.opts button.on, .opts button:hover { border-color:var(--gold); color:var(--gold); }
.price { font-family:"Bodoni Moda",serif; font-size:2.6rem; margin:16px 0 0; }
.gift { display:flex; gap:12px; align-items:center; margin:24px 0 32px; font-size:.9rem; cursor:pointer; }
.gift input { accent-color:var(--gold); width:18px; height:18px; }
.assure { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; font-size:.82rem; color:var(--muted); }

/* ==== Scent picker ==== */
.opt-label span { color:var(--gold); letter-spacing:.12em; text-transform:none; margin-left:6px; }
.scents { display:grid; grid-template-columns:repeat(4,1fr); }
.opts.scents button { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 10px; font-size:.78rem; }
.scents svg { width:30px; height:auto; overflow:visible; }

/* ==== Reviews ==== */
.reviews { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.review { border:1px solid var(--line); padding:36px; }
.review blockquote { font-family:"Bodoni Moda",serif; font-style:italic; font-size:1.25rem; margin:16px 0 20px; line-height:1.45; }
.stars { color:var(--gold); letter-spacing:3px; font-size:.85rem; }


footer { border-top:1px solid var(--line); padding:56px 0; font-size:.82rem; color:var(--muted); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }

.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,200%); background:var(--gold); color:var(--bg); padding:14px 26px; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; transition:transform .4s; z-index:40; }
.toast.show { transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 1s, transform 1s; }
.reveal.in { opacity:1; transform:none; }
@media (max-width:600px){ .announce{font-size:.6rem; letter-spacing:.12em; padding:8px 12px} header nav{height:64px} .brand{font-size:1.05rem; letter-spacing:.22em} #buy{padding-top:24px} .buy .stage{grid-template-columns:1fr} .thumbs{flex-direction:row; order:2; overflow-x:auto} .thumb{width:52px; height:64px; flex:none} .slide{padding:24px 40px; gap:24px} .buy .stage .bottle{width:100px} .slide-arrow{top:40%; width:36px; height:36px} }