/* ==========================================================================
   Relees — design tokens & base
   ========================================================================== */

/* Font serviti dal sito stesso: nessuna richiesta a Google (privacy) e
   nessuna dipendenza esterna da consegnare alla proprietaria.
   Nohemi: file originali non modificati, come chiede la sua licenza.
   Pinyon Script: OFL, convertito in woff2. Licenze in assets/fonts/. */
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../assets/fonts/nohemi/Nohemi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url("../assets/fonts/pinyon-script/PinyonScript-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --cream:#EFEBE1;
  --ink:#1C1B18;
  --maroon:#6C171E;
  --maroon-2:#8A2028;
  --teal:#0D3D3A;

  --ink-84: rgba(28,27,24,.84);
  --ink-78: rgba(28,27,24,.78);
  --ink-72: rgba(28,27,24,.72);
  --ink-68: rgba(28,27,24,.68);
  --ink-56: rgba(28,27,24,.56);
  --ink-40: rgba(28,27,24,.4);
  --border: rgba(28,27,24,.22);
  --border-soft: rgba(28,27,24,.18);
  --border-strong: rgba(28,27,24,.26);

  --glass-light-bg: rgba(255,255,255,.2);
  --glass-light-border: rgba(255,255,255,.42);
  --glass-dark-bg: rgba(108,23,30,.1);
  --glass-dark-hover: rgba(108,23,30,.18);

  /* Il vetro è fatto di due cose: una luce che gli batte sul bordo alto e
     un'ombra ambientale sotto. Di giorno la luce è bianca su fondo chiaro;
     di notte deve restare luce, ma molto più tenue, altrimenti ogni pastiglia
     diventa un rettangolo luminoso. Erano valori scritti a mano in una
     ventina di punti: senza portarli qui il tema scuro sarebbe un rattoppo. */
  --vetro-luce: rgba(255,255,255,.95);
  --vetro-luce-2: rgba(255,255,255,.9);
  --vetro-velo: rgba(255,255,255,.34);
  --vetro-orlo: rgba(255,255,255,.45);
  --vetro-ombra: rgba(28,27,24,.05);
  --vetro-ombra-lunga: rgba(28,27,24,.18);
  --vetro-sotto: rgba(28,27,24,.05);

  /* Fondo della pagina: due estremi del lavaggio verticale */
  --fondo-alto:#EFEBE1;
  --fondo-medio:#F3F0E7;
  --fondo-basso:#FFFFFF;
  /* La fascia dietro al marchio quando arriva al centro */
  --fascia:214,207,192;
  /* Le montature 3D di fondo sono nere: di notte vanno ribaltate */
  --scena-filtro:none;
  --grana-forza:.022;
  --slot-fondo:#F5F2EA;
  --tratteggio:rgba(28,27,24,.04);

  /* Forme: tre gradini, non tre sistemi. Le strutture restano quasi vive
     (il carattere editoriale sta lì), le superfici flottanti si ammorbidiscono,
     i comandi piccoli sono pastiglie. Tondo pieno solo a ciò che è ottico. */
  --r-panel: 2px;      /* schede, riquadri, pannelli, mappa, campi */
  --r-float: 16px;     /* superfici sospese: barra prodotto, miniature */
  --r-chip: 999px;     /* comandi piccoli */
  --radius-pill: var(--r-chip);

  /* Movimento: un solo vocabolario di tempi e accelerazioni */
  --ease: cubic-bezier(.22,1,.28,1);        /* entrate: parte deciso, si posa */
  /* Curva che imita una molla poco smorzata: supera il bersaglio di un filo e
     rientra. È il ripiego in CSS per i movimenti brevi e non interrompibili
     (passaggio del puntatore, comparsa di un blocco); dove il bersaglio può
     cambiare a metà strada serve la molla vera di js/molla.js. */
  --ease-molla: cubic-bezier(.34,1.56,.64,1);
  --ease-ottico: cubic-bezier(.4,0,.2,1);   /* spostamenti: simmetrico, senza scatto */
  --t-svelto: 180ms;
  --t-base: 320ms;
  --t-lento: 620ms;

  --font: "Nohemi", ui-sans-serif, system-ui, sans-serif;
  /* la calligrafia: solo sulle ultime parole dei titoli, mai sul testo */
  --font-firma: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  /* Pinyon Script esiste solo in Regular. Il grassetto sintetico del browser
     allarga e impasta le lettere; un contorno dello stesso colore disegnato
     SOTTO il riempimento (paint-order) ispessisce invece ogni tratto in modo
     uniforme, come un pennino più largo. In em: cresce con il corpo. */
  --firma-peso: .034em;
  --logo-left: clamp(10px,2vw,28px);
  /* larghezza della colonna di sinistra e margine del contenuto: le foto a
     tutto schermo li usano per uscire dalla colonna fino ai bordi */
  --rail-w: clamp(112px,14vw,186px);
  --content-pad: clamp(16px,3vw,52px);
}

/* ==========================================================================
   Modalità notte
   ==========================================================================
   Non è un tema scuro generico: è la stessa tavolozza rovesciata. Il crema
   che di giorno è il fondo, di notte diventa il testo — così il marchio resta
   sé stesso invece di diventare grigio su nero. Il bordeaux e il verde
   vengono schiariti quel tanto che basta a reggere il contrasto su fondo
   scuro: gli stessi valori del giorno, su questo fondo, sarebbero illeggibili.

   E il vetro cambia natura: di giorno è una luce bianca sul bordo alto, di
   notte deve restare luce ma molto più tenue, altrimenti ogni pastiglia
   diventa un rettangolo acceso. */
[data-tema="notte"]{
  --schema: dark;

  /* un quasi nero neutro: il nero-bruno di prima (#17150F) di notte si
     leggeva marrone. Nessuna dominante calda nel fondo. */
  --cream:#0E0E0F;
  --ink:#EFEBE1;
  --maroon:#D2949A;
  --maroon-2:#E3A9AE;
  --teal:#84B8B1;

  --ink-84: rgba(239,235,225,.82);
  --ink-78: rgba(239,235,225,.74);
  --ink-72: rgba(239,235,225,.66);
  --ink-68: rgba(239,235,225,.60);
  --ink-56: rgba(239,235,225,.48);
  --ink-40: rgba(239,235,225,.30);
  --border: rgba(239,235,225,.20);
  --border-soft: rgba(239,235,225,.14);
  --border-strong: rgba(239,235,225,.26);

  --glass-light-bg: rgba(255,255,255,.055);
  --glass-light-border: rgba(255,255,255,.13);
  --glass-dark-bg: rgba(210,148,154,.12);
  --glass-dark-hover: rgba(210,148,154,.2);

  --vetro-luce: rgba(255,255,255,.14);
  --vetro-luce-2: rgba(255,255,255,.10);
  --vetro-velo: rgba(255,255,255,.07);
  --vetro-orlo: rgba(255,255,255,.14);
  --vetro-ombra: rgba(0,0,0,.34);
  --vetro-ombra-lunga: rgba(0,0,0,.5);
  --vetro-sotto: rgba(0,0,0,.34);

  /* Di notte il fondo resta scuro dall'alto al fondo della pagina. Il
     lavaggio di prima schiariva scendendo fino a #262219, e in fondo la pagina
     sembrava velata di bianco: ora la differenza fra i tre gradini è di pochi
     punti, si sente ma non si vede. */
  --fondo-alto:#0E0E0F;
  --fondo-medio:#101011;
  --fondo-basso:#131314;
  --fascia:14,14,15;

  /* le montature 3D sono nere: di notte si ribaltano in chiaro, ma abbassate
     molto — a piena luce erano chiazze bianche sfocate sul fondo scuro */
  --scena-filtro:invert(1) brightness(.42);
  --grana-forza:.022;
  --slot-fondo:rgba(255,255,255,.03);
  --tratteggio:rgba(255,255,255,.05);
}

/* Registrate come lunghezze perché js/main.js le legge con getComputedStyle
   per dimensionare la lente dell'header: senza registrazione tornerebbe la
   stringa "clamp(...)" invece del valore risolto, e il calcolo cadrebbe. */
@property --lens-pad-x{syntax:'<length>';inherits:true;initial-value:9px}
@property --lens-pad-y{syntax:'<length>';inherits:true;initial-value:6px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--fondo-alto);color-scheme:var(--schema,light)}
body{
  background:transparent;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Fondo: crema in alto, bianco in basso. Il livello è fisso e si sposta di
   meno della pagina (e con inerzia), così insegue lo scorrimento in ritardo
   e il crema non esce mai del tutto dallo schermo.

   Il ritardo lo fa il JS, non una transizione CSS: aggiornare il valore ad
   ogni fotogramma mentre una transizione di 0,9s è in corso significa
   farla ripartire sessanta volte al secondo, ed è uno dei motivi per cui lo
   scorrimento risultava a scatti. */
.bg-wash{
  position:fixed;left:0;right:0;top:-25vh;height:150vh;z-index:-2;pointer-events:none;
  /* Il crema tiene quasi due terzi della lastra e il bianco arriva solo
     all'ultimo tratto: prima la banda crema finiva al 36% e si esauriva nel
     primo terzo di schermata, così il bianco dominava già dalla prima vista.
     Con questi fermi il crema resta la tinta prevalente a qualunque altezza
     della pagina, e il bianco è una schiarita che si guadagna scendendo. */
  background:linear-gradient(180deg,
    var(--fondo-alto) 0%,var(--fondo-alto) 62%,var(--fondo-medio) 76%,
    color-mix(in srgb, var(--fondo-medio) 40%, var(--fondo-basso)) 90%, var(--fondo-basso) 100%);
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* Scena di fondo: cinque montature diverse del set 3D che attraversano la
   pagina mentre si scorre. Stanno a z -1, cioè sopra al fondo e sotto a tutto
   il contenuto: passano dietro ai pannelli come oggetti in profondità di
   campo, e non possono mai disturbare la lettura.
   Posizione, rotazione e opacità le detta lo scroll (js/background.js). */
.scena-occhiali{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:layout paint;filter:var(--scena-filtro)}
.occhiale{
  position:absolute;left:0;top:0;height:auto;
  opacity:0;
  /* misura e posizione le scrive il JS in pixel, in un solo transform per
     fotogramma: le variabili CSS in vw/vh costringevano il browser a
     ririsolvere unità e a ricalcolare lo stile ad ogni frame */
  transform:translate3d(-9999px,-9999px,0);
  visibility:hidden;
  /* solo transform: mettere anche opacity in will-change costringerebbe a
     tenere vivo un livello di composizione per ognuna, e sono immagini grandi */
  will-change:transform;
}
/* Cinque montature diverse del set, ognuna a una profondità: la più vicina è
   la più grande e la più sfocata, la più lontana la più piccola e nitida —
   è così che si comporta un obiettivo, ed è ciò che dà spessore alla scena.
   La sfocatura è già dentro le immagini: un filtro CSS vivo su livelli
   grandi che si muovono costa ad ogni fotogramma e, su un livello fisso a z
   negativo, arriva a rompere la composizione della pagina. */

@media (prefers-reduced-motion:reduce){
  .scena-occhiali{display:none}
}

/* Quando il marchio arriva al centro si trova sopra al contenuto: questa
   fascia gli dà un fondo suo. Compare con lui (--logo-p) e sfuma verso il
   basso, così non si legge come una barra incollata. */
.top-scrim{
  /* sotto la colonna di sinistra (.rail, z 20, che è anche il contesto del
     marchio): più in alto coprirebbe proprio la scritta che deve proteggere */
  position:fixed;left:0;right:0;top:0;height:clamp(64px,9vh,104px);z-index:15;pointer-events:none;
  opacity:var(--logo-p,0);
  /* Niente box-shadow in fondo: era una riga netta di un pixel, e si vedeva.
     E niente rampa lineare: l'occhio legge il punto in cui l'alfa smette di
     scendere come un bordo. Questi fermi approssimano una curva morbida —
     scende piano all'inizio, in fretta a metà, e si spegne senza spigolo. */
  background:linear-gradient(180deg,
    rgba(var(--fascia),.98) 0%,
    rgba(var(--fascia),.95) 18%,
    rgba(var(--fascia),.86) 34%,
    rgba(var(--fascia),.70) 50%,
    rgba(var(--fascia),.48) 64%,
    rgba(var(--fascia),.26) 78%,
    rgba(var(--fascia),.09) 90%,
    rgba(var(--fascia),0) 100%);
}
@media (max-width:860px){ .top-scrim{display:none} }

/* Grana. Su una tinta piatta e chiara come questa il gradiente del fondo
   produce bande visibili, e le grandi campiture crema sembrano digitali: due
   punti percentuali di rumore monocromatico le rompono e danno alla pagina la
   materia di una stampa. Deve restare sotto la soglia di consapevolezza — se
   si nota, è troppa.

   È un'immagine SVG generata una volta e ripetuta: nessun lavoro per
   fotogramma, a differenza di una grana animata. Sta sopra al contenuto ma
   sotto ai pannelli sospesi, e non intercetta il puntatore. */
.grana{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grana-forza);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media (prefers-reduced-motion:reduce){ .grana{opacity:calc(var(--grana-forza) * .64)} }

a{color:inherit;text-decoration:none}
a:hover{color:var(--maroon)}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
::selection{background:var(--maroon);color:var(--cream)}

/* ==========================================================================
   Tipografia editoriale
   ==========================================================================
   Due voci sole. Nohemi porta tutto: i titoli grandi in peso regolare con
   la spaziatura stretta di una testata, i testi in light con la misura di
   una colonna di rivista, le etichette in medium maiuscolo spaziato.
   Pinyon Script entra solo alla fine dei titoli, su una o due parole: è la
   firma a mano in fondo alla riga composta, e proprio perché è rara si
   nota. Mai nel testo corrente, mai in un'etichetta.

   Il corsivo calligrafico ha un occhio piccolo (x-height 0,37 contro lo 0,55
   di Nohemi): a parità di corpo sembrerebbe una nota a margine. Si porta a
   1,4 em così le minuscole delle due voci si guardano alla stessa altezza. */
.kicker{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);margin-bottom:14px}
.eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-68)}
.h2{font-size:clamp(30px,4.1vw,60px);line-height:1.02;font-weight:400;letter-spacing:-.032em;text-wrap:balance}
.lede{font-size:clamp(14.5px,1.08vw,16px);font-weight:300;line-height:1.72;color:var(--ink-84)}
.lede a{border-bottom:1px solid color-mix(in srgb, var(--maroon) 50%, transparent)}

