/* ============================================================
   IL TEMA DI KOMMERCE
   ------------------------------------------------------------
   style.css è la struttura del sito: griglie, componenti, stati.
   Questo foglio è il suo aspetto, ed è scritto nella lingua di
   binatomy.com — un carattere solo, forme morbide, movimenti
   brevi, spazio attorno alle cose.

   Tre regole, e tutto il resto scende da lì:

     1. NIENTE SERIF, NIENTE CORSIVI. Instrument Sans fa i titoli,
        il testo e le etichette. Il corsivo dentro un titolo era il
        vezzo di un atelier: qui la parola in risalto cambia peso e
        colore, non inclinazione.
     2. FORME MORBIDE. Bottoni a pillola, schede e campi con gli
        angoli tondi, fotografie che seguono la scheda.
     3. MOVIMENTI BREVI. 160–220 ms su colore e posizione, non
        mezzo secondo: un sito che risponde subito, non uno che si
        fa ammirare mentre risponde.

   I colori del negozio (tema.primario e tema.secondario) restano
   dove sono: qui sotto le superfici sono neutre apposta, così i
   suoi due colori si vedono.
   ============================================================ */

:root {
  /* ---------- carattere ---------- */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* i titoli erano in Cormorant: qui sono lo stesso carattere del
     testo, in un peso più deciso. Le 32 regole che chiedono
     var(--serif) seguono senza sapere che è cambiato qualcosa. */
  --serif: var(--sans);

  /* ---------- superfici ---------- */
  --avorio: #ffffff;
  --avorio-2: #f6f7f9;
  --avorio-3: #eef1f5;
  --beige-sabbia: #cbd5e1;

  /* ---------- inchiostri ---------- */
  --inchiostro: #0f172a;   /* titoli */
  --testo: #475569;        /* corpo: 7.5:1 sul bianco */
  --tortora: #52627a;      /* secondario e bottone pieno: 6.9:1 */
  --tortora-scuro: #334155;
  --accento-titoli: #64748b;

  /* ---------- linee ---------- */
  --linea: rgba(15, 23, 42, .10);
  --linea-campo: rgba(15, 23, 42, .28);
  --linea-chiara: rgba(255, 255, 255, .20);

  /* ---------- raggi ---------- */
  --raggio: 12px;
  --raggio-grande: 20px;
  --raggio-foto: 18px;
  --pillola: 999px;

  /* ---------- respiro ---------- */
  --gutter: clamp(20px, 5vw, 72px);
  --sez: clamp(72px, 8vw, 128px);
  --header-h: 84px;

  /* ---------- ombre: grigio ardesia, mai nero ---------- */
  --ombra-morbida: 0 18px 40px -24px rgba(15, 23, 42, .28);
  --ombra-card: 0 12px 28px -18px rgba(15, 23, 42, .30);
  --ombra-alta: 0 24px 50px -26px rgba(15, 23, 42, .34);

  /* ---------- movimento ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --rapido: .16s;
  --medio: .22s;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
body {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.005em;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.12;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.015em; }
h4 { letter-spacing: -.01em; }

/* Il corsivo era il modo dell'atelier di mettere in risalto una
   parola nel titolo. Qui la parola resta dritta e cambia colore:
   un titolo in corsivo, a questo corpo, si legge peggio. */
em, .it,
h1 em, h2 em, h3 em,
.dropdown a small {
  font-style: normal;
}
h1 em, h2 em, h3 em {
  font-weight: 600;
  color: var(--accento-titoli);
}
em, .it { color: inherit; }
.sezione--scura em { color: var(--ottone-chiaro); }

strong, .prosa strong { font-weight: 600; color: var(--inchiostro); }

/* Le etichette piccole: maiuscolo sì, ma stretto. Il tracking
   0.32em del manuale di un altro marchio qui spezza le parole. */
.eyebrow, .payoff {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 18px; }

.lead { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.testo-lungo p, .prosa p { max-width: 68ch; }

.nome-brand { letter-spacing: -.01em; text-transform: none; font-weight: 600; }

/* il filetto dorato sotto i titoli: una linea sottile e neutra */
.regola { width: 40px; background: var(--linea-campo); opacity: .5; }

/* ============================================================
   BOTTONI
   ============================================================ */
.btn {
  padding: 13px 26px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  border-radius: var(--pillola);
  transition: background var(--rapido) var(--ease),
              color var(--rapido) var(--ease),
              border-color var(--rapido) var(--ease),
              transform var(--rapido) var(--ease),
              box-shadow var(--medio) var(--ease);
}
/* la tendina che saliva da sotto al passaggio del mouse: al posto
   suo il bottone si scurisce e si alza di un pelo */
.btn::after { content: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--pieno { background: var(--tortora); color: #fff; box-shadow: var(--ombra-card); }
.btn--pieno:hover { background: var(--inchiostro); color: #fff; box-shadow: var(--ombra-alta); }

.btn--ghost { border-color: var(--linea-campo); color: var(--inchiostro); background: transparent; }
.btn--ghost:hover { background: var(--avorio-2); border-color: var(--inchiostro); color: var(--inchiostro); }

.btn--chiaro { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn--chiaro:hover { background: #fff; color: var(--inchiostro); border-color: #fff; }

.btn--mini { padding: 9px 18px; font-size: .82rem; letter-spacing: -.005em; }

.link-freccia {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  border-bottom: 0;
  padding-bottom: 0;
  gap: 8px;
  transition: gap var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.link-freccia:hover { gap: 12px; color: var(--ottone-testo); }

/* ============================================================
   INTESTAZIONE E MENU
   ============================================================ */
.site-header {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow var(--medio) var(--ease), background var(--medio) var(--ease);
}

.nav { gap: clamp(12px, 1.5vw, 24px); }
/* con «Occasioni» in più il menu si è allungato: una voce che va a
   capo su due righe si legge come due voci */
.nav__link { white-space: nowrap; }
.nav__link {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--tortora);
  transition: color var(--rapido) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--inchiostro); }
/* la riga che si allungava sotto la voce: resta, ma corta e veloce */
.nav__link::after { bottom: 4px; transition: right var(--medio) var(--ease); }

.dropdown {
  border-radius: var(--raggio-grande);
  border-color: var(--linea);
  padding: 8px;
  box-shadow: var(--ombra-alta);
  transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility var(--medio);
}
.dropdown a {
  border-radius: var(--raggio);
  padding: 9px 14px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.dropdown a:hover { padding-left: 14px; background: var(--avorio-2); color: var(--inchiostro); }
.dropdown a small { font-size: .84rem; letter-spacing: -.005em; text-transform: none; color: var(--tortora); }

.annuncio {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  padding: 10px var(--gutter);
}

/* ============================================================
   SCHEDE PRODOTTO E FOTOGRAFIE
   ============================================================ */
.prod { transition: transform var(--medio) var(--ease); }
.prod:hover { transform: translateY(-2px); }
.prod__img {
  border-radius: var(--raggio-foto);
  background: var(--avorio-2);
}
.prod__img img { transition: transform .5s var(--ease); }
.prod:hover .prod__img img { transform: scale(1.04); }
.prod .prod__add {
  border-radius: var(--pillola);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  padding: 12px;
  transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease);
}
.prod__tag { border-radius: var(--pillola); letter-spacing: .04em; }

/* le foto grandi: la stessa curva delle schede */
.slider, .pagina-hero__sfondo img, .pdp__main, .pdp__thumbs img,
.post__img, .articolo__copertina, .atelier__media img, .media img {
  border-radius: var(--raggio-foto);
}
.slider { aspect-ratio: 4/5; }
@media (max-width: 760px) { .slider { aspect-ratio: 4/5; } }

/* ============================================================
   CAMPI, FILTRI, PANNELLI
   ============================================================ */
.campo input, .campo select, .campo textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], input[type="date"],
select, textarea {
  border-radius: var(--raggio);
  transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--tortora);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
  outline: none;
}
.campo label { font-size: .82rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; }

.filtro h4, .filtro-reset, .ordina, .briciole .wrap, .numero span {
  letter-spacing: -.005em;
  text-transform: none;
}
.filtri a, .filtro a, .ordina, .sconto, .metodo, .piano, .pacchetto,
.riepilogo, .passi, .info-riga, .barra-spedizione, .accordion__q, .faq__q {
  border-radius: var(--raggio);
}
.filtri a:not(.filtro-reset), .filtri--sx a:not(.filtro-reset) { border-radius: var(--pillola); padding: 7px 15px; }
/* «Azzera» è un rimando, non una pillola: il bordo arrotondato sotto
   una sola riga di testo si legge come un errore di disegno */
.filtro-reset { border-radius: 0; padding: 0 0 4px; font-size: .84rem; font-weight: 600; }

.cerca__campo { border-radius: var(--pillola); }
.cerca__esiti { border-radius: var(--raggio-grande); box-shadow: var(--ombra-alta); }

.wa, .ws { border-radius: var(--pillola); box-shadow: var(--ombra-alta); }

/* ============================================================
   RESPIRO
   ============================================================ */
.testata { margin-bottom: clamp(40px, 5vw, 64px); }
.testata p { margin-top: 16px; }
.wrap { max-width: 1280px; }

/* ============================================================
   MOVIMENTO: chi ha chiesto di ridurlo non ne vede
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .prod:hover { transform: none; }
}

/* ============================================================
   LE ETICHETTE MINUTE
   ------------------------------------------------------------
   Erano tutte a 0,2–0,32em di tracking, come da manuale di un
   altro marchio. A quel corpo le parole si sfilacciano: qui il
   maiuscolo resta, il tracking scende a 0,08em e il peso sale,
   che è come le scrive binatomy.com.
   ============================================================ */
.prod__meta, .pdp__cat, .post__meta, .articolo__meta, .articolo__firma span,
.campo label, .filtro h4, .piano__freq, .piano__nastro, .pacchetto__da,
.numero span, .info-riga b, .cat__body p, .hero__targa span,
.atelier__media figcaption span, .ws__data span, .footer h4,
.mappa__pin .mappa__chip > span, .menu-mobile a, .sconto button,
.stagione-chip span, .filtri button {
  letter-spacing: .08em;
  font-weight: 600;
}
.prod__meta { font-size: .72rem; }
.campo label, .filtro h4, .footer h4 { font-size: .74rem; }

/* i titoli del piede: leggibili, non decorativi */
.footer h4 { color: rgba(255, 255, 255, .72); }

/* ============================================================
   SCELTA DEL FORMATO, FILTRI A PILLOLA
   ============================================================ */
.varianti__scelte button,
.varianti__scelte label {
  border-radius: var(--pillola);
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  transition: border-color var(--rapido) var(--ease),
              background var(--rapido) var(--ease),
              color var(--rapido) var(--ease);
}
.filtri button {
  border-radius: var(--pillola);
  padding: 9px 18px;
  font-size: .85rem;
  letter-spacing: -.005em;
  text-transform: none;
  transition: border-color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.filtri button:hover { background: var(--avorio-2); }
.piano__nastro { border-radius: 0 var(--raggio) 0 var(--raggio); }

/* ============================================================
   CAMPI CON IL FILO SOTTO → CAMPI VERI
   ------------------------------------------------------------
   Il messaggio del biglietto e il codice sconto erano una riga
   sottile: si vedeva appena che ci si poteva scrivere.
   ============================================================ */
.sconto input,
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo textarea, .campo select {
  border: 1px solid var(--linea-campo);
  border-radius: var(--raggio);
  padding: 11px 14px;
  background: #fff;
}
.sconto { gap: 10px; }
.sconto button {
  border-radius: var(--pillola);
  border: 1px solid var(--linea-campo);
  padding: 0 18px;
  font-size: .85rem;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--inchiostro);
}
.sconto button:hover { background: var(--avorio-2); }

/* ============================================================
   IL MARCHIO SCRITTO
   ------------------------------------------------------------
   Senza logo caricato in pagina c'è il nome del negozio. Era in
   peso 300 con 0,14em di tracking, cioè il disegno del marchio di
   un altro: qui è semplicemente il nome, scritto bene.
   ============================================================ */
.logo--scritto {
  font-weight: 600;
  letter-spacing: -.02em;
}
.logo--scritto.logo--orizzontale { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

/* ============================================================
   SCHEDA PRODOTTO: galleria e aggiunte
   ============================================================ */
.pdp__grande, .pdp__grande img, .pdp__thumbs button, .pdp__thumbs img {
  border-radius: var(--raggio-foto);
  overflow: hidden;
}
.pdp__thumbs button, .pdp__thumbs img { border-radius: var(--raggio); }
.pdp__tag { border-radius: var(--pillola); }

.aggiunte__titolo, .aggiunte__gruppo {
  letter-spacing: .08em;
  font-weight: 600;
}
.aggiunta, .aggiunte label { border-radius: var(--raggio); }

/* carrello, riepilogo, checkout: le stesse curve */
.riga, .riepilogo, .metodo, .passo, .conferma, .avviso, .card,
.pannello-sito, .box, .gift, .fascia-scelta label, .metodo label {
  border-radius: var(--raggio);
}

/* ============================================================
   I COLORI DI SERIE
   ------------------------------------------------------------
   Erano il verde bosco e l'ottone di un atelier floreale, addosso
   a chiunque aprisse un negozio. Qui sono due grigi ardesia: non
   dicono niente, ed è quello che deve fare un colore di serie.
   Appena il negoziante sceglie i suoi da /admin/tema, il blocco
   inline qui sotto li riscrive.
   ============================================================ */
:root {
  --bosco: #0f172a;         /* fasce scure, piede, bottoni pieni */
  --salvia: #52627a;
  --salvia-testo: #3f4d63;
  --ottone: #94a3b8;        /* righe e fregi */
  --ottone-testo: #52627a;  /* accento leggibile sul chiaro: 6.9:1 */
  --ottone-chiaro: #cbd5e1; /* accento sulle fasce scure */
  --nero-opaco: #0f172a;
}

/* i filtri a pillola del blog e delle categorie */
.filtri--sx a, .filtri a {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}

/* ============================================================
   «CONSEGNIAMO DA TE?»
   ------------------------------------------------------------
   Sta nella scheda prodotto, sopra i preferiti: è la domanda che
   il cliente si fa prima di mettere qualcosa nel carrello, non
   dopo. Funziona anche senza JavaScript, quindi deve stare in
   piedi da sola.
   ============================================================ */
.verifica {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-grande);
  background: var(--avorio-2);
}
.verifica label {
  display: block;
  margin-bottom: 10px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tortora);
}
.verifica__riga { display: flex; gap: 8px; }
.verifica__riga input {
  flex: 0 1 140px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--linea-campo);
  border-radius: var(--pillola);
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--inchiostro);
}
.verifica__riga .btn { flex: 0 0 auto; }
.verifica__esito:not(:empty) { margin-top: 14px; }
.verifica__titolo {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--inchiostro);
}
.verifica__titolo--domicilio::before,
.verifica__titolo--corriere::before { content: "✓ "; color: var(--salvia-testo); }
.verifica__titolo--ritiro::before,
.verifica__titolo--no::before { content: "· "; color: var(--tortora); }
.verifica__testo { margin: 0; font-size: .92rem; color: var(--testo); }

