/* ===========================================================================
   Carrello e area cliente.

   Stessa divisione dei compiti del resto del tema: il layout (colonne, flex,
   spaziature fra i blocchi) lo mettono le classi basscss nel markup, qui
   restano colori, tipografia e i componenti che WooCommerce genera per conto
   proprio — campi dei form, pulsanti, avvisi — che vanno ricondotti ai token
   di style.css invece di lasciarli con il foglio di stile del plugin.

   Caricato solo su carrello, checkout e area cliente (inc/enqueue.php).
   =========================================================================== */

/* ===================== AVVISI =====================
   wc_print_notices() stampa .woocommerce-message (esito positivo),
   .woocommerce-info (informativo) e .woocommerce-error (errore, come <ul>).
   ================================================== */

.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 1rem;
    /* padding-left tiene lo spazio per l'icona che WooCommerce posiziona in
       ::before con `position: absolute; left: 1.5em`: senza, l'icona finisce
       sopra il testo invece che a fianco. */
    padding: 20px 20px 20px 3.5em;
    border: 1px solid var(--color-border);
    /* border-left-width: 4px; */
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    font-size: 1rem;
    list-style: none;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    top: 50%;
    transform: translateY(-50%);
}

.woocommerce-message {
    border-left-color: var(--color-success);
}

.woocommerce-message::before {
    color: var(--color-success);
}

.woocommerce-info {
    /* border-left-color: var(--color-primary); */
}

.woocommerce-info::before {
    color: var(--color-primary);
}

.woocommerce-error {
    border-left-color: var(--color-error);
}

.woocommerce-error::before {
    color: var(--color-error);
}

.woocommerce-error li+li {
    margin-top: 0.5rem;
}

/* Il pulsante che WooCommerce infila dentro l'avviso ("Vedi carrello",
   "Sfoglia i prodotti") va staccato dal testo. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin-left: 1rem;
}

/* WooCommerce mette il pulsante a float:right: l'avviso si alza quanto il
   pulsante e il testo resta in cima, sfalsato rispetto all'icona centrata.
   Flex solo con un pulsante dentro: su un avviso con link nel testo
   spezzerebbe la frase in pezzi. */
.woocommerce-message:has(> .button),
.woocommerce-info:has(> .button) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.woocommerce-message>.button,
.woocommerce-info>.button {
    float: none;
    flex: 0 0 auto;
    order: 1;
    margin-left: auto !important;
}

/* Nel profilo gli avvisi sono card come le altre: il tipo lo dice l'icona,
   non il bordo colorato. */
.mp-account-layout .woocommerce-message,
.mp-account-layout .woocommerce-info,
.mp-account-layout .woocommerce-error {
    border-left-width: 1px;
    border-left-color: var(--color-border);
}

/* ===================== PULSANTI GENERATI DAL PLUGIN =====================
   I template del tema usano .btn-*; queste regole coprono i pulsanti che
   WooCommerce stampa da sé (salva indirizzo, azioni sull'ordine, paginazione
   degli ordini) senza doverne riscrivere il template.
   ======================================================================== */

