/* MONZZARO site styles — system C · Gallery Minimal. Pairs with tokens.css */
*{margin:0;padding:0;box-sizing:border-box}
/* ═══ RESPONSIVENESS RULES ═══
   1. ONE DIAL: every size on this site is rem (or em/%/cqw) — the fluid root
      below scales the ENTIRE system with the window. 90rem window = 1rem root;
      grows to 1.25rem on wide screens, floors at 0.8125rem on phones.
   2. Never size a component in fixed px except 1-0.0938rem hairlines.
   3. Layout shifts (stacking, reordering) live in media queries; SIZE lives here.
   4. Components that must adapt to their column (dial/donut) use container units. */
html{scroll-behavior:smooth;font-size:clamp(13px, 0.3vw + 11.7px, 20px)}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.zetta{font-family:var(--font-display)}
strong{font-weight:600}

/* ── announce ── */
.announce{background:var(--grey);color:var(--bg);font-size:0.6562rem;letter-spacing:.25em;
  text-transform:uppercase;text-align:center;padding:0.5625rem var(--pad-x)}

/* ── header / nav ── */
.site-header{position:sticky;top:0;z-index:50;background:transparent;transition:background var(--dur-slow) var(--ease)}
/* header over a dark fold (light mode): flip ink + marks */
html:not(.dark) .site-header.on-dark{color:#F4F0E9}
html:not(.dark) .site-header.on-dark .burger span{background:#F4F0E9}
html:not(.dark) .site-header.on-dark .brand-stamp,
html:not(.dark) .site-header.on-dark .brand-wm{filter:invert(1)}

.nav{display:flex;justify-content:space-between;align-items:center;
  padding:1.625rem var(--pad-x);max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto}
.nav-side{display:flex;gap:1.625rem;align-items:center;flex:1;height:100%}
.nav-right{justify-content:flex-end}
.nav-icon{font-size:var(--fs-label);letter-spacing:var(--track-nav);text-transform:uppercase;opacity:.8}
.nav-icon:hover{opacity:1}
.theme-toggle{cursor:pointer;background:none;border:none;color:inherit;
  display:flex;align-items:center;justify-content:center;padding:0}
.theme-toggle svg{width:1.25rem;height:1.25rem;display:block;stroke:currentColor;fill:none;stroke-width:1.5}
.theme-toggle .icon-moon{fill:currentColor;stroke:none}
html.dark .theme-toggle .icon-moon{display:none}
html:not(.dark) .theme-toggle .icon-sun{display:none}
/* brand mark: BIG stamp at rest (tall header) → small wordmark on scroll (compact header) */
.brand{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  height:4.5rem;min-width:15rem;padding:0 var(--s3)}
.brand img{position:absolute;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),height var(--dur) var(--ease)}
.brand-stamp{height:4.5rem;width:auto;opacity:1;transform:translateY(0)}
.brand-wm{height:0.875rem;width:auto;opacity:0;transform:translateY(0.3125rem)}  /* 25% taller than 0.6875rem nav text */
.site-header.scrolled .brand-stamp{opacity:0;transform:translateY(-0.375rem)}
.site-header.scrolled .brand-wm{opacity:1;transform:translateY(0)}
/* menu button (all sizes) */
.menu-btn{cursor:pointer;background:none;border:none;color:inherit;display:flex;align-items:center;gap:0.625rem}
.menu-btn .burger span{display:block;width:1.375rem;height:0.0938rem;background:var(--ink);margin:0.3125rem 0;
  transition:transform var(--dur) var(--ease)}
.menu-btn[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(0.2rem) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger span:nth-child(2){transform:translateY(-0.2rem) rotate(-45deg)}
.menu-word{font-family:var(--font-body);font-size:var(--fs-label);letter-spacing:var(--track-nav);text-transform:uppercase;opacity:.8}
/* left slide-in drawer + OptionWheel (vanilla port of React Bits <OptionWheel/>) */
.mobile-menu{position:fixed;top:0;left:0;height:100dvh;width:100vw;z-index:200;
  display:flex;flex-direction:column;background:var(--bg);box-shadow:var(--shadow-soft);
  transform:translateX(-100%);transition:transform var(--dur) var(--ease)}
.mobile-menu.open{transform:translateX(0)}
.option-wheel{position:relative;width:100%;height:100%;overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:none;outline:none;
  --ow-inset:12%}
.ow-item{position:absolute;top:50%;left:var(--ow-inset);white-space:nowrap;text-transform:uppercase;
  font-family:var(--font-body);font-size:clamp(1.6rem,3.4vw,3rem);line-height:1;font-weight:400;letter-spacing:.05em;
  transform-origin:left center;cursor:pointer;will-change:transform,opacity,filter;
  color:var(--ink-soft)}
.ow-item.selected{font-weight:600}
/* originkit-style text roll on hover (duplicate slides up) */
.ow-roll{display:block;overflow:hidden}
.ow-roll-inner{display:block;position:relative;transition:transform .45s var(--ease)}
.ow-roll-inner .b{position:absolute;top:100%;left:0;width:100%}
.ow-item:hover .ow-roll-inner{transform:translateY(-100%)}
/* Nº index + tick trio above label (v4) */
.ow-num{display:flex;align-items:center;gap:0.75rem;
  font-size:0.625rem;font-weight:300;letter-spacing:.18em;color:var(--ink-soft);margin-bottom:0.45rem}
.ow-tick{position:relative;display:inline-block;width:2.5rem;height:0.0625rem;background:var(--ink-soft);
  transform-origin:left center;opacity:.6}
.ow-tick::before,.ow-tick::after{content:"";position:absolute;left:0;height:0.0625rem;background:var(--ink-soft);
  transform-origin:left center;opacity:.5}
.ow-tick::before{top:-0.25rem;width:60%}
.ow-tick::after{top:0.25rem;width:40%}
@keyframes tickwave{0%{transform:scaleX(.25)}55%{transform:scaleX(1.15)}100%{transform:scaleX(1)}}
.ow-item:hover .ow-tick{animation:tickwave .55s var(--ease)}
.ow-item:hover .ow-tick::before{animation:tickwave .55s var(--ease) .08s}
.ow-item:hover .ow-tick::after{animation:tickwave .55s var(--ease) .16s}
/* fixed right-side reveal */
.menu-reveal{position:absolute;left:75%;top:50%;transform:translate(-50%,-50%);z-index:205;
  width:min(30rem,34vw);pointer-events:none;display:flex;align-items:center;justify-content:center;
  transition:top .35s var(--ease)}
.menu-reveal img{max-width:100%;max-height:72vh;object-fit:contain;
  opacity:0;transform:scale(.96);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.menu-reveal.show img{opacity:1;transform:scale(1)}
.menu-reveal img.inverted{filter:invert(1)}
html:not(.dark) .menu-reveal img.inverted{filter:none}
@media (max-width:53.75rem){.menu-reveal{width:34vw;right:4%}}
@media (max-width:40rem){.menu-reveal{display:none}}
.ow-item.is-here{color:#B03348}
html.dark .ow-item.is-here{color:#D96A7C}
.ow-here{margin-left:1.25rem;font-size:0.34em;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);vertical-align:middle;white-space:nowrap}
.menu-tagline{position:absolute;top:max(3.5rem,6vh);left:12%;z-index:210;
  font-size:0.6875rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);opacity:.42}
@media (max-width:53.75rem){.menu-tagline{left:8%;font-size:0.625rem}}
.menu-close{position:absolute;top:1.5rem;right:var(--pad-x);z-index:210;background:none;border:none;color:var(--ink);
  font-size:2.25rem;font-weight:300;line-height:1;cursor:pointer;transition:opacity var(--dur-fast)}
.menu-close:hover{opacity:.6}

/* cart drawer (right) */
.cart-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(26rem,92vw);z-index:220;
  display:flex;flex-direction:column;background:var(--bg);box-shadow:var(--shadow-soft);
  border-left:0.0625rem solid var(--line);padding:1.5rem var(--s4);
  transform:translateX(100%);transition:transform var(--dur) var(--ease)}
.cart-drawer.open{transform:translateX(0)}
.cart-close{left:var(--s4);right:auto}
.cart-head{font-size:0.875rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;
  padding:0.5rem 0 1.5rem;border-bottom:0.0625rem solid var(--line)}
.cart-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;text-align:center}
.cart-empty{font-size:0.9375rem;color:var(--ink-soft)}
.cart-hint{font-size:0.8125rem;color:var(--ink-soft)}
.cart-foot{font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  text-align:center;padding-top:1rem;border-top:0.0625rem solid var(--line)}
.cart-catch{position:fixed;inset:0;z-index:215;display:none}
.cart-catch.open{display:block}

/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(0.875rem);-webkit-backdrop-filter:blur(0.875rem)}
.search-overlay.open{display:flex}
.search-box{width:min(38rem,88vw);position:relative}
/* hover preview above the box (reserved slot — no layout jump) */
.search-preview{position:absolute;bottom:calc(100% + 2rem);left:50%;height:20rem;width:max-content;max-width:90vw;
  transform:translate(-50%,0.375rem);display:flex;align-items:center;justify-content:center;gap:1.5rem;
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.search-preview.show{opacity:1;transform:translate(-50%,0)}
.search-preview img{height:100%;width:auto;max-width:18rem;object-fit:contain}
.search-preview img[src=""]{display:none}
.sp-desc{font-size:1.125rem;color:var(--ink);line-height:1.65;max-width:28rem}
.sp-cta{margin-top:0.9rem;font-size:0.6875rem;letter-spacing:.22em;color:var(--ink-soft)}
.search-field{position:relative;border-bottom:0.125rem solid var(--ink)}
.search-field input{width:100%;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--font-body);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:400;
  padding:0.75rem 0.25rem;letter-spacing:.02em;position:relative;z-index:2}