@media (max-width: 520px) {
  .verifica__riga { flex-wrap: wrap; }
  .verifica__riga input { flex: 1 1 100%; }
  .verifica__riga .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   I TRE MODI DI FAR PREZZO
   ------------------------------------------------------------
   Fisso è il caso normale e usa la quantità di sempre. Gli altri
   due chiedono al cliente qualcosa di diverso, e la domanda deve
   stare sopra il bottone, non dentro un menu a tendina.
   ============================================================ */
.scelta-steli, .scelta-budget { margin: 22px 0 6px; }
.scelta-steli label, .scelta-budget label {
  display: block;
  margin-bottom: 10px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tortora);
}
.scelta-steli { display: grid; grid-template-columns: auto auto; gap: 0 12px; align-items: center; justify-content: start; }
.scelta-steli label { grid-column: 1 / -1; }
.scelta-steli__unita { font-size: .95rem; color: var(--testo); }

.scelta-budget__riga {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linea-campo);
  border-radius: var(--pillola);
  padding: 4px 18px 4px 6px;
  background: #fff;
}
.scelta-budget__riga input {
  width: 6.5ch;
  border: 0;
  background: none;
  padding: 10px 8px;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--inchiostro);
  text-align: right;
  -moz-appearance: textfield;
}
.scelta-budget__riga input::-webkit-outer-spin-button,
.scelta-budget__riga input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.scelta-budget__riga input:focus { outline: none; }
.scelta-budget__riga:focus-within { border-color: var(--tortora); box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }
.scelta-budget__riga span { font-size: 1.3rem; font-weight: 600; color: var(--tortora); }
.scelta-budget small { display: block; margin-top: 10px; font-size: .88rem; color: var(--testo); max-width: 48ch; }

