/**
 * Checkout del Collare d'Oro.
 *
 * Due cose, tenute separate:
 *   1. impaginazione e visibilità condizionata (indispensabili)
 *   2. allineamento alla veste del sito (navy #005079, oro #f0c808, Poppins)
 *
 * L'impaginazione è a griglia. Prima era a `float` con `width:47% !important` e
 * nessuna media query: sul telefono i campi restavano affiancati a 169px e
 * l'ordine di lettura si invertiva — si compilava il C.A.P. prima della via.
 */

/* ------------------------------------------------- 1. impaginazione */

.woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    align-items: start;
}

/**
 * ⚠️ La specificità qui NON è decorazione, è la ragione per cui funziona.
 * WooCommerce ha `.woocommerce form .form-row-first { width:47%; float:left }`
 * — tre livelli — e Bootstrap ha `.form-row { display:flex }`. Un selettore
 * corto perde e le righe tornano a 152px affiancate a caso (successo il
 * 5/8/2026). Da qui il prefisso `.woocommerce form` su tutto il blocco.
 * L'ORDINE delle tre regole conta quanto la specificità: azzeramento, poi
 * nascondi, poi mostra.
 */
.woocommerce form .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce form .acd-passo__campi > .form-row,
.woocommerce-page form .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-page form .acd-passo__campi > .form-row {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-billing-fields__field-wrapper > .acd-consenso,
.woocommerce-billing-fields__field-wrapper > .acd-tipologia {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

/**
 * Le DUE COLONNE del checkout (dati a sinistra, riepilogo a destra) restano
 * affiancate anche sul telefono: il tema le tiene a meta' schermo e la regola
 * di WooCommerce che le impilerebbe perde nella cascata. Misurato: su uno
 * schermo da 390px la colonna dei dati era larga 195px, quindi ogni campo ne
 * misurava 165. Non e' un difetto introdotto da noi, ma se lo lasciamo il
 * checkout sul telefono resta illeggibile.
 */
@media (max-width: 768px) {
    /* Il primo selettore è COPIATO dal tema
       (`.woocommerce-page .content-page-inner .col2-set > div { width:50% }`,
       in css/skins/<skin>/woocommerce.css): pareggia la sua specificità — 3 classi
       più un elemento — e vince perché il nostro foglio è caricato dopo.
       Scriverne uno più corto NON basta: l'avevo provato e restava 195px. */
    .woocommerce-page .content-page-inner .col2-set > div,
    .woocommerce .col2-set > .col-1,
    .woocommerce .col2-set > .col-2 {
        width: 100%;
        /* ⚠️ `max-width` e `flex` vanno riscritti INSIEME a `width`: la regola
           del tema mette tutti e tre (`width:50%; flex:0 0 50%; max-width:50%`)
           e il solo `width:100%` non serve a niente — il `max-width` continua a
           tenere la colonna a 195px. Diagnosi: il padding cambiava e la
           larghezza no, cioè la regola veniva applicata ma non bastava. */
        max-width: 100%;
        flex: 0 0 100%;
        float: none;
        /* i 15px di respiro dai bordi dello schermo sono quelli del tema:
           azzerandoli i campi finivano attaccati al vetro. `border-box` è
           dichiarato qui e non dato per scontato: senza, larghezza più padding
           sfonderebbero i 390px e comparirebbe lo scorrimento orizzontale. */
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
    }

    .woocommerce .col2-set > .col-1 {
        margin-bottom: 28px;
    }
}

/**
 * Riepilogo dell'ordine a DESTRA dei dati, sopra i 993px.
 *
 * Non è WooCommerce a metterlo lì — lui impila tutto — ma il plugin FME che
 * stiamo togliendo (la classe `custom-checkout-layout` sul form). Senza questa
 * regola il riepilogo scivolerebbe sotto al modulo e il cliente vedrebbe il
 * checkout «cambiato». Fatto con i float e non con la griglia apposta: nel
 * form ci sono altri figli imprevedibili (avvisi, modulo del coupon, box di
 * accesso) e una griglia li piazzerebbe in celle a caso.
 */
@media (min-width: 993px) {
    form.checkout.woocommerce-checkout > .col2-set {
        float: left;
        width: calc(100% - 420px);
    }

    /* Dentro `col2-set` WooCommerce tiene due mezze colonne: a sinistra la
       fatturazione, a destra le note d'ordine — che qui non si usano. Lasciarle
       al 50% sprecava meta' spazio con una colonna vuota accanto al modulo. */
    form.checkout.woocommerce-checkout > .col2-set > .col-1,
    form.checkout.woocommerce-checkout > .col2-set > .col-2 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        float: none;
        padding: 0;
    }

    /* ⚠️ .acd-somma DEVE stare in questo elenco.
       E' stampata sull'aggancio `woocommerce_checkout_before_order_review`,
       che nel template di WooCommerce sta FUORI da #order_review: e' quindi
       figlia diretta del form. Senza il float restava un blocco nel flusso
       normale e si allargava nello spazio fra le due colonne flottanti,
       finendo SOTTO alla scheda del modulo (misurato a 1850: larga 900px
       invece di 400, a partire da x=810, sovrapposta alla scheda di 15px). */
    form.checkout.woocommerce-checkout > .acd-somma,
    form.checkout.woocommerce-checkout > #order_review_heading,
    form.checkout.woocommerce-checkout > #order_review {
        float: right;
        clear: right;
        width: 380px;
    }

    form.checkout.woocommerce-checkout > #order_review_heading {
        margin-top: 0;
    }

    form.checkout.woocommerce-checkout > #order_review {
        background: #fbf9f6;
        border: 1px solid rgba(0, 80, 121, 0.12);
        border-radius: 8px;
        padding: 22px;
        box-sizing: border-box;
    }

    form.checkout.woocommerce-checkout::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* --------------------------------------- 2. visibilità condizionata */

/* ⚠️ Queste tre regole vanno lette insieme, e nell'ordine: azzeramento (sopra),
   NASCONDI, MOSTRA. Ognuna deve pesare almeno quanto la precedente, o il
   condizionale smette di funzionare senza dirlo: l'azzeramento dichiara
   `display:block` e con un selettore piu' corto il «nascondi» perderebbe. */
.woocommerce form .woocommerce-billing-fields__field-wrapper > .acd-solo-privato,
.woocommerce form .woocommerce-billing-fields__field-wrapper > .acd-solo-ente,
.woocommerce form .acd-passo__campi > .acd-solo-privato,
.woocommerce form .acd-passo__campi > .acd-solo-ente,
.woocommerce-page form .acd-passo__campi > .acd-solo-privato,
.woocommerce-page form .acd-passo__campi > .acd-solo-ente {
    display: none;
}

form.checkout.acd-privato .woocommerce-billing-fields__field-wrapper > .acd-solo-privato,
form.checkout.acd-privato .acd-passo__campi > .acd-solo-privato,
form.checkout.acd-ente .woocommerce-billing-fields__field-wrapper > .acd-solo-ente,
form.checkout.acd-ente .acd-passo__campi > .acd-solo-ente {
    display: block;
}