.firma{
  font-family:var(--font-firma);font-style:normal;font-weight:400;
  -webkit-text-stroke:var(--firma-peso) currentColor;paint-order:stroke fill;
  font-synthesis:none;
  font-size:1.4em;line-height:.72;letter-spacing:0;text-transform:none;
  color:var(--maroon);
  /* le code delle lettere escono dal disegno a destra: senza questo respiro
     la maschera della rivelazione le taglierebbe */
  padding-inline:.02em .16em;
  display:inline-block;
}

/* Numerazione delle sezioni, come i capitoli di una rivista. È un contatore
   CSS, non testo: se una sezione si sposta, i numeri si riallineano da soli. */
.content{counter-reset:capitolo}
#collezione,#catalogo,#chi-siamo,#store,#appuntamento{counter-increment:capitolo}
.content .section-head .kicker::before,.content .collezione-intro .kicker::before,.chi-siamo-head .kicker::before,
.store-intro .kicker::before,.appuntamento-intro .kicker::before{
  content:counter(capitolo, decimal-leading-zero);
  display:inline-block;margin-right:1.1em;padding-right:1.1em;
  color:var(--ink-56);border-right:1px solid var(--border-strong);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heartPop{0%{transform:scale(1)}42%{transform:scale(1.24)}100%{transform:scale(1)}}
@keyframes landIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Righe dei titoli spezzate da SplitText (js/motion.js). La maschera taglia
   ciò che sta fuori dalla riga, ma la calligrafia esce dalla riga per
   natura — occhielli sopra, code sotto, svolazzi a destra: il margine
   negativo compensato dal padding allarga la finestra senza spostare nulla. */
.riga-mask{padding:.2em .3em .34em 0;margin:-.2em -.3em -.34em 0}

/* Tastiera: lo stato di focus deve restare visibile ovunque */
/* Visibile solo ai lettori di schermo: serve alle intestazioni e alle
   etichette che la grafica lascia mute ma che la struttura del documento
   deve comunque dichiarare. Non usa display:none, che le toglierebbe anche
   agli screen reader. */
/* Il passaggio fra i due temi. La transizione è accesa solo mentre avviene
   il cambio (classe messa e tolta dal JS): tenerla sempre attiva farebbe
   animare ogni variazione di colore della pagina, compresi i passaggi del
   puntatore, e tutto sembrerebbe molliccio. */
.in-transito, .in-transito *:not(.tt-cursore){
  transition:background-color var(--t-lento) var(--ease-ottico),
             color var(--t-lento) var(--ease-ottico),
             border-color var(--t-lento) var(--ease-ottico),
             box-shadow var(--t-lento) var(--ease-ottico),
             fill var(--t-lento) var(--ease-ottico) !important;
}
@media (prefers-reduced-motion:reduce){
  .in-transito, .in-transito *{transition:none !important}
}

.solo-sr{
  position:absolute;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;
}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--maroon);outline-offset:3px;border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cat-card,.heart-btn.is-pop,.cat-wrap.is-landing{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  transition:background .32s var(--ease),box-shadow .32s var(--ease),transform .42s var(--ease-molla);
  backdrop-filter:blur(12px) saturate(190%) brightness(1.04);-webkit-backdrop-filter:blur(12px) saturate(190%) brightness(1.04);
}
.btn-glass{
  color:var(--ink);
  background:var(--glass-light-bg);
  border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-ombra);
}
.btn-glass:hover{color:var(--maroon)}
/* Il comando principale è la stessa lastra dei comandi in alto a destra:
   vetro chiaro, lettere scure, il bordeaux solo al passaggio. La lastra
   velata di bordeaux di prima si leggeva come un rosa sporco. */
.btn-solid{
  color:var(--ink);
  background:var(--glass-light-bg);
  border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 14px 32px -20px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-sotto);
}
.btn-solid:hover{color:var(--maroon)}
.btn-solid[disabled]{cursor:not-allowed;background:var(--glass-light-bg);color:var(--ink-68);border-color:var(--glass-light-border)}
.btn-full{width:100%}
.btn-icon{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-78);background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-ombra);
}
.btn-icon:hover{color:var(--maroon)}
.link-underline{border-bottom:1px solid var(--maroon);padding-bottom:3px;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

/* ==========================================================================
   Vetro — nessuna sfumatura di colore: la lastra è una tinta translucida,
   a dirla vetro sono la sfocatura dietro e il bordo, con il filo di luce in
   alto, l'ombra sotto e l'aberrazione cromatica ai lati come su una lente.
   ========================================================================== */
.btn-glass,.btn-solid,.btn-icon,.pill,.pill-nome,.rail-lens,.heart-btn{position:relative;isolation:isolate}
.btn-glass::after,.btn-solid::after,.btn-icon::after,.pill::after,
.pill-nome::after,.rail-lens::after,.heart-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:
    inset 0 0 0 .5px var(--vetro-orlo),
    inset 1px 0 2px -1px rgba(236,170,124,.26),
    inset -1px 0 2px -1px rgba(124,170,236,.26),
    inset 0 -2px 3px -2px rgba(28,27,24,.09);
}
/* i pulsanti singoli si ingrandiscono al passaggio, come una voce di dock */
.btn:hover{transform:translateY(-1px) scale(1.05)}
.btn-icon:hover{transform:scale(1.1)}
.heart-btn:hover{transform:scale(1.12)}

/* Nessun bagliore sulla parola RELEES al cambio di tema: tolto su richiesta. */

/* Il passaggio di tema che apre il nuovo da dietro il comando (js/tema.js).
   Il browser fotografa la pagina com'era (old) e com'è diventata (new): la
   nuova si mostra dentro un cerchio con il bordo sfumato, il cui raggio
   (--vt-r) lo porta GSAP. Niente dissolvenza incrociata: la vecchia resta
   ferma sotto finché il cerchio non l'ha coperta tutta. vt-tieni è un'animazione
   che non fa nulla: tiene viva la transizione per la durata del raggio. */
@keyframes vt-tieni{from{opacity:1}to{opacity:1}}
:root.vt-tema::view-transition-group(root){animation-duration:1.05s}
:root.vt-tema::view-transition-old(root){animation:vt-tieni 1.05s linear both;mix-blend-mode:normal}
:root.vt-tema::view-transition-new(root){
  animation:vt-tieni 1.05s linear both;mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(circle at var(--vt-x,100%) var(--vt-y,0px),#000 calc(var(--vt-r,0px) - var(--vt-sfumo,0px)),transparent var(--vt-r,0px));
  mask-image:radial-gradient(circle at var(--vt-x,100%) var(--vt-y,0px),#000 calc(var(--vt-r,0px) - var(--vt-sfumo,0px)),transparent var(--vt-r,0px));
}

/* ==========================================================================
   Sole / Vista — il comando del tema
   ==========================================================================
   Non un interruttore giorno/notte generico ma la coppia su cui è già
   costruito il catalogo. Le icone sono le due montature vere: lenti piene
   per il sole, lenti vuote per la vista — la stessa differenza che si vede
   nell'apertura quando si cambia tema. Niente etichetta scritta: due paia
   di occhiali si spiegano da soli, e il nome resta nell'aria accessibile.

   Il vetro è composto, non un semplice sfondo sfocato: sfocatura del retro,
   velo traslucido, luce sul bordo alto, ombra ambientale sotto, e sul
   cursore un riflesso speculare che occupa solo la metà superiore. È quello
   che distingue una lastra di vetro da un rettangolo grigio. */
.tema-toggle{
  position:fixed;top:clamp(15px,2.3vh,23px);right:var(--logo-left);z-index:60;
  display:inline-flex;align-items:center;gap:2px;
  padding:4px;border-radius:var(--r-chip);
  background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),
             0 14px 32px -20px var(--vetro-ombra-lunga),
             inset 0 1px 1px var(--vetro-luce),
             inset 0 -1px 1px var(--vetro-sotto);
  backdrop-filter:blur(16px) saturate(190%);-webkit-backdrop-filter:blur(16px) saturate(190%);
  transition:background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             transform var(--t-svelto) var(--ease-ottico);
}
/* Il gruppo in alto a destra: wishlist e Sole/Vista. È il gruppo a essere
   fisso, così le due pastiglie restano sempre accostate e allineate. */
.rail-azioni{
  position:fixed;top:clamp(15px,2.3vh,23px);right:var(--logo-left);z-index:60;
  display:flex;align-items:center;gap:8px;
}
.rail-azioni .tema-toggle{position:static;top:auto;right:auto}
/* stessa lastra e stessa altezza (36px) del comando accanto */
.wish-pill{
  height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 16px;
  border-radius:var(--r-chip);
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 14px 32px -20px var(--vetro-ombra-lunga),
             inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-sotto);
  backdrop-filter:blur(16px) saturate(190%);-webkit-backdrop-filter:blur(16px) saturate(190%);
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-svelto) var(--ease-ottico);
}
.wish-pill #wishCountRail{color:var(--maroon);font-variant-numeric:tabular-nums}
.wish-pill:hover{color:var(--maroon)}
/* IT / EN — testo, non una lastra. La lingua si sceglie una volta: non deve
   pesare quanto Wishlist e Sole/Vista, che si usano di continuo. Stesso corpo
   e spaziatura delle voci della colonna; la lingua attiva è in inchiostro
   pieno e sottolineata (la differenza non è affidata al solo colore), l'altra
   è attenuata e diventa bordeaux al passaggio. */