.pdp__unita { font-size: .9rem; font-weight: 500; color: var(--tortora); margin-left: 6px; }

/* quanto manca al minimo d'ordine, nel carrello */
.sotto-minimo {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: var(--raggio);
  background: var(--avorio-2);
  border: 1px solid var(--linea-campo);
  font-size: .92rem;
  color: var(--inchiostro);
}

/* ============================================================
   LE RECENSIONI
   ------------------------------------------------------------
   Le stelle basse restano in pagina: un elenco di soli cinque
   stelle lo riconosce chiunque, e smette di crederci tutto
   insieme. Quello che convince è il bollo «acquisto verificato»
   e la risposta del negozio sotto una da tre.
   ============================================================ */
.recensioni__testa {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.recensioni__testa h2 { margin: 0; }

.voto { display: flex; align-items: baseline; gap: 10px; }
.voto__media { font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; color: var(--inchiostro); }
.voto__stelle { font-size: 1.1rem; color: var(--ottone-testo); letter-spacing: .06em; }
.voto small { color: var(--tortora); font-size: .9rem; }

.recensione {
  padding: 18px 0;
  border-top: 1px solid var(--linea);
}
.recensione header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.recensione__stelle { color: var(--ottone-testo); letter-spacing: .06em; }
.recensione header b { color: var(--inchiostro); font-weight: 600; }
.recensione header time { color: var(--tortora); font-size: .85rem; margin-left: auto; }
.recensione__bollo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--pillola);
  background: var(--avorio-2);
  color: var(--salvia-testo);
  border: 1px solid var(--linea);
}
.recensione__titolo { font-weight: 600; color: var(--inchiostro); margin-bottom: 4px; }

