/* Saint Luxury - design system (oro su nero, con tema chiaro opzionale) */

:root {
  /* oro: identico nei due temi */
  --oro: #D9B071;
  --oro-chiaro: #F0D6A2;
  --oro-scuro: #A77E44;
  --su-oro: #1F1509;

  --serif: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --raggio: 2px;
  --max: 1440px;
  --spazio-sezione: 56px;   /* distanza uguale sopra e sotto ogni divisore */

  /* stessa curva usata sul sito di x noemi */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transizione: 220ms var(--curva);
}

/* ============================ animazioni ============================ */

/* respiro dorato: il marchio "pulsa" piano */
@keyframes respiroOro {
  0%, 100% { opacity: .82; text-shadow: 0 0 0 rgba(217, 176, 113, 0); }
  50%      { opacity: 1;   text-shadow: 0 0 16px rgba(217, 176, 113, .45); }
}

/* lampo sul rombo dei passi e sul suo numero:
   si accende di scatto quando la luce lo raggiunge (7.6% -> 8%), poi si spegne piano */
/* L'accensione dei rombi non e' piu' a fotogrammi chiave: la gestisce
   comune.js con la classe "acceso", come sul sito di x noemi. */

/* la vetrina respira appena */
@keyframes eroeRespira {
  0%, 100% { transform: scale(1.06); }
  50%      { transform: scale(1.085); }
}

/* scintilla sulla stella della promo */
@keyframes scintilla {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .85; }
  50%      { transform: scale(1.18) rotate(8deg); opacity: 1; }
}

/* pallino che pulsa (pezzi disponibili) */
@keyframes pallinoPulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 176, 113, .55); }
  70%      { box-shadow: 0 0 0 7px rgba(217, 176, 113, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------- tema scuro (base) */

:root {
  --fondo: #0B0A08;
  --fondo-2: #100E0B;
  --superficie: #131110;
  --superficie-2: #1A1713;
  --testo: #F3EEE5;
  --testo-tenue: #B6AC99;
  --testo-debole: #8B8171;
  --accento: var(--oro);
  --accento-forte: var(--oro-chiaro);
  --filo: rgba(217, 176, 113, 0.30);
  --filo-tenue: rgba(217, 176, 113, 0.16);
  --fondino: rgba(217, 176, 113, 0.10);
  --velo-header: rgba(11, 10, 8, 0.88);
  --fondo-footer: #070605;
  --fondo-barra: #050403;
  --ombra: 0 20px 55px -30px rgba(0, 0, 0, 0.9);
  --ombra-alta: 0 34px 80px -34px rgba(0, 0, 0, 1);
  --foto: linear-gradient(160deg, #191612, #0E0C0A);
  color-scheme: dark;
}

/* Il tema chiaro e' stato tolto: il sito e il pannello sono sempre neri e oro. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* "hidden" deve valere sempre: senza questo le regole con display (.btn,
   .card, .chip...) vincevano e l'elemento restava in pagina lo stesso */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--oro); color: var(--su-oro); }

.contenitore { width: min(100% - 40px, var(--max)); margin-inline: auto; }
@media (max-width: 640px) { .contenitore { width: calc(100% - 28px); } }

/* ------------------------------------------------------------ tipografia */

h1, h2, h3, .display { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }

/* occhiello con il filo corto che sfuma, come su x noemi */
.occhiello {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accento);
  font-weight: 600;
  margin-bottom: 14px;
}
.occhiello::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 120px;
  background: linear-gradient(90deg, var(--oro), transparent);
}

/* divisore fra le sezioni: due fili che sfumano e tre rombi.
   Non ha spazio proprio: lo spazio sopra e sotto lo danno le sezioni,
   che usano lo stesso valore (--spazio-sezione) cosi' resta in mezzo. */
.divisore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-block: 0;
}
.divisore::before, .divisore::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, .42) 60%, var(--oro));
}
.divisore::after { background: linear-gradient(90deg, var(--oro), rgba(217, 176, 113, .42) 40%, transparent); }
.divisore span {
  width: 6px;
  height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
  opacity: .55;
}
.divisore span:nth-child(2) { width: 9px; height: 9px; background: var(--oro-chiaro); opacity: 1; }

/* filetti orizzontali e verticali che sfumano alle estremita' */
.filo-sfuma-x {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--filo) 12%, var(--filo) 88%, transparent);
}

.titolo-sezione {
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 0 0 6px;
  line-height: 1.12;
}

.sottotitolo { color: var(--testo-tenue); margin: 0; max-width: 62ch; }

.filo-oro {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  opacity: .55;
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------- annuncio */

.annuncio {
  background: var(--fondo-barra);
  color: var(--oro-chiaro);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--filo-tenue);
}

/* -------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--velo-header);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--filo);
}

.header-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 0;
}

.marchio { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.marchio img { width: 42px; height: 42px; }
/* il nome sta centrato sopra la riga "Selezione, stile, ..." */
.marchio-testo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}
.marchio-nome {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .16em;
  color: var(--accento-forte);
  text-transform: uppercase;
  animation: respiroOro 7s ease-in-out infinite;
}
.marchio-payoff {
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--testo-debole);
  margin-top: 5px;
}

/* menu centrato rispetto alla pagina */
/* Il menu sta nel flusso, non piu' "position: absolute" centrata: cosi' non
   occupava spazio e la targhetta sponsor gli finiva sopra. */
.nav {
  display: flex;
  gap: 20px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.nav a { white-space: nowrap; }
.nav a {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
/* fra i 1300 e i 1150 px le voci piu' grandi non ci stavano: si stringono un po' */
@media (max-width: 1150px) {
  .nav { gap: 14px; }
  .nav a { font-size: 13px; letter-spacing: .1em; }
}
.nav a:hover, .nav a.attivo { color: var(--testo); border-bottom-color: var(--oro); }

.totale-prodotti-header {
  margin: 0;
  padding: 0 0 10px;
  color: var(--testo);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.header-azioni { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.cerca {
  position: relative;
  flex: 0 1 260px;
  min-width: 170px;
}
.cerca input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie-2);
  color: var(--testo);
  outline: none;
  font-size: 14px;
  transition: border-color .18s, background .18s;
}
.cerca input::placeholder { color: var(--testo-debole); }
.cerca input:focus { border-color: var(--oro); background: var(--superficie); }
.cerca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: .55; }

/* stessa altezza della barra di ricerca */
.tema, .burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: var(--superficie-2);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  color: var(--accento);
  padding: 0;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.tema:hover, .burger:hover { background: var(--fondino); border-color: var(--oro); }

/* anche i tasti nell'intestazione seguono la stessa altezza */
.header-azioni .btn { height: 44px; }

.burger { display: none; }

/* il menu ha 6 voci lunghe: sotto questa larghezza passa all'hamburger,
   altrimenti si schiaccia contro ricerca e targhetta */
@media (max-width: 1300px) {
  .nav { display: none; }
  .burger { display: grid; }
  .cerca { flex: 1 1 auto; max-width: none; }
}
@media (max-width: 560px) {
  /* la riga sotto il nome resta anche da telefono, solo piu' piccola */
  .marchio-payoff { font-size: 7.5px; letter-spacing: .14em; margin-top: 4px; white-space: nowrap; }
  .marchio-nome { font-size: 18px; }
  .marchio img { width: 34px; height: 34px; }
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 16px;
  border-top: 1px solid var(--filo);
}
.nav-mobile.aperta { display: flex; }
.nav-mobile a {
  padding: 11px 4px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--filo-tenue);
}

/* --------------------------------------------------------------- bottoni */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-oro {
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro) 48%, var(--oro-scuro));
  color: var(--su-oro);
}
.btn-oro:hover { filter: brightness(1.05); }

.btn-filo {
  background: transparent;
  border-color: var(--oro);
  color: var(--accento);
}
.btn-filo:hover { background: var(--fondino); color: var(--accento-forte); }

.btn-nero {
  background: var(--fondo-barra);
  color: var(--oro-chiaro);
  border-color: var(--filo);
}
.btn-nero:hover { background: var(--superficie-2); }

.btn-piccolo { padding: 9px 16px; font-size: 11px; }
/* "torna alla collezione" nella pagina del pezzo: solo la freccia */
.torna-freccia { width: 44px; padding: 0; }

/* Una sezione nascosta (es. recensioni senza recensioni) si lasciava dietro
   il suo divisore: ne uscivano due di fila sopra le domande frequenti */
