*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;font-weight:300;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important}
img{display:block;max-width:100%}
button{font-family:var(--body)}
.wrap{max-width:1300px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--title);font-weight:400;line-height:1.05;color:var(--ink)}
.eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:.7em;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:16px 32px;border-radius:999px;background:var(--ink);color:var(--cream);border:1px solid var(--ink);cursor:pointer;transition:.35s}
.btn:hover{background:#000}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn--glass{background:rgba(245,241,233,.1);border:1px solid rgba(245,241,233,.35);color:var(--cream);backdrop-filter:blur(10px)}
.btn--glass:hover{background:rgba(245,241,233,.2);border-color:rgba(245,241,233,.6)}
.alink{display:inline-flex;align-items:center;gap:14px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.alink::after{content:"";width:44px;height:1px;background:currentColor;transition:width .35s ease}
.alink:hover::after{width:74px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sarrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.3s;display:grid;place-items:center}
.sarrow:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.sarrow .ico{width:17px;height:17px}

/*  TOPBAR  */
/* Appesa anche in home. Sopra l'hero resta trasparente, com'era; staccandosene
   diventa solida e si assottiglia, e l'header le scende sotto (.header.solid). */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;color:rgba(245,241,233,.85);font-size:.72rem;letter-spacing:.1em;padding:10px 0;text-align:center;border-bottom:1px solid rgba(245,241,233,.14);transition:padding .5s cubic-bezier(.22,1,.36,1),font-size .5s cubic-bezier(.22,1,.36,1),background .6s}
.topbar.solid{background:var(--ink);border-bottom-color:transparent;padding:4px 0;font-size:.63rem}
.topbar b{color:var(--gold);font-weight:600}
.topbar .tb2,.topbar .tb3{display:inline}

/*  HEADER  */
.header{position:fixed;top:38px;left:0;right:0;z-index:55;transition:top .6s cubic-bezier(.22,1,.36,1),background .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.header::before{content:"";position:absolute;inset:-38px 0 -50px;background:linear-gradient(rgba(20,17,12,.55),transparent);pointer-events:none;transition:opacity .6s;z-index:-1}
.header.solid,.header.menu-open{background:rgba(251,248,242,.97);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
/* 24px = altezza della barra assottigliata: l'header le si appoggia sotto
   invece di prenderne il posto. */
.header.solid{top:24px}
.header.solid::before,.header.menu-open::before{opacity:0}
.header__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:20px;transition:padding .5s cubic-bezier(.22,1,.36,1)}
.header.solid .header__row{padding-block:12px}
.navL{display:flex;gap:26px;align-items:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,233,.9);font-weight:500}
.navL a{padding:10px 0;position:relative;transition:.3s;cursor:pointer}
.navL a:not(.cta)::after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;background:var(--gold);transition:.35s}
.navL a:not(.cta):hover::after{width:100%}
.header.solid .navL,.header.menu-open .navL{color:var(--ink-soft)}
/* Personalizza: voce discreta su nav trasparente → bottone gold evidente su nav fissa */
.navL .cta{color:var(--gold);display:inline-flex;align-items:center;gap:8px;font-weight:700;border:1px solid transparent;border-radius:999px;transition:all .5s cubic-bezier(.22,1,.36,1)}
.navL .cta .ico{width:14px;height:14px;transition:transform .35s}
.navL .cta:hover .ico{transform:translateX(4px)}
.header.solid .navL .cta{background:var(--gold);color:#fff;padding:10px 20px;border-color:var(--gold);box-shadow:0 10px 26px -10px rgba(140,122,82,.6)}
.header.solid .navL .cta:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.logoC{justify-self:center}
.logoC a{display:block}
.logoC img{height:30px;width:auto;display:block;transition:height .5s}
.logoC .lg-dark{display:none}
.header.solid .logoC .lg-light,.header.menu-open .logoC .lg-light{display:none}
.header.solid .logoC .lg-dark,.header.menu-open .logoC .lg-dark{display:block}
.header.solid .logoC img{height:26px}
.navR{display:flex;gap:6px;justify-content:flex-end;align-items:center;color:rgba(245,241,233,.92)}
.header.solid .navR,.header.menu-open .navR{color:var(--ink-soft)}
.navR .icobtn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;transition:.3s;cursor:pointer}
.navR .icobtn:hover{background:rgba(168,148,106,.14);color:var(--gold-deep)}
.header:not(.solid):not(.menu-open) .navR .icobtn:hover{background:rgba(245,241,233,.14);color:#fff}
.navR .count{position:absolute;top:4px;right:2px;background:var(--gold);color:#fff;font-size:.58rem;font-weight:700;width:15px;height:15px;border-radius:50%;display:grid;place-items:center}
.hleft{display:flex;align-items:center}
.mleft{display:none;align-items:center;gap:2px;color:rgba(245,241,233,.92)}
.header.solid .mleft,.header.menu-open .mleft{color:var(--ink-soft)}
.mleft .icobtn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}

/* MEGA MENU — voci con sottotitolo */
.mega{position:absolute;top:100%;left:0;right:0;background:rgba(251,248,242,.98);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 40px 70px -34px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;color:var(--ink);pointer-events:none}
.header.menu-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega__in{max-width:1300px;margin:0 auto;padding:46px 32px 50px;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:48px}
.mega h4{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:20px;font-weight:600}
.mega ul{list-style:none}
.mega li{margin-bottom:16px}
.mega li a{display:block;letter-spacing:0;text-transform:none;transition:.25s;padding:2px 0 2px 0;border-left:2px solid transparent}
.mega li a:hover{padding-left:12px;border-left-color:var(--gold)}
.mega li a b{display:block;font-family:var(--title);font-weight:400;font-size:1.05rem;color:var(--ink)}
.mega li a small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:1px}
.mega__feat{background:var(--cream);border-radius:18px;padding:24px;display:flex;gap:20px;align-items:center}
.mega__feat img{width:70px;height:108px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(43,42,40,.2))}
.mega__feat .ft{font-family:var(--title);font-size:1.15rem}
.mega__feat .fs{font-size:.84rem;color:var(--ink-soft);margin:2px 0 10px}