.lingua-testo{
  display:inline-flex;align-items:center;gap:.55em;flex:none;
  font-size:var(--nav-size,9.5px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.rl-opt{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  position:relative;color:var(--ink-56);padding:8px 3px;margin:-8px -3px;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;
  transition:color var(--t-base) var(--ease),text-decoration-color var(--t-base) var(--ease);
}
.rl-opt:hover{color:var(--maroon)}
.rl-opt.attiva{color:var(--ink);text-decoration-color:currentColor;cursor:default}
.rl-sep{color:var(--ink-40);font-weight:400}
.rail-lingua{align-self:flex-start}
html.piede-su-foto .rail-lingua .rl-opt{color:rgba(242,239,233,.62);text-shadow:0 1px 12px rgba(0,0,0,.4)}
html.piede-su-foto .rail-lingua .rl-opt.attiva{color:#F2EFE9}
html.piede-su-foto .rail-lingua .rl-sep{color:rgba(242,239,233,.4)}
.wish-pill:active{transform:scale(.965)}
.tema-toggle:hover{background:var(--vetro-velo)}
/* la pressione affonda appena: è il segnale tattile che manca a un bottone
   che non si muove */
.tema-toggle:active{transform:scale(.965)}
/* nel catalogo vive dentro la barra, quindi niente posizione fissa */
.tema-toggle--cat{position:static;top:auto;right:auto}

.tt-opt{
  position:relative;z-index:1;
  width:38px;height:26px;display:grid;place-items:center;
  color:var(--ink-56);
  transition:color var(--t-base) var(--ease),transform var(--t-base) var(--ease-molla);
}
.tt-opt svg{width:21px;height:9px;overflow:visible}
/* l'icona attiva prende colore e cresce di un soffio: la scala fa più della
   tinta a dire quale delle due è accesa */
.tt-opt.attiva{color:var(--ink);transform:scale(1.06)}

/* Il cursore di vetro. Scorre dietro l'icona attiva con la curva a molla,
   quindi supera di un filo e rientra invece di frenare. */
.tt-cursore{
  position:absolute;left:4px;top:4px;width:38px;height:26px;border-radius:var(--r-chip);
  background:var(--vetro-velo);
  box-shadow:0 0 0 1px var(--vetro-orlo),
             0 3px 8px -3px var(--vetro-ombra-lunga),
             inset 0 1px 1px var(--vetro-luce);
  transition:transform var(--t-lento) var(--ease-molla);
}
/* il riflesso: solo sulla metà alta, come la luce su una lente curva */
.tt-cursore::after{
  content:"";position:absolute;inset:1px 1px 45% 1px;border-radius:inherit;
  background:linear-gradient(180deg,var(--vetro-luce),transparent);
  opacity:.5;pointer-events:none;
}
[data-tema="notte"] .tt-cursore{transform:translateX(40px)}
@media (prefers-reduced-motion:reduce){
  .tt-cursore,.tt-opt{transition:none}
}
@media (max-width:860px){
  /* Nella barra compressa non è più fisso: rientra in flusso accanto al
     marchio, come fa la scritta RELEES, così non copre nulla. Il riquadro
     cresce fino ai 44px di area toccabile. */
  /* tre comandi più il marchio devono stare su una riga a 375px: le lastre
     restano alte 44px (area toccabile), si stringono solo i margini interni */
  .rail-azioni{position:static;order:1;margin-left:auto;gap:5px}
  .wish-pill{height:44px;padding:0 11px;gap:5px;letter-spacing:.12em}
  .tema-toggle{position:static;top:auto;right:auto;padding:0 5px;height:44px}
  .tt-opt{width:30px;height:34px}
  .tt-cursore{left:5px;top:4px;width:30px;height:34px}
  [data-tema="notte"] .tt-cursore{transform:translateX(32px)}
}

/* ==========================================================================
   Layout — home page rail + content
   ========================================================================== */
.layout{
  /* rete di sicurezza: nessun elemento di scena può generare scorrimento
     laterale. "clip" invece di "hidden" perché non rompe il rail appiccicato */
  overflow-x:clip;
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  position:relative;
}
.rail{
  /* Una sola scala comanda l'header: dimensione del testo, passo fra le voci e
     respiro della lente. Valori indipendenti creerebbero micro-disallineamenti
     proprio dove l'occhio li nota di più. */
  /* Le misure sono clamp() diretti, non un fattore moltiplicativo: clamp()
     non accetta un numero puro insieme a una lunghezza, quindi una scala
     come clamp(.85,.62vw,1) è dichiarazione invalida — il calc che la usava
     cadeva e le voci tornavano ai 16px ereditati. Da lì l'header gigante. */
  --nav-size:clamp(8.6px,.72vw,10.4px);
  /* il passo fra le voci non dipende dal corpo del testo ma dall'altezza
     disponibile: il rail è una colonna, deve respirare in verticale. Resta
     però contenuto: la navigazione è un servizio, non la voce del sito */
  --nav-gap:clamp(15px,2.7vh,28px);
  --lens-pad-x:clamp(8px,.62vw,10px);
  --lens-pad-y:clamp(5.5px,.46vw,7px);

  grid-column:1;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  padding:clamp(18px,3vh,30px) 0 clamp(18px,3vh,30px) clamp(10px,2vw,28px);
  z-index:20;
}
/* Su desktop il marchio lascia il rail. Parte allineato a sinistra e scivola
   al centro seguendo lo scroll: --logo-p (0->1) lo muove, e la seconda
   traslazione toglie metà della sua larghezza perché arrivi centrato esatto. */
.rail-logo{
  /* centrata in verticale sul comando Sole/Vista (alto 36px, con lo stesso
     margine superiore): il marchio e il comando stanno sulla stessa riga */
  --logo-h:clamp(34px,2.9vw,44px);
  position:fixed;top:calc(clamp(15px,2.3vh,23px) + 18px - var(--logo-h) / 2);left:var(--logo-left);z-index:60;
  flex:none;line-height:0;color:var(--ink);
  transform:translateX(calc(var(--logo-p,0) * (50vw - var(--logo-left))))
            translateX(calc(var(--logo-p,0) * -50%));
  will-change:transform;
}
.rail-logo.is-smearing{filter:url(#scia-x)}
/* La firma. È un tratto a mano sottile: alla misura dell'header il suo
   spessore reale è mezzo pixel, e da solo si leggerebbe come un filo che
   sparisce. Un contorno dello stesso colore, in pixel di schermo e non in
   unità del disegno (non-scaling-stroke), gli dà un peso minimo costante a
   qualunque dimensione senza chiudere gli occhielli delle lettere. */
.logo-firma{display:block;height:var(--logo-h,34px);width:auto;overflow:visible}
.logo-firma path{stroke:currentColor;stroke-width:.55px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rail-logo:hover{color:var(--maroon)}
.rail-logo{transition:color var(--t-base) var(--ease)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.rail-nav{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--nav-gap);flex:none;margin-block:auto}
.rail-nav a{
  position:relative;z-index:1;align-self:flex-start;display:inline-block;
  font-size:var(--nav-size);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-72);transform-origin:left center;
  transition:color .3s ease;
}
/* la scala dell'attiva la somma il dock (js/dock.js): qui solo il colore,
   altrimenti le due trasformazioni si sovrascriverebbero a vicenda */
.rail-nav a.active{color:var(--maroon);font-weight:600}
.rail-lens{
  position:absolute;left:0;top:0;border-radius:var(--radius-pill);opacity:0;width:0;height:0;
  background:var(--vetro-velo);
  border:1px solid var(--vetro-orlo);
  box-shadow:0 1px 2px rgba(28,27,24,.04),0 10px 26px -14px rgba(28,27,24,.16),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-ombra),0 0 0 1px rgba(108,23,30,.2);
  backdrop-filter:blur(10px) saturate(190%) brightness(1.05);-webkit-backdrop-filter:blur(10px) saturate(190%) brightness(1.05);
  pointer-events:none;z-index:0;
  /* posizione e misura le porta una molla (js/molla.js): qui transiziona solo
     la comparsa. Con una transizione anche su transform/width le due leggi di
     moto si sovrapporrebbero e la lente arriverebbe due volte */
  transition:opacity var(--t-base) ease;
}
.rail-foot{display:flex;flex-direction:column;gap:11px;align-items:flex-start;flex:none}
.rail-foot button{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-align:left}
.rail-foot button:hover{color:var(--maroon)}
.rail-tag{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-68)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}

.content{grid-column:2;min-width:0;padding:0 var(--content-pad)}

/* Niente più attenuazione delle sezioni non attive. Faceva animare opacità e
   scala di blocchi grandi quanto lo schermo proprio mentre si scorreva: il
   browser doveva comporre l'intera sezione — testi, pannelli, immagini — in un
   livello e rifonderla ad ogni fotogramma per sei decimi di secondo, ed è da lì
   che veniva la maggior parte degli scatti. Quale sezione si stia leggendo lo
   dice già la colonna di sinistra, col bordeaux e la lente. */
.section{padding:clamp(64px,10.5vh,132px) 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;
  padding-bottom:clamp(18px,3vh,30px);border-bottom:1px solid var(--border-strong);
}
.section-head .h2{max-width:14ch}
/* il titolo del catalogo cambia con il filtro ("Catalogo Vista · 62 modelli"): gli serve la riga intera */
.cat-intro .section-head .h2{max-width:none}
.section-head .lede{max-width:30em}

/* Mobile: collapse the rail into a top bar */
@media (max-width:860px){
  .layout{display:block}
  .rail{
    position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px;padding:14px 16px;background:color-mix(in srgb, var(--fondo-alto) 66%, transparent);
    border-bottom:1px solid var(--border);backdrop-filter:blur(10px);z-index:40;
  }
  .rail-logo{position:static;transform:none}
  .logo-firma{height:28px}
  /* le voci e, in fondo alla loro riga, IT / EN: la voce di menu stringe
     quanto basta perché la lingua le stia accanto */
  .rail-nav{flex-direction:row;flex-wrap:wrap;gap:14px;order:3;flex:1 1 calc(100% - 84px);min-width:0;padding-top:10px;margin-block:0}
  .rail-lingua{order:4;align-self:flex-end;padding:10px 0 0}
  .rail-lingua .rl-opt{padding:14px 6px;margin:-14px -6px}
  .rail-lens{display:none}
  .rail-foot{flex-direction:row;align-items:center;gap:12px;min-width:0}
  /* con la firma, più larga della vecchia scritta, la prima riga della barra
     non conteneva più tutto e il comando Sole/Vista andava a capo; "Solo
     ottici" ripete ciò che l'apertura già dice, e su telefono si toglie */
  .rail-tag{display:none}
  .content{padding:0 16px}
  /* La barra è appiccicata in alto: senza questo margine di arrivo, saltando
     a una sezione dalla navigazione il suo titolo finisce sotto la barra e
     non si vede. Vale anche per lo scroll fluido degli ancoraggi. */
  .section,.hero,.piede{scroll-margin-top:96px}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:clamp(52px,7vh,68px) 0 clamp(18px,3vh,30px)}
.hero-stage{
  --frame-w:min(72%,700px);
  flex:1 1 0;min-height:220px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ghost-word{
  font-size:clamp(44px,10vw,148px);font-weight:700;letter-spacing:-.02em;line-height:1;
  text-transform:uppercase;color:var(--ink-40);white-space:nowrap;user-select:none;
}
.ghost-layer{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;
}
/* La sfocatura è in em, cioè proporzionale al corpo della parola. Era 6px
   fissi: andava bene su una parola da 100px (6% del corpo) ma sulle lettere
   da 250px di RELEES valeva il 2%, e la scritta sembrava solo un grigio dai
   bordi molli invece che fuori fuoco. Sta sulla parola e non sul contenitore
   perché è lì che "em" vale il corpo vero delle lettere. */
.ghost-layer .ghost-word{filter:blur(.05em)}

/* Velo fuori fuoco: copre tutta la larghezza della finestra (niente bordi visibili)
   e si dissolve scendendo, così la pagina torna a fuoco verso il basso. */
.focus-veil{
  /* scende sotto l'apertura meno del respiro della sezione successiva:
     arrivava a 42vh e sfocava il titolo della collezione */
  position:absolute;top:0;bottom:calc(-1 * clamp(56px,9vh,120px));z-index:2;pointer-events:none;
  /* deve arrivare al bordo sinistro della finestra: stessa misura della
     colonna del rail, che nel frattempo si è ristretta */
  left:calc(-1 * (clamp(112px,14vw,186px) + clamp(16px,3vw,52px)));
  right:calc(-1 * clamp(16px,3vw,52px));
  backdrop-filter:blur(10px) saturate(104%);-webkit-backdrop-filter:blur(10px) saturate(104%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.22) 90%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.22) 90%,rgba(0,0,0,0) 100%);
}

/* Copie nitide della parola, ritagliate sulle aperture delle lenti della montatura.
   Il box ha la stessa geometria dell'immagine, quindi i ritagli restano allineati a ogni dimensione. */
.ghost-frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--frame-w);aspect-ratio:860/295;z-index:4;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
/* Leggero ingrandimento: è quello che farebbe una lente con ciò che sta dietro. */
/* L'ingrandimento della lente lo imposta il JS, con il centro sulla lente e
   non sulla parola (vedi fitGhostWord): centrato sulla parola spostava le
   lettere nitide di 15px rispetto a quelle sfocate intorno. */
.ghost-frame .ghost-word{color:var(--ink-56);transform-origin:50% 50%}
/* di notte la parola dietro la montatura è una presenza, non una luce: i
   valori del giorno, ribaltati in chiaro, facevano una chiazza grigia */
[data-tema="notte"] .ghost-layer .ghost-word{color:rgba(239,235,225,.16)}
[data-tema="notte"] .ghost-frame .ghost-word{color:rgba(239,235,225,.30)}
.ghost-frame.lens-l{clip-path:inset(14.5% 54.6% 8.4% 7.2%)}
.ghost-frame.lens-r{clip-path:inset(14.5% 7.4% 8.4% 53.5%)}
.hero-frame-img{position:relative;z-index:5;flex:none;width:var(--frame-w);height:auto}
/* Di notte la montatura è nera su fondo quasi nero e si perderebbe: un alone
   tenue tutt'intorno le ridà il bordo, come una luce radente da dietro. */
[data-tema="notte"] .hero-frame-img{
  filter:drop-shadow(0 0 22px rgba(239,235,225,.07)) drop-shadow(0 0 2px rgba(239,235,225,.10));
}
/* La versione con le lenti scure, sovrapposta e in dissolvenza.
   La correzione geometrica non è un vezzo: i due scatti hanno il contenuto
   sfalsato dell'1,8% in verticale, e senza rimetterli in registro durante la
   dissolvenza si vedrebbe un doppio bordo di tre pixel sulla montatura.
   Si ferma a 0,9 di opacità: il residuo lascia intravedere la parola dietro,
   che è ciò che fa una lente scura vera invece di una toppa nera. */
.hero-frame-sole{
  position:absolute;left:50%;top:50%;z-index:5;
  transform:translate(-50%,-50%) translate(.09%,1.46%) scale(.9973,.9933);
  opacity:0;
  /* Non solo opacità: la lente scura entra anche con un soffio di scala e di
     contrasto, come un vetro fotocromatico che reagisce alla luce invece di
     comparire. La curva è quella delle entrate, non simmetrica: parte
     decisa e si posa. */
  transition:opacity var(--t-lento) var(--ease),
             transform var(--t-lento) var(--ease),
             filter var(--t-lento) var(--ease);
  filter:contrast(.94);
  will-change:opacity,transform;
}
[data-tema="notte"] .hero-frame-sole{opacity:0}
[data-tema="giorno"] .hero-frame-sole,
html:not([data-tema="notte"]) .hero-frame-sole{
  opacity:.9;
  transform:translate(-50%,-50%) translate(.09%,1.46%) scale(1.0003,.9963);
  filter:contrast(1);
}
/* Il testo dell'apertura, composto sul riferimento editoriale: in alto a
   sinistra una riga in maiuscolo molto spaziato, in basso a sinistra le due
   azioni, in basso a destra un'etichetta gemella della prima. Le due
   etichette hanno lo stesso filo corto sotto: è quello che le lega come
   coppia agli angoli opposti, invece di sembrare due scritte sparse.

   Stanno sopra il velo di sfocatura (z-index 2), altrimenti il velo se le
   mangia insieme allo sfondo. */
.hero-etichetta{
  position:relative;z-index:6;flex:none;
  font-size:clamp(10px,.8vw,12px);font-weight:400;line-height:2.15;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-84);
}
.hero-etichetta::after{
  content:"";display:block;width:34px;height:1px;margin-top:12px;
  background:currentColor;opacity:.55;
}
/* Il motto in alto a sinistra è stato tolto: la montatura sta al centro
   esatto della finestra. La scena copre tutta l'apertura e il fondo (azioni ed
   etichetta) le sta sopra, ancorato in basso: prima la scena era lo spazio
   rimasto fra motto e fondo, e il suo centro cadeva sopra la metà. */