.woocommerce .button:not([class*="btn-"]),
.woocommerce-button:not([class*="btn-"]),
.woocommerce-Button:not([class*="btn-"]),
.mp-account input[type="submit"]:not([class*="btn-"]),
.mp-account button[type="submit"]:not([class*="btn-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 30px;
    /* Sono l'equivalente di .btn-secondary per il markup del plugin, quindi
       prendono il suo stesso vetro: bordo trasparente — tiene la misura, il
       contorno lo disegna l'anello nel box-shadow più sotto — e fondo velato
       al posto del bianco con la linea navy. */
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background-color: var(--glass-frost-bg);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    color: var(--color-dark);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .button:not([class*="btn-"]):hover,
.woocommerce-button:not([class*="btn-"]):hover,
.woocommerce-Button:not([class*="btn-"]):hover {
    background-color: var(--glass-frost-bg-hover);
    color: var(--color-dark);
}

/* Azione conclusiva di ogni form: pieno primario. Solo per i pulsanti che
   WooCommerce genera da sé — dove il markup è del tema la classe .btn-* è già
   nel template, e una regola più specifica qui la scavalcherebbe.

   [type="submit"] e :not([class*="btn-"]) sono ripetuti qui perché il
   selettore base sopra li ha entrambi: senza, questa regola è meno specifica
   e i tre submit restano vuoti invece di diventare blu. */
.woocommerce .button.alt,
.mp-account button[type="submit"][name="save_address"]:not([class*="btn-"]),
.mp-account button[type="submit"][name="save_account_details"]:not([class*="btn-"]),
.mp-account button[type="submit"][name="wc_reset_password"]:not([class*="btn-"]) {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
}

.woocommerce .button.alt:hover,
.mp-account button[type="submit"][name="save_address"]:not([class*="btn-"]):hover,
.mp-account button[type="submit"][name="save_account_details"]:not([class*="btn-"]):hover,
.mp-account button[type="submit"][name="wc_reset_password"]:not([class*="btn-"]):hover {
    background-color: #1c6cb4;
    border-color: #1c6cb4;
    color: var(--color-white);
}

/* --- Liquid glass ---------------------------------------------------------
   Lo stesso vetro dei .btn-* di style.css, ripetuto qui per i pulsanti del
   plugin: questo foglio carica dopo style.css e la regola sopra, che dichiara
   una propria `transition`, altrimenti cancellerebbe quella del vetro.
   I token --glass-* stanno in style.css.
   -------------------------------------------------------------------------- */

.woocommerce .button:not([class*="btn-"]),
.woocommerce-button:not([class*="btn-"]),
.woocommerce-Button:not([class*="btn-"]),
.mp-account input[type="submit"]:not([class*="btn-"]),
.mp-account button[type="submit"]:not([class*="btn-"]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--glass-frost-rim), var(--glass-shadow);
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.25s ease,
                transform 0.25s ease, background-position 0.55s ease;
}

/* Pieno primario: il rim scuro in basso ha un fondo su cui appoggiarsi. */
.woocommerce .button.alt,
.mp-account button[type="submit"][name="save_address"]:not([class*="btn-"]),
.mp-account button[type="submit"][name="save_account_details"]:not([class*="btn-"]),
.mp-account button[type="submit"][name="wc_reset_password"]:not([class*="btn-"]) {
    box-shadow: var(--glass-rim), var(--glass-shadow);
}

/* Sotto un pieno primario la velatura del frost sbiancherebbe il blu: i .alt
   tornano a quella leggera dei pieni. */
.woocommerce .button.alt::before,
.mp-account button[type="submit"][name="save_address"]:not([class*="btn-"])::before,
.mp-account button[type="submit"][name="save_account_details"]:not([class*="btn-"])::before,
.mp-account button[type="submit"][name="wc_reset_password"]:not([class*="btn-"])::before {
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0) 60%);
}

.woocommerce .button:not([class*="btn-"])::before,
.woocommerce-button:not([class*="btn-"])::before,
.woocommerce-Button:not([class*="btn-"])::before,
.mp-account button[type="submit"]:not([class*="btn-"])::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Sotto il testo, come in style.css. */
    z-index: -1;
    pointer-events: none;
    background-image: var(--glass-frost-veil);
}

.woocommerce .button:not([class*="btn-"])::after,
.woocommerce-button:not([class*="btn-"])::after,
.woocommerce-Button:not([class*="btn-"])::after,
.mp-account button[type="submit"]:not([class*="btn-"])::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    z-index: 1;
    width: 45%;
    pointer-events: none;
    transform: skewX(-18deg);
    background-image: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: left 0.55s ease;
}

.woocommerce .button:not([class*="btn-"]):hover::after,
.woocommerce-button:not([class*="btn-"]):hover::after,
.woocommerce-Button:not([class*="btn-"]):hover::after,
.mp-account button[type="submit"]:not([class*="btn-"]):hover::after {
    left: 115%;
}

.woocommerce .button:not([class*="btn-"]):hover,
.woocommerce-button:not([class*="btn-"]):hover,
.woocommerce-Button:not([class*="btn-"]):hover,
.mp-account input[type="submit"]:not([class*="btn-"]):hover,
.mp-account button[type="submit"]:not([class*="btn-"]):hover {
    box-shadow: var(--glass-frost-rim-hover), var(--glass-shadow-hover);
    transform: translateY(-1px);
}

