/* ============================================================================
   Poke Club Amore — Design System
   ----------------------------------------------------------------------------
   Riferimento: "Poke club amore.pdf" (docs/riferimento/*.webp) + il file .fig
   letto con tools/figread.py. Canvas del design: 1512 px di larghezza.

   Fasce della home misurate sul PDF (px del canvas 1512):
     header        54 →  229   (175)
     hero         229 →  880
     ticker (banda bianca) e "con il ♥" (fondo bianco, card rosa)
     blocco amore 1786 → 2754  (968  → aspect-ratio 1.562)
     footer       2754 → 3074  (320)

   ⚠️ MANUTENZIONE: UNA sola definizione per selettore. Non aggiungere blocchi
   in coda al file: modifica la regola dov'e' gia'. Una versione precedente
   aveva 46 selettori duplicati e vinceva sempre l'ultimo, cioe' il piu'
   vecchio: il sito mostrava regole superate ed era impossibile capire perche'.
   ========================================================================= */

@import url('/public/font/poppins.css');

/* ---------------------------------------------------------------- token --- */

:root {
  --amore-rosso:        #DC0C21;
  --amore-rosso-scuro:  #B3081A;
  --amore-rosa:         #F6C3D5;
  --amore-rosa-chiaro:  #FCE8EA;
  --amore-rosa-pallido: #FEF6F8;
  --amore-bianco:       #FDFDFD;

  /* nomi storici: il resto del CSS del sito li usa ovunque */
  --teal:         var(--amore-rosso);
  --teal-scuro:   var(--amore-rosso-scuro);
  --teal-chiaro:  var(--amore-rosa-chiaro);
  --mango:        var(--amore-rosso);
  --mango-scuro:  var(--amore-rosso-scuro);
  --mango-chiaro: var(--amore-rosa);

  --ink:      #1A1216;
  --ink-soft: #7A6A70;
  --bg:       #FFFFFF;
  --bg-alt:   var(--amore-rosa-pallido);
  --bordo:    #F0DDE3;

  --raggio:      16px;
  --raggio-sm:   12px;
  --raggio-pill: 999px;
  --ombra:      0 2px 10px rgba(220, 12, 33, .07);
  --ombra-alta: 0 10px 26px rgba(220, 12, 33, .16);

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --dur-veloce: 140ms;
  --dur-media:  240ms;
  --dur-lenta:  420ms;
  --ease-out:     cubic-bezier(.22, .61, .36, 1);
  --ease-morbida: cubic-bezier(.4, 0, .2, 1);
  --ease-molla:   cubic-bezier(.34, 1.56, .64, 1);
}

/* ----------------------------------------------------------------- base --- */

body { font-family: var(--font); letter-spacing: -.01em; background: var(--amore-rosa); }
/* clip e non hidden: taglia solo in orizzontale e lascia `overflow-y: visible`,
   cosi' cuore e bacchette possono continuare a sporgere sopra il pannello rosa.
   Serve perche' il cuore e' ruotato: il suo rettangolo (trasparente) sfora di
   qualche px oltre il bordo destro sui telefoni e aprirebbe uno scroll
   orizzontale, pur restando il disegno dentro. */
.site-main { background: var(--amore-rosa); overflow-x: clip; }
h1, h2, h3, .btn { font-weight: 600; }
h1 { letter-spacing: -.02em; }

@keyframes battito {
  0%, 100% { transform: scale(1); }
  22%      { transform: scale(1.12); }
  44%      { transform: scale(.98); }
  66%      { transform: scale(1.06); }
}