/*  DRAWER MOBILE  */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(251,248,242,.99);backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:118px 26px 34px;transform:translateX(102%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.drawer.open{transform:none}
.drawer nav{display:flex;flex-direction:column;gap:4px}
.drawer nav a{font-family:var(--title);font-size:1.7rem;padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer nav a small{font-family:var(--body);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.drawer .btn{margin-top:auto;justify-content:center}
/* burger animato → X (3 linee, X centrata) — SOLO mobile */
.navR .burger{display:none}
.burger .bx{position:relative;width:20px;height:14px;display:block}
.burger .bx i{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .25s}
.burger .bx i:nth-child(1){top:0}
.burger .bx i:nth-child(2){top:6px}
.burger .bx i:nth-child(3){top:12px}
body.drawer-open .burger .bx i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.drawer-open .burger .bx i:nth-child(2){opacity:0;transform:scaleX(.3)}
body.drawer-open .burger .bx i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.drawer-open .header{z-index:95}

/*  PILL FLOTTANTE (icona → espande all'hover)  */
.fab{position:fixed;right:26px;bottom:26px;z-index:70;display:inline-flex;align-items:center;background:linear-gradient(120deg,var(--gold),var(--gold-deep));color:#fff;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;height:56px;padding:0 19px;border-radius:999px;box-shadow:0 18px 44px -12px rgba(140,122,82,.65);transform:translateY(180%);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .3s;white-space:nowrap;overflow:hidden}
.fab.show{transform:none}
.fab:hover{box-shadow:0 22px 50px -10px rgba(140,122,82,.8)}
.fab .ico{width:18px;height:18px;flex:none}
.fab .fab__txt{display:inline-block;max-width:0;opacity:0;margin-left:0;transition:max-width .55s cubic-bezier(.22,1,.36,1),opacity .4s,margin-left .55s cubic-bezier(.22,1,.36,1)}
.fab:hover .fab__txt,.fab.peek .fab__txt{max-width:150px;opacity:1;margin-left:11px}

/*  SCENA HERO  */
.scene{position:relative;background:var(--ink)}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center}
.hero__video{position:absolute;inset:0;z-index:0}
.hero__video video{width:100%;height:112%;object-fit:cover;transform:scale(1.03);will-change:transform}
/* Il film di una singola slide: sta SOPRA lo sfondo comune e si dissolve.
   Trasparente di suo, cosi' finche' non tocca alla sua slide non si vede
   nulla e sotto continua a scorrere la vigna. */
.hero__film{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero__film.on{opacity:1}

.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(24,20,14,.82) 0%,rgba(24,20,14,.45) 48%,rgba(24,20,14,.12) 100%),
  linear-gradient(180deg,rgba(24,20,14,.35) 0%,transparent 30%,rgba(24,20,14,.55) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;will-change:transform,opacity}
.hslides{position:relative;min-height:380px}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),visibility .7s;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hslide.on{opacity:1;visibility:visible;transform:none;position:relative}
.hslide__txt .eyebrow{display:block;margin-bottom:20px}
.hslide__txt h1{font-size:clamp(2.9rem,6.4vw,5.6rem);color:var(--cream);text-shadow:0 4px 50px rgba(0,0,0,.55);letter-spacing:.01em}
.hslide__txt h1 .hl{display:block;overflow:hidden;padding-bottom:.06em}
.hslide__txt h1 .hl>span{display:block}
.hslide__txt p{color:rgba(245,241,233,.8);font-size:1.08rem;max-width:430px;margin:20px 0 32px}
.hslide__price{font-family:var(--title);font-size:1.5rem;color:var(--gold);margin:14px 0 26px}
.hslide__cta{display:flex;gap:14px;flex-wrap:wrap}
.hslide__media{display:flex;align-items:center;justify-content:center;position:relative}
.hslide__media .halo{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(168,148,106,.32),transparent 65%);filter:blur(18px)}
.hslide__media img{position:relative;height:56vh;max-height:520px;width:auto;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.hctrl{position:absolute;left:0;right:0;bottom:44px;z-index:3}
.hctrl__in{max-width:1300px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:26px}
.hctrl__num{font-family:var(--title);font-size:.95rem;color:rgba(245,241,233,.85);letter-spacing:.2em;min-width:74px}
.hctrl__num b{color:var(--gold);font-weight:400;font-size:1.25rem}
.hctrl__bar{flex:1;max-width:220px;height:1px;background:rgba(245,241,233,.25);position:relative;overflow:hidden}
.hctrl__bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .3s linear}
.hctrl__arrows{display:flex;gap:10px;margin-left:auto}
.hctrl__arrows button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(245,241,233,.35);background:rgba(245,241,233,.06);color:var(--cream);cursor:pointer;backdrop-filter:blur(8px);transition:.3s;display:grid;place-items:center}
.hctrl__arrows button:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.hctrl__arrows .ico{width:17px;height:17px}