@media (min-width:861px){
  .hero-stage{position:absolute;inset:0}
  .hero-piede{margin-top:auto}
}
.hero-piede{
  position:relative;z-index:6;flex:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
}
.hero-azioni{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);flex-wrap:wrap}
/* la principale un gradino più presente dei comandi normali: è la prima
   azione del sito, ma resta vetro con il colore nelle lettere */
.hero-azioni .btn{padding:16px 30px;font-size:10px;letter-spacing:.2em}
/* nelle etichette d'angolo la firma è la sola riga non spaziata: a 12px di
   corpo il corsivo va portato più su perché si legga come una firma */
.hero-etichetta .firma{font-size:2.1em;line-height:.6;color:var(--maroon)}
.hero-azioni .link-underline{color:var(--ink)}
.hero-azioni .link-underline:hover{color:var(--maroon)}
.swatches{display:flex;gap:9px;align-items:center}
.swatch{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px var(--border)}
/* colore non ancora definito: un campione vuoto tratteggiato, mai una tinta
   inventata. Quando arrivano i colori veri basta dare lo sfondo */
.swatch.da-definire{background:none;box-shadow:none;border:1px dashed currentColor;opacity:.55}

/* Adattamenti mobili dell'apertura.

   Stavano nel blocco mobile in cima al foglio, prima delle regole di base
   dell'apertura: a parità di specificità vince l'ultima, quindi le regole di
   base le sovrascrivevano tutte e per mesi non ne ha applicata nemmeno una —
   la montatura restava al 72% invece che al 90%, il velo non arrivava ai
   bordi e il padding superiore non si riduceva. Qui, dopo le regole di base,
   funzionano. */
@media (max-width:860px){
  .hero{padding-top:clamp(24px,4vh,40px)}
  /* Su telefono l'etichetta d'angolo andava a capo sotto le azioni e
     spingeva il fondo dell'apertura oltre la prima schermata. È l'elemento
     più decorativo dei tre, e la collezione arriva subito sotto: si toglie.
     Le due azioni si stringono quanto basta per stare su una riga. */
  .hero-etichetta{display:none}
  /* Su telefono il rail appiccicato occupa circa 150px sopra l'apertura:
     con l'apertura alta quanto tutta la finestra, il fondo finiva sempre
     fuori dalla prima schermata. Qui l'altezza la dà la scena, proporzionata
     alla finestra ma lasciando spazio al rail. */
  .hero{min-height:0}
  .hero-stage{flex:none;height:clamp(230px,44svh,420px)}
  .hero-azioni{gap:12px 20px}
  .hero-azioni .btn{padding:13px 20px;font-size:9.5px;letter-spacing:.18em}
  .hero-stage{--frame-w:min(90%,700px)}
  .focus-veil{left:-16px;right:-16px}
}

/* ==========================================================================
   Collezione — foto a tutto schermo, descrizione, dettaglio e occhiale
   ==========================================================================
   Sul riferimento editoriale: una campagna per pagina. La foto esce dalla
   colonna del contenuto e arriva ai bordi della finestra; la colonna di
   sinistra le resta sopra (vedi html.nav-su-foto). Sotto, la descrizione
   centrata come l'attacco di un articolo, poi due immagini affiancate. */
.section.collezione{padding-top:0}
.a-tutto-schermo{
  position:relative;margin:0;overflow:hidden;
  height:100vh;height:100svh;min-height:520px;
  margin-left:calc(-1 * (var(--rail-w) + var(--content-pad)));
  margin-right:calc(-1 * var(--content-pad));
}
.a-tutto-schermo > .img-slot,.a-tutto-schermo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
/* in una pagina senza colonna di sinistra (collezione.html) la foto va
   sotto la testata appiccicata, che le resta sopra */
.a-tutto-schermo--pagina{margin-left:0;margin-right:0;margin-top:-64px}

/* segnaposto di uno scatto di campagna: scuro come lo sarà la foto, così la
   colonna chiara sopra si può già giudicare */
.img-slot.img-slot--scena{
  background:radial-gradient(120% 90% at 50% 34%,#1c1c1e 0%,#141415 60%,#0e0e0f 100%);
  border-color:rgba(242,239,233,.16);color:rgba(242,239,233,.58);
}
/* segnaposto di uno still life: fondo neutro chiaro, come nel riferimento */
.img-slot.img-slot--still{background:repeating-linear-gradient(135deg,rgba(28,27,24,.03) 0 10px,transparent 10px 20px),#E9E6DF;border-color:rgba(28,27,24,.14);color:rgba(28,27,24,.5)}
[data-tema="notte"] .img-slot.img-slot--still{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),#19191A;border-color:rgba(239,235,225,.12);color:rgba(239,235,225,.5)}

.collezione-foto-nome{
  position:absolute;left:0;right:0;bottom:clamp(44px,10vh,110px);z-index:2;
  display:grid;justify-items:center;gap:10px;text-align:center;color:#F2EFE9;pointer-events:none;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.occhiello-foto{font-size:10.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;opacity:.82}
.collezione-foto-nome .nome{font-size:clamp(38px,5.6vw,92px);font-weight:400;line-height:1;letter-spacing:-.035em}
/* sulla foto la firma resta chiara: il bordeaux su uno scatto scuro sparisce */
.collezione-foto-nome .firma{color:#F2EFE9}

.collezione-intro{
  display:grid;justify-items:center;text-align:center;
  max-width:46rem;margin:clamp(72px,12vh,140px) auto clamp(52px,8vh,96px);
}
.collezione-intro .h2{max-width:16ch}
.collezione-intro .lede{max-width:36em;margin-top:clamp(16px,2.4vh,24px)}

/* la coppia si ferma quando ogni immagine arriverebbe oltre ~70% dello
   schermo: a 1440px erano due 4:5 alte 780px, non si vedevano mai insieme al
   loro nome */
.collezione-coppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,16px);max-width:min(100%,calc(140svh * .8 + 16px));margin-inline:auto}
.collezione-coppia figure{margin:0;display:grid;justify-items:center;gap:clamp(16px,2.4vh,24px)}
.coppia-dettaglio .img-slot{width:100%;aspect-ratio:4/5;height:auto}
.coppia-media{width:100%;aspect-ratio:4/5;display:block;border-radius:var(--r-panel);overflow:hidden}
.coppia-media .img-slot{height:100%;transition:transform .9s var(--ease)}
.coppia-media:hover .img-slot{transform:scale(1.02)}
.coppia-dettaglio{align-self:start}
@media (max-width:600px){ .collezione-coppia{grid-template-columns:1fr} }

/* il nome del modello in una pastiglia di vetro, come nel riferimento */
.pill-nome{
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;
  border-radius:var(--r-chip);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-ombra);
  backdrop-filter:blur(12px) saturate(190%);-webkit-backdrop-filter:blur(12px) saturate(190%);
  transition:color var(--t-base) var(--ease),transform .42s var(--ease-molla);
}
a.pill-nome:hover{color:var(--maroon);transform:translateY(-1px) scale(1.04)}

/* ---- la colonna di sinistra e la testata sopra una foto ---- */
html.nav-su-foto .rail-nav a{color:rgba(242,239,233,.84);text-shadow:0 1px 12px rgba(0,0,0,.4)}
html.nav-su-foto .rail-nav a.active{color:#F2EFE9}
html.nav-su-foto .rail-lens{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
html.testa-su-foto .rail-logo{color:#F2EFE9}
html.testa-su-foto .top-scrim{display:none}
html.testa-su-foto .wish-pill,html.testa-su-foto .wish-pill #wishCountRail{color:#F2EFE9}
html.testa-su-foto .tt-opt{color:rgba(242,239,233,.6)}
html.testa-su-foto .tt-opt.attiva{color:#F2EFE9}
.rail-logo,.wish-pill,.tt-opt{transition:color var(--t-base) var(--ease)}

/* ---- pagina Collezione ---- */
.coll-pagina{max-width:none}
.coll-pagina .collezione-coppia,.coll-modelli{padding-inline:clamp(16px,3vw,44px)}
.coll-modelli{padding-block:clamp(72px,12vh,140px) clamp(40px,7vh,80px);max-width:1440px;margin:0 auto}
.coll-griglia{
  /* quattro per riga come nel riferimento, poi tre, poi due: mai una
     colonna sola, lo still life deve restare un oggetto e non un poster */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vh,48px) clamp(10px,1.2vw,18px);margin-top:clamp(28px,4vh,44px);
}
@media (max-width:1100px){ .coll-griglia{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .coll-griglia{grid-template-columns:repeat(2,minmax(0,1fr))} .coll-card .pill-nome{height:34px;padding:0 14px;font-size:9px} .coll-card-meta{font-size:9px;letter-spacing:.1em} }
.coll-card{display:grid;justify-items:center;gap:14px;text-align:center;scroll-margin-top:90px}
.coll-card-media{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden}
.coll-card-media .img-slot{position:absolute;inset:0;transition:transform .9s var(--ease)}
.coll-card:hover .coll-card-media .img-slot{transform:scale(1.025)}
.coll-card .heart-btn{color:var(--ink);opacity:.8}
.coll-card .heart-btn[aria-pressed="true"]{color:var(--maroon);opacity:1}
.coll-card-piede{display:grid;justify-items:center;gap:8px}
.coll-card-meta{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-68)}
.coll-card-riga{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-84)}
.coll-card-riga .swatches{gap:5px;color:var(--ink-56)}
.coll-card-riga .swatch{width:11px;height:11px}
.coll-card.is-non-disponibile .disp{color:var(--maroon)}
.coll-card.is-non-disponibile .coll-card-media{opacity:.62}
/* lo scatto di campagna in mezzo ai modelli, alto quanto una scheda */
.coll-scatto{margin:0;position:relative;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden}
.coll-scatto .img-slot{position:absolute;inset:0}

/* Dopo le regole di base, non prima: a parità di specificità vince l'ultima
   (è l'errore che per mesi aveva spento l'apertura su telefono). */
@media (max-width:860px){
  /* la colonna è diventata una barra in alto: la foto esce solo dai 16px di margine */
  .a-tutto-schermo{margin-left:-16px;margin-right:-16px;height:78svh;min-height:420px}
  .a-tutto-schermo--pagina{margin-left:0;margin-right:0;height:88svh}
  .collezione-intro{margin-block:clamp(56px,9vh,90px) clamp(36px,6vh,60px)}
}

/* ==========================================================================
   Placeholder image slot (stands in for real photography)
   ========================================================================== */
.img-slot{
  width:100%;height:100%;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  /* Il riquadro segnaposto era una lastra chiara fissa: sul fondo notturno
     sparava come una finestra accesa. Ora è una tacca appena più chiara del
     fondo, qualunque sia il fondo. */
  background:repeating-linear-gradient(135deg,var(--tratteggio) 0 10px,transparent 10px 20px),var(--slot-fondo);
  border:1px dashed var(--border-strong);color:var(--ink-56);text-align:center;padding:12px;
}
.img-slot svg{width:22px;height:22px;opacity:.6}
.img-slot span{font-size:10.5px;font-weight:400;letter-spacing:.04em;line-height:1.4;max-width:22em}

/* ==========================================================================
   Catalogo in home — il nastro di still life
   ==========================================================================
   Un'anteprima della galleria: still life su fondo neutro che scorrono piano
   da destra a sinistra, fino al bordo della finestra, con nome e tipo sotto.
   Senza JS (o con meno movimento) il nastro si scorre a mano. */
.nastro{
  margin-top:clamp(28px,4.4vh,48px);
  margin-right:calc(-1 * var(--content-pad));
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 80px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 80px),transparent 100%);
}
.nastro::-webkit-scrollbar{display:none}
.nastro.in-moto{overflow:hidden}
.nastro-traccia{display:flex;gap:clamp(10px,1.1vw,16px);width:max-content;padding-block:6px 4px;will-change:transform}
.nastro-voce{flex:none;width:clamp(180px,17vw,260px);display:grid;gap:12px;color:var(--ink)}
.nastro-foto{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden}
.nastro-foto .img-slot,.nastro-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;transition:transform .9s var(--ease)}
.nastro-voce:hover .nastro-foto .img-slot,.nastro-voce:hover .nastro-foto img{transform:scale(1.03)}
/* tipo sopra, nome sotto: affiancati, il tipo di un modello finiva accanto al nome del successivo */
.nastro-nome{display:flex;flex-direction:column-reverse;gap:4px;font-size:clamp(15px,1.15vw,17px);font-weight:400;letter-spacing:-.015em}
.nastro-nome small{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-56)}
.nastro-voce:hover .nastro-nome{color:var(--maroon)}

.catalogo-piede{
  display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  margin-top:clamp(28px,4.4vh,48px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--border-soft);
}
.catalogo-dati{display:flex;gap:clamp(20px,3.4vw,56px);flex-wrap:wrap;margin:0}
.catalogo-dati dt{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-68);margin-bottom:5px}
.catalogo-dati dd{font-size:clamp(15px,1.3vw,19px);font-weight:400;letter-spacing:-.01em;margin:0}
@media (max-width:860px){ .nastro{margin-right:-16px} .nastro-voce{width:160px} }