@keyframes entra-su {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes onda {
  from { opacity: .55; transform: scale(1); }
  to   { opacity: 0;   transform: scale(38); }
}

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

/* relative: sotto i 900px la nav diventa un pannello posizionato su questo box. */
.site-header {
  position: relative;
  background: var(--amore-rosa);
  border-bottom: 0;
  backdrop-filter: none;
}

/* Hamburger: nascosto da desktop, il CSS mobile piu' in basso lo mostra.
   Le tre barre sono un solo span con ::before/::after, che diventano una X
   quando il pannello e' aperto. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--amore-rosso);
}
.nav-toggle-barre,
.nav-toggle-barre::before,
.nav-toggle-barre::after {
  display: block; width: 24px; height: 2.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-media) var(--ease-out), opacity var(--dur-breve) linear;
}
.nav-toggle-barre { position: relative; }
.nav-toggle-barre::before,
.nav-toggle-barre::after { content: ''; position: absolute; left: 0; }
.nav-toggle-barre::before { top: -7px; }
.nav-toggle-barre::after  { top: 7px; }

.nav-aperta .nav-toggle-barre { background: transparent; }
.nav-aperta .nav-toggle-barre::before { transform: translateY(7px) rotate(45deg); }
.nav-aperta .nav-toggle-barre::after  { transform: translateY(-7px) rotate(-45deg); }

.site-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(.9rem, 2.4vw, 2.1rem);
}

.brand-cuore { display: block; height: clamp(40px, 4.3vw, 65px); width: auto; }
.brand:hover .brand-cuore { animation: battito 900ms var(--ease-out); }

.site-header .main-nav { justify-content: center; gap: clamp(.8rem, 2.4vw, 2.1rem); flex-wrap: nowrap; }

.site-header .main-nav > a {
  position: relative;
  color: var(--amore-rosso);
  font-weight: 500;
  font-size: clamp(.75rem, 1.06vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .main-nav > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--amore-rosso);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--dur-media) var(--ease-out);
}
.site-header .main-nav > a:hover::after,
.site-header .main-nav > a:focus-visible::after { width: 100%; }

.header-azioni { display: flex; align-items: center; gap: .5rem; }

/* Negli asset ufficiali il cerchio occupa solo il 51.6% dell'immagine (il
   resto e' aria trasparente): per vederne 29px — la misura del PDF — l'IMG
   deve essere 56px. Il BOX resta 29px, cioe' il cerchio visibile, altrimenti
   l'aria trasparente allargherebbe lo spazio fra un'icona e l'altra (nel PDF
   e' 8px, come il gap del gruppo azioni). L'immagine sborda dal box: e'
   voluto, il flex la tiene centrata. */
.icona-tonda {
  width: 29px; height: 29px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-veloce) var(--ease-molla);
}
.icona-tonda:hover { transform: scale(1.12); }
.icona-tonda img { width: 56px; max-width: none; height: auto; }

.pill-carrello {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--amore-rosso); color: #fff;
  padding: .42rem 1rem; border-radius: var(--raggio-pill);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: transform var(--dur-veloce) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.pill-carrello:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(220, 12, 33, .3); }
.cart-totale { font-variant-numeric: tabular-nums; }
.cart-totale.is-empty { opacity: .75; }

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

.site-footer {
  background: var(--amore-bianco);
  color: var(--amore-rosso);
  padding-top: clamp(1.6rem, 4vw, 2.8rem);
}
.site-footer a { color: var(--amore-rosso); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.1fr 1fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
}

.footer-logo { width: min(300px, 100%); height: auto; filter: none; }
.footer-titolo { font-weight: 600; text-transform: uppercase; margin-bottom: .2rem; }
.footer-tel { font-weight: 700; font-size: 1.05rem; }
.footer-col p { margin: .1rem 0 .55rem; line-height: 1.35; }

.footer-orari { font-size: .92rem; border-collapse: collapse; }
.footer-orari th { text-align: left; font-weight: 600; padding-right: 1.2rem; white-space: nowrap; }
.footer-orari td { white-space: nowrap; font-variant-numeric: tabular-nums; }

.footer-societa { font-size: .72rem; opacity: .9; padding-block: 1.2rem .8rem; margin: 0 auto; }

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

.btn {
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: -.01em;
  transition:
    background var(--dur-veloce) var(--ease-morbida),
    color      var(--dur-veloce) var(--ease-morbida),
    box-shadow var(--dur-media)  var(--ease-out),
    transform  var(--dur-veloce) var(--ease-out);
}
.btn-teal, .btn-mango { box-shadow: 0 2px 8px rgba(220, 12, 33, .22); }
.btn-teal:hover, .btn-mango:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(220, 12, 33, .3); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--amore-rosa), 0 0 0 5px var(--amore-rosso); }
.btn[disabled] { transform: none !important; box-shadow: none; }

.btn::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  opacity: 0; pointer-events: none;
}
.btn:active::after { animation: onda 520ms var(--ease-out); }

.btn-ghost { border-color: var(--amore-rosso); color: var(--amore-rosso); }
.btn-ghost:hover { background: var(--amore-rosa-chiaro); transform: translateY(-2px); }

