@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-var.woff') format('woff');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-var.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink:#16130e; --ink-2:#25201a; --cream:#f6f0e4; --cream-2:#ece3d0; --paper:#fbf7ef;
  --gold:#c38e13; --gold-l:#e8c77a; --gold-d:#7f5a0a; --sage:#6f8a6c; --line:rgba(195,142,19,.28);
  --gold-grad:linear-gradient(135deg,#e2af3a 0%,#f5ead1 32%,#e8c77a 58%,#bf8e1c 100%);--cream-grad:linear-gradient(135deg,#fffaf0 0%,#f3e7cd 55%,#e8c77a 100%);--sage:#5f7c60;--warm:var(--gold);
  --serif:'Cinzel',serif; --sans:'Jost',system-ui,sans-serif; --ital:'Cormorant Garamond',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.eyebrow{font:500 .78rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-d)}
.dark .eyebrow{color:var(--gold-l)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.04em;line-height:1.15}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);margin:.9rem 0 1rem}
.rule{width:64px;height:1px;background:var(--gold);margin:1.2rem 0}
.center{text-align:center}.center .rule{margin-inline:auto}
.lead{font-size:1.08rem;color:#5b4a38;max-width:60ch}
.dark .lead{color:#d6c9b2}
section{padding:clamp(64px,9vw,120px) 0}
.dark{background:radial-gradient(1200px 600px at 50% -10%,#2c251d 0%,var(--ink) 60%);color:var(--cream)}

/* buttons */
.btn{background:transparent;display:inline-flex;align-items:center;gap:.6rem;font:500 .82rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:1.05rem 1.7rem;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn-gold{background:var(--gold-grad);color:#2a1b05;box-shadow:0 8px 24px -10px rgba(195,142,19,.7)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(195,142,19,.9)}
.btn-line{border-color:var(--gold-l);color:var(--gold-l)}
.btn-line:hover{background:var(--gold-l);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--gold-l)}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn svg{width:15px;height:15px}

/* nav */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:.3s}
header.solid{background:rgba(22,19,14,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav img{height:38px;width:auto}
.nav ul{display:flex;gap:2rem;list-style:none}
.nav a.l{font:400 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#e7dcc6;opacity:.85;transition:.2s}
.nav a.l:hover{opacity:1;color:var(--gold-l)}
.nav .btn{padding:.8rem 1.2rem;font-size:.72rem}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--gold-l);margin:7px 8px;transition:.3s}
@media(max-width:980px){
  .nav ul,.nav .btn{display:none}.burger{display:block}
  header.open{background:var(--ink)}
  header.open .nav ul{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--ink);flex-direction:column;padding:1.5rem 20px 2rem;gap:1.4rem;border-top:1px solid var(--line)}
  header.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
  header.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
}

/* hero */
.hero{padding:0;min-height:var(--app-h,100svh);display:flex;align-items:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to top,var(--cream),transparent);opacity:0}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;padding-top:110px;padding-bottom:60px}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:1.2rem 0 0;letter-spacing:.06em}
.hero .sub{font:500 .95rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-l);margin:1.4rem 0 1.6rem}
.hero p.lead{margin-bottom:2.2rem}
.cta{display:flex;flex-wrap:wrap;gap:1rem}




.stage{position:relative;height:min(74vh,640px)}
.stage::before{content:"";position:absolute;left:50%;top:52%;width:min(520px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(222,228,240,.38);background:radial-gradient(circle,rgba(222,228,240,.10),rgba(222,228,240,.02) 62%,transparent 72%);box-shadow:0 0 0 38px rgba(222,228,240,.035),0 0 0 39px rgba(222,228,240,.16),inset 0 0 110px rgba(190,200,220,.16)}
.stage img{position:absolute;height:84%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transition:transform .6s cubic-bezier(.2,.8,.2,1)}



.stage:hover .a{transform:rotate(-13deg) translateX(-14px)}
.stage:hover .c{transform:rotate(13deg) translateX(14px)}
.float{animation:fl 6s ease-in-out infinite}
@keyframes fl{50%{translate:0 -10px}}
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:100px}
  .hero .lead{margin-inline:auto}.cta{justify-content:center}
  .stage{height:420px}
}

