/* ============================================================================
   "CREA LA TUA POKE" — scelta ingredienti
   Schermata Figma "CREA LA TUA POKE 2" (1512x2671, fondo #F6C3D5).

   Misure prese dal file e tradotte in percentuali / unita' di container, cosi'
   le proporzioni reggono a ogni larghezza (riferimento: il corpo pagina, che
   nel file e' il riquadro largo 1447):

     riquadro gruppo  1447x443  r=48  bordo 1px #DC0C21  a x=24
     pill etichetta    368x62   r=20  #DC0C21, testo 40px #FDFDFD,
                       centrata a cavallo del bordo superiore (centro su y=566)
     card opzione      292x289  r=37  #FDFDFD, 4 per riga
                       (35 di padding interno, 70 di passo fra una card e l'altra)
     foto              251x172  r=28  a (20,25) dentro la card
     nome              30px #DC0C21 a (25,221), interlinea stretta, due righe
     cerchietto        28x28 bordo 2px #DC0C21 a (235,230), pieno se scelto
     card selezionata  bordo rosso ~4px
     pulsante          408x60 r=9 #DC0C21, testo 30px #FDFDFD, a destra
                       (94px sotto l'ultimo riquadro)

   Il foglio si aggancia solo dentro .componi-figma: nessuna regola sfugge
   alle altre pagine, e le classi di site.css/brand.css restano intatte.
   ========================================================================= */

/* Il corpo della pagina e' il container di riferimento: tutte le misure dei
   riquadri e delle griglie sono cqw di questa larghezza (1447 nel file). */
.componi-figma .componi-corpo { container-type: inline-size; }

/* Testa: titolo 70px (118,347) e sottotitolo 30px (125,444) come in poke.php;
   qui pero' il primo riquadro parte a 566, quindi 66px sotto il sottotitolo. */
.componi-figma .poke-testa { margin-bottom: clamp(1.6rem, 4.4vw, 4.1rem); }

/* Il sottotitolo nel file sta in una colonna di 569 a corpo 30px (19 em) e va a
   capo li' dentro: senza il limite si allunga, spinge lo stepper sotto e la
   testa non e' piu' quella del disegno. */
.componi-figma .poke-sottotitolo { max-width: 19em; }

/* Stepper: GRANDEZZA e' un passo gia' fatto e torna indietro */
.componi-figma .stepper-passo { text-decoration: none; }
.componi-figma a.stepper-passo.is-fatto { color: var(--amore-rosso); }
.componi-figma a.stepper-passo.is-fatto:hover,
.componi-figma a.stepper-passo.is-fatto:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Riquadro del gruppo: bordo rosso sottile, angoli molto arrotondati, fondo
   trasparente (si vede il rosa della pagina, come nel file).
   padding: 104 sopra / 35 ai lati / 50 sotto, su base 1447.
   ------------------------------------------------------------------------ */
.componi-figma .builder-gruppo {
  position: relative;
  background: transparent;
  border: 1px solid var(--amore-rosso);
  border-radius: clamp(18px, 3.32cqw, 48px);       /* 48/1447 */
  padding: clamp(2.6rem, 7.19cqw, 6.5rem)          /* 104/1447 */
           clamp(.9rem, 2.42cqw, 2.2rem)           /*  35/1447 */
           clamp(1.2rem, 3.46cqw, 3.2rem);         /*  50/1447 */
  margin: 0 0 clamp(2.4rem, 6.29cqw, 5.7rem);      /*  91/1447 fra due riquadri */
  scroll-margin-block: 6rem 9rem;
}

.componi-figma .builder-gruppo:last-child { margin-bottom: 0; }

/* Gruppo obbligatorio segnalato dalla barra: resta rosso, non vira all'arancio */
.componi-figma .builder-gruppo.is-manca {
  border-color: var(--amore-rosso);
  box-shadow: 0 0 0 3px rgba(220, 12, 33, .22);
}

