/* =============================================================================
   PROBAR - IL PALLINO DI SELEZIONE (fonte unica per tutto il sito)
   -----------------------------------------------------------------------------
   Percorso: [child]/css/controls-ui.css  |  Caricato ovunque (peso irrisorio).

   PERCHE' ESISTE QUESTO FILE
   Radio e spunte native, su fondo nero, il browser le disegna bianche e
   squadrate: sembrano pezzi dimenticati in mezzo a una veste curata. Ogni
   pagina aveva finito per rimediare a modo suo (accent-color qui, 17px la',
   18px altrove, quadrata nella newsletter): quattro dialetti dello stesso
   controllo. Qui il pallino si definisce UNA volta sola.

   ASPETTO: cerchio scuro con anello chiaro a riposo, anello oro al
   passaggio del mouse, anello oro con punto d'oro dentro quando e' scelto.
   Identico per radio e caselle: sul nero conta la coerenza, non la
   distinzione fra le due meccaniche (che resta chiara dal contesto).

   COME SI ESTENDE: si aggiunge il selettore del nuovo contesto alle liste
   qui sotto. Mai riscrivere l'aspetto da capo altrove.

   NB: i colori sono scritti per esteso, non con le variabili del tema: cosi'
   il file regge anche se viene caricato prima del foglio che le definisce.
   ============================================================================= */

/* --- ASPETTO CONDIVISO ---------------------------------------------------- */
.woocommerce-checkout .wc_payment_methods input.input-radio,
.woocommerce-checkout .wc_payment_methods input[type="radio"],
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"],
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-account input[type="checkbox"],
.woocommerce-account input[type="radio"],
.abm-regf__radio input[type="radio"],
.abm-regf-privacy input[type="checkbox"],
.probar-privacy-checkbox {
  width: 20px !important;
  height: 20px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
  background: #0f0f0f !important;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.30, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.30, 1);
}

.woocommerce-checkout .wc_payment_methods input.input-radio:hover,
.woocommerce-checkout .wc_payment_methods input[type="radio"]:hover,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:hover,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:hover,
.woocommerce-account input[type="checkbox"]:hover,
.woocommerce-account input[type="radio"]:hover,
.abm-regf__radio input[type="radio"]:hover,
.abm-regf-privacy input[type="checkbox"]:hover,
.probar-privacy-checkbox:hover {
  border-color: #FFCE53 !important;
  box-shadow: 0 0 10px rgba(255, 206, 83, 0.3);
}

.woocommerce-checkout .wc_payment_methods input.input-radio:checked,
.woocommerce-checkout .wc_payment_methods input[type="radio"]:checked,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:checked,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked,
.woocommerce-account input[type="checkbox"]:checked,
.woocommerce-account input[type="radio"]:checked,
.abm-regf__radio input[type="radio"]:checked,
.abm-regf-privacy input[type="checkbox"]:checked,
.probar-privacy-checkbox:checked {
  border-color: #FFCE53 !important;
  background: radial-gradient(circle at center, #FFCE53 0 42%, transparent 48%), #0f0f0f !important;
}

/* Il fuoco da tastiera deve restare visibile: togliendo l'aspetto nativo
   si perde anche l'anello di sistema, e va rimesso a mano. */
.woocommerce-checkout .wc_payment_methods input[type="radio"]:focus-visible,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:focus-visible,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:focus-visible,
.woocommerce-account input[type="checkbox"]:focus-visible,
.woocommerce-account input[type="radio"]:focus-visible,
.abm-regf__radio input[type="radio"]:focus-visible,
.abm-regf-privacy input[type="checkbox"]:focus-visible,
.probar-privacy-checkbox:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: 2px;
}

/* NB sui radio di SPEDIZIONE: nel checkout sono nascosti di proposito
   (la selezione avviene sulle card). Non compaiono in nessuna lista qui
   sopra proprio per non resuscitarli: se un giorno servisse vestirli,
   vanno prima liberati dalla regola che li nasconde. */

/* =============================================================================
   LA FISARMONICA (`pb-fisarmonica`) - fonte unica per il copy lungo
   -----------------------------------------------------------------------------
   Chiesto dal committente il 26 agosto 2026: «tutte le pagine finiscono con
   blocchi di testo lunghi, scritti bene ma pesanti da vedere. Li voglio tenere
   tutti, ma CHIUSI, con apertura a un tocco - come abbiamo fatto per Accedi».

   MISURA DI PARTENZA, telefono da 375 px, categoria Shaker: la guida
   all'acquisto in fondo alla pagina era alta **4.262 pixel**, cioe' cinque
   schermate. Chi scorreva per vedere se sotto c'era altro le attraversava
   tutte.

   PERCHE' `<details>` E NON UN PANNELLO NOSTRO. Apre e chiude senza una riga di
   JavaScript, si apre col tasto Invio, lo screen reader lo annuncia come
   gruppo apribile, e la ricerca del browser (Ctrl+F) lo apre da sola quando la
   parola cercata sta dentro. Un pannello scritto a mano avrebbe richiesto tutte
   e quattro queste cose, e ne avrebbe sbagliata almeno una.

   E IL TESTO RESTA NEL DOCUMENTO, che qui non e' un dettaglio: quel copy e'
   SEO e GEO. Dentro `<details>` l'HTML c'e' tutto, Google lo legge e non e'
   cloaking - il contenuto e' lo stesso per tutti. La regola vera e' un'altra,
   ed e' quella da non violare mai: **il copy si scrive in pagina, mai caricato
   dopo con una chiamata.**
   ========================================================================== */

