/* La scelta della spedizione a gradini.
   ─────────────────────────────────────────────────────────────────────────
   ⚠️ I VALORI QUI SOTTO NON SONO SCELTI: sono MISURATI sui controlli veri del
   checkout (le opzioni di pagamento, i campi dell'indirizzo) il 25/08/2026, e
   ricopiati. Depa: «la grafica è ancora sbagliata, la devi allineare a quella
   della pagina». Le prime due versioni erano inventate — bordi da 2px, angoli
   arrotondati, un riquadro unico con i fili — e stonavano accanto al resto.

     scatola            1px solid #c4c7c7, angolo vivo, padding 16px
     scatola scelta     1px solid #1a1a1a, raggio 4px, fondo bianco
     nome               Space Grotesk 12px/700 MAIUSCOLO, spaziatura 1.2px
     prezzo e note      Share Tech Mono 14px, spaziatura 0.7px
     titoletti          Barlow Condensed maiuscolo 600
     pallino            16px, bordo 2px #b8b5ac
     fondo pagina       #faf9f5

   I pallini veri di WooCommerce restano nel documento — servono a lui, alla
   tastiera e ai lettori di schermo — ma spariscono alla vista. Se il JavaScript
   non parte, .odino-cascata-attiva non viene messa e tornano visibili da soli. */

.odino-cascata-attiva .wc-block-components-shipping-rates-control__package {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.odino-cascata { display: flex; flex-direction: column; gap: 8px; }

.odino-cascata__titolo {
  margin: 6px 0 2px;
  font-family: "Barlow Condensed", var(--wp--preset--font-family--heading, inherit), sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em; color: #1a1a1a; opacity: .55;
}
/* ⚠️ NIENTE ANNIDAMENTO, e nemmeno rientri.
   Le voci ora stanno in tre gruppi uno sotto l'altro — velocita', poi dove, poi
   con quale corriere — e ogni gruppo e' completo. Prima erano incastrate: sotto
   «A casa tua» comparivano subito i suoi corrieri, e «A un punto di ritiro»
   finiva DOPO quell'elenco, quindi sembrava un corriere anche lui.
   Tutte larghe uguale, come le opzioni di pagamento: e' la titolazione a dire
   di che gradino si tratta, non la larghezza. */

.odino-scelta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px; border: 1px solid #c4c7c7; border-radius: 0;
  background: transparent; cursor: pointer;
  font: inherit; text-align: left; color: #1a1a1a;
  transition: border-color .12s, background .12s;
}
.odino-scelta:hover { border-color: #8f9292; }

/* La voce scelta: com'è un'opzione di pagamento scelta su questa pagina —
   bordo scuro, angolo appena smussato, fondo bianco. Lo spessore NON cambia,
   così il riquadro non balla a ogni clic. */
.odino-scelta--attiva { border-color: #1a1a1a; border-radius: 4px; background: #fff; }

.odino-scelta__segno {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid #b8b5ac; position: relative; background: transparent;
}
.odino-scelta--attiva .odino-scelta__segno { border-color: #1a1a1a; }
.odino-scelta--attiva .odino-scelta__segno::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #1a1a1a;
}

.odino-scelta__testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.odino-scelta__nome {
  font-family: "Space Grotesk", var(--wp--preset--font-family--body, inherit), sans-serif;
  font-size: 12px; font-weight: 700; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.odino-scelta__sotto {
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .7px; line-height: 1.45; opacity: .6; text-transform: none;
}
.odino-scelta__prezzo {
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 14px; letter-spacing: .7px; white-space: nowrap;
}

.odino-cascata__punti {
  display: block; margin: -4px 0 2px 28px;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .7px; color: #1a1a1a; opacity: .65;
  text-decoration: underline; text-underline-offset: 3px;
}
.odino-cascata__punti:hover { opacity: 1; }

/* Su schermo stretto il prezzo va sotto invece di stringere il nome. */
@media (max-width: 460px) {
  .odino-scelta { flex-wrap: wrap; padding: 14px; }
  .odino-scelta__prezzo { width: 100%; padding-left: 28px; }
  .odino-cascata__punti { margin-left: 26px; }
}

/* Mentre WooCommerce ricalcola: si vede che sta lavorando, senza bloccare nulla. */
.odino-cascata--attesa { opacity: .72; transition: opacity .1s; }
.odino-cascata--attesa .odino-scelta { cursor: progress; }