section[hidden] + .contenitore { display: none; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 78% 12%, var(--fondino), transparent 70%),
    /* finisce esattamente col colore della pagina: nessuno stacco visibile */
    linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo-2) 45%, var(--fondo) 100%);
  overflow: hidden;
}
/* A sinistra il titolo, a destra la giostra dei pezzi: prima quello spazio
   restava nero e vuoto. Sotto i 1100px la giostra passa sotto al testo. */
.hero-alto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
  gap: 36px;
  align-items: center;
}
@media (max-width: 1100px) {
  .hero-alto { grid-template-columns: 1fr; gap: 30px; }
}

.hero-testo { padding: 30px 0 0; max-width: 62ch; }
.hero h1 {
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.02;
  margin: 16px 0 18px;
  letter-spacing: -0.01em;
}
/* Da schermo largo il titolo resta su una riga sola e arriva fin sotto la
   giostra: la misura si adatta alla larghezza della colonna, non va a capo. */
@media (min-width: 1101px) {
  .hero-testo { max-width: none; }
  .hero h1 { font-size: min(4.6vw, 64px); white-space: nowrap; }
  .hero-testo p { max-width: 52ch; }
}
.hero h1 em { font-style: italic; color: var(--accento); }
.hero p { font-size: 16.5px; color: var(--testo-tenue); max-width: 52ch; margin: 0 0 30px; }
.hero-azioni { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- i pezzi in vetrina, sotto al titolo ---- */

/* ------------------------------------------------------------- giostra

   Il riquadro a destra del titolo: le foto si danno il cambio in dissolvenza,
   sotto la barretta che si riempie, il contatore 01 / 08, i pallini e le due
   frecce. Tutto qui dentro, niente librerie. */

/* il riquadro non sta appiccicato alla pagina: e' girato nello spazio, con la
   foto che sporge in fuori e l'ombra che cade di lato */
.giostra {
  position: relative;
  padding: 24px 0 8px;
  perspective: 1500px;
  perspective-origin: 62% 46%;
}

/* Luce che si apre da dietro il riquadro e riempie il nero intorno: sta sotto
   (z-index 0), il riquadro 3D le passa davanti. Respira piano. */
@keyframes giostraLuce {
  0%, 100% { opacity: .7;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
.giostra::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  width: 125%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(217, 176, 113, .34) 0%,
    rgba(217, 176, 113, .14) 38%,
    rgba(217, 176, 113, .04) 58%,
    transparent 72%);
  filter: blur(34px);
  animation: giostraLuce 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.giostra-telaio { z-index: 1; }
@media (max-width: 1100px) { .giostra { padding-top: 0; } }

@keyframes giostraGalleggia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.giostra-dondolo { animation: giostraGalleggia 7s ease-in-out infinite; }

.giostra-telaio {
  position: relative;
  border: 1px solid var(--filo);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--superficie), var(--fondo-2));
  padding: 14px;
  transform-style: preserve-3d;
  /* le due inclinazioni le muove app.js seguendo il mouse */
  transform: rotateY(var(--gy, -9deg)) rotateX(var(--gx, 4deg));
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
  box-shadow:
    -30px 36px 70px -34px rgba(0, 0, 0, .95),
    -10px 14px 26px -18px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(217, 176, 113, .08);
  will-change: transform;
}

/* riflesso obliquo sul vetro del riquadro */
.giostra-telaio::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .09) 0%,
    rgba(255, 255, 255, .02) 26%,
    transparent 46%);
  pointer-events: none;
}

.giostra-foto {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--foto);
  /* la foto viene avanti rispetto al telaio: e' quello che da' la profondita' */
  transform: translateZ(34px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .95);
}

.giostra-barra, .giostra-piede { transform: translateZ(14px); }

@media (max-width: 1100px) {
  /* da telefono il riquadro torna dritto: girato si leggerebbe peggio */
  .giostra { perspective: none; }
  .giostra-telaio { transform: none; }
  .giostra-foto { transform: none; }
  .giostra-barra, .giostra-piede { transform: none; }
  .giostra-dondolo { animation: none; }
}

/* le lastre stanno una sopra l'altra: si vede solo quella "viva" */
.giostra-lastra {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--curva), transform 6s linear;
  pointer-events: none;
}
.giostra-lastra.viva {
  opacity: 1;
  transform: scale(1);   /* piano piano si "dezooma": l'immagine respira */
  pointer-events: auto;
}
.giostra-lastra img { width: 100%; height: 100%; object-fit: cover; }

/* sfumatura in basso, perche' la scritta si legga su qualsiasi foto */
.giostra-velo {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(5, 4, 3, .88));
  pointer-events: none;
}

.giostra-scritta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.giostra-categoria {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.giostra-nome {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--testo);
}
.giostra-prezzo { font-size: 13px; color: var(--testo-tenue); }

.giostra-barra {
  margin-top: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--filo-tenue);
  overflow: hidden;
}
.giostra-barra i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--oro-scuro), var(--oro-chiaro));
}

.giostra-piede {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.giostra-conta {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--testo-debole);
  white-space: nowrap;
}
.giostra-conta b { color: var(--oro); font-weight: 600; }

.giostra-pallini { display: flex; gap: 7px; margin-left: auto; }
.giostra-pallino {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--filo);
  cursor: pointer;
  transition: width var(--transizione), background var(--transizione);
}
.giostra-pallino.viva {
  width: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--oro-chiaro), var(--oro));
}

.giostra-frecce { display: flex; gap: 6px; }
.giostra-freccia {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--filo-tenue);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--testo-tenue);
  cursor: pointer;
  transition: color var(--transizione), border-color var(--transizione),
              background var(--transizione);
}
.giostra-freccia:hover {
  color: var(--su-oro);
  border-color: var(--oro);
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
}

@media (prefers-reduced-motion: reduce) {
  .giostra-lastra { transition: none; transform: none; }
  .giostra-lastra.viva { transform: none; }
}

.vetrina { margin-top: 42px; }
/* "In vetrina" e "Vedi tutto il negozio" stanno piu' in basso, staccate dal
   blocco di sopra e appoggiate alla fila dei pezzi a cui si riferiscono. */
.vetrina-testa {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
  margin-bottom: 8px;
}
/* l'occhiello ha una riga d'aria sua: qui la togliamo, altrimenti la scritta
   resta lontana dalle foto anche con margine zero */
.vetrina-testa .occhiello { margin: 0; line-height: 1.2; }
.vetrina-testa .vetrina-tutti { padding-bottom: 0; }
.vetrina-tutti {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  text-decoration: none;
  border-bottom: 1px solid var(--filo);
  padding-bottom: 2px;
  transition: color .18s var(--curva), border-color .18s var(--curva);
}
.vetrina-tutti:hover { color: var(--accento); border-color: var(--oro); }
.vetrina-griglia {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1280px) { .vetrina-griglia { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1040px) { .vetrina-griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .vetrina-griglia { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

@media (max-width: 980px) {
  .hero-testo { padding-top: 40px; }
  .vetrina { margin-top: 32px; }
}

/* ---------------------------------------------------------- strisce info */

/* elenco dei servizi, dentro la vetrina sotto le statistiche */
/* Distanze su una scala sola: 32 sopra la striscia, 24 dentro ai filetti,
   16 fra una voce e l'altra, 6 fra titolo e testo. Niente numeri a caso. */
.striscia {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Un solo filetto sottile sopra, sfumato ai lati. Le due righe oro piene
   sopra e sotto tagliavano la pagina in due. */
.striscia::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 15%, var(--filo) 85%, transparent);
}
.striscia > div {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
}
/* filetto fra una voce e l'altra: verticale in riga, orizzontale in colonna */
.striscia > div + div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--filo), rgba(217, 176, 113, .12) 75%, transparent);
}
/* Con la vetrina a tutta larghezza le quattro voci stanno in riga: su una
   colonna sola le righe di testo diventavano lunghissime. */
@media (min-width: 981px) {
  .striscia {
    flex-direction: row;
    gap: 0;
  }
  .striscia > div {
    flex: 1 1 0;
    padding: 4px 24px;
    /* Le quattro voci sono alte uguali ma hanno testi di lunghezza diversa:
       prima partivano tutte incollate in alto e sotto restava il vuoto. Con
       la griglia il blocco (icona + testo) sta al centro in verticale, e
       l'icona resta comunque in linea col titolo. */
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: start;
  }
  .striscia > div:first-child { padding-left: 0; }
  .striscia > div:last-child { padding-right: 0; }
  .striscia > div + div::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--filo) 20%, var(--filo) 80%, transparent);
  }
  .striscia p { max-width: none; }
}
.striscia strong {
  display: block;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.3;
}
.striscia p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--testo-tenue); max-width: 52ch; }
/* l'icona allineata alla riga del titolo, non al bordo del blocco */
.striscia svg { flex: 0 0 auto; color: var(--oro); margin-top: 1px; }
.striscia > div > div { min-width: 0; }