/* ---------------------------------------------------------- home · hero --- */

/* Geometria misurata sul PDF p.1 (card 1365x650 a x69/y229 nella pagina 1512):
   logo largo il 41.03% a (30.73%, 11.15%) — il bbox del ROSSO nel PDF e'
   504x428 e l'asset ha il bordo sticker attorno, la scala e' gia' compensata;
   cuore largo il 30.1% a (75.5%, 48%), sborda a destra e sotto la card.
   height:auto sulla foto e' necessario: senza, vince l'attributo height del
   tag e sui telefoni la foto restava altissima. */
.hero-fig { padding: 0 clamp(1rem, 2.3vw, 2.2rem) clamp(.8rem, 2vw, 1.6rem); }
.hero-fig-card { position: relative; max-width: 1365px; margin-inline: auto; }

.hero-fig-foto {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1365 / 650;
  object-fit: cover;
  border-radius: 28px;
}

.hero-fig-lettering {
  position: absolute; left: 30.73%; top: 11.15%;
  width: 41.03%; height: auto;
  animation: entra-hero var(--dur-lenta) var(--ease-out) both;
}

@keyframes entra-hero {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.hero-fig-cuore {
  position: absolute; left: 75.5%; top: 48%;
  width: 30.1%; height: auto; max-width: none;
  animation: battito 3.2s ease-in-out infinite;
}

/* -------------------------------------------------------- home · ticker --- */

.ticker { background: var(--amore-bianco); overflow: hidden; padding-block: clamp(.4rem, 1vw, .8rem); white-space: nowrap; }
.ticker-scia { display: inline-flex; gap: 2.5rem; padding-left: 2.5rem; animation: scorri 26s linear infinite; }
.ticker-scia span { color: var(--amore-rosso); font-weight: 600; font-size: clamp(1rem, 1.7vw, 1.55rem); text-transform: uppercase; }

@keyframes scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------ home · "con il ♥" + 4 card --- */
/* Card 311x485 r41; foto 272x341 stesso raggio a +20,+15; titolo 40px su due
   righe a +20,+380; cuore 99x119 a +247,+292 (sborda oltre il bordo destro). */

.blocco-conil { background: var(--amore-bianco); }

.conil-titolo {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--amore-rosso);
  font-size: clamp(1.6rem, 3.3vw, 3.1rem);
  text-transform: uppercase;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.conil-titolo img { width: clamp(20px, 2vw, 30px); height: auto; }

/* Misurato sul PDF p.1: 4 card da 274x482 con 67 di gap e 110 di margine per
   lato, cioe' una fascia da 1292 -- piu' larga del .container standard (1100),
   che va quindi allargato solo qui. Il gap in % (67/1292) tiene la spaziatura
   proporzionale anche sotto i 1512px. */
.blocco-conil > .container { width: min(1292px, 100% - 2.5rem); }

.conil-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.19%; }

.conil-card {
  position: relative; display: block;
  container-type: inline-size;
  aspect-ratio: 274 / 482;
  background: var(--amore-rosa);
  border-radius: 8.8% / 5%;
  text-decoration: none;
  overflow: visible;
  transition: transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.conil-card:hover { transform: translateY(-6px); box-shadow: var(--ombra-alta); }

.conil-foto {
  position: absolute; left: 6.43%; top: 3.09%;
  width: 87.46%; height: 70.31%;
  border-radius: 8.2% / 5.9%;
  overflow: hidden; display: block;
}
.conil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-lenta) var(--ease-out); }
.conil-card:hover .conil-foto img { transform: scale(1.07); }

/* Corpo dal PDF: cap-height 27px su card 309 = 8.7cqw, due righe con passo
   38px. A 11.1cqw il titolo finiva sotto il cuore della card. */
.conil-nome {
  position: absolute; left: 6.43%; right: 4%; top: 78.7%;
  color: var(--amore-rosso);
  font-size: 8.7cqw; line-height: 1.3;
  font-weight: 600; text-transform: uppercase;
}

/* I cuori delle card sono le varianti ufficiali (bacchetta/stelline/sushi/
   bottiglia, col riempimento rosa nell'asset). Misure PDF card 1: largo 168
   su 309 (54%), sborda 10px a destra (3%), fondo a 30px dal bordo (6%). */