/*  INTRO (sezione normale, il cassetto è passato a .tops)  */
.intro{background:var(--bg);padding:clamp(70px,8vw,110px) 24px 60px;display:flex;align-items:center}
.intro__in{max-width:980px;margin:0 auto;text-align:center;width:100%}
.intro__in .eyebrow{color:var(--gold-deep);display:block;margin-bottom:26px;overflow:hidden}
.intro__in .eyebrow .ch{display:inline-block;will-change:transform}
.intro__in .big{font-family:var(--title);font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.32;color:var(--ink)}
.intro__in .big em{font-style:italic;color:var(--gold-deep)}
.intro__in .big .ln{display:block;overflow:hidden;padding-bottom:.08em}
.intro__in .big .ln>span{display:block;transform:translateY(115%)}
.intro__stats{display:flex;justify-content:center;gap:64px;margin-top:56px;flex-wrap:wrap}
.intro__stats div{opacity:0}
.intro__stats div b{font-family:var(--title);font-size:2.1rem;display:block;color:var(--ink)}
.intro__stats div span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.intro__div{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:60px;opacity:0}
.intro__div::before,.intro__div::after{content:"";height:1px;width:min(160px,22vw);background:var(--line)}
.intro__div i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);display:block}

/*  TOP VINI · cassetto che sale sopra l'hero  */
.tops{position:relative;z-index:5;margin-top:6vh;margin-top:6svh;background:var(--bg);border-radius:56px 56px 0 0;box-shadow:0 -50px 110px rgba(0,0,0,.45);padding:clamp(80px,9vw,130px) 0 100px}
.tops::before{content:"";position:absolute;left:50%;top:26px;transform:translateX(-50%);width:54px;height:3px;border-radius:3px;background:var(--gold);opacity:.6}
.tops__head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.tops__tabs{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.tops__tabs span{font-family:var(--title);font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:.1em;text-transform:uppercase;color:#c9c2b2;cursor:pointer;position:relative;transition:color .3s,padding .3s}
.tops__tabs span.on{color:var(--ink);padding-left:26px}
.tops__tabs span.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:13px;background:var(--ink)}
.tops__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{background:var(--cream);border-radius:20px;padding:38px 26px 32px;text-align:center;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;position:relative}
.tcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(43,42,40,.35)}
.tcard__img{height:280px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px}
.tcard__img img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 28px 24px rgba(43,42,40,.26));transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tcard:hover .tcard__img img{transform:translateY(-8px) scale(1.02)}
.tcard .prod{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.tcard .name{display:block;font-family:var(--title);font-size:1.18rem;letter-spacing:.05em;text-transform:uppercase;margin:9px 0 6px;line-height:1.3;min-height:2.6em}
.tcard .price{font-family:var(--title);font-size:1.35rem;color:var(--ink);margin-top:auto;padding-top:10px}
.tcard .stars{margin:8px 0 0;font-size:.8rem;color:var(--gold-deep);letter-spacing:.12em}
.tcard .stars small{color:var(--ink-soft);letter-spacing:0}
.tcard .add{margin-top:auto;align-self:center;padding:12px 28px;border:1px solid var(--ink);border-radius:999px;background:none;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.3s}
.tcard .add:hover{background:var(--ink);color:var(--cream)}
.tops__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:44px}
.tops__page{font-family:var(--title);font-size:.9rem;letter-spacing:.2em;color:var(--ink-soft)}
.tops__page b{color:var(--ink);font-weight:400}