/* ==========================================================================
   Chi siamo — copertina a tutto schermo, poi il racconto
   ==========================================================================
   La foto piena è la stessa misura della Collezione (.a-tutto-schermo), ma il
   testo ci sta sopra come in una copertina: capitolo e titolo in basso a
   sinistra, allineati alla colonna dei contenuti, non centrati. Il velo scuro
   sale solo da quell'angolo, quanto basta a leggere il bianco su qualsiasi
   scatto; il resto della foto resta pulito. */
.section.chi-siamo{padding-top:0}
.chi-apertura::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 0% 100%,rgba(10,10,10,.5) 0%,rgba(10,10,10,.18) 45%,transparent 70%),
    linear-gradient(0deg,rgba(10,10,10,.28),transparent 42%);
}
.chi-apertura .chi-siamo-head{
  position:absolute;left:0;right:0;bottom:0;z-index:1;color:#F2EFE9;
  padding:0 calc(var(--content-pad) * 2) clamp(44px,9vh,104px) calc(var(--rail-w) + var(--content-pad));
}
.chi-apertura .kicker{color:rgba(242,239,233,.9)}
.chi-apertura .kicker::before{color:rgba(242,239,233,.62);border-color:rgba(242,239,233,.34)}
.chi-apertura .h2{font-size:clamp(34px,4.9vw,76px);max-width:15ch;color:#F2EFE9}
.chi-apertura .firma{color:#F2EFE9}

.chi-foto{margin:0}
.chi-foto-cornice{position:relative;overflow:hidden;border-radius:var(--r-panel)}
.chi-foto-cornice > .img-slot,.chi-foto-cornice > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.chi-foto--ritratto .chi-foto-cornice{aspect-ratio:4/5}

.chi-corpo{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start;
  margin-top:clamp(72px,12vh,140px);
}
/* il ritratto resta fermo accanto mentre il racconto scorre */
.chi-foto--ritratto{grid-column:1 / span 5;position:sticky;top:clamp(88px,14vh,140px)}
.chi-testo{grid-column:7 / span 5;padding-top:clamp(24px,9vh,120px)}
.chi-sommario{font-size:clamp(19px,1.65vw,26px);font-weight:300;line-height:1.42;letter-spacing:-.012em;color:var(--ink);max-width:26em;text-wrap:pretty}
.chi-testo .lede{max-width:34em;margin-top:1.15em}
.chi-sommario + .lede{margin-top:clamp(24px,3.6vh,36px)}
/* l'anno: il momento in cui l'idea diventa Relees */
.chi-anno{
  display:grid;gap:10px;margin-block:clamp(40px,6vh,64px);padding-block:clamp(22px,3.4vh,32px);
  border-block:1px solid var(--border-soft);
}
.chi-anno-numero{font-size:clamp(52px,6vw,96px);line-height:.9;font-weight:300;letter-spacing:-.05em;color:var(--ink)}
.chi-anno span:last-child{font-size:clamp(17px,1.4vw,22px);font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--ink-84)}
.chi-chiusura{margin-top:clamp(44px,7vh,72px)}
.chi-chiusura-frase{font-size:clamp(22px,2vw,32px);font-weight:400;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;max-width:22em}
.chi-chiusura .lede{margin-top:16px}

@media (max-width:1100px){
  .chi-foto--ritratto{grid-column:1 / span 5}
  .chi-testo{grid-column:6 / -1;padding-top:0}
}
@media (max-width:760px){
  .chi-apertura .chi-siamo-head{padding:0 16px clamp(32px,6vh,48px)}
  .chi-corpo{display:flex;flex-direction:column;gap:clamp(32px,6vh,48px);margin-top:clamp(48px,8vh,72px)}
  .chi-foto--ritratto{position:static}
  .chi-testo{order:-1}
}

/* ==========================================================================
   Punti vendita — mappa (js/mappa.js), negozi da Admin (js/punti-vendita.js)
   ==========================================================================
   Composizione. Prima la carta era una fessura 21:9 dentro un iframe, con la
   lista schiacciata in un terzo: si leggeva come un modulo, non come un luogo.
   Ora mappa ed elenco stanno affiancati in una scena di altezza misurata
   (circa due terzi della finestra, non tutta): la carta a sinistra, l'elenco
   in una colonna a destra — a destra perché a sinistra c'è già la colonna di
   navigazione. La scena resta appiccicata al centro della finestra per poco
   meno di uno schermo mentre la sequenza si compone, poi scorre via. Sul
   telefono due colonne non ci stanno: l'elenco va sotto la mappa. */
.section.store{padding-bottom:clamp(40px,7vh,88px)}
.store-intro{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;
  margin-bottom:clamp(24px,4.4vh,48px);
}
.store-intro > div{grid-column:1 / span 7}
.store-lede{grid-column:9 / span 4;max-width:30em;padding-bottom:.3em}
@media (max-width:1100px){
  .store-intro > div{grid-column:1 / -1}
  .store-lede{grid-column:1 / span 9;margin-top:clamp(14px,2vh,20px)}
}

.pv-mappa{
  --pv-fondo:#E6E1D5; --pv-acqua:#D8D3C6; --pv-strada:#1C1B18; --pv-confine:rgba(28,27,24,.34);
  --pv-testo:rgba(28,27,24,.62); --pv-alone:#E6E1D5; --pv-pin:#6C171E; --pv-ago:#1C1B18;
}
[data-tema="notte"] .pv-mappa{
  --pv-fondo:#0C0C0C; --pv-acqua:#1B1B1D; --pv-strada:#EFEBE1; --pv-confine:rgba(239,235,225,.26);
  --pv-testo:rgba(239,235,225,.56); --pv-alone:#141415; --pv-pin:#B8474F; --pv-ago:#EFEBE1;
}

/* La scena: titolo + mappa + elenco. Niente più tratto di scroll "a
   tenuta": quando la sezione arriva al centro dello schermo è la pagina
   intera a fermarsi finché l'apertura non è finita (js/mappa.js).
   --pv-testa (altezza del titolo) lo misura js/mappa.js. */
.pv-palco{
  --pv-alto:0px;--pv-testa:200px;
  /* la mappa non supera mai lo spazio che resta sotto il titolo */
  --pv-h:min(clamp(440px,66svh,680px),calc(100svh - var(--pv-alto) - var(--pv-testa) - 124px));
  --pv-blocco:calc(var(--pv-testa) + var(--pv-h));
  position:relative;
}
.pv-scena{position:relative}
.pv-corpo{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,25%,340px);gap:clamp(12px,1.4vw,20px);
  height:var(--pv-h);
}
.pv-corpo > *{min-height:0}
.pv-mappa{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  /* senza bordi e senza sfumature: niente linea intorno, la carta si stacca
     dal fondo della pagina solo per il suo colore */
  background:transparent;
}
/* specificità doppia: maplibre-gl.css, caricato dopo, mette position:relative sul contenitore */
.pv-mappa > .pv-tela{position:absolute;inset:0}
.pv-tela .maplibregl-canvas{outline:none}
/* il cerchio da cui esce la rete: solo sulla tela della carta, mai su spillo
   e punti. Nessuna sfumatura sui lati e nessun bordo: la carta finisce netta,
   per il suo colore. */
.pv-tela:not(.pv-aperta) .maplibregl-canvas{
  -webkit-mask-image:radial-gradient(circle at var(--pv-mx,50%) var(--pv-my,50%),#000 calc(var(--pv-mr,0px) * .5),transparent var(--pv-mr,0px));
  mask-image:radial-gradient(circle at var(--pv-mx,50%) var(--pv-my,50%),#000 calc(var(--pv-mr,0px) * .5),transparent var(--pv-mr,0px));
}
.pv-avviso{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:30em;text-align:center;
  font-size:13px;line-height:1.6;color:var(--ink-68);padding:0 24px;
}
/* a sequenza finita, o se l'utente la chiude interagendo, il palco non
   trattiene più: la mappa è una mappa */

/* comandi di MapLibre, nel vetro del sito */
.pv-mappa .maplibregl-ctrl-group{
  border-radius:var(--r-chip);overflow:hidden;background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce);
  backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);
  opacity:0;transition:opacity .4s var(--ease);
}
.pv-mappa.pv-interattiva .maplibregl-ctrl-group{opacity:1}
.pv-mappa .maplibregl-ctrl-top-right{top:6px;right:6px}
.pv-mappa .maplibregl-ctrl-group button{width:34px;height:34px;background:transparent}
.pv-mappa .maplibregl-ctrl-group button + button{border-top:1px solid var(--border-soft)}
[data-tema="notte"] .pv-mappa .maplibregl-ctrl-icon{filter:invert(1) brightness(.9)}
.pv-mappa .maplibregl-ctrl-attrib{font-family:inherit;font-size:9.5px;background:color-mix(in srgb, var(--pv-fondo) 82%, transparent);color:var(--ink-56)}
.pv-mappa .maplibregl-ctrl-attrib a{color:var(--ink-68)}
.pv-mappa .maplibregl-ctrl-attrib-button{background-color:transparent}
.pv-mappa .maplibregl-ctrl-attrib.maplibregl-compact{background-color:color-mix(in srgb, var(--pv-fondo) 82%, transparent);box-shadow:0 0 0 1px var(--border-soft)}
[data-tema="notte"] .pv-mappa .maplibregl-ctrl-attrib-button{filter:invert(1)}
.pv-mappa .maplibregl-cooperative-gesture-screen{
  background:color-mix(in srgb, var(--pv-fondo) 70%, transparent);color:var(--ink);
  font-family:inherit;font-size:12px;letter-spacing:.04em;backdrop-filter:blur(4px);
}

/* Il pin: uno spillo. Ago d'inchiostro, testa sferica con il filo di luce
   del vetro; la punta è il punto esatto di Torino (anchor bottom). */
.pv-pin{width:26px;height:52px;pointer-events:none;color:var(--pv-ago)}
.pv-pin-corpo{position:absolute;inset:0;display:block;will-change:transform}
.pv-pin-corpo svg{overflow:visible}
.pv-pin-corpo svg{display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.pv-pin-ombra{
  position:absolute;left:50%;top:100%;width:18px;height:6px;margin:-3px 0 0 -9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.34),transparent);will-change:transform;
}
.pv-pin-onda{
  /* grande e ridotta in partenza: ingrandita resta un filo di 1px, invece di
     un anello che si ingrossa con la scala */
  position:absolute;left:50%;top:100%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--pv-pin);
}
.pv-pin-nome{
  position:absolute;left:calc(50% + 12px);top:calc(100% - 7px);white-space:nowrap;
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 0 6px var(--pv-fondo),0 0 2px var(--pv-fondo);
}

/* I negozi: un punto bordeaux con l'orlo del fondo; l'area da toccare è più
   grande del punto. */
.pv-punto{
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.pv-punto > span{grid-area:1/1}
.pv-punto-nucleo{
  width:11px;height:11px;border-radius:50%;background:var(--pv-pin);
  box-shadow:0 0 0 2.5px var(--pv-fondo),0 1px 4px 2px rgba(0,0,0,.14);
  transition:transform .4s var(--ease-molla);
}
.pv-punto-onda{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--pv-pin)}
.pv-punto:hover .pv-punto-nucleo{transform:scale(1.25)}
.pv-punto.attivo .pv-punto-nucleo{transform:scale(1.5)}
.pv-punto:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.pv-punto.acceso .pv-punto-onda{opacity:0}

/* Scheda del negozio (popup) */
.pv-popup .maplibregl-popup-content{
  padding:16px 18px 14px;border-radius:var(--r-float);font-family:inherit;color:var(--ink);
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 0 0 1px var(--border-soft),0 18px 40px -18px rgba(0,0,0,.35);
}
.pv-popup .maplibregl-popup-tip{display:none}
.pv-popup .maplibregl-popup-close-button{font-size:18px;width:30px;height:30px;right:4px;top:4px;color:var(--ink-56);border-radius:50%}
.pv-popup .maplibregl-popup-close-button:hover{background:var(--border-soft);color:var(--ink)}
.pv-scheda-citta{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);margin-bottom:6px;padding-right:22px}
.pv-scheda-nome{font-size:17px;line-height:1.2;letter-spacing:-.01em;padding-right:22px}
.pv-scheda-indirizzo{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--ink-72);margin-top:4px}
.pv-azioni{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pv-azione{
  display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:var(--r-chip);
  font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--border-strong);transition:color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.pv-azione:hover{color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon)}

/* Elenco: colonna a destra della carta, alta quanto lei, su una lastra
   leggera; la lista scorre dentro. */
.pv-elenco{display:flex;flex-direction:column;min-height:0}
/* anche l'elenco senza riquadro: una colonna di testo sul fondo */
.pv-corpo > .pv-elenco{background:none}
.pv-elenco-testa{padding:14px 14px 8px;display:grid;gap:10px}
.pv-cerca{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:var(--r-chip);color:var(--ink-56);
  box-shadow:inset 0 0 0 1px var(--border-soft);background:color-mix(in srgb, var(--cream) 50%, transparent);
}
.pv-cerca:focus-within{box-shadow:inset 0 0 0 1px var(--maroon);color:var(--ink)}
.pv-cerca input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);outline:none}
.pv-cerca input:disabled{cursor:default}
.pv-conteggio{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-56);padding-left:4px;min-height:1em}
.pv-lista{list-style:none;margin:0;padding:0 8px 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pv-voce{border-top:1px solid var(--border-soft)}
.pv-voce:first-child{border-top:0}
.pv-voce-testa{display:grid;gap:4px;width:100%;text-align:left;padding:12px 8px;border-radius:10px;transition:background var(--t-base) var(--ease)}
.pv-voce-testa:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.pv-voce-nome{font-size:14.5px;letter-spacing:-.01em;line-height:1.25}
.pv-voce-luogo{font-size:12px;font-weight:300;line-height:1.45;color:var(--ink-68)}
.pv-voce.attiva .pv-voce-nome{color:var(--maroon)}
.pv-voce .pv-azioni{margin:0 8px 12px}
.pv-messaggio{font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-68);padding:10px 8px 14px}