/* ------------------------------------------------------------- promo */

.promo {
  background:
    linear-gradient(90deg, var(--fondino), transparent 45%, var(--fondino)),
    var(--fondo-2);
  border-bottom: 1px solid var(--filo);
}
.promo-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  flex-wrap: wrap;
  text-align: center;
}
.promo-stella {
  color: var(--oro);
  font-size: 18px;
  line-height: 1;
  animation: scintilla 3.4s ease-in-out infinite;
}
.promo p {
  margin: 0;
  font-size: 14.5px;
  letter-spacing: .04em;
  color: var(--testo);
}
.promo p b {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accento-forte);
  letter-spacing: .02em;
  margin-left: 4px;
}

/* ------------------------------------------------- come funziona (passi) */

.sezione-passi { padding: var(--spazio-sezione) 0; }

.passi {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  counter-reset: passo;
}

/* la linea dorata che attraversa tutti i passi */
.passi::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 7px;
  right: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro) 10%, var(--oro) 90%, transparent);
  opacity: .75;
}

/* il bagliore che corre dentro la linea e accende i rombi al suo passaggio */
.passi::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 7px;
  right: 7px;
  height: 3px;
  border-radius: 3px;
  pointer-events: none;
  /* la posizione la muove comune.js, fotogramma per fotogramma */
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, .85) 75%, var(--oro-chiaro))
              no-repeat 0 0 / 170px 100%;
  background-position: var(--bagliore, -170px) 0;
}

.passo {
  position: relative;
  padding: 38px 26px 30px 0;
  counter-increment: passo;
}
.passo + .passo { padding-left: 26px; }

/* rombo che segna il passo, appoggiato sulla linea */
.passo-segno {
  position: absolute;
  top: 7px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--fondo);
  border: 1px solid var(--oro);
  transform: rotate(45deg);
  transition: background .4s ease, transform .5s ease, box-shadow .4s ease;
}
.passo + .passo .passo-segno { left: 26px; }
.passo-segno::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--oro);
  transform: scale(0);
  transition: transform .4s ease;
}
.passo:hover .passo-segno { transform: rotate(45deg) scale(1.25); box-shadow: 0 0 0 6px var(--fondino); }
.passo:hover .passo-segno::after { transform: scale(1); }

/* Acceso/spento come su x noemi: e' comune.js a mettere e togliere la classe
   "acceso", e ne tiene acceso uno solo alla volta. Niente animazioni a tempo,
   quindi il rombo non puo' spegnersi mentre il bagliore e' ancora sopra. */
.passo.acceso .passo-segno {
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  box-shadow: 0 0 0 5px rgba(217, 176, 113, .22), 0 0 18px rgba(240, 214, 162, .9);
}
.passo.acceso h3::before {
  color: var(--oro-chiaro);
  text-shadow: 0 0 12px rgba(240, 214, 162, .85);
}
.passo h3::before { transition: color .45s ease, text-shadow .45s ease; }

.passo-quando {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 10px;
}
.passo h3 {
  font-size: 23px;
  margin: 0 0 9px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.passo h3::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--filo);
  /* il colore acceso arriva da .passo.acceso, con la sua transizione */
}
.passo p { font-size: 15px; color: var(--testo-tenue); margin: 0; }
@media (max-width: 860px) {
  .passi { grid-template-columns: 1fr; row-gap: 6px; }
  .passo, .passo + .passo { padding: 8px 0 26px 26px; }
  .passo .passo-segno, .passo + .passo .passo-segno { left: 0; top: 11px; }

  /* la linea e il bagliore diventano verticali */
  .passi::before {
    top: 11px;
    bottom: 11px;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--oro) 8%, var(--oro) 92%, transparent);
  }
  .passi::after {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(217, 176, 113, .85) 75%, var(--oro-chiaro))
                no-repeat 0 0 / 100% 170px;
    background-position: 0 var(--bagliore-y, -170px);
  }
}

/* comparsa a scorrimento (come su x noemi) */
[data-rivela] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1);
}
[data-rivela].visto { opacity: 1; transform: none; }
[data-rivela][data-ritardo="1"] { transition-delay: .08s; }
[data-rivela][data-ritardo="2"] { transition-delay: .16s; }
[data-rivela][data-ritardo="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-rivela] { opacity: 1; transform: none; transition: none; }
}

.fiducia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 46px;
  padding: 30px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--fondino);
}
.fiducia h3 { font-size: 26px; margin: 8px 0 8px; }
.fiducia p { margin: 0; color: var(--testo-tenue); font-size: 14.5px; max-width: 46ch; }
.fiducia-profili { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .fiducia { grid-template-columns: 1fr; }
  .fiducia-profili { justify-content: flex-start; }
}
.profilo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  transition: border-color .18s, transform .18s, background .18s;
}
.profilo:hover { border-color: var(--oro); transform: translateY(-2px); }
.profilo svg { color: var(--oro); flex: 0 0 auto; }
.profilo span { display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; color: var(--testo-debole); }
.profilo b { font-size: 15px; color: var(--accento-forte); font-weight: 600; }

/* ---------------------------------------------------- perche sceglierci */

.sezione-perche { padding: var(--spazio-sezione) 0; }
.motivi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--filo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  margin-top: 34px;
}
@media (max-width: 900px) { .motivi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .motivi { grid-template-columns: 1fr; } }
.motivo {
  position: relative;
  background: var(--superficie);
  padding: 28px 24px 30px;
  transition: background .22s var(--curva);
}
/* La scheda non si muove: su una griglia con gap da 1px qualsiasi transform
   (alzata o ingrandita) scopre o copre i filetti. L'hover lavora solo dentro
   la cella: filo oro che si apre in alto, fondo un filo piu' chiaro, icona e
   titolo che si accendono. */
.motivo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--curva);
}
.motivo:hover { background: var(--superficie-2); }
.motivo:hover::before { transform: scaleX(1); }
.motivo svg {
  color: var(--oro);
  margin-bottom: 14px;
  transition: color .2s ease, transform .22s var(--curva);
}
.motivo:hover svg { color: var(--oro-chiaro); transform: scale(1.08); }
.motivo h3 {
  font-size: 21px;
  margin: 0 0 8px;
  transition: color .22s var(--curva);
}
.motivo:hover h3 { color: var(--accento); }
.motivo p { margin: 0; font-size: 14px; color: var(--testo-tenue); }

/* ------------------------------------------------- foto controllo qualita' */

.sezione-foto { padding: var(--spazio-sezione) 0; }
.foto-servizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--filo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  margin-top: 34px;
}
@media (max-width: 900px) { .foto-servizi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .foto-servizi { grid-template-columns: 1fr; } }

.foto-servizio {
  position: relative;
  background: var(--superficie);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: background .22s var(--curva);
}
/* come le schede "perche' sceglierci": niente transform, la griglia ha filetti da 1px */
.foto-servizio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--curva);
}
.foto-servizio:hover { background: var(--superficie-2); }
.foto-servizio:hover::before { transform: scaleX(1); }
.foto-servizio svg { color: var(--oro); flex: 0 0 auto; margin-top: 2px; }
.foto-servizio > div { flex: 1 1 auto; min-width: 0; }
.foto-servizio h3 { font-size: 16px; margin: 0 0 4px; }
.foto-servizio p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--testo-tenue); }

/* il prezzo sta a destra, centrato sull'altezza del riquadro */
.foto-prezzo {
  flex: 0 0 auto;
  align-self: center;
  text-align: right;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--accento);
  line-height: 1.2;
  white-space: nowrap;
}
.foto-prezzo.gratis {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-debole);
}
/* la voce inclusa ha lo stesso fondo delle altre: si distingue dal prezzo */

.foto-nota {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--testo-debole);
}

/* riga del codice invito dentro la finestra di acquisto */
.modale-invito {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px dashed var(--filo);
  border-radius: var(--raggio);
  background: var(--fondino);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--testo-tenue);
  text-align: left;
}
.modale-invito b { color: var(--accento); letter-spacing: .08em; }

/* ------------------------------------------------------- codice invito */