.recensione__risposta {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 2px solid var(--ottone);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--avorio-2);
}
.recensione__risposta b { display: block; margin-bottom: 4px; font-size: .88rem; color: var(--inchiostro); }
.recensione__risposta p { margin: 0; font-size: .94rem; }

.recensioni__vuoto { color: var(--tortora); padding: 16px 0 4px; }

.recensioni__scrivi { margin-top: 26px; }
.recensioni__scrivi summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 22px;
  display: inline-block;
  border: 1px solid var(--linea-campo);
  border-radius: var(--pillola);
  transition: background var(--rapido) var(--ease);
}
.recensioni__scrivi summary:hover { background: var(--avorio-2); }
.recensioni__scrivi summary::-webkit-details-marker { display: none; }
.modulo-recensione { margin-top: 22px; max-width: 46rem; }
.modulo-recensione .campi--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .modulo-recensione .campi--2 { grid-template-columns: 1fr; } }

/* ============================================================
   LA PROVA DI CONSEGNA
   ------------------------------------------------------------
   È la sola cosa in pagina che il cliente guarda davvero quando
   ha regalato qualcosa a qualcun altro: la fotografia di dov'è
   stato lasciato. Va grande.
   ============================================================ */
.prova-consegna__quando { font-weight: 600; color: var(--inchiostro); margin-bottom: 4px; }
.prova-consegna__immagini {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}
.prova-consegna__immagini figure { margin: 0; }
.prova-consegna__immagini img {
  width: 100%;
  border-radius: var(--raggio-foto);
  background: var(--avorio-2);
}
.prova-consegna__firma img {
  border: 1px solid var(--linea);
  background: #fff;
  padding: 6px;
}
.prova-consegna__firma figcaption {
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tortora);
  text-align: center;
}
@media (max-width: 620px) { .prova-consegna__immagini { grid-template-columns: 1fr; } }