/*  PERSONALIZZA  */
.config{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.config__wm{position:absolute;left:0;right:0;bottom:-2.5vw;text-align:center;font-family:var(--title);font-size:15vw;line-height:1;color:rgba(245,241,233,.045);pointer-events:none;letter-spacing:.05em;white-space:nowrap;will-change:transform,opacity}
.config__in{max-width:1300px;margin:0 auto;padding:130px 32px;display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;position:relative;z-index:2}
.config__txt .eyebrow{display:block;margin-bottom:22px}
.config__txt h2{color:var(--cream);font-size:clamp(2.4rem,4.6vw,4rem)}
.config__txt h2 em{font-style:italic;color:var(--gold)}
.config__txt>p{color:rgba(245,241,233,.68);max-width:440px;margin:22px 0 0;font-size:1.04rem}
.csteps{margin:40px 0}
.csteps .st{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(245,241,233,.14)}
.csteps .st:last-child{border-bottom:1px solid rgba(245,241,233,.14)}
.csteps .st b{font-family:var(--title);font-size:1.5rem;color:var(--gold)}
.csteps .st h4{font-family:var(--body);font-weight:600;font-size:.98rem;color:var(--cream);margin-bottom:2px}
.csteps .st span{font-size:.86rem;color:rgba(245,241,233,.55)}
.config__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:640px}
.config__stage .halo{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(168,148,106,.38),transparent 62%);filter:blur(26px)}
.config__stage img{position:relative;height:560px;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(0,0,0,.65));will-change:transform;z-index:2}
.tagpin{position:absolute;z-index:3;display:flex;align-items:center;opacity:0}
.tagpin .lbl{background:rgba(251,248,242,.98);color:var(--ink);font-size:.7rem;letter-spacing:.06em;font-weight:600;padding:9px 16px;border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.4);white-space:nowrap}
.tagpin .wire{width:56px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.tagpin .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(168,148,106,.25);flex:none}
.tagpin.right{flex-direction:row-reverse}
.tagpin.right .wire{background:linear-gradient(270deg,var(--gold),transparent)}
.tp1{top:15%;left:1%}
.tp2{top:47%;right:-2%}
.tp3{bottom:13%;left:7%}