/* Etichetta del gruppo: pill rossa a cavallo del bordo superiore */
.componi-figma .gruppo-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25.43cqw;                                 /* 368/1447 */
  min-width: 9.5rem;
  max-width: 86%;
  margin: 0;
  padding: .275em 1em;                             /* 40 + 2x11 = 62 di altezza */
  background: var(--amore-rosso);
  color: #FDFDFD;
  border-radius: clamp(9px, 1.38cqw, 20px);        /* 20 */
  font-size: clamp(.95rem, 2.76cqw, 2.5rem);       /* 40px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contatore min/max: fuori dal disegno del file, ma senza di lui il cliente non
   sa quante scelte gli restano. Sta nell'angolo, non sposta la griglia. */
.componi-figma .builder-contatore {
  position: absolute;
  top: clamp(.6rem, 1.7cqw, 1.7rem);
  right: clamp(.9rem, 2.42cqw, 2.2rem);
  padding: 0;
  background: transparent;
  color: var(--amore-rosso);
  font-size: clamp(.7rem, 1.38cqw, 1.25rem);       /* 20px */
  font-weight: 600;
}

.componi-figma .builder-contatore.is-ok {
  background: transparent;
  color: var(--amore-rosso);
}

.componi-figma .builder-contatore.is-max {
  padding: .1em .7em;
  border-radius: var(--raggio-pill);
  background: var(--amore-rosso);
  color: #FDFDFD;
}

.componi-figma .builder-gruppo-desc {
  margin: 0 0 clamp(.8rem, 2.4cqw, 2rem);
  color: var(--amore-rosso);
  font-size: clamp(.8rem, 1.38cqw, 1.25rem);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Griglia delle opzioni: 4 per riga, passo 70 su base 1447.
   ------------------------------------------------------------------------ */
.componi-figma .builder-opzioni {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4.84cqw;                                    /* 70/1447 */
}

/* ---------------------------------------------------------------------------
   Card opzione 292x289 r=37 bianca. E' anche container: foto, nome e
   cerchietto sono percentuali della card, quindi la card resta identica a se'
   stessa a ogni larghezza.
   ------------------------------------------------------------------------ */
.componi-figma .builder-opzione {
  position: relative;
  container-type: inline-size;
  display: block;
  aspect-ratio: 292 / 289;
  padding: 0;
  border: 0;
  border-radius: 12.67%;                           /* 37/292 */
  background: #FDFDFD;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    box-shadow var(--dur-media) var(--ease-out),
    transform  var(--dur-veloce) var(--ease-molla);
}

.componi-figma .builder-opzione:hover { box-shadow: var(--ombra-alta); }

/* Selezionata: bordo rosso spesso (4 su card 292 = 0,276% del corpo pagina).
   Disegnato con un'ombra interna: segue il raggio e non sposta di un pixel. */
.componi-figma .builder-opzione.is-sel {
  background: #FDFDFD;
  border-color: transparent;
  box-shadow: inset 0 0 0 max(2px, .276cqw) var(--amore-rosso);
}

/* La spunta tonda in alto a destra di brand.css qui non serve: il file usa il
   cerchietto in basso a destra (e solo nei gruppi a scelta multipla). */
.componi-figma .builder-opzione.is-sel::after { content: none; }

.componi-figma .builder-opzione.is-off { opacity: 1; filter: grayscale(.4) opacity(.55); }

/* Foto 251x172 r=28 a (20,25) dentro la card */
.componi-figma .opz-foto {
  position: absolute;
  left: 6.85%;                                     /*  20/292 */
  top: 8.65%;                                      /*  25/289 */
  width: 85.96%;                                   /* 251/292 */
  height: 59.52%;                                  /* 172/289 */
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 11.16% / 16.28%;                  /* 28 su 251x172 */
  transition: transform var(--dur-media) var(--ease-out);
}

/* Nome 30px rosso in basso a sinistra, interlinea stretta, due righe se serve */
.componi-figma .opz-nome {
  position: absolute;
  left: 8.56%;                                     /*  25/292 */
  top: 76.47%;                                     /* 221/289 */
  width: 82.9%;                                    /* fino al margine speculare */
  color: var(--amore-rosso);
  font-size: max(.7rem, 10.27cqw);                 /*  30/292 */
  font-weight: 500;                                /* nel PDF il nome e' medium, non semibold */
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Dove c'e' il cerchietto il nome si ferma prima, senza finirci sotto */
.componi-figma .builder-opzione.has-check .opz-nome { width: 68.9%; }

/* Cerchietto 28x28 bordo 2px in basso a destra: vuoto, pieno quando scelto */
.componi-figma .opz-check {
  position: absolute;
  right: 9.93%;                                    /*  29/292 */
  bottom: 10.73%;                                  /*  31/289 */
  width: 9.59%;                                    /*  28/292 */
  aspect-ratio: 1;
  border: max(1px, .685cqw) solid var(--amore-rosso);
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-veloce) var(--ease-morbida);
}

.componi-figma .builder-opzione.is-sel .opz-check { background: var(--amore-rosso); }

/* Sovrapprezzo: non c'e' nel file perche' li' gli ingredienti sono tutti
   compresi. Quando la cassa ne fa pagare uno il cliente deve vederlo PRIMA di
   sceglierlo, quindi sta sull'angolo della foto e non tocca il resto. */
.componi-figma .opz-prezzo {
  position: absolute;
  top: 12%;
  right: 10%;
  padding: .15em .55em;
  border-radius: var(--raggio-pill);
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-size: max(.6rem, 6.8cqw);                   /* ~20px su card 292 */
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Pulsante "CONFERMA L'ORDINE": 408x60 r=9, a destra, 94 sotto l'ultimo
   riquadro, allineato al margine interno delle card.
   ------------------------------------------------------------------------ */
.componi-figma .conferma-riga {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(2rem, 6.5cqw, 5.9rem);         /* 94/1447 */
  padding-inline: clamp(.9rem, 2.42cqw, 2.2rem);   /* come il padding dei riquadri */
}

.componi-figma .conferma-ordine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 28.2cqw;                                  /* 408/1447 */
  min-width: 13rem;
  max-width: 100%;
  min-height: 4.15cqw;                             /*  60/1447 */
  padding: .45em .6em;                             /* 18 di margine interno, come nel file */
  white-space: nowrap;
  border: 0;
  border-radius: clamp(6px, .62cqw, 9px);          /* 9 */
  background: var(--amore-rosso);
  color: #FDFDFD;
  font-family: inherit;
  font-size: clamp(1rem, 2.07cqw, 1.875rem);       /* 30px */
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-veloce) var(--ease-morbida),
    transform  var(--dur-veloce) var(--ease-molla);
}