/* ============================================================
   KORALLO, LA MASCOTTE
   ------------------------------------------------------------
   Il ramo di corallo del marchio, con due occhi. Va dove non c'è
   niente da fare: una pagina vuota con una faccia si legge come
   «va bene così», una pagina vuota e basta si legge come «si è
   rotto». Il segno senza occhi è `#i-korallo`.
   ============================================================ */
.vuoto-grande__korallo {
  width: 76px;
  height: auto;
  aspect-ratio: 64 / 80;
  color: var(--ottone);
  stroke: currentColor;
  fill: none;
  margin-bottom: 18px;
  opacity: .9;
}

/* ============================================================
   L'AREA CLIENTE
   ------------------------------------------------------------
   Prendeva già il tema, ma restava piatta: bordi a un pixel e
   angoli vivi, gli stessi di prima. Qui prende la forma del
   resto — superfici morbide, ombre corte, la voce attiva del
   menu che si vede da lontano.

   Niente gradiente corallo: quello è il marchio di Kommerce, e
   questa pagina è del negozio. I numeri li accende il suo colore.
   ============================================================ */
.scheda {
  border-radius: var(--raggio-grande);
  border-color: var(--linea);
  box-shadow: var(--ombra-card);
}
.scheda h3 { letter-spacing: -.02em; }