.woocommerce .button.alt:hover,
.mp-account button[type="submit"][name="save_address"]:not([class*="btn-"]):hover,
.mp-account button[type="submit"][name="save_account_details"]:not([class*="btn-"]):hover,
.mp-account button[type="submit"][name="wc_reset_password"]:not([class*="btn-"]):hover {
    box-shadow: var(--glass-rim), var(--glass-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {

    .woocommerce .button:not([class*="btn-"]),
    .woocommerce-button:not([class*="btn-"]),
    .woocommerce-Button:not([class*="btn-"]),
    .mp-account input[type="submit"]:not([class*="btn-"]),
    .mp-account button[type="submit"]:not([class*="btn-"]) {
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .woocommerce .button:not([class*="btn-"])::after,
    .woocommerce-button:not([class*="btn-"])::after,
    .woocommerce-Button:not([class*="btn-"])::after,
    .mp-account button[type="submit"]:not([class*="btn-"])::after {
        display: none;
    }

    .woocommerce .button:not([class*="btn-"]):hover,
    .woocommerce-button:not([class*="btn-"]):hover,
    .woocommerce-Button:not([class*="btn-"]):hover,
    .mp-account input[type="submit"]:not([class*="btn-"]):hover,
    .mp-account button[type="submit"]:not([class*="btn-"]):hover {
        transform: none;
    }
}

/* ===================== CAMPI DEI FORM =====================
   Login, registrazione, dati account e indirizzi: il markup lo genera
   WooCommerce (woocommerce_form_field), quindi gli input si agganciano per
   tipo e non per classe del tema. Misure dello spec §4.6.
   ========================================================== */

.mp-account .form-row {
    display: block;
    margin: 0 0 1rem;
}

.mp-account label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--color-dark);
}

.mp-account .input-text,
.mp-account input[type="text"],
.mp-account input[type="email"],
.mp-account input[type="tel"],
.mp-account input[type="password"],
.mp-account textarea,
.mp-account select,
.mp-account .select2-container .select2-selection {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-field-bg);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-dark);
}

/* woocommerce.css colora i campi con .woocommerce form .form-row .input-text
   (0,3,1), più specifico della regola sopra: senza, indirizzi e dati account
   restano con il suo bordo quasi nero. */
.mp-account .woocommerce form .form-row .input-text,
.mp-account .woocommerce form .form-row select {
    border-color: var(--color-border);
    background-color: var(--color-field-bg);
}

.mp-account input::placeholder,
.mp-account textarea::placeholder {
    color: var(--color-text-gray);
}

/* Select2, che WooCommerce usa su paese e provincia: l'altezza la fissa il
   suo CSS su un elemento interno, e senza questo la riga resta più bassa di
   tutti gli altri campi. */
.mp-account .select2-container .select2-selection--single {
    height: auto;
}

.mp-account .select2-container .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--color-dark);
}

.mp-account .select2-container .select2-selection__arrow {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.mp-account .required {
    color: var(--color-error);
    text-decoration: none;
}

.mp-account fieldset {
    margin: 2rem 0 1rem;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.mp-account legend {
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-gray);
}

.mp-account em,
.mp-account .description {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--color-text-gray);
}

/* Checkbox "ricordami": la casella nativa non si allinea con l'etichetta. */
.mp-account .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.mp-account .woocommerce-form__input-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    accent-color: var(--color-primary);
}

/* Il campo password di WooCommerce incapsula l'input per appenderci l'occhio
   "mostra password": senza position il pulsante si stacca dal campo. */
.mp-account .woocommerce-password-hint,
.mp-account .password-input {
    display: block;
    position: relative;
    width: 100%;
}

.mp-account .show-password-input {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* ===================== ACCESSO E REGISTRAZIONE =====================
   form-login, form-lost-password, form-reset-password e
   lost-password-confirmation: card bianche come il resto del profilo, con il
   padding delle tessere "come funziona" (36px) invece dei 20px delle card di
   servizio — qui la card è tutta la pagina, non un blocco fra tanti.
   ================================================================== */

/* woocommerce.css disegna un proprio riquadro attorno a form.login e
   form.register (bordo viola, padding, margine 2em): dentro la card farebbe
   un secondo bordo. Anche le righe hanno il loro padding di 3px, che
   sfalserebbe i campi rispetto al titolo. Selettori a (0,3,1) per battere
   i suoi (0,2,1) a prescindere dall'ordine di caricamento. */
.mp-account .mp-auth form.mp-auth-form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.mp-account .mp-auth form .form-row {
    margin: 0 0 1rem;
    padding: 0;
}

/* Stesso foglio: bordo quasi nero e padding 0.5em sugli input, al posto
   del bordo grigio e del 10/20 dello spec §4.6. */
.mp-account .mp-auth form .form-row .input-text {
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-field-bg);
    line-height: 1.5;
}

.mp-account .mp-auth form .form-row .input-text:focus {
    border-color: var(--color-primary);
}