.sezione-referral { padding: var(--spazio-sezione) 0; }
.referral-box {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 30px;
  align-items: center;
  padding: 30px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--fondino);
}
@media (max-width: 860px) { .referral-box { grid-template-columns: 1fr; } }
.referral-box .titolo-sezione { margin-top: 8px; }
.referral-box .sottotitolo { margin-bottom: 0; }
.referral-codice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  border: 1px solid var(--oro);
  border-radius: var(--raggio);
  background: var(--superficie);
  text-align: center;
}
.referral-etichetta {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
}
.referral-codice b {
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .06em;
  color: var(--accento);
  /* va a capo tra le parole, non a meta' ("Instag / ram") */
  overflow-wrap: break-word;
}
.referral-nota { font-size: 11.5px; color: var(--testo-debole); line-height: 1.5; }

/* ----------------------------------------------------------- recensioni */

.sezione-recensioni { padding: var(--spazio-sezione) 0; }
.recensioni-griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 34px;
}
@media (max-width: 1100px) { .recensioni-griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .recensioni-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .recensioni-griglia { grid-template-columns: 1fr; } }

.recensione {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recensione-nome { font-size: 14px; font-weight: 600; }
.recensione-stelle { font-size: 13px; letter-spacing: 2px; line-height: 1; }
.recensione-stelle .piena { color: var(--oro); }
.recensione-stelle .vuota { color: var(--filo); }
.recensione-quando { font-size: 11.5px; color: var(--testo-debole); }
.recensione p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--testo-tenue);
}

/* ------------------------------------------------------------------ faq */

.sezione-faq { padding: var(--spazio-sezione) 0; }
.faq-elenco {
  margin-top: 34px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.faq-voce { border-top: 1px solid var(--filo); background: var(--superficie); }
.faq-voce:first-child { border-top: 0; }
/* Stessi 20px dappertutto: sopra e sotto la domanda, e sotto la risposta.
   Prima la domanda aveva 18 e la risposta 20, e la fascia dell'hover
   finiva attaccata al testo sotto. */
.faq-voce > summary {
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  list-style: none;
  transition: background .2s var(--curva), color .2s var(--curva);
}
/* la risposta si stacca dalla domanda e non tocca la voce successiva */
.faq-voce[open] > summary { padding-bottom: 12px; }
.faq-voce > summary::-webkit-details-marker { display: none; }
.faq-voce > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--oro);
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.faq-voce[open] > summary::after { content: '−'; }
/* hover sobrio: il testo non cambia colore, si accende solo il segno a destra
   e il fondo si schiarisce appena. Prima diventava tutto oro e strideva. */
.faq-voce > summary:hover { background: var(--superficie-2); }
.faq-voce > summary:hover::after { color: var(--oro-chiaro); }
.faq-voce[open] > summary { color: var(--accento); }
.faq-voce p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--testo-tenue);
  max-width: 78ch;
}

/* --------------------------------------------------------------- sponsor */

.sezione-sponsor { padding: var(--spazio-sezione) 0; }
.sponsor-riquadro {
  margin-top: 26px;
  border: 1px dashed var(--filo);
  border-radius: var(--raggio);
  background: var(--fondino);
  padding: 46px 24px;
  text-align: center;
}
.sponsor-scritta {
  display: block;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accento-forte);
  margin-bottom: 10px;
}
.sponsor-riquadro p { margin: 0; color: var(--testo-tenue); font-size: 14.5px; }

/* --------------------------------------------------------------- catalogo */

/* poco spazio in alto: il menu categorie deve stare subito sotto
   l'intestazione, non a meta' schermo */
.catalogo { padding: 8px 0 80px; }

/* ricerca e ordinamento sulla stessa riga: la ricerca a sinistra, non larga
   quanto la pagina, e l'ordinamento subito dopo */
.riga-strumenti {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* freccina disegnata e spazio suo a destra: con quella di sistema il testo
   ci finiva addosso e la casella restava sbilanciata */
.riga-strumenti > select {
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background-color: var(--superficie);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--oro) 50%),
    linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position:
    right 16px center,
    right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--testo);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 34px;
  cursor: pointer;
  outline: none;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.riga-strumenti > select:hover,
.riga-strumenti > select:focus { border-color: var(--oro); }
.riga-strumenti > select option { background: var(--superficie); color: var(--testo); }

.cerca-catalogo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  padding: 0 10px;
  height: 36px;
  /* prende tutto lo spazio che resta: l'ordinamento rimane all'estrema destra */
  flex: 1 1 auto;
  min-width: 200px;
}
.cerca-catalogo svg { color: var(--accento); flex: 0 0 auto; }
.cerca-catalogo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: var(--testo);
}
.cerca-catalogo input::placeholder { color: var(--testo-debole); }
.cerca-catalogo button {
  border: 0;
  background: none;
  color: var(--testo-debole);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.cerca-catalogo button:hover { color: var(--testo); }

/* Barra delle categorie: una riga sola, scorrevole quando non ci sta.
   Sostituisce il vecchio blocco che andava a capo su piu' righe. */
.pillole {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pillole::-webkit-scrollbar { display: none; }
.pillole .pillola { flex: 0 0 auto; }
.pillole::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 12%, var(--filo) 88%, transparent);
}
.pillola {
  border: 1px solid var(--filo);
  background: transparent;
  color: var(--testo);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.pillola span { opacity: .5; margin-left: 6px; font-size: 12px; }
.pillola:hover { border-color: var(--oro); color: var(--testo); transform: translateY(-1px); }
.pillola.attiva {
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro) 55%, var(--oro-scuro));
  color: var(--su-oro);
  border-color: transparent;
  font-weight: 600;
}
.pillola.attiva span { opacity: .75; }

.catalogo-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.filtri {
  display: none;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  padding: 20px 18px;
  background: var(--superficie);
  margin-bottom: 22px;
  animation: entra .22s ease;
}
.filtri.aperti { display: block; }
.filtri-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.filtri-griglia.due { grid-template-columns: repeat(2, 1fr); }

/* sezioni Uomo / Donna: un unico selettore a segmenti, come sui negozi online */
.sezioni {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--superficie);
}
.sezione-tasto {
  border: 0;
  background: transparent;
  color: var(--testo-tenue);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s var(--curva), color .18s var(--curva);
}
.sezione-tasto span {
  opacity: .55;
  margin-left: 7px;
  font-size: 12px;
  font-weight: 500;
}
.sezione-tasto:hover { color: var(--testo); background: var(--fondino); }
.sezione-tasto.attiva {
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro) 55%, var(--oro-scuro));
  color: var(--su-oro);
}
.sezione-tasto.attiva:hover { color: var(--su-oro); }
.sezione-tasto.attiva span { opacity: .7; }
@media (max-width: 520px) {
  .sezioni { display: flex; width: 100%; }
  .sezione-tasto { flex: 1; padding: 10px 8px; font-size: 12.5px; }
}
.filtri { margin-bottom: 20px; }
@media (max-width: 760px) { .filtri-griglia { grid-template-columns: 1fr; gap: 6px; } }

.filtro-gruppo { padding: 14px 0; border-bottom: 1px solid var(--filo-tenue); }
.filtro-gruppo:last-child { border-bottom: 0; padding-bottom: 0; }
.filtro-gruppo:first-child { padding-top: 0; }
.filtro-titolo {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
  margin-bottom: 11px;
}
.filtro-voce {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--testo-tenue);
}
.filtro-voce:hover { color: var(--testo); }
.filtro-voce input { accent-color: var(--oro); width: 15px; height: 15px; cursor: pointer; }
.filtro-voce .conteggio { margin-left: auto; font-size: 11px; color: var(--testo-debole); }

.prezzo-range { display: flex; gap: 8px; align-items: center; }
.prezzo-range input {
  width: 100%;
  height: 40px;
  padding: 0 11px;          /* testo centrato in verticale nel riquadro */
  line-height: normal;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie-2);
  color: var(--testo);
  font-size: 13.5px;
  outline: none;
}
.prezzo-range input:focus { border-color: var(--oro); }