.search-field input::placeholder{color:var(--ink-soft);opacity:.55}
.search-ghost{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;
  padding:0.75rem 0.25rem;font-family:var(--font-body);font-size:clamp(1.5rem,3vw,2.25rem);
  color:var(--ink-soft);opacity:.45;white-space:pre;pointer-events:none;z-index:1}
.search-suggest{list-style:none;margin-top:1rem;max-height:40vh;overflow:auto}
.search-suggest li{padding:0.75rem 0.5rem;font-size:1rem;color:var(--ink-soft);cursor:pointer;
  display:flex;justify-content:space-between;gap:1rem;border-bottom:0.0625rem solid var(--line)}
.search-suggest li em{font-style:normal;color:var(--ink);font-weight:600}
.search-suggest li .s-type{font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;align-self:center}
.search-suggest li.active, .search-suggest li:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}

/* ── shared ── */
main.home{display:flex;flex-direction:column}
section{padding:var(--s7) var(--pad-x)}
.eyebrow{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--stone);margin-bottom:var(--s3)}
.sect-head{text-align:center;max-width:51.25rem;margin:0 auto var(--s5)}
.sect-head h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:.06em;line-height:1.5}
.sect-sub{font-size:var(--fs-small);color:var(--ink-soft);margin-top:var(--s2)}
.sect-cta{text-align:center;margin-top:var(--s5)}
.cta{display:inline-block;padding:0.9375rem 2.125rem;font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;background:var(--ink);color:var(--bg);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.cta:hover{opacity:.88;transform:translateY(-0.0625rem)}
.cta-ghost{background:transparent;color:var(--ink);border:0.0625rem solid var(--ink)}
.cta-light{background:var(--bg);color:var(--ink)}

/* ── 1 hero ── */
/* cinematic vignette + soft key light over the unified surface */
.hero{position:relative}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(85% 70% at 50% 18%, rgba(255,255,255,.06), transparent 60%),
             radial-gradient(140% 100% at 50% 112%, rgba(0,0,0,.26), transparent 55%)}
.hero>*{position:relative;z-index:3}
.hero{display:grid;grid-template-columns:.9fr 1.3fr .42fr;min-height:35rem;padding:0;order:1;
  background:color-mix(in srgb,var(--accent) 22%,white);transition:background var(--dur-slow) var(--ease)}
.hero-copy{padding:24vh var(--pad-x) var(--s7);display:flex;flex-direction:column;justify-content:center;min-width:0;
  container-type:inline-size}
.hero-copy .eyebrow{display:inline-block;width:fit-content;max-width:100%;background:none;color:var(--ink-soft);
  padding:0;letter-spacing:.3em}