/* NON aggiungere qui una regola di ripiego `.no-js`: WordPress e i temi
   lasciano quella classe sull'<html> e, essendo piu' specifica, vincerebbe su
   quella che nasconde — i campi resterebbero tutti visibili sempre (successo il
   5/8/2026). Non serve nemmeno: il checkout di WooCommerce senza JavaScript non
   funziona comunque, l'ordine si invia via AJAX. */

/* L'asterisco dei campi obbligatori-se-visibili lo mette il PHP, sostituendo
   il «(facoltativo)» di WooCommerce: vedi il filtro in includes/fields.php.
   Qui gli si dà solo il colore. */
.checkout .form-row .required {
    color: #b3261e;
    font-weight: 600;
    text-decoration: none;
}

/* ------------------------------------------- 3. veste, come il sito */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
    font-family: Poppins, sans-serif;
    color: #005079;
}

.woocommerce-checkout .form-row label {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #005079;
    display: block;
    margin-bottom: 6px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 80, 121, 0.25);
    border-radius: 4px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: #005079;
    box-shadow: 0 0 0 3px rgba(0, 80, 121, 0.12);
}

.woocommerce-checkout .form-row .description,
.woocommerce-checkout .form-row small {
    display: block;
    margin-top: 6px;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: #5a6672;
}

/**
 * Consensi: casella a sinistra, testo che scorre accanto.
 *
 * ⚠️ NON usare `display:grid` (né flex) su questa etichetta: dentro c'è un
 * link, e grid/flex trasformano OGNI figlio in una cella — il link finiva in
 * una colonna sua, spezzato una parola per riga, sovrapposto alla frase
 * (successo il 5/8/2026). La casella si toglie dal flusso e basta.
 */
.checkout .acd-consenso label {
    display: block;
    position: relative;
    padding-left: 30px;
    font-weight: 400;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 1.6;
}

.checkout .acd-consenso input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #005079;
}

.checkout .acd-consenso a {
    color: #005079;
    text-decoration: underline;
}

/* Il pulsante che chiude la donazione: oro e maiuscolo, come gli altri del
   sito, al posto del bottone nero di WooCommerce Payments. */
.woocommerce-checkout #place_order {
    width: 100%;
    background: #f0c808;
    color: #000;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0;
    border-radius: 3px;
    padding: 15px 40px;
    transition: filter .2s ease;
}

.woocommerce-checkout #place_order:hover {
    filter: brightness(0.94);
}

/* ==================================================================
   4. IL RESTO DEL NEGOZIO
   Catalogo, scheda prodotto, carrello, area riservata e ringraziamento.
   Erano l'unica parte del sito con una veste sua: pulsanti di tre colori
   diversi (grigio antracite nel carrello, navy nell'account, oro nel
   tema) e riquadri fuori palette. Qui si riportano tutti allo stesso
   vocabolario: Poppins, navy #005079, oro #f0c808, beige #fbf9f6.
   ================================================================== */

/* --- pulsanti: uno solo, quello del sito ------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce .wc-block-components-button,
.woocommerce-page .wc-block-components-button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
    background: #f0c808;
    color: #000;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0;
    border-radius: 3px;
    padding: 14px 32px;
    min-height: 46px;
    line-height: 1.2;
    transition: filter .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce .wc-block-components-button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
    background: #f0c808;
    color: #000;
    filter: brightness(0.94);
}

/* Il pulsante del carrello a blocchi è un componente React con il suo
   colore scritto dentro (`rgb(50,55,60)`): serve puntare anche l'elemento
   interno, altrimenti il testo resta bianco su oro. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover {
    background: #f0c808 !important;
    color: #000 !important;
    border: 0;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .04em;
}

.wc-block-cart__submit-container {
    background: transparent !important;
    padding: 0 !important;
}

/* ⚠️ Il testo del pulsante sta in un `div` FIGLIO che ha uno sfondo suo:
   colorando solo il pulsante veniva fuori un riquadro oro con dentro un
   pulsante navy. Va spento anche quello. */
.wc-block-cart__submit-button .wc-block-components-button__text {
    background: transparent !important;
    color: #000 !important;
    padding: 0 !important;
}

/* --- carrello a blocchi ------------------------------------------ */

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
    background: #fbf9f6;
    border: 1px solid rgba(0, 80, 121, 0.12);
    border-radius: 8px;
    padding: 22px;
    box-sizing: border-box;
}

.wc-block-cart-items__header,
.wc-block-components-totals-item__label,
.wc-block-cart__totals-title {
    font-family: Poppins, sans-serif;
    color: #005079;
    font-weight: 600;
}

.wc-block-components-product-name {
    font-family: Poppins, sans-serif;
    color: #005079;
    font-weight: 600;
    text-decoration: none;
}

.wc-block-components-quantity-selector {
    border: 1px solid rgba(0, 80, 121, 0.25);
    border-radius: 4px;
}

/* --- area riservata: accesso e registrazione --------------------- */

.woocommerce-account h2 {
    font-family: Poppins, sans-serif;
    color: #005079;
}

.woocommerce-account .woocommerce-form,
.woocommerce-account .woocommerce-form-register {
    background: #fbf9f6;
    border: 1px solid rgba(0, 80, 121, 0.12);
    border-radius: 8px;
    padding: 26px;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #005079;
    display: block;
    margin-bottom: 6px;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 80, 121, 0.25);
    border-radius: 4px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input:focus {
    outline: none;
    border-color: #005079;
    box-shadow: 0 0 0 3px rgba(0, 80, 121, 0.12);
}

/* Sotto il campo password compariva una barra nera larga quanto il campo:
   è il misuratore di robustezza di WooCommerce, che senza stile eredita un
   bordo del tema. Gli si dà una forma. */
.woocommerce-password-strength,
.woocommerce-password-hint {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    background: #fbf9f6;
    color: #5a6672;
}