/*  OCCASIONI  */
/* .pan e' un link: :focus-visible apre il pannello come l'hover, per chi naviga da tastiera. */
.occ{padding:110px 0}
.occ__head{text-align:center;margin-bottom:48px}
.occ__head h2{font-size:clamp(2rem,3.8vw,3.1rem);margin-top:10px}
.acc{display:flex;gap:14px;height:540px}
.acc .pan{position:relative;flex:1;border-radius:24px;overflow:hidden;cursor:pointer;transition:flex .65s cubic-bezier(.22,1,.36,1)}
.acc .pan.open,.acc .pan:focus-visible{flex:3.2}
.acc .pan img.bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.acc .pan.open img.bgp,.acc .pan:focus-visible img.bgp{transform:scale(1.03)}
.acc .pan::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(43,42,40,.12) 30%,rgba(43,42,40,.78));transition:.5s}
.acc .pan .vlab{position:absolute;left:50%;bottom:34px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--title);font-size:1.25rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;z-index:2;white-space:nowrap;opacity:1;transition:opacity .35s}
.acc .pan.open .vlab,.acc .pan:focus-visible .vlab{opacity:0}
.acc .pan .m{position:absolute;left:0;right:0;bottom:0;padding:32px;z-index:2;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .5s .18s,transform .5s .18s}
.acc .pan.open .m,.acc .pan:focus-visible .m{opacity:1;transform:none}
.acc .pan .m h3{color:#fff;font-size:1.8rem;white-space:nowrap}
.acc .pan .m span{font-size:.86rem;color:rgba(255,255,255,.8);display:block;margin:4px 0 12px;white-space:nowrap}

/*  PARALLAX pin  */
.para{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.para__bg{position:absolute;inset:-10% 0;background:center/cover no-repeat;will-change:transform}
.para__tint{position:absolute;inset:0;background:linear-gradient(rgba(30,26,20,.58),rgba(30,26,20,.66))}
.para__in{position:relative;z-index:2;max-width:1060px;padding:0 24px}
.para__in .eyebrow{color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:32px}
.para__in .eyebrow::before{content:"";width:12px;height:12px;background:var(--gold)}
.para__in p{font-family:var(--title);font-size:clamp(2rem,5.8vw,4.8rem);line-height:1.14;color:#fff;letter-spacing:.02em;text-transform:uppercase}
.para__in p .w{opacity:.22;display:inline-block;will-change:opacity}
.divider{padding:70px 0;display:flex;align-items:center;justify-content:center;gap:16px}
.divider::before,.divider::after{content:"";height:1px;width:min(220px,26vw);background:var(--line)}
.divider i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);display:block}

/*  CHI SIAMO · foto-testo full-bleed alternato (colonne uguali, altezza uguale)  */
.chess{overflow:clip}
.chess__row{display:grid;grid-template-columns:1fr 1fr}     /* colonne uguali → giuntura sempre al centro */
.chess__row>*{height:clamp(440px,56vh,620px)}               /* altezza identica per tutte le celle */
.chess__img{position:relative;overflow:hidden}
.chess__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);will-change:transform;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.chess__img::after{content:"";position:absolute;inset:0;background:rgba(168,148,106,.1)}
.chess__row:hover .chess__img img{transform:scale(1.04)}
.chess__txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,104px);background:var(--cream)}
.chess__row:nth-child(2) .chess__txt{background:var(--white)}
.chess__txt .eyebrow{display:block;margin-bottom:16px;color:var(--gold-deep)}
.chess__txt h2{font-size:clamp(1.7rem,2.7vw,2.4rem);margin-bottom:16px}
.chess__txt p{color:var(--ink-soft);max-width:460px;margin-bottom:28px;font-size:1rem}