.conil-cuore {
  position: absolute; right: -3%; bottom: 6%;
  width: 54%; pointer-events: none;
  transition: transform var(--dur-media) var(--ease-molla);
}
.conil-card:hover .conil-cuore { transform: scale(1.14) rotate(-6deg); }

/* --------------------------------------- home · seconda slide (slogan) --- */
/* Marco 11/08 sera: rosa pieno, slogan in Instrument Italic a sinistra, cuore
   che batte SEMPRE dentro il rosa, bowl ufficiale in basso a destra tagliata
   un po' dal bordo destro e dal fondo (overflow hidden). */

/* 760 di altezza: e' la misura minima perche' lo slogan a 97px e la bowl al
   46% ci stiano UNO SOPRA L'ALTRA senza toccarsi (bowl top ~331 vs fine
   slogan ~261): con 640 la punta della bowl copriva la coda del testo. */
/* Banner piu' basso di quello disegnato (Marco 12/08: "diminuisci in altezza
   tutto il banner"): 620 invece di 760 a parita' di larghezza. La bowl e il
   cuore sono in percentuale, quindi accorciare il riquadro li avvicina: il
   cuore finisce dove comincia la bowl. Per questo qui sotto la bowl scende al
   42% di larghezza e il cuore sale al 7% dall'alto -- con i valori di prima si
   sarebbero sovrapposti di una trentina di pixel. */
.blocco-amore {
  position: relative;
  background: var(--amore-rosa);
  aspect-ratio: 1512 / 620;
  max-width: 1512px;
  margin-inline: auto;
  overflow: hidden;
}

.amore-claim {
  position: absolute; left: 5%; top: 28%;
  transform: translateY(-50%);
  color: var(--amore-rosso);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  /* vw e non cqw: il blocco e' largo quanto il viewport fino al tetto di
     1512px, dove il clamp ferma il claim ai ~97px del disegno */
  font-size: clamp(2rem, 6.4vw, 97px);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-media) var(--ease-out);
}
.amore-claim:hover { transform: translateY(-50%) scale(1.02); }

/* Il battito arriva a scale(1.12): l'aria attorno lo assorbe, il cuore resta
   SEMPRE dentro il rosa (overflow hidden a garanzia). */
.amore-cuore {
  position: absolute; right: 6%; top: 7%;
  width: clamp(80px, 12.5%, 190px); height: auto; max-width: none;
  animation: battito 3.2s ease-in-out infinite;
}

/* Angolo in basso a DESTRA, INTERAMENTE sotto le parole dello slogan.
   Il -18% e' calcolato sulla base CURVA del bicchiere: un taglio piu' timido
   cadeva sulla curva e lasciava l'illusione di aria fra bowl e fine del rosa;
   cosi' la linea di taglio prende la parte larga e la bowl appoggia PIENA sul
   bordo del blocco, senza spazio. */
/* La bowl e' TAGLIATA dal bordo inferiore del rosa, non appoggiata sopra:
   `bottom` negativo la fa sporgere e l'overflow hidden del blocco la taglia.
   Perche' il taglio si veda a filo del rosa e non a mezz'aria, sotto al blocco
   NON deve restare fascia rosa vuota: vedi .barra-spazio in site.css (ora a
   zero senza barra) e il margine del footer annullato qui sotto. */
.amore-bowl {
  position: absolute; right: 0.5%; bottom: -20%;
  width: clamp(280px, 42%, 640px); height: auto; max-width: none;
  pointer-events: none;
}

/* Niente stacco fra la seconda slide e il footer: quei 3rem sarebbero una
   fascia rosa sotto il taglio della bowl, e il taglio sembrerebbe sbagliato.
   Vale solo dove la slide e' l'ultima cosa della pagina (la home). */
body:has(.site-main > .blocco-amore:last-child) .site-footer { margin-top: 0; }

/* -------------------------------- "crea la tua poke" · scelta grandezza --- */
/* PDF p.2: titolo 70px, sottotitolo 30px, stepper 438x54 r27,
   card 491x554 r58 con gap 110, bowl che sporge sopra la card. */

.poke-scelta { background: var(--amore-rosa); padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.5rem, 7vw, 5rem); }

.poke-testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(5rem, 13vw, 11rem);
}