.woocommerce-password-strength.strong { background: #e7f4ec; color: #1c6b3c; }
.woocommerce-password-strength.good   { background: #eef4fa; color: #005079; }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad    { background: #fdeceb; color: #b3261e; }

/**
 * Il pulsante «mostra password» di WooCommerce, che il tema non veste.
 * Senza stile veniva fuori **largo quanto il campo e alto 10px, con 2px di
 * bordo nero**: la barra nera che si vedeva sotto la password non era un
 * bordo sbagliato, era questo pulsante deformato. Va rimesso dentro al campo.
 */
.woocommerce .password-input,
.woocommerce-account .password-input,
.woocommerce-checkout .password-input,
.woocommerce-account .woocommerce-password-input {
    position: relative;
    display: block;
}

.woocommerce .show-password-input,
.woocommerce-account .show-password-input,
.woocommerce-checkout .show-password-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent no-repeat center / 20px 20px;
    /* occhio disegnato in linea: niente font o immagini da caricare */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005079' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
}

.woocommerce .show-password-input:hover,
.woocommerce-account .show-password-input:hover,
.woocommerce-checkout .show-password-input:hover {
    background-color: rgba(0, 80, 121, 0.08);
}

.woocommerce .show-password-input.display-password,
.woocommerce-account .show-password-input.display-password,
.woocommerce-checkout .show-password-input.display-password {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005079' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Lascia spazio all'occhio, o il testo ci finisce sotto. */
.woocommerce .password-input input,
.woocommerce-account .password-input .woocommerce-Input {
    padding-right: 46px;
}

/**
 * Accesso e registrazione affiancati.
 * ⚠️ Le classi sono `u-column1`/`u-column2`, NON `col-1`/`col-2`, e hanno
 * `max-width:50%` più il padding: 700+700 su 1400 non ci stanno e la seconda
 * andava a capo. Serve `border-box` e un po' di margine fra le due.
 * ⚠️ E serve `> div.u-column1` e non `> .u-column1`: la regola del tema
 * (`.woocommerce-page .content-page-inner .col2-set > div`) vale tre classi
 * PIÙ un elemento. È la seconda volta che questa differenza fa perdere: senza
 * l'elemento anche dalla nostra parte, la regola non prende e basta.
 */
@media (min-width: 769px) {
    .woocommerce-account .u-columns > div.u-column1,
    .woocommerce-account .u-columns > div.u-column2 {
        box-sizing: border-box;
        width: 48%;
        max-width: 48%;
        float: left;
    }

    .woocommerce-account .u-columns > div.u-column1 {
        margin-right: 4%;
    }

    .woocommerce-account .u-columns::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* --- catalogo ---------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-family: Poppins, sans-serif;
    color: #005079;
    font-weight: 600;
}

.woocommerce ul.products li.product .price {
    font-family: Poppins, sans-serif;
    color: #2a2a2a;
    font-weight: 600;
}

/* Al tocco un pulsante da 38px è piccolo: la soglia comoda è 44. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
    min-height: 44px;
    min-width: 44px;
}

/* --- avvisi (aggiunto al carrello, errori, conferme) -------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    border-radius: 6px;
    border-top: 0;
    padding: 16px 20px;
}

.woocommerce-message { background: #f2f8f4; border-left: 4px solid #1c6b3c; }
.woocommerce-info    { background: #eef4fa; border-left: 4px solid #005079; }
.woocommerce-error   { background: #fdeceb; border-left: 4px solid #b3261e; }

/* --- pagina di ringraziamento ------------------------------------ */

.woocommerce-order .woocommerce-thankyou-order-received {
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #005079;
}

.woocommerce-order .woocommerce-order-overview {
    background: #fbf9f6;
    border: 1px solid rgba(0, 80, 121, 0.12);
    border-radius: 8px;
    padding: 20px;
    list-style: none;
}

/**
 * I pulsanti dell'area riservata restano NAVY, e non è una resa: sul sito il
 * navy è il colore dei pulsanti secondari (`.btn-theme`) e l'oro quello
 * dell'azione principale. Accedere non è l'azione principale di questo sito —
 * donare lo è. Qui si uniforma solo la misura, che era diversa fra «Accedi»
 * (piccolo) e «Registrati» (largo tutta la colonna).
 */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button {
    background: #005079;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0;
    border-radius: 3px;
    padding: 14px 32px;
    min-height: 46px;
    width: auto;
    transition: filter .2s ease;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-Button:hover {
    background: #005079;
    color: #fff;
    filter: brightness(1.15);
}

/**
 * IL MODULO DI ACCESSO DEL CHECKOUT — quello che si apre da «Sei già un
 * cliente?». Era rotto: nome utente e password sono due `float` da 47%, e la
 * riga del pulsante ACCEDI, che non ha float, finiva schiacciata nei **82px di
 * spazio fra i due**, alla stessa altezza — ci si sovrapponeva alla parola
 * «Password» (segnalato con una schermata il 5/8/2026).
 * Rifatto a griglia come il resto, e contenuto in larghezza: due campi da
 * 644px per accedere sono fuori misura.
 */
.woocommerce-checkout form.woocommerce-form-login {
    max-width: 620px;
    /* ⚠️ `!important` mirato, e solo qui: il tema mette `display:contents` sul
       modulo, che gli toglie il riquadro — il form misura 0×0 mentre i campi
       dentro sono larghi 1370. Senza forzare, qualunque griglia o larghezza
       non ha su cosa applicarsi. */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
    background: #fbf9f6;
    border: 1px solid rgba(0, 80, 121, 0.12);
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
}

.woocommerce-checkout form.woocommerce-form-login > .form-row,
.woocommerce-checkout form.woocommerce-form-login > p {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    grid-column: 1 / -1;
}

.woocommerce-checkout form.woocommerce-form-login > .form-row-first,
.woocommerce-checkout form.woocommerce-form-login > .form-row-last {
    grid-column: span 1;
}

.woocommerce-checkout form.woocommerce-form-login label {
    display: block;
    margin-bottom: 6px;
}

.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit {
    justify-self: start;
    margin: 0;
}

.woocommerce-checkout form.woocommerce-form-login .lost_password {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 600px) {
    .woocommerce-checkout form.woocommerce-form-login {
        grid-template-columns: minmax(0, 1fr);
    }
    .woocommerce-checkout form.woocommerce-form-login > .form-row-first,
    .woocommerce-checkout form.woocommerce-form-login > .form-row-last {
        grid-column: 1 / -1;
    }
}


/* ==================================================================
   5. IL CHECKOUT A PASSI (variante scelta il 5/8/2026)
   Modulo stretto diviso in tre schede numerate, riepilogo a destra che
   si apre con la cifra donata. Le schede le compone il JavaScript —
   vedi il commento in checkout.js sul perche' non si possono mettere
   nel markup.
   ================================================================== */

.woocommerce-checkout .content-page-inner {
    background: #f6f5f3;
    padding: 34px 0 46px;
}

/* Il contenitore dei campi diventa solo un raccoglitore: la veste ce
   l'hanno le schede. */
.woocommerce-checkout .woocommerce-billing-fields {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.woocommerce-checkout .woocommerce-billing-fields > h3 {
    display: none;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: block;
}

.acd-passo[hidden] {
    display: none;
}

.acd-passo {
    background: #fff;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 80, 121, .10);
    padding: 26px 28px 28px;
    margin-bottom: 20px;
}

.acd-passo__testa {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.acd-passo__n {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #005079;
    color: #fff;
    font: 700 16px/34px Poppins, sans-serif;
    text-align: center;
}

.acd-passo__testa h4 {
    margin: 4px 0 0;
    font: 700 19px/1.2 Poppins, sans-serif;
    color: #005079;
}

.acd-passo__testa p {
    margin: 6px 0 0;
    font: 400 14px/1.5 Poppins, sans-serif;
    color: #5a6672;
}

.acd-passo__campi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    align-items: start;
}

.acd-passo__campi > .form-row-wide,
.acd-passo__campi > .acd-consenso,
.acd-passo__campi > .acd-tipologia {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .acd-passo {
        padding: 22px 18px;
    }
    .acd-passo__campi {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- il riepilogo --------------------------------------------------- */

@media (min-width: 993px) {
    form.checkout.woocommerce-checkout > .col2-set {
        width: calc(100% - 430px);
        max-width: 700px;
    }

    form.checkout.woocommerce-checkout > .acd-somma {
        width: 400px;
    }

    form.checkout.woocommerce-checkout > #order_review {
        width: 400px;
        position: sticky;
        top: 110px;
    }
}

form.checkout.woocommerce-checkout > #order_review_heading {
    display: none;
}

.acd-somma {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid #f0c808;
}

.acd-somma span {
    font: 600 14px Poppins, sans-serif;
    color: #5a6672;
}

.acd-somma strong {
    font: 700 30px/1 Poppins, sans-serif;
    color: #005079;
}

.acd-consensi {
    background: #fbf9f6;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 16px;
}

.acd-consensi label {
    font-size: 13px;
    line-height: 1.5;
}

.acd-rassicura {
    margin: 14px 0 0;
    text-align: center;
    font: 400 13px/1.6 Poppins, sans-serif;
    color: #5a6672;
}

.acd-rassicura__voce::before {
    content: "✓ ";
    color: #1c6b3c;
    font-weight: 700;
}

.woocommerce-checkout #place_order {
    width: 100%;
}

/* ==================================================================
   5. AREA RISERVATA, DA DENTRO
   Fin qui il foglio vestiva solo l'ingresso (accesso e registrazione).
   Una volta entrati, la pagina era la più trascurata del sito: il menu
   era una fila di link nudi in **Playfair Display grigio #424242** —
   un carattere che sul sito non compare da nessun'altra parte — e la
   bacheca era alta 80px in tutto. Qui l'area cliente parla la stessa
   lingua visiva delle altre pagine: Poppins, navy #005079, oro #f0c808,
   schede bianche con raggio 18 e ombra morbida.
   ================================================================== */

/* --- il menu diventa una colonna ---------------------------------- */

/**
 * Il menu e il contenuto sono due fratelli dentro `.woocommerce`, senza
 * nessun contenitore in mezzo: si affiancano con i float, come si fa già
 * per «Accedi/Registrati» poche righe più su. I float valgono solo se gli
 * elementi ci sono, quindi la pagina di accesso — che il menu non ce l'ha —
 * non se ne accorge nemmeno.
 */
@media (min-width: 993px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: left;
        width: 262px;
        margin: 0 0 30px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        float: right;
        width: calc(100% - 302px);
        margin: 0 0 30px;
    }

    .woocommerce-account .woocommerce::after {
        content: "";
        display: table;
        clear: both;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/**
 * ⚠️ Il `float:left` sulle voci è del tema: senza spegnerlo qui, la colonna
 * resta una fila orizzontale e il `width` sopra non serve a niente.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li,
.woocommerce-account .woocommerce-MyAccount-navigation ul > li {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(18, 61, 115, .08);
    background: transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: 0;
}

/**
 * ⚠️ Il carattere va imposto sull'ANCORA, non sulla voce: la regola del tema
 * che porta Playfair Display punta il link. Se si veste solo il `li`, il
 * testo resta in Playfair e sembra che la regola non sia stata applicata.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 13px 18px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #005079;
    text-transform: none;
    border-left: 3px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: #fbf9f6;
    color: #005079;
    border-left-color: #f0c808;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul > li.is-active a {
    background: #005079;
    color: #fff;
    border-left-color: #f0c808;
}

/* «Esci» non è una scheda come le altre: è l'uscita. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #5a6672;
    font-weight: 400;
}

/**
 * Sul telefono la colonna torna una lista a tutta larghezza. Le voci
 * misuravano 32px d'altezza — sotto la soglia dei 44 che serve per centrare
 * il tocco con un dito — e andavano a capo su due righe irregolari.
 */
@media (max-width: 992px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin: 0 0 24px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 15px 18px;
        min-height: 48px;
    }
}

/* --- il contenuto -------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
    font-family: Poppins, sans-serif;
    color: #5a6672;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: Poppins, sans-serif;
    color: #005079;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 12px;
}

.woocommerce-account .woocommerce-MyAccount-content p {
    font-size: 15px;
    line-height: 1.7;
}

/* --- la bacheca ---------------------------------------------------- */

.acd-bacheca__saluto {
    font-size: 17px !important;
    color: #005079;
    margin: 0 0 22px !important;
}

.acd-bacheca__saluto strong {
    font-weight: 700;
}

.acd-bacheca__esci {
    font-size: 14px;
    color: #5a6672;
    margin-left: 10px;
    text-decoration: underline;
}

/**
 * I tre riquadri. La misura minima di 190px serve perché con `1fr` puro,
 * quando il riquadro «Tesseramento» contiene «Non rinnovato per il 2026»,
 * le tre colonne escono di larghezza diversa.
 */
.acd-riquadri {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 18px;
    margin: 0 0 26px;
}

.acd-riquadro {
    background: #fff;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 80, 121, .10);
    padding: 20px 22px;
}

.acd-riquadro__etichetta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5a6672;
    margin-bottom: 8px;
}

.acd-riquadro__numero {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: #005079;
}

.acd-riquadro__numero .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.acd-riquadro__testo {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #005079;
}

.acd-riquadro__nota {
    margin: 6px 0 0 !important;
    font-size: 14px !important;
    color: #5a6672;
}

.acd-riquadro__nota a {
    color: #005079;
    text-decoration: underline;
}

/* La tessera in regola si riconosce dal filetto oro, senza scrivere «ok». */
.acd-riquadro--tessera.is-attiva {
    border-top: 3px solid #f0c808;
}

.acd-vuoto {
    background: #fbf9f6;
    border-radius: 18px;
    padding: 26px 28px;
    margin: 0 0 26px;
}

.acd-vuoto strong {
    display: block;
    font-size: 18px;
    color: #005079;
    margin-bottom: 6px;
}

.acd-vuoto p {
    margin: 0 !important;
}

.acd-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 26px;
}

/**
 * ⚠️ Il pulsante secondario deve battere `.woocommerce-account
 * .woocommerce-MyAccount-content a.button`, che poche righe più su lo
 * dipinge d'oro: senza il doppio prefisso qui sotto vincerebbe quella e i
 * tre pulsanti uscirebbero tutti uguali.
 */
.woocommerce-account .woocommerce-MyAccount-content a.button.acd-azioni__secondario {
    background: #fff;
    color: #005079;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 121, .35);
}

.woocommerce-account .woocommerce-MyAccount-content a.button.acd-azioni__secondario:hover {
    background: #fbf9f6;
    color: #005079;
    filter: none;
}

.acd-cinquepermille {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    background: #005079;
    border-radius: 18px;
    padding: 22px 26px;
    color: #dce7f2;
}

.acd-cinquepermille > div:first-child {
    flex: 1 1 260px;
}

.acd-cinquepermille strong {
    display: block;
    font-size: 18px;
    color: #fff;
    margin-bottom: 4px;
}

.acd-cinquepermille p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #dce7f2;
    line-height: 1.6 !important;
}