/*  RECENSIONI  */
.revs{background:var(--ink);color:var(--cream);padding:120px 0}
.revs__head{text-align:center;margin-bottom:64px}
.revs__head h2{color:var(--cream);font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:10px}
.revs__in{display:grid;grid-template-columns:auto 1fr;gap:52px;align-items:center}
.revs__score{text-align:center;padding-right:52px;border-right:1px solid rgba(245,241,233,.16)}
.revs__score .st{color:var(--gold);letter-spacing:.15em;font-size:.95rem}
.revs__score .n{font-family:var(--title);font-size:2.6rem;margin:8px 0 2px;color:#fff}
.revs__score .n small{font-size:1.2rem;color:rgba(245,241,233,.55)}
.revs__score span{font-size:.76rem;color:rgba(245,241,233,.55)}
.revs__score .fdty{display:block;margin-top:12px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,241,233,.45)}
.revs__score .fdty b{color:var(--gold);font-weight:600}
.revs__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Le card sono affiancate e la piu' lunga decide l'altezza di tutte. Due mosse:
   la firma si ancora in fondo (lo spazio diventa respiro, non un buco), e il
   testo si dimensiona sulla sua lunghezza — la classe la mette mws_feedaty_citazione(). */
.rev{display:flex;flex-direction:column;padding:30px 28px;border:1px solid rgba(245,241,233,.14);border-radius:18px;background:rgba(245,241,233,.03)}
.rev .st{color:var(--gold);font-size:.8rem;letter-spacing:.15em;margin-bottom:14px}
.rev p{margin:0;font-family:var(--title);color:#fff;letter-spacing:.005em}
.rev span{display:block;margin-top:auto;padding-top:20px;font-size:.74rem;color:rgba(245,241,233,.5)}
.rev--xs p{font-size:1.8rem;line-height:1.28}
.rev--s p{font-size:1.45rem;line-height:1.34}
.rev--m p{font-size:1.16rem;line-height:1.44}
.rev--l p{font-size:1.02rem;line-height:1.5;color:rgba(255,255,255,.94)}

/*  NEWSLETTER + FOOTER  */
.news{text-align:center;padding:110px 0}
.news h2{font-size:clamp(2rem,3.8vw,2.9rem)}
.news p{color:var(--ink-soft);max-width:440px;margin:14px auto 30px}
.news__form{display:flex;gap:12px;max-width:520px;margin:0 auto;justify-content:center}
.news__form input{flex:1;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:16px 24px;font-family:var(--body);font-size:.9rem;outline:none;color:var(--ink);transition:.3s}
.news__form input:focus{border-color:var(--gold)}
.footer{background:var(--ink);color:rgba(245,241,233,.75);padding:64px 0 28px}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(245,241,233,.14)}
.footer .flogo{margin-bottom:14px}
.footer .flogo img{height:26px;width:auto;display:block}
.footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600}
.footer ul{list-style:none}.footer li{margin-bottom:9px;font-size:.88rem}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:.76rem;color:rgba(245,241,233,.45)}

.rv{opacity:0}