.componi-figma .conferma-ordine:hover { background: var(--amore-rosso-scuro); }
.componi-figma .conferma-ordine:active { transform: scale(.98); }
.componi-figma .conferma-ordine[disabled] { opacity: .6; cursor: progress; }
.componi-figma .conferma-ordine svg { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Larghezze strette: la griglia scende a 3 e poi a 2 colonne, il contatore
   torna nel flusso (nell'angolo darebbe testate con la pill).
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .componi-figma .builder-opzioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .componi-figma .builder-opzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* width: fit-content, altrimenti da "block" il fondo pieno dello stato is-max
     diventa una fascia da un bordo all'altro del riquadro. */
  .componi-figma .builder-contatore {
    position: static;
    display: block;
    width: fit-content;
    margin: 0 auto .8rem;
    text-align: center;
  }

  .componi-figma .conferma-riga { justify-content: stretch; }
  .componi-figma .conferma-ordine { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .componi-figma .builder-opzione,
  .componi-figma .conferma-ordine,
  .componi-figma .opz-check { transition: none; }
}

/* ================================================== rifiniture telefono ===
   Questi tre valori DEVONO stare qui e non in brand.css: la vista componi
   carica builder-figma.css DOPO brand.css, quindi a parita' di specificita'
   vince questo foglio (verificato: le stesse regole scritte in brand.css non
   avevano effetto). Misure prese a 375px:
     prezzo dell'aggiunta   9.8px -> illeggibile
     contatore del gruppo  11.2px
     "Conferma l'ordine"   alto 35px, sotto i 44 comodi al tocco
   ======================================================================== */
@media (max-width: 700px) {
  .componi-figma .opz-prezzo { font-size: .78rem; }
  .componi-figma .builder-contatore { font-size: .78rem; }
  .componi-figma .conferma-ordine { min-height: 44px; }
}