.acd-cinquepermille__cf {
    background: #f0c808;
    border-radius: 10px;
    padding: 10px 18px;
    text-align: center;
    color: #000;
}

.acd-cinquepermille__cf span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.acd-cinquepermille__cf strong {
    color: #000;
    font-size: 19px;
    letter-spacing: .04em;
    margin: 0;
}

.acd-cinquepermille__link {
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
}

@media (max-width: 600px) {
    .acd-riquadri {
        grid-template-columns: minmax(0, 1fr);
    }

    .acd-azioni .button {
        width: 100%;
        text-align: center;
    }

    .acd-cinquepermille {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- l'elenco delle donazioni -------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: Poppins, sans-serif;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    background: #fbf9f6;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #005079;
    border: 0;
    border-bottom: 1px solid rgba(18, 61, 115, .10);
    text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
    padding: 15px 16px;
    font-size: 15px;
    color: #5a6672;
    border: 0;
    border-bottom: 1px solid rgba(18, 61, 115, .08);
    vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a {
    color: #005079;
    font-weight: 600;
}

/* I pulsanti dentro la tabella sono azioni minute: la misura da modulo
   (46px d'altezza, maiuscolo, 32px di padding) qui gonfia ogni riga. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button {
    padding: 9px 16px;
    min-height: 0;
    font-size: 12px;
    margin: 0 6px 4px 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.view {
    background: #fff;
    color: #005079;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 121, .35);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.view:hover {
    background: #fbf9f6;
    filter: none;
}

/**
 * Sul telefono la tabella diventa un elenco di schede: WooCommerce mette
 * l'intestazione di colonna in `data-title` su ogni cella, quindi si può
 * spegnere il `thead` e stampare l'etichetta accanto al valore. Senza questo
 * cinque colonne su 390px danno celle da 60px e numeri a capo.
 */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
        display: none;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
        display: block;
        width: auto;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
        border-bottom: 1px solid rgba(18, 61, 115, .10);
        padding: 6px 0;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child {
        border-bottom: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 8px 16px;
        border: 0;
        text-align: right;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
        content: attr(data-title);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #005079;
        text-align: left;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* --- la ricevuta nel dettaglio dell'ordine -------------------------- */

.acd-ricevuta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fbf9f6;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 18px;
    padding: 20px 24px;
    margin: 24px 0;
}

.acd-ricevuta-box strong {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 17px;
    color: #005079;
    margin-bottom: 4px;
}

.acd-ricevuta-box p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #5a6672;
    max-width: 46ch;
}

/* --- indirizzi ------------------------------------------------------ */

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 19px;
}

