/** 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. */