/* ...e float:left sul pulsante di accesso: fuori dal flusso, la card non ne
   conta l'altezza e il pulsante sfora il padding inferiore. */
.woocommerce .mp-auth .woocommerce-form-login .woocommerce-form-login__submit {
    float: none;
    margin-right: 0;
}

/* Pagina account a tutta altezza: il footer resta sotto la piega anche
   quando il contenuto (login, recupero password) è corto. L'header è sticky
   e quindi nel flusso: ui.js ne pubblica l'altezza in --header-height. */
.mp-account-page .mp-account {
    min-height: calc(100vh - var(--header-height, 80px));
    min-height: calc(100dvh - var(--header-height, 80px));
}

.mp-auth-card {
    height: 100%;
    padding: 20px;
}

@media (min-width: 52em) {
    .mp-auth-card {
        padding: 36px;
    }
}

/* Riga "Resta connesso / Password dimenticata?": etichetta e link alla
   stessa misura (body 16), il link si distingue solo dal colore. */
.mp-auth-opzioni {
    gap: 8px 16px;
}

.mp-account .mp-auth-opzioni .woocommerce-form__label-for-checkbox {
    margin: 0;
    font-weight: 300;
    cursor: pointer;
}

.mp-auth-link {
    font-size: 1rem;
    color: var(--color-primary);
}

.mp-auth-link:hover {
    color: #1c6cb4;
    text-decoration: underline;
}

/* Separatore interno della card: fra i vantaggi e il form, fra il form e il
   rimando all'accesso. */
.mp-auth-sep {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.mp-auth-vantaggi li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mp-auth-vantaggi li+li {
    margin-top: 10px;
}

/* Spunta nella pillola azzurra delle etichette di stato (.mp-stato). Il
   margine la allinea alla prima riga del testo, non al centro del blocco. */
.mp-auth-spunta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background-color: rgba(35, 133, 220, 0.12);
    color: var(--color-primary);
}

.mp-auth-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(35, 133, 220, 0.12);
    color: var(--color-primary);
}

/* Testo privacy agganciato da WooCommerce a woocommerce_register_form e nota
   sulla password generata: stessa misura delle descrizioni dei campi. */
.mp-account .woocommerce-privacy-policy-text p,
.mp-auth-nota {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-gray);
}

.mp-account .woocommerce-privacy-policy-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ===================== CHECKOUT A BLOCCHI =====================
   Il markup è React di WooCommerce (templates/checkout.php stampa solo il
   contenuto della pagina): qui si toccano le sue classi.
   ============================================================= */

/* Form e riepilogo a metà. WooCommerce li mette a 65/35 dentro una container
   query sul blocco: stessa soglia (700px), così sotto resta il suo impilato
   a colonna singola. */
@container (min-width: 700px) {
    .mp-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
        width: 50%;
        padding-right: 1rem;
    }

    .mp-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        width: 50%;
        padding-left: 1rem;
    }
}

/* Riepilogo sticky, ad almeno 150px dal bordo (di più se l'header, la cui
   altezza ui.js pubblica in --header-height, è più alto): al valore di
   WooCommerce (24px) scorrendo finisce sotto l'header sticky.

   Fuori dalla container query e agganciato alla classe che WooCommerce mette
   sul body del checkout, non a .mp-checkout del template: così la regola non
   dipende né dal contenitore del blocco né dall'instradamento del template.
   WooCommerce stesso rende sticky il riepilogo solo se è più basso della
   finestra (classe is-sticky): qui lo è sempre, e un riepilogo più alto
   della finestra scorre comunque con la pagina. */
@media (min-width: 52em) {
    body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
        position: sticky;
        top: 150px;
        top: max(150px, calc(var(--header-height, 80px) + 1rem));
        align-self: flex-start;
    }
}

/* Invia richiesta ordine: il blocco eredita .wp-element-button, grigio
   antracite e squadrato degli stili globali di WordPress. Qui torna
   .btn-primary. Specificità alta apposta: il foglio del blocco ha regole
   su body:not(...) .wc-block-components-button:not(.is-link) a (0,3,1). */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
    min-height: 0;
    padding: 10px 30px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-button);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:focus {
    background-color: #1c6cb4;
    border-color: #1c6cb4;
    color: var(--color-white);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:disabled {
    opacity: 0.5;
}

/* Campi del checkout: stesso grigio chiaro degli input del configuratore
   (shop.css, .pdp-posizione .input; il blocco usa l'80% del colore del testo,
   quasi nero) e raggio del design system al posto dei 4px del blocco. Al
   focus il blu primario. Il selettore degli input supera il :focus del
   blocco, che è a (0,4,1). */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]),
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-textarea {
    border-color: var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-field-bg);
}