.woocommerce-account .woocommerce-Address-title a.edit {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #005079;
    text-decoration: underline;
}

.woocommerce-account .woocommerce-Address address {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5a6672;
    font-style: normal;
    background: #fff;
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 0;
}

/* --- correzioni di cascata, misurate ------------------------------- */

/**
 * ⚠️ LA VOCE ATTIVA DEL MENU USCIVA NAVY SU NAVY, cioè invisibile.
 * Il tema emette in fondo alla `<head>`, dentro un `<style>` in linea,
 * `.woocommerce-account .woocommerce-MyAccount-navigation ul > li.is-active a
 * { color:#005079 }`: **stesso peso esatto** della nostra regola, e a parità
 * vince l'ultima scritta. Non serve `!important`, basta pesare una classe in
 * più — `.woocommerce` è il contenitore vero di menu e contenuto.
 */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul > li.is-active a {
    background: #005079;
    color: #fff;
    border-left-color: #f0c808;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
    background: #fbf9f6;
    color: #005079;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a:hover {
    background: #005079;
    color: #fff;
}

/**
 * ⚠️ E I PULSANTI USCIVANO BIANCHI SU BIANCO, per un motivo diverso: il tema
 * ha `.woocommerce-page .content-page-inner a.button { color:#fff !important }`
 * — con l'`!important`, che nessuna specificità batte. Qui l'unica risposta è
 * un `!important` dalla nostra parte, ma solo sulle classi nostre: fuori di
 * qui la regola del tema resta quella che comanda.
 * Il colore segue la regola del sito: **oro = l'azione principale** (donare),
 * navy in cornice = tutto il resto.
 */
.woocommerce-account .woocommerce-MyAccount-content a.button.acd-azioni__principale,
.woocommerce-account .woocommerce-MyAccount-content a.button.acd-bottone-ricevuta,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.acd-ricevuta {
    background: #f0c808 !important;
    color: #000 !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.button.acd-azioni__secondario,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.view {
    background: #fff !important;
    color: #005079 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 121, .35);
}

.woocommerce-account .woocommerce-MyAccount-content a.button.acd-azioni__secondario:hover,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.view:hover {
    background: #fbf9f6 !important;
    color: #005079 !important;
    filter: none;
}

/**
 * ⚠️ IL NUMERO DELLA DONAZIONE NON STA IN UN `td`, STA IN UN `th`.
 * La prima cella di ogni riga è `<th scope="row">` — scelta giusta per
 * l'accessibilità, ma vuol dire che tutte le regole scritte per `tbody td`
 * la saltano: restava vestita dal tema e usciva come un riquadro bianco
 * bordato in mezzo a celle senza bordo (si vedeva a occhio nella schermata
 * del 8/8/2026, e mi ero convinto fosse un bordo di colonna).
 */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
    padding: 15px 16px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(18, 61, 115, .08);
    vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th a {
    color: #005079;
}

/* Il filetto grigio sotto al menu era il `border-bottom` del `<nav>` messo
   dal tema: con la colonna incorniciata restava appeso sotto la scatola. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    border: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        border: 0;
        text-align: right;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th::before {
        content: attr(data-title);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #005079;
        text-align: left;
    }
}

/**
 * 🔴 GUASTO DEL SITO, NON NOSTRO — L'INDIRIZZO SPARIVA SUL COMPUTER.
 *
 * Nel CSS aggiuntivo del tema (Aspetto → Personalizza → CSS aggiuntivo,
 * riga 868 al 8/8/2026) c'è, dentro un `@media (min-width:1100px)`:
 *     address { display: none !important; }
 * Cioè: sopra i 1100px **ogni** elemento `<address>` del sito è nascosto.
 * Nell'area cliente questo cancella l'indirizzo di fatturazione nel dettaglio
 * della donazione e il contenuto delle schede in «Indirizzi» — compreso il
 * «Non hai ancora impostato questo tipo di indirizzo», che è dentro
 * l'`<address>`: si vedeva il titolo e sotto il vuoto, e sembrava un errore
 * di WooCommerce.
 *
 * Qui lo si annulla SOLO nell'area cliente. La regola andrebbe però ristretta
 * là dov'è scritta: se serviva a nascondere un indirizzo in un punto preciso,
 * oggi lo sta nascondendo ovunque.
 */
.woocommerce-account .woocommerce-customer-details address,
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-MyAccount-content address {
    display: block !important;
}