.hero-copy h1{font-size:clamp(1.5rem,7.2cqw,2.6rem);font-weight:600;line-height:var(--lh-display);
  letter-spacing:.05em;margin-bottom:var(--s5);color:var(--deep,var(--ink));
  transition:color var(--dur-slow) var(--ease)}
.hero-copy p{max-width:30rem;margin-bottom:var(--s2);font-size:0.9062rem}
.hero-pain{color:var(--ink-soft)}
.hero-claim{font-size:0.875rem;letter-spacing:.2em;margin:var(--s2) 0 var(--s4)}
.hero-ctas{display:flex;gap:0.875rem;flex-wrap:wrap;margin-bottom:var(--s3)}
.hero-ctas .cta{flex:1 1 0;max-width:15.625rem;text-align:center;padding-left:0;padding-right:0;
  background:var(--deep,var(--ink));transition:background var(--dur-slow) var(--ease),opacity var(--dur-fast),transform var(--dur-fast)}
.hero-ctas .cta-ghost{background:transparent;color:var(--deep,var(--ink));border-color:var(--deep,var(--ink));
  transition:color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}

/* shiny text (vanilla port of React Bits <ShinyText/> — CSS-only) */
.shiny{display:inline-block;
  background-image:linear-gradient(120deg,var(--deep,var(--grey)) 0%,var(--deep,var(--grey)) 35%,color-mix(in srgb,white 80%,var(--deep,var(--grey))) 50%,var(--deep,var(--grey)) 65%,var(--deep,var(--grey)) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 3s linear infinite}
@keyframes shine{from{background-position:150% center}to{background-position:-50% center}}
@media (prefers-reduced-motion:reduce){.shiny{animation:none;-webkit-text-fill-color:var(--grey)}}
.hero-prices{font-size:0.7812rem;color:var(--ink-soft);letter-spacing:.03em}
/* even frame: gap G on all sides; carousel -> G -> caption -> G -> bottom */
/* PROPORTION LAW: everything in this column is a % of the COLUMN WIDTH
   (padding %, donut 16% + aspect-ratio, track aspect-ratio, margins %).
   One axis -> identical composition at every window size, like scaling an image. */
.hero-visual{position:relative;z-index:1;display:flex;flex-direction:column;
  container-type:inline-size;
  align-items:stretch;justify-content:flex-start;
  background:none;overflow:hidden;padding:22vh 5% 5%;outline:none}
.hero-topbar{display:flex;align-items:center;gap:4%;flex-wrap:wrap;row-gap:0.6rem;
  position:relative;z-index:130;margin-bottom:3%}
.hero-num{margin-top:3%;text-align:center;font-size:0.625rem;line-height:1.9;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.hero-num strong{font-weight:700;color:var(--ink)}

/* collection tabs — FM-dial stations on a LIQUID GLASS pill, ▼ needle on active.
   Glass recipe (baked from glass-dial lab): light .55 / refraction 46 / depth .4
   / dispersion .22 / frost 0.875rem / splay 60%. Needs the #lgDisp SVG filter in the HTML. */
.coll-tabs{display:flex;gap:0;
  position:relative;margin:0 auto;
  width:fit-content;max-width:100%;border:none;border-radius:62.4375rem;
  isolation:isolate;padding:0.5rem 1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.18));
  box-shadow:
    0 .64rem 1.4rem rgba(0,0,0,.22),
    inset 0 0.0938rem 0 rgba(255,255,255,.77),
    inset 0 -0.125rem 0.1875rem rgba(255,255,255,.28),
    inset 0.125rem 0 0.1875rem rgba(255,255,255,.17),
    inset -0.125rem 0 0.1875rem rgba(255,255,255,.17)}