.poke-titolo { color: var(--amore-rosso); font-size: clamp(2.1rem, 4.6vw, 4.4rem); text-transform: uppercase; line-height: 1; margin: 0 0 .5rem; }
.poke-sottotitolo { color: var(--amore-rosso); font-size: clamp(1rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.25; margin: 0; }

.stepper {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 2px solid var(--amore-rosso);
  border-radius: var(--raggio-pill);
  padding: .5rem 1.5rem; white-space: nowrap;
}
.stepper-passo { color: #EFA8BC; font-size: clamp(.72rem, 1.1vw, .95rem); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.stepper-passo.is-attivo { color: var(--amore-rosso); }
.stepper-freccia { color: #EFA8BC; font-size: 1.1em; line-height: 1; }

.poke-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10.07%; max-width: 1092px; margin-inline: auto; }

.poke-card {
  position: relative; display: block;
  container-type: inline-size;
  aspect-ratio: 491 / 554;
  background: var(--amore-bianco);
  border-radius: 11.8% / 10.5%;
  text-decoration: none;
  transition: transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.poke-card:hover { transform: translateY(-6px); box-shadow: var(--ombra-alta); }

/* Misurato sul PDF p.2 (card 491x554): la bowl e' Ø409 sulla SMALL (83.8% della
   card) e Ø491 sulla LARGE (100.7%), con il centro 84px sotto il bordo alto.
   Nel file bowl-completa.webp la bowl occupa il 91.3% della larghezza, quindi
   width = Ø / 0.913 -> 91.7% e 110.2%. `top` e' in % dell'ALTEZZA della card
   (554) mentre `width` e' in % della larghezza (491): i due valori NON sono
   sulla stessa base, non semplificarli. */
.poke-card-foto {
  position: absolute; max-width: none;
  left: 50%; top: -24.64%;
  width: 91.7%; height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform var(--dur-lenta) var(--ease-out);
}
.poke-card:hover .poke-card-foto { transform: translateX(-50%) translateY(-8px) scale(1.02); }
.poke-card.is-large .poke-card-foto { top: -32.67%; width: 110.2%; }

/* Testo: padding 45px a sx e 50 a dx, titolo con cap a 373px dal bordo alto,
   descrizione a interlinea stretta su 3 righe che finiscono 41px dal fondo. */
.poke-card-testo { position: absolute; left: 9.2%; right: 10.2%; top: 67.3%; }
.poke-card-riga { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
/* Il titolo porta il nome INTERO ("POKE LARGE", non "LARGE"), quindi il corpo
   e' ricalcolato invece che ereditato dal disegno. Conti, non tentativi:
   .poke-card-testo va da left 9.2% a right 10.2%, quindi lo spazio utile e'
   80.6cqw meno il gap del flex (~1.6) = 79. Il prezzo "12,90 €" a 8.6cqw
   occupa 30.1cqw, in Poppins 600 "POKE SMALL" e' largo 5.968em: il nome puo'
   arrivare a 48.9cqw, cioe' 8.19cqw di corpo. Si sta a 7.8 per non finire
   attaccati al prezzo. A 10.2 (il valore di quando c'era scritto solo
   "LARGE") il nome da solo ne prendeva 60.6 e sbordava dalla card. */
.poke-card-nome { color: var(--amore-rosso); font-size: 7.8cqw; font-weight: 600; text-transform: uppercase; line-height: 1; }
.poke-card-prezzo { color: var(--amore-rosso); font-size: 8.6cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
/* I corpi sono tarati sulla LARGHEZZA del testo nel PDF, non sull'altezza dei
   caratteri: il mockup usa una grottesca piu' stretta di Poppins, quindi a
   parita' di altezza le righe sarebbero andate a capo in punti diversi.
   pre-line: l'a-capo delle 3 righe sta nel dato (impostazioni_sito.poke_desc_*)
   perche' con Poppins il wrap del PDF non e' ottenibile in automatico -- la
   riga 1 e' piu' lunga della riga 2 con "1" attaccato. */
.poke-card-desc { color: #000; font-size: 4.95cqw; line-height: 1.26; margin: .1em 0 0; white-space: pre-line; }

/* Pulsante "Componi la tua poke" (nota Marco 11/08): pill appesa al bordo
   basso della card, meta' dentro e meta' fuori. La card intera resta il link. */
.poke-card-cta {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  padding: .55em 1.4em;
  background: var(--amore-rosso); color: #FDFDFD;
  border-radius: 999px;
  font-size: 4.6cqw; font-weight: 600; line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(220, 12, 33, .25);
  transition: transform var(--dur-veloce) var(--ease-molla);
}
.poke-card:hover .poke-card-cta { transform: translate(-50%, 50%) scale(1.06); }

/* ------------------------------------------------------ schermi stretti --- */

@media (max-width: 900px) {
  /* La nav esce dal flusso e diventa un pannello sotto l'header, aperto dal
     bottone hamburger (js/nav.js mette la classe nav-aperta sull'header).
     visibility, e non display: none, perche' la transizione possa animare. */
  .nav-toggle { display: inline-flex; }

  /* La nav e' absolute e quindi non occupa piu' la sua cella: le azioni
     scalano nella colonna 1fr e senza questo resterebbero larghe quanto la
     colonna, staccate dal bordo destro. */
  .site-header .header-inner { grid-template-columns: auto 1fr auto; row-gap: 0; }
  .site-header .header-azioni { justify-self: end; }
  .site-header .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 60;
    display: block;
    background: var(--amore-rosa);
    padding: .2rem 0 .9rem;
    box-shadow: 0 16px 26px rgba(0, 0, 0, .12);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity var(--dur-media) var(--ease-out),
                transform var(--dur-media) var(--ease-out),
                visibility var(--dur-media) linear;
  }
  .site-header.nav-aperta .main-nav { visibility: visible; opacity: 1; transform: none; }

  .site-header .main-nav > a {
    display: block;
    padding: .85rem clamp(1.25rem, 5vw, 2.5rem);
    font-size: 1.05rem;
  }
  .site-header .main-nav > a::after { display: none; }

  .site-footer .footer-inner { grid-template-columns: 1fr; }
  /* Il logo del footer a 300px riempiva mezzo schermo. */
  .footer-logo { width: min(150px, 45%); }

  /* In colonna le due card si sovrapponevano: la bowl della LARGE e' in
     posizione assoluta a top -32.67% e sbuca SOPRA la card, quindi finiva
     addosso alla SMALL. Quanto sbuca: 32.67% dell'ALTEZZA, e l'altezza e'
     larghezza x 554/491, cioe' 36.87% della larghezza della card. In colonna
     la card e' larga quanto il contenitore, min(1100px, 100% - 2.5rem), quindi
     36.87vw - 15px. Lo spazio fra le righe deve superare quel valore: 37vw + 8
     lascia una decina di pixel d'aria. Prima erano 22vw, cioe' meno di due
     terzi di quello che serviva. */
  .poke-griglia {
    grid-template-columns: 1fr;
    gap: clamp(6.5rem, calc(37vw + 8px), 17rem);
  }
  .poke-testa { margin-bottom: clamp(4rem, 22vw, 8rem); }
  .stepper { padding: .45rem 1rem; gap: .45rem; }
}

/* Sul telefono le 4 card vanno una per riga: a 4 colonne la card scendeva a
   77px e il titolo, che e' in cqw, a 8px. Il corpo resta in cqw e quindi
   cresce con la card, senza bisogno di un minimo in px.
   La slide diventa piu' alta (4/3) e la bowl cresce in proporzione; lo
   slogan resta su una riga grazie al clamp del corpo. */
@media (max-width: 700px) {
  .conil-griglia { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.6rem); }

  .hero-fig-foto { aspect-ratio: 4 / 3; }
  /* Logo CENTRATO: la posizione da disegno (left 30.73%) vale col logo al 41%
     della card, ma sul telefono il logo e' molto piu' grande e 30.73 + 66 = 96.7
     lo spingeva contro il bordo destro. Si usa `left` e non una translate
     perche' la transform e' gia' occupata dall'animazione d'ingresso.
     Scende dal 66% al 58% per un motivo preciso: al 66% il logo e' alto il 76%
     della card (0.66 x 949/1100 / 0.75) e, centrato, non lasciava una fascia
     libera dove mettere il cuore, che gli finiva sopra. Al 58% ne occupa il 67%
     e il cuore trova posto in basso a destra. left = (100 - 58) / 2. */
  .hero-fig-lettering { width: min(58%, 561px); left: 21%; top: 7%; }
  /* Cuore in basso a destra: `top` e non `bottom`, perche' la regola base ha
     gia' un `top` e con entrambi impostati il bottom viene ignorato (box
     sovravincolato) -- era il motivo per cui il `bottom: -6%` di prima non
     spostava niente. */
  .hero-fig-cuore { width: min(20%, 232px); top: 70%; right: 4%; }

  /* Seconda slide nascosta sul telefono (richiesta di Marco 12/08): in colonna
     lo slogan, il cuore e la bowl si pestavano i piedi e la slide diventava
     mezzo schermo di rosa senza contenuto. Su desktop resta.
     Restano fuori anche le regole di .amore-*: senza il blocco non servono. */
  .blocco-amore { display: none; }
}

@media (max-width: 520px) {
  .brand-cuore { height: 42px; }
}

/* ================================================== rifiniture telefono ===
   Correzioni ricavate da un audit misurato su tutte le pagine a 375px (non a
   occhio): nessun overflow orizzontale da sistemare, ma due famiglie di
   problemi veri.

   1. BERSAGLI TATTILI sotto i 44px consigliati (icone header 29, +/- del
      carrello 32, "Rimuovi" alto 22, link secondari 20-23, pulsanti alti 35,
      spunta privacy 13). Dove il disegno FISSA la misura (le icone tonde sono
      29px nel PDF) non si ingrandisce il disegno: si allarga solo l'AREA
      SENSIBILE con uno pseudo-elemento invisibile centrato. Dove invece la
      misura e' libera si alza il minimo.
   2. TESTI sotto i 12px: i clamp/max avevano il pavimento tarato sul desktop
      e a 375px cadevano a 9.8-11.5px (il peggiore era il prezzo delle
      aggiunte nel builder). Si alza solo il PAVIMENTO: sopra i 700px non
      cambia niente.
   ======================================================================== */

@media (max-width: 700px) {

  /* --- area sensibile 44px senza toccare il disegno --------------------- */
  .icona-tonda,
  .qta-btn,
  .btn-rimuovi,
  .conil-card .conil-cuore { position: relative; }

  /* Lo stepper e' una pill sottile: alzarne l'altezza la deformerebbe, quindi
     al link si allarga solo l'area sensibile. */
  a.stepper-passo { position: relative; }

  .icona-tonda::after,
  .qta-btn::after,
  .btn-rimuovi::after,
  a.stepper-passo::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* --- controlli in cui la misura e' libera: minimo comodo -------------- */
  .cat-card__cta,
  .componi-figma .conferma-ordine,
  .poke-card-cta,
  .pill-carrello,
  .btn,
  .barra-cta { min-height: 44px; }

  .brand { display: inline-flex; align-items: center; min-width: 44px; }

  /* A 320px il gruppo azioni stringe i suoi figli (flex-shrink di serie) e
     l'hamburger scendeva da 42 a 31px di larghezza. */
  .nav-toggle, .icona-tonda, .pill-carrello { flex: 0 0 auto; }

  /* Link di servizio in mezzo al testo: si alza la riga sensibile senza
     spostare il testo (padding verticale + display inline-block). */
  /* Tutti i link del footer (allergeni, telefono, email) e i link di servizio:
     riga sensibile comoda senza spostare il testo. */
  .link-secondario,
  .site-footer .footer-col a,
  .site-footer .footer-titolo a,
  .site-footer .footer-tel a,
  .form-hint a,
  .account-alt a,
  .account-nota a {
    display: inline-block;
    padding-block: .7rem;
  }

  /* Le pill di categoria della pagina menu erano alte 34px */
  .cat-nav a { min-height: 44px; display: inline-flex; align-items: center; }

  /* La spunta della privacy era 13x13: qui si ingrandisce davvero, e
     l'etichetta accanto (label che avvolge la casella) e' gia' tutta area
     sensibile, le si da' solo l'altezza comoda. */
  .check-label input[type="checkbox"] {
    width: 22px; height: 22px;
    flex: 0 0 auto;
  }
  .check-label { min-height: 44px; }

  /* --- pavimenti dei corpi di testo ------------------------------------- */
  .footer-societa { font-size: .78rem; }                     /* era 11.5px */
  .stepper-passo { font-size: .78rem; }                      /* era 11.5px */
  .componi-figma .builder-contatore { font-size: .78rem; }   /* era 11.2px */
  .componi-figma .opz-prezzo { font-size: .78rem; }          /* era  9.8px */
}

/* --------------------------------------------- riduzione del movimento --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-scia { animation: none; }
  .conil-card:hover, .btn:hover, .poke-card:hover { transform: none; }
}