body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):focus,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-block-components-textarea:focus {
    border-color: var(--color-primary);
}

body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    border-color: var(--color-border);
}

/* Rientro orizzontale: 20px come .input del tema, al posto dei 9px del
   blocco, che col raggio da 20px mettevano il testo a ridosso della curva.
   Classe ripetuta apposta: il blocco riscrive il padding sinistro a focus e
   a campo pieno con selettori a (0,5,1). La label flottante si sposta con il
   testo (20px + 1px di bordo). */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.wc-block-components-text-input input:not([type="checkbox"]) {
    padding-left: 20px;
    padding-right: 20px;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
    left: 21px;
    max-width: calc(100% - 42px);
}

/* Select: a destra resta lo spazio della freccia, allineata al rientro. */
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
    padding-left: 20px;
    padding-right: 44px;
}

body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
    right: 20px;
}

body.woocommerce-checkout .wc-block-components-textarea {
    padding: 12px 20px;
}

/* Consenso privacy sopra l'invio (testo in inc/checkout.php). */
body.woocommerce-checkout .wc-block-checkout__terms .mp-privacy-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.woocommerce-checkout .wc-block-checkout__terms a.mp-privacy-link:hover {
    color: var(--color-primary);
}

/* Paese e provincia: il blocco avvolge la <select> in un contenitore a fondo
   bianco e raggio 4px. Col raggio del design system sulla select gli angoli
   del contenitore restano scoperti, quattro spigoli bianchi sul fondo
   grigio della pagina. Il fondo lo dà già la select. */
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
    border-radius: var(--radius-input);
    background-color: transparent;
}

/* --- Riepilogo d'ordine accanto al form ---------------------------------
   Card come quella del carrello (.mp-carrello-riepilogo): fondo bianco,
   bordo e raggio del design system al posto della cornice grigia a 5px del
   blocco. Il padding della card si somma ai 16px interni del blocco: 24px
   dal bordo, come le card del sito. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
    padding: 8px 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    font-size: 1rem;
    color: var(--color-dark);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* Sotto i 700px il titolo diventa la testata di un accordion, con una linea
   sopra e una sotto: dentro la card quella sopra raddoppierebbe il bordo. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
    border-top-color: transparent;
    border-bottom-color: var(--color-border);
}

/* Separatori: il blocco li calcola dal colore del testo (20%), qui il grigio
   dei bordi del tema. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
    border-top-color: var(--color-border);
}

/* Riga prodotto: miniatura nel riquadro arrotondato del carrello. */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
    width: 64px;
    margin-top: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
    width: 64px;
    max-width: 64px;
    height: 64px;
    border-radius: var(--radius-media);
    background-color: var(--color-input-bg);
    object-fit: cover;
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background-color: var(--color-dark);
    font-weight: 500;
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    padding: 0 16px 16px 20px;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
}

/* Prezzo unitario: sotto il nome, minore del totale di riga. */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {
    font-size: 0.75rem;
    color: var(--color-text-gray);
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    padding-top: 0;
    font-weight: 500;
    white-space: nowrap;
}

/* Dettaglio della configurazione: il blocco lo stampa in riga, voci divise
   da " / " (uno span aria-hidden in coda a ogni voce), e su una
   configurazione con varianti, stampe e file diventa un paragrafo
   illeggibile. Qui una voce per riga, come nel carrello. */
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-gray);
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none;
}

body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details__name {
    font-weight: 500;
    color: var(--color-dark);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
    font-size: 1rem;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label {
    color: var(--color-text-gray);
}

/* Totale come nel carrello (.mp-carrello-riga-totale): grassetto, staccato
   dal resto da una linea scura. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
    border-top-color: var(--color-dark);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

/* ===================== ORDINE RICEVUTO =====================
   Endpoint order-received del checkout: WooCommerce stampa i template
   classici (checkout/thankyou.php, order/order-details*.php) con il foglio
   di woocommerce.css — tabella a cornice grigia, dati a linee tratteggiate.
   Qui tornano card e tabelle del design system, come nel dettaglio ordine
   dell'area cliente. Il sottotitolo "Ti ricontatteremo a breve" è in
   templates/checkout.php.
   ============================================================ */

.mp-checkout .woocommerce-order .woocommerce-thankyou-order-received {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* Numero, data e totale: una card con tre celle invece della riga di
   elementi flottanti con separatori tratteggiati. */
.mp-checkout .woocommerce-order ul.order_details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0 0 3rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    list-style: none;
    overflow: hidden;
}

.mp-checkout .woocommerce-order ul.order_details::before,
.mp-checkout .woocommerce-order ul.order_details::after {
    display: none;
}

.mp-checkout .woocommerce-order ul.order_details li {
    float: none;
    margin: 0;
    padding: 20px 24px;
    border: 0;
    /* Il bordo sta a sinistra di ogni cella e la card ne nasconde quello
       della prima di ogni riga (overflow + margine negativo): andando a capo
       su schermi stretti non resta un separatore appeso al bordo. */
    border-left: 1px solid var(--color-border);
    margin-left: -1px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-gray);
}