/* products */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:2.2rem 0 3rem}
.chip{font:500 .76rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:.85rem 1.3rem;border:1px solid var(--line);background:transparent;color:var(--gold-d);cursor:pointer;transition:.2s;border-radius:100px}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--ink);color:var(--gold-l);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem}
.card{position:relative;background:var(--paper);border:1px solid rgba(195,142,19,.18);padding:1.2rem 1.4rem 1.6rem;display:flex;flex-direction:column;transition:.4s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:330px;background:radial-gradient(circle at 50% 45%,#fff 0%,var(--cream-2) 70%);z-index:0}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -24px rgba(42,30,19,.45);border-color:var(--gold)}
.card .img{position:relative;z-index:1;height:300px;display:flex;justify-content:center;align-items:center;margin-bottom:1rem}
.card .img img{height:300px;width:auto;max-width:none;filter:drop-shadow(0 16px 18px rgba(30,20,10,.35));transition:.5s}
.card:hover .img img{transform:scale(1.05) rotate(-2deg)}
.tag{position:absolute;top:14px;left:14px;z-index:2;font:600 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;background:var(--ink);color:var(--gold-l);padding:.5rem .7rem}
.fam{position:absolute;top:14px;right:14px;z-index:2;font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.card h3{position:relative;z-index:1;font-size:1.3rem;margin-top:.4rem;text-align:center}
.int{display:flex;justify-content:center;align-items:center;gap:6px;margin:.7rem 0 .9rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#6c5a44}
.int b{display:flex;gap:4px}
.int s{width:9px;height:9px;border-radius:50%;background:var(--warm);display:block}
.int s.off{background:transparent;border:1px solid var(--warm)}
.card p{font-size:.95rem;color:#5b4a38;text-align:center;flex:1}
.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:1rem 0 1.3rem}
.notes span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:.35rem .6rem;color:var(--gold-d)}
.card .btn{justify-content:center;font-size:.72rem;padding:.95rem 1rem}
.card.hide{display:none}
.card>.int,.card>p,.card>.notes,.card>.price,.card>.btn{position:relative;z-index:1}
.final .rule{margin-inline:auto}
.price{font-size:.8rem;text-align:center;color:#6c5a44;margin-bottom:.9rem}
.price strong{font:600 1.15rem var(--serif);color:var(--ink);letter-spacing:.04em}

/* why */






/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}





@media(max-width:860px){.story{grid-template-columns:1fr;gap:2.5rem}}

/* reviews */
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.rev figure{background:var(--paper);border:1px solid rgba(195,142,19,.2);padding:2rem 1.8rem;position:relative}
.rev figure::before{content:"“";position:absolute;top:-6px;left:20px;font:600 5rem/1 var(--serif);color:var(--gold);opacity:.35}
.rev blockquote{font-size:1rem;color:#3a3126}
.rev figcaption{margin-top:1.2rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d)}
.rev figcaption em{display:block;font-style:normal;color:#6c5a44;letter-spacing:.06em;text-transform:none;margin-top:.15rem}
.src{margin-top:1.6rem;font-size:.82rem;color:#6c5a44;text-align:center}
@media(max-width:900px){.rev{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:2.6rem auto 0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:1.4rem 0;font:500 1.05rem var(--serif);letter-spacing:.03em;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 1.8rem var(--sans);color:var(--gold);transition:.3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 1.5rem;color:#5b4a38;max-width:68ch}

/* b2b */
.b2b{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.points{list-style:none;margin:1.8rem 0 0}
.points li{display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(232,199,122,.18);color:#e7dcc6}
.points li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55rem;background:var(--gold);transform:rotate(45deg)}
form{background:var(--cream);color:var(--ink);padding:2.4rem;display:grid;gap:1.1rem;border-top:3px solid var(--gold)}
form h3{font-size:1.3rem}
label{display:grid;gap:.4rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d)}
input,select,textarea{font:400 1rem var(--sans);padding:.9rem 1rem;border:1px solid #d6c9b2;background:#fff;color:var(--ink);border-radius:2px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hp{position:absolute;left:-9999px}
.note{font-size:.78rem;color:#6c5a44}
#fmsg{font-size:.92rem;min-height:1.2em}
@media(max-width:900px){.b2b{grid-template-columns:1fr;gap:2.5rem}.two{grid-template-columns:1fr}}

/* final cta + footer */
.final{text-align:center;padding:clamp(70px,9vw,110px) 0}
.final h2{font-size:clamp(1.8rem,4vw,3rem)}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;margin:2.4rem 0;font-size:1rem;color:#e7dcc6}
.contact a:hover{color:var(--gold-l)}
.social{display:flex;justify-content:center;gap:1.2rem;margin-top:2.4rem}
.social a{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%;color:var(--gold-l);transition:.25s}
.social a:hover{background:var(--gold-l);color:var(--ink)}
.social svg{width:19px;height:19px}
footer{background:#16130e;color:#bfae93;padding:3rem 0 2rem;font-size:.86rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
.foot img{height:62px;width:auto;margin-bottom:1rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot nav a:hover{color:var(--gold-l)}
.legal{border-top:1px solid rgba(195,142,19,.18);margin-top:2rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}

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

.sticky{display:none}
@media(max-width:700px){
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .sticky .btn{width:100%;justify-content:center}
  footer{padding-bottom:5.5rem}
}

/* ===== premium motion layer ===== */

.dark{position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* hero: dust, floor reflection */
.hero{background:
  radial-gradient(900px 520px at 78% 55%,rgba(195,142,19,.22),transparent 65%),
  radial-gradient(1200px 600px at 50% -10%,#2c251d 0%,var(--ink) 60%)}








#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.stage::after{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:46px;background:radial-gradient(closest-side,rgba(232,199,122,.35),rgba(0,0,0,.0));filter:blur(8px)}



.scroll-cue{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;font:500 .68rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#bfae93;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--gold-l),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* marquee */
.mq{background:#16130e;border-block:1px solid var(--line);overflow:hidden;padding:1.1rem 0;white-space:nowrap}
.mq div{display:inline-flex;gap:2.4rem;animation:mq 38s linear infinite;padding-right:2.4rem}
.mq span{font:500 .95rem var(--serif);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l);opacity:.85}
.mq span:nth-child(even){color:var(--gold);opacity:.6;font-size:.7rem;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}
.mq:hover div{animation-play-state:paused}
/* showcase */
.showcase{--c:#2389e2;background:
  radial-gradient(760px 560px at var(--g1x) var(--g1y),color-mix(in srgb,var(--c) 42%,transparent),transparent 70%),
  radial-gradient(900px 500px at var(--g2x) var(--g2y),color-mix(in srgb,var(--c) 18%,transparent),transparent 70%),var(--ink);
  transition:--c .8s ease,--g1x 1.1s ease,--g1y 1.1s ease,--g2x 1.1s ease,--g2y 1.1s ease}
.sc{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;margin-top:3rem;min-height:600px}
.sc-info{position:relative;z-index:2}
.sc-fam{display:inline-flex;gap:.7rem;align-items:center;font:500 .76rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--c);filter:brightness(1.6) saturate(1.1)}
.sc-fam::before{content:"";width:34px;height:1px;background:currentColor}
.sc-name{font-size:clamp(2.6rem,6vw,5rem);margin:.6rem 0 1rem;background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.05em;line-height:1.05}
.sc-desc{color:#d6c9b2;font-size:1.08rem;max-width:46ch;min-height:5.2em}
.sc-notes{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.sc-notes span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(232,199,122,.35);padding:.5rem .8rem;color:var(--gold-l)}
.sc-int{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:#bfae93}
.sc-int b{display:flex;gap:6px}
.sc-int s{width:26px;height:4px;border-radius:2px;background:var(--gold);transition:.5s}
.sc-int s.off{background:rgba(232,199,122,.2)}
.sc-info>*{transition:opacity .35s,transform .35s}
.sc.swap .sc-info>*{opacity:0;transform:translateY(10px)}
.sc-stage{position:relative;height:620px;display:grid;place-items:center;touch-action:pan-y}
.halo{position:absolute;width:min(480px,86%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent),transparent 68%);filter:blur(10px);animation:halo 5s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.08);opacity:.8}}
.ring{position:absolute;width:min(470px,84%);aspect-ratio:1;border-radius:50%;border:1px solid rgba(232,199,122,.28)}
.ring.r2{width:min(560px,98%);border-style:dashed;border-color:rgba(232,199,122,.14);animation:spin 60s linear infinite}
@keyframes spin{to{rotate:360deg}}
#scImg{position:relative;z-index:2;height:560px;width:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));will-change:transform}
.sc-nav{position:absolute;top:50%;translate:0 -50%;z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(22,19,14,.6);color:var(--gold-l);cursor:pointer;display:grid;place-items:center;transition:.25s;backdrop-filter:blur(6px)}
.sc-nav:hover{background:var(--gold-l);color:var(--ink)}
.sc-nav.p{left:0}.sc-nav.n{right:0}
.sc-nav svg{width:18px;height:18px}
.sc-count{position:absolute;right:0;bottom:6px;z-index:3;font:500 .8rem var(--serif);letter-spacing:.2em;color:#bfae93}
.sc-count b{color:var(--gold-l);font-size:1.3rem}
.thumbs{display:flex;gap:.7rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap}
.thumbs button{width:62px;height:96px;border:1px solid transparent;background:rgba(255,255,255,.03);border-radius:3px;cursor:pointer;padding:6px;transition:.3s;opacity:.55;position:relative}
.thumbs button img{height:100%;width:auto;margin:auto;object-fit:contain}
.thumbs button:hover{opacity:.9;transform:translateY(-3px)}
.thumbs button.on{opacity:1;border-color:var(--gold-l);background:rgba(232,199,122,.08);transform:translateY(-6px)}
@media(max-width:900px){
  .sc{grid-template-columns:1fr;min-height:0;gap:1rem}
  .sc-stage{order:-1;height:430px}
  #scImg{height:390px}
  .sc-desc{min-height:0}
  .sc-info{text-align:center}.sc-fam{justify-content:center}.sc-notes,.sc-int{justify-content:center}
  .sc-nav{width:42px;height:42px}
}
/* cards: 3D tilt + glare */
.card .img{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:330px;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.55),transparent 60%);mix-blend-mode:soft-light}
.card:hover::after{opacity:1}
/* gold border draw on hover */
.card{background-clip:padding-box}
/* why: icons line */


/* magnetic cta glow */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-120%}100%{left:170%}}
html{overflow-x:clip}
.showcase{overflow:hidden}



/* ===== 2026 layer ===== */
#prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--gold-grad);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
/* intro rise */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .wrap>div:first-child>*{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero .wrap>div:first-child>*:nth-child(1){animation-delay:.1s}
.hero .wrap>div:first-child>*:nth-child(2){animation-delay:.25s}
.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.4s}
.hero .wrap>div:first-child>*:nth-child(4){animation-delay:.52s}
.hero .wrap>div:first-child>*:nth-child(5){animation-delay:.64s}
.hero .wrap>div:first-child>*:nth-child(6){animation-delay:.76s}
.stage img{animation-fill-mode:both}
/* hanging sway: cards swing from the hole like from a rear-view mirror */
.stage img{transform-origin:50% 5%}



@keyframes sway{0%,100%{rotate:-1.7deg}50%{rotate:1.7deg}}
/* kinetic headings */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.14em 0;margin:-.14em 0}
.w>span{display:inline-block;transform:translateY(115%);transition:transform .95s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*65ms)}
.in h2 .w>span,h2.in .w>span{transform:none}
/* spotlight on dark sections */
.dark:not(.hero)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,30%),rgba(232,199,122,.075),transparent 65%)}
/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(215px,auto);gap:14px;margin-top:3.2rem}
.bt{position:relative;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:1.8rem;border-radius:4px;display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.bt::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(232,199,122,.16),transparent 60%);opacity:0;transition:opacity .35s}
.bt:hover{border-color:rgba(232,199,122,.6);transform:translateY(-4px)}
.bt:hover::before{opacity:1}
.bt>*{position:relative}
.bt .big{font:500 clamp(3rem,5vw,4.6rem)/1 var(--serif);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:auto;letter-spacing:.02em}
.bt h3{font-size:1.1rem;color:var(--cream);margin:1rem 0 .5rem}
.bt p{font-size:.95rem;color:#bfae93;max-width:42ch}










.bars{display:flex;gap:6px;margin-bottom:auto}
.bars i{flex:1;height:5px;border-radius:3px;background:rgba(232,199,122,.18);overflow:hidden;position:relative}
.bars i::after{content:"";position:absolute;inset:0;background:var(--gold-grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k)*140ms + .3s)}
.in .bars i::after{transform:none}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
/* quiz */
.quiz{padding-block:clamp(60px,8vw,110px)}
.qbox{border:1px solid var(--line);border-radius:4px;padding:clamp(1.8rem,5vw,4rem);display:grid;grid-template-columns:.9fr 1.3fr;gap:3rem;align-items:center;min-height:560px;overflow:hidden}
.qbox h2{margin:.9rem 0 1rem}
.q-steps{display:flex;gap:8px;margin-top:2rem}
.q-steps i{width:42px;height:3px;background:rgba(232,199,122,.22);transition:.5s;border-radius:2px}
.q-steps i.on{background:var(--gold-l)}
.q-steps i.done{background:var(--gold)}
.qbody{transition:opacity .35s,transform .35s;min-height:380px;display:flex;flex-direction:column;justify-content:center}
.qbody.out{opacity:0;transform:translateX(-24px)}
.qbody h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:1.6rem;color:var(--cream)}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qopts.one{grid-template-columns:1fr}
.qo{text-align:left;cursor:pointer;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--cream);padding:1.25rem 1.3rem;border-radius:4px;font:500 1rem var(--sans);transition:.3s;display:flex;flex-direction:column;gap:.3rem}
.qo small{font:400 .84rem var(--sans);color:#bfae93}
.qo:hover,.qo:focus-visible{border-color:var(--gold-l);background:rgba(232,199,122,.1);transform:translateY(-3px);outline:none}
.qres{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.qres .pic{position:relative;display:grid;place-items:center;width:200px}
.qres .pic::before{content:"";position:absolute;width:210px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc,#c38e13) 55%,transparent),transparent 68%)}
.qres img{position:relative;height:330px;width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.qres .tg{font:500 .74rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}
.qres h3{font-size:clamp(1.9rem,4vw,2.9rem);margin:.5rem 0 .8rem;background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qres p{color:#d6c9b2;margin-bottom:1.4rem}
.qres .cta{gap:.8rem}
.qres .alt{margin-top:1.4rem;font-size:.86rem;color:#bfae93}
.qres .alt button{background:none;border:0;color:var(--gold-l);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}
.qlink{background:none;border:0;color:var(--gold-l);cursor:pointer;font:500 .78rem var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:1rem .4rem}
@media(max-width:980px){.qbox{grid-template-columns:1fr;gap:1.6rem;min-height:0}.qbody{min-height:0}}
@media(max-width:560px){.qopts{grid-template-columns:1fr}.qres{grid-template-columns:1fr;text-align:center}.qres .pic{margin:auto}.qres .cta{justify-content:center}}



/* ===== photography ===== */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-photo img{position:absolute;right:0;top:-6%;width:82%;height:112%;object-fit:cover;object-position:50% 55%;opacity:.62;
  filter:saturate(.92) contrast(1.06) brightness(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 30%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 30%);mask-composite:intersect;
  translate:0 calc(var(--hy,0)*1px);will-change:translate}
.hero-photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 480px at 76% 56%,rgba(22,19,14,.55),transparent 70%),
  linear-gradient(180deg,rgba(22,19,14,.7) 0,transparent 24%),
  linear-gradient(0deg,var(--ink) 0,transparent 22%)}
@media(max-width:980px){.hero-photo img{width:100%;opacity:.38;object-position:62% 50%;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 45%);mask-image:linear-gradient(0deg,transparent 0,#000 45%)}}
/* cinematic band */
.band{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;color:var(--cream);padding:clamp(70px,10vw,130px) 0;isolation:isolate;background:var(--ink)}
.band-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band-bg img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:62% 50%;translate:0 calc(var(--bp,0)*1px);filter:saturate(1.05) contrast(1.05);will-change:translate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,19,14,.94) 0,rgba(22,19,14,.78) 34%,rgba(22,19,14,.15) 68%,rgba(22,19,14,.4) 100%),linear-gradient(0deg,rgba(22,19,14,.7),transparent 30%)}
.band .wrap{position:relative}
.band .eyebrow{color:var(--gold-l)}
.band h2{font-size:clamp(2rem,4.6vw,3.7rem);max-width:17ch;margin:1.1rem 0 1.8rem;line-height:1.2}
.band .lead{margin-bottom:2.2rem;color:#d6c9b2}
.band .tick{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:560px}
.band .tick>div{display:flex;flex-direction:column-reverse}
.band .tick dd{font:500 1.7rem var(--serif);color:var(--gold-l);margin:0}
.band .tick dt{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#bfae93}
@media(max-width:760px){.band::before{background:linear-gradient(0deg,rgba(22,19,14,.96) 0,rgba(22,19,14,.7) 55%,rgba(22,19,14,.35) 100%)}.band-bg img{object-position:68% 40%}}
/* b2b backdrop */
.sec-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sec-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 45%;opacity:.42;filter:saturate(.8)}
.sec-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,19,14,.55),rgba(22,19,14,.92) 62%),linear-gradient(0deg,var(--ink),transparent 30%),linear-gradient(180deg,var(--ink),transparent 25%)}


/* ===== audit fixes ===== */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold-l);color:var(--ink);padding:.8rem 1.1rem;font:500 .85rem var(--sans);border-radius:2px;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.dark :focus-visible,header :focus-visible,footer :focus-visible,.sticky :focus-visible,.band :focus-visible{outline-color:var(--gold-l)}
.btn-gold:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--ink)}
.sc-price{align-self:center;color:#d6c9b2;font-size:.95rem}
.sc-price small{opacity:.8}
.sc-pause{position:absolute;left:0;bottom:0;z-index:3;min-width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(22,19,14,.6);color:var(--gold-l);cursor:pointer;font-size:.7rem;display:grid;place-items:center;transition:.25s}
.sc-pause:hover{background:var(--gold-l);color:var(--ink)}
.chip{min-height:44px}
.burger{width:44px;height:44px}
.foot nav a{padding:.5rem 0;display:inline-block}
.contact a{padding:.4rem 0;display:inline-block}
.note a,.legal a{text-decoration:underline;text-underline-offset:3px}
.rev figure{padding-top:2.4rem}
.rev blockquote{quotes:none}
/* document pages (privacy, 404) */
.doc{background:var(--cream);padding:clamp(120px,14vw,170px) 0 clamp(60px,8vw,110px);min-height:70vh}
.doc .narrow{max-width:760px}
.doc h1{font-size:clamp(2rem,5vw,3.2rem);margin:.8rem 0 .6rem}
.doc h2{font-size:1.3rem;margin:2.4rem 0 .7rem;letter-spacing:.03em}
.doc p{color:#3a3126;margin-bottom:.9rem;max-width:68ch}
.doc a{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
.doc .btn{text-decoration:none;color:#ffffff}
.doc .upd{color:#6c5a44;font-size:.9rem}
.doc.center .narrow{text-align:center}
body.page header .btn-line{padding:.8rem 1.2rem;font-size:.72rem}
body.page header.solid{background:rgba(22,19,14,.97)}

/* accent on dark surfaces */
.dark,.band,.mq,footer{--gold:#d6a935;--line:rgba(232,199,122,.24)}

/* ===== interactive product, touch spotlight, mobile rail ===== */
.sc-tilt{position:relative;z-index:2;perspective:900px;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,1.4,.3,1);touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
.sc-tilt.live{transition:transform .08s linear;cursor:grabbing}
.sc-tilt #scImg{display:block}
.sc-tilt .glare{position:absolute;inset:2% 4%;border-radius:12px;pointer-events:none;opacity:var(--go,0);transition:opacity .3s;mix-blend-mode:soft-light;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.85),transparent 62%)}
.mist{position:absolute;left:50%;top:22%;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 70%,#fff) 0%,transparent 70%);filter:blur(1px)}
.sc-hint{position:absolute;left:50%;translate:-50% 0;top:0;text-align:center;width:max-content;z-index:3;font:500 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#bfae93;max-width:80%;transition:opacity .6s}
.sc-hint.gone{opacity:0}
.h-touch{display:none}
@media(hover:none),(pointer:coarse){.h-fine{display:none}.h-touch{display:inline}}
.swipe-hint{display:none}
@media(hover:none),(pointer:coarse){.dark:not(.hero)::after{background:radial-gradient(420px circle at var(--sx,50%) var(--sy,30%),rgba(232,199,122,.16),transparent 66%)}}

/* compact quiz, no dead space */
.quiz{padding-block:clamp(36px,5vw,70px) 0}
.qbox{min-height:0}.qbody{min-height:320px}
#parfumuri{padding-top:clamp(48px,7vw,90px)}

@media(max-width:700px){
  section{padding:clamp(48px,12vw,72px) 0}
  h2{font-size:clamp(1.55rem,7vw,2rem)}
  .wrap{width:calc(100% - 32px)}
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:1.4rem -16px 1.2rem;padding:2px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar,.grid::-webkit-scrollbar,.thumbs::-webkit-scrollbar{display:none}
  .chip{flex:none;padding:.95rem 1.2rem;min-height:44px}
  .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-16px;padding:6px 16px 22px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .card{flex:0 0 78vw;max-width:310px;scroll-snap-align:center;scroll-margin-inline:16px}
  .swipe-hint{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-top:-.4rem}
  .thumbs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:-16px;padding:8px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
  .thumbs button{flex:none;scroll-snap-align:center}
  .sc-stage{height:min(440px,calc(var(--app-h,100svh)*0.62))}
  #scImg{height:min(380px,calc(var(--app-h,100svh)*0.54))}
  .sc-hint{max-width:86%;top:-4px}
  .sc-count{bottom:-2px}
  .sc{margin-top:1.4rem}
  .sc-desc{font-size:1rem}
  .hero .wrap{padding-top:92px;padding-bottom:40px;gap:1.2rem}
  .stage{height:min(380px,calc(var(--app-h,100svh)*0.48))}
  .btn{min-height:48px}
  .cta .btn{flex:1 1 100%;justify-content:center}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}

  .bt{padding:1.2rem}
  .qbox{padding:1.4rem}
  .qopts{gap:10px}.qo{min-height:56px}
  .band{min-height:0}
  form{padding:1.4rem}
  .b2b{gap:2rem}
}
@media(max-width:380px){.card{flex-basis:84vw}.hero h1{font-size:2.4rem}}

@media(max-width:700px){
  .hero .wrap>div:first-child{display:contents}
  .hero .wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding-top:88px}
  .hero .wrap>div:first-child>*:nth-child(1){order:1}
  .hero .wrap>div:first-child>*:nth-child(2){order:2;margin-top:.4rem}
  .hero .wrap>div:first-child>*:nth-child(3){order:3;margin:.6rem 0 0;font-size:.8rem;letter-spacing:.26em}
  .hero .stage{order:4;width:100%;height:min(330px,calc(var(--app-h,100svh)*0.4));margin:.2rem 0}
  .hero .wrap>div:first-child>*:nth-child(4){order:5;font-size:1rem;margin-bottom:.4rem}
  .hero .wrap>div:first-child>*:nth-child(5){order:6;width:100%}
  .hero .wrap>div:first-child>*:nth-child(6){order:7;margin-top:1rem;gap:.4rem 1.2rem;font-size:.7rem}
  .hero .cta .btn-line{flex:1 1 100%}
}

@media(max-width:700px){
  .sticky{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .sticky.show{transform:none}
  .hero .stage::before{width:min(290px,80%);top:50%;box-shadow:0 0 0 18px rgba(222,228,240,.035),0 0 0 19px rgba(222,228,240,.16),inset 0 0 70px rgba(190,200,220,.18)}
  .hero .stage{margin-top:1rem}
}

/* catalog palette. Gold only on buttons, prices, fine lines; sage as secondary action */
form .btn-dark,form button[type=submit]{background:var(--sage);color:#fff}
form .btn-dark:hover,form button[type=submit]:hover{background:#6f8a6c}
.q-steps i.on{background:var(--gold-l)}

/* silver instead of gold behind the hero products */
.stage::after{content:"";position:absolute;left:50%;top:52%;width:min(520px,90%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(236,240,248,.75) 70%,transparent 78% 100%);
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 2px),#000 calc(50% - 1px) 50%,transparent calc(50% + 1px));mask:radial-gradient(circle,transparent calc(50% - 2px),#000 calc(50% - 1px) 50%,transparent calc(50% + 1px));
  animation:silverspin 9s linear infinite}
@keyframes silverspin{to{rotate:360deg}}
@media(max-width:700px){.stage::after{width:min(290px,80%);top:50%}}


.hero-photo img{filter:saturate(.38) contrast(1.08) brightness(.92) hue-rotate(-8deg)}
.hero-photo::after{background:
  radial-gradient(700px 480px at 76% 56%,rgba(22,19,14,.5),transparent 70%),
  linear-gradient(180deg,rgba(22,19,14,.78) 0,transparent 28%),
  linear-gradient(0deg,var(--ink) 0,transparent 22%),
  linear-gradient(135deg,rgba(120,134,160,.14),transparent 55%)}

/* full-res zoom */



dialog#zoom{border:0;padding:0;background:#16130e;color:var(--cream);width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
dialog#zoom::backdrop{background:rgba(22,19,14,.92)}







/* cookie consent */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:12px;pointer-events:none}
.cc-in{pointer-events:auto;max-width:760px;margin:0 auto;background:#1d1912;color:var(--cream);border:1px solid rgba(232,199,122,.3);border-radius:6px;padding:1.1rem 1.2rem 1.2rem;box-shadow:0 20px 60px -10px rgba(0,0,0,.7)}
.cc .cc-h{font:500 1.05rem var(--serif);letter-spacing:.06em;margin:0 0 .4rem;color:var(--cream)}
.cc p{font-size:.9rem;color:#d6c9b2;margin:0}
.cc p a{color:var(--gold-l);text-decoration:underline;text-underline-offset:3px}
.cc-set{margin-top:.9rem;border-top:1px solid rgba(232,199,122,.2)}
.cc-set[hidden]{display:none}
.cc-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(232,199,122,.14);cursor:pointer}
.cc-row b{display:block;font-weight:500;font-size:.92rem}
.cc-row small{display:block;font-size:.8rem;color:#bfae93}
.cc-row input{width:22px;height:22px;accent-color:#c38e13;flex:none}
.cc-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.cc-b{font:500 .78rem/1.1 var(--sans);letter-spacing:.12em;text-transform:uppercase;min-height:48px;padding:.7rem .6rem;border-radius:3px;cursor:pointer;color:var(--cream);background:transparent;border:1px solid rgba(232,199,122,.55);transition:.2s}
.cc-b:hover{background:rgba(232,199,122,.14)}
.cc-b:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.cc-open{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem .2rem;min-height:44px;opacity:.9}
.cc-open:hover{color:var(--gold-l)}
@media(max-width:520px){.cc{padding:8px}.cc-btns{grid-template-columns:1fr 1fr}.cc-btns [data-a=set],.cc-btns [data-a=save]{grid-column:1/-1;order:3}}
.cc-in{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}

.cc-row{text-transform:none;letter-spacing:0;font:400 .92rem var(--sans);color:var(--cream)}
.cc-row b{color:var(--cream);text-transform:none;letter-spacing:0}
.cc-row small{text-transform:none;letter-spacing:0;color:#bfae93;margin-top:.15rem}

/* phone readability (min ~12px for small labels, 44px tap targets) */
@media(max-width:700px){
  .eyebrow,.sc-fam,.chip,.int,.sc-int,.sc-hint,.swipe-hint,.sc-pause,.fam,.tag,.scroll-cue span,.q-steps,.mq span,.note,form .note{font-size:max(.78rem,12.5px)}
  .tag{font-size:.74rem;padding:.5rem .7rem}
  .fam{font-size:.74rem}
  .notes span,.sc-notes span{font-size:.76rem}
  .card .btn{font-size:.8rem}
  .band .tick dt,.story dl dt,dt{font-size:.78rem}
  label{font-size:.78rem}
  .legal,footer p,footer nav a{font-size:.9rem}
  footer nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
  footer nav a,footer .legal a,.final a[href^="tel"],.final a[href^="mailto"],.final .contact a{display:inline-flex;align-items:center;min-height:44px}
  .nav a[aria-label]{display:inline-flex;align-items:center;min-height:44px}
}

/* v14b: symmetric, centered layout on phones */
@media(max-width:700px){
  .scroll-cue{display:none}

  .tag{font-size:.76rem}.fam{font-size:.76rem}
  .swipe-hint{font-size:.74rem;letter-spacing:.12em}
  .band .wrap,.story,.story>div,.b2b>div:first-child{text-align:center}
  .band h2{margin-inline:auto}
  .band .lead{margin-inline:auto}
  .band .cta{justify-content:center}
  .band .tick{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-inline:auto;max-width:none;text-align:center}
  .band .tick>div{align-items:center}
  .story .rule,.b2b .rule,.band .rule{margin-inline:auto}
  .points{text-align:left;max-width:34rem;margin-inline:auto}

}

/* v14c: contact + footer centered on phones */
@media(max-width:700px){
  .swipe-hint{font-size:.76rem}
  .contact{flex-direction:column;align-items:center;gap:.2rem;margin:1.6rem 0 1.2rem;text-align:center}
  .contact a,.contact span{min-height:44px;display:inline-flex;align-items:center}
  .foot{flex-direction:column;align-items:center;text-align:center;gap:1.2rem}
  .foot p{margin-inline:auto}
  .foot img{margin-inline:auto}
  .foot nav{justify-content:center}
  .legal{flex-direction:column;align-items:center;text-align:center}
  .social{justify-content:center}
}

/* home */
.m-only{display:none}
@media(max-width:980px){.m-only{display:block}}
.nav a.home{display:inline-flex;align-items:center;min-height:44px}

/* partners (B2B) */


.b2b-cue{margin-top:1.2rem;font-size:.9rem}
.b2b-cue a{color:#d6c9b2;border-bottom:1px solid rgba(232,199,122,.35);padding-bottom:2px;transition:.2s}
.b2b-cue a b{color:var(--gold-l);font-weight:500}
.b2b-cue a:hover{color:#fff;border-color:var(--gold-l)}
.btn-sage{background:var(--sage);color:#fff;border-color:var(--sage);box-shadow:0 10px 26px -12px rgba(95,124,96,.9)}
.btn-sage:hover{background:#6f8a6c;transform:translateY(-2px)}
.btn-sage svg{width:18px;height:18px}
.steps{list-style:none;counter-reset:s;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;column-gap:.9rem;align-items:start}
.steps li::before{content:counter(s);grid-row:1/3;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold-l);display:grid;place-items:center;font:500 .95rem var(--serif)}
.steps b{font:500 1rem var(--sans);color:var(--cream)}
.steps span{font-size:.9rem;color:#bfae93}


@media(max-width:700px){
  .b2b-cue{text-align:center}
  .steps{text-align:left;max-width:34rem;margin-inline:auto}


  .b2b-cue a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:1180px) and (min-width:981px){.nav ul{gap:1.2rem}}
@media(max-width:700px){.hero .wrap>div:first-child>*:nth-child(7){order:8;margin-top:.2rem}}
.b2b-cue a b{margin-left:.35em}


/* stand in comodat */
.b2b-head{margin-bottom:clamp(28px,5vw,56px)}
.stand{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-bottom:clamp(48px,7vw,96px);padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
.stand-fig{margin:0;display:flex;flex-direction:column;align-items:center}
.stand-svg{width:100%;height:auto;max-height:80vh;display:block;overflow:visible}
.stand-fig figcaption{margin-top:.8rem;font-size:.78rem;letter-spacing:.06em;color:#bfae93;text-align:center}
.stand-info h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:.8rem 0 1rem;color:var(--cream)}
.stand-info p{color:#d6c9b2;max-width:56ch}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:1.8rem 0 1.4rem;max-width:520px}
.specs div{background:#1d1912;padding:1.1rem 1.2rem;display:flex;flex-direction:column-reverse}
.specs dd{margin:0;font:500 clamp(1.5rem,2.6vw,2rem) var(--serif);background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.specs dt{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#bfae93}


@media(max-width:900px){
  .stand{grid-template-columns:1fr;text-align:center}
  .stand-svg{max-height:none}
  .stand-info p{margin-inline:auto}
  .specs{margin-inline:auto}
  .specs div{align-items:center;text-align:center}
}

/* ilustratie stand (imagine) */
.stand-img{display:block;width:auto;height:auto;max-width:100%;max-height:78vh;border-radius:6px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(232,199,122,.18)}
@media(max-width:900px){.stand-img{max-height:none;width:min(80vw,360px)}}


.stand-pts{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.5rem}
.stand-pts li{position:relative;padding-left:1.5rem;color:#e7dcc6}
.stand-pts li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--gold);transform:rotate(45deg)}
@media(max-width:900px){.stand-pts{justify-items:center}.stand-pts li{text-align:left}}

.stand-key{margin:1.1rem 0;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:rgba(214,169,53,.08);color:#e7dcc6!important;max-width:60ch}
.stand-key strong{color:var(--gold-l);font-weight:600}
@media(max-width:900px){.stand-key{text-align:left;margin-inline:auto}}

.stand-cta{margin-top:1.8rem;padding:1.4rem 1.5rem;border:1px solid rgba(232,199,122,.35);background:linear-gradient(135deg,rgba(214,169,53,.12),rgba(214,169,53,.03))}
.stand-cta-h{font-family:var(--serif,'Cinzel',serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--cream);margin:0 0 .4rem!important;letter-spacing:.02em}
.stand-cta-p{margin:0 0 1.1rem!important;color:#e7dcc6!important}
.stand-cta .cta{display:flex;flex-wrap:wrap;gap:.8rem}
@media(max-width:900px){.stand-cta .cta{justify-content:center}}

/* Pentru magazine = buton auriu ca "Cumpara pe eMAG" */
.nav a.nav-b2b{opacity:1;color:#fff;padding:.78rem 1.25rem;min-height:0}
@media(max-width:1180px) and (min-width:981px){.nav a.nav-b2b{padding:.7rem .9rem}}
@media(max-width:980px){.nav ul .btn.nav-b2b{display:inline-flex;align-self:flex-start;min-height:44px;padding:.9rem 1.4rem}}

/* produsele interactive nu se pot selecta / trage; hero cu pulverizare */
.stage,.stage img,.sc-stage,.sc-tilt,.sc-tilt img,.sc-stage .glare{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.stage img,.sc-tilt img{pointer-events:auto}
.stage img{cursor:pointer;touch-action:manipulation}
.stage .mist{left:0;top:0}

img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.card,.qres .pic,.thumbs,.th,.stand-fig{-webkit-tap-highlight-color:transparent}

/* telefon: fundal hero mai larg (volan + display), nu doar decupajul din mijloc */
@media(max-width:700px){
  .hero-photo img{left:0;right:auto;top:7%;width:158%;max-width:none;height:auto;object-fit:fill;object-position:0 0;opacity:.56;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%)}
}

/* colectia incape intr-un ecran: produsul si descrierea se vad impreuna */
#colectie{padding-top:clamp(18px,calc(var(--app-h,100svh)*0.034),44px);padding-bottom:clamp(14px,calc(var(--app-h,100svh)*0.03),40px)}
#colectie .center .rule{margin:.55rem auto}
#colectie h2{font-size:clamp(1.5rem,min(3.2vw,calc(var(--app-h,100svh)*0.046)),2.3rem)}
#colectie .sc{margin-top:clamp(.4rem,calc(var(--app-h,100svh)*0.016),1.4rem);min-height:0;gap:clamp(1.5rem,3vw,3rem)}
#colectie .sc-stage{height:clamp(360px,calc(var(--app-h,100svh) - 72px - 175px),620px)}
#colectie #scImg{height:calc(clamp(360px,calc(var(--app-h,100svh) - 72px - 175px),620px) - 60px)}
#colectie .sc-name{font-size:clamp(2.1rem,min(5vw,calc(var(--app-h,100svh)*0.085)),4.4rem);margin:.3rem 0 .6rem}
#colectie .sc-desc{min-height:4.8em}
#colectie .sc-notes{margin:clamp(.6rem,calc(var(--app-h,100svh)*0.02),1.3rem) 0}
#colectie .sc-int{margin-bottom:clamp(.8rem,calc(var(--app-h,100svh)*0.024),1.8rem)}
@media(max-width:900px){
  #colectie{padding-top:12px;padding-bottom:8px}
  #colectie .center .eyebrow{display:none}
  #colectie h2{font-size:1.2rem;letter-spacing:.05em}
  #colectie .center .rule{margin:.4rem auto .1rem}
  #colectie .sc{margin-top:.2rem;gap:.1rem}
  #colectie .sc-stage{height:clamp(200px,calc(var(--app-h,100svh) - 525px),400px)}
  #colectie #scImg{height:clamp(180px,calc(var(--app-h,100svh) - 545px),380px)}
  #colectie .sc-name{font-size:clamp(1.6rem,7.4vw,2.1rem);margin:.1rem 0 .25rem}
  #colectie .sc-desc{font-size:.95rem;line-height:1.45;min-height:4.35em;margin-inline:auto}
  #colectie .sc-notes{margin:.5rem 0;gap:.35rem}
  #colectie .sc-notes span{padding:.35rem .6rem}
  #colectie .sc-int{margin-bottom:.6rem}
  #colectie .sc-hint{display:none}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(180px,calc(var(--app-h,100svh) - 545px),400px)}
  #colectie #scImg{height:clamp(160px,calc(var(--app-h,100svh) - 565px),380px)}
  #colectie .sc-desc{font-size:.9rem;line-height:1.4;min-height:4.2em}
  #colectie .sc-notes{margin:.4rem 0}
}

/* pe telefon fara descriere sub produs: produsul se mareste (descrierea ramane pentru cititoare de ecran) */
@media(max-width:900px){
  #colectie .sc-desc{position:absolute!important;width:1px;height:1px;min-height:0!important;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  #colectie .sc-stage{height:clamp(210px,calc(var(--app-h,100svh) - 465px),520px)}
  #colectie #scImg{height:clamp(190px,calc(var(--app-h,100svh) - 487px),490px)}
  #colectie .sc-notes{margin:.55rem 0}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(170px,calc(var(--app-h,100svh) - 480px),520px)}
  #colectie #scImg{height:clamp(150px,calc(var(--app-h,100svh) - 502px),490px)}
}

/* bara plutenta pe telefon: doua butoane identice (eMAG + magazine) */
@media(max-width:980px){
  .sticky{gap:.6rem;padding-inline:12px}
  .sticky .btn{flex:1 1 0;width:auto;min-width:0;padding:.95rem .5rem;font-size:.7rem;letter-spacing:.1em;white-space:nowrap}
}
@media(max-width:350px){.sticky .btn{font-size:.64rem;letter-spacing:.06em}}

/* butoanele verzi au acelasi efect de luciu ca cele aurii */
.btn-sage{position:relative;overflow:hidden;background:linear-gradient(135deg,#4f6b50 0%,#6f9370 38%,#8fb490 52%,#5f7c60 75%,#4a654b 100%);border-color:#7fa080;box-shadow:0 10px 26px -12px rgba(95,124,96,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-sage:hover{background:linear-gradient(135deg,#557356 0%,#79a07a 38%,#9cc19d 52%,#668566 75%,#4f6b50 100%)}
.btn-sage::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite;pointer-events:none}


/* telefon: produsele din "Toate parfumurile" se deruleaza in jos (nu lateral) */
@media(max-width:700px){
  .grid{display:grid;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none;gap:1.1rem;margin-inline:0;padding:4px 0 8px}
  .card{flex:none;width:100%;max-width:none;scroll-snap-align:none}
  .swipe-hint{display:none}
  .filters{flex-wrap:wrap;overflow:visible;justify-content:center;margin:1.2rem 0 1.2rem;padding:0;gap:.5rem;scroll-snap-type:none}
}

/* hero pe ecrane late de telefon/tableta: pachetele raman unite, cercul centrat */
@media(max-width:980px){
  .hero .stage{width:min(100%,420px);margin-inline:auto}
}

/* "Vezi toate" pe telefon */
.grid-more{display:flex;margin:1.6rem auto 0;justify-content:center}
.card.fold{display:none}
.grid-more[hidden]{display:none}
@media(max-width:700px){
  .grid-more{width:100%;margin-top:.4rem}
}

/* telefon: produsul e vedeta in colectie (mai mare); etichetele de note sunt in lista "Toata gama" */
@media(max-width:900px){
  #colectie .sc-notes{display:none}
  #colectie .sc-stage{height:clamp(240px,calc(var(--app-h,100svh) - 414px),620px)}
  #colectie #scImg{height:clamp(220px,calc(var(--app-h,100svh) - 434px),590px)}
  #colectie .sc-name{margin:.05rem 0 .2rem}
  #colectie .sc-int{margin-bottom:.55rem}
  #colectie .ring{width:min(420px,76%)}#colectie .ring.r2{width:min(500px,92%)}
  #colectie .halo{width:min(420px,84%)}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(200px,calc(var(--app-h,100svh) - 410px),620px)}
  #colectie #scImg{height:clamp(180px,calc(var(--app-h,100svh) - 430px),590px)}
}

/* telefon: produsul din colectie mai mare (banda neagra eliminata) */
@media(max-width:900px){
  #colectie .sc-stage{height:clamp(250px,calc(var(--app-h,100svh) - 414px),640px)}
  #colectie #scImg{height:clamp(230px,calc(var(--app-h,100svh) - 434px),610px)}
  #colectie .ring{width:min(420px,76%)}#colectie .ring.r2{width:min(500px,92%)}
  #colectie .halo{width:min(420px,84%)}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(200px,calc(var(--app-h,100svh) - 414px),640px)}
  #colectie #scImg{height:clamp(180px,calc(var(--app-h,100svh) - 434px),610px)}
}

/* telefon: standul apare intreg pe ecran */
@media(max-width:900px){
  .stand-img{width:auto;max-width:100%;height:min(calc(var(--app-h,100svh) - 190px),760px);max-height:none;object-fit:contain}
}

/* hero pe telefon: cercul mai mic, in proportie cu pachetele */
@media(max-width:700px){
  .hero .stage::before{width:min(318px,78%);top:53%;box-shadow:0 0 0 9px rgba(222,228,240,.035),0 0 0 10px rgba(222,228,240,.18),inset 0 0 50px rgba(190,200,220,.18)}
  .hero .stage::after{width:min(318px,78%);top:53%}
}

/* telefon: buton mai mic, miniaturile pe urmatorul ecran, produs mai mare */
@media(max-width:900px){
  #colectie .sc-info .cta{align-items:center}
  #colectie .sc-info .cta .btn{width:auto;min-width:0;min-height:42px;padding:.5rem 1.5rem;font-size:.74rem;letter-spacing:.14em}
  #colectie .sc-price{font-size:.86rem}
  #colectie .thumbs{margin-top:3.2rem}
  #colectie .sc-stage{height:clamp(250px,calc(var(--app-h,100svh) - 394px),680px)}
  #colectie #scImg{height:clamp(230px,calc(var(--app-h,100svh) - 414px),650px)}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(200px,calc(var(--app-h,100svh) - 394px),680px)}
  #colectie #scImg{height:clamp(180px,calc(var(--app-h,100svh) - 414px),650px)}
}
@media(max-width:900px){
  #colectie .sc-info .cta .btn{flex:0 0 auto;min-height:40px;padding:.45rem 1.6rem}
  #colectie .sc-info .cta{justify-content:center;gap:.5rem}
  #colectie .sc-price{flex:1 1 100%;text-align:center}
}

/* hero pe telefon: pachete mai mari (pana aproape de marginea textului) si mai animate */
@media(max-width:980px){
  .hero .stage{width:100%;max-width:none;height:min(380px,calc(var(--app-h,100svh)*0.43))}
  .hero .stage img{height:86%}



}





/* telefon: produsul ocupa cea mai mare parte din ecran (titlu ascuns vizual, fara miniaturi, pret langa buton) */
@media(max-width:900px){
  #colectie .center{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
  #colectie{padding-top:10px}
  #colectie .thumbs{display:none}
  #colectie .sc-info .cta{flex-wrap:nowrap;gap:.9rem;align-items:center;justify-content:center}
  #colectie .sc-price{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.15;text-align:left;font-size:1rem}
  #colectie .sc-price small{font-size:.66rem;display:block}
  #colectie .sc-stage{height:clamp(300px,calc(var(--app-h,100svh) - 300px),760px)}
  #colectie #scImg{height:clamp(280px,calc(var(--app-h,100svh) - 320px),730px)}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(240px,calc(var(--app-h,100svh) - 300px),760px)}
  #colectie #scImg{height:clamp(220px,calc(var(--app-h,100svh) - 320px),730px)}
}
@media(max-width:900px){
  #colectie .ring{width:min(520px,100%)}#colectie .ring.r2{width:min(620px,118%)}
  #colectie .halo{width:min(520px,100%)}
}

/* text hero mai fin */
.hero .lead{text-wrap:balance}

/* sunet (buton in antet), indiciu in hero, banda cu farul mai lata pe telefon */
.nav-r{display:flex;align-items:center;gap:2px}
.snd{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:var(--gold-l);cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:color .25s,background .25s}
.snd svg{width:22px;height:22px}
.snd:hover{background:rgba(232,199,122,.1)}
.snd .w{opacity:0;transition:opacity .25s}.snd .x{opacity:1;transition:opacity .25s}
.snd.on .w{opacity:1}.snd.on .x{opacity:0}
.snd:not(.on){color:#bfae93}
.snd:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.stage-hint{position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:4;pointer-events:none;white-space:nowrap;font:500 .68rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);padding:.45rem .9rem;border:1px solid rgba(232,199,122,.35);border-radius:999px;background:rgba(22,19,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:hintPulse 2.6s ease-in-out 1.2s infinite;transition:opacity .4s}
.stage-hint.gone{opacity:0;animation:none}
@keyframes hintPulse{0%,100%{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* pe telefon fara spotlight; indiciu discret in colectie; baloon scurt pentru butonul de sunet */
.sc-hint .h-short{display:none}
@media(max-width:980px),(hover:none),(pointer:coarse){
  .dark:not(.hero)::after{display:none!important}
}
@media(max-width:900px){
  #colectie .sc-hint{display:block;top:auto;bottom:6px;max-width:58%;font-size:.6rem;letter-spacing:.16em;color:#bfae93;opacity:.85;pointer-events:none}
  #colectie .sc-hint .h-fine,#colectie .sc-hint .h-touch{display:none}
  #colectie .sc-hint .h-short{display:inline}
  #colectie .sc-hint.gone{opacity:0}
}
.nav-r{position:relative}


@media(max-width:900px){
  #colectie #scImg{height:clamp(264px,calc(var(--app-h,100svh) - 338px),714px)}
  #colectie .sc-hint{bottom:10px}
}
@media(max-width:900px) and (max-height:760px){
  #colectie #scImg{height:clamp(204px,calc(var(--app-h,100svh) - 338px),714px)}
}

/* hero orbital (fara cerc): produs principal in prim plan, restul orbiteaza la baza lui */
.stage::before,.stage::after,.hero .stage::before,.hero .stage::after{display:none!important}
.stage.show{--c:#e8c77a;position:relative}
.stage.show .hs-floor{position:absolute;left:50%;top:calc((100% - 50px) * .9);width:min(96%,600px);height:calc((100% - 50px) * .24);translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;filter:blur(9px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 40%,transparent),color-mix(in srgb,var(--c) 11%,transparent) 58%,transparent 78%)}
.stage.show .hs-orbit{position:absolute;inset:0;z-index:2}
.stage.show .ob{position:absolute;left:0;top:0;width:auto;max-width:none;transform-origin:50% 100%;will-change:transform,opacity;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));cursor:pointer;touch-action:manipulation;-webkit-user-drag:none;pointer-events:auto}
.stage.show .hs-orbit:not(.ready) .ob{left:50%;top:calc((100% - 50px) * .04);height:calc((100% - 50px) * .84);translate:-50% 0}
.hero .stage.show .ob{animation:none!important}
.stage.show .hs-cap{position:absolute;left:0;right:0;bottom:24px;z-index:5;display:flex;justify-content:center;align-items:baseline;gap:.75rem;text-align:center;pointer-events:none}
.stage.show .hs-fam{font:500 .68rem var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l)}
.stage.show .hs-name{font:500 1.18rem var(--serif);letter-spacing:.07em;color:var(--cream)}
.stage.show .hs-dots{position:absolute;left:0;right:0;bottom:2px;z-index:5;display:flex;justify-content:center;gap:6px;pointer-events:none;animation:hsDotsIn .9s ease 7s both}
.stage.show .hs-dots i{width:5px;height:5px;border-radius:5px;background:rgba(232,199,122,.28);transition:width .5s cubic-bezier(.2,.8,.2,1),background .5s}
.stage.show .hs-dots i.on{width:20px;background:var(--gold-l)}
@keyframes hsDotsIn{from{opacity:0}to{opacity:1}}
.stage.show .stage-hint{bottom:-4px;z-index:6;padding:.3rem .8rem;font-size:.62rem;animation:hintPulse 2.6s ease-in-out 1.2s 3,hsHintOut .8s ease 7s forwards}
@keyframes hsHintOut{to{opacity:0}}

@media(max-width:980px){.hero .stage.show{height:min(430px,calc(var(--app-h,100svh)*0.48))}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.showcase>.wrap{padding-top:clamp(1.2rem,4vw,2.4rem)}
/* mobil: fara eyebrow si fara text sub hero; hero mai sus si cu 10% mai mare */
@media(max-width:980px){
  .hero .wrap>div:first-child>*:nth-child(1),.hero .wrap>div:first-child>*:nth-child(4){display:none}
  .hero .wrap{padding-top:78px;gap:.5rem}
  .hero .wrap>div:first-child>*:nth-child(2){margin-top:0}
  .hero .stage.show{height:min(473px,calc(var(--app-h,100svh)*0.53));margin:0}
}
/* indicatii ca insigne elegante, sus pe stage, stanga / dreapta */
@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint{top:6px;bottom:auto;left:0;right:0;width:auto;max-width:none;translate:none;display:block;opacity:1;font-size:.62rem;letter-spacing:.14em}
  #colectie .sc-hint .h-short{display:flex;justify-content:space-between;padding:0 2px}
  #colectie .sc-hint .bd{display:flex;align-items:center;gap:.1rem .5rem;flex-wrap:wrap;max-width:44%;padding:.5rem .8rem .5rem .6rem;border-radius:999px;border:1px solid rgba(232,199,122,.45);background:linear-gradient(180deg,rgba(40,33,22,.72),rgba(22,19,14,.72));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f3e2b4;font-weight:600;text-transform:uppercase;line-height:1.15;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);animation:bdIn .9s cubic-bezier(.2,.8,.2,1) .8s both,bdGlow 3.4s ease-in-out 2s infinite}
  #colectie .sc-hint .bd svg{width:18px;height:18px;flex:none;color:var(--gold-l,#e8c77a)}
  #colectie .sc-hint .bd small{display:block;flex-basis:100%;margin-left:calc(18px + .5rem);font-size:.82em;font-weight:400;letter-spacing:.08em;text-transform:none;color:#d6c9b2;margin-top:-.15rem}
  #colectie .sc-hint .br{animation-delay:1s,2.4s}
  #colectie .sc-hint.gone{opacity:0}
}
@keyframes bdIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes bdGlow{0%,100%{border-color:rgba(232,199,122,.4)}50%{border-color:rgba(232,199,122,.85)}}

@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint{top:2px}
  #colectie .sc-hint .bd{max-width:none;padding:.38rem .7rem .38rem .55rem;gap:0 .4rem;font-size:.56rem;letter-spacing:.12em}
  #colectie .sc-hint .bd svg{width:15px;height:15px}
  #colectie .sc-hint .bd small{margin-left:calc(15px + .4rem);font-size:.9em;letter-spacing:.04em;white-space:nowrap}
}
@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint .bd{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.4rem;row-gap:0;align-items:center;width:max-content;padding:.34rem .65rem .34rem .5rem}
  #colectie .sc-hint .bd svg{grid-row:1/3;grid-column:1}
  #colectie .sc-hint .bd small{grid-column:2;margin:0;flex-basis:auto}
}
/* insigne permanente, mai aproape de produs; sageti mai mari */
@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint{left:9%;right:9%;top:12px}
  #colectie .sc-hint,#colectie .sc-hint.gone{opacity:1!important}
  #colectie .sc-hint .br svg{width:26px;height:26px;stroke-width:1.9}
  #colectie .sc-hint .bl svg{width:20px;height:20px}
  #colectie .sc-hint .bd{animation:bdIn .9s cubic-bezier(.2,.8,.2,1) .4s both,bdGlow 3.4s ease-in-out 1.5s infinite}
  #colectie .sc-nav{width:56px;height:56px;border-color:rgba(232,199,122,.45)}
  #colectie .sc-nav svg{width:26px;height:26px;stroke-width:2.2}
}
/* un singur badge, in interiorul cercului, aliniat cu antetul produsului */
@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint{left:calc(50% - min(182px,35%) + 10px);right:auto;top:15%;width:max-content}
  #colectie .sc-hint .h-short{display:block}
}
@media(max-width:480px){
  #colectie .sc-hint{left:22px;top:16%}
  #colectie .sc-hint .bd{grid-template-columns:auto;justify-items:center;text-align:center;row-gap:.1rem;border-radius:22px;padding:.5rem .55rem .45rem;max-width:74px}
  #colectie .sc-hint .bd svg{grid-row:auto;grid-column:auto;width:20px;height:20px}
  #colectie .sc-hint .bd small{grid-column:auto;white-space:normal;line-height:1.1;font-size:.9em}
  #colectie .sc-hint .bd{font-size:.52rem;letter-spacing:.1em}
}
/* insigna compacta pe toate latimile, pozitionata din JS intre cerc si produs */
@media(max-width:980px),(hover:none),(pointer:coarse){
  #colectie .sc-hint{right:auto;width:max-content;max-width:none}
  #colectie .sc-hint .bd{grid-template-columns:auto;justify-items:center;text-align:center;row-gap:.1rem;border-radius:22px;padding:.5rem .55rem .45rem;max-width:80px;font-size:.52rem;letter-spacing:.1em}
  #colectie .sc-hint .bd svg{grid-row:auto;grid-column:auto;width:20px;height:20px}
  #colectie .sc-hint .bd small{grid-column:auto;white-space:normal;line-height:1.1;font-size:.9em}
}
@media(max-width:430px){
  #colectie .sc-hint .bd{padding:.4rem .42rem .36rem;max-width:64px;font-size:.48rem;border-radius:18px}
  #colectie .sc-hint .bd svg{width:16px;height:16px}
}
/* desktop: hero mai echilibrat (orbita mai mare) */
@media(min-width:981px){.hero .wrap{grid-template-columns:.9fr 1.1fr;gap:2rem}.hero .stage.show{height:min(680px,calc(var(--app-h,100svh) - 150px));min-height:520px}}
/* corecturi de aliniere si uniformitate */
@media(min-width:981px){
  .grid{grid-template-columns:repeat(3,1fr);gap:1.8rem}
  .card p{line-height:1.6;min-height:6.4em}
  .card .notes{flex:1;align-content:flex-start}
  #colectie .sc-stage{margin-bottom:2.4rem}
  #colectie .sc-hint{top:100%;margin-top:6px;transform:none}
  .contact{align-items:center}
}
.card .price{margin-top:auto}
@media(max-width:700px){
  .filters{gap:.4rem}.chip{padding:.55rem .85rem;letter-spacing:.1em}
}
/* hero mai captivant: contact (aprindere), atmosfera pe aroma, abur, informatii + eMAG, lumina pe titlu */
@property --c{syntax:'<color>';inherits:true;initial-value:#e8c77a}

/* atmosfera: lumina din spatele produsului ia culoarea aromei */
.stage.show .hs-amb{position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 8%,transparent) 55%,transparent 75%);opacity:.9}
.hero .sub{position:relative}
.hero .sub::after{content:"";display:block;width:54px;height:2px;margin:.9rem auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c,#e8c77a),transparent);opacity:.9}
@media(min-width:981px){.hero .sub::after{margin-left:0;background:linear-gradient(90deg,var(--c,#e8c77a),transparent)}}
/* abur de parfum care se ridica lent in spatele produsului */
.stage.show .hs-wisps{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.stage.show .hs-wisps i{position:absolute;bottom:14%;width:34%;height:46%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent 72%);opacity:0;will-change:transform,opacity;animation:wisp 9s ease-in-out infinite}
.stage.show .hs-wisps i:nth-child(1){left:6%;animation-delay:0s}
.stage.show .hs-wisps i:nth-child(2){left:58%;animation-delay:-2.4s;animation-duration:10.5s}
.stage.show .hs-wisps i:nth-child(3){left:30%;animation-delay:-4.6s;animation-duration:8.2s;width:28%}
.stage.show .hs-wisps i:nth-child(4){left:70%;animation-delay:-6.5s;animation-duration:11s;width:26%}
.stage.show .hs-wisps i:nth-child(5){left:-4%;animation-delay:-7.8s;animation-duration:9.6s;width:30%}
.stage.show .hs-wisps.puff i{animation-duration:4.2s}
@keyframes wisp{0%{transform:translate3d(0,18%,0) scale(.7);opacity:0}25%{opacity:.85}100%{transform:translate3d(8%,-62%,0) scale(1.5);opacity:0}}
/* informatii + legatura directa catre eMAG */
.stage.show .hs-cap{bottom:56px}
.stage.show .hs-info{position:absolute;left:0;right:0;bottom:24px;z-index:6;display:flex;justify-content:center;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;text-align:center}
.stage.show .hs-notes{font:400 .78rem/1.2 var(--sans);letter-spacing:.06em;color:#d6c9b2}
.stage.show .hs-buy{font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);padding:.45rem .8rem;border:1px solid rgba(232,199,122,.45);border-radius:999px;background:rgba(22,19,14,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.25s;white-space:nowrap}
.stage.show .hs-buy:hover,.stage.show .hs-buy:focus-visible{background:var(--gold-l);color:#16130e}
@media(max-width:980px){.hero .stage.show{height:min(507px,calc(var(--app-h,100svh)*0.57))}}
@media(max-width:380px){.stage.show .hs-notes{display:none}}
/* aprindere: bordul se trezeste cu lumina calda, in acord cu sunetul motorului */
.hero-photo img{animation:ignite 2.1s cubic-bezier(.3,.6,.2,1) .1s both}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 55% 62%,rgba(232,170,80,.30),transparent 70%);opacity:0;animation:rev 2.4s ease-out .35s both;pointer-events:none}
@keyframes ignite{0%{filter:saturate(.38) contrast(1.08) brightness(.08) hue-rotate(-8deg)}14%{filter:saturate(.38) contrast(1.08) brightness(.55) hue-rotate(-8deg)}22%{filter:saturate(.38) contrast(1.08) brightness(.2) hue-rotate(-8deg)}40%{filter:saturate(.38) contrast(1.08) brightness(1.05) hue-rotate(-8deg)}100%{filter:saturate(.38) contrast(1.08) brightness(.92) hue-rotate(-8deg)}}
@keyframes rev{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* lumina aurie care trece o data peste titlu */
.hero h1{background:linear-gradient(105deg,transparent 42%,rgba(232,199,122,.95) 50%,transparent 58%) no-repeat 220% 0/260% 100%,var(--cream-grad);-webkit-background-clip:text;background-clip:text;animation:titleSweep 2.4s ease 1.3s 1 both}
@keyframes titleSweep{from{background-position:220% 0,0 0}to{background-position:-120% 0,0 0}}

.stage.show .stage-hint{display:none}
.hero .sub::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c,#e8c77a) 55%,#fff),transparent)}
@media(min-width:981px){.hero .sub::after{background:linear-gradient(90deg,color-mix(in srgb,var(--c,#e8c77a) 55%,#fff),transparent)}}
/* fundal hero in doua cadre, trecere curata */
.hero-photo img{transition:opacity 2.8s cubic-bezier(.4,0,.2,1)}
.hero-photo img.hs-alt{animation:none;opacity:0}
.hero-photo.alt img:not(.hs-alt){opacity:0}
.hero-photo.alt img.hs-alt{opacity:.6}
@media(max-width:980px){.hero-photo.alt img.hs-alt{opacity:.5}}
@media(max-width:700px){.hero-photo img.hs-alt{left:-34%;top:4%}.hero-photo.alt img.hs-alt{opacity:.62}}

/* rand informatii pe o singura linie, fara suprapunere cu numele */
.stage.show .hs-info{flex-wrap:nowrap;padding:0 14px}
.stage.show .hs-notes{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){.stage.show .hs-notes{font-size:.7rem;letter-spacing:.03em;max-width:56%}.stage.show .hs-buy{font-size:.64rem;padding:.42rem .65rem;letter-spacing:.12em}}
/* telefon: testul "Găsește-ți parfumul" incape intr-un singur ecran (intrebare + raspunsuri; rezultat) */
@media(max-width:700px){
  .quiz{padding-block:18px 0;scroll-margin-top:76px}
  .qbox{padding:1.05rem 1rem 1rem;gap:.6rem;min-height:0;grid-template-columns:1fr}
  .qbox .eyebrow{font-size:.66rem}
  .qbox h2{font-size:1.18rem;line-height:1.22;letter-spacing:.03em;margin:.35rem 0 .1rem}
  .qbox .lead{display:none}
  .q-steps{margin-top:.65rem}
  .q-steps i{width:34px}
  .qbody{min-height:0;justify-content:flex-start}
  .qbody h3{font-size:1.12rem;line-height:1.25;margin:.2rem 0 .75rem}
  .qopts,.qopts:not(.one){grid-template-columns:1fr 1fr;gap:8px}
  .qopts.one{grid-template-columns:1fr}
  .qo{padding:.8rem .8rem;font-size:.92rem;line-height:1.2;border-radius:6px;gap:.2rem}
  .qo small{font-size:.75rem;line-height:1.25}
  .qlink{margin-top:.55rem}
  /* rezultat: poza langa text, descriere scurta, butoane pe latime */
  .qres{grid-template-columns:104px 1fr;gap:.9rem;text-align:left;align-items:start}
  .qres .pic{width:104px;margin:0}
  .qres .pic::before{width:112px}
  .qres img{height:196px}
  .qres h3{font-size:1.5rem;margin:.25rem 0 .45rem}
  .qres p{font-size:.88rem;line-height:1.4;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .qres .cta{flex-direction:column;gap:.5rem;align-items:stretch}
  .qres .cta .btn{width:100%;justify-content:center;padding:.8rem 1rem;font-size:.74rem}
  .qres .alt{margin-top:.8rem;font-size:.8rem;grid-column:1/-1}
}

/* v54 specs 3 coloane + coloana stanga b2b centrata */
.specs{max-width:600px}
.specs{min-width:0}
.specs dd{font-size:clamp(1.15rem,2.2vw,1.8rem)}
@media(min-width:981px){.specs dd{white-space:nowrap}}
.stand>*{min-width:0}
@media(min-width:981px){.b2b>.rv:first-child{align-self:center}}
@media(max-width:400px){.specs div{padding:.9rem .5rem}.specs dd{font-size:1.05rem}.specs dt{letter-spacing:.08em;font-size:.68rem}}

/* v55 banda "drum": pe telefon textul sta peste poza, la baza ei; pret recomandat discret */
@media(max-width:760px){
  .band{display:flex;align-items:flex-end;min-height:max(700px,188vw);padding:0 0 44px}
  .band-bg{inset:0}
  .band-bg img{top:0;height:54%;object-position:66% 38%;translate:none!important}
  .band::before{background:linear-gradient(180deg,rgba(22,19,14,.1) 0,rgba(22,19,14,0) 24%,rgba(22,19,14,.1) 38%,rgba(22,19,14,.85) 56%,rgba(22,19,14,.97) 100%)}
  .band .lead{color:#e7dcc6}
}
@media(min-width:761px){.band-bg img{object-position:78% 50%}}

/* v56 titlu hero: litere care apar pe rand (ridicare + focus), val de luciu auriu; "stil" in auriu cu luciu care revine la cateva secunde */
.hero h1 .wd{display:inline-block;white-space:nowrap}
.hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:transparent;animation:none}
.hero h1 .l{--g:var(--cream-grad);display:inline-block;color:transparent;
  background:linear-gradient(105deg,transparent 38%,rgba(255,240,200,.95) 50%,transparent 62%) no-repeat 220% 0/260% 100%,var(--g);
  -webkit-background-clip:text;background-clip:text;
  opacity:0;transform:translateY(.45em);filter:blur(7px);
  animation:lIn .95s cubic-bezier(.2,.75,.2,1) calc(.2s + var(--i)*75ms) forwards,lShine 1.3s ease calc(1.5s + var(--i)*90ms) 1 both}
.hero h1 .l.g{--g:var(--gold-grad);animation:lIn .95s cubic-bezier(.2,.75,.2,1) calc(.2s + var(--i)*75ms) forwards,lShineLoop 9s ease calc(1.8s + var(--i)*110ms) infinite both}
@keyframes lIn{to{opacity:1;transform:none;filter:none}}
@keyframes lShine{from{background-position:220% 0,0 0}to{background-position:-120% 0,0 0}}
@keyframes lShineLoop{0%{background-position:220% 0,0 0}16%{background-position:-120% 0,0 0}100%{background-position:-120% 0,0 0}}


/* v57 ANPC in footer */
.legal .anpc{flex-basis:100%;font-size:.88rem;opacity:.85}
.legal .anpc a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.legal .anpc{text-align:center}}

/* v58 hero: titlu mai mic, produsul principal mai mare; banda "drum" cu textul sub far */
.hero h1{font-size:clamp(2.1rem,5.2vw,4.4rem)}
@media(max-width:380px){.hero h1{font-size:1.95rem}}
@media(max-width:980px){.hero .stage.show{height:min(600px,calc(var(--app-h,100svh)*0.65))}}
@media(min-width:981px){.hero .wrap{grid-template-columns:.85fr 1.15fr}}
@media(max-width:760px){
  .band{min-height:max(740px,196vw)}
  .band-bg img{height:46%;object-position:66% 30%}
  .band::before{background:linear-gradient(180deg,rgba(22,19,14,.1) 0,rgba(22,19,14,0) 20%,rgba(22,19,14,.2) 34%,rgba(22,19,14,.9) 47%,rgba(22,19,14,.97) 100%)}
  .band .eyebrow{text-shadow:0 1px 10px rgba(22,19,14,.9)}
}

/* ===== scena 3D în zona de produse interactive =====
   faza mașinii: mașina se rotește peste zonă, iar produsul interactiv și textele sunt ascunse;
   după cinematic, produsul aterizează pe locul lui și zona actuală apare lin, cu toate funcțiile */
#colectie .sc{position:relative}
.sc .car3d{display:none;position:absolute;z-index:5;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;opacity:1;transition:opacity .9s ease;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.sc .car3d-cv{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0;cursor:pointer}
.sc.sc3d .car3d{display:block}
.car3d-ready .car3d-load{display:none}
#colectie .sc>.sc-info,#colectie .sc>.sc-stage,#colectie .thumbs{transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
#colectie .sc.sc3d:not(.sc3d-out)>.sc-info,#colectie .sc.sc3d:not(.sc3d-out)>.sc-stage,#colectie .sc.sc3d:not(.sc3d-out)~.thumbs{opacity:0;visibility:hidden;pointer-events:none}
#colectie .sc.sc3d:not(.sc3d-out)>.sc-info{transform:translateY(16px)}
#colectie .sc.sc3d:not(.sc3d-out)~.thumbs{transform:translateY(12px)}
#colectie .sc.sc3d-out .car3d{opacity:0;pointer-events:none}
.credit3d{display:block;width:100%;opacity:.7;font-size:.78rem}.credit3d a{text-decoration:underline}

/* ===== afișare uniformă pe telefoane (aprox. 6"–6,9", 360–440 px) =====
   tot ce e definit în rem (texte, butoane, spații) crește proporțional cu lățimea ecranului;
   referința e telefonul de 390 px (16 px). Laptopul și tableta nu sunt afectate. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:640px){html{font-size:clamp(15px,4.1026vw,18.2px)}}
@media (max-width:640px){
  /* elementele care aveau înălțimi fixe în pixeli cresc acum odată cu ecranul (aceeași referință: 390 px) */
  .card::before,.card::after{height:20.625rem}
  .card .img,.card .img img{height:18.75rem}
  .qres{grid-template-columns:6.5rem 1fr}
  .qres .pic{width:6.5rem}
  .qres .pic::before{width:7rem}
  .qres img{height:12.25rem}
}
/* „Vezi pe eMAG” din hero: cu 15% mai mare și auriu, ca butoanele „Cumpără pe eMAG” */
.stage.show .hs-buy{font-size:.805rem;padding:.52rem .92rem;color:#2a1b05;background:var(--gold-grad);border-color:transparent;box-shadow:0 8px 22px -10px rgba(195,142,19,.75);-webkit-backdrop-filter:none;backdrop-filter:none;position:relative;overflow:hidden}
.stage.show .hs-buy::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite;pointer-events:none}
.stage.show .hs-buy:hover,.stage.show .hs-buy:focus-visible{background:var(--gold-grad);color:#2a1b05;filter:brightness(1.08);box-shadow:0 12px 26px -10px rgba(195,142,19,.95)}
@media(max-width:480px){.stage.show .hs-buy{font-size:.736rem;padding:.48rem .75rem}}

/* zona mașinii în standby — titlu sus, indicație jos, spațiere simetrică (scena 3D încadrează mașina exact între ele).
   Cât timp mașina e în standby, zona are culorile neutre ale site-ului; culoarea parfumului apare doar după ce produsul iese. */
#colectie.car-on{--c:#5b4627!important}
.sc3d-intro,.sc3d-tap{display:none}
#colectie .sc.sc3d .sc3d-intro,#colectie .sc.sc3d .sc3d-tap{display:block;position:absolute;left:0;right:0;z-index:6;text-align:center;pointer-events:none;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
#colectie .sc.sc3d .sc3d-intro{top:var(--padY)}
#colectie .sc.sc3d .sc3d-tap{bottom:var(--padY);margin:0}
#colectie .sc{--padY:clamp(1rem,calc(var(--app-h,100svh)*0.03),2.2rem)}
.sc3d-t{margin:0;font:500 clamp(1.7rem,3.6vw,2.7rem)/1.15 var(--serif);letter-spacing:.06em;background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc3d-intro .rule{margin:.9rem auto 0}
.sc3d-tap{font:500 .78rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-l)}
.sc3d-tap i{display:inline-block;width:7px;height:7px;margin-right:.8rem;border-radius:50%;background:var(--gold-l);vertical-align:1px;animation:tapP 2.2s ease-out infinite}
@keyframes tapP{0%{box-shadow:0 0 0 0 rgba(232,199,122,.6)}100%{box-shadow:0 0 0 11px rgba(232,199,122,0)}}
.sc3d-tap .h-touch{display:none}
@media(pointer:coarse){.sc3d-tap .h-fine{display:none}.sc3d-tap .h-touch{display:inline}}
#colectie .sc.sc3d-go .sc3d-intro{opacity:0;transform:translateY(-10px)}
#colectie .sc.sc3d-go .sc3d-tap{opacity:0;transform:translateY(8px)}

/* telefon: zona mașinii aliniată cu hero-ul și așezată simetric față de mașină */
@media (max-width:700px){
  #colectie .sc.sc3d .sc3d-intro{top:var(--tY,22%);transform:translateY(-50%)}
  #colectie .sc.sc3d .sc3d-tap{top:var(--hY,78%);bottom:auto;transform:translateY(-50%)}
  #colectie .sc.sc3d-go .sc3d-intro{transform:translateY(calc(-50% - 10px))}
  #colectie .sc.sc3d-go .sc3d-tap{transform:translateY(calc(-50% + 8px))}
  /* titlul: același stil ca „Alege cu stil” */
  .sc3d-t{font-size:2.1rem;line-height:1.15;letter-spacing:.06em;font-weight:500}
  .sc3d-t span{display:block}
  .sc3d-intro .rule{display:none}
  /* indicația: același stil ca „Odorizante auto” */
  .sc3d-tap{font:500 .8rem/1 var(--sans);letter-spacing:.26em;color:var(--gold-l)}
  .sc3d-tap i{width:6px;height:6px;margin-right:.7rem}
  /* hero: „Vezi pe eMAG” cu 15% mai mic, iar „Găsește-ți parfumul” înaintea lui „Cumpără pe eMAG” */
  .stage.show .hs-buy{font-size:.626rem;padding:.41rem .64rem}
  .hero .cta .btn-line{order:-1}
}
/* laptop: aceeași așezare ca pe telefon (titlul și indicația la mijlocul spațiilor din jurul mașinii), ansamblu cu 20% mai mic */
@media (min-width:701px){
  #colectie .sc.sc3d .sc3d-intro{top:var(--tY,18%);transform:translateY(-50%)}
  #colectie .sc.sc3d .sc3d-tap{top:var(--hY,82%);bottom:auto;transform:translateY(-50%)}
  #colectie .sc.sc3d-go .sc3d-intro{transform:translateY(calc(-50% - 10px))}
  #colectie .sc.sc3d-go .sc3d-tap{transform:translateY(calc(-50% + 8px))}
  .sc3d-t{font-size:clamp(1.36rem,2.9vw,2.16rem)}
  .sc3d-intro .rule{margin-top:.75rem}
}
/* „Click pe mașină / Atinge mașina” e un buton real (tastatură, cititoare de ecran), cu același aspect */
#colectie .sc.sc3d button.sc3d-tap{left:0;right:0;margin:0 auto;width:max-content;max-width:92%;padding:.7rem 1rem;background:none;border:0;border-radius:999px;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#colectie .sc.sc3d button.sc3d-tap:focus-visible{outline:1px solid var(--gold-l);outline-offset:2px}
#colectie .sc.sc3d-go button.sc3d-tap{pointer-events:none}
/* ===== limbaj de design ușor rotunjit, pe tot site-ul (ca în catalog) =====
   6 px etichete · 10 px butoane, câmpuri, opțiuni · 16 px carduri și casete · 22 px panourile mari.
   Elementele deja rotunde (pastile, cercuri) rămân așa. */
:root{--r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:22px}
.btn,.skip,.cc-b,.qo,.thumbs button,input,select,textarea{border-radius:var(--r-sm)}
.notes span,.sc-notes span{border-radius:var(--r-xs)}
.card,.specs{border-radius:var(--r-md);overflow:hidden}
.rev figure,.bt,.stand-cta,.stand-img,.cc-in,form{border-radius:var(--r-md)}
.qbox{border-radius:var(--r-lg)}
.stand-key{border-radius:0 var(--r-sm) var(--r-sm) 0}
.sticky .btn{border-radius:var(--r-sm)}
.stage.show .hs-buy,#colectie .sc.sc3d button.sc3d-tap{border-radius:999px}
/* titlul showroom cu 10% mai mic (telefon și laptop) */
.sc3d-t{font-size:clamp(1.22rem,2.6vw,1.94rem)}
@media (max-width:700px){.sc3d-t{font-size:1.89rem}}
.card .tag{border-radius:var(--r-xs)}
/* în faza cu mașina, halourile de fundal stau centrate, sub mașină (simetric: platforma nu mai pare înclinată);
   la ieșirea produsului alunecă lin în pozițiile obișnuite, odată cu culoarea parfumului */
@property --g1x{syntax:'<percentage>';inherits:false;initial-value:72%}
@property --g1y{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --g2x{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --g2y{syntax:'<percentage>';inherits:false;initial-value:110%}
#colectie.car-on{--g1x:50%;--g1y:52%;--g2x:50%;--g2y:115%}
/* titlul showroom cu încă 10% mai mic */
.sc3d-t{font-size:clamp(1.1rem,2.34vw,1.75rem)}
@media (max-width:700px){.sc3d-t{font-size:1.7rem}}
/* ===== performanță pe Safari (iPhone), fără pierdere de calitate =====
   1) strălucirea butoanelor aurii: animată pe placa grafică (transform), nu prin „left” (care recalcula pagina la fiecare cadru) */
@keyframes shineT{0%,55%{transform:translateX(-200%) skewX(-20deg)}100%{transform:translateX(283%) skewX(-20deg)}}
.btn-gold::after,.btn-sage::after,.stage.show .hs-buy::after{left:0;animation-name:shineT;will-change:transform}
/* 2) fără blur de fundal (Safari îl recalcula la fiecare cadru al glisării); fundaluri puțin mai opace, aspect identic pe fundal închis */
header.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,19,14,.96)}
.sc-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,19,14,.84)}
.stage-hint{-webkit-backdrop-filter:none;backdrop-filter:none}
#colectie .sc-hint .bd{-webkit-backdrop-filter:none;backdrop-filter:none}
.stage.show .hs-buy{-webkit-backdrop-filter:none;backdrop-filter:none}
/* 3) chip-ul cu indicații: strălucirea conturului prin opacitate (placa grafică), nu prin culoarea conturului */
#colectie .sc-hint .bd{position:relative;animation:bdIn .9s cubic-bezier(.2,.8,.2,1) .6s both!important}
#colectie .sc-hint .bd::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(232,199,122,.85);opacity:0;pointer-events:none;animation:bdGlowO 3.4s ease-in-out 2s infinite}
@keyframes bdGlowO{0%,100%{opacity:0}50%{opacity:1}}

/* 4) punctul „Atinge mașina”: inel care se extinde prin transform/opacitate, nu prin umbră animată */
.sc3d-tap i{position:relative;animation:none}
.sc3d-tap i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,199,122,.7);animation:tapR 2.2s ease-out infinite}
@keyframes tapR{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}

/* 5) scena 3D fără mască (o trecere grafică în plus la fiecare cadru) */
.sc .car3d{-webkit-mask-image:none;mask-image:none}
/* 6) animațiile se opresc când secțiunea nu e pe ecran */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
/* 7) culoarea secțiunii Colecția: două straturi care se estompează (placa grafică), nu o variabilă animată pe toată secțiunea */
.showcase{background:var(--ink)!important;transition:none!important;position:relative;isolation:isolate}
.showcase>.wrap{position:relative;z-index:1}
.scbg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(760px 560px at var(--g1x) var(--g1y),color-mix(in srgb,var(--cc,#2389e2) 42%,transparent),transparent 70%),
             radial-gradient(900px 500px at var(--g2x) var(--g2y),color-mix(in srgb,var(--cc,#2389e2) 18%,transparent),transparent 70%);
  transition:opacity .8s ease,--g1x 1.1s ease,--g1y 1.1s ease,--g2x 1.1s ease,--g2y 1.1s ease}
.scbg.on{opacity:1}
#colectie.car-on .scbg{--g1x:50%;--g1y:52%;--g2x:50%;--g2y:115%}
/* particulele de parfum: fără filtru (degradeul e deja moale), pregătite pentru placa grafică */
.mist{filter:none;will-change:transform,opacity}
/* zoom pe mașină: titlul și indicația se estompează cât timp mașina e mărită */
#colectie .sc.sc3d:has(.car3d.zoomed) .sc3d-intro,#colectie .sc.sc3d:has(.car3d.zoomed) .sc3d-tap{opacity:0;pointer-events:none}
/* ===== showroom de studio: lumină de sus pe platformă, podea luminată, perete și podea, vignetă.
   Straturi statice (fără animație), poziționate după mașină; apar doar cât mașina e în standby. ===== */
.sc3d-bg{display:none}
#colectie .sc.sc3d .sc3d-bg{display:block;position:absolute;z-index:4;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;pointer-events:none;opacity:1;transition:opacity .9s ease;
  --fy:var(--floorY,70%);--cy:var(--carY,50%);--ch:var(--carH,30%);
  background:
    /* raza de lumină caldă care cade de sus pe platformă (moale, fără margini) */
    radial-gradient(ellipse min(26vw,300px) calc(var(--fy) * 1.05) at 50% 0%,rgba(255,228,180,.075),transparent 72%),
    radial-gradient(ellipse min(48vw,560px) calc(var(--fy) * 1.15) at 50% 0%,rgba(255,224,170,.04),transparent 75%),
    /* lumina de pe podea, sub mașină */
    radial-gradient(ellipse min(62vw,620px) calc(var(--ch) * .34) at 50% var(--fy),rgba(236,196,120,.20),rgba(236,196,120,.06) 55%,transparent 75%),
    /* fundal de studio luminat în spatele mașinii: îi desprinde silueta de fundal */
    radial-gradient(ellipse min(58vw,640px) calc(var(--ch) * .95) at 50% calc(var(--cy) - var(--ch) * .12),rgba(255,236,205,.16),rgba(255,230,190,.07) 45%,transparent 72%),
    radial-gradient(ellipse min(86vw,980px) calc(var(--ch) * 1.6) at 50% var(--cy),rgba(255,226,180,.08),transparent 70%),
    /* perete (sus, puțin mai deschis spre orizont) și podea (jos, mai închisă) */
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) calc(var(--fy) - var(--ch) * 1.1),rgba(255,236,200,.035) calc(var(--fy) - var(--ch) * .15),rgba(0,0,0,.08) calc(var(--fy) + var(--ch) * .2),rgba(0,0,0,.34) 100%),
    /* vignetă pe margini */
    radial-gradient(130% 95% at 50% var(--cy),transparent 52%,rgba(0,0,0,.42) 100%)}
#colectie .sc.sc3d-out .sc3d-bg{opacity:0}
#colectie .sc.sc3d .sc3d-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 88%,transparent 100%)}
/* telefon: lumina showroom-ului identică cu laptopul, raportată la mărimea mașinii (nu la lățimea ecranului);
   raza de sus pornește la aceeași distanță deasupra mașinii ca pe laptop → fără haloul suplimentar de deasupra */
@media (max-width:700px){
  #colectie .sc.sc3d .sc3d-bg{--bt:calc(var(--cy) - var(--ch) * 1.03);
    background:
      radial-gradient(ellipse calc(var(--ch) * 1.05) calc((var(--fy) - var(--bt)) * 1.05) at 50% var(--bt),rgba(255,228,180,.075),transparent 72%),
      radial-gradient(ellipse calc(var(--ch) * 1.96) calc((var(--fy) - var(--bt)) * 1.15) at 50% var(--bt),rgba(255,224,170,.04),transparent 75%),
      radial-gradient(ellipse calc(var(--ch) * 2.17) calc(var(--ch) * .34) at 50% var(--fy),rgba(236,196,120,.20),rgba(236,196,120,.06) 55%,transparent 75%),
      radial-gradient(ellipse calc(var(--ch) * 2.24) calc(var(--ch) * .95) at 50% calc(var(--cy) - var(--ch) * .12),rgba(255,236,205,.16),rgba(255,230,190,.07) 45%,transparent 72%),
      radial-gradient(ellipse calc(var(--ch) * 3.43) calc(var(--ch) * 1.6) at 50% var(--cy),rgba(255,226,180,.08),transparent 70%),
      linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) calc(var(--fy) - var(--ch) * 1.1),rgba(255,236,200,.035) calc(var(--fy) - var(--ch) * .15),rgba(0,0,0,.08) calc(var(--fy) + var(--ch) * .2),rgba(0,0,0,.34) 100%),
      radial-gradient(130% 95% at 50% var(--cy),transparent 52%,rgba(0,0,0,.42) 100%)}
}
/* finalul cinematicului: informațiile produsului încep să apară cât produsul încă se așază (nu după),
   textul primul, apoi miniaturile, cu o urcare scurtă și moale */
#colectie .sc.sc3d.sc3d-land>.sc-info,#colectie .sc.sc3d.sc3d-land~.thumbs{opacity:1;visibility:visible;transform:none}
#colectie .sc.sc3d.sc3d-land>.sc-info{transition:opacity .75s cubic-bezier(.25,.8,.25,1),transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s}
#colectie .sc.sc3d.sc3d-land~.thumbs{transition:opacity .75s cubic-bezier(.25,.8,.25,1) .14s,transform .9s cubic-bezier(.2,.8,.2,1) .14s,visibility 0s}

/* ===== hero fluid la frecvența ecranului (90/120 Hz): totul se mișcă pe placa grafică ===== */
/* produsele de pe orbită: fiecare are un „suport” care primește mișcarea; imaginea (cu umbra ei) se desenează o singură dată */
.stage.show .hs-orbit{touch-action:manipulation;cursor:pointer}
.stage.show .hs-orbit .obw{position:absolute;left:0;top:0;display:block;transform-origin:50% 100%;will-change:transform,opacity;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.stage.show .hs-orbit .obw>.ob{position:relative;display:block;left:auto;top:auto;translate:none;transform:none;will-change:auto;pointer-events:none;transition:opacity .7s ease}
.stage.show .hs-orbit .obw>.ob.ld{opacity:0}
/* praful argintiu: straturi gata desenate, doar alunecă */
.dust3{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dust3 .dl{position:absolute;inset:-8px;will-change:transform,opacity}
.dust3 .dt{position:absolute;left:0;right:0;top:0;height:calc(100% + 512px);background-repeat:repeat;will-change:transform}
/* sclipirea literelor aurii din titlu: rulează o dată la câteva secunde (pornită din script), nu în buclă continuă */
.hero h1 .l.g{animation:lIn .95s cubic-bezier(.2,.75,.2,1) calc(.2s + var(--i)*75ms) forwards,lShine 1.44s ease calc(1.8s + var(--i)*110ms) 1 both}
.hero h1.in .l{opacity:1;transform:none;filter:none;animation:none}
.hero h1.in.sh1 .l.g{animation:lShineA 1.44s ease calc(var(--i)*110ms) 1 both}
.hero h1.in.sh2 .l.g{animation:lShineB 1.44s ease calc(var(--i)*110ms) 1 both}
@keyframes lShineA{from{background-position:220% 0,0 0}to{background-position:-120% 0,0 0}}
@keyframes lShineB{from{background-position:220% 0,0 0}to{background-position:-120% 0,0 0}}

/* culoarea aromei în hero: fără tranziția variabilei (recalcula tot hero-ul ~1,4 s la fiecare schimbare de produs);
   aura trece lin prin opacitate între două straturi, linia aurie mică își păstrează trecerea ei */
.hero,.stage.show{transition:none}
.stage.show .hs-amb{transition:opacity 1.4s ease;will-change:opacity}
.stage.show .hs-amb.off{opacity:0}

/* rezultatul testului pe telefon: compoziție centrată și simetrică (produsul sus, la mijloc; textul și butoanele dedesubt) */
@media(max-width:700px){
  .qbox>div:first-child{text-align:center}
  .q-steps{justify-content:center}
  .qbody h3{text-align:center}
  .qres{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.7rem}
  .qres .pic{width:100%;margin:0 auto;justify-self:center}
  .qres .pic::before{width:9.5rem;left:50%;top:50%;translate:-50% -50%}
  .qres img{height:11.5rem}
  .qres>div:last-child{width:100%;display:flex;flex-direction:column;align-items:center}
  .qres h3{margin:.2rem 0 .45rem}
  .qres p{max-width:30rem;margin-inline:auto}
  .qres .cta{width:100%;max-width:24rem;margin-inline:auto}
  .qres .alt{text-align:center}
}
/* rezultatul testului încape pe un singur ecran și pe telefoanele de 6" (inclusiv cu barele browserului afișate):
   produs mai compact, descriere pe 3 rânduri, cele două butoane alăturate */
@media(max-width:700px){
  .qres{gap:.45rem}
  .qres img{height:9.25rem}
  .qres .pic::before{width:8rem}
  .qres .tg{font-size:.62rem}
  .qres h3{font-size:1.4rem;margin:.12rem 0 .3rem}
  .qres p{font-size:.84rem;line-height:1.38;margin-bottom:.65rem;-webkit-line-clamp:3}
  .qres .cta{flex-direction:row;gap:.5rem;max-width:26rem}
  .qres .cta .btn{flex:1 1 0;width:auto;min-width:0;padding:.78rem .5rem;font-size:.68rem;letter-spacing:.14em;white-space:nowrap}
  .qres .alt{margin-top:.6rem}
}
@media(max-width:359px){.qres .cta .btn{font-size:.6rem;letter-spacing:.08em;padding-inline:.35rem}}
/* rezultatul testului: în loc de paragraf, notele aromei și trei argumente scurte */
.qres .qnotes{margin:0 0 1rem;font:500 .8rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#d6c9b2}
.qres .qsp{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;gap:.6rem;flex-wrap:wrap}
.qres .qsp li{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:6.4rem;padding:.6rem .8rem;border:1px solid rgba(232,199,122,.28);border-radius:var(--r-sm,10px);background:rgba(255,255,255,.025)}
.qres .qsp b{font:500 1.15rem/1.1 var(--serif);color:var(--gold-l);letter-spacing:.04em}
.qres .qsp span{margin-top:.2rem;font:500 .62rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#bfae93;text-align:center}
@media(max-width:700px){
  .qres .qnotes{font-size:.66rem;letter-spacing:.18em;margin:0 0 .55rem}
  .qres .qsp{justify-content:center;gap:.4rem;margin:0 0 .7rem;flex-wrap:nowrap;width:100%;max-width:26rem}
  .qres .qsp li{flex:1 1 0;min-width:0;padding:.42rem .3rem}
  .qres .qsp b{font-size:.98rem}
  .qres .qsp span{font-size:.52rem;letter-spacing:.1em}
}
.qres .qsp{flex-wrap:nowrap}
.qres .qsp li{min-width:0;flex:0 1 auto;padding:.55rem .85rem}
.qres .qsp span{white-space:nowrap}
@media(max-width:700px){.qres .qsp li{flex:1 1 0;padding:.42rem .3rem}}
/* ===== ajustări de design ===== */
/* zona pentru magazine: coloana din stânga centrată pe înălțimea formularului, cu un titlu mic */
.b2b{align-items:center}
.b2b-side .points{margin-top:1rem}
.bf-body{display:grid;gap:1.1rem}
form h3 .bf-toggle{all:unset;display:block;font:inherit;letter-spacing:inherit;color:inherit;cursor:default}
form h3 .bf-toggle i{display:none}
@media(max-width:700px){
  /* telefon: fără lista care repetă avantajele standului și fără paragraful dublat de dimensiuni; formularul se deschide la cerere */
  .b2b-side .points{display:none}
  .stand-info>p:not([class]){display:none}
  form.fold .bf-body{display:none}
  form.fold{gap:0}
  form h3 .bf-toggle{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:44px;width:100%}
  form h3 .bf-toggle i{display:inline-block;width:9px;height:9px;border-right:1.5px solid var(--gold-d);border-bottom:1.5px solid var(--gold-d);transform:rotate(45deg) translateY(-3px);transition:transform .3s}
  form:not(.fold) h3 .bf-toggle i{transform:rotate(-135deg) translateY(-2px)}
  form h3{text-align:center}
}
@media(max-width:700px){
  /* standul: mai compact pe telefon */
  #parteneri .stand-img{height:auto;width:min(58vw,250px)}
}

/* ===== „Toată gama”: carduri cu fotografia de prezentare a fiecărei arome =====
   cardul devine o „vitrină” închisă (ca testul de parfum) pe fundalul crem al secțiunii;
   fotografia ocupă partea de sus și se topește în corpul cardului; culoarea aromei dă o aură discretă */
.card.scn{background:linear-gradient(180deg,#1f1a13 0%,#16120d 100%);border:1px solid rgba(232,199,122,.2);padding:0 0 1.35rem;color:var(--cream);box-shadow:0 22px 44px -30px rgba(42,30,19,.55)}
.card.scn::before{display:none}
.card.scn::after{height:auto;aspect-ratio:4/5;inset:0 0 auto 0;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,40%),rgba(255,240,210,.14),transparent 70%);mix-blend-mode:screen}
.card.scn:hover{transform:translateY(-6px);border-color:rgba(232,199,122,.55);box-shadow:0 30px 60px -28px rgba(42,30,19,.7),0 0 0 1px rgba(232,199,122,.15)}
.card.scn .img{position:relative;height:auto;aspect-ratio:4/5;margin:0 0 .2rem;display:block;overflow:hidden;transform:none!important}
.card.scn .img img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card.scn:hover .img img{transform:scale(1.035)}
.card.scn .img::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(22,18,13,0) 0%,rgba(22,18,13,.55) 55%,#1c1711 100%)}
.card.scn .tag{top:auto;bottom:14px;left:50%;translate:-50% 0;z-index:2;background:rgba(22,18,13,.78);border:1px solid rgba(232,199,122,.45);color:var(--gold-l);border-radius:999px;padding:.45rem .8rem}
.card.scn .fam{position:relative;top:auto;right:auto;display:block;text-align:center;margin-top:.55rem;color:color-mix(in srgb,var(--rc) 55%,#f3dfb0);filter:none;z-index:1}
.card.scn h3{margin-top:.35rem;font-size:1.32rem;background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:1rem}
.card.scn .int{color:#bfae93;margin:.55rem 0 .7rem}
.card.scn .int s{background:var(--gold)}
.card.scn .int s.off{background:transparent;border-color:rgba(232,199,122,.5)}
.card.scn p{color:#cdbfa6;font-size:.9rem;line-height:1.55;padding-inline:1.3rem;min-height:0}
.card.scn .notes{margin:.9rem 0 1.1rem;padding-inline:1rem}
.card.scn .notes span{color:var(--gold-l);border-color:rgba(232,199,122,.3)}
.card.scn .btn{margin-inline:1.3rem;margin-top:auto}
.card.scn .btn-line{border-color:rgba(232,199,122,.6)}
@media(max-width:700px){
  /* telefon: galerie pe două coloane; descrierea lungă rămâne în colecție, cardul păstrează numele, intensitatea și notele */
  #parfumuri .grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .card.scn{padding-bottom:.85rem}
  .card.scn p{display:none}
  .card.scn .fam{font-size:.56rem;letter-spacing:.16em;margin-top:.35rem}
  .card.scn h3{font-size:1.02rem;padding-inline:.5rem;margin-top:.2rem}
  .card.scn .int{font-size:0;gap:0;margin:.35rem 0 .45rem}
  .card.scn .int s{width:7px;height:7px}
  .card.scn .notes{gap:.25rem;margin:.2rem 0 .7rem;padding-inline:.45rem}
  .card.scn .notes span{font-size:.54rem;letter-spacing:.06em;padding:.25rem .4rem}
  .card.scn .btn{margin-inline:.6rem;padding:.7rem .4rem;font-size:.62rem;letter-spacing:.12em}
  .card.scn .tag{font-size:.5rem;letter-spacing:.14em;padding:.35rem .55rem;bottom:8px}
  .card.scn:hover{transform:none}
}

/* fotografia rămâne întreagă (insigna „Note” din colț nu se mai pierde în umbră); „Bestseller” sus, în colțul liber */
.card.scn .img::after{height:9%;background:linear-gradient(180deg,rgba(28,23,17,0),#1c1711)}
.card.scn .tag{top:12px;bottom:auto;right:12px;left:auto;translate:none}
@media(max-width:700px){.card.scn .tag{top:7px;right:7px;bottom:auto}}
@media(max-width:700px){.card.scn .tag{top:auto;right:auto;bottom:6px;left:50%;translate:-50% 0;font-size:.46rem;padding:.3rem .5rem;letter-spacing:.14em}}
/* ===== telefon ===== */
@media(max-width:700px){
  /* testul: aceeași înălțime la întrebări și la rezultat; conținutul stă centrat în cutie */
  #qBody{min-height:var(--qmin,0);justify-content:center}
}
@media(max-width:900px){
  /* colecția: cercurile se văd întregi pe ecran */
  #colectie .ring{width:min(470px,86%)}#colectie .ring.r2{width:min(540px,96%)}
  #colectie .halo{width:min(470px,90%)}
  /* notele principale ale parfumului, sub nume (produsul se micșorează puțin ca totul să încapă pe un ecran) */
  #colectie .sc-notes{display:flex;justify-content:center;gap:.3rem;margin:.1rem 0 .55rem}
  #colectie .sc-notes span{font-size:.62rem;letter-spacing:.12em;padding:.3rem .55rem}
  #colectie .sc-stage{height:clamp(270px,calc(var(--app-h,100svh) - 334px),726px)}
  #colectie #scImg{height:clamp(250px,calc(var(--app-h,100svh) - 354px),696px)}
}
@media(max-width:900px) and (max-height:760px){
  #colectie .sc-stage{height:clamp(210px,calc(var(--app-h,100svh) - 334px),726px)}
  #colectie #scImg{height:clamp(190px,calc(var(--app-h,100svh) - 354px),696px)}
}
@media(max-width:700px){
  /* rezultatul testului în formatul cutiei de întrebări: produsul în stânga, recomandarea în dreapta */
  #qBody{justify-content:flex-start}
  .qres{grid-template-columns:7.4rem 1fr;justify-items:stretch;text-align:left;align-items:center;gap:.4rem .85rem}
  .qres .pic{width:7.4rem;margin:0}
  .qres .pic::before{width:7.6rem}
  .qres img{height:11.6rem}
  .qres>div:last-child{display:block;width:auto}
  .qres .tg{font-size:.56rem;letter-spacing:.24em}
  .qres h3{font-size:1.28rem;margin:.1rem 0 .2rem;line-height:1.1}
  .qres .qnotes{font-size:.58rem;letter-spacing:.14em;margin:0 0 .5rem}
  .qres .qsp{justify-content:flex-start;gap:.25rem;margin:0 0 .55rem;max-width:none}
  .qres .qsp li{padding:.28rem .2rem;border-radius:7px}
  .qres .qsp b{font-size:.84rem}
  .qres .qsp span{font-size:.42rem;letter-spacing:.06em;margin-top:.1rem}
  .qres .cta{flex-direction:column;gap:.38rem;max-width:none;margin:0}
  .qres .cta .btn{flex:none;width:100%;padding:.62rem .4rem;font-size:.6rem;letter-spacing:.14em}
  .qres .alt{grid-column:1/-1;text-align:center;margin-top:.25rem;font-size:.74rem}
}
/* ===== titluri scurte: doar eticheta secțiunii (fără titlurile și paragrafele lungi) ===== */
.sec-label{font:600 .95rem/1.3 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-d);margin:0;background:none;-webkit-text-fill-color:currentColor}
.dark .sec-label{color:var(--gold-l)}
.sec-label+.rule{margin-top:1.1rem}
h3.sec-label.sub{font-size:.86rem;letter-spacing:.28em;margin:0 0 1rem;color:var(--gold-l)}
@media(max-width:700px){.sec-label{font-size:.8rem;letter-spacing:.3em}h3.sec-label.sub{font-size:.74rem;margin-bottom:.8rem}}
#parfumuri .filters{margin-top:clamp(1.4rem,3vw,2.2rem)}

/* ===== butoanele spre eMAG: mai vizibile și mai atrăgătoare =====
   auriu plin cu reflexie, text mai apăsat, săgeată care înaintează și o aură caldă la trecerea mouse-ului */
a.btn[href*="emag.ro"]{font-weight:600;letter-spacing:.2em}
a.btn-gold[href*="emag.ro"]{background:linear-gradient(135deg,#f6dc95 0%,#e2b65a 38%,#c8922c 70%,#e8c06a 100%);color:#241603;border:1px solid rgba(255,236,190,.55);box-shadow:0 10px 26px -10px rgba(214,160,52,.85),inset 0 1px 0 rgba(255,250,230,.7),inset 0 -1px 0 rgba(120,80,10,.35)}
a.btn-gold[href*="emag.ro"]:hover{box-shadow:0 16px 34px -10px rgba(226,172,60,.95),0 0 0 4px rgba(232,199,122,.16),inset 0 1px 0 rgba(255,250,230,.8)}
a.btn-gold[href*="emag.ro"] svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.btn-gold[href*="emag.ro"]:hover svg{transform:translateX(4px)}
/* cardurile din „Toată gama”: buton auriu plin, pe toată lățimea */
.card.scn .btn-emag{border-color:rgba(255,236,190,.55);font-size:.74rem;padding:1rem 1rem}
@media(max-width:700px){.card.scn .btn-emag{font-size:.6rem;letter-spacing:.12em;padding:.75rem .35rem;gap:.35rem}.card.scn .btn-emag svg{width:12px;height:12px}}


/* ===== toate butoanele cu 10% mai mici (text, înălțime și spațiere interioară, proporțional) ===== */
.btn,.stage.show .hs-buy,.bf-toggle{zoom:.9}
form h3 .bf-toggle{zoom:1}
/* ===== colecția pe telefon: cercurile întregi, cu margine față de marginile ecranului (inclusiv colțurile rotunjite) ===== */
@media(max-width:900px){
  #colectie .ring{width:min(470px,calc(100vw - 84px))}
  #colectie .ring.r2{width:min(540px,calc(100vw - 40px))}
  #colectie .halo{width:min(470px,calc(100vw - 56px))}
}
/* ===== „Toată gama”: cardurile se adaptează ecranului — un rând întreg (laptop) / două rânduri (telefon) încap pe un ecran ===== */
#parfumuri .grid{justify-items:center}
.card.scn{width:var(--cw,100%);max-width:100%}
@media(min-width:701px){.card.scn p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media(max-width:700px){.card.scn .notes{display:none}.card.scn .btn{margin-top:.55rem}}
@media(min-width:701px){.card.scn p{flex:none;padding-bottom:3px;margin-bottom:0}}
/* ===== „Toată gama” pe telefon: cardurile umplu lățimea ecranului (două coloane pline) ===== */
@media(max-width:700px){
  .card.scn{width:100%!important}
  #parfumuri .grid{gap:.6rem}
  .card.scn .tag{display:none}
  .card.scn.best .fam::after{content:" · Bestseller";color:var(--gold-l)}
  .card.scn h3{font-size:clamp(.9rem,4.4vw,1.1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card.scn .btn-emag{white-space:nowrap}
}
/* ===== butonul care pornește prezentarea cu mașina: o „pastilă” clar apăsabilă ===== */
#colectie .sc.sc3d button.sc3d-tap{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.05rem .6rem .6rem;letter-spacing:.2em;
  background:linear-gradient(180deg,rgba(40,32,21,.82),rgba(22,18,13,.82));border:1px solid rgba(232,199,122,.55);
  box-shadow:0 10px 28px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,240,205,.12);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .3s}
#colectie .sc.sc3d button.sc3d-tap::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(232,199,122,.6);pointer-events:none;animation:tapHalo 2.4s ease-out infinite}
@keyframes tapHalo{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.18,1.5);opacity:0}}
.sc3d-tap .tp-ic{position:relative;flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--gold-grad);color:#2a1b05;box-shadow:0 4px 14px -4px rgba(214,160,52,.8)}
.sc3d-tap .tp-ic svg{width:1.15rem;height:1.15rem;animation:tapPress 2.4s ease-in-out infinite}
@keyframes tapPress{0%,60%,100%{transform:translateY(0) scale(1)}70%{transform:translateY(2px) scale(.9)}80%{transform:translateY(0) scale(1)}}
.sc3d-tap .tp-tx{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;font:600 .8rem/1 var(--sans);letter-spacing:.22em;color:var(--gold-l)}
.sc3d-tap .tp-tx small{font:500 .58rem/1 var(--sans);letter-spacing:.2em;color:#bfae93;text-transform:uppercase}
.sc3d-tap .tp-go{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid rgba(232,199,122,.5);color:var(--gold-l)}
.sc3d-tap .tp-go svg{width:.7rem;height:.7rem;margin-left:1px}
#colectie .sc.sc3d button.sc3d-tap:hover{border-color:var(--gold-l);background:linear-gradient(180deg,rgba(58,45,26,.9),rgba(30,24,16,.9));box-shadow:0 14px 34px -12px rgba(0,0,0,.75),0 0 0 4px rgba(232,199,122,.12)}
#colectie .sc.sc3d button.sc3d-tap:hover .tp-go{background:var(--gold-grad);color:#2a1b05;border-color:transparent}
#colectie .sc.sc3d button.sc3d-tap:active{transform:translateY(1px) scale(.98)}
@media(max-width:700px){
  #colectie .sc.sc3d button.sc3d-tap{gap:.6rem;padding:.5rem .85rem .5rem .5rem}
  .sc3d-tap .tp-ic{width:2.1rem;height:2.1rem}
  .sc3d-tap .tp-tx{font-size:.74rem;letter-spacing:.18em}
}

/* ===== „Despre Splash Aroma”: povestea brandului + drumul seriilor ===== */
.about-grid{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(1.6rem,3.5vw,2.8rem)}
.about-lead{font:500 clamp(1.35rem,2.5vw,1.95rem)/1.3 var(--serif);letter-spacing:.02em;color:var(--ink);margin:0 0 1.2rem;text-wrap:balance}
.about-txt p:not(.about-lead){color:#5b4a38;font-size:1rem;line-height:1.7;margin:0 0 .85rem;max-width:58ch}
.road{list-style:none;margin:0;padding:1.6rem 1.6rem 1.6rem 1.4rem;border:1px solid rgba(195,142,19,.22);border-radius:var(--r-md,16px);background:linear-gradient(180deg,#fffaf0,var(--paper));box-shadow:0 22px 44px -32px rgba(42,30,19,.45);position:relative}
.road li{position:relative;padding:0 0 1.4rem 2.2rem}
.road li:last-child{padding-bottom:0}
.road li::before{content:"";position:absolute;left:.42rem;top:1.3rem;bottom:-.1rem;width:1px;background:linear-gradient(var(--gold),rgba(195,142,19,.2))}
.road li:last-child::before{display:none}
.road li::after{content:"";position:absolute;left:0;top:.2rem;width:.9rem;height:.9rem;border-radius:50%;border:1.5px solid var(--gold);background:var(--paper);box-sizing:border-box}
.road li.done::after{background:var(--gold)}
.road li.now::after{background:var(--gold-grad);box-shadow:0 0 0 4px rgba(214,169,53,.2)}
.road li.next::after{border-style:dashed}
.road .rd-k{display:block;font:600 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);margin-bottom:.45rem}
.road b{display:block;font:500 1.12rem/1.3 var(--serif);color:var(--ink);margin-bottom:.3rem}
.road li>span:last-child{display:block;font-size:.92rem;line-height:1.55;color:#6c5a44}
.road li.now b{color:var(--gold-d)}
.road li.next{opacity:.85}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-txt{text-align:center}
  .about-txt p:not(.about-lead){margin-inline:auto}
  .road{max-width:34rem;margin-inline:auto;text-align:left}
}
@media(max-width:700px){.about-lead{font-size:1.25rem}.about-txt p:not(.about-lead){font-size:.95rem}.road{padding:1.2rem 1.1rem 1.2rem 1rem}.road b{font-size:1rem}}
/* ===== „Pentru magazine”: aceleași titluri mici peste tot, același text ===== */
#parteneri h3.sec-label.sub{margin-bottom:1rem}
#bform h3.sec-label.sub{color:var(--gold-d);font-size:.86rem}
.stand-cta-h{font:600 1.05rem/1.4 var(--sans)!important;letter-spacing:.01em!important;color:var(--cream)}
.stand-info p,.stand-cta-p,.points li,.steps span{font-size:.95rem;line-height:1.6}

@media(max-width:700px){#bform h3.sec-label.sub{font-size:.76rem}}
/* ===== showroom: fără razele de lumină de sus; rămâne doar lumina caldă, uniformă, pe mașină și pe podea ===== */
#colectie .sc.sc3d .sc3d-bg{
  background:
    radial-gradient(ellipse calc(var(--ch) * 2.1) calc(var(--ch) * .72) at 50% calc(var(--cy) + var(--ch) * .05),rgba(255,234,200,.11),rgba(255,228,185,.05) 50%,transparent 74%),
    radial-gradient(ellipse calc(var(--ch) * 2.17) calc(var(--ch) * .34) at 50% var(--fy),rgba(236,196,120,.20),rgba(236,196,120,.06) 55%,transparent 75%),
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) calc(var(--fy) - var(--ch) * 1.1),rgba(255,236,200,.035) calc(var(--fy) - var(--ch) * .15),rgba(0,0,0,.08) calc(var(--fy) + var(--ch) * .2),rgba(0,0,0,.34) 100%),
    radial-gradient(130% 95% at 50% var(--cy),transparent 52%,rgba(0,0,0,.42) 100%)}
/* ===== titluri de secțiune uniforme și vizibile (același stil ca „Showroom Splash Aroma”) ===== */
.sec-title{margin:0;font:500 clamp(1.65rem,2.9vw,2.35rem)/1.15 var(--serif);letter-spacing:.06em;color:var(--ink);text-wrap:balance}
.dark .sec-title,#parteneri .sec-title,#contact .sec-title{background:var(--cream-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-title+.rule{margin-top:1rem}
@media(max-width:700px){.sec-title{font-size:1.6rem;letter-spacing:.05em}}
#contact .sec-title{margin-inline:auto}
/* ===== „De ce Splash Aroma”: șase argumente egale, toată secțiunea pe un ecran ===== */








@media(max-width:700px){
  #brand{padding-block:2.4rem 2.6rem}








}
#contact h2.sec-title{font-size:clamp(1.65rem,2.9vw,2.35rem);letter-spacing:.06em}
@media(max-width:700px){#contact h2.sec-title{font-size:1.6rem;letter-spacing:.05em}}
/* ===== „De ce Splash Aroma”: cinci argumente, cu pictograme aurii; obiectivul evidențiat ===== */
.bento.bento5{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;margin-top:clamp(1.6rem,3vw,2.4rem)}
.bento5 .bt{grid-column:span 2;min-height:0;padding:1.6rem 1.7rem 1.7rem;justify-content:flex-start;border-radius:var(--r-md,16px)}
.bento5 .bt:nth-child(4),.bento5 .bt:nth-child(5){grid-column:span 3}
.bento5 .bi{width:44px;height:44px;color:var(--gold-l);margin:0 0 .9rem;flex:none}
.bento5 .bt h3{font-size:1.12rem;margin:0 0 .45rem}
.bento5 .bt p{font-size:.94rem;line-height:1.55;max-width:44ch}
.bento5 .bt.goal{background:linear-gradient(135deg,rgba(214,169,53,.16),rgba(214,169,53,.04) 60%),rgba(255,255,255,.03);border-color:rgba(232,199,122,.55)}
.bento5 .bt.goal h3{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bento5 .bt.goal p{color:#e7dcc6}
@media(max-width:900px){.bento.bento5{grid-template-columns:1fr 1fr}.bento5 .bt,.bento5 .bt:nth-child(4){grid-column:auto}.bento5 .bt:nth-child(5){grid-column:1/-1}}
@media(max-width:700px){
  .bento.bento5{gap:8px;margin-top:1.2rem}
  .bento5 .bt{padding:.95rem .9rem 1rem}
  .bento5 .bi{width:32px;height:32px;margin-bottom:.5rem}
  .bento5 .bt h3{font-size:.9rem;margin-bottom:.3rem}
  .bento5 .bt p{font-size:.78rem;line-height:1.45}
  .bento5 .bt.goal{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center}
  .bento5 .bt.goal .bi{grid-row:span 2;margin:0}
}
/* titlul testului la aceeași mărime cu titlurile de secțiune */
#h-quiz{font-size:clamp(1.65rem,2.9vw,2.35rem);line-height:1.15;letter-spacing:.04em}
/* introducerea din „Despre” mai aerisită */
.about-lead{font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.38;letter-spacing:.015em}
@media(max-width:700px){.about-lead{font-size:1.04rem;line-height:1.42}}
/* auriu mai discret în casete; auriul plin rămâne pe butoanele eMAG și pe „Obiectivul nostru” */
.bento5 .bt:not(.goal){border-color:rgba(232,199,122,.14)}
.bento5 .bt:not(.goal) .bi{color:rgba(232,199,122,.72)}
.stand-cta{border-color:rgba(232,199,122,.2);background:linear-gradient(135deg,rgba(214,169,53,.07),rgba(214,169,53,.02))}
/* recenzii – 9 recenzii reale; pe laptop coloane, pe telefon carusel glisabil */
.rev{display:block;columns:3 300px;column-gap:1.5rem}
.rev figure{break-inside:avoid;margin:0 0 1.5rem;display:block}
.rev-n{margin:.9rem 0 0;text-align:center;font-size:.85rem;letter-spacing:.08em;color:#6c5a44}
@media(max-width:700px){
  .rev{columns:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:2rem -16px 0;padding:14px 16px 6px;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rev::-webkit-scrollbar{display:none}
  .rev figure{flex:0 0 84%;margin:0;scroll-snap-align:start;padding:2.1rem 1.4rem 1.4rem}
  .rev blockquote{font-size:.95rem}
}
@media(min-width:701px){.rev-n{display:none}}
@media(max-width:700px){.rev figure{display:flex;flex-direction:column}.rev figcaption{margin-top:auto;padding-top:1.2rem}}
/* zone de atingere de min. 44px pentru linkurile mici (aspectul rămâne identic) */
@media(min-width:701px){.legal a{display:inline-block;padding:13px 4px;margin:-13px -4px}form h3 .bf-toggle{padding-block:13px;margin-block:-13px}}
/* introducerea din „Despre” ca citat, cu litere normale (Jost), bară aurie în stânga */
.about-lead{font:400 clamp(1.18rem,1.9vw,1.55rem)/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);border-left:2px solid var(--gold);padding:.15rem 0 .15rem 1.1rem;text-align:left;max-width:34ch}
@media(max-width:700px){.about-lead{font-size:1.14rem;line-height:1.45;margin-inline:auto}}
/* meniul de pe telefon acoperă tot ecranul (nu se mai vede pagina dedesubt) */
@media(max-width:980px){header.open .nav ul{height:calc(100vh - 72px);height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;gap:1.15rem;padding-top:1.3rem}}
/* meniu de laptop pe un singur rând; „Parfumuri” scurt pe laptop, „Descoperă parfumurile” în meniul de telefon */
.nav a.l,.nav .btn{white-space:nowrap}
.nv-m{display:none}
@media(max-width:980px){.nv-m{display:inline}.nv-d{display:none}}
@media(max-width:1180px) and (min-width:981px){.nav ul{gap:1rem}.nav a.l{letter-spacing:.14em}.nav .btn{padding:.75rem .95rem}}
@media(max-width:1060px) and (min-width:981px){.nav ul{gap:.75rem}.nav a.l{letter-spacing:.1em;font-size:.74rem}}
@media(max-width:980px){header.open,header.open.solid{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* un singur limbaj de culoare. Auriul = brandul (contururi, butoane, titluri). Culoarea aromei = lumina:
   aceeași luminozitate și saturație pentru toate cele nouă arome (paletă OKLCH, nuanțele luate din postere)
   și aceeași rețetă de aură peste tot (nucleu 40%, mijloc 13% la 56%, stinsă la 76%) */
:root{--aura1:40%;--aura2:13%}
.stage.show .hs-amb{background:radial-gradient(closest-side,color-mix(in srgb,var(--c) var(--aura1),transparent),color-mix(in srgb,var(--c) var(--aura2),transparent) 56%,transparent 76%);opacity:1}
.stage.show .hs-floor{background:radial-gradient(closest-side,color-mix(in srgb,var(--c) var(--aura1),transparent),color-mix(in srgb,var(--c) var(--aura2),transparent) 56%,transparent 76%)}
.halo{background:radial-gradient(closest-side,color-mix(in srgb,var(--c) var(--aura1),transparent),color-mix(in srgb,var(--c) var(--aura2),transparent) 56%,transparent 76%)}
.qres .pic::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--rc,#c38e13) var(--aura1),transparent),color-mix(in srgb,var(--rc,#c38e13) var(--aura2),transparent) 56%,transparent 76%)}
.scbg{background:radial-gradient(760px 560px at var(--g1x) var(--g1y),color-mix(in srgb,var(--cc,#2389e2) var(--aura1),transparent),color-mix(in srgb,var(--cc,#2389e2) var(--aura2),transparent) 56%,transparent 76%),
  radial-gradient(900px 500px at var(--g2x) var(--g2y),color-mix(in srgb,var(--cc,#2389e2) var(--aura2),transparent),transparent 76%)}

/* insignele aromei în formatul posterelor. Numele: plăcuță aurie, la fel pentru toate.
   „15+ zile” și „Note”: forma fiecărei arome (gheață, crom, șnur, chihlimbar, bulă, frunză, arcadă, octogon, piele cusută).
   Stau foarte aproape de ambalaj, fără să-l atingă. Intră cu un arc elastic și plutesc ușor. */
.hs-tags{position:absolute;inset:0;z-index:4;pointer-events:none;--hg:14px;
  --sh:inset(0 round 14px);--bd:linear-gradient(135deg,#f6dc9c,#b98a35 55%,#f1d08a);--bw:1.5px;
  --f1:color-mix(in srgb,var(--c,#e8c77a) 44%,#0d0b08);--f2:color-mix(in srgb,var(--c,#e8c77a) 16%,#0d0b08)}
.ht{position:absolute;color:var(--cream);text-align:center;isolation:isolate;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)) drop-shadow(0 0 14px color-mix(in srgb,var(--c,#e8c77a) 30%,transparent));
  translate:0 0;scale:1;opacity:1;
  transition:opacity .5s ease,translate .9s cubic-bezier(.34,1.56,.64,1),scale .9s cubic-bezier(.34,1.56,.64,1);
  transition-timing-function:ease,linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1),linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  animation:htf 6s ease-in-out infinite}
.ht::before,.ht::after{content:"";position:absolute;z-index:-1;clip-path:var(--sh)}
.ht::before{inset:0;background:var(--bd)}
.ht::after{inset:var(--bw);background:linear-gradient(180deg,var(--f1),var(--f2) 85%);
  clip-path:var(--shi,var(--sh))}
.ht-sh{position:absolute;inset:0;z-index:-1;clip-path:var(--sh);overflow:hidden;pointer-events:none}
.ht-sh::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,244,214,.16) 45%,rgba(255,255,255,.28) 50%,rgba(255,244,214,.16) 55%,transparent);transform:translateX(-160%) skewX(-12deg);animation:htsh 7s ease-in-out infinite}
.ht-o{position:absolute;pointer-events:none}
.ht small{display:block;font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.4rem}
.ht b{display:block;font:600 1.06rem/1.15 var(--serif);letter-spacing:.07em;color:#fbf3e2}
/* numele: plăcuță aurie, ușor înclinată, cu linia aurie sub nume */
.ht-name{right:calc(100% - var(--mx) + var(--mw)*.5 + var(--hg));top:calc(var(--mt) + var(--mh)*.05);max-width:calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px);padding:.8rem 1.3rem .9rem;rotate:-3deg;
  --sh:inset(0 round 14px);--bd:linear-gradient(135deg,#f6dc9c,#b98a35 55%,#f1d08a);--bw:1.5px;animation-duration:6.4s}
.ht-ln{display:block;position:static;width:46%;height:1px;margin:.45rem auto 0;background:linear-gradient(90deg,transparent,var(--gold-l),transparent)}
/* 15+ zile și notele: aceeași casetă pătrată ca pe postere */
.ht-days{left:calc(var(--mx) + var(--mw)*.5 + var(--hg));top:calc(var(--mt) + var(--mh)*.36);width:100px;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;animation-duration:5.6s;animation-delay:-1.8s}
.ht-days b{font:700 2.25rem/1 var(--sans);letter-spacing:-.01em;background:linear-gradient(180deg,#fff8e6,var(--gold-l) 55%,#c4932f);-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-days small{margin:.35rem 0 0;letter-spacing:.34em;color:#f3e6c9}
.ht-notes{right:calc(100% - var(--mx) + var(--mw)*.5 + var(--hg));top:calc(var(--mt) + var(--mh)*.64);width:min(150px,calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px));min-height:112px;padding:.75rem .7rem .8rem;display:flex;flex-direction:column;justify-content:center;animation-duration:6.9s;animation-delay:-3.1s}
.ht-notes b{font-size:.96rem}
.ht-n2{display:block;white-space:pre-line;font:500 .66rem/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#eadfc8;margin-top:.25rem}

/* formele aromelor (ca pe postere) */
.hs-tags[data-a=black-cool] :is(.ht-days,.ht-notes){--sh:polygon(18% 0,76% 3%,100% 27%,97% 75%,73% 100%,22% 97%,0 72%,3% 23%);--bd:linear-gradient(140deg,#f2f9ff,#8fbfe9 45%,#e3effa);
  --f1:color-mix(in srgb,#9cc7f0 30%,#0c1626);--f2:#0b1322}
.hs-tags[data-a=black-cool] :is(.ht-days,.ht-notes)::after{background:linear-gradient(118deg,transparent 46%,rgba(255,255,255,.1) 47%,transparent 62%),linear-gradient(200deg,transparent 55%,rgba(255,255,255,.07) 56%,transparent 70%),linear-gradient(180deg,var(--f1),var(--f2) 85%)}
.hs-tags[data-a=new-car] :is(.ht-days,.ht-notes){--sh:polygon(16% 0,100% 0,100% 84%,84% 100%,0 100%,0 16%);--bd:linear-gradient(135deg,#a6f1f6,#1a8c95 55%,#8be6ee)}
.hs-tags[data-a=new-car] :is(.ht-days,.ht-notes)::after{background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 30%),linear-gradient(180deg,var(--f1),var(--f2) 85%)}
.hs-tags[data-a=elegant-man] :is(.ht-days,.ht-notes){--sh:inset(0 round 12px);--bw:4px;--bd:repeating-linear-gradient(45deg,#f6dc9c 0 2px,#a47a2f 2px 3.5px,#f6dc9c 3.5px 5px)}
.hs-tags[data-a=elegant-man] :is(.ht-days,.ht-notes)::after{clip-path:inset(0 round 9px);box-shadow:inset 0 0 0 1px rgba(246,220,156,.35)}
.hs-tags[data-a=california-sun] :is(.ht-days,.ht-notes){--sh:inset(0 round 18px)}
.hs-tags[data-a=california-sun] :is(.ht-days,.ht-notes)::after{clip-path:inset(0 round 17px);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#2a1a05),color-mix(in srgb,var(--c) 30%,#140d04) 80%)}
.hs-tags[data-a=bubblegum] :is(.ht-days,.ht-notes){--sh:circle(50%);--bd:linear-gradient(140deg,#fff,#e9a7c8 50%,#fff3f8);aspect-ratio:1;border-radius:50%}
.hs-tags[data-a=bubblegum] :is(.ht-days,.ht-notes)::after{background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--c) 40%,#1a0b13),#14080f 90%)}
.hs-tags[data-a=bubblegum] .ht-o{left:16%;top:12%;width:26%;height:14%;border-radius:50%;border-top:2px solid rgba(255,255,255,.75);rotate:-28deg;opacity:.85}
.hs-tags[data-a=bubblegum] .ht-notes{width:min(124px,calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px));min-height:0}
.hs-tags[data-a=malibu-exotic] :is(.ht-days,.ht-notes){--sh:inset(0 round 34% 8px 34% 8px)}
.hs-tags[data-a=malibu-exotic] :is(.ht-days,.ht-notes)::after{clip-path:inset(0 round 33% 7px 33% 7px)}
.hs-tags[data-a=oud-ever] :is(.ht-days,.ht-notes){--sh:polygon(0 100%,0 26%,12% 15%,30% 7%,50% 0,70% 7%,88% 15%,100% 26%,100% 100%)}
.hs-tags[data-a=oud-ever] :is(.ht-days,.ht-notes) .ht-o{left:50%;top:7%;width:6px;height:6px;translate:-50% 0;rotate:45deg;background:var(--gold-l)}
.hs-tags[data-a=oud-ever] .ht-days b{margin-top:.5rem}
.hs-tags[data-a=oud-ever] .ht-notes{padding-top:1.3rem}
.hs-tags[data-a=mukhalat] :is(.ht-days,.ht-notes){--sh:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
.hs-tags[data-a=mukhalat] :is(.ht-days,.ht-notes)::after{background:repeating-linear-gradient(45deg,rgba(241,208,138,.06) 0 1px,transparent 1px 14px),repeating-linear-gradient(-45deg,rgba(241,208,138,.06) 0 1px,transparent 1px 14px),linear-gradient(180deg,var(--f1),var(--f2) 85%)}
.hs-tags[data-a=leather] :is(.ht-days,.ht-notes){--sh:inset(0 round 14px);--bd:linear-gradient(135deg,#e9c9a0,#8a5a30 55%,#d9b184)}
.hs-tags[data-a=leather] :is(.ht-days,.ht-notes)::after{clip-path:inset(0 round 13px);background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--c) 75%,#3a2410),color-mix(in srgb,var(--c) 40%,#1a0f06))}
.hs-tags[data-a=leather] .ht-o{inset:6px;border:1px dashed rgba(243,226,196,.55);border-radius:9px}

/* intrarea (arc elastic, dinspre produs) și ieșirea */
.hs-tags.out .ht{opacity:0;scale:.82;transition-duration:.22s,.22s,.22s;transition-timing-function:ease}
.hs-tags.out .ht-name,.hs-tags.out .ht-notes{translate:26px 0}
.hs-tags.out .ht-days{translate:-26px 0}
.hs-tags:not(.out) .ht-days{transition-delay:.09s}.hs-tags:not(.out) .ht-notes{transition-delay:.18s}
@keyframes htf{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.6deg)}}
@keyframes htsh{0%,62%{transform:translateX(-160%) skewX(-12deg)}86%,100%{transform:translateX(330%) skewX(-12deg)}}
.ht-name .ht-sh::before{animation-delay:.4s}.ht-days .ht-sh::before{animation-delay:1.1s}.ht-notes .ht-sh::before{animation-delay:1.8s}
.stage.show .hs-cap .hs-name,.stage.show .hs-notes{display:none}
@media(max-width:700px){
  .hs-tags{--hg:8px}
  .ht small{font-size:.54rem;letter-spacing:.22em;margin-bottom:.25rem}
  .ht b{font-size:.76rem;letter-spacing:.05em}
  .ht-name{padding:.5rem .7rem .55rem;rotate:-2deg}
  .ht-ln{margin-top:.3rem}
  .ht-days{width:62px}
  .ht-days b{font-size:1.38rem}
  .ht-days small{margin-top:.2rem;letter-spacing:.24em}
  .ht-notes{min-height:76px;padding:.45rem .4rem .5rem}
  .ht-notes b{font-size:.72rem}
  .ht-n2{font-size:.56rem;letter-spacing:.08em;line-height:1.35}
  .hs-tags[data-a=bubblegum] .ht-notes{width:min(96px,calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px))}
  .hs-tags[data-a=elegant-man] :is(.ht-days,.ht-notes){--bw:3px}
  .hs-tags[data-a=oud-ever] .ht-notes{padding-top:.9rem}
  .hs-tags[data-a=oud-ever] .ht-days b{margin-top:.3rem}
}


/* lumină uniformă în hero: fără dungile de lumină, o singură sursă caldă și moale în jurul produsului,
   fotografia din fundal mai egală (fără zone prea luminoase) */

.stage.show .hs-amb{top:50%;width:175%}
.stage.show .hs-floor{opacity:.55;width:min(110%,680px)}
.hero-photo::after{background:
  radial-gradient(700px 480px at 76% 56%,rgba(22,19,14,.5),transparent 70%),
  linear-gradient(180deg,rgba(22,19,14,.82) 0,transparent 30%),
  linear-gradient(0deg,var(--ink) 0,transparent 22%),
  linear-gradient(rgba(22,19,14,.22),rgba(22,19,14,.22))}
/* umbra și lumina insignelor: strat static (fără filtre animate), ca hero-ul să rămână la 90–120 fps */
.ht{filter:none}
.ht-g{position:absolute;inset:8% 6%;z-index:-2;border-radius:40%;pointer-events:none;
  box-shadow:0 14px 28px rgba(0,0,0,.55),0 0 26px 6px color-mix(in srgb,var(--c,#e8c77a) 30%,transparent)}
.ht-sh{z-index:0}
/* notele din showroom în materialul și forma aromei (ca insignele din hero și posterele), plus „15+ zile” */
#scNotes{--sh:inset(0 round 8px);--bd:linear-gradient(135deg,#f6dc9c,#b98a35 55%,#f1d08a);--bw:1px;
  --f1:color-mix(in srgb,var(--c,#e8c77a) 40%,#0d0b08);--f2:color-mix(in srgb,var(--c,#e8c77a) 14%,#0d0b08)}
#scNotes span{position:relative;isolation:isolate;border:0;color:#fbf3e2;background:none;padding:.55rem .95rem;border-radius:0}
#scNotes span::before,#scNotes span::after{content:"";position:absolute;z-index:-1;clip-path:var(--sh)}
#scNotes span::before{inset:0;background:var(--bd)}
#scNotes span::after{inset:var(--bw);background:linear-gradient(180deg,var(--f1),var(--f2) 90%);clip-path:var(--shi,var(--sh))}
#scNotes .d15 b{font:700 1.02em/1 var(--sans);letter-spacing:0;background:linear-gradient(180deg,#fff8e6,var(--gold-l) 55%,#c4932f);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:.15em}
#scNotes[data-a=black-cool]{--sh:polygon(7px 0,calc(100% - 2px) 2px,100% calc(100% - 8px),calc(100% - 8px) 100%,3px calc(100% - 2px),0 7px);--bd:linear-gradient(140deg,#f2f9ff,#8fbfe9 45%,#e3effa);--f1:color-mix(in srgb,#9cc7f0 30%,#0c1626);--f2:#0b1322}
#scNotes[data-a=new-car]{--sh:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);--bd:linear-gradient(135deg,#a6f1f6,#1a8c95 55%,#8be6ee)}
#scNotes[data-a=elegant-man]{--sh:inset(0 round 7px);--shi:inset(0 round 5px);--bw:3px;--bd:repeating-linear-gradient(45deg,#f6dc9c 0 2px,#a47a2f 2px 3.5px,#f6dc9c 3.5px 5px)}
#scNotes[data-a=california-sun]{--sh:inset(0 round 10px);--f1:color-mix(in srgb,var(--c) 70%,#2a1a05);--f2:color-mix(in srgb,var(--c) 30%,#140d04)}
#scNotes[data-a=bubblegum]{--sh:inset(0 round 99px);--bd:linear-gradient(140deg,#fff,#e9a7c8 50%,#fff3f8)}
#scNotes[data-a=bubblegum] span::after{background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.18),transparent 45%),linear-gradient(180deg,var(--f1),var(--f2) 90%)}
#scNotes[data-a=malibu-exotic]{--sh:inset(0 round 13px 3px 13px 3px);--shi:inset(0 round 12px 2px 12px 2px)}
#scNotes[data-a=oud-ever]{--sh:polygon(0 100%,0 8px,10px 3px,50% 0,calc(100% - 10px) 3px,100% 8px,100% 100%)}
#scNotes[data-a=mukhalat]{--sh:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
#scNotes[data-a=leather]{--sh:inset(0 round 9px);--bd:linear-gradient(135deg,#e9c9a0,#8a5a30 55%,#d9b184);--f1:color-mix(in srgb,var(--c) 75%,#3a2410);--f2:color-mix(in srgb,var(--c) 40%,#1a0f06)}
#scNotes[data-a=leather] span::after{inset:3px;border:1px dashed rgba(243,226,196,.5);clip-path:inset(0 round 7px)}
@media(max-width:700px){#colectie #scNotes span{padding:.36rem .6rem}}



/* poziția insignelor (dimensiunile rămân cele inițiale), aceeași pe telefon și pe laptop:
   „15+ zile” sus în dreapta, în dreptul părții de sus a ambalajului; „Note” la mijloc în stânga
   (centrarea pe verticală o face scriptul, după înălțimea reală a insignei);
   plăcuța cu numele aromei, fără „Parfum”, centrată între produs și butonul eMAG */
.ht-days{top:calc(var(--mt) + var(--mh)*.23 - 50px)}
.ht-notes{top:calc(var(--mt) + var(--mh)*.51 - 56px)}
.ht-name{left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 24px);bottom:auto}
.ht-name b{white-space:nowrap}
.hs-tags.out .ht-name{translate:0 12px}
.stage.show .hs-cap{display:none}
/* pe telefon (și pe orice ecran tactil) fără lumina de tip spot din secțiunile închise */
@media(max-width:980px),(hover:none),(pointer:coarse){.dark:not(.hero)::after{display:none}}
/* plăcuța cu numele aromei cu 15% mai mare pe telefon */
@media(max-width:700px){
  .ht-name{padding:.575rem 1.265rem .635rem;border-radius:14px}
  .ht-name b{font-size:1.035rem}
  .ht-ln{margin-top:.345rem}
}
/* insigna „Note” cu 15% mai mică pe telefon */
@media(max-width:700px){
  .ht-notes{width:calc(min(150px,calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px))*.85);min-height:65px;padding:.38rem .34rem .43rem}
  .ht-notes small{font-size:.46rem}
  .ht-notes b{font-size:.61rem}
  .ht-notes .ht-n2{font-size:.476rem}
  .hs-tags[data-a=bubblegum] .ht-notes{width:calc(min(96px,calc(var(--mx) - var(--mw)*.5 - var(--hg) - 10px))*.85)}
}
/* mișcare standard pentru insigne, fără efect de „mic → mare”:
   apar printr-o estompare și o alunecare scurtă dinspre produs (ease-out), fără scalare și fără arc elastic;
   dispar printr-o estompare rapidă; în repaus plutesc foarte ușor, fără rotire */
.ht{scale:none;transition:opacity .5s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1)}
.hs-tags.out .ht{scale:none;opacity:0;transition:opacity .2s ease,translate .2s ease}
.hs-tags.out .ht-notes{translate:10px 0}
.hs-tags.out .ht-days{translate:-10px 0}
.hs-tags.out .ht-name{translate:0 8px}
.hs-tags:not(.out) .ht-days{transition-delay:.07s}.hs-tags:not(.out) .ht-notes{transition-delay:.14s}
@keyframes htf{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* butonul „Vezi pe eMAG” de sub produsul din hero și textul „Ești magazin, benzinărie…” cu 5% mai mari */
.stage.show .hs-buy{zoom:.945}
.b2b-cue{font-size:.945rem}

/* v140: ecrane mari (monitoare de 24–32" și 4K). Până acum totul rămânea la 1180 px lățime și ~680 px înălțime, o „insulă” mică
   în mijlocul ecranului. De la 1700 px lățime mărim proporțional: lățimea conținutului, textul și zonele cu produse. */
@media(min-width:1700px) and (min-height:850px){
  html{font-size:18px}
  .wrap{width:min(1440px,100% - 80px)}
  .stage{height:min(78vh,820px)}
  .hero .stage.show{height:min(860px,calc(var(--app-h,100svh) - 170px))}
  #colectie .sc-stage{height:clamp(360px,calc(var(--app-h,100svh) - 72px - 200px),820px)}
  #colectie #scImg{height:calc(clamp(360px,calc(var(--app-h,100svh) - 72px - 200px),820px) - 70px)}
  .stage.show .hs-floor{width:min(110%,860px)}
}
@media(min-width:2300px) and (min-height:1150px){
  html{font-size:22px}
  .wrap{width:min(1840px,100% - 120px)}
  .nav img{height:48px}
  .stage{height:min(78vh,1080px)}
  .hero .stage.show{height:min(1120px,calc(var(--app-h,100svh) - 220px))}
  #colectie .sc-stage{height:clamp(360px,calc(var(--app-h,100svh) - 72px - 260px),1080px)}
  #colectie #scImg{height:calc(clamp(360px,calc(var(--app-h,100svh) - 72px - 260px),1080px) - 90px)}
  .stage.show .hs-floor{width:min(110%,1120px)}
}
@media(min-width:3200px) and (min-height:1600px){
  html{font-size:30px}
  .wrap{width:min(2560px,100% - 160px)}
  .nav img{height:60px}
  .stage{height:min(78vh,1500px)}
  .hero .stage.show{height:min(1560px,calc(var(--app-h,100svh) - 300px))}
  #colectie .sc-stage{height:clamp(360px,calc(var(--app-h,100svh) - 72px - 360px),1500px)}
  #colectie #scImg{height:calc(clamp(360px,calc(var(--app-h,100svh) - 72px - 360px),1500px) - 120px)}
  .stage.show .hs-floor{width:min(110%,1560px)}
}