/** Checkout. */

.woocommerce-checkout h3 { font-size: var(--st-fs-h3); margin-bottom: var(--st-space-3); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    min-height: 48px;
    padding: 11px 14px;
    border: 1.5px solid var(--st-border-strong);
    border-radius: var(--st-radius-sm);
    font: inherit; font-size: 1rem;
}
.woocommerce form .form-row input.input-text:focus {
    border-color: var(--st-copper);
    box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb), .14);
    outline: none;
}
/* Il riepilogo dell'ordine: niente filetto, un'ombra bassa e piu' aria dentro.
   E' il pannello che si guarda mentre si decide se premere «paga», e un
   rettangolo bordato stretto sui numeri lo fa sembrare una ricevuta gia'
   emessa invece della cosa che si sta per confermare. */
#order_review, .woocommerce-checkout-review-order {
    background: var(--st-ivory);
    border: 0;
    border-radius: var(--st-r-grande, 28px);
    padding: var(--st-space-5);
    box-shadow: var(--st-ombra-scheda);
}
.woocommerce-checkout-review-order-table .variation {  color: var(--st-muted); }

.st-staging-notice {
    margin: 0 0 var(--st-space-4);
    padding: 12px 16px;
    border-left: 4px solid var(--st-copper);
    background: rgba(var(--st-copper-rgb), .07);
}

/* =======================================================================
 * LA CASSA, ALLINEATA ALLA TAVOLA
 *
 * Il modulo a sinistra, il riepilogo a destra su crema separato da un
 * filetto verticale. Non e' una scheda che galleggia: e' la meta' destra
 * della pagina, e il filetto dice dove finisce cio' che si compila e dove
 * comincia cio' che si controlla.
 * ===================================================================== */

/* I titoli di sezione sono serif, come ogni titolo del sito. Erano sans e
   sembravano etichette di campo invece che intestazioni. */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-family: var(--st-font-display, Georgia, serif);
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--st-p-inchiostro, #15181B);
}

/* Il riepilogo: fondo crema e filetto verticale, non un riquadro con ombra.
   Su schermo stretto il filetto diventa orizzontale — un filetto verticale
   fra due blocchi impilati non separa niente. */
@media (min-width: 900px) {
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .st-cassa__riepilogo {
        background: var(--st-p-crema, #FAF6F1);
        border-left: 1px solid var(--st-border, #E4DDD2);
        border-radius: 0;
        box-shadow: none;
        padding: clamp(22px, 2.4vw, 34px);
    }
}
@media (max-width: 899px) {
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .st-cassa__riepilogo {
        background: var(--st-p-crema, #FAF6F1);
        border-top: 1px solid var(--st-border, #E4DDD2);
        border-radius: var(--st-r-scheda, 20px);
        padding: 22px;
        margin-top: 28px;
    }
}

/* Il totale e la sua etichetta stanno in `acquisto.css`, sezioni 7 e 14.
   Qui c'erano descritti una seconda volta, con un'etichetta a 12 px che non
   ha mai disegnato niente: `commerce.css` diceva 1,15rem con un id nel
   selettore e vinceva. Tre fogli per una riga, due dei quali muti. */

/* ======================================================================
 * LE TRE CASELLE PRIMA DI «EFFETTUA ORDINE» (18/10/2026)
 *
 * Termini, newsletter e richiesta di recensione avevano tre impaginazioni:
 * i termini in flex centrato (account.css, con `!important`), con l'asterisco
 * spinto al bordo destro come un elemento a se'; le altre due con il testo che
 * tornava a capo sotto la casella; tutte nel carattere di sistema, grigio.
 * Erano l'ultima cosa che si legge prima di pagare.
 *
 * Ora: casella a sinistra, testo rientrato di 36 px, asterisco subito dopo il
 * testo, carattere della pagina. La riga resta alta 44 px per il dito.
 * ==================================================================== */
body.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout form.checkout .st-nl-cassa label.checkbox,
body.woocommerce-checkout form.checkout .st-rec-cassa__casella label.checkbox {
    display: block !important;
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 10px 0 10px 36px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400 !important;
    line-height: 1.55;
    color: var(--st-text, #34312e);
    text-align: left;
    cursor: pointer;
}
body.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox > input[type=checkbox],
body.woocommerce-checkout form.checkout .st-nl-cassa label.checkbox > input[type=checkbox],
body.woocommerce-checkout form.checkout .st-rec-cassa__casella label.checkbox > input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 10px;
    margin: 0;
}
body.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox abbr.required {
    display: inline;
    margin-left: 2px;
    text-decoration: none;
}
body.woocommerce-checkout form.checkout .woocommerce-terms-and-conditions-wrapper .form-row.validate-required,
body.woocommerce-checkout form.checkout .st-nl-cassa,
body.woocommerce-checkout form.checkout .st-rec-cassa__casella { margin-bottom: 6px; }
body.woocommerce-checkout form.checkout .st-nl-cassa .optional,
body.woocommerce-checkout form.checkout .st-rec-cassa__casella .optional { color: var(--st-muted, #6f6a63); }

/* ======================================================================
 * I METODI DI PAGAMENTO: NOME E MARCHI SULLA STESSA RIGA (19/10/2026)
 *
 * Resta l'elenco disegnato in acquisto.css (righe sottili, il metodo scelto si
 * apre su fondo bianco). Cambia la riga del nome: carattere della pagina (i
 * nomi uscivano nel carattere di sistema) e i loghi allineati a destra, cosi'
 * il metodo si riconosce prima di leggerlo. I loghi di Stripe sono sfondi
 * perche' quel gateway non passa dal filtro delle icone.
 * ==================================================================== */
body.woocommerce-checkout form.checkout #payment ul.payment_methods > li.wc_payment_method > label {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0;
    font-family: inherit; font-weight: 600; color: var(--st-p-inchiostro, #15181B);
}
body.woocommerce-checkout #payment .st-metodo-loghi { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }
body.woocommerce-checkout #payment .st-metodo-loghi img,
body.woocommerce-checkout form.checkout #payment li.payment_method_stripe > label::after {
    border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background-color: #fff;
}
body.woocommerce-checkout #payment .st-metodo-loghi img { width: 34px; height: 22px; object-fit: contain; margin: 0; padding: 0; }
body.woocommerce-checkout form.checkout #payment li.payment_method_stripe > label::after {
    content: ""; flex: none; margin-left: auto; width: 148px; height: 22px; box-shadow: none; background-color: transparent;
    background-image: url("../img/pagamenti/visa.svg"), url("../img/pagamenti/mastercard.svg"), url("../img/pagamenti/amex.svg"), url("../img/pagamenti/klarna.svg");
    background-size: 34px 22px; background-repeat: no-repeat;
    background-position: 0 0, 38px 0, 76px 0, 114px 0;
}
body.woocommerce-checkout form.checkout #payment li.payment_method_stripe > label > img { display: none; }
/* I quattro loghi vanno sotto il nome: accanto, nella colonna stretta della
   cassa (anche su computer), il nome andava a capo una parola per riga. */
@media all {
    body.woocommerce-checkout form.checkout #payment ul.payment_methods > li.wc_payment_method.payment_method_stripe > label {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: center;
    }
    body.woocommerce-checkout form.checkout #payment ul.payment_methods > li.wc_payment_method.payment_method_stripe > label::after { margin-left: 0; grid-column: 2; }
}