/* hint "scorri" — solo mobile */
.swipehint{display:none;align-items:center;justify-content:center;gap:10px;margin-top:20px;color:var(--gold-deep);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.swipehint .ico{width:20px;height:20px;animation:swh 1.5s ease-in-out infinite}
.swipehint--light{color:var(--gold)}
@keyframes swh{0%,100%{transform:translateX(-4px);opacity:.45}50%{transform:translateX(5px);opacity:1}}

/*  MOBILE (impeccabile)  */
@media(max-width:980px){
  .wrap{padding:0 20px}
  .topbar{font-size:.64rem;letter-spacing:.08em;padding:8px 0}
  .topbar .tb2,.topbar .tb3{display:none}
  .header{top:31px}
  /* header bilanciato: burger+cerca | logo centrato | carrello */
  .navL{display:none}
  .mleft{display:flex}
  .header__row{grid-template-columns:1fr auto 1fr;padding-block:10px}
  .logoC img{height:22px}
  .header.solid .logoC img{height:20px}
  .navR{gap:6px}
  .navR .icobtn,.mleft .icobtn{width:44px;height:44px}
  .navR .hidem,.navR .hids{display:none}
  .navR .burger{display:grid}
  .mega{display:none!important}   /* su mobile si usa il drawer, mai il mega-menu */
  .fab{right:16px;bottom:16px;height:52px;padding:0 16px;font-size:.68rem}
  .fab:hover .fab__txt{max-width:0;opacity:0;margin-left:0}   /* niente hover su touch */
  .fab.peek .fab__txt{max-width:140px;opacity:1;margin-left:10px}
  /* hero centrato */
  .hero{min-height:560px}
  .hero__overlay{background:radial-gradient(120% 70% at 50% 46%,rgba(24,20,14,.66),rgba(24,20,14,.5) 55%),linear-gradient(180deg,rgba(24,20,14,.5),transparent 30%,rgba(24,20,14,.72))}
  .hslides{min-height:360px}
  .hslide{grid-template-columns:1fr}
  .hslide__media{display:none}
  .hslide__txt{text-align:center}
  .hslide__txt h1{font-size:clamp(2.4rem,10vw,3.5rem);text-shadow:0 2px 24px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5)}
  .hslide__txt .eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .hslide__txt p{text-shadow:0 1px 12px rgba(0,0,0,.55)}
  .hslide__txt p{font-size:.96rem;margin:16px auto 28px;max-width:340px}
  .hslide__cta{flex-direction:column;align-items:center;justify-content:center;gap:12px}
  .hslide__cta .btn{padding:15px 24px;font-size:.72rem;letter-spacing:.1em;width:100%;max-width:300px;justify-content:center;white-space:nowrap}
  .hslide__price{font-size:1.35rem}
  .hctrl{bottom:24px}
  .hctrl__in{padding:0 20px;gap:14px;justify-content:center}
  .hctrl__num{min-width:60px;font-size:.84rem}
  .hctrl__bar{max-width:90px}
  .hctrl__arrows{margin-left:0}
  .hctrl__arrows button{width:44px;height:44px}
  /* intro: righe che non spezzano */
  .intro{padding:54px 18px 48px}
  .intro__in .big{font-size:clamp(1.22rem,5.2vw,1.6rem);line-height:1.42}
  .intro__in .eyebrow{font-size:.64rem;letter-spacing:.22em;margin-bottom:20px}
  .intro__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 14px;margin-top:40px}
  .intro__stats div b{font-size:1.55rem}
  .intro__stats div span{font-size:.62rem}
  .intro__div{margin-top:40px}
  /* catalogo */
  .tops{margin-top:5svh;border-radius:28px 28px 0 0;padding:60px 0 76px}
  .tops__head{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:34px}
  .tops__tabs{gap:16px;justify-content:center}
  .tops__tabs span{font-size:1.08rem}
  .tops__tabs span.on{padding-left:20px}
  .tops__tabs span.on::before{width:10px;height:10px}
  /* catalogo: swipe orizzontale, 1 card per vista con peek */
  .tops__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
  .tops__grid::-webkit-scrollbar{display:none}
  .tcard{scroll-snap-align:center;padding:30px 20px 26px;border-radius:18px}
  .tcard__img{height:230px;margin-bottom:18px}
  .tcard .name{font-size:1.02rem}
  .tcard .prod{font-size:.6rem}
  .tcard .add{padding:11px 24px;font-size:.66rem}
  .tops__nav{display:none}
  .swipehint{display:flex}
  /* personalizza centrato */
  .config__in{grid-template-columns:1fr;padding:76px 20px;gap:36px}
  .config__stage{order:-1;min-height:420px}
  .config__stage img{height:350px}
  .config__txt{text-align:center}
  .config__txt>p{margin:18px auto 0}
  .csteps .st{text-align:left}
  .tagpin .wire{width:24px}
  .tagpin .lbl{font-size:.6rem;padding:7px 11px}
  .tp1{top:3%;left:0}
  .tp2{top:44%;right:0}
  .tp3{bottom:3%;left:4%}
  /* occasioni: swipe orizzontale, tutte visibili */
  .occ{padding:76px 0}
  .acc{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
  .acc::-webkit-scrollbar{display:none}
  .acc .pan{height:400px;border-radius:20px;scroll-snap-align:center;flex:none}
  .acc .pan .vlab{display:none}
  .acc .pan .m{opacity:1;transform:none;padding:24px}
  .acc .pan .m h3{font-size:1.4rem}
  .acc .pan .m span{white-space:normal}
  /* parallax */
  .para{min-height:520px}
  .para__in .eyebrow{font-size:.62rem}
  .para__in p{font-size:clamp(1.55rem,7vw,2.4rem);line-height:1.24}
  .divider{padding:48px 0}
  /* chess: stack con immagine sopra */
  .chess{padding:0 0 72px}
  .chess__row{grid-template-columns:1fr}
  .chess__row>*{height:auto}
  .chess__img{aspect-ratio:16/10}
  .chess__row:nth-child(2) .chess__img{order:-1}
  .chess__txt{padding:34px 24px 42px}
  .chess__txt h2{font-size:1.45rem}
  /* recensioni: score sopra + swipe card */
  .revs{padding:72px 0}
  .revs__head{margin-bottom:36px}
  .revs__in{grid-template-columns:1fr;gap:30px}
  .revs__score{border-right:none;padding:0}
  .revs__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .revs__list::-webkit-scrollbar{display:none}
  .rev{scroll-snap-align:center;padding:24px 22px}
  /* newsletter + footer */
  .news{padding:72px 0}
  .news p{padding:0 10px}
  .news__form{flex-direction:column;padding:0 6px}
  .news__form .btn{justify-content:center}
  .footer__top{grid-template-columns:1fr 1fr;gap:30px 22px}
}
@media(max-width:620px){
  .tops__grid{grid-auto-columns:82%}
  .acc{grid-auto-columns:84%}
  .footer__top{grid-template-columns:1fr}
}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140%);z-index:120;background:var(--ink);color:var(--cream);border-radius:999px;padding:15px 26px;display:flex;align-items:center;gap:14px;font-size:.86rem;box-shadow:0 24px 60px -16px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.22,1,.36,1);white-space:nowrap;font-family:var(--body)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .ico{width:17px;height:17px;color:var(--gold)}
.toast a{color:var(--gold)!important;font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.navR .count.zero{display:none}

/*  Drawer compatto: 9+ voci devono starci senza collassare; nav scrollabile  */
.drawer{padding:92px 26px 26px}
.drawer nav{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-bottom:14px;min-height:0}
.drawer nav a{font-size:1.32rem;padding:11px 0;flex:none}
.drawer .btn{flex:none}
@media(max-height:720px){.drawer nav a{font-size:1.18rem;padding:9px 0}.drawer{padding-top:84px}}


/*  RESET variante header "pagine interne" (site.css) sulla home
   home.css non ridefinisce tutte le proprietà: quelle di site.css restavano
   attive (sfondo chiaro sempre, blur, ombra, CTA piena). Qui si azzerano e
   si ripristina il comportamento demo: trasparente → .solid allo scroll. */
.header{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.header.solid,.header.menu-open{background:rgba(251,248,242,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.topbar{background:transparent}
.navL .cta{background:transparent;box-shadow:none;padding:10px 0}
/* header trasparente: anche in hover niente pillola (site.css la applicherebbe
   con .navL .cta:hover) — come in demo si muove solo la freccia */
.header:not(.solid):not(.menu-open) .navL .cta:hover{background:transparent;border-color:transparent;box-shadow:none;color:var(--gold)}
.header.solid .navL .cta,.header.menu-open .navL .cta{background:var(--gold);color:#fff;padding:10px 20px;border-color:var(--gold);box-shadow:0 10px 26px -10px rgba(140,122,82,.6)}

/*  Tab del cassetto su mobile: mai a capo (Playfair è più largo di Marcellus).
     Riga singola centrata quando ci sta, scorrevole quando i font sono larghi. */
@media(max-width:980px){
  .tops__tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;justify-content:safe center;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tops__tabs::-webkit-scrollbar{display:none}
  .tops__tabs span{font-size:.98rem;letter-spacing:.07em;white-space:nowrap;flex:none}
  .tops__tabs span.on{padding-left:18px}
}