.mp-checkout .woocommerce-order ul.order_details li strong {
    display: block;
    margin-top: 6px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .woocommerce-order-details,
.mp-checkout .woocommerce-order .woocommerce-customer-details {
    margin: 0 0 3rem;
}

.mp-checkout .woocommerce-order .woocommerce-customer-details {
    margin-bottom: 0;
}

.mp-checkout .woocommerce-order .woocommerce-order-details__title,
.mp-checkout .woocommerce-order .woocommerce-column__title {
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 1.189rem + 0.259vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-dark);
}

/* Tabella dell'ordine. Specificità sopra .woocommerce table.shop_table td
   (0,2,2) di woocommerce.css. */
.mp-checkout .woocommerce-order .shop_table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    font-size: 1rem;
    overflow: hidden;
}

.mp-checkout .woocommerce-order .shop_table th,
.mp-checkout .woocommerce-order .shop_table td {
    padding: 16px 24px;
    border: 0;
    border-top: 1px solid var(--color-border);
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}

.mp-checkout .woocommerce-order .shop_table thead th {
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 0;
    background-color: var(--color-input-bg);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-gray);
}

/* Colonna degli importi: allineata a destra, le cifre si leggono in
   colonna. */
.mp-checkout .woocommerce-order .shop_table .product-total {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.mp-checkout .woocommerce-order .shop_table tfoot td {
    text-align: right;
}

.mp-checkout .woocommerce-order .shop_table td.product-name {
    font-weight: 500;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .shop_table .product-quantity {
    font-weight: 500;
    color: var(--color-text-gray);
}

/* Variante, stampa, file: coppie etichetta/valore una per riga. */
.mp-checkout .woocommerce-order .wc-item-meta {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-gray);
}

.mp-checkout .woocommerce-order .wc-item-meta li {
    display: flex;
    gap: 6px;
    margin: 0;
}

.mp-checkout .woocommerce-order .wc-item-meta li + li {
    margin-top: 4px;
}

.mp-checkout .woocommerce-order .wc-item-meta strong {
    font-weight: 500;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .wc-item-meta p {
    display: inline;
    margin: 0;
}

/* Subtotale, IVA, totale: righe più basse, etichetta in grigio. */
.mp-checkout .woocommerce-order .shop_table tfoot th,
.mp-checkout .woocommerce-order .shop_table tfoot td {
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 400;
}

.mp-checkout .woocommerce-order .shop_table tfoot th {
    color: var(--color-text-gray);
}

.mp-checkout .woocommerce-order .shop_table tfoot td {
    font-weight: 500;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .shop_table tfoot tr:first-child th,
.mp-checkout .woocommerce-order .shop_table tfoot tr:first-child td {
    padding-top: 16px;
}

/* Totale: l'ultima riga d'importo (th con scope="row"; la nota del
   cliente, se c'è, viene dopo e ha un th senza scope). Grassetto e linea
   scura, come .mp-carrello-riga-totale. */
.mp-checkout .woocommerce-order .shop_table tfoot tr:has(> th[scope="row"]):not(:has(~ tr > th[scope="row"])) > * {
    padding-top: 16px;
    padding-bottom: 16px;
    border-top-color: var(--color-dark);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

/* Indirizzo di fatturazione: card come la tabella. I campi fiscali
   (Additional Checkout Fields, <dl>) li stampa WooCommerce Blocks dentro
   <address>; se un template li mettesse subito dopo, la card prosegue sul
   <dl>. */
.mp-checkout .woocommerce-order .woocommerce-customer-details address {
    margin: 0;
    padding: 20px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .woocommerce-customer-details address p {
    margin: 12px 0 0;
    color: var(--color-text-gray);
}

.mp-checkout .woocommerce-order .woocommerce-customer-details address p + p {
    margin-top: 4px;
}

.mp-checkout .woocommerce-order .woocommerce-customer-details .wc-block-components-additional-fields-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 4px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
    line-height: 1.5;
}

.mp-checkout .woocommerce-order .woocommerce-customer-details .wc-block-components-additional-fields-list dt {
    margin: 0;
    font-weight: 500;
    color: var(--color-dark);
}

.mp-checkout .woocommerce-order .woocommerce-customer-details .wc-block-components-additional-fields-list dd {
    margin: 0;
    color: var(--color-text-gray);
}

.mp-checkout .woocommerce-order .woocommerce-customer-details address:has(+ .wc-block-components-additional-fields-list) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mp-checkout .woocommerce-order .woocommerce-customer-details address + .wc-block-components-additional-fields-list {
    margin: 0;
    padding: 16px 24px 20px;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background-color: var(--color-white);
    background-image: linear-gradient(var(--color-border), var(--color-border));
    background-repeat: no-repeat;
    background-position: 24px 0;
    background-size: calc(100% - 48px) 1px;
}

@media (max-width: 40em) {
    .mp-checkout .woocommerce-order .shop_table th,
    .mp-checkout .woocommerce-order .shop_table td {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===================== CARRELLO ===================== */

/* Riga prodotto. L'immagine ha una misura fissa: le foto del feed hanno
   proporzioni diverse fra loro e senza un riquadro comune le righe della
   lista risulterebbero disallineate. */
.mp-carrello-item-media {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    /* --radius-media e non --radius-card: su un quadrato da 96px il raggio
       delle card grandi arrotonderebbe la miniatura fino a sformarla. */
    border-radius: var(--radius-media);
    overflow: hidden;
    background-color: var(--color-input-bg);
}

.mp-carrello-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-carrello-item-nome {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
}

.mp-carrello-item-nome a:hover {
    color: var(--color-primary);
}

/* Dettaglio della configurazione (varianti, stampe, file): coppie
   etichetta/valore rese da cart/cart-item-data.php. */
/* Niente column-gap: la linea fra le righe sta su dt e dd, e un gap la
   spezzerebbe a metà. La distanza fra le colonne la dà il padding del dt. */
.mp-carrello .variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin: 12px 0 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-gray);
}

.mp-carrello .variation dt,
.mp-carrello .variation dd {
    margin: 0;
    padding: 6px 0;
    border-top: 1px solid var(--color-border);
}

.mp-carrello .variation dt {
    padding-right: 16px;
    font-weight: 500;
    color: var(--color-dark);
}

@media (min-width: 40em) {
    .mp-carrello .variation dt {
        min-width: 180px;
    }
}

.mp-carrello .variation dd p {
    margin: 0;
}

/* La quantità è la somma delle taglie configurate e non si modifica dal
   carrello (CartIntegration::item_quantity): si legge come numero. */
.mp-cart-qty {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* Righe che WooCommerce genera comunque con l'input quantità. */
.mp-carrello .quantity input[type="number"] {
    width: 5rem;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-field-bg);
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    color: var(--color-dark);
}

.mp-carrello .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-input-bg);
    color: var(--color-dark) !important;
    font-size: 1.125rem;
    line-height: 1;
    text-decoration: none;
}

.mp-carrello .product-remove a.remove:hover {
    background-color: var(--color-border);
    color: var(--color-dark) !important;
}

/* Riepilogo: resta in vista mentre la lista scorre. L'offset tiene conto
   dell'header sticky, la cui altezza ui.js pubblica in --header-height. */
@media (min-width: 52em) {
    .mp-carrello-riepilogo {
        position: sticky;
        top: calc(var(--header-height, 80px) + 1rem);
    }
}

/* La colonna del riepilogo resta larga solo quanto le serve (subtotale e
   totale sono poche cifre): il resto della riga va alla lista delle
   configurazioni, che ne ha davvero bisogno. */
@media (min-width: 52em) {
    .mp-carrello-riepilogo-col {
        flex: 0 0 340px;
        max-width: 340px;
    }
}

.mp-carrello-riga {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 0;
    font-size: 1rem;
}

.mp-carrello-riga+.mp-carrello-riga {
    border-top: 1px solid var(--color-border);
}

.mp-carrello-riga-totale {
    padding-top: 16px;
    border-top: 1px solid var(--color-dark);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Un coupon applicato porta con sé il link per toglierlo. */
.mp-carrello .woocommerce-remove-coupon {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--color-text-gray);
    text-decoration: underline;
}

.mp-carrello .woocommerce-remove-coupon:hover {
    color: var(--color-error);
}

/* woocommerce-layout.css mette il riepilogo a float:right al 48%: pensato
   per stare sotto la tabella, nella colonna laterale lo dimezza. */
.mp-carrello .cart-collaterals .cart_totals.mp-carrello-riepilogo {
    float: none;
    width: 100%;
}

.mp-carrello .wc-proceed-to-checkout {
    padding: 0;
}

/* woocommerce.css ingrandisce il pulsante (1.25em, padding 1em): qui torna
   alla misura di .btn-dark. */
.mp-carrello .wc-proceed-to-checkout a.checkout-button.mp-carrello-checkout {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 12px 20px;
    font-size: 1rem;
}

/* ===================== AREA CLIENTE ===================== */

/* Voci di menu. L'attiva si riconosce dal fondo pieno, non solo dal peso:
   in una colonna di sei voci il grassetto da solo si perde. */
.mp-account-nav a {
    display: block;
    padding: 10px 20px;
    border-radius: var(--radius-button);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-dark);
}

.mp-account-nav a:hover {
    background-color: var(--color-input-bg);
    color: var(--color-primary);
}

.mp-account-nav .is-active a,
.mp-account-nav .is-active a:hover {
    background-color: #e6e6e6;
    color: var(--color-dark);
    font-weight: 500;
}

/* Esci: staccato dalle altre voci e con un trattamento diverso (fondo
   grigio, contorno e testo rossi), altrimenti sembra una voce di menu come
   le altre invece del pulsante che chiude la sessione. */
.mp-account-nav .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 12px;
}