/* Il numero e la data dell'ordine sono dentro `<mark>`: il giallo del
   browser stonava con la palette. */
.woocommerce-account .woocommerce-MyAccount-content mark {
    background: #fbf9f6;
    color: #005079;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

/* --- «Il mio profilo»: le tre righe della password -------------------- */

/**
 * ⚠️ Etichetta e campo finivano AFFIANCATI, con caselle di larghezza diversa
 * una sotto l'altra. Non è un difetto di WooCommerce: Bootstrap dichiara
 * `.form-row { display:flex; flex-wrap:wrap }`, e per il campo password
 * WooCommerce avvolge l'`input` in uno `<span class="password-input">` che è
 * `inline-block` — quindi in un contenitore flex si mette in riga con
 * l'etichetta. Nelle righe Nome/Cognome non si vedeva perché lì l'input è
 * largo 100% e va a capo da solo.
 */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
    display: block;
}

.woocommerce-account .woocommerce-EditAccountForm .password-input,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-password-input {
    display: block;
    width: 100%;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset {
    border: 0;
    padding: 0;
    margin: 26px 0 0;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    font-family: Poppins, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #005079;
    padding: 0;
    margin: 0 0 12px;
    border: 0;
    width: auto;
}

.woocommerce-account .woocommerce-EditAccountForm em {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #5a6672;
}

/* Sul telefono la riga «Azioni» ha due pulsanti: tenendola come le altre
   (etichetta a sinistra, valore a destra) il primo si affianca all'etichetta
   e il secondo cade sotto, disallineato. Meglio l'etichetta su una riga sua
   e i due pulsanti affiancati sotto. */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions {
        display: block;
        text-align: left;
        padding-bottom: 14px;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions::before {
        display: block;
        margin-bottom: 8px;
    }

    .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions a.button {
        margin: 0 8px 0 0;
    }
}


/* ---------------------------------------------- carrello vuoto e vetrina
 *
 * La pagina del carrello vuoto arrivava con: una faccina grigio scuro da
 * 125px con 50px di margine sotto (il solo titolo era alto 205px), i
 * pulsanti della vetrina grigio scuro a pillola, e le card sfasate di 2px
 * perche' il segnaposto di WooCommerce ha un bordo e le foto vere no.
 * Il segnaposto ora e' il logo dell'associazione (impostazione di
 * WooCommerce, non CSS: vale su tutto il negozio).
 */

/* l'icona: piu' piccola e nel colore del sito, meno aria sotto */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    width: 78px;
    height: 78px;
    margin-bottom: 26px;
    background-color: #005079;
    opacity: .55;
    /* ⚠️ senza mask-size la maschera resta della sua misura originale (125px)
       e rimpicciolendo il riquadro viene TAGLIATA: il cerchio della faccina
       diventava un quadrato. */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.wc-block-cart__empty-cart__title {
    font-size: 26px;
    margin-bottom: 6px;
}

/* i pulsanti della vetrina erano rgb(50,55,60) a pillola: non erano mai
   passati per lo stile del sito. Oro = azione principale, come altrove. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
    background-color: #f0c808;
    color: #111;
    border-radius: 8px;
    font: 600 12px/1 Poppins, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 15px 22px;
}

.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wc-block-grid__product .wp-block-button__link:focus,
.wc-block-grid__product .add_to_cart_button:focus {
    background-color: #005079;
    color: #fff;
}

/* Le foto dei prodotti sono 300x300, il logo-segnaposto e' 250 (piu' 1px
   di bordo: reso 252). Senza un riquadro uguale per tutti, la prima card
   restava 48px piu' corta e titoli, prezzi e pulsanti non stavano sulla
   stessa riga. */
/* ⚠️ Con un solo nome di classe la regola PERDE: il contenitore
   dell'immagine resta `inline-block` e si stringe sulla larghezza vera
   del file (misurato: 252px invece della colonna). Serve la catena
   .wc-block-grid .wc-block-grid__product davanti — stessa tattica usata
   per le colonne del checkout: si vince per specificita', non a forza
   di !important. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-link {
    display: block;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* il segnaposto e' il logo dell'associazione: va mostrato INTERO, non
   tagliato, e con un po' d'aria attorno */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image img.woocommerce-placeholder {
    object-fit: contain;
    padding: 16%;
    background: #f7f6f3;
    border: 0;
    box-sizing: border-box;
}

/* le card della vetrina: stessa altezza e pulsanti sulla stessa riga.
   ⚠️ NIENTE `gap` su .wc-block-grid__products: e' un flex le cui celle
   sono gia' al 25%, e il gap le manda oltre il 100% — il quarto prodotto
   finiva a capo su una seconda riga (successo, e visto solo misurando le
   y dei titoli: a occhio sembrava a posto). */
.wc-block-grid__product {
    display: flex;
    flex-direction: column;
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart,
.wc-block-grid__product .wp-block-button {
    margin-top: auto;
}

/* --- la scheda prodotto ---------------------------------------------- */

/**
 * Misurato l'8/8/2026 su /prodotto/felpa-senza-cappuccio/: nella colonna di
 * destra ci sono **40 elementi in Poppins e 5 in Playfair Display**. Il serif
 * non è una scelta, è un residuo del tema — lo stesso carattere che stonava
 * nel menu dell'area riservata. Titolo e prezzo erano gli unici pezzi grossi
 * a portarselo dietro, e il titolo usciva pure **grigio #424242** invece che
 * navy come tutti gli altri titoli del sito.
 */
.single-product .product_title,
.single-product .entry-summary .product_title,
.single-product .entry-summary .price,
.single-product .entry-summary .price .amount,
.single-product .entry-summary .price bdi {
    font-family: Poppins, sans-serif;
}

.single-product .product_title,
.single-product .entry-summary .product_title {
    color: #005079;
    font-weight: 700;
    line-height: 1.25;
}

.single-product .entry-summary .price,
.single-product .entry-summary .price .amount {
    color: #005079;
    font-weight: 700;
}

/**
 * ⚠️ IL PULSANTE «AGGIUNGI AL CARRELLO» ERA NAVY, non oro.
 * Sul sito l'oro è il colore dell'azione principale e il navy quello delle
 * azioni di servizio: qui l'azione principale è proprio questa. Il tema lo
 * dipinge di navy da un `<style>` in linea
 * (`.single-product .product-single-inner .cart .button`), che arriva dopo il
 * nostro foglio: serve pareggiare il peso e mettere l'`!important`, come già
 * fatto nell'area riservata.
 */
.single-product .product-single-inner form.cart button.single_add_to_cart_button,
.single-product .entry-summary form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
    background: #f0c808 !important;
    color: #000 !important;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0;
    border-radius: 3px;
    padding: 14px 32px;
    min-height: 46px;
    transition: filter .2s ease;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    filter: brightness(0.94);
}

/**
 * Finché non si sceglie la taglia WooCommerce lo disattiva. Deve **sembrare**
 * disattivato — se resta oro pieno la gente ci clicca e non capisce perché non
 * succede niente — ma senza diventare il grigio spento del tema, che sembra
 * un guasto.
 */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
    background: #f7e79a !important;
    color: #6b6b6b !important;
    cursor: not-allowed;
}