/* categorie a sinistra, conteggio + filtri + ordina a destra, stessa barra */
.barra-negozio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.barra-negozio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 12%, var(--filo) 88%, transparent);
}
.barra-negozio .pillole {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}
.barra-negozio .pillole::after { display: none; }
.barra-negozio .strumenti {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
.barra-negozio .strumenti .conteggio-risultati { white-space: nowrap; }
.barra-negozio .strumenti .btn-piccolo { height: 38px; }
.barra-negozio .strumenti select {
  height: 38px;
  padding: 0 12px;
  line-height: normal;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
@media (max-width: 760px) {
  .barra-negozio .strumenti { width: 100%; }
  .barra-negozio .strumenti select { flex: 1; }
}

.barra-strumenti {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.barra-strumenti::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 12%, var(--filo) 88%, transparent);
}
.conteggio-risultati { font-size: 13px; color: var(--testo-tenue); margin-right: 4px; }
.barra-strumenti #mostraFiltri { margin-left: auto; }
.barra-strumenti select {
  height: 38px;
  padding: 0 12px;          /* la scritta resta centrata nel riquadro */
  line-height: normal;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.barra-strumenti .btn-piccolo { height: 38px; }
.barra-strumenti select:focus { border-color: var(--oro); }

.chip-attivi { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--fondino);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--accento);
  cursor: pointer;
}
.chip:hover { background: rgba(217, 176, 113, .22); }

/* targhetta sponsor in alto a destra */
/* alta come la casella di ricerca che ha accanto (44px) */
.sponsor-targa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--fondino);
  text-decoration: none;
  line-height: 1.2;
  flex: 0 0 auto;
}
.sponsor-targa small {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
}
.sponsor-targa b {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--accento);
  font-weight: 600;
  white-space: nowrap;
}
a.sponsor-targa:hover { border-color: var(--oro); background: var(--superficie-2); }
@media (max-width: 860px) { .sponsor-targa { display: none; } }

/* richiamo al negozio, in home al posto del catalogo */
.sezione-vaialnegozio { padding: var(--spazio-sezione) 0; }
.vaialnegozio {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 34px 30px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background:
    radial-gradient(700px 300px at 85% 20%, var(--fondino), transparent 70%),
    var(--superficie);
}
.vaialnegozio > div { flex: 1 1 320px; }
.vaialnegozio .titolo-sezione { margin-top: 8px; }
.vaialnegozio .sottotitolo { margin-bottom: 0; }
.vaialnegozio .btn { flex: 0 0 auto; }

/* ----------------------------------------------- menu del negozio */

/* Niente overflow qui dentro: bastava "overflow-x: auto" per far diventare
   "auto" anche l'asse verticale, e il contenitore ritagliava le tendine.
   Le voci vanno a capo invece di scorrere. */
/* Niente piu' due sbarre piene sopra e sotto: resta un solo filetto in basso,
   sfumato ai lati, e le voci respirano. */
.menu-negozio {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2px;
  margin: 0 0 26px;
}
.menu-negozio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 15%, var(--filo) 85%, transparent);
}

.menu-gruppo { position: relative; flex: 0 0 auto; }

.menu-voce {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--testo-tenue);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  transition: color .18s var(--curva);
}
/* freccina disegnata, non un carattere: Inter non ha il glifo e usciva un puntino */
.menu-voce i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--oro);
  border-bottom: 1.5px solid var(--oro);
  /* prima lo spostamento e poi la rotazione: al contrario, girando di 225
     gradi lo spostamento finiva dalla parte sbagliata e la freccia saltava */
  transform: translateY(-2px) rotate(45deg);
  flex: 0 0 auto;
}
.menu-voce:hover { color: var(--accento); }
/* filetto oro sotto la voce scelta, largo quanto la scritta */
.menu-voce.attiva { color: var(--accento); font-weight: 600; }
.menu-voce.attiva::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
}

.menu-tendina {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s var(--curva), transform .16s var(--curva), visibility .16s;
}
.menu-gruppo:hover .menu-tendina,
.menu-gruppo:focus-within .menu-tendina,
.menu-gruppo.aperto .menu-tendina {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* la tendina aperta col clic resta aperta anche togliendo il mouse */
.menu-gruppo.aperto > .menu-voce { color: var(--accento); }
.menu-gruppo.aperto > .menu-voce i { transform: translateY(2px) rotate(225deg); }

/* Tendina aperta col dito: app.js la sposta dentro <body>. Su iPhone una
   tendina "fixed" dentro la fascia che scorre di lato veniva tagliata e non
   si vedeva niente. */
.menu-tendina.staccata {
  position: fixed;
  z-index: 120;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu-voce i { transition: transform .16s var(--curva); }
.menu-sotto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--testo-tenue);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--raggio);
  cursor: pointer;
  white-space: nowrap;
}
.menu-sotto span { margin-left: auto; font-size: 11px; color: var(--testo-debole); letter-spacing: 0; }
.menu-sotto:hover, .menu-sotto.attiva { background: var(--fondino); color: var(--accento); }

/* col dito niente "passaggio del mouse": la tendina si apre solo al tocco */
@media (hover: none) {
  .menu-gruppo:hover .menu-tendina { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .menu-gruppo.aperto .menu-tendina { opacity: 1; visibility: visible; transform: none; }
}

/* 5 schede per fila, che scendono al restringersi dello schermo */
.griglia-prodotti {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1280px) { .griglia-prodotti { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1040px) { .griglia-prodotti { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .griglia-prodotti { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* uomo / donna / unisex, in piccolo sotto al nome del pezzo */
.card-sezione {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-debole);
}

.card {
  position: relative;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombra); border-color: var(--oro); }

/* dentro la scheda: sopra il link al pezzo, sotto il tasto "Scarica foto" */
.card-link { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Il tasto per salvare le foto e' roba di servizio: lo vede solo chi e'
   entrato in /admin da questo dispositivo. Per i clienti non c'e'. */
.card-scarica, .scarica-pezzo { display: none; }
body.sono-admin .card-scarica { display: flex; }
body.sono-admin .scarica-pezzo { display: inline-flex; }

.card-scarica {
  cursor: pointer;
  font-family: inherit;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 12px 12px;
  padding: 9px 10px;
  border: 1px solid var(--filo-tenue);
  border-radius: var(--raggio);
  background: var(--superficie-2);
  color: var(--testo-debole);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--transizione), border-color var(--transizione),
              background var(--transizione), transform var(--transizione);
}
.card-scarica svg { transition: transform var(--transizione); }
.card:hover .card-scarica { border-color: var(--filo); color: var(--testo-tenue); }
.card-scarica:hover {
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
  border-color: var(--oro);
  color: var(--su-oro);
}
.card-scarica:hover svg { transform: translateY(2px); }
.card-scarica:active { transform: scale(.97); }
@media (max-width: 620px) { .card-scarica { margin: 0 10px 10px; letter-spacing: .1em; } }

/* la seconda foto, sopra la prima, si vede solo col mouse sulla scheda */
.card-foto-2 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s var(--curva), transform .55s var(--curva);
}
.card:hover .card-foto-2 { opacity: 1; }

.card-altre {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--raggio);
  background: rgba(5, 4, 3, .72);
  border: 1px solid var(--filo-tenue);
  color: var(--oro-chiaro);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transizione), transform var(--transizione);
}
.card:hover .card-altre { opacity: 1; transform: none; }

.card-foto {
  position: relative;
  /* un filo piu' bassa di prima: i quadratini delle altre foto si sono presi
     un po' di spazio sotto e la scheda deve restare alta come prima */
  aspect-ratio: 4 / 2.78;
  background: var(--foto);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--filo-tenue);
}
/* La foto si vede INTERA, non tagliata: i capi fotografati in verticale
   venivano decapitati dal ritaglio. Niente zoom di partenza. */
.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  transform: scale(1);
  transition: transform .55s var(--curva);
}
.card:hover .card-foto img { transform: scale(1.03); }

.card-foto .vuota { width: 52%; height: auto; opacity: .32; object-fit: contain; }

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--raggio);
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
  color: var(--su-oro);
}
.badge.scuro { background: var(--fondo-barra); color: var(--oro-chiaro); border: 1px solid var(--filo); }

/* scheda corta: nome, riga piccola, prezzo. Niente marca sopra, niente
   quadratini delle altre foto, niente etichetta "PREZZO" / "DA". */
.card-corpo { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-nome {
  font-size: 13.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-sotto {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-debole);
}
.card-prezzo {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card-prezzo b {
  font-size: 14px;
  font-weight: 600;
  color: var(--accento-forte);
  font-variant-numeric: tabular-nums;
}
.card-prezzo small { font-size: 12px; color: var(--testo-debole); text-decoration: line-through; }

/* i quadratini delle altre foto, sotto il prezzo: piccoli, per non far
   crescere la scheda */
.card-miniature {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  min-height: 18px;
}
.card-mini {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--filo-tenue);
  background: var(--fondo-barra);
  overflow: hidden;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color var(--transizione), transform var(--transizione);
}
.card-mini img { width: 100%; height: 100%; object-fit: cover; }
.card-mini:hover, .card-mini.viva { border-color: var(--oro); transform: translateY(-1px); }
.card-mini-piu {
  font-size: 10px;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--testo-debole);
}
@media (max-width: 620px) {
  .card-corpo { padding: 10px 10px 12px; }
  .card-nome { font-size: 12.5px; }
}
.card.esaurito .card-foto img { filter: grayscale(1); opacity: .5; }