.mp-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a {
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.mp-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background-color: var(--color-border);
    color: var(--color-error);
}

/* Stato dell'ordine: pillola colorata per famiglia di stato. In attesa =
   richiesta presa in carico ma non ancora lavorata (inc/checkout.php). */
.mp-stato {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--color-input-bg);
    color: var(--color-text-gray);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.mp-stato.is-on-hold,
.mp-stato.is-pending {
    background-color: rgba(35, 133, 220, 0.12);
    color: var(--color-primary);
}

.mp-stato.is-processing,
.mp-stato.is-completed {
    background-color: rgba(22, 163, 74, 0.12);
    color: var(--color-success);
}

.mp-stato.is-cancelled,
.mp-stato.is-failed,
.mp-stato.is-refunded {
    background-color: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
}

/* Tabelle degli ordini: quelle della vista dettaglio le stampa WooCommerce
   (order-details.php), quindi vanno vestite qui. */
.mp-account .shop_table {
    width: 100%;
    border-collapse: collapse;
    /* --radius-section: con overflow: hidden un raggio da 40px taglierebbe
       il testo delle celle ai quattro angoli della tabella. */
    border-radius: var(--radius-section);
    overflow: hidden;
    background-color: var(--color-white);
    font-size: 1rem;
}

.mp-account .shop_table th,
.mp-account .shop_table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.mp-account .shop_table thead th {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-gray);
}