@media (max-width:1099px){
  .pv-palco{--pv-h:min(clamp(420px,60svh,600px),calc(100svh - var(--pv-alto) - var(--pv-testa) - 124px))}
  .pv-corpo{grid-template-columns:minmax(0,1fr) clamp(220px,32%,290px)}
  .pv-voce-nome{font-size:13.5px}
}
/* telefono: la carta sola nella scena, l'elenco dopo */
@media (max-width:760px){
  .pv-palco{--pv-h:min(clamp(340px,56svh,520px),calc(100svh - var(--pv-alto) - var(--pv-testa) - 40px))}
  .pv-corpo{grid-template-columns:minmax(0,1fr)}
  .store > .pv-elenco{margin-top:clamp(20px,3vh,32px)}
  .store > .pv-elenco .pv-elenco-testa{padding:0 0 12px}
  .store > .pv-elenco .pv-lista{padding:0}
  .pv-punto{width:36px;height:36px}
  .pv-popup .maplibregl-popup-content{padding:14px 16px 12px}
}

/* ==========================================================================
   Appuntamento
   ========================================================================== */
/* Appuntamento — è il punto d'arrivo del sito, non una sezione fra le altre.
   Esce dalla colonna per prendere tutta la larghezza, si annuncia con un
   titolo di taglia diversa da ogni altro e si stacca da ciò che precede. */
#appuntamento{
  margin-inline:calc(-1 * clamp(16px,3vw,52px));
  padding-inline:clamp(16px,3vw,52px);
  padding-block:clamp(84px,14vh,170px) clamp(56px,9vh,110px);
  border-top:1px solid var(--border-soft);
}
.appuntamento-intro{margin-bottom:clamp(28px,4.4vh,52px)}
.appuntamento-title{
  /* sta in una colonna, non in tutta la pagina: il corpo segue la colonna,
     altrimenti a 900px di finestra andava su cinque righe */
  font-size:clamp(38px,4.6vw,78px);line-height:.96;font-weight:400;letter-spacing:-.038em;
  /* la misura va data qui, dove "ch" si riferisce al corpo del titolo:
     sul contenitore verrebbe calcolata sul testo piccolo e strozzerebbe tutto */
  max-width:15ch;text-wrap:balance;
}
.appuntamento-lede{margin-top:clamp(18px,2.8vh,30px);max-width:34em;font-size:clamp(15px,1.35vw,19px);font-weight:300;line-height:1.66;color:var(--ink-84)}
/* Due colonne con pesi diversi: a sinistra si spiega cosa succede, a destra si
   agisce. Il modulo è la colonna più larga perché è il motivo della sezione. */
.appuntamento-grid{
  display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr);
  gap:clamp(28px,4vw,72px);
  /* Le due colonne si chiudono sulla stessa riga, e a spostarsi è il modulo:
     essendo più corto della colonna di testo, ancorato in basso risale
     accanto al titolo invece di partire dalla riga dei passi. Allungare la
     colonna di sinistra avrebbe dato lo stesso pareggio, ma abbassando il
     testo invece di alzare il modulo — cioè il contrario di quel che serve. */
  align-items:end;
}

/* I tre passi: niente numeri 01/02/03 (sapevano di elenco generato). L'ordine
   lo dicono già i titoli e il filo che li separa. */
.passi{list-style:none}
.passi li{padding:clamp(14px,1.8vh,22px) 0;border-top:1px solid var(--border-soft)}
.passi li:first-child{border-top:0;padding-top:0}
.passi h3{font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:-.02em;margin-bottom:6px}
.passi p{font-size:13.5px;font-weight:300;line-height:1.66;color:var(--ink-84);max-width:34em}
.appuntamento-rassicura{
  margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(14px,1.8vh,20px);
  border-top:1px solid var(--border-soft);
  font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.9;color:var(--ink-68);
}

/* Il modulo sta su una lastra sua: è l'unico punto del sito in cui si scrive,
   e deve sembrare un foglio appoggiato, non campi sparsi sul fondo. */
.appuntamento-modulo{
  padding:clamp(20px,2.4vw,34px);
  border:1px solid var(--glass-light-border);
  border-radius:var(--r-float);
  background:var(--vetro-velo);
  box-shadow:0 1px 2px rgba(28,27,24,.04),0 26px 60px -40px rgba(28,27,24,.24),
             inset 0 1px 1px var(--vetro-luce-2);
  backdrop-filter:blur(12px) saturate(180%) brightness(1.03);
  -webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.03);
}
.modulo-titolo{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);
  padding-bottom:clamp(14px,1.8vh,18px);margin-bottom:clamp(16px,2vh,22px);
  border-bottom:1px solid var(--border-soft);
}

@media (max-width:860px){
  .appuntamento-grid{grid-template-columns:1fr}
}
/* la chiamata all'azione si distingue per misura, non per colore: stessa
   lastra classica degli altri comandi, solo più alta e più larga */
.btn-cta{
  margin-top:clamp(8px,1.4vh,14px);
  padding:20px 34px;font-size:11px;letter-spacing:.2em;
}
.btn-cta:hover{transform:translateY(-2px) scale(1.03)}
.info-box{border:1px solid var(--border-soft);border-radius:var(--r-panel);padding:16px;margin-bottom:12px}
.info-box .label{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-68);margin-bottom:6px}
.info-box p:last-child{font-size:12.5px;color:var(--ink-84)}

.form{display:flex;flex-direction:column;gap:12px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field span{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-72)}
.field input, .field textarea{
  border:0;border-bottom:1px solid rgba(28,27,24,.25);padding:9px 0;font-size:14px;background:transparent;color:var(--ink);outline:none;
}
.field textarea{border:1px solid var(--border);border-radius:var(--r-panel);padding:10px 12px;resize:vertical;min-height:76px}
.field input:focus, .field textarea:focus{border-color:var(--maroon)}
.field.code input{letter-spacing:.06em;text-transform:uppercase}
.form-error{font-size:12px;color:var(--maroon)}
.confirm-card{border:1px solid var(--border);border-radius:var(--r-panel);padding:26px;animation:popIn var(--t-base) ease both}
.confirm-card h3{font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.02em;margin:10px 0}
.confirm-card p{font-size:13.5px;color:var(--ink-84);margin-bottom:20px}
.confirm-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   Contatti / footer
   ========================================================================== */
/* Piede. Prima erano un titolo centrato e quattro colonne larghe con testo
   da 14px: un blocco che pesava quanto una sezione vera. Ora è una fascia
   bassa, allineata alla stessa colonna del contenuto, con il marchio a
   sinistra e i recapiti in colonne strette — si legge in coda alla pagina
   senza chiedere attenzione. */
.piede{
  margin-top:clamp(40px,7vh,90px);
  padding:clamp(26px,4vh,44px) 0 clamp(18px,3vh,28px);
  border-top:1px solid var(--border-strong);
}
.piede-griglia{
  display:grid;
  grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(150px,1fr));
  gap:clamp(18px,2.4vw,36px);align-items:start;
}
.piede-marchio{max-width:26ch}
.piede-logo{font-size:13px;font-weight:500;letter-spacing:.24em}
.piede-claim{margin-top:10px;font-size:clamp(15px,1.3vw,19px);font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--ink-84)}
.piede-eyebrow{
  font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-68);margin-bottom:9px;
}
.piede-griglia p{font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.piede-griglia a:hover{color:var(--maroon)}
.piede-link{
  font-size:12px;line-height:1.75;text-align:left;
  border-bottom:1px solid var(--maroon);padding-bottom:1px;
}
.piede-link:hover{color:var(--maroon)}
.piede-coda{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:clamp(22px,3.5vh,40px);padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.piede-coda p{font-size:9.5px;line-height:1.6;color:var(--ink-68)}
.piede-coda a{border-bottom:1px solid rgba(28,27,24,.28)}
@media (max-width:860px){
  .piede-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .piede-marchio{grid-column:1 / -1}
  .piede-coda{flex-direction:column}
}

/* ==========================================================================
   Wishlist drawer
   ========================================================================== */
.overlay{position:fixed;inset:0;z-index:150}
.overlay-bg{position:absolute;inset:0;background:rgba(28,27,24,.45);animation:fadeIn .3s ease both}
.drawer{
  position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;
  background:var(--cream);
  border-left:1px solid var(--border);display:flex;flex-direction:column;
  animation:drawerIn .45s var(--ease) both;
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--border-strong)}
.drawer-head span{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.drawer-body{flex:1;overflow-y:auto;padding:14px 22px}
.drawer-empty{padding:36px 0;font-size:13.5px;font-weight:300;color:var(--ink-84);line-height:1.7}
.wish-item{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.wish-item .name{font-size:15px;font-weight:400;letter-spacing:-.01em}
.wish-item .meta{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-72);margin-top:3px}
.wish-item button{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-78);flex:none}
.wish-item button:hover{color:var(--maroon)}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--border-strong)}
.drawer-foot p{font-size:12px;color:var(--ink-84);margin-bottom:12px;line-height:1.6}
.code-card{margin-top:12px;padding:14px;border:1px solid rgba(108,23,30,.4);text-align:center;animation:popIn .3s ease both}
.code-card .label{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-78)}
.code-card .value{font-size:24px;font-weight:500;letter-spacing:.1em;margin:6px 0;color:var(--maroon)}
/* invio della wishlist ad Admin, nel piede del pannello */
.invio-form{display:flex;flex-direction:column;gap:10px;max-height:min(62vh,560px);overflow-y:auto;padding-right:2px}
.invio-form .form-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.invio-form textarea{min-height:60px}
.invio-consenso{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:var(--ink-84)}
.invio-consenso input{margin-top:3px;accent-color:var(--maroon);flex:none}
.invio-trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.invio-indietro{align-self:center;border-color:var(--border-strong);color:inherit;margin-top:2px}
.invio-esito .invio-nota{font-size:12px;color:var(--ink-84);margin:0;line-height:1.5}
.invio-azioni{display:flex;justify-content:center;gap:18px;margin-top:12px}
.invio-azioni .link-underline{border-color:var(--border-strong)}

/* modulo appuntamento: i due consensi stanno sopra il pulsante, separati */
#apptForm .invio-consenso{font-size:12px}
#apptForm .invio-consenso + .invio-consenso{margin-top:-2px}
.confirm-card:focus{outline:none}

/* ==========================================================================
   Newsletter — finestra unica per popup e piede (js/newsletter.js)
   <dialog> nativo: fuoco trattenuto, Esc e pagina sotto inerte li dà il
   browser. La scheda è una superficie sospesa (--r-float) in vetro chiaro,
   come gli altri elementi flottanti; il velo dietro lo anima GSAP con
   --nl-velo (dove ::backdrop non eredita la variabile, resta pieno).
   ========================================================================== */
@property --nl-velo{syntax:'<number>';inherits:true;initial-value:1}
html.nl-aperta{overflow:hidden}
.nl-dialogo{
  /* il reset globale azzera i margini: senza margin:auto la finestra modale
     non si centra più e resta in alto a sinistra */
  margin:auto;padding:0;border:0;background:transparent;color:var(--ink);
  width:min(460px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible;
}
.nl-dialogo::backdrop{
  background:rgba(14,14,15,calc(.42 * var(--nl-velo,1)));
  -webkit-backdrop-filter:blur(calc(5px * var(--nl-velo,1)));backdrop-filter:blur(calc(5px * var(--nl-velo,1)));
}
.nl-scheda{
  position:relative;max-height:calc(100dvh - 32px);overflow:auto;
  padding:clamp(28px,4vw,40px) clamp(22px,3.6vw,38px) clamp(24px,3.4vw,34px);
  border-radius:var(--r-float);
  background:color-mix(in srgb,var(--fondo-alto) 84%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-light-border);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.06),inset 0 1px 1px var(--vetro-luce);
}
.nl-chiudi{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--ink-72);
  transition:color var(--t-svelto) var(--ease),background-color var(--t-svelto) var(--ease);
}
.nl-chiudi:hover{color:var(--maroon);background:var(--glass-light-bg)}
.nl-contenuto .kicker{margin-bottom:12px}
.nl-titolo{
  font-size:clamp(26px,3vw,34px);line-height:1.08;font-weight:400;letter-spacing:-.028em;
  text-wrap:balance;padding-right:36px;
}
.nl-lede{margin-top:12px;font-size:14px;font-weight:300;line-height:1.65;color:var(--ink-84)}
.nl-form{margin-top:22px;gap:14px}
.nl-azioni{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.nl-contenuto > .nl-azioni{margin-top:22px}
.nl-no{border-color:var(--border-strong);color:var(--ink-78)}
.nl-no:hover{color:var(--maroon)}
@media (max-width:520px){
  .nl-azioni .btn{flex:1 1 100%}
  .nl-no{margin-inline:auto}
}

.piede-eyebrow--spazio{margin-top:16px}
.cat-footer-link{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap}
.cat-footer-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-bottom:1px solid rgba(108,23,30,.5)}
.cat-footer-btn:hover,.cat-footer-inner a:hover{color:var(--maroon)}