.altro-sotto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}
.altro-sotto[hidden] { display: none; }
.altro-sotto span {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
}

.vuoto {
  border: 1px dashed var(--filo);
  border-radius: var(--raggio);
  padding: 64px 24px;
  text-align: center;
  color: var(--testo-tenue);
  background: var(--fondo-2);
}
.vuoto h3 { font-size: 24px; margin: 12px 0 6px; color: var(--testo); }

/* --------------------------------------------------------------- footer */

.footer {
  background: var(--fondo-footer);
  color: #D8D1C5;
  margin-top: 40px;
  padding: 56px 0 26px;
  border-top: 1px solid var(--filo);
}
/* le quattro colonne centrate fra loro, non appoggiate in alto: il blocco
   del marchio e' piu' alto e le altre restavano sfalsate */
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; align-items: center; }
@media (max-width: 860px) { .footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-in { grid-template-columns: 1fr; } }
.footer h4 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 600;
}
.footer a, .footer p { color: #B9B1A4; font-size: 13.5px; }
.footer a { display: block; padding: 4px 0; transition: color .18s; }
.footer a:hover { color: var(--oro-chiaro); }
/* nel piede: logo sopra, nome sotto, tutto incolonnato al centro */
.footer-marchio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
/* tutte le colonne del piede incolonnate al centro */
.footer-in { text-align: center; }
.footer-in p { margin-inline: auto; }
.footer-marchio img { width: 62px; }
.footer-marchio span {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: .18em;
  color: var(--oro-chiaro);
}
/* avviso in fondo: i pezzi sono esposti, non si vendono da qui */
.footer-avviso {
  margin: 36px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(217, 176, 113, .22);
  border-radius: var(--raggio);
  background: rgba(217, 176, 113, .05);
  text-align: center;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--testo-tenue);
}

.footer-basso {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(217, 176, 113, .22);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #8A8377;
}

/* ---------------------------------------------------------------- modale */

.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 3, .72);
  backdrop-filter: blur(4px);
}
.modale.aperta { display: flex; }
.modale-box {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  width: min(100%, 460px);
  padding: 34px 30px 28px;
  text-align: center;
  position: relative;
  animation: entra .28s ease;
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modale-box h3 { font-size: 28px; margin: 14px 0 8px; }
.modale-box p { color: var(--testo-tenue); margin: 0 0 22px; font-size: 14px; }
.modale-chiudi {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--testo-debole);
  cursor: pointer;
  padding: 4px 8px;
}
.modale-chiudi:hover { color: var(--testo); }
.modale-prodotto {
  border: 1px solid var(--filo);
  background: var(--fondino);
  border-radius: var(--raggio);
  padding: 12px 14px;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: center;
}
.modale-prodotto img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--filo); }
.modale-prodotto div { font-size: 13px; }
.modale-prodotto b { display: block; font-family: var(--serif); font-size: 17px; }

/* ----------------------------------------------------- pagina prodotto */

.briciole {
  padding: 22px 0 18px;
  font-size: 12px;
  color: var(--testo-debole);
  letter-spacing: .04em;
}
.briciole a { color: var(--testo-tenue); }
.briciole a:hover { color: var(--accento); }
.briciole span { margin: 0 6px; opacity: .6; }

.prodotto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-bottom: 60px;
  align-items: start;
}
@media (max-width: 980px) { .prodotto { grid-template-columns: 1fr; gap: 28px; } }

.galleria { position: sticky; top: 96px; }
@media (max-width: 980px) { .galleria { position: static; } }

.galleria-principale {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--foto);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.galleria-principale img { width: 100%; height: 100%; object-fit: cover; }

.miniature { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.miniatura {
  width: 78px;
  height: 78px;
  padding: 0;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s, transform .18s;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { transform: translateY(-2px); }
.miniatura.attiva { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }

.titolo-prodotto {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  margin: 10px 0 12px;
}

/* occhiello con rombo e filo, come sulla scheda di x noemi */
.occhiello-riga {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 10px;
}
.occhiello-riga .rombo {
  width: 8px;
  height: 8px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.occhiello-riga .filo {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--filo), transparent);
}

.nota-prezzo {
  font-size: 12.5px;
  color: var(--testo-debole);
  letter-spacing: .02em;
}
.pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--filo);
  background: var(--fondino);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accento-forte);
  white-space: nowrap;
}
.pastiglia i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  animation: pallinoPulsa 2.6s ease-out infinite;
}

.descrizione-breve {
  font-size: 15.5px;
  color: var(--testo-tenue);
  margin: 4px 0 26px;
  max-width: 58ch;
}

/* righe specifiche con icona a sinistra */
.specifiche { margin-bottom: 28px; }
.specifica {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--filo-tenue);
  align-items: start;
}
.specifica:first-child { border-top: 1px solid var(--filo-tenue); }
.specifica-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--testo-tenue);
}
.specifica-nome svg { color: var(--oro); flex: 0 0 auto; }
.specifica-valore { font-size: 14.5px; color: var(--testo); }
@media (max-width: 560px) {
  .specifica { grid-template-columns: 1fr; gap: 4px; }
}

/* etichetta della scelta (TAGLIA  42) */
.riga-scelta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.etichetta-scelta {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
}
.riga-scelta b { font-size: 15px; font-weight: 500; }

/* fascia con lo stato del pezzo */
.fascia-stato {
  border: 1px solid var(--filo);
  border-left: 3px solid var(--oro);
  background: var(--fondino);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--testo);
  margin-bottom: 18px;
}
.fascia-stato.venduta { border-left-color: #C25B5B; }

.note-consegna {
  font-size: 13px;
  line-height: 1.75;
  color: var(--testo-debole);
  margin: 0;
}

.meta-prodotto {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.meta-prodotto span {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accento);
  border: 1px solid var(--filo);
  background: var(--fondino);
  padding: 5px 10px;
  border-radius: 999px;
}
/* pallino che pulsa sulla disponibilita' */
.meta-prodotto span:last-child::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oro);
  margin-right: 7px;
  vertical-align: middle;
  animation: pallinoPulsa 2.4s ease-out infinite;
}

.riga-prezzo {
  display: flex;
  /* pastiglia e nota a meta' altezza del prezzo: allineate alla base
     sembravano cadute in basso */
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.riga-prezzo b {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 500;
  line-height: 1;
  color: var(--accento-forte);
  font-variant-numeric: tabular-nums;
}
.riga-prezzo small { font-size: 15px; color: var(--testo-debole); text-decoration: line-through; }

.blocco-taglie { margin-bottom: 26px; }
.taglie { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.taglia {
  border: 1px solid var(--filo);
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 13px 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.taglia span { display: block; font-size: 14px; font-weight: 500; }
.taglia small { display: block; font-size: 11px; color: var(--testo-debole); margin-top: 2px; }
.taglia:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-1px); }
.taglia.scelta {
  border-color: var(--oro);
  background: var(--fondino);
  box-shadow: inset 0 0 0 1px var(--oro);
}
.taglia.esaurita, .taglia:disabled {
  opacity: .42;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- livelli di qualita' (Base / Premium / Luxury): valgono per ogni scarpa --- */
.livelli-box { margin: 2px 0 26px; }
.livelli-testa {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.livelli-titolo {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--testo-debole);
}
.livelli-nota { font-size: 12.5px; color: var(--testo-debole); }
.livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.livello {
  display: block;
  text-align: left;
  border: 1px solid var(--filo);
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 14px 14px 13px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.livello:hover { border-color: var(--oro); transform: translateY(-1px); }
.livello.attivo {
  border-color: var(--oro);
  background: var(--fondino);
  box-shadow: inset 0 0 0 1px var(--oro);
}
.livello-nome {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--testo-tenue);
}
.livello.attivo .livello-nome { color: var(--oro); }
.livello-prezzo {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.1;
  margin-top: 5px;
  color: var(--accento-forte);
  font-variant-numeric: tabular-nums;
}
.livello-nota {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--testo-debole);
}
@media (max-width: 620px) { .livelli { grid-template-columns: 1fr; } }

.azioni-prodotto { display: grid; grid-template-columns: 1.3fr 1fr; gap: 11px; margin-bottom: 28px; }
.azioni-prodotto .btn { width: 100%; padding: 17px 20px; }
@media (max-width: 480px) { .azioni-prodotto { grid-template-columns: 1fr; } }

.descrizione { border-top: 1px solid var(--filo-tenue); padding-top: 20px; margin-bottom: 22px; }
.descrizione h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-debole);
  margin: 0 0 8px;
  font-weight: 600;
}
.descrizione p { margin: 0; color: var(--testo-tenue); font-size: 14.5px; }