.pb-fisarmonica {
  margin: 0 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

/* La testa e' cliccabile tutta: una riga alta cosi', uno se l'aspetta
   premibile per intero, e mirare al triangolino non e' un gesto da telefono. */
.pb-fisarmonica > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.22s ease;
}

/* Il triangolino di serie lo disegnano i browser in tre modi diversi: si
   spegne in tutti e tre e si mette il nostro. */
.pb-fisarmonica > summary::-webkit-details-marker { display: none; }
.pb-fisarmonica > summary::marker { content: ""; }

.pb-fisarmonica__titolo {
  flex: 1 1 auto;
  color: #f4f4f4;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* Il segno: una freccia in giu' che diventa una freccia in su. Ruota, non
   cambia: e' lo stesso oggetto che si gira, ed e' cosi' che si legge come
   "questo si apre" invece che come due icone diverse. */
.pb-fisarmonica__segno {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--pb-gold, #FFCE53);
  border-bottom: 2px solid var(--pb-gold, #FFCE53);
  transform: rotate(45deg) translate(-2px, -2px);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.30, 1);
}

.pb-fisarmonica[open] > summary .pb-fisarmonica__segno {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pb-fisarmonica[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-fisarmonica__corpo {
  padding: 18px 18px 22px;
}

/* Il fuoco si vede: chi arriva col tasto tab deve sapere dov'e'. */
.pb-fisarmonica > summary:focus-visible {
  outline: 2px solid var(--pb-gold, #FFCE53);
  outline-offset: -2px;
}

/* Passaggio del mouse solo dove un mouse c'e' davvero: su un telefono lo stato
   `:hover` resta appiccicato all'ultima cosa toccata. */
@media (hover: hover) {
  .pb-fisarmonica > summary:hover {
    background-color: rgba(255, 206, 83, 0.05);
  }

  .pb-fisarmonica > summary:hover .pb-fisarmonica__titolo {
    color: #ffffff;
  }
}

/* Chi ha chiesto meno movimento non riceve la rotazione. */
@media (prefers-reduced-motion: reduce) {
  .pb-fisarmonica__segno { transition: none; }
}

/* --- LA FRECCIA PER RISALIRE (26 agosto 2026, notte) ------------------------
   Segnalato dal committente: «quando si arriva in fondo a tutto il contenuto,
   per risalire servono chilometri di scroll verso l'alto».
   E' un difetto nato con la fisarmonica: prima quel testo era gia' aperto e
   nessuno ci si infilava dentro apposta.

   IL PULSANTE LO METTE IL JAVASCRIPT (`js/fisarmonica.js`), e solo dove il
   contenuto aperto e' piu' alto di una schermata: se si vede tutto, la testa e'
   ancora li' sopra e non c'e' niente da cui tornare.
   -------------------------------------------------------------------------- */
.pb-fisarmonica__risali {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease, background-color 0.22s ease;
}

/* La stessa freccia della testa, girata in su: e' lo stesso oggetto, e chi ha
   visto quella riconosce questa senza doverla leggere. */
.pb-fisarmonica__risali-segno {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pb-gold, #FFCE53);
  border-bottom: 2px solid var(--pb-gold, #FFCE53);
  transform: rotate(-135deg) translate(-1px, -1px);
}

@media (hover: hover) {
  .pb-fisarmonica__risali:hover {
    background-color: rgba(255, 206, 83, 0.07);
    color: #ffffff;
  }
}

.pb-fisarmonica__risali:focus-visible {
  outline: 2px solid var(--pb-gold, #FFCE53);
  outline-offset: -2px;
}

/* =============================================================================
   I DUE PULSANTI DEL RIEPILOGO ORDINE (27 agosto 2026)
   -----------------------------------------------------------------------------
   Segnalato dal committente guardando la pagina di conferma: «il testo di
   "Riepilogo" e' bianco su sfondo oro, invece deve essere stile lusso quieto,
   e il testo mettilo sotto il pulsante non accanto».

   MISURATO, e il primo era un difetto vero: `.abm_riepilogo` aveva sfondo
   `rgb(255,218,121)` e testo `rgb(245,245,245)`. Oro chiaro e bianco sporco:
   un contrasto di 1,5 a 1, cioe' una scritta che non si legge. Il secondo era
   leggibile (testo scuro) ma oro pieno.

   TUTTI E DUE A CONTORNO, ed e' la stessa scelta gia' fatta per il pulsante
   dei filtri: l'oro pieno e' la lingua dei comandi che concludono un ordine, e
   un link a un documento non conclude niente. Parla piu' piano.

   VALGONO IN DUE POSTI, e per questo stanno qui e non in `checkout-ui.css`:
   la riga sotto l'ordine si vede nella pagina di conferma, e il pulsante
   "Riepilogo" anche nella lista ordini dell'area account. Questo file e'
   caricato ovunque.
   ========================================================================== */

.woocommerce a.button.abm_riepilogo,
.woocommerce-page a.button.abm_riepilogo,
a.button.abm_riepilogo,
.abm-ro-link__btn,
a.button.abm-ro-link__btn {
  background-color: transparent !important;
  border: 1px solid var(--pb-gold-line, rgba(255, 206, 83, 0.16)) !important;
  border-radius: 8px !important;
  color: var(--pb-gold, #FFCE53) !important;
  box-shadow: none !important;
  font-weight: 600;
  text-decoration: none;
}

/* SFONDO E TESTO SI DICHIARANO INSIEME, sempre: Astra riempie d'oro ogni
   `a.button:hover`, e senza la riga del colore resterebbe oro su oro. E' il
   difetto che questo progetto ha gia' pagato quattro volte. */
@media (hover: hover) {
  .woocommerce a.button.abm_riepilogo:hover,
  .woocommerce-page a.button.abm_riepilogo:hover,
  a.button.abm_riepilogo:hover,
  a.button.abm_riepilogo:focus,
  .abm-ro-link__btn:hover,
  a.button.abm-ro-link__btn:hover,
  a.button.abm-ro-link__btn:focus {
    background-color: rgba(255, 206, 83, 0.10) !important;
    border-color: var(--pb-gold-hover, rgba(255, 206, 83, 0.70)) !important;
    color: var(--pb-gold, #FFCE53) !important;
  }
}

/* --- La riga sotto, che e' una didascalia e non un'etichetta ------------- */
.abm-ro-link {
  margin: 18px 0 0;
}

.abm-ro-link__nota {
  display: block;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

/* =============================================================================
   IL GRUPPO DI FISARMONICHE (27 agosto 2026)
   -----------------------------------------------------------------------------
   Segnalato dal committente: «vorrei che fossero incapsulate in modo piu'
   elegante, seguendo il nostro stile lusso quieto».

   COSA NON ANDAVA. Ogni pannello era un riquadro chiuso: bordo su quattro lati,
   angoli tondi, fondo suo. Tre di fila diventavano tre scatole impilate con sei
   fili orizzontali in mezzo - il bordo di sotto di una e quello di sopra della
   successiva, a due pixel di distanza - e il muro di testo di prima era stato
   sostituito da un muro di cornici.

   COSA SI FA INVECE. Un gruppo solo, tenuto insieme da un filo d'oro verticale
   a sinistra, e dentro un filo sottile per separare una voce dall'altra. Meno
   cornici e piu' aria: e' quello che "lusso quieto" ha sempre voluto dire su
   questo sito, ed e' la stessa grammatica della riga su SDI e PEC nel checkout.
   ========================================================================== */

.pb-fisarmoniche {
  margin: 22px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--pb-gold-line, rgba(255, 206, 83, 0.16));
}

/* Dentro il gruppo il riquadro sparisce: resta una riga che si apre. */
.pb-fisarmoniche > .pb-fisarmonica {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background-color: transparent;
}

.pb-fisarmoniche > .pb-fisarmonica:last-child {
  border-bottom: 0;
}

.pb-fisarmoniche > .pb-fisarmonica > summary {
  padding: 15px 2px;
}

/* La voce aperta si stacca appena dal fondo: quanto basta per dire "sei qui",
   non tanto da ridiventare una scatola. */
.pb-fisarmoniche > .pb-fisarmonica[open] {
  background-color: rgba(255, 255, 255, 0.018);
}

.pb-fisarmoniche > .pb-fisarmonica[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pb-fisarmoniche > .pb-fisarmonica > .pb-fisarmonica__corpo {
  padding: 16px 2px 20px;
}

.pb-fisarmoniche > .pb-fisarmonica > .pb-fisarmonica__risali {
  border-radius: 0;
  background-color: transparent;
}

/* --- Quello che resta in evidenza, sopra al gruppo --------------------------
   E' il riassunto d'apertura: niente riquadro, niente testa da premere. Si
   legge e basta, ed e' esattamente il suo compito. */
.pb-fis-evidenza {
  margin: 0 0 4px;
}

.pb-fis-evidenza > h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 4.6vw, 25px);
  font-weight: 700;
  line-height: 1.3;
}

.pb-fis-evidenza > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .pb-fisarmoniche {
    padding-left: 14px;
  }
}