/* pagina newsletter.html (conferma e disiscrizione dai link delle email) */
.nlp{min-height:100svh;display:grid;place-items:center;padding:clamp(24px,6vw,80px) 16px}
.nlp-scheda{width:min(560px,100%)}
.nlp-scheda .titolo-nlp{font-size:clamp(32px,4.4vw,52px);line-height:1.04;font-weight:400;letter-spacing:-.032em;text-wrap:balance}
.nlp-scheda .lede{margin-top:16px}
.nlp-azioni{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap}
.nlp-logo{display:inline-flex;line-height:0;color:var(--ink);margin-bottom:clamp(30px,6vh,56px)}
.nlp-logo .logo-firma{height:36px}

/* ==========================================================================
   Catalogo page
   ========================================================================== */
.cat-header--sopra-foto{position:sticky}
.cat-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--fondo-alto) 62%, transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--border)}
/* ai bordi della pagina, non dentro 1440px: sui monitor larghi i due gruppi
   finivano verso il centro */
.cat-header-inner{padding:0 clamp(18px,3vw,48px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cat-logo{display:inline-flex;line-height:0;color:var(--ink);transition:color var(--t-base) var(--ease)}
.cat-logo .logo-firma{height:32px}
.cat-logo:hover{color:var(--maroon)}
.cat-header-azioni{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);min-width:0}
.cat-header-sep{width:1px;height:16px;background:var(--border-strong)}
.cat-header-azioni .lingua-testo{--nav-size:9.5px}
.back-link{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.back-link:hover{color:var(--maroon)}

/* la wishlist fuori dalla testata: una lastra in basso a destra, sempre a portata */
.wish-fluttua{
  position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:60;
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:var(--r-chip);
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  /* più piena del vetro dei comandi: galleggia anche sopra le foto scure */
  background:color-mix(in srgb, var(--cream) 80%, transparent);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 18px 40px -18px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-sotto);
  backdrop-filter:blur(16px) saturate(190%);-webkit-backdrop-filter:blur(16px) saturate(190%);
  transition:color var(--t-base) var(--ease);
}
.wish-fluttua:hover{color:var(--maroon)}
.wish-fluttua-n{color:var(--maroon);font-variant-numeric:tabular-nums}
html.cover-on .wish-fluttua{opacity:0;pointer-events:none}

/* ==========================================================================
   Copertina del catalogo — la montatura è l'unico oggetto in scena.
   Niente pannelli, niente card: le due lenti SONO i due bersagli.
   Aperture misurate sul canale alpha del PNG (1519x521):
   sole  x 145..673  -> 9,55%  larga 34,83%
   vista x 845..1373 -> 55,63% larga 34,83%
   entrambe y 89..464 -> 17,08% dall'alto, alte 72,17%
   ========================================================================== */
.picker{
  position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;
  padding:clamp(96px,13vh,152px) clamp(16px,4vw,48px) clamp(40px,7vh,84px);
  /* campionato dall'illustrazione: deve essere identico al suo fondo,
     altrimenti sopra e sotto la banda si vedrebbero due righe */
  background:#E7E1D5;
}
/* L'illustrazione sta su un livello suo: così si può sfumare ai bordi senza
   toccare la montatura e il resto della scena. Il centro è libero, e la
   montatura ci si appoggia dentro. */
.picker::before{
  content:"";position:absolute;inset:-24px;z-index:-1;
  background:url(../assets/images/scena-catalogo.jpg) center/100% auto no-repeat;
  /* la timeline d'ingresso (js/catalogo.js) muove queste tre variabili: la
     stanza si allontana e sfoca mentre la camera entra nella lente */
  filter:blur(var(--scena-blur,2.5px));
  transform:scale(var(--scena-s,1));opacity:var(--scena-o,1);
}

/* La copertina diventa schermo pieno solo se il JS è vivo: senza, resta una
   sezione che si scorre e il catalogo sotto rimane raggiungibile. */
html.cover-on,html.cover-on body{overflow:hidden}
/* Di notte l'illustrazione resterebbe un pomeriggio pieno sotto un testo
   color crema: illeggibile. Non si può ribaltare come la mappa — è un
   disegno, non una carta — e nemmeno filtrare, perché un filter sull'elemento
   scurirebbe anche il titolo e la montatura che stanno dentro. Si fonde
   invece l'immagine con il colore della notte: tocca solo lo sfondo. */
[data-tema="notte"] .picker{
  /* il fondo pieno campionato dall'illustrazione diventa quello della notte,
     altrimenti sopra e sotto la banda resterebbero due righe chiare */
  background:#161617;
}
/* L'illustrazione vive sul ::before, non sull'elemento: è lì che va fusa.
   multiply vuole un colore pieno — con l'alfa il prodotto resta chiaro e
   il disegno continua a leggersi come un pomeriggio. */
[data-tema="notte"] .picker::before{
  background-color:#2E2E30;
  background-blend-mode:multiply;
}
html.cover-on .picker{position:fixed;inset:0;z-index:70;min-height:0}
html.cover-on .cat-wrap,html.cover-on .cat-footer{visibility:hidden}
/* la testata resta sopra la copertina: durante la copertina è l'unica via d'uscita */
html.cover-on .cat-header{z-index:90}
/* ma sparisce mentre la camera entra, altrimenti galleggerebbe sulla lente */
html.diving .cat-header{opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
.picker.is-spent{display:none}

.picker-intro{text-align:center;max-width:30em}
.picker-intro .kicker{margin-bottom:10px}
.picker-title{font-size:clamp(30px,3.8vw,58px);line-height:1.02;font-weight:400;letter-spacing:-.032em;text-wrap:balance}

.picker-foot{display:grid;justify-items:center;gap:10px;text-align:center}
.picker-hint{font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-68)}
.picker-counts{font-size:11px;letter-spacing:.04em;color:rgba(28,27,24,.56)}

.picker-scene{
  position:relative;width:100%;height:100%;display:grid;place-items:center;
  perspective:1150px;perspective-origin:var(--po,50% 50%);
}
/* il filo che taglia in due la scena: sfuma alle estremità e non arriva ai testi */
.picker-split{
  position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(28,27,24,.2) 18%,rgba(28,27,24,.2) 82%,transparent 100%);
  transition:opacity .4s ease;
}
.picker-frame{
  position:relative;width:min(1180px,92vw);aspect-ratio:1519/521;
  transform-style:preserve-3d;transition:transform .55s var(--ease);
}
.picker-frame img{width:100%;height:auto}


/* Le scritte sulle lenti sono i bottoni: nessuna forma sotto, solo testo.
   Il bersaglio però copre tutta l'apertura, così si preme anche di fianco. */
.lens-hit{
  position:absolute;top:17.08%;height:72.17%;width:34.83%;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;
}
.lens-hit[data-tipo="Sole"]{left:9.55%}
.lens-hit[data-tipo="Vista"]{left:55.63%}
/* Sole e Vista sulle lenti: Nohemi in maiuscolo spaziato, come le etichette
   del sito (prima erano in calligrafia). Scala e spaziatura al passaggio le
   porta GSAP. */
.lens-hit span{
  font-size:clamp(13px,1.35vw,21px);font-weight:500;line-height:1;
  letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;
  transition:color .3s var(--ease);
}
.lens-hit[data-tipo="Sole"] span{color:rgba(242,239,233,.86)}
.lens-hit[data-tipo="Vista"] span{color:rgba(28,27,24,.7)}
.lens-hit:hover span,.lens-hit:focus-visible span{transform:scale(1.06)}
.lens-hit[data-tipo="Sole"]:hover span,.lens-hit[data-tipo="Sole"]:focus-visible span{color:#F2EFE9}
.lens-hit[data-tipo="Vista"]:hover span,.lens-hit[data-tipo="Vista"]:focus-visible span{color:var(--ink)}
/* il contorno di focus segue la scritta, non l'apertura: niente rettangoli */
.lens-hit:focus-visible{outline:none}
.lens-hit:focus-visible span{outline:2px solid var(--maroon);outline-offset:6px;border-radius:3px}

/* L'interno della lente: si solidifica mentre la camera entra, finché è lo schermo */
.lens-portal{z-index:3;opacity:0}
.lens-portal[data-lens="Sole"]{background:radial-gradient(125% 125% at 32% 24%,#2B2C29,#141513 62%)}
.lens-portal[data-lens="Vista"]{background:radial-gradient(125% 125% at 32% 24%,#FFFFFF,#F4F1E9 68%)}

/* ---- la camera entra nella lente ----------------------------------------
   È una timeline GSAP in js/catalogo.js (non più keyframe CSS + setTimeout):
   la montatura avanza verso la lente, la stanza si allontana, l'interno della
   lente si fa pieno e dalla lente si apre un'iride sul catalogo. */
.picker-frame{will-change:transform}
.lens-hit{pointer-events:auto}
html.diving .lens-hit{pointer-events:none}

/* il colore della lente: copre lo schermo e si scioglie sul catalogo */
.dive-veil{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;pointer-events:none}

@media (max-width:700px){
  .picker-frame{width:94vw}
  .picker-scene{perspective:820px}
}



@media (max-width:620px){
  /* Con il comando IT/EN la testata del telefono non contiene più cinque
     elementi: marchio e secondo link si sovrapponevano al comando Sole/Vista.
     Resta "← Sito" per uscire, e a destra i tre comandi. */
  .cat-header-inner{padding:0 14px;gap:10px}
  .cat-logo .logo-firma{height:26px}
  .cat-header-azioni{gap:10px}
  .cat-header-azioni .back-link + .back-link,.cat-header-sep{display:none}
  .back-link{font-size:9px;letter-spacing:.12em}
  .wish-fluttua{height:44px;padding:0 16px}
}

/* ==========================================================================
   Catalogo — intestazione, barra, galleria, griglia
   ========================================================================== */
.cat-wrap{--cat-pad:clamp(18px,3vw,48px)}
.cat-intro{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;
  padding:clamp(32px,5vh,60px) var(--cat-pad) clamp(20px,3vh,30px);
}
.cat-intro-testa{grid-column:1 / span 8}
.cat-titolo{font-size:clamp(30px,3.4vw,52px);line-height:1.02;font-weight:400;letter-spacing:-.034em}
.cat-lede{grid-column:9 / span 4;max-width:30em;padding-bottom:.3em}
@media (max-width:1000px){ .cat-intro-testa{grid-column:1 / -1} .cat-lede{grid-column:1 / span 10;margin-top:14px} }

/* ---- la barra dei comandi ---- */
.cat-barra{
  position:sticky;top:64px;z-index:30;
  background:color-mix(in srgb, var(--fondo-alto) 78%, transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-block:1px solid var(--border-soft);
}
.cat-barra-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;min-height:64px;padding:10px var(--cat-pad)}
.cat-barra-gruppo{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;min-width:0}

/* Una sola lastra per i tre comandi della barra — tipo, vista, ricerca:
   stessa altezza (42px), stesso vetro, stesso stato attivo. */
.segmenti,.vista-toggle,.cat-cerca{
  border-radius:var(--r-chip);
  background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-sotto);
}
.segmenti{position:relative;display:inline-flex;padding:4px;isolation:isolate}
.segmenti button{
  position:relative;z-index:1;height:32px;padding:0 18px;border-radius:var(--r-chip);
  font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-56);
  transition:color var(--t-base) var(--ease);
}
.segmenti button:hover{color:var(--maroon)}
.segmenti button.attivo{color:var(--ink)}
.segmenti-cursore{
  position:absolute;left:4px;top:4px;height:32px;width:0;border-radius:var(--r-chip);z-index:0;
  background:var(--vetro-velo);box-shadow:0 0 0 1px var(--vetro-orlo),0 4px 10px -4px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce);
}

.cat-interruttore{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-72)}
.cat-interruttore input{position:absolute;opacity:0;width:1px;height:1px}
.cat-interruttore-pista{position:relative;width:32px;height:18px;border-radius:var(--r-chip);background:var(--border-strong);transition:background var(--t-base) var(--ease)}
.cat-interruttore-pista::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--cream);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .45s var(--ease-molla)}
.cat-interruttore input:checked + .cat-interruttore-pista{background:var(--teal)}
.cat-interruttore input:checked + .cat-interruttore-pista::after{transform:translateX(14px)}
.cat-interruttore input:focus-visible + .cat-interruttore-pista{outline:2px solid var(--maroon);outline-offset:2px}
.cat-interruttore:hover{color:var(--ink)}