.mp-account .shop_table tfoot th,
.mp-account .shop_table tfoot td {
    font-weight: 500;
}

.mp-account .shop_table tfoot tr:last-child th,
.mp-account .shop_table tfoot tr:last-child td {
    border-bottom: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Meta di riga (variante, stampa, file) dentro il dettaglio ordine. */
.mp-account .wc-item-meta {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--color-text-gray);
}

.mp-account .wc-item-meta li {
    display: flex;
    gap: 6px;
}

.mp-account .wc-item-meta strong {
    font-weight: 500;
}

.mp-account .wc-item-meta p {
    margin: 0;
}

/* Indirizzi salvati. */
.mp-account address {
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-text-gray);
}

.mp-account .woocommerce-customer-details,
.mp-account .woocommerce-order-details {
    margin-top: 2rem;
}

/* Aggiornamenti dell'ordine (note al cliente). */
.mp-account .woocommerce-OrderUpdates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-account .woocommerce-OrderUpdate {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-white);
}

.mp-account .woocommerce-OrderUpdate+.woocommerce-OrderUpdate {
    margin-top: 0.5rem;
}

.mp-account .woocommerce-OrderUpdate-meta {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: var(--color-text-gray);
}

.mp-account .woocommerce-OrderUpdate-description p:last-child {
    margin-bottom: 0;
}