/* ============================================================
RICETTE VERSATE — DESIGN SYSTEM (condiviso da tutte le pagine)
La palette di default sta qui; ogni cocktail/colore la sovrascrive
con un blocco :root inline nel (vedi partials/head.php).
VARIABILI TEMA (sovrascrivibili per pagina):
--bitter accento primario (es. Campari)
--gin cristallo/chiaro
--vermouth rosso profondo
--negroni colore "finale" del drink / accento forte
--ottone filetti, dati, dettagli
--liquid colore liquido (animato dallo scroll nelle ricette)
--bg-a/--bg-b fondali
============================================================ */
:root{
--notte:#101820;
--bitter:#D6002B;
--gin:#DCE7EA;
--vermouth:#6E1220;
--negroni:#A81627;
--carta:#F3EADC;
--ottone:#C9A24A;
--liquid:#D6002B;
--bg-a:#101820;
--bg-b:#0A0E13;
--display:"Bodoni Moda", Georgia, serif;
--body:"Archivo", system-ui, sans-serif;
--mono:"DM Mono", ui-monospace, monospace;
}
/* Bodoni Moda ad alta contrasto: alle grandi dimensioni le aste sottili
spariscono. Abbassiamo l'optical size (opsz) sui titoli display per
ispessire i tratti fini mantenendo l'eleganza. (Non tocca il peso.) */
.hero h1, .hero h1 em, .home-hero h1,
.h-display, .card h3, .calc h3, .caption h2,
.faq-item summary, .next-item h4, .product h4{
font-optical-sizing:auto;
font-variation-settings:"opsz" 34;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--bg-b);
color:var(--carta);
font-family:var(--body);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed; inset:0; z-index:-2;
background:radial-gradient(120% 80% at 50% 46%, var(--bg-a) 0%, var(--bg-b) 68%);
transition:background .12s linear;
}
/* grana leggera, per togliere la piattezza dei gradienti */
body::after{
content:"";
position:fixed; inset:0; z-index:-1; pointer-events:none;
opacity:.13; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
a{color:inherit}
img{max-width:100%; height:auto}
.wrap{width:min(1180px,92vw); margin-inline:auto}
/* etichetta piccola in mono: sistema di segnaletica ricorrente */
.eyebrow{
font-family:var(--mono); font-size:12px; letter-spacing:.22em;
text-transform:uppercase; color:var(--ottone); margin:0;
}
/* ---------- HEADER / NAV ---------- */
.site-head{
position:relative; z-index:5;
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:1.4rem 0;
}
.brand{
font-family:var(--display); font-weight:900; text-transform:none;
letter-spacing:-.02em; font-size:1.7rem; text-decoration:none; color:var(--carta);
}
.brand span{color:var(--ottone)}
.site-nav{display:flex; align-items:center; gap:1.6rem; flex-wrap:nowrap; white-space:nowrap}
.site-nav a{
font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(243,234,220,.6); text-decoration:none;
}
.site-nav a:hover{color:var(--carta)}
/* ---- Ricerca globale ---- */
.head-right{display:flex; align-items:center; gap:1.4rem}
.search-trigger{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
border:1px solid rgba(243,234,220,.16); border-radius:50%; background:transparent; color:rgba(243,234,220,.72); cursor:pointer;
transition:color .2s, border-color .2s, background .2s}
.search-trigger:hover{color:var(--ottone); border-color:color-mix(in srgb, var(--ottone) 55%, transparent); background:rgba(201,162,74,.08)}
.search-ov{position:fixed; inset:0; z-index:1200; display:flex; justify-content:center; align-items:flex-start; padding:10vh 1.2rem 1.2rem}
.search-ov[hidden]{display:none}
.search-ov__backdrop{position:absolute; inset:0; background:rgba(6,9,14,.72); backdrop-filter:blur(4px)}
.search-ov__box{position:relative; width:100%; max-width:640px; background:var(--bg-a,#12140c); border:1px solid rgba(243,234,220,.14);
border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden; animation:searchIn .18s ease}
@keyframes searchIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.search-ov__bar{display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem; border-bottom:1px solid rgba(243,234,220,.1)}
.search-ov__bar > svg{color:var(--ottone); flex:none}
.search-ov__bar input{flex:1; min-width:0; background:none; border:0; outline:none; color:var(--carta); font-family:inherit; font-size:1.1rem}
.search-ov__bar input::placeholder{color:rgba(243,234,220,.4)}
.search-ov__close{flex:none; width:32px; height:32px; border:0; background:none; color:rgba(243,234,220,.5); font-size:1.6rem; line-height:1; cursor:pointer; border-radius:8px}
.search-ov__close:hover{color:var(--carta)}
.search-ov__results{max-height:min(60vh,460px); overflow-y:auto; padding:.4rem}
.search-ov__hint,.search-ov__empty{margin:0; padding:1.3rem 1.2rem; font-size:.9rem; color:rgba(243,234,220,.5)}
.search-grp{padding:.2rem 0}
.search-grp__h{display:block; padding:.5rem .8rem .2rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ottone)}
.search-hit{display:flex; flex-direction:column; gap:.05rem; padding:.55rem .8rem; border-radius:10px; text-decoration:none; color:var(--carta)}
.search-hit:hover, .search-hit.is-active{background:rgba(201,162,74,.12)}
.search-hit__t{font-size:.98rem}
.search-hit__s{font-size:.8rem; color:rgba(243,234,220,.5)}
/* hamburger: nascosto su desktop, mostrato appena il menu non ci sta su una riga (≤1048px) */
.nav-toggle{display:none}
@media (max-width:1200px){
.site-head{z-index:900} /* il menù (dentro l'header) resta sopra al contenuto */
.nav-toggle{
display:flex; flex-direction:column; justify-content:center; gap:6px;
width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer;
position:relative; z-index:910;
}
.nav-toggle span{display:block; width:26px; height:2px; margin:0 0 0 auto; border-radius:2px;
background:var(--carta); transition:transform .32s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* menù a tutta pagina */
.site-nav{
position:fixed; inset:0; z-index:900;
flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; gap:0;
background:linear-gradient(165deg, #151c12 0%, #0A0E13 62%);
opacity:0; visibility:hidden; transform:scale(1.03);
transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.site-nav.is-open{opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease}
.site-nav a{
font-family:var(--display); font-size:clamp(1.9rem,8vw,2.6rem); letter-spacing:-.01em;
text-transform:none; color:var(--carta); padding:.5rem 1rem;
opacity:0; transform:translateY(18px); transition:opacity .4s ease, transform .4s ease;
}
.site-nav a:active{color:var(--ottone)}
.site-nav.is-open a{opacity:1; transform:none}
.site-nav.is-open a:nth-child(1){transition-delay:.10s}
.site-nav.is-open a:nth-child(2){transition-delay:.15s}
.site-nav.is-open a:nth-child(3){transition-delay:.20s}
.site-nav.is-open a:nth-child(4){transition-delay:.25s}
.site-nav.is-open a:nth-child(5){transition-delay:.30s}
.site-nav.is-open a:nth-child(6){transition-delay:.35s}
.site-nav.is-open a:nth-child(7){transition-delay:.40s}
}
@media (prefers-reduced-motion:reduce){
.site-nav, .site-nav a, .nav-toggle span{transition:none !important}
.site-nav.is-open a{transition-delay:0s !important}
}
/* ---------- SOTTO-NAVIGAZIONE (jump alle sezioni) ---------- */
.subnav{
position:sticky; top:0; z-index:8;
background:rgba(10,14,19,.82); backdrop-filter:blur(10px);
border-block:1px solid rgba(243,234,220,.12);
}
.subnav-inner{display:flex; gap:.35rem; overflow-x:auto; padding:.6rem 0; scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{
flex:none; white-space:nowrap; text-decoration:none;
font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(243,234,220,.6); padding:.5rem .85rem; border-radius:2rem;
transition:color .2s, background .2s;
}
.subnav a:hover{color:var(--carta); background:rgba(243,234,220,.07)}
/* le sezioni non finiscono sotto la barra quando ci si salta */
section[id]{scroll-margin-top:64px}
/* ---------- BREADCRUMB ---------- */
.crumbs{
font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(243,234,220,.4); padding:1.6rem 0 0; display:flex; gap:.6rem; flex-wrap:wrap;
}
.crumbs a{color:rgba(243,234,220,.6); text-decoration:none}
.crumbs a:hover{color:var(--ottone)}
.crumbs span{opacity:.4}
/* ---------- HERO ---------- */
.hero{
min-height:100svh; display:flex; flex-direction:column;
padding:9vh 0 6vh; position:relative;
}
.hero-inner{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:2.2rem}
.hero h1{
font-family:var(--display); font-weight:900;
font-size:clamp(3rem, 14vw, 15rem);
line-height:.82; letter-spacing:-.03em; margin:.4rem 0 0;
text-transform:uppercase;
}
.hero h1 em{
font-style:italic; font-weight:400; display:block;
font-size:.33em; letter-spacing:-.01em; text-transform:none;
color:var(--ottone); margin-top:.35em;
}
.hero-meta{
display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; align-items:baseline;
border-top:1px solid rgba(243,234,220,.18); padding-top:1.1rem; max-width:760px;
}
.hero-meta div{font-family:var(--mono); font-size:13px; letter-spacing:.08em}
.hero-meta a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(201,162,74,.4)}
.hero-meta a:hover{color:var(--ottone)}
.hero-meta span{display:block; color:rgba(243,234,220,.45); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.3rem}
.hero p.lead{max-width:46ch; color:rgba(243,234,220,.72); margin:0}
.scrollcue{
margin-top:2.4rem; flex:none;
font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
color:rgba(243,234,220,.5); display:flex; align-items:center; gap:.7rem;
}
.scrollcue i{display:block; width:52px; height:1px; background:rgba(243,234,220,.4); transform-origin:left; animation:pull 2.6s ease-in-out infinite}
@keyframes pull{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}
/* titoli di sezione condivisi */
.h-display{
font-family:var(--display); font-weight:900; text-transform:uppercase;
font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em; line-height:1; margin:.6rem 0 2.4rem;
}
/* ---------- SCHEDA RICETTA ---------- */
.card{padding:14vh 0 10vh; position:relative}
.card h3, .calc h3{
font-family:var(--display); font-weight:900; text-transform:uppercase;
font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em; line-height:1; margin:.6rem 0 2.4rem;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem)}
/* difficoltà nella scheda ricetta */
.recipe-diff{display:inline-flex; align-items:center; gap:.6rem; margin:-1.4rem 0 2.2rem; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--carta)}
.recipe-diff span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,234,220,.45)}
table.dosi{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px}
table.dosi th{
text-align:left; font-weight:400; font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:rgba(243,234,220,.45);
padding:0 0 .7rem; border-bottom:1px solid rgba(243,234,220,.18);
}
table.dosi th:not(:first-child){padding-left:1.7rem}
table.dosi td{padding:1.05rem 0; border-bottom:1px solid rgba(243,234,220,.1); vertical-align:middle}
table.dosi td.name{font-family:var(--body); font-size:15px; letter-spacing:.06em; text-transform:uppercase}
table.dosi td.name a{text-decoration:none; border-bottom:1px solid transparent}
table.dosi td.name a:hover{border-bottom-color:var(--ottone)}
table.dosi td.name i{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.7rem; vertical-align:middle}
table.dosi td.num{text-align:right; color:rgba(243,234,220,.8); white-space:nowrap; padding-left:1.7rem; font-variant-numeric:tabular-nums; min-width:3rem}
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s}
ol.steps li{
counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
padding:1.1rem 0; border-bottom:1px solid rgba(243,234,220,.1);
}
ol.steps li::before{
content:counter(s,decimal-leading-zero);
font-family:var(--mono); font-size:12px; color:var(--ottone); padding-top:.35rem;
}
ol.steps li span{color:rgba(243,234,220,.86)}
.serve{
margin-top:2.6rem; border:1px solid rgba(243,234,220,.16); padding:1.4rem 1.6rem;
display:flex; gap:1.4rem; align-items:center; text-decoration:none; color:inherit;
transition:border-color .2s;
}
a.serve:hover{border-color:var(--ottone)}
.serve svg{width:46px; flex:none; opacity:.85}
.serve b{display:block; font-family:var(--body); font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.serve small{color:rgba(243,234,220,.6); font-family:var(--mono); font-size:12px; letter-spacing:.06em}
/* ---------- IMMAGINE EDITORIALE ---------- */
.figwrap{padding:3vh 0 5vh}
.figure{margin:0}
.figure-media{position:relative; overflow:hidden; border-radius:3px; isolation:isolate}
.figure-media img{width:100%; display:block}
/* riflesso specular scroll-driven: sembra vetro/metallo. --sheen (0..1) da reflect.js */
.figure-media .sheen{
position:absolute; inset:0; pointer-events:none; z-index:1;
background:linear-gradient(105deg,
transparent 34%,
rgba(255,255,255,.06) 44%,
rgba(255,255,255,.22) 50%,
rgba(255,255,255,.06) 56%,
transparent 66%);
background-size:260% 100%;
background-repeat:no-repeat;
background-position:calc(var(--sheen, .5) * 160% - 30%) 0;
mix-blend-mode:screen; opacity:.85;
}
.figure figcaption{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(243,234,220,.5); margin-top:.9rem}
@media (prefers-reduced-motion:reduce){ .figure-media .sheen{display:none} }
.figure-ph{
aspect-ratio:16/9; border:1px dashed rgba(243,234,220,.24); border-radius:3px;
display:grid; place-items:center; background:
linear-gradient(135deg, rgba(243,234,220,.03), rgba(243,234,220,0)),
var(--bg-b);
}
.figure-ph .ph-inner{display:grid; justify-items:center; gap:.5rem; text-align:center; color:rgba(243,234,220,.5); padding:2rem}
.figure-ph svg{width:44px; height:44px; opacity:.55; color:var(--ottone)}
.figure-ph span{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.figure-ph small{font-size:12px; color:rgba(243,234,220,.35)}
.figure-ph code{font-family:var(--mono); color:var(--ottone)}
/* ---------- SEZIONI GENERICHE ---------- */
.section{padding:8vh 0; border-top:1px solid rgba(243,234,220,.14)}
.section > .eyebrow{margin-bottom:.4rem}
.prose{max-width:62ch}
.prose p{color:rgba(243,234,220,.82); margin:0 0 1.1rem}
/* ---------- FAQ (accordion con ) ---------- */
.faq-list{margin-top:2rem; border-top:1px solid rgba(243,234,220,.14)}
.faq-item{border-bottom:1px solid rgba(243,234,220,.14)}
.faq-item summary{
list-style:none; cursor:pointer; padding:1.5rem 0; display:flex; gap:1rem;
align-items:baseline; justify-content:space-between;
font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.6vw,1.6rem);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"+"; font-family:var(--mono); font-weight:400; color:var(--ottone);
font-size:1.4rem; transition:transform .2s; flex:none;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 0 1.6rem; max-width:64ch; color:rgba(243,234,220,.8)}
/* --- marche più famose (pagina ingrediente) + modale --- */
.brand-grid{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem}
/* marche raggruppate per provenienza: etichetta di gruppo */
.brand-group{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ottone); margin:2rem 0 0}
.brand-group + .brand-grid{margin-top:.7rem}
.brand-item{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
background:rgba(243,234,220,.04); border:1px solid rgba(243,234,220,.16); border-radius:999px;
padding:.7rem 1.15rem; color:var(--carta); font-family:inherit; font-size:1.1rem;
transition:border-color .2s, background .2s, transform .15s}
.brand-item:hover{border-color:var(--ottone); background:rgba(201,162,74,.1); transform:translateY(-1px)}
.brand-item.is-own{border-color:rgba(201,162,74,.55)}
/* marca cliccabile inline nel testo (apre la stessa brand-modal) */
.brand-link{background:none; border:0; padding:0; margin:0; font:inherit; color:var(--ottone); cursor:pointer;
border-bottom:1px solid rgba(201,162,74,.55); transition:color .15s, border-color .15s}
.brand-link:hover{color:var(--carta); border-bottom-color:var(--carta)}
/* sezione ingrediente a tutta larghezza: paragrafi in colonne */
.ing-section--wide .ing-body{max-width:none}
.ing-section--wide .ing-body .prose{max-width:none; break-inside:avoid; margin:0 0 1.1rem}
@media (min-width:760px){ .ing-section--wide .ing-body{columns:2; column-gap:clamp(2rem,5vw,4rem)} }
/* nota / callout dentro una sezione (stile proprio, non un paragrafo normale) */
.ing-note{margin:1.4rem 0 0; padding:.85rem 1.1rem; border-left:3px solid var(--ottone);
background:rgba(243,234,220,.05); border-radius:0 8px 8px 0; font-size:.95rem; line-height:1.55;
color:rgba(243,234,220,.82)}
.ing-note strong,.ing-note b{color:var(--carta); font-weight:600}
.ing-note .ing-note__k{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
color:var(--ottone); margin-right:.6rem; vertical-align:1px}
/* tabella riepilogativa dentro una sezione ingrediente */
.ing-table-wrap{margin:1.5rem 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.ing-table{width:100%; border-collapse:collapse; font-size:.95rem; min-width:340px}
.ing-table th,.ing-table td{text-align:left; padding:.62rem .85rem; border-bottom:1px solid rgba(243,234,220,.12)}
.ing-table thead th{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:.68rem;
text-transform:uppercase; letter-spacing:.08em; color:var(--ottone); border-bottom-color:rgba(201,162,74,.4)}
.ing-table td:first-child{font-weight:600; color:var(--carta); white-space:nowrap}
.ing-table tbody tr:last-child td{border-bottom:none}
.ing-table tbody tr:hover{background:rgba(243,234,220,.04)}
.brand-modal{position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.brand-modal[hidden]{display:none}
.brand-modal__backdrop{position:absolute; inset:0;
background:radial-gradient(circle at 50% 32%, rgba(38,26,10,.55), rgba(0,0,0,.82)); backdrop-filter:blur(4px)}
.brand-modal__box{position:relative; z-index:1; width:min(460px,94vw); overflow:hidden;
background:linear-gradient(165deg, #151c12 0%, #0A0E13 62%);
border:1px solid rgba(201,162,74,.4); border-radius:22px; padding:2.2rem 1.9rem 1.9rem; text-align:center;
box-shadow:0 40px 100px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
animation:brandpop .32s cubic-bezier(.2,.9,.3,1.25)}
.brand-modal__box::before{content:""; position:absolute; top:-40%; left:50%; width:150%; height:120%;
transform:translateX(-50%); pointer-events:none;
background:radial-gradient(closest-side, rgba(201,162,74,.14), rgba(201,162,74,0) 70%)}
@keyframes brandpop{from{opacity:0; transform:translateY(12px) scale(.95)} to{opacity:1; transform:none}}
.brand-modal__close{position:absolute; top:.7rem; right:1rem; z-index:2; background:none; border:none;
color:rgba(243,234,220,.65); font-size:1.8rem; line-height:1; cursor:pointer; padding:.2rem; transition:color .2s}
.brand-modal__close:hover{color:var(--ottone)}
.brand-modal__eyebrow{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.22em;
text-transform:uppercase; color:var(--ottone); margin:0 0 1.1rem}
/* stage immagine: stesso look delle card slider, ma più grande e prorompente */
.brand-modal__stage{position:relative; height:300px; margin:0 auto 1.4rem; padding:1rem;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(ellipse 78% 82% at 50% 42%, #ffffff 55%, #ece6da 100%);
border-radius:14px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.5)}
.brand-modal__img{max-height:100%; max-width:100%; width:auto; object-fit:contain}
.brand-modal__box h4{position:relative; font-family:var(--display); font-weight:700; font-size:1.65rem;
margin:0 0 1.3rem; color:var(--carta)}
.brand-modal__actions{position:relative; display:flex; flex-direction:column; gap:.65rem}
.brand-modal__searches{display:flex; gap:.6rem}
.brand-modal__searches .btn{flex:1}
.brand-modal .btn{display:block; text-align:center; text-decoration:none; cursor:pointer;
font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
padding:.95rem 1rem; border-radius:3px; border:1px solid transparent;
transition:filter .2s, border-color .2s, background .2s}
.brand-modal .btn[hidden]{display:none} /* .btn è display:block: serve esplicito o resterebbe visibile */
.brand-modal .btn--buy{color:var(--bg-b); background:var(--ottone)}
.brand-modal .btn--buy:hover{filter:brightness(1.1)}
.brand-modal .btn--ghost{color:var(--carta); background:var(--bg-b); border-color:rgba(243,234,220,.22)}
.brand-modal .btn--ghost:hover{border-color:var(--ottone)}
.faq-cta{display:block; width:fit-content; margin-top:1.2rem; padding:.5rem .9rem; border:1px solid var(--ottone,#C9A24A);
border-radius:999px; color:var(--ottone,#C9A24A); text-decoration:none; font-size:.85rem; font-weight:600;
transition:background .2s, color .2s}
.faq-cta:hover{background:var(--ottone,#C9A24A); color:#181008}
/* blocco "altre domande" espandibile (4 FAQ visibili, il resto qui dentro) */
.faq-extra{border-bottom:1px solid rgba(243,234,220,.14)}
.faq-extra > summary{
list-style:none; cursor:pointer; padding:1.4rem 0; display:inline-flex; align-items:center; gap:.6rem;
font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ottone);
}
.faq-extra > summary::-webkit-details-marker{display:none}
.faq-extra > summary::after{content:"+"; font-size:1.3rem; line-height:1}
.faq-extra[open] > summary::after{content:"–"}
.faq-extra > summary .close{display:none}
.faq-extra[open] > summary .open{display:none}
.faq-extra[open] > summary .close{display:inline}
.faq-extra > summary:focus-visible{outline:2px solid var(--ottone); outline-offset:3px}
.faq-extra .faq-list{border-top:none}
.faq-extra .faq-item:last-child{border-bottom:none}
/* ---------- GRADI ---------- */
.gradi-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; margin-top:1.4rem}
.gradi-big{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,7vw,4.4rem); line-height:1; color:var(--negroni); font-variation-settings:"opsz" 34}
.gradi-compare{display:grid; gap:.9rem}
.gc-row{display:grid; grid-template-columns:12rem 1fr 3.6rem; gap:.9rem; align-items:center; font-family:var(--mono); font-size:13px}
.gc-lab{color:rgba(243,234,220,.7); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-bar{height:8px; background:rgba(243,234,220,.1); border-radius:4px; overflow:hidden}
.gc-bar > i{display:block; height:100%; background:rgba(243,234,220,.3); border-radius:4px}
.gc-row.me .gc-lab{color:var(--carta)}
.gc-row.me .gc-bar > i{background:var(--liquid); box-shadow:0 0 12px var(--liquid)}
.gc-val{color:rgba(243,234,220,.6); white-space:nowrap}
@media(max-width:820px){ .gradi-grid{grid-template-columns:1fr} .gc-row{grid-template-columns:8rem 1fr 3.2rem; gap:.6rem; font-size:12px} }
/* ---------- STORIA ---------- */
.history .prose{columns:1}
@media(min-width:900px){ .history .prose{max-width:none; columns:2; column-gap:4rem} }
/* ---------- VOLUMI / PAESI ---------- */
.countries{display:grid; gap:.55rem; margin-top:2rem}
.country{
display:grid; grid-template-columns:1.4rem 12rem 1fr 3.4rem;
gap:.9rem; align-items:center; font-family:var(--mono); font-size:13px;
}
.country .fl{font-size:1.1rem; line-height:1}
.country .nm{letter-spacing:.04em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.country .bar{height:8px; background:rgba(243,234,220,.1); border-radius:4px; overflow:hidden}
.country .bar > i{display:block; height:100%; background:var(--liquid); box-shadow:0 0 12px var(--liquid); border-radius:4px}
.country .vol{text-align:right; color:rgba(243,234,220,.7); white-space:nowrap}
.data-note{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(243,234,220,.4); margin-top:1.4rem}
/* toggle "mostra i primi 15 / solo i primi 5" */
.countries-more{margin-top:.6rem}
.countries-more summary{
list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem;
font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--ottone); padding:.6rem 0;
}
.countries-more summary::-webkit-details-marker{display:none}
.countries-more summary::after{content:"↓"}
.countries-more[open] summary::after{content:"↑"}
.countries-more summary .close{display:none}
.countries-more[open] summary .open{display:none}
.countries-more[open] summary .close{display:inline}
/* mini grafico stagionalità */
.season{display:flex; align-items:flex-end; gap:.5%; height:150px; margin-top:1.6rem; border-bottom:1px solid rgba(243,234,220,.18)}
.season .mo{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.4rem}
.season .mo i{width:70%; background:linear-gradient(var(--liquid), rgba(214,0,43,.25)); border-radius:3px 3px 0 0; min-height:2px}
.season .mo b{font-family:var(--mono); font-weight:400; font-size:9px; letter-spacing:.05em; color:rgba(243,234,220,.4)}
.season .mo.peak i{box-shadow:0 0 14px var(--liquid)}
.season .mo.peak b{color:var(--ottone)}
/* ---------- PRODOTTI (AFFILIAZIONE) ---------- */
/* Sempre su UNA riga: mai a capo. Con ≤4 riempie la larghezza (scroll su schermi
stretti), con >4 diventa uno slider continuo (vedi .is-slider). */
/* Contenitore "a listello": sfondo chiaro + hairline da 1px tra le card.
La larghezza è FISSATA in base al numero di card (--n, impostata dal template):
1 card = 1/3, 2 = 2/3, 3 = pieno. Niente shrink-to-fit (inaffidabile con overflow),
quindi mai spazio bianco extra a destra. Con >3 diventa .is-slider a tutta larghezza. */
.products{
display:flex; box-sizing:border-box; gap:1px; margin-top:2rem;
width:calc((min(1180px, 92vw) - 4px) / 3 * var(--n, 3) + (var(--n, 3) + 1) * 1px);
max-width:100%;
background:rgba(243,234,220,.14); border:1px solid rgba(243,234,220,.14);
overflow-x:auto; scrollbar-width:thin;
}
.products::-webkit-scrollbar{height:6px}
.products::-webkit-scrollbar-thumb{background:rgba(243,234,220,.2); border-radius:3px}
/* ogni card occupa SEMPRE 1/3 della riga (= 1/3 del .wrap): 3 affiancate riempiono,
1 o 2 restano a 1/3, più di 3 scorrono nello slider. */
.product{background:var(--bg-b); padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:0 0 calc((min(1180px, 92vw) - 4px) / 3); min-width:0}
/* slider a scorrimento controllato dall'utente (frecce + rotella) per >4 prodotti */
/* contenitore a tutta larghezza; mostra 3 card (1/3 ciascuna), il resto scorre */
.products-slider{position:relative}
.products.is-slider{display:flex; width:100%; scroll-snap-type:x proximity; scrollbar-width:none}
.products.is-slider::-webkit-scrollbar{display:none}
.products.is-slider .product{flex:0 0 calc((100% - 2px) / 3); min-width:0; scroll-snap-align:start}
.prod-nav{
appearance:none; -webkit-appearance:none; padding:0; margin:0;
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:46px; height:46px; border-radius:50%; cursor:pointer;
display:grid; place-items:center;
background:rgba(10,14,19,.82); backdrop-filter:blur(8px);
border:1px solid rgba(243,234,220,.28); color:var(--carta);
box-shadow:0 6px 18px rgba(0,0,0,.45);
transition:background .2s, border-color .2s, color .2s;
}
.prod-nav::before{font-family:var(--body); font-size:1.5rem; line-height:1; margin-top:-2px}
.prod-nav.is-prev::before{content:"\2039"} /* ‹ */
.prod-nav.is-next::before{content:"\203A"} /* › */
.prod-nav:hover{border-color:var(--ottone); color:var(--ottone); background:rgba(10,14,19,.95)}
.prod-nav:focus-visible{outline:2px solid var(--ottone); outline-offset:2px}
.prod-nav.is-prev{left:6px}
.prod-nav.is-next{right:6px}
.prod-nav[hidden]{display:none}
/* su mobile le frecce restano visibili (lo slider mostra ~1 card e mezza): più piccole
e appoggiate ai bordi per non coprire troppo la card. */
@media (max-width:640px){
.prod-nav{width:38px; height:38px}
.prod-nav.is-prev{left:2px}
.prod-nav.is-next{right:2px}
}
/* riquadro prodotto a dimensione fissa: l'immagine (anche molto alta/stretta)
viene contenuta dentro senza deformare né sforare.
Nota: su fondo scuro il bianco della foto non si può "togliere" via CSS senza
scurire il soggetto; qui lo rendiamo una vetrina pulita e voluta. */
.product-shot{
height:200px; margin-bottom:.9rem; padding:.7rem;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(ellipse 78% 82% at 50% 42%, #ffffff 55%, #ece6da 100%);
border-radius:8px; overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.35);
}
.product-shot{cursor:pointer; transition:box-shadow .2s, transform .2s}
a.product-shot:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.5)}
.product-shot img{max-height:100%; max-width:100%; width:auto; object-fit:contain; transition:transform .2s}
a.product-shot:hover img{transform:scale(1.04)}
.product h4{font-family:var(--display); font-weight:700; font-size:1.25rem; margin:0; line-height:1.1}
.product p{margin:0; font-size:.85rem; color:rgba(243,234,220,.55)}
.product .buy{
margin-top:auto; align-self:flex-start; text-decoration:none;
font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--bg-b); background:var(--ottone); padding:.7rem 1rem; border-radius:2px;
transition:filter .2s;
}
.product .buy:hover{filter:brightness(1.1)}
.product .ing-label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,234,220,.55); display:inline-flex; align-items:center; gap:.5rem}
.product .ing-label i{width:9px; height:9px; border-radius:50%; display:inline-block}
.product .more-link{
align-self:flex-start; display:inline-block; min-height:1.15em; margin-top:.1rem;
font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-decoration:none;
color:rgba(243,234,220,.5); border-bottom:1px solid transparent;
}
.product .more-link:hover{color:var(--ottone); border-bottom-color:var(--ottone)}
.product .more-link--empty{visibility:hidden} /* riserva lo spazio quando manca il link */
/* quante bottiglie comprare, sincronizzato col contatore */
.product .buy-count{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ottone); margin:auto 0 0; min-height:1.1em}
/* --- prodotti responsive: meno card visibili (e più grandi) sugli schermi piccoli --- */
@media (max-width:900px){
/* tablet: lo slider mostra 2 card invece di 3 */
.products.is-slider .product{flex:0 0 calc((100% - 1px) / 2)}
}
@media (max-width:640px){
/* mobile: le card non-slider si impilano a tutta larghezza (nessuno scroll orizzontale) */
.products{width:100% !important; flex-wrap:wrap}
.product{flex:0 0 100% !important}
/* lo slider (>3) resta orizzontale ma mostra ~1 card e mezza, con anteprima della successiva */
.products.is-slider{flex-wrap:nowrap}
.products.is-slider .product{flex:0 0 84% !important}
}
/* CTA sotto la tabella: stile LINK (non bottone), ancora interna a "Cosa comprare" */
.cta-buy{
display:inline-flex; align-items:center; gap:.45rem; margin-top:1.8rem;
text-decoration:none; color:var(--ottone);
font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
border-bottom:1px solid rgba(201,162,74,.4); padding-bottom:.25rem;
transition:border-color .2s, color .2s;
}
.cta-buy::after{content:"\2192"}
.cta-buy:hover{color:var(--carta); border-bottom-color:var(--carta)}
.aff-disclosure{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(243,234,220,.4); margin-top:1.2rem}
/* link "altre scelte su Amazon" dopo i prodotti */
.more-choices{margin-top:1.1rem}
.more-choices a{
font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ottone); text-decoration:none; border-bottom:1px solid rgba(201,162,74,.4); padding-bottom:.2rem;
transition:color .2s, border-color .2s;
}
.more-choices a:hover{color:var(--carta); border-bottom-color:var(--carta)}
.tools-hint{font-size:.92rem; color:rgba(243,234,220,.7); margin-top:1.6rem}
.tools-hint a{color:var(--ottone); text-decoration:none; border-bottom:1px solid transparent}
.tools-hint a:hover{border-bottom-color:var(--ottone)}
/* Indici attrezzi/bicchieri: usano le card cocktail (.cocktail-cards) per stile unico */
/* ---------- MARCHE (attrezzi) — stile lista/tabella ----------
NB: classe .marca (non .brand) per non collidere col logo .brand dell'header. */
.marche{margin-top:2rem; border-top:1px solid rgba(243,234,220,.18)}
.marca{display:grid; grid-template-columns:minmax(9rem,15rem) 1fr; gap:1.6rem; padding:1.25rem 0; border-bottom:1px solid rgba(243,234,220,.1); align-items:baseline}
.marca h4{font-family:var(--display); font-weight:700; font-size:1.25rem; margin:0; color:var(--ottone); letter-spacing:-.01em}
.marca p{margin:0; font-family:var(--body); font-size:1rem; color:rgba(243,234,220,.85); line-height:1.6}
@media (max-width:640px){ .marca{grid-template-columns:1fr; gap:.35rem} }
/* ---------- LISTA CORRELATI / RICETTE ---------- */
.next{padding:8vh 0 12vh; border-top:1px solid rgba(243,234,220,.14)}
/* indice a gruppi (es. ingredienti: Alcolici/Analcolici): spaziatura ridotta tra i blocchi */
.next--grouped{padding:3vh 0 4vh}
.next--grouped:first-of-type{padding-top:1vh}
.section-group-title{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3.5vw,2rem);
letter-spacing:-.01em; margin:0; color:var(--carta)}
.next--grouped .next-list{margin-top:1rem}
.next-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:rgba(243,234,220,.14); border:1px solid rgba(243,234,220,.14); margin-top:2rem}
.next-item{background:var(--bg-b); padding:1.6rem 1.4rem; display:grid; gap:.5rem; text-decoration:none; color:inherit; transition:background .2s}
a.next-item:hover{background:#12171d}
.next-item h4{font-family:var(--display); font-weight:700; font-size:1.5rem; margin:0; letter-spacing:-.01em}
.next-item p{margin:0; font-size:.86rem; color:rgba(243,234,220,.55)}
.next-item em{font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ottone)}
/* pill "IBA" nelle card dei cocktail (home + categorie): cocktail ufficiale IBA.
Tag a sé, in alto a destra della card — NON dentro al titolo. */
.rec-item, .next-item{position:relative}
.iba-pill{position:absolute; top:.85rem; right:.85rem; z-index:1; font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.14em; line-height:1; padding:.34em .55em; border:1px solid color-mix(in srgb, var(--ottone) 55%, transparent); color:var(--ottone); background:rgba(0,0,0,.22); border-radius:999px; text-transform:uppercase; pointer-events:none}
.rec-item:has(.iba-pill) .rec-name{padding-right:3rem}
.next-item:has(.iba-pill) h4{padding-right:3rem}
/* variante inline della pill IBA (nella hero della pagina ricetta, accanto all'occhiello) */
.iba-pill.is-inline{position:static; display:inline-block; top:auto; right:auto; margin-left:.55rem; vertical-align:baseline; font-size:.6rem; background:color-mix(in srgb, var(--ottone) 14%, transparent)}
/* ingrediente facoltativo nella tabella dosi (es. albume nel Whiskey Sour) */
.dosi tr.is-optional{opacity:.72}
.dosi .opt-tag{display:inline-block; margin-left:.5rem; font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ottone); border:1px solid color-mix(in srgb, var(--ottone) 45%, transparent); border-radius:999px; padding:.2em .5em; vertical-align:middle}
/* hub "Tipi di …": card della ricetta corrente evidenziata, varianti non ancora create attenuate */
.next-item--here{box-shadow:inset 0 0 0 2px var(--ottone)}
.next-item--soon{opacity:.55}
.next-item--soon em{color:rgba(243,234,220,.4)}
div.next-item{cursor:default}
/* Card cocktail con IMMAGINE (momenti, origini, colori) — max 4 per riga, distanziate */
.cocktail-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:1.8rem}
.cocktail-card{display:flex; flex-direction:column; background:rgba(243,234,220,.05); border:1px solid rgba(243,234,220,.14); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s, background .2s}
.cocktail-card:hover{border-color:var(--ottone); transform:translateY(-3px); background:rgba(243,234,220,.08)}
.cocktail-card-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:rgba(0,0,0,.22)}
.cocktail-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s}
.cocktail-card:hover .cocktail-card-media img{transform:scale(1.05)}
.cocktail-card-media .iba-pill{top:.6rem; right:.6rem; background:var(--bg-b); border-color:color-mix(in srgb, var(--ottone) 60%, transparent)}
/* /colori: al posto della foto lo swatch SVG del colore, su fondo tinto della categoria */
.cocktail-card-media--swatch{display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sw,#888) 34%, #0a0e13) 0%, #0a0e13 78%)}
.cocktail-card-media--swatch .swatch-svg{width:92px; height:92px; transition:transform .35s}
.cocktail-card:hover .cocktail-card-media--swatch .swatch-svg{transform:scale(1.07)}
/* /origini: bandiera circolare al centro, su fondo tinto col colore della bandiera (come /colori) */
.cocktail-card-media--flag{display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sw,#888) 34%, #0a0e13) 0%, #0a0e13 78%)}
.cocktail-card-media--flag .flag-svg{width:82px; height:82px; filter:drop-shadow(0 5px 12px rgba(0,0,0,.45)); transition:transform .35s}
.cocktail-card:hover .cocktail-card-media--flag .flag-svg{transform:scale(1.07)}
.cocktail-card-body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem}
.cocktail-card-body em{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ottone); font-style:normal}
.cocktail-card-body h4{margin:0; font-size:1.12rem; line-height:1.15}
.cocktail-card-body small{color:rgba(243,234,220,.6); font-size:.82rem; line-height:1.3}
/* card SENZA immagine (es. mocktail): stesso stile e griglia, corpo più alto e centrato */
.cocktail-card--noimg .cocktail-card-body{padding:1.6rem 1.4rem; min-height:120px; justify-content:center; gap:.5rem}
.cocktail-card--noimg .cocktail-card-body em{color:color-mix(in srgb, var(--ottone) 82%, #7fd0a0)}
@media (max-width:1000px){.cocktail-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cocktail-cards{grid-template-columns:repeat(2,1fr); gap:1.1rem}}
@media (max-width:480px){.cocktail-cards{grid-template-columns:1fr}}
/* swatch SVG del colore (indice /colori) */
.card-swatch{display:block; margin-bottom:.3rem}
.swatch-svg{width:60px; height:60px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
/* bicchiere colorato nella hero della pagina colore singola */
.color-glass{margin-bottom:1.1rem}
.color-glass .swatch-svg{width:104px; height:104px}
.next-item--swatch:hover .swatch-svg{transform:scale(1.06); transition:transform .2s}
/* chip interlink */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.chip{
font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-decoration:none;
border:1px solid rgba(243,234,220,.22); padding:.55rem .9rem; border-radius:2rem;
color:rgba(243,234,220,.8); display:inline-flex; gap:.5rem; align-items:center; transition:border-color .2s,color .2s;
}
.chip:hover{border-color:var(--ottone); color:var(--carta)}
.chip i{width:9px; height:9px; border-radius:50%; display:inline-block}
/* ---- Footer a colonne ---- */
.site-footer{margin-top:8vh; border-top:1px solid rgba(243,234,220,.12);
background:linear-gradient(180deg, transparent, rgba(0,0,0,.22)); color:rgba(243,234,220,.6)}
.footer-inner{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem clamp(1.4rem,4vw,3rem); padding:6.5vh 0 4vh}
.footer-brand{max-width:32ch}
.footer-logo{font-family:var(--display); font-weight:900; letter-spacing:-.02em; font-size:1.9rem; text-decoration:none; color:var(--carta); line-height:1}
.footer-logo span{color:var(--ottone)}
.footer-tag{margin:.7rem 0 1.2rem; font-size:.92rem; line-height:1.5; color:rgba(243,234,220,.58)}
.footer-age{display:flex; align-items:center; gap:.5rem; margin:0; font-size:.76rem; line-height:1.4; color:rgba(243,234,220,.42)}
.footer-col{display:flex; flex-direction:column; align-items:flex-start; gap:.6rem}
.footer-col h4{margin:0 0 .45rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ottone)}
.footer-col a{color:rgba(243,234,220,.62); text-decoration:none; font-size:.92rem; transition:color .2s, transform .2s}
.footer-col a:hover{color:var(--carta); transform:translateX(2px)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
padding:1.5rem 0 8vh; border-top:1px solid rgba(243,234,220,.08);
font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(243,234,220,.34)}
.footer-aff{max-width:54ch; text-align:right}
@media (max-width:820px){
.footer-inner{grid-template-columns:1fr 1fr; gap:2.2rem 1.5rem}
.footer-brand{grid-column:1 / -1; max-width:none}
}
@media (max-width:520px){
.footer-inner{grid-template-columns:1fr 1fr}
.footer-bottom{flex-direction:column; align-items:flex-start}
.footer-aff{text-align:left; max-width:none}
}
/* Lista "i cocktail più famosi": classifica editoriale con numeri grandi */
.famous-list{list-style:none; counter-reset:fam; margin:2rem 0 0; padding:0; max-width:860px}
.famous-list li{
counter-increment:fam;
display:grid; grid-template-columns:clamp(3.2rem,11vw,5.2rem) 1fr; align-items:center;
gap:clamp(1rem,3vw,2rem); padding:clamp(1rem,2.6vw,1.5rem) .4rem;
border-top:1px solid rgba(243,234,220,.12); transition:background .2s;
}
.famous-list li:last-child{border-bottom:1px solid rgba(243,234,220,.12)}
.famous-list li:has(a):hover{background:linear-gradient(90deg, rgba(201,162,74,.07), transparent 70%)}
.famous-list li::before{
content:counter(fam, decimal-leading-zero);
font-family:var(--display); font-weight:900; font-size:clamp(2.7rem,8vw,4.2rem); line-height:.8;
font-variation-settings:"opsz" 40; text-align:center;
color:transparent; -webkit-text-stroke:1.3px rgba(201,162,74,.6);
transition:color .22s ease, -webkit-text-stroke-color .22s ease;
}
.famous-list li:has(a):hover::before{color:var(--ottone); -webkit-text-stroke-color:var(--ottone)}
.fam-body{min-width:0}
.fam-body > a, .fam-body > span{font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.08; text-decoration:none}
/* linkati (ricetta sul sito): nome bianco con sottolineatura oro + freccia = cliccabile */
.fam-body > a{color:var(--carta); border-bottom:1px solid rgba(201,162,74,.5); transition:color .18s, border-color .18s}
.fam-body > a::after{content:"→"; margin-left:.45em; font-size:.68em; color:var(--ottone); vertical-align:.12em}
.fam-body > a:hover{color:var(--ottone); border-color:var(--ottone)}
/* editoriali (senza pagina): testo attenuato, nessuna affordance di link */
.fam-body > span{color:rgba(243,234,220,.62)}
.fam-body small{display:block; color:rgba(243,234,220,.58); font-size:.92rem; margin-top:.3rem; line-height:1.45}
@media (prefers-reduced-motion:reduce){ .famous-list li, .famous-list li::before{transition:none} }
.age-badge{display:inline-flex; align-items:center; justify-content:center; min-width:2.1em; padding:.15em .4em; margin-right:.5em; border:1px solid rgba(201,162,74,.5); border-radius:4px; color:var(--ottone); font-weight:700; letter-spacing:.05em; vertical-align:middle}
/* Avviso età: barra soft in basso, non copre i contenuti */
html.has-agebar{scroll-padding-bottom:5rem}
.agebar{position:fixed; left:0; right:0; bottom:0; z-index:9997; display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap;
padding:.85rem 1.1rem; background:rgba(10,14,19,.94); backdrop-filter:blur(8px); border-top:1px solid rgba(201,162,74,.35);
font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:rgba(243,234,220,.82)}
.agebar p{margin:0; max-width:64ch}
.agebar strong{color:var(--carta)}
.agebar button{flex:none; padding:.5rem 1.1rem; border:1px solid var(--ottone); border-radius:6px; background:transparent; color:var(--ottone);
font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s}
.agebar button:hover{background:var(--ottone); color:#181008}
.agebar[hidden]{display:none}
@media(max-width:640px){ .agebar{justify-content:flex-start; text-align:left; gap:.7rem} .agebar button{width:100%} }
/* ---------- CALCOLATORE DOSI ---------- */
.calc{padding:8vh 0; border-top:1px solid rgba(243,234,220,.14)}
.calc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.stepper{display:flex; align-items:center; gap:1.2rem}
.stepper button{
width:52px; height:52px; border-radius:50%; background:none; cursor:pointer;
border:1px solid rgba(243,234,220,.4); color:var(--carta);
font-family:var(--mono); font-size:20px; line-height:1;
transition:border-color .2s, background .2s;
}
.stepper button:hover{border-color:var(--ottone); background:rgba(201,162,74,.12)}
.stepper button:focus-visible{outline:2px solid var(--ottone); outline-offset:3px}
.stepper output{font-family:var(--display); font-weight:900; font-size:clamp(3rem,9vw,5rem); line-height:1; min-width:2.2ch; text-align:center}
.stepper span.unit{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,234,220,.5)}
/* link rapidi "per un gruppo": popolano il contatore, stessa pagina */
.qty-quick{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.6rem}
.qty-quick .ql{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,234,220,.45); margin-right:.2rem}
.qty-chip{
font-family:var(--mono); font-size:13px; cursor:pointer; min-width:2.6rem;
background:none; border:1px solid rgba(243,234,220,.25); color:var(--carta);
padding:.42rem .7rem; border-radius:2rem; transition:border-color .2s, background .2s, color .2s;
}
.qty-chip:hover{border-color:var(--ottone)}
.qty-chip:focus-visible{outline:2px solid var(--ottone); outline-offset:2px}
.qty-chip[aria-pressed="true"]{background:var(--ottone); color:#181008; border-color:var(--ottone)}
.modes{display:flex; gap:1px; margin:2rem 0 1.4rem; background:rgba(243,234,220,.2); border:1px solid rgba(243,234,220,.2)}
.modes button{
flex:1; background:var(--bg-b); border:none; cursor:pointer; padding:1rem .8rem;
color:rgba(243,234,220,.55); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.modes button[aria-pressed="true"]{background:var(--ottone); color:#181008}
.modes button:focus-visible{outline:2px solid var(--ottone); outline-offset:2px}
.calc-note{font-size:.9rem; color:rgba(243,234,220,.6); max-width:42ch; margin:0}
.calc-note b{color:var(--carta); font-weight:600}
.buy-forpeople{font-family:var(--body); font-size:.92rem; color:rgba(243,234,220,.82); margin:1.6rem 0 0; max-width:30rem}
.buy-forpeople[hidden]{display:none}
.buy-forpeople .bfp-lead{display:block; margin-bottom:.7rem; color:rgba(243,234,220,.7)}
.buy-forpeople .bfp-lead b{color:var(--ottone); font-weight:600}
.buy-forpeople ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.buy-forpeople li{display:flex; align-items:baseline; gap:.5rem; border-bottom:1px solid rgba(243,234,220,.1); padding-bottom:.5rem}
.buy-forpeople li:last-child{border-bottom:none}
.buy-forpeople li b{color:var(--ottone); font-weight:600; font-variant-numeric:tabular-nums; min-width:1.2ch}
.buy-forpeople li .cl{margin-left:auto; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:rgba(243,234,220,.45); white-space:nowrap}
.buy-forpeople + .cta-buy{margin-top:1.2rem}
.calc-out table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px}
.calc-out th{
text-align:left; font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
color:rgba(243,234,220,.45); padding:0 0 .7rem; border-bottom:1px solid rgba(243,234,220,.18);
}
.calc-out td{padding:1rem 0; border-bottom:1px solid rgba(243,234,220,.1)}
.calc-out td.n{text-align:right; white-space:nowrap}
.calc-out td.n em{font-style:normal; color:rgba(243,234,220,.45); font-size:12px; margin-left:.5rem}
.calc-out .lab{font-family:var(--body); font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.calc-out .lab i{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.7rem; vertical-align:middle}
.calc-out .lab .btl{display:block; margin:.25rem 0 0 1.7rem; font-size:11px; letter-spacing:.06em; color:rgba(243,234,220,.4)}
.calc-out tr.acqua{color:#BFD4DA}
.calc-out tr.tot td{border-bottom:none; padding-top:1.6rem}
.calc-out tr.tot .lab{color:var(--ottone); font-size:11px; letter-spacing:.2em}
.calc-out tr.tot .n{font-family:var(--display); font-size:2rem; font-weight:700}
.yield{margin-top:1.6rem; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,234,220,.4)}
/* ---------- AUDIO ---------- */
.soundbtn{
position:fixed; bottom:16px; right:16px; z-index:9;
background:rgba(10,14,19,.5); backdrop-filter:blur(8px);
border:1px solid rgba(243,234,220,.28); color:rgba(243,234,220,.75);
font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
padding:.6rem .85rem; cursor:pointer; display:flex; align-items:center; gap:.55rem;
}
.soundbtn:hover{border-color:var(--ottone); color:var(--carta)}
.soundbtn:focus-visible{outline:2px solid var(--ottone); outline-offset:2px}
.soundbtn i{width:7px; height:7px; border-radius:50%; background:rgba(243,234,220,.3); display:block}
.soundbtn[aria-pressed="true"] i{background:var(--ottone); box-shadow:0 0 8px var(--ottone)}
/* ---------- HOME ---------- */
.home-hero{padding:12vh 0 6vh}
.home-hero h1{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(3rem,10vw,7rem); line-height:.9; letter-spacing:-.02em; margin:.4rem 0}
.home-hero p{max-width:52ch; color:rgba(243,234,220,.72)}
@media (max-width:820px){
.calc-grid{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
.soundbtn{bottom:10px; right:10px}
.country{grid-template-columns:1.2rem 7rem 1fr 3rem; gap:.6rem; font-size:12px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.scrollcue i{animation:none}
.stream-wobble{animation:none !important}
}
/* "Accedi"/"I miei voti": distinto dagli altri link del menu (pill oro) */
.site-nav a.nav-auth{border:1px solid color-mix(in srgb, var(--ottone,#c9a24a) 70%, transparent);border-radius:999px;padding:.3em .95em;color:var(--ottone,#c9a24a)}
.site-nav a.nav-auth:hover{background:var(--ottone,#c9a24a);color:#11140c}