.numeri-fila { gap: 16px; }
.numero-box {
  border: 0;
  border-radius: var(--raggio-grande);
  padding: 22px 24px;
  box-shadow: var(--ombra-card);
  transition: transform var(--rapido) var(--ease), box-shadow var(--medio) var(--ease);
}
.numero-box:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.numero-box b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.numero-box span { font-size: .74rem; font-weight: 600; letter-spacing: .06em; }

/* il primo numero è quello che conta: lo accende il colore del negozio */
.numero-box:first-child {
  background: var(--bosco);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(15, 23, 42, .5);
}
.numero-box:first-child b { color: #fff; }
.numero-box:first-child span { color: rgba(255, 255, 255, .82); }

/* ---------- la colonna ---------- */
.account__lato {
  border: 0;
  border-radius: var(--raggio-grande);
  overflow: hidden;
  box-shadow: var(--ombra-card);
  align-self: start;
}
.account__iniziali { border-radius: 50%; }
.account__menu a {
  border-left: 0;
  border-radius: var(--raggio);
  margin: 2px 10px;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.account__menu a.is-on {
  background: var(--bosco);
  color: #fff;
}
.account__menu a.is-on small { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------
   `.form__riga`: due campi affiancati.

   La classe esisteva da sempre — checkout, contatti, registrazione —
   e non aveva **nessuna regola in nessun foglio**: era un `div`, e
   Nome e Cognome, CAP e Città, Email e Telefono stavano uno sotto
   l'altro come tutti gli altri. Un modulo di dieci campi in colonna
   si compila peggio e sembra più lungo di quello che è.

   Sotto i 230 px per colonna tornano in verticale da soli, che su un
   telefono è l'unica cosa giusta: due campi da 160 px non si toccano
   con il pollice.
   ------------------------------------------------------------ */
.form__riga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
}

/* ------------------------------------------------------------
   I punti di ritiro, al checkout.

   Schede toccabili e non un menu a tendina: gli indirizzi si
   confrontano guardandoli, e in una tendina si vede una riga alla
   volta. Il bersaglio è tutta la scheda, non il pallino — al banco
   o sull'autobus il pollice non centra un cerchio da 16 px.
   ------------------------------------------------------------ */
.punti-ritiro { display: grid; gap: 10px; }
.punto {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--linea-forte, rgba(26,26,26,.28));
  border-radius: 14px; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.punto:hover { border-color: var(--testo); }
.punto.is-scelto { border-color: var(--p, #1A1A1A); border-width: 2px; padding: 13px 15px; }
.punto input { margin-top: 3px; flex: none; }
.punto__corpo { display: grid; gap: 2px; }
.punto__corpo b { font-weight: 600; }
.punto__corpo span { font-size: .92rem; color: var(--tortora, #4B5563); line-height: 1.5; }
.punto__orari { font-variant-numeric: tabular-nums; }
.punto__note { font-size: .86rem; }