/* La riga con le opzioni: il tema le mette in una tabella con i bordi delle
   celle, e attorno a «Taglia» compariva un riquadro che sembrava un errore. */
.woocommerce div.product table.variations,
.woocommerce div.product table.variations tr,
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
    border: 0;
    background: transparent;
    padding: 0;
}

/**
 * ⚠️ «Taglia» usciva **23px più in basso** del centro della tendina, e a occhio
 * si vedeva. Non è colpa dell'etichetta: la cella accanto è alta 96px perché
 * sotto al campo c'è il link «Pulisci» di WooCommerce, che è
 * `visibility:hidden` ma **occupa lo spazio lo stesso**. Con
 * `vertical-align:middle` l'etichetta si centrava su quei 96px, cioè su campo
 * *più* link invisibile.
 * Rimedio: si allineano tutte e due in ALTO e si spinge giù l'etichetta quel
 * tanto che basta a centrarla sul campo — 50px d'altezza, riga di testo ~18px,
 * quindi (50-18)/2 = 16.
 */
.woocommerce div.product table.variations th.label,
.woocommerce div.product table.variations th {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #005079;
    text-align: left;
    padding: 16px 14px 6px 0;
    vertical-align: top;
    white-space: nowrap;
}

.woocommerce div.product table.variations td.value {
    vertical-align: top;
}

.woocommerce div.product table.variations td.value {
    padding: 0 0 14px;
    position: relative;
}

/**
 * ⚠️ LA FRECCINA DELLA TENDINA È UN `::after` DELLA **CELLA**, non del campo,
 * ancorata a `right:12px`. Restringendo solo il `select` la freccia restava
 * appesa in fondo alla riga, a mezzo schermo di distanza dal campo a cui
 * appartiene (si vedeva nella schermata del 8/8/2026). Non si può spostare
 * senza toccare il markup: si stringe la TABELLA, così la cella finisce dove
 * finisce il campo e la freccia torna al suo posto.
 */
.woocommerce div.product table.variations {
    width: 100%;
    max-width: 460px;
}

.woocommerce div.product table.variations select {
    width: 100%;
    min-height: 46px;
    padding: 10px 34px 10px 14px;
    border: 1px solid rgba(0, 80, 121, .25);
    border-radius: 4px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    background: #fff;
    color: #2a2a2a;
}

/* Sul telefono etichetta e campo vanno uno sotto l'altro, o la tendina resta
   larga un francobollo. */
@media (max-width: 600px) {
    .woocommerce div.product table.variations,
    .woocommerce div.product table.variations tbody,
    .woocommerce div.product table.variations tr,
    .woocommerce div.product table.variations th,
    .woocommerce div.product table.variations td {
        display: block;
        width: auto;
        max-width: none;
    }
}

.woocommerce div.product .reset_variations {
    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: #5a6672;
}

/* Quantità e pulsante erano sfalsati di 2px: la casella della quantità è alta
   42, il pulsante 46. Si pareggiano, così stanno sulla stessa riga davvero. */
.woocommerce div.product form.cart .quantity input.qty {
    min-height: 46px;
    padding: 10px 8px;
    border: 1px solid rgba(0, 80, 121, .25);
    border-radius: 4px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    text-align: center;
}

.woocommerce div.product form.cart .quantity {
    margin-right: 10px;
}

/* La foto del prodotto era piatta, mentre tutto il resto del sito ha schede
   con raggio e ombra morbida. */
.woocommerce div.product .woocommerce-product-gallery img {
    border-radius: 14px;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 80, 121, .10);
}

/* Riga finale con codice e categoria: è una nota di servizio, non un titolo. */
.woocommerce div.product .product_meta {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: #5a6672;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(18, 61, 115, .10);
}

.woocommerce div.product .product_meta .title {
    font-weight: 600;
    color: #005079;
}

.woocommerce div.product .product_meta a {
    color: #005079;
}

/**
 * In fondo alla scheda prodotto restavano due pezzi vestiti dal tema:
 * «Altri Prodotti» usciva in **Montserrat grigio #424242** — Montserrat è il
 * carattere che il tema impone ai titoli con una regola in linea (è la stessa
 * trappola della pagina 5x1000) — e la tabella «Informazioni aggiuntive»
 * aveva bordi #dee2e6 e testo #818181, grigi fuori palette.
 */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2,
.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2 {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #005079;
    margin-bottom: 22px;
}

.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-Tabs-panel > h2 {
    font-family: Poppins, sans-serif;
    color: #005079;
}

.woocommerce div.product table.shop_attributes {
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: Poppins, sans-serif;
}

.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td {
    border: 0;
    border-bottom: 1px solid rgba(18, 61, 115, .08);
    padding: 14px 18px;
    font-size: 15px;
    background: transparent;
}

.woocommerce div.product table.shop_attributes tr:last-child th,
.woocommerce div.product table.shop_attributes tr:last-child td {
    border-bottom: 0;
}

.woocommerce div.product table.shop_attributes th {
    font-weight: 600;
    color: #005079;
    text-align: left;
    width: 220px;
}

.woocommerce div.product table.shop_attributes td,
.woocommerce div.product table.shop_attributes td p {
    color: #5a6672;
    font-style: normal;
    margin: 0;
}

/* Le schede dei prodotti correlati: stesso titolo navy del resto del sito. */
.woocommerce .related .shop-loop-title a,
.woocommerce .upsells .shop-loop-title a {
    font-family: Poppins, sans-serif;
    color: #005079;
}

/* ----------------------------------------- checkout: fondo e centratura
 *
 * Misurato l'8/8/2026 sulla pagina vera, con un prodotto nel carrello.
 *
 * 1. DUE STRISCE GRIGIE sopra e sotto il modulo: il blocco che contiene il
 *    checkout e' BIANCO (.woocommerce.wp-block-group) dentro un contenitore
 *    grigio caldo (.content-page-inner, #f6f5f3). Dove il bianco non arriva
 *    si vede il grigio: 34px sopra e ~76px sotto.
 *
 * 2. 325px DI VUOTO in mezzo: 700 di modulo + 400 di riepilogo in un
 *    contenitore da 1410. Il modulo resta stretto (si legge meglio), ma la
 *    coppia si centra invece di stare appiccicata ai due bordi.
 *
 * 3. Il riepilogo era #fbf9f6 su una pagina #f6f5f3: cinque punti su 255,
 *    cioe' nessun contrasto. Diventa una scheda BIANCA come quelle del
 *    modulo e ci si stacca sopra.
 */

@media (min-width: 993px) {
    .woocommerce-checkout .woocommerce.wp-block-group {
        background: transparent;
    }

    form.checkout.woocommerce-checkout {
        max-width: 1130px;
        margin-left: auto;
        margin-right: auto;
    }

    form.checkout.woocommerce-checkout > #order_review {
        background: #fff;
        border: 1px solid rgba(18, 61, 115, .10);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0, 80, 121, .08);
        padding: 26px 24px;
    }
}