/* refraction: bends the backdrop (edge-weighted). Plain-blur line first = Firefox fallback */
.coll-tabs::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;
  backdrop-filter:blur(0.875rem) saturate(1.5) brightness(1.06);
  -webkit-backdrop-filter:blur(0.875rem) saturate(1.5) brightness(1.06);
  backdrop-filter:url(#lgDisp) blur(0.875rem) saturate(1.5) brightness(1.06);
  -webkit-backdrop-filter:url(#lgDisp) blur(0.875rem) saturate(1.5) brightness(1.06);
  -webkit-mask:radial-gradient(120% 160% at 50% 50%, #000 60%, rgba(0,0,0,.85) 92%, rgba(0,0,0,.7) 100%);
  mask:radial-gradient(120% 160% at 50% 50%, #000 60%, rgba(0,0,0,.85) 92%, rgba(0,0,0,.7) 100%);
  background:rgba(255,255,255,.08)}
/* dispersion rim — rainbow stroke flows around the pill forever */
@property --lg-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.coll-tabs::after{content:"";position:absolute;inset:-0.0625rem;border-radius:inherit;z-index:3;pointer-events:none;
  padding:0.0938rem;
  background:conic-gradient(from var(--lg-a),
    rgba(255,80,80,.20), rgba(255,220,90,.165), rgba(90,255,160,.155),
    rgba(90,180,255,.20), rgba(200,90,255,.165), rgba(255,80,80,.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:blur(0.025rem) saturate(1.6);
  animation:lg-stroke 7s linear infinite}
@keyframes lg-stroke{to{--lg-a:360deg}}
/* one dial look for both themes: light mode gets the dark-smoked pill */
html:not(.dark) .coll-tabs{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)),
  linear-gradient(#2A2A2F,#2A2A2F)}
html:not(.dark) .coll-tabs button{color:color-mix(in srgb,#F4F0E9 85%,transparent)}
html:not(.dark) .coll-tabs button:hover{color:#FFFFFF}
/* metal selection chip: liquid-chrome canvas under the active station */
.metal-chip{position:absolute;top:50%;left:0;height:calc((100% - 0.55rem)*0.75);width:6rem;z-index:1;
  transform:translateY(-50%);border-radius:62.4375rem;overflow:hidden;pointer-events:none;
  transition:left .35s var(--ease), width .35s var(--ease);
  box-shadow:inset 0 0 0 0.0625rem rgba(255,255,255,.55), 0 0.125rem 0.5rem rgba(0,0,0,.28)}
.metal-chip canvas{width:100%;height:100%;display:block}
/* the glass layer STACKED OVER the metal — the overlap is the effect */
.chip-glass{position:absolute;inset:0;border-radius:inherit;
  backdrop-filter:blur(0.1875rem) saturate(1.45) brightness(1.05);
  -webkit-backdrop-filter:blur(0.1875rem) saturate(1.45) brightness(1.05);
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10) 45%, rgba(255,255,255,.16));
  box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.85), inset 0 -0.0625rem 0.125rem rgba(255,255,255,.35)}
.coll-tabs button{position:relative;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:900;font-size:clamp(0.55rem,1.7cqw,0.75rem);letter-spacing:.24em;color:var(--ink-soft);
  padding:0.22rem clamp(0.35rem,3.2cqw,1.6rem);transition:color var(--dur-fast)}
.coll-tabs button{color:color-mix(in srgb, var(--ink) 78%, transparent);z-index:2}
html.dark .coll-tabs button{color:color-mix(in srgb, #F4F0E9 85%, transparent)}
.coll-tabs button:hover{color:var(--ink)}
html.dark .coll-tabs button:hover{color:#FFFFFF}
.coll-tabs button.active{color:#26262A;font-weight:900}
html.dark .coll-tabs button.active{color:#26262A}
/* cinematic stage: one centered bottle, contact shadow, name + line under it */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;cursor:grab;touch-action:pan-y}
.stage.dragging{cursor:grabbing}
.stage-word{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:0;
  font-size:6.5cqw;font-weight:700;letter-spacing:.08em;white-space:nowrap;
  color:color-mix(in srgb, var(--ink) 4.5%, transparent);pointer-events:none;user-select:none}
.stage-frame{position:relative;width:51%;aspect-ratio:1/1.768;z-index:1;pointer-events:none}
/* accent glow behind the bottle — cinematic key light */
.stage-frame::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:130%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%);
  transition:background var(--dur-slow) var(--ease)}
.stage-img{z-index:1}
.stage-img{position:absolute;inset:0;width:100%;height:auto;opacity:0;
  transform-origin:50% var(--fit-o,50%);
  transform:translateY(calc(var(--fit-dy,0%) + 1.5%)) scale(calc(var(--fit-s,1)*.985));
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;-webkit-user-drag:none;user-select:none}
.stage-img.active{opacity:1;transform:translateX(var(--drag-x,0)) translateY(var(--fit-dy,0%)) scale(var(--fit-s,1))}
.stage.dragging .stage-img.active{transition:opacity .5s var(--ease)}   /* transform follows the finger live */
/* artificial contact shadow under the visible bottle base (alpha-scanned: base at 71% of image) */
.stage-shadow{position:absolute;left:50%;top:72.5%;transform:translateX(-50%);
  width:56%;height:5.5%;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,.18) 55%, transparent 72%);
  filter:blur(0.375rem)}
.stage-cap{margin-top:-19%;text-align:center;z-index:2}
.stage-name{font-size:clamp(.8rem,2.6cqw,1.15rem);letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.stage-line{margin-top:.5rem;font-size:clamp(.65rem,1.8cqw,.85rem);color:var(--ink-soft);max-width:26rem}
.stage-edition{margin-top:var(--s3);text-align:center;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.stage-edition strong{color:var(--ink)}
/* bottom dial: perfumes within the collection (numbered stations) */
.perfume-dial{margin:3.5% auto 0;padding:.3rem .7rem;position:relative;z-index:4}
.coll-dial{margin:0 auto 2.5%;background:none;box-shadow:none;padding:.2rem 0;justify-content:center}
.coll-dial::before,.coll-dial::after{content:none}
.coll-dial button{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.coll-dial button.active{color:var(--ink);border-bottom:0.0938rem solid var(--ink);padding-bottom:.1rem}
html.dark .coll-dial button.active{color:#FFFFFF;border-bottom-color:#FFFFFF}
.perfume-dial button{padding:.18rem clamp(.45rem,2.2cqw,1.1rem);font-size:clamp(.55rem,1.4cqw,.7rem)}
/* right meta column */
.hero-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1rem;padding:5% 5% 5% 0}
.meta-price{font-size:clamp(1.3rem,2.2vw,2rem);font-weight:700;letter-spacing:.04em;color:var(--deep,var(--ink))}
html.dark .meta-price{color:var(--ink)}
.meta-size-label{font-size:.575rem;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase}
.meta-sizes{display:flex;gap:.6rem;flex-wrap:wrap}
.meta-sizes button{width:3.1rem;height:3.1rem;border-radius:50%;cursor:pointer;border:0.0625rem solid color-mix(in srgb,var(--ink) 45%,transparent);
  background:transparent;color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:.65rem;letter-spacing:.05em;
  transition:background var(--dur-fast),color var(--dur-fast)}
.meta-sizes button.active{background:var(--ink);color:var(--bg)}

/* circular spinning text (vanilla port of React Bits <CircularText/>) */
.circular-text{position:relative;flex:0 0 auto;width:8%;aspect-ratio:1;height:auto;z-index:120;
  filter:drop-shadow(0 0.1875rem 0.4375rem rgba(0,0,0,.28));
  border-radius:50%;font-family:var(--font-display);font-weight:400;color:#FFFFFF;
  cursor:pointer;transform-origin:50% 50%;will-change:transform}
.circular-text::before{content:"";position:absolute;inset:0.2188rem;border-radius:50%;
  background:var(--deep,var(--grey));transition:background var(--dur-slow) var(--ease);
  -webkit-mask:radial-gradient(circle closest-side,transparent 49.5%,#000 50.5%);
  mask:radial-gradient(circle closest-side,transparent 49.5%,#000 50.5%)}
.circular-text span{position:absolute;inset:4%;display:inline-block;text-align:center;
  font-size:clamp(0.28rem,1.1cqw,0.45rem);letter-spacing:0;text-transform:uppercase;z-index:1}

/* ── 1.5 manifesto — the house position (editorial, quiet) ── */
.manifesto{order:1;background:var(--bg);text-align:center;padding:var(--s7) var(--pad-x)}
.manifesto-inner{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--s3)}
.manifesto .hero-pain{font-size:1.05rem;line-height:1.95;color:var(--ink-soft)}
.manifesto-body{font-size:.95rem;line-height:1.95;max-width:40rem;margin:0 auto}
.manifesto .hero-claim{font-size:1.05rem;letter-spacing:.26em;margin-top:var(--s2)}
.manifesto .hero-prices{font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}



/* ── 2 orbital ── */
.orbital{text-align:center;order:2;background:var(--surface);border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)}
.orbital-lead{max-width:40rem;margin:0 auto var(--s5)}
.orbit-steps{display:flex;align-items:stretch;justify-content:center;gap:var(--s2);
  max-width:57.5rem;margin:0 auto var(--s5)}
.orbit-node{flex:1;max-width:15.625rem;padding:var(--s3);border:0.0625rem solid var(--line);background:var(--bg)}
.orbit-node b{display:block;font-size:0.6875rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:0.625rem}
.orbit-node span{font-size:0.7812rem;color:var(--ink-soft);line-height:1.6}
.orbit-arrow{align-self:center;font-size:1.125rem;color:var(--stone)}
.orbital-moment{max-width:35rem;margin:0 auto var(--s4);font-size:0.9062rem}

/* ── cards (epos grid + bestsellers) ── */
.cards{display:grid;gap:var(--s3);max-width:var(--max-w);margin:0 auto}
.cards-6,.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:0.0625rem solid var(--line);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-0.25rem);box-shadow:var(--shadow-soft)}
.card-ph{height:16.25rem;display:flex;align-items:center;justify-content:center;padding:var(--s3);
  background:color-mix(in srgb,var(--accent) 16%,white);transition:background var(--dur)}
.card:hover .card-ph{background:color-mix(in srgb,var(--accent) 26%,white)}
.card-ph img{height:100%;object-fit:contain}
.card-info{padding:1.125rem 1.25rem 1.375rem}
.card-name{font-size:0.7812rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:0.375rem;
  color:var(--accent-ink)}
.card-usp{font-size:0.75rem;color:var(--ink-soft);line-height:1.55;margin-bottom:0.5rem}
.card-arc{font-size:0.7188rem;letter-spacing:.04em;margin-bottom:0.625rem}
.card-price{font-size:0.8125rem;font-weight:600}
.epos{order:3}
.momento-note{display:flex;align-items:center;gap:var(--s4);max-width:51.25rem;margin:var(--s5) auto 0;
  padding:var(--s3) var(--s4);background:var(--surface);border:0.0625rem solid var(--line)}
.momento-note img{width:7.5rem;flex:0 0 auto}
.momento-note p{font-size:0.8438rem}

/* ── 4 collezioni doors ── */
.collezioni{order:4;background:var(--bg-alt)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:var(--max-w);margin:0 auto}
.door{background:var(--surface);border:0.0625rem solid var(--line);padding-bottom:var(--s3);text-align:center;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.door:hover{transform:translateY(-0.25rem);box-shadow:var(--shadow-soft)}
.door-ph{height:15rem;display:flex;align-items:center;justify-content:center;padding:var(--s3);
  background:color-mix(in srgb,var(--accent) 14%,white);margin-bottom:var(--s3)}
.door-ph.door-dark{background:var(--grey)}
.door-ph img{height:100%;object-fit:contain}
.door-name{font-size:0.875rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:0.625rem}
.door p{font-size:0.7812rem;color:var(--ink-soft);padding:0 var(--s3);margin-bottom:0.75rem;line-height:1.6}
.door-price{font-size:0.7812rem;font-weight:600}

/* ── 5 discovery ── */
.discovery{order:5;background:var(--grey);color:var(--bg);padding:var(--s7) var(--pad-x)}
.disc-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:center;
  max-width:var(--max-w);margin:0 auto}
.disc-visual img{max-height:26.25rem;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 1.5rem 2.5rem rgba(0,0,0,.35))}
.discovery .eyebrow{color:var(--stone)}
.disc-copy h2{font-size:var(--fs-h2);letter-spacing:.06em;line-height:1.5;margin-bottom:var(--s3)}
.disc-copy p{font-size:0.875rem;opacity:.9;margin-bottom:var(--s2);max-width:32.5rem}
.disc-up{border-left:0.125rem solid var(--stone);padding-left:var(--s2)}
.discovery .cta{background:var(--bg);color:var(--ink);margin-top:var(--s2)}
.disc-terms{font-size:0.7188rem;letter-spacing:.08em;opacity:.7;margin-top:var(--s2)}

/* ── 6 bestsellers ── */
.loved{order:6}

/* ── 7 reviews ── */
.reviews{order:7;background:var(--surface);border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);text-align:center}
.reviews-body{max-width:38.75rem;margin:0 auto var(--s3);color:var(--ink-soft);font-size:0.875rem}
.reviews-cta-line{font-size:0.9062rem}

/* ── 8 maison band ── */
.maison{order:8;background:var(--grey);color:#F4F0E9;text-align:center;position:relative}
.maison-stamp{height:3.375rem;margin:0 auto var(--s3);opacity:.9}
.maison .eyebrow{color:var(--stone)}
.maison h2{font-size:var(--fs-h2);letter-spacing:.14em;margin-bottom:var(--s3)}
.maison p{max-width:35rem;margin:0 auto var(--s4);font-size:0.875rem;opacity:.85}

/* ── 9 authenticity ── */
.authenticity{order:9;text-align:center}
.authenticity p{max-width:42.5rem;margin:0 auto var(--s3);font-size:0.875rem;color:var(--ink-soft)}
.authenticity .cta-ghost{margin-top:var(--s2)}

/* ── 10 value props ── */
.valueprops{order:10;display:flex;justify-content:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) var(--pad-x);border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);
  background:var(--bg)}
.vp{font-size:0.6562rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ── 11 newsletter ── */
.newsletter{order:11;text-align:center;background:#FFFFFF;padding-bottom:0}
.newsletter h2{font-size:var(--fs-h2);letter-spacing:.06em;line-height:1.5;max-width:45rem;margin:0 auto var(--s3)}
.newsletter p{max-width:37.5rem;margin:0 auto var(--s4);font-size:0.8438rem;color:var(--ink-soft)}
.nl-form{display:flex;gap:0;justify-content:center;max-width:30rem;margin:0 auto}
.nl-form input{flex:1;padding:0.9375rem 1.125rem;font-family:var(--font-body);font-size:0.8438rem;
  border:0.0625rem solid var(--ink);background:var(--surface);outline:none}
.nl-form .cta{border:0.0625rem solid var(--ink)}

/* ── 12 curved loop band ── */
.curved-band{order:12;background:#FFFFFF;padding:0;overflow:hidden;
  height:max(8.75rem,20vw);display:flex;align-items:flex-start;cursor:grab}
.curved-band.dragging{cursor:grabbing}
.curved-svg{user-select:none;-webkit-user-select:none;width:100%;overflow:visible;display:block;
  font-family:var(--font-display);font-size:clamp(3rem,6vw,6rem);font-weight:700;
  text-transform:uppercase;line-height:1;fill:#2D2D2F}

/* ── footer ── */
.site-footer{background:var(--surface);padding:var(--s6) var(--pad-x) var(--s3)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s4);
  max-width:var(--max-w);margin:0 auto var(--s5)}
.foot-wm{height:1rem;width:auto;margin-bottom:var(--s2)}
.foot-tag{font-size:0.625rem;letter-spacing:.26em;color:var(--stone);text-transform:uppercase}
.foot-head{font-size:0.6562rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:var(--s2);color:var(--stone)}
.foot-col a{display:block;font-size:0.7812rem;padding:0.3125rem 0;color:var(--ink-soft)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{text-align:center;font-size:0.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:var(--s3)}

/* ═══ MOBILE (≤53.75rem) — order per mobile-first spec ═══ */
@media (max-width:53.75rem){
  .menu-word{display:none}
  /* menu wheel on touch */
  .option-wheel{--ow-inset:8%}
  .ow-item{font-size:clamp(1.3rem,6.5vw,2rem);padding:0.6rem 0}   /* >=2.75rem tap targets */
  .ow-here{display:block;margin:0.4rem 0 0}                        /* marker stacks, no overflow */

  /* mobile section order: hero → discovery UP → orbital → epos → loved → reviews → maison → authenticity → valueprops → newsletter */
  .hero{order:1} .manifesto{order:1} .discovery{order:2} .orbital{order:3} .epos{order:4}
  .collezioni{order:5} .loved{order:6} .reviews{order:7} .maison{order:8}
  .authenticity{order:9} .valueprops{order:10} .newsletter{order:11}

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-meta{flex-direction:row;align-items:center;justify-content:center;padding:0 var(--pad-x) 6%}
  .hero-copy{padding:var(--s5) var(--pad-x) var(--s4)}
  .orbit-steps{flex-direction:column;align-items:center}
  .orbit-node{max-width:100%;width:100%}
  .orbit-arrow{transform:rotate(90deg)}
  /* horizontal scroll rows, not stacked grids */
  .cards-6,.cards-3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--s2);padding-bottom:var(--s2);-webkit-overflow-scrolling:touch}
  .cards-6 .card,.cards-3 .card{flex:0 0 72%;scroll-snap-align:start}
  .doors{grid-template-columns:1fr}
  .disc-inner{grid-template-columns:1fr}
  .disc-visual img{max-height:17.5rem}
  .momento-note{flex-direction:column;text-align:center}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nl-form{flex-direction:column;gap:0.625rem}
  .nl-form .cta{width:100%;text-align:center}
}
/* short screens (landscape phones): tighter rows so 8 options never overlap */
@media (max-height:30rem){
  .ow-item{font-size:1.1rem;padding:0.25rem 0}
  .ow-here{display:inline;margin-left:0.75rem}
  .menu-close{top:0.75rem}
  .nav{padding:0.875rem var(--pad-x)}
  section{padding:var(--s6) var(--pad-x)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}


/* ── DARK THEME (default; toggle in header) ── */
html.dark{--bg:#232325;--bg-alt:#2D2D2F;--surface:#2D2D2F;--line:#3E3E42;
  --ink:#F4F0E9;--ink-soft:#B8B4AC;--grey:#1B1B1D}
html.dark .announce{color:#F4F0E9}
html.dark .hero{background:color-mix(in srgb,var(--accent) 30%,#232325)}
html.dark .brand-stamp,html.dark .brand-wm,html.dark .foot-wm{filter:invert(1)}
html.dark .curved-band{background:#232325}
html.dark .curved-svg{fill:#F4F0E9}
html.dark .newsletter{background:#232325}
html.dark .nl-form input{background:#2D2D2F;color:#F4F0E9;border-color:#F4F0E9}
/* unified accent surface: dark mode headline/CTAs must not rely on --deep (dark-on-dark) */
html.dark .hero-copy h1{color:var(--ink)}
html.dark .shiny{background-image:linear-gradient(120deg,var(--ink) 0%,var(--ink) 35%,#FFFFFF 50%,var(--ink) 65%,var(--ink) 100%)}
html.dark .hero-ctas .cta{background:var(--ink);color:#232325}
html.dark .hero-ctas .cta-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}




/* ═══ GENERATED PAGES (build-pages.py) v2 ═══ */
main.page{padding:0 0 var(--s7)}
.page-hero{background:color-mix(in srgb,var(--accent) 22%,white);padding:11rem var(--pad-x) var(--s6);
  text-align:center;transition:background var(--dur-slow) var(--ease)}
html.dark .page-hero{background:color-mix(in srgb,var(--accent) 30%,#232325)}
.page-hero .eyebrow{color:var(--ink-soft);letter-spacing:.3em;margin-bottom:var(--s3)}
.page-hero h1{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:.1em;line-height:1.4;
  color:var(--deep,var(--ink));max-width:56rem;margin:0 auto}
html.dark .page-hero h1{color:var(--ink)}
.page-lead{max-width:42rem;margin:var(--s3) auto 0;font-size:1rem;line-height:1.9;color:var(--ink-soft)}
.page-body{max-width:47rem;margin:0 auto;padding:var(--s6) var(--pad-x) 0;
  display:flex;flex-direction:column;gap:var(--s6)}
.ps{display:flex;flex-direction:column;gap:var(--s2)}
.ps-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.ps-rule{flex:1;height:0.0625rem;background:var(--line)}
.ps-head h2{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;text-align:center}
.ps p,.ps li{font-size:.9375rem;line-height:1.95;color:var(--ink)}
.ps h3{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-top:var(--s2);color:var(--ink)}
.ps ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.ps blockquote{border:none;text-align:center;font-family:var(--font-display);font-size:1.02rem;
  letter-spacing:.08em;line-height:1.8;color:var(--deep,var(--ink));padding:var(--s3) 0;font-style:normal}
html.dark .ps blockquote{color:var(--ink)}
.ps hr{border:none;border-top:0.0625rem solid var(--line);margin:var(--s2) 0}
.tbl-wrap{overflow-x:auto}
.ps table{width:100%;border-collapse:collapse;font-size:.85rem}
.ps th{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  text-align:left;padding:.6rem .8rem;border-bottom:0.0625rem solid var(--ink)}
.ps td{padding:.7rem .8rem;border-bottom:0.0625rem solid var(--line);line-height:1.6}
.faq-item{border-bottom:0.0625rem solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:600;font-size:.9375rem;
  display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:"+";font-size:1.2rem;color:var(--ink-soft);transition:transform var(--dur-fast)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 1.2rem;display:flex;flex-direction:column;gap:.6rem}
/* PDP */
.pdp-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:center;
  background:color-mix(in srgb,var(--accent) 22%,white);padding:9rem var(--pad-x) var(--s5);
  transition:background var(--dur-slow) var(--ease)}
html.dark .pdp-hero{background:color-mix(in srgb,var(--accent) 30%,#232325)}
.pdp-stagecol{position:relative;display:flex;flex-direction:column;align-items:center}
.pdp-donut{position:absolute;top:0;left:6%;width:5.5rem;aspect-ratio:1;z-index:2}
.pdp-frame{position:relative;width:60%;aspect-ratio:1/1.15}
.pdp-frame img{width:100%;height:auto;margin-top:-16%}
.pdp-frame .stage-shadow{top:56%}
.pdp-buy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.pdp-buy .page-lead{margin:0;text-align:left;font-size:.9rem}
.pdp-name{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.12em;color:var(--deep,var(--ink))}
html.dark .pdp-name{color:var(--ink)}
.pdp-sizes{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.pdp-trust{font-size:.72rem;color:var(--ink-soft);letter-spacing:.06em}
/* collection grids */
.page-grid{margin:var(--s6) auto 0;padding:0 var(--pad-x);max-width:var(--max-w)}
.page-grid .card{text-align:center}
@media (max-width:53.75rem){
  .pdp-hero{grid-template-columns:1fr;padding-top:7rem}
  .page-hero{padding-top:8rem}
}

/* ═══ SPECULAR CTA RIM — React Bits <SpecularButton/> vanilla port (v159) ═══ */
.cta,.h2-buynow{position:relative}
.spec-fx{position:absolute;inset:-0.125rem;border-radius:inherit;padding:0.09375rem;pointer-events:none;z-index:1;
  opacity:var(--sb-o,0);
  background:conic-gradient(from var(--sb-a,0deg),
    transparent 0deg,transparent 60deg,var(--sb-line,#FFF) 90deg,transparent 120deg,
    transparent 240deg,var(--sb-line,#FFF) 270deg,transparent 300deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 0.25rem var(--sb-line,#FFF))}

/* ═══ FOLD LINE-SIDEBAR — React Bits <LineSidebar/> vanilla port, RHS (v159) ═══ */
.mz-linebar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  --lb-accent:var(--accent-ink,#383636);--lb-text:#8A8783;--lb-marker:#B5B1AA;--lb-len:3rem;--lb-gap:0.9rem}
.mz-linebar ul{list-style:none;margin:0;padding:1rem 0;display:flex;flex-direction:column;gap:var(--lb-gap);align-items:flex-end}
.mz-linebar li{position:relative;cursor:pointer;padding-right:calc(var(--lb-len) + 0.75rem)}
.mz-linebar li::before{content:'';position:absolute;inset:-0.3rem -0.5rem -0.3rem -3rem}
.lb-marker{position:absolute;top:50%;right:0;height:0.0625rem;width:var(--lb-len);
  background:color-mix(in srgb,var(--lb-accent) calc(var(--effect,0)*100%),var(--lb-marker));
  transform-origin:right center;transform:translateY(-50%) scaleX(calc(0.7 + var(--effect,0)*0.5))}
.lb-label{display:inline-flex;align-items:baseline;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;line-height:1.2;
  color:color-mix(in srgb,var(--lb-accent) calc(var(--effect,0)*100%),var(--lb-text));
  transform:translateX(calc(var(--effect,0) * -1.5rem))}
.lb-index{margin-right:0.5rem;font-size:0.85em;opacity:calc(0.55 + var(--effect,0)*0.45)}
@media (max-width:64rem){.mz-linebar{display:none}}

/* ═══ CARD FX — React Bits <BorderGlow/> + <TiltedCard/> vanilla ports (v160) ═══ */
.bgx{--edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;--color-sensitivity:50;
  --glow-padding:2rem;--cone-spread:25;--fill-opacity:0.22;--card-bg:var(--surface);
  position:relative;isolation:isolate;transform:translate3d(0,0,0.01px);overflow:visible}
.bgx::before,.bgx::after,.bgx>.edge-light{content:"";position:absolute;inset:0;border-radius:inherit;
  transition:opacity .25s ease-out;z-index:-1;pointer-events:none}
.bgx:not(:hover)::before,.bgx:not(:hover)::after,.bgx:not(:hover)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}
.bgx::before{border:0.0625rem solid transparent;
  background:linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,var(--gradient-two) border-box,var(--gradient-three) border-box,
    var(--gradient-four) border-box,var(--gradient-five) border-box,var(--gradient-six) border-box,
    var(--gradient-seven) border-box,var(--gradient-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%))}
.bgx::after{border:0.0625rem solid transparent;
  background:var(--gradient-one) padding-box,var(--gradient-two) padding-box,var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,var(--gradient-five) padding-box,var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,var(--gradient-base) padding-box;
  mask-image:linear-gradient(to bottom,black,black),
    radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),
    radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),
    radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),
    radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),
    radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),
    conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);
  mask-composite:subtract,add,add,add,add,add;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light}
.bgx>.edge-light{inset:calc(var(--glow-padding) * -1);z-index:1;
  mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter}
.bgx>.edge-light::before{content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;
  box-shadow:inset 0 0 0 0.0625rem color-mix(in srgb,var(--accent-ink,#B8AFA3) 90%,transparent),
    inset 0 0 0.1875rem 0 color-mix(in srgb,var(--accent-ink,#B8AFA3) 50%,transparent),
    inset 0 0 0.9375rem 0 color-mix(in srgb,var(--accent-ink,#B8AFA3) 30%,transparent),
    inset 0 0 1.5rem 0.125rem color-mix(in srgb,var(--accent-ink,#B8AFA3) 18%,transparent),
    0 0 0.1875rem 0 color-mix(in srgb,var(--accent-ink,#B8AFA3) 50%,transparent),
    0 0 0.9375rem 0 color-mix(in srgb,var(--accent-ink,#B8AFA3) 30%,transparent),
    0 0 1.5rem 0.125rem color-mix(in srgb,var(--accent-ink,#B8AFA3) 18%,transparent)}
.card.bgx,.door.bgx{will-change:transform}

/* ═══ RAY BACKGROUNDS — React Bits SideRays/LightRays vanilla ports (v160) ═══ */
.mz-rays{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.mz-rays canvas{display:block;width:100%;height:100%}

/* ═══ TEXT FX — React Bits text-animation vanilla ports (v161) ═══ */
.tfx-char{display:inline-block;will-change:transform}
/* gradient-text */
.tfx-gradient{background-image:linear-gradient(to right,var(--accent-ink),var(--accent),var(--stone),var(--accent-ink));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:tfx-grad 8s ease-in-out infinite alternate}
@keyframes tfx-grad{from{background-position:0% 50%}to{background-position:100% 50%}}
/* glass surface (Firefox/Safari fallback path of React Bits GlassSurface) */
.glass-mz{background:color-mix(in srgb,var(--bg) 42%,transparent);backdrop-filter:blur(0.6875rem) saturate(1.4);
  -webkit-backdrop-filter:blur(0.6875rem) saturate(1.4);border:0.0625rem solid color-mix(in srgb,var(--ink) 14%,transparent);
  box-shadow:0 0.375rem 1.5rem rgba(0,0,0,.08),inset 0 0.0625rem 0 rgba(255,255,255,.35);
  padding:0.75rem;border-radius:0.125rem}
/* scroll-float chars get transforms inline; keep origin */
.epos .sect-head h2 .tfx-char,.collezioni .sect-head h2 .tfx-char{transform-origin:50% 0}
/* rotating-text */
.tfx-rotate{display:inline-block;overflow:hidden;vertical-align:bottom}
.tfx-rotate .tfx-char{transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s}
.tfx-rotate .tfx-rin{transform:translateY(100%);opacity:0;transition:none}
.tfx-rotate .tfx-rout{transform:translateY(-120%);opacity:0}
/* text-pressure (maison) — Roboto Flex, full-width display line */
.tfx-pressure{font-family:'Roboto Flex','Roboto',sans-serif;text-transform:uppercase;white-space:nowrap;
  display:flex;justify-content:space-between;width:100%;font-weight:100;letter-spacing:0}
/* variable-proximity (loved) — same variable family, reads as Roboto */
.tfx-vprox{font-family:'Roboto Flex','Roboto',sans-serif}
.tfx-word{display:inline-block;white-space:nowrap}

/* ═══ MENU DARK MODE (v162) — wheel menu + search + cart drawer always dark, on any page theme ═══ */
.mobile-menu,.search-overlay,.cart-drawer{--bg:#232325;--bg-alt:#2D2D2F;--surface:#2D2D2F;--line:#3E3E42;--ink:#F4F0E9;--ink-soft:#B8B4AC;--grey:#1B1B1D}
.mobile-menu .ow-item.is-here{color:#D96A7C}

/* ═══ FX batch 2 (v163) — GlareHover · OrbitImages · grain ═══ */
.card-ph,.door-ph,.disc-visual{position:relative;overflow:hidden}
.card-ph::after,.door-ph::after,.disc-visual::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(-45deg,hsla(0,0%,100%,0) 60%,rgba(255,255,255,.35) 70%,hsla(0,0%,100%,0) 100%);
  background-size:250% 250%;background-position:100% 100%;background-repeat:no-repeat;
  pointer-events:none;transition:background-position 0ms}
.card:hover .card-ph::after,.door:hover .door-ph::after,.disc-visual:hover::after{
  background-position:0% 0%;transition:background-position 650ms ease}
.home .orbital{position:relative}
.srv-word{display:inline-block}
.mz-grain{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ═══ PDP LOWER FOLDS + ORBITAL LOCKUP/ARCH (v165, from REF docs) ═══ */
.pdp-more{padding:5rem var(--pad-x);background:var(--bg)}
.pm-inner{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:2.5rem}
.pm-powered{font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--accent-ink,var(--ink-soft));text-transform:uppercase}
.pm-head{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);margin-bottom:0.75rem}
.pm-block p{color:var(--ink-soft);line-height:var(--lh-body)}
.pm-moment p{font-style:italic}
.pm-letter{border:0.0625rem solid var(--line);padding:2rem;text-align:center}
.pm-letter p{font-size:1.05rem;line-height:1.9;color:var(--ink)}
.pm-sign{margin-top:1rem;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.pm-faq-item{border-bottom:0.0625rem solid var(--line);padding:0.9rem 0}
.pm-faq-item summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.pm-faq-item summary::after{content:"+";float:right;color:var(--ink-soft)}
.pm-faq-item[open] summary::after{content:"–"}
.pm-faq-item p{margin-top:0.75rem;color:var(--ink-soft);line-height:var(--lh-body)}
.orbital-lockup{padding:6rem var(--pad-x);text-align:center;background:var(--grey);color:#F4F0E9}
.olk-tag{font-size:var(--fs-label);letter-spacing:0.3em;opacity:.75;margin-bottom:1.25rem}
.olk-mark{font-family:'Roboto',sans-serif;font-weight:700;font-size:clamp(2.4rem,7vw,5.5rem);letter-spacing:0.04em;line-height:1.05}
.olk-mark sup{font-size:0.3em;vertical-align:super;font-weight:500}
.olk-sub{font-style:italic;font-size:1.05rem;opacity:.8;margin-top:1rem}
.orbital-arch{padding:5rem var(--pad-x)}
.oa-inner{max-width:60rem;margin:0 auto;text-align:center}
.oa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:3rem 0 2rem;text-align:left}
@media (max-width:48rem){.oa-grid{grid-template-columns:1fr}}
.oa-cell{border:0.0625rem solid var(--line);padding:1.5rem}
.oa-k{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.oa-v{font-family:'Roboto',sans-serif;font-weight:700;font-size:1.2rem;margin:0.5rem 0 0.75rem}
.oa-cell p,.oa-note{color:var(--ink-soft);line-height:var(--lh-body)}
.oa-note{font-style:italic}