.tabella-specifiche { width: 100%; border-collapse: collapse; margin: 6px 0 26px; }
.tabella-specifiche th, .tabella-specifiche td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--filo-tenue);
  font-size: 14.5px;
  vertical-align: top;
}
.tabella-specifiche th {
  font-weight: 500;
  color: var(--testo-debole);
  width: 38%;
  font-family: var(--sans);
}
.tabella-specifiche td { color: var(--testo); }

.garanzie {
  display: grid;
  gap: 1px;
  background: var(--filo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
}
.garanzie > div { background: var(--superficie); padding: 14px 16px; }
.garanzie b {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 3px;
}
.garanzie span { font-size: 13px; color: var(--testo-tenue); }

/* ------------------------------------------------------------ utilities */

.solo-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.caricamento {
  padding: 80px 0;
  text-align: center;
  color: var(--testo-debole);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ===================================================================
   MOVIMENTO
   Tutto quello che si muove mentre si scorre la pagina. Niente librerie:
   una riga di CSS e poche righe in comune.js. Chi ha chiesto al telefono
   "meno animazioni" (prefers-reduced-motion) non vede niente di tutto
   questo: il blocco in cima al file azzera gia' durate e transizioni.
   =================================================================== */

/* --- l'intestazione si stringe appena si scorre --- */
.header {
  transition: padding var(--transizione), background var(--transizione),
              box-shadow var(--transizione), border-color var(--transizione);
}
.header-in { transition: padding var(--transizione); }
.marchio img { transition: width var(--transizione), height var(--transizione); }
.header.rimpicciolita {
  background: rgba(7, 6, 5, .94);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 1);
}
.header.rimpicciolita .header-in { padding: 8px 0; }
.header.rimpicciolita .marchio img { width: 36px; height: 36px; }

/* --- tasto "torna su", entra da sotto dopo un po' di scorrimento --- */
.su-su {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filo);
  border-radius: 50%;
  background: rgba(7, 6, 5, .88);
  backdrop-filter: blur(8px);
  color: var(--oro);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity var(--transizione), transform var(--transizione),
              background var(--transizione), color var(--transizione);
}
.su-su.si-vede { opacity: 1; transform: none; pointer-events: auto; }
.su-su:hover {
  background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
  color: var(--su-oro);
  transform: translateY(-3px);
}

/* --- le schede del negozio entrano una dopo l'altra ---
   il ritardo a scaletta lo mette comune.js quando le rivela */
.griglia-prodotti [data-rivela],
.vetrina-griglia [data-rivela] {
  transform: translateY(22px) scale(.985);
}
/* senza questa riga la regola sopra vinceva anche a scheda rivelata: le
   schede restavano 22px piu' giu' e sembravano staccate da "cerca" */
.griglia-prodotti [data-rivela].visto,
.vetrina-griglia [data-rivela].visto { transform: none; }

/* --- l'apertura della home: titolo, sottotitolo e tasti salgono --- */
@keyframes saleEntra {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-testo > * {
  animation: saleEntra .8s var(--curva) both;
}
.hero-testo > .occhiello   { animation-delay: .05s; }
.hero-testo > h1           { animation-delay: .16s; }
.hero-testo > p            { animation-delay: .28s; }
.hero-testo > .hero-azioni { animation-delay: .38s; }

/* --- lampo di luce che attraversa i tasti d'oro --- */
.btn-oro { position: relative; overflow: hidden; }
.btn-oro::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--curva);
  pointer-events: none;
}
.btn-oro:hover::after { left: 115%; }

/* --- mentre il negozio carica, la scritta respira invece di stare ferma --- */
@keyframes respiroScritta {
  0%, 100% { opacity: .45; letter-spacing: .2em; }
  50%      { opacity: 1;   letter-spacing: .28em; }
}
.caricamento { animation: respiroScritta 1.8s ease-in-out infinite; }

/* --- le pillole delle categorie si sollevano al passaggio --- */
.menu-voce, .menu-sotto, .chip {
  transition: color var(--transizione), background var(--transizione),
              border-color var(--transizione), transform var(--transizione);
}
/* solo col mouse: col dito l'"hover" resta appiccicato dopo il tocco e la
   scritta rimaneva spostata in su */
@media (hover: hover) {
  .menu-voce:hover, .menu-sotto:hover { transform: translateY(-2px); }
  .chip:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .su-su { display: none; }
  .hero-testo > * { animation: none; }
  .caricamento { animation: none; opacity: 1; }
}

/* --- categorie e ricerca del negozio: restano appese sotto l'intestazione ---

   Stanno sulla stessa riga: categorie a sinistra, ricerca e ordinamento a
   destra. Prima erano due fasce sovrapposte e mangiavano una fila di pezzi.
   Quando lo schermo si stringe la ricerca va a capo da sola. */
.barra-negozio {
  position: sticky;
  top: var(--alt-header, 72px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0 -12px 12px;
  padding: 2px 12px 6px;
  background: var(--fondo);
}
/* il filetto sfumato che prima stava sotto le categorie ora chiude la fascia */
.barra-negozio::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 12%, var(--filo) 88%, transparent);
}

/* Le categorie stanno su UNA riga sola: se non ci stanno si scorrono di lato
   col dito o con la rotella, non vanno mai a capo. Le tendine delle voci con
   le sottocategorie sono "fixed" e le posiziona app.js: dentro una barra che
   scorre verrebbero tagliate. */
/* cornice attorno alle categorie: tiene le sfumature ai bordi e la freccia
   che dice "ce ne sono altre, scorri" */
.menu-cornice {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}
.menu-cornice::before,
.menu-cornice::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
}
.menu-cornice::before { left: 0;  background: linear-gradient(90deg, var(--fondo), transparent); }
.menu-cornice::after  { right: 0; background: linear-gradient(270deg, var(--fondo) 30%, transparent); }
.menu-cornice.altro-sx::before,
.menu-cornice.altro-dx::after { opacity: 1; }
.menu-scorri {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--oro);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--accento);
  cursor: pointer;
  animation: scorriSpinta 1.6s ease-in-out infinite;
}
.menu-cornice.altro-dx .menu-scorri { display: grid; }
@keyframes scorriSpinta {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .menu-scorri { animation: none; } }

.barra-negozio .menu-negozio {
  flex: 1 1 320px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}
.barra-negozio .menu-negozio::-webkit-scrollbar { display: none; }
.barra-negozio .menu-negozio::after { display: none; }
.barra-negozio .menu-tendina { position: fixed; top: auto; left: auto; }
.barra-negozio .riga-strumenti { flex-wrap: nowrap; }
/* scritte e spazi ridotti al minimo: e' una barra di servizio, deve stare su
   una riga sola e lasciare la pagina ai pezzi */
.barra-negozio .menu-voce {
  padding: 7px 8px;
  font-size: 10px;
  letter-spacing: .07em;
  gap: 5px;
}
.barra-negozio .menu-voce i { width: 6px; height: 6px; }

.barra-negozio .riga-strumenti {
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  gap: 6px;
}
.barra-negozio .cerca-catalogo {
  flex: 0 1 175px;
  min-width: 130px;
  height: 30px;
  padding: 0 8px;
  gap: 6px;
}
.barra-negozio .cerca-catalogo input { font-size: 12px; }
/* la scritta dentro "Ordina" stava attaccata a sinistra e addosso alla
   freccina: spazi uguali sopra, sotto, a destra e a sinistra */
.barra-negozio .riga-strumenti > select {
  height: 30px;
  line-height: 28px;
  font-size: 11.5px;
  padding: 0 30px 0 12px;
  background-position: right 14px center, right 9px center;
}

@media (max-width: 760px) {
  /* da telefono la ricerca prende tutta la riga sotto le categorie */
  .barra-negozio .riga-strumenti { flex: 1 1 100%; margin-left: 0; }
  .barra-negozio .cerca-catalogo { flex: 1 1 auto; }
}

/* --- foto dentro le recensioni, e la lente per vederle grandi --- */