/* la ricerca è piccola a riposo e si allarga solo quando ci scrivi */
.cat-cerca{
  display:flex;align-items:center;gap:8px;height:42px;width:172px;padding:0 16px;color:var(--ink-56);
  transition:border-color var(--t-base) var(--ease),width .5s var(--ease);
}
.cat-cerca svg{width:14px;height:14px;flex:none}
.cat-cerca:focus-within{width:240px;border-color:var(--maroon);color:var(--ink)}
.cat-cerca input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);outline:none}
.cat-cerca input::placeholder{color:var(--ink-56);opacity:1}
.vista-toggle{display:inline-flex;gap:2px;padding:4px}
.vt-opt{width:44px;height:32px;display:grid;place-items:center;border-radius:var(--r-chip);color:var(--ink-56);transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.vt-opt svg{width:16px;height:13px}
.vt-opt:hover{color:var(--maroon)}
/* attivo come il tipo scelto a sinistra: la pastiglia di vetro dentro */
.vt-opt.attiva{color:var(--ink);background:var(--vetro-velo);box-shadow:0 0 0 1px var(--vetro-orlo),0 4px 10px -4px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce)}
@media (max-width:760px){
  /* su telefono la barra non resta appiccicata: alta tre righe, si
     mangerebbe un quarto dello schermo a ogni scorrimento */
  .cat-barra{position:relative;top:auto}
  .segmenti button{padding:0 12px;letter-spacing:.12em}
  .cat-interruttore{gap:8px;letter-spacing:.12em}
  .cat-barra-inner{padding:10px 16px;gap:10px}
  .cat-barra-gruppo,.cat-barra-gruppo.fine{width:100%;justify-content:space-between}
  .cat-cerca{flex:1 1 auto;width:auto}
}

/* ---- galleria ---- */
.galleria{padding:clamp(22px,3.6vh,40px) var(--cat-pad) clamp(48px,8vh,96px)}
.gal-scena{display:grid;grid-template-columns:clamp(64px,5.4vw,84px) minmax(0,1fr) clamp(290px,24vw,370px);gap:clamp(14px,2vw,32px);align-items:start}
.gal-viste{display:grid;gap:10px;align-content:start}
.gal-vista{display:grid;gap:6px;padding:0;text-align:center}
.gal-vista-foto{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--border-soft);transition:box-shadow var(--t-base) var(--ease),opacity var(--t-base) var(--ease);opacity:.7}
.gal-vista-foto > .img-slot,.gal-vista-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.gal-vista-foto .img-slot span{display:none}
.gal-vista-nome{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-56);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-vista:hover .gal-vista-foto{opacity:1}
.gal-vista.attiva .gal-vista-foto{opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
.gal-vista.attiva .gal-vista-nome{color:var(--ink)}

.gal-anteprima{
  /* alta quanto serve perché, sotto la barra, anteprima e striscia dei
     modelli si vedano insieme */
  position:relative;aspect-ratio:4/3;max-height:max(360px,calc(100svh - 340px));width:100%;border-radius:var(--r-panel);overflow:hidden;
  background:var(--fondo-medio);cursor:grab;touch-action:pan-y;user-select:none;
}
.gal-anteprima:active{cursor:grabbing}
.gal-foto-cornice{position:absolute;inset:0}
.gal-foto{position:absolute;inset:0;will-change:transform}
.gal-foto > .img-slot,.gal-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.gal-punti{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.gal-punti i{width:18px;height:2px;border-radius:2px;background:var(--ink-40);transition:background var(--t-base) var(--ease),width .4s var(--ease)}
.gal-punti i.attiva{width:30px;background:var(--ink)}
.gal-freccia{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--ink);
  background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
  box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce);
  backdrop-filter:blur(10px) saturate(190%);-webkit-backdrop-filter:blur(10px) saturate(190%);
  opacity:0;transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease),transform .4s var(--ease-molla);
}
.gal-anteprima:hover .gal-freccia,.gal-freccia:focus-visible{opacity:1}
.gal-freccia.prec{left:14px}.gal-freccia.succ{right:14px}
.gal-freccia:hover{color:var(--maroon);transform:translateY(-50%) scale(1.08)}
.gal-freccia:disabled{opacity:0 !important;pointer-events:none}

.gal-info{display:flex;flex-direction:column;gap:clamp(22px,3.2vh,32px);min-width:0;padding-top:2px}
.gal-posizione{display:flex;justify-content:space-between;align-items:baseline;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon)}
.gal-conta{color:var(--ink-40);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.gal-nome{margin-top:12px;font-size:clamp(34px,3.2vw,52px);line-height:1;font-weight:400;letter-spacing:-.035em}
.gal-stato{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--ink-84)}
.gal-stato-sep{width:1px;height:12px;background:var(--border-strong)}
.gal-colori .swatches{gap:6px;color:var(--ink-56)}
.gal-colori .swatch{width:12px;height:12px}
.disp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.disp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.disp.no{color:var(--maroon)}.disp.no::before{background:var(--maroon)}
.gal-azioni{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.gal-cuore{gap:9px;padding:13px 20px}
.gal-cuore.is-on{color:var(--maroon)}
.gal-link{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-72);border-bottom:1px solid var(--border-strong);padding-bottom:3px;transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.gal-link:hover{color:var(--maroon);border-color:var(--maroon)}
.gal-dati{display:grid;gap:9px}
.gal-riga{display:grid;grid-template-columns:minmax(84px,.7fr) minmax(0,1.3fr);gap:12px;align-items:baseline}
.gal-riga dt{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-56)}
.gal-riga dd{font-size:13px;color:var(--ink-84)}
/* l'invito per gli ottici: una riga piccola in fondo, non un'altra sezione */
.gal-visita{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:2px;
  padding-top:14px;border-top:1px solid var(--border-soft);font-size:11.5px;letter-spacing:-.005em;color:var(--ink-56);
}
.gal-visita-cosa{color:var(--ink);transition:color var(--t-base) var(--ease)}
.gal-visita svg{color:var(--ink);transition:transform .45s var(--ease-molla),color var(--t-base) var(--ease)}
.gal-visita:hover .gal-visita-cosa,.gal-visita:hover svg{color:var(--maroon)}
.gal-visita:hover svg{transform:translateX(4px)}

.gal-striscia-cornice{position:relative;margin-top:clamp(22px,3.6vh,40px)}
.gal-striscia{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-width:none}
.gal-striscia::-webkit-scrollbar{display:none}
.gal-mini{flex:none;width:clamp(96px,7.6vw,128px);display:grid;gap:8px;scroll-snap-align:center;text-align:left;padding:0}
.gal-mini-foto{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--border-soft);transition:box-shadow var(--t-base) var(--ease),transform .5s var(--ease)}
.gal-mini-foto > .img-slot,.gal-mini-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.gal-mini-foto .img-slot span{display:none}
.gal-mini-nome{font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-56);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--t-base) var(--ease)}
.gal-mini:hover .gal-mini-foto{transform:translateY(-2px)}
.gal-mini.attiva .gal-mini-foto{box-shadow:0 0 0 1.5px var(--ink)}
.gal-mini.attiva .gal-mini-nome{color:var(--ink)}
.gal-mini.is-non-disponibile .gal-mini-foto{opacity:.5}
@media (hover:none){ .gal-freccia{opacity:1} }

@media (max-width:1000px){
  .gal-scena{grid-template-columns:minmax(0,1fr)}
  .gal-viste{grid-row:2;grid-template-columns:repeat(3,minmax(0,88px));gap:10px}
  .gal-info{grid-row:3}
}

/* ---- la scheda del modello sul telefono ----------------------------------
   Composizione propria, non la versione desktop ristretta:
     · in cima una riga sola: tipo e posizione al centro, frecce da 44px ai
       lati per il modello vicino;
     · le tre foto a tutta larghezza, da sfogliare col dito (scroll-snap), con
       i trattini sotto al posto delle miniature;
     · nome, stato e colori; specifiche in due colonne; invito per gli ottici;
     · "Altri modelli" come striscia con il suo titolo;
     · l'azione principale in una barra fissa in basso, nella zona del pollice,
       con la wishlist accanto (la pastiglia flottante lì si toglie).
   Spazi sulla griglia da 8: 8 · 16 · 24 · 32 · 48. */
.gal-nav-telefono,.gal-barra-telefono,.gal-striscia-titolo{display:none}
@media (max-width:760px){
  .galleria{padding:16px 16px calc(112px + env(safe-area-inset-bottom))}
  .gal-nav-telefono{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin-bottom:16px}
  .gal-nav-btn{
    width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);
    background:var(--glass-light-bg);border:1px solid var(--glass-light-border);
    box-shadow:0 1px 2px var(--vetro-ombra),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-sotto);
    transition:opacity var(--t-base) var(--ease);
  }
  .gal-nav-btn:disabled{opacity:.3}
  .gal-nav-pos{display:flex;justify-content:center;align-items:baseline;gap:8px;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
  .gal-nav-tipo{color:var(--maroon)}
  .gal-nav-num{color:var(--ink-56);letter-spacing:.08em;font-variant-numeric:tabular-nums}

  .gal-scena{display:block}
  .gal-viste{display:none}
  .gal-anteprima{
    margin-inline:-16px;width:auto;max-height:none;border-radius:0;cursor:auto;touch-action:auto;
    aspect-ratio:4/3;background:var(--fondo-medio);
  }
  .gal-freccia{display:none}
  .gal-foto-cornice.carosello{
    display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .gal-foto-cornice.carosello::-webkit-scrollbar{display:none}
  .gal-foto-cornice.carosello .gal-foto{position:relative;inset:auto;flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
  .gal-punti{bottom:16px}
  .gal-punti i{width:16px}
  .gal-punti i.attiva{width:32px}

  .gal-info{gap:24px;padding-top:24px}
  .gal-posizione{display:none}
  .gal-nome{margin-top:0;font-size:32px}
  .gal-stato{margin-top:8px}
  .gal-azioni .gal-cuore{display:none}
  .gal-azioni{gap:16px}
  .gal-dati{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px 0;border-block:1px solid var(--border-soft)}
  .gal-riga{grid-template-columns:1fr;gap:4px}
  .gal-visita{padding-top:0;border-top:0}

  .gal-striscia-cornice{margin-top:32px}
  .gal-striscia-titolo{display:block;margin-bottom:12px;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-56)}
  .gal-striscia{gap:8px;margin-inline:-16px;padding:4px 16px 8px;scroll-padding-inline:16px}
  .gal-mini{width:112px;scroll-snap-align:start}

  .gal-barra-telefono{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--r-chip);
    background:color-mix(in srgb, var(--cream) 82%, transparent);border:1px solid var(--glass-light-border);
    box-shadow:0 1px 2px var(--vetro-ombra),0 18px 40px -16px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  }
  .gal-barra-cuore{
    flex:1;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-chip);
    font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cream);background:var(--ink);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
    transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
  }
  .gal-barra-cuore.is-on{background:transparent;color:var(--maroon);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--maroon) 40%, transparent)}
  .gal-barra-wish{
    position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--border-soft);
  }
  .gal-barra-n{
    position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
    font-size:9.5px;font-weight:600;color:var(--cream);background:var(--maroon);font-variant-numeric:tabular-nums;
  }
  html.cat-in-galleria .wish-fluttua{display:none}
  .gal-barra-n:empty{display:none}
}

/* ---- griglia ---- */
.cat-grid-section{padding:clamp(22px,3.6vh,40px) var(--cat-pad) clamp(48px,8vh,96px)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(28px,4vh,44px) clamp(14px,1.6vw,24px)}
.cat-card{display:flex;flex-direction:column;min-width:0}
.cat-card-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-panel);overflow:hidden;background:var(--fondo-medio)}
.cat-card-link{position:absolute;inset:0;display:block}
.cat-card-foto{position:absolute;inset:0;opacity:0;visibility:hidden}
.cat-card-foto.attiva{opacity:1;visibility:inherit}
.cat-card-foto > .img-slot,.cat-card-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cat-card-foto .img-slot span{max-width:16em}
.cat-card-tacche{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:4px;z-index:2;opacity:0;transition:opacity var(--t-base) var(--ease)}
.cat-card-tacche i{flex:1;height:2px;border-radius:2px;background:var(--ink-40);transition:background var(--t-base) var(--ease)}
.cat-card-tacche i.attiva{background:var(--ink)}
.cat-card:hover .cat-card-tacche{opacity:1}
.heart-btn{opacity:.9;transform-origin:center;transition:opacity .24s var(--ease),color .24s var(--ease);position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink);background:rgba(255,255,255,.3);border:1px solid var(--vetro-orlo);box-shadow:0 1px 2px var(--vetro-ombra),0 10px 28px -14px var(--vetro-ombra-lunga),inset 0 1px 1px var(--vetro-luce),inset 0 -1px 1px var(--vetro-ombra);backdrop-filter:blur(10px) saturate(190%) brightness(1.04);-webkit-backdrop-filter:blur(10px) saturate(190%) brightness(1.04)}
.heart-btn:hover,.heart-btn.is-on{color:var(--maroon)}
.cat-card-testo{padding-top:14px;display:grid;gap:6px}
.cat-card-riga{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cat-card-riga .name{font-size:16px;font-weight:400;letter-spacing:-.015em;transition:color var(--t-base) var(--ease)}
.cat-card:hover .name{color:var(--maroon)}
.cat-card-riga .disp{font-size:11.5px;color:var(--ink-72)}
.cat-card-meta{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-56)}
.cat-card-colori{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-68)}
.cat-card-colori .swatches{gap:5px;color:var(--ink-56)}
.cat-card-colori .swatch{width:11px;height:11px}
.cat-card.is-non-disponibile .cat-card-media{opacity:.62}
.cat-empty{padding:60px 0;text-align:center;font-size:13.5px;color:var(--ink-84)}
.cat-more{display:flex;justify-content:center;margin-top:clamp(28px,4vh,48px)}

.cat-footer{border-top:1px solid var(--border-strong)}
.cat-footer-inner{padding:26px clamp(18px,3vw,48px) 96px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-72)}
.cat-footer-inner a{border-bottom:1px solid rgba(108,23,30,.5)}

[hidden]{display:none !important}

.heart-btn.is-pop{animation:heartPop .36s var(--ease)}