#order_review thead th {
    font: 600 11px/1 Poppins, sans-serif !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a939c !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(18, 61, 115, .10);
}

#order_review tr.cart_item td.product-name {
    padding: 14px 0 !important;
    font-size: 14px;
    line-height: 1.45;
    color: #123d73;
}

#order_review tr.cart_item td.product-total {
    padding: 14px 0 !important;
    font-weight: 700;
    color: #005079;
    white-space: nowrap;
}

#order_review tr.cart_item .product-quantity {
    display: inline;
    margin-left: 6px;
    font-weight: 400;
    color: #8a939c;
}

/* ⚠️ La ✕ per togliere il prodotto era un pallino ROSSO PIENO da 15px a
   inizio riga (x=1109 contro 1114 della cella) e sembrava un'immagine
   rotta: l'utente l'ha segnalata proprio cosi'. Provate due sistemazioni,
   entrambe peggio: in fondo alla riga finiva SOPRA AL PREZZO, in linea il
   tema la riportava fuori dalla cella lo stesso.
   Tolta: nel checkout WooCommerce NON la mette, l'ha aggiunta il tema, e
   il carrello si modifica dalla sua pagina, non mentre si sta pagando. */
#order_review tr.cart_item a.remove {
    display: none !important;
}

#order_review .cart-subtotal th,
#order_review .cart-subtotal td,
#order_review .tax-rate th,
#order_review .tax-rate td {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #5a6672 !important;
    padding: 8px 0 !important;
    border: 0 !important;
}

#order_review .order-total th,
#order_review .order-total td {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #005079 !important;
    padding: 14px 0 6px !important;
    border-top: 1px solid rgba(18, 61, 115, .12) !important;
}

#order_review .payment_methods > li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(18, 61, 115, .07);
}

#order_review .payment_methods > li:last-child {
    border-bottom: 0;
}

#order_review input[type=radio] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #005079;
    margin-right: 8px !important;
}

/* le spunte erano 13x13: per un dito ne servono almeno 20 */
#order_review input[type=checkbox] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #005079;
}

/* il testo legale non deve pesare quanto la cifra che si sta donando */
#order_review .woocommerce-privacy-policy-text p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #8a939c !important;
    margin-bottom: 10px !important;
}

#order_review .acd-rassicura {
    font-size: 12px !important;
    color: #5a6672 !important;
    margin-top: 14px !important;
}

/* --- griglia dei prodotti correlati ---------------------------------- */

/**
 * 🔴 LE DUE ICONCINE USCIVANO DALLA CARD. Il tema mette
 * `.shop-loop-actions` in `position:absolute` con **`left:-10px`**: il
 * riquadro col carrello e l'occhio finiva **fuori dal bordo sinistro**, e in
 * mezzo alla griglia sembrava appeso nel vuoto (misurato sul sito vero
 * l'8/8/2026: azioni a x=478 su una card che comincia a x=488).
 * Si riportano dentro, in alto a destra sopra la foto.
 */
.woocommerce .related .shop-loop-actions,
.woocommerce .upsells .shop-loop-actions,
.woocommerce ul.products .shop-loop-actions {
    left: auto;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/**
 * ⚠️ Le foto sono tutte 370×370: quello che sembrava un allineamento sbagliato
 * era che **la Shopper è fotografata su fondo bianco** e senza cornice si
 * confondeva con la pagina — sembrava una card mezza vuota accanto a due
 * piene. Una cornice tenue e il raggio delle altre schede del sito bastano a
 * far vedere dove finisce l'immagine.
 */
.woocommerce .related .product-thumbnail,
.woocommerce .upsells .product-thumbnail,
.woocommerce ul.products .product-thumbnail {
    border: 1px solid rgba(18, 61, 115, .10);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.woocommerce .related .product-thumbnail img,
.woocommerce .upsells .product-thumbnail img,
.woocommerce ul.products .product-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

/**
 * ⚠️ I PREZZI NON ERANO IN RIGA. «Felpa con cappuccio personalizzabile» va a
 * capo su due righe e spingeva il suo prezzo **25px più in basso** degli altri
 * due (misurato: 1941 contro 1916). Si riserva al titolo l'altezza di due
 * righe, così i prezzi cadono tutti alla stessa quota anche quando il nome è
 * corto.
 */
.woocommerce .related .shop-loop-title,
.woocommerce .upsells .shop-loop-title,
.woocommerce ul.products .shop-loop-title {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    /* due righe piene: misurato, una riga di questo titolo è alta 27px, quindi
       54. Con 44 il titolo a due righe sforava e il suo prezzo restava 10px
       più in basso degli altri. */
    min-height: 54px;
    margin: 14px 0 4px;
}

.woocommerce .related .price,
.woocommerce .upsells .price,
.woocommerce ul.products .price {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    color: #005079;
}

/* --- due dettagli della scheda --------------------------------------- */

/**
 * Il link «Pulisci» di WooCommerce è `visibility:hidden` finché non si sceglie
 * una variante, **ma occupa 15px lo stesso**: sotto alla tendina restava una
 * riga di vuoto che allontanava il pulsante. Lo si toglie dal flusso; quando
 * WooCommerce lo accende ricompare al suo posto, appena sotto al campo.
 */
.woocommerce div.product table.variations td.value {
    padding-bottom: 0;
}

.woocommerce div.product .reset_variations {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    font-size: 13px;
    white-space: nowrap;
}

/**
 * Sopra al titolo c'era un riquadro con dentro una freccia e basta: è il
 * passaggio al prodotto successivo, che il tema disegna senza etichetta né
 * contorno e sembrava un pezzo rimasto lì per sbaglio. Diventa un pulsante
 * tondo discreto, allineato a destra.
 */
.woocommerce div.product .menu-single-product {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.woocommerce div.product .menu-single-product a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18, 61, 115, .18);
    border-radius: 999px;
    color: #005079;
    background: #fff;
    transition: background-color .18s ease, border-color .18s ease;
}

.woocommerce div.product .menu-single-product a:hover {
    background: #fbf9f6;
    border-color: rgba(0, 80, 121, .35);
}

/* Le due righe di rassicurazione sotto al pulsante (solo sui gadget). */
.acd-rassicura-prodotto {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #5a6672;
}

/**
 * ⚠️ La spunta NON si mette in `position:absolute`. Provato: il tema toglie il
 * `position:relative` all'`li`, il `left:0` si è calcolato su un antenato
 * lontano e **le due spunte sono finite tutte e due contro il bordo sinistro
 * della colonna**, una all'altezza di «Taglia» e staccata dalla sua frase
 * (visto a video l'8/8/2026). Un marcatore in linea non può scollarsi dal
 * testo a cui appartiene.
 */
.acd-rassicura-prodotto li {
    margin: 0 0 4px;
    padding-left: 0;
}

.acd-rassicura-prodotto li::before {
    content: "✓";
    display: inline-block;
    width: 20px;
    color: #1c6b3c;
    font-weight: 700;
}