.recensione-foto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.recensione-foto-box {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--filo-tenue);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--fondo-barra);
  cursor: zoom-in;
  transition: border-color var(--transizione), transform var(--transizione);
}
.recensione-foto-box:hover { border-color: var(--oro); transform: translateY(-2px); }
.recensione-foto-box img { width: 100%; height: 100%; object-fit: cover; }

.lente {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 3, 2, .92);
  backdrop-filter: blur(6px);
}
.lente.aperta { display: flex; animation: entra .18s ease; }
.lente img {
  max-width: min(100%, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
}
.lente-chiudi {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filo);
  border-radius: 50%;
  background: rgba(5, 4, 3, .7);
  color: var(--testo);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lente-chiudi:hover { border-color: var(--oro); color: var(--accento); }

/* ===================================================================
   TELEFONI  (iPhone in particolare)

   Il guaio grosso era l'intestazione: logo + casella di ricerca + tasto menu
   non scendevano sotto i 544 px di larghezza, quindi il telefono
   rimpiccioliva TUTTA la pagina per farcela stare (su un iPhone 13 da 390 px
   il sito si disegnava come se lo schermo fosse largo 544). Da qui in giu' la
   ricerca esce dall'intestazione: sul negozio ce n'e' gia' una nella fascia
   delle categorie, e in home quella in alto non filtrava niente.
   =================================================================== */

@media (max-width: 760px) {
  .header-azioni .cerca { display: none; }
  .header-in { gap: 12px; }
  .marchio { min-width: 0; flex: 1 1 auto; }
  .marchio-testo { min-width: 0; }
  .marchio-nome { font-size: 19px; letter-spacing: .12em; }
  .header-azioni { margin-left: auto; }

  /* iOS ingrandisce da solo la pagina quando si tocca una casella con il
     carattere sotto i 16 px: qui non deve succedere */
  input, select, textarea { font-size: 16px; }
  .barra-negozio .cerca-catalogo input,
  .barra-negozio .riga-strumenti > select { font-size: 16px; }

  /* La riga "cerca + ordina" non si stringeva: con min-width automatico un
     contenitore flex non scende sotto il suo contenuto, e da sola teneva la
     pagina del negozio a 475 px. Con min-width 0 si adatta allo schermo. */
  .barra-negozio { min-width: 0; }
  .barra-negozio .riga-strumenti {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 8px;
  }
  .barra-negozio .cerca-catalogo { flex: 1 1 0; min-width: 0; }
  .barra-negozio .riga-strumenti > select { flex: 0 1 auto; min-width: 0; max-width: 48%; }
  .barra-negozio .menu-negozio { flex: 1 1 100%; min-width: 0; }
  .menu-cornice { flex: 1 1 100%; }

  /* Negozio da telefono: niente logo, le categorie stanno nell'intestazione
     e vanno a capo (le sposta app.js), il menu resta fisso a destra.
     Niente sfumature ne' freccia: si vede gia' tutto. */
  .pagina-negozio .header .marchio { display: none; }
  .pagina-negozio .header-in { align-items: flex-start; padding: 8px 0; gap: 8px; }
  .pagina-negozio .header.rimpicciolita .header-in { padding: 6px 0; }
  .header-in .menu-cornice { flex: 1 1 auto; min-width: 0; }
  .header-in .menu-cornice::before,
  .header-in .menu-cornice::after,
  .header-in .menu-cornice .menu-scorri { display: none; }
  /* le tendine chiuse, anche invisibili, allargavano la pagina di lato:
     quando si aprono le sposta app.js dentro <body> */
  .header-in .menu-tendina { display: none; }
  .header-in .menu-negozio {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 2px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .header-in .menu-negozio::after { display: none; }
  .header-in .menu-voce {
    padding: 7px 5px;
    font-size: 10px;
    letter-spacing: .02em;
    gap: 4px;
  }
  .header-in .menu-voce i { width: 6px; height: 6px; }
  .header-in .menu-voce.attiva::after { left: 5px; right: 5px; bottom: 2px; }
  .pagina-negozio .barra-negozio { padding-top: 14px; }
  .pagina-negozio .catalogo { padding-top: 0; }

  /* Categorie e "cerca / ordina" erano quasi attaccate mentre sotto, prima
     delle foto, restava un vuoto enorme: ora gli spazi si equilibrano */
  .barra-negozio { row-gap: 14px; padding-bottom: 14px; margin-bottom: 0; }
  .catalogo .griglia-prodotti { margin-top: 0; }

  /* roba abbastanza grande da centrare col dito */
  .barra-negozio .menu-voce { padding: 11px 10px; font-size: 11px; }
  .barra-negozio .cerca-catalogo,
  .barra-negozio .riga-strumenti > select { height: 40px; }
  .menu-sotto { padding: 13px 12px; font-size: 13px; }
  .giostra-freccia { width: 40px; height: 40px; }
  .giostra-pallino { height: 10px; position: relative; }
  .giostra-pallino.viva { width: 24px; }
  /* i pallini restano piccoli a vedersi ma diventano grandi da toccare */
  .giostra-pallino::after { content: ''; position: absolute; inset: -15px -5px; }
  .vetrina-tutti { padding: 8px 0; }
  .card-mini { width: 26px; height: 26px; }
  .card-miniature { gap: 7px; }
  .chip { padding: 8px 13px; }
  .su-su { width: 48px; height: 48px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* i due tasti della home larghi uguali, uno sotto l'altro */
  .hero-azioni { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-azioni .btn { width: 100%; }

  /* la fascia promo si prendeva un quinto dello schermo e andava a capo:
     ora sta su una riga sola, con la misura che segue la larghezza */
  .promo-in { gap: 7px; padding: 10px 0; flex-wrap: nowrap; }
  .promo p { font-size: min(13px, 2.85vw); line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
  .promo p b { font-size: 1.35em; margin-left: 2px; }
  .promo-stella { font-size: 13px; }

  /* la giostra sotto "Scrivici su Instagram" resta in 3D anche da telefono,
     solo un po' meno girata che su PC per leggerla bene */
  .giostra { perspective: 1200px; perspective-origin: 60% 45%; padding: 6px 10px 12px; }
  .giostra-telaio { transform: rotateY(-6deg) rotateX(3deg); }
  .giostra-foto { transform: translateZ(26px); }
  .giostra-barra, .giostra-piede { transform: translateZ(10px); }
  .giostra-dondolo { animation: giostraGalleggia 7s ease-in-out infinite; }

  /* la barra bianca in basso dell'iPhone non deve coprire il piede */
  .footer-basso { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* schermi stretti davvero (iPhone SE e simili) */
@media (max-width: 400px) {
  .marchio img { width: 30px; height: 30px; }
  .marchio-nome { font-size: 17px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .griglia-prodotti { gap: 12px; }
  .card-nome { font-size: 12px; }
}

/* --- caratteri come Orbita Studio: Manrope ovunque, titoli in grassetto,
   niente corsivo --- */
h1, h2, h3, .display { font-weight: 800; letter-spacing: -.02em; }
em, .hero h1 em { font-style: normal; }
.marchio-nome, .footer-marchio span, .sponsor-scritta { font-weight: 800; }
.giostra-nome, .promo p b, .foto-prezzo, .modale-prodotto b,
.riga-prezzo b, .livello-prezzo, .statistiche-admin b { font-weight: 800; letter-spacing: -.01em; }
.card-nome { font-weight: 700; }
.card-prezzo b { font-weight: 800; }

/* --- divisori: stesso spazio ovunque, preso da quello fra "Come funziona"
   e "Perche' sceglierci" (circa 90px sopra, 60px sotto). Lo spazio sopra lo
   da' il divisore stesso: la sezione prima finisce dove finisce il suo
   contenuto, senza i margini interni che cambiavano da sezione a sezione. --- */
:root { --spazio-sopra-divisore: 88px; }
section:has(+ .contenitore > .divisore),
main:has(+ .contenitore > .divisore) { padding-bottom: 0; }
.contenitore:has(> .divisore) { padding-top: var(--spazio-sopra-divisore); }
/* gli ultimi margini interni che allungavano lo stacco */
.sezione-passi .passi { margin-bottom: -30px; }
.hero .striscia { padding-bottom: 0; margin-bottom: -16px; }
@media (min-width: 981px) { .hero .striscia { margin-bottom: -4px; } }
/* pagina del pezzo: il suo spazio sotto si sommava a quello del divisore */
.prodotto { padding-bottom: 0; }
.foto-nota:empty { display: none; }