/**
 * UsatoMania — My Account
 * Layout gestito da Blonwe/Bootstrap. Qui: card del contenuto, icone del menu
 * per le voci custom, tab custom USM.
 */

/* =============================================================
   Icone del menu per le voci custom
   =============================================================
   Blonwe assegna le icone SOLO via CSS (blonwe/style.css), con `content:` su
   `a:before` e font "klbtheme" (set 'interface'): font-family, dimensione e
   margine sono già applicati a tutte le voci, qui serve solo il glifo.
   Senza `content` lo ::before non genera box e la voce resta disallineata
   rispetto alle altre. */
.my-account-wrapper .woocommerce-MyAccount-navigation-menu .woocommerce-MyAccount-navigation-link--fatture a:before {
    content: '\ea6c'; /* google-docs-thin */
}
.my-account-wrapper .woocommerce-MyAccount-navigation-menu .woocommerce-MyAccount-navigation-link--venduti-giacenze a:before {
    content: '\ec1a'; /* package-thin */
}
.my-account-wrapper .woocommerce-MyAccount-navigation-menu .woocommerce-MyAccount-navigation-link--appuntamenti a:before {
    content: '\eb23'; /* calendar-thin */
}
.my-account-wrapper .woocommerce-MyAccount-navigation-menu .woocommerce-MyAccount-navigation-link--ordini-negozio a:before {
    content: '\ec14'; /* small-shop-thin */
}

/* =============================================================
   Contenuto in card, come al checkout
   =============================================================
   Il contenuto delle tab (a partire dalla bacheca) era testo nudo appoggiato
   sullo sfondo pagina. Stessa ricetta delle card del checkout:
   bianco, bordo tenue, raggio 16, padding 28. */
.my-account-wrapper .woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid #ebe8de;
    border-radius: 16px;
    /* sostituisce anche il padding-left di base.css sopra i 992px */
    padding: 28px;
}
.my-account-wrapper .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
.my-account-wrapper .woocommerce-MyAccount-content > *:last-child { margin-bottom: 0; }
.my-account-wrapper .woocommerce-MyAccount-content > p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--usm-text-muted, #55534b);
}

/* Sotto-blocchi: pannello avorio, per non annidare bianco su bianco */
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Address,
.my-account-wrapper .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset,
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-order-details,
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-customer-details {
    background: #f6f4ee;
    border: 1px solid #ebe8de;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 20px;
}

/* I due box indirizzo sono float al 50%: in griglia stanno appaiati e alti
   uguali. Il clearfix del tema diventerebbe due celle vuote. */
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set:before,
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set:after {
    display: none;
}
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
    float: none;
    width: auto;
    max-width: none;
    margin-bottom: 0;
}

/* =============================================================
   Bacheca — scorciatoie
   ============================================================= */
.usm-account-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 24px;
}
.usm-account-shortcut {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f6f4ee;
    border: 1px solid #ebe8de;
    border-radius: 12px;
    text-decoration: none;
    transition:
        border-color var(--usm-transition-md, 250ms ease),
        background var(--usm-transition-md, 250ms ease),
        transform var(--usm-transition-md, 250ms ease);
}
.usm-account-shortcut:hover {
    border-color: var(--usm-gold, #EBBD17);
    background: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.usm-account-shortcut__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(235, 189, 23, .16);
    color: var(--usm-gold-dark, #c9a110);
    font-size: 22px;
}
.usm-account-shortcut__text { display: flex; flex-direction: column; gap: 2px; }
.usm-account-shortcut__text strong {
    font-size: 14px;
    color: var(--usm-dark-alt, #1b1c19);
    line-height: 1.3;
}
.usm-account-shortcut__text small {
    font-size: 12px;
    color: var(--usm-text-muted, #79806e);
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    .my-account-wrapper .woocommerce-MyAccount-content {
        padding: 20px;
        border-radius: 12px;
    }
    .my-account-wrapper .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set {
        grid-template-columns: 1fr;
    }
}

/* ── Tab custom (Fatture, Venduti, Appuntamenti, Ordini) ─────── */
.usm-account-section__title,
.usm-account-section h3 {
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--usm-olive, #79806e);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--usm-surface, #efeee8);
}

.usm-account-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--usm-surface, #efeee8);
    flex-wrap: wrap;
}

.usm-account-section__header .usm-account-section__title { margin: 0; padding: 0; border: none; }

/* Bottone "Prenota nuovo" */
.usm-btn-book {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616) !important;
    border: none; border-radius: var(--usm-radius-sm, 4px);
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: background var(--usm-transition, 150ms ease);
}
.usm-btn-book .material-symbols-outlined { font-size: 16px; }
.usm-btn-book:hover { background: var(--usm-gold-dark, #c9a110); color: var(--usm-dark, #151616) !important; }

.usm-account-loading { color: var(--usm-olive, #79806e); font-size: 14px; padding: 20px 0; text-align: center; }
.usm-account-table td, .usm-account-table th { font-size: 13px; }
.usm-account-empty { color: var(--usm-olive, #79806e); font-size: 14px; padding: 12px 0; font-style: italic; }

.usm-account-saldo {
    display: inline-block; background: var(--usm-surface, #efeee8);
    border-radius: var(--usm-radius-sm, 4px); padding: 8px 14px;
    font-size: 13px; color: var(--usm-dark-alt, #1b1c19); margin-bottom: 14px;
}

.usm-account-badge {
    display: inline-block; padding: 3px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: var(--usm-surface, #efeee8); color: var(--usm-olive, #79806e);
}
.usm-account-badge--completato { background: rgba(56,106,32,.1); color: #386a20; }
.usm-account-badge--in-vetrina { background: rgba(235,189,23,.15); color: #8a6d00; }

/* =============================================================
   Menu dellarea

/* =============================================================
   Menu dell'area clienti: icone mancanti e raggruppamento
   =============================================================
   Undici voci in fila non si leggono, e "Ordini" accanto a "Ordini Negozio"
   non lascia capire quale sia quale. Le voci sono state riordinate in tre
   gruppi (vedi USM_TH_My_Account::riordina_menu) e qui ognuno riceve la
   propria intestazione. */

.my-account-wrapper .woocommerce-MyAccount-navigation-menu .woocommerce-MyAccount-navigation-link--consensi a:before {
    content: '\e98e'; /* mail-envelope-thin */
}

/* Intestazione del gruppo, sopra la sua prima voce. WooCommerce non prevede
   elementi non cliccabili nel menu: un separatore vero richiederebbe di
   sovrascrivere il template della navigazione. */
.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-inizio {
    position: relative;
    margin-top: 26px;
}

.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-inizio:before {
    display: block;
    margin: 0 0 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(128, 118, 96, .22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6b7268;
    /* Il font del tema veste i ::before delle voci: qui serve quello del testo,
       altrimenti l'intestazione uscirebbe come una sequenza di glifi. */
    font-family: var(--usm-font-ui, "Work Sans", sans-serif);
}

.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-acquisti:before { content: 'Acquisti'; }
.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-conto:before    { content: 'Il tuo conto Usatomania'; }
.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-profilo:before  { content: 'Profilo'; }

/* "Esci" staccato dal resto: è un'azione, non una sezione. */
.my-account-wrapper .woocommerce-MyAccount-navigation-menu li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 118, 96, .22);
}

/* =============================================================
   Titoli di sezione coerenti
   =============================================================
   Alcune sezioni aprivano con un titolo, altre entravano direttamente nel
   contenuto: la pagina cambiava faccia a ogni voce del menu. */

.woocommerce-MyAccount-content .usm-account-section__title,
.woocommerce-MyAccount-content .usm-consensi__titolo,
.woocommerce-MyAccount-content > h2:first-child {
    margin: 0 0 6px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: 24px;
    line-height: 1.2;
    color: var(--usm-text, #1b1c19);
}

@media (max-width: 991.98px) {
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-inizio { margin-top: 18px; }
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu li.usm-gruppo-inizio:before { padding-top: 12px; }
}

/* =============================================================
   Bacheca: tessera in evidenza, meno parole
   =============================================================
   Il paragrafo introduttivo di WooCommerce elenca a parole le stesse cose che
   le scorciatoie qui sotto mostrano già come tessere cliccabili: due volte lo
   stesso contenuto, e quello scritto è pure il meno utile dei due.
   La classe sul body la mette USM_TH_My_Account::classe_bacheca(). */
body.usm-bacheca .woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none;
}

/* Il saluto resta, ma più discreto: non è l'informazione principale. */
body.usm-bacheca .woocommerce-MyAccount-content > p:first-of-type {
    margin-bottom: 22px;
    font-size: 14.5px;
    color: #5c6350;
}

/* La tessera socio: è il dato che il cliente viene a cercare — serve in
   negozio e per prenotare — e prima non compariva da nessuna parte. */
.usm-tessera {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    padding: 20px 22px;
    border-radius: var(--usm-radius, 12px);
    background: var(--usm-dark-green, #213e25);
    color: #fff;
}

.usm-tessera__icona {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    font-size: 24px;
}

.usm-tessera__dati {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.usm-tessera__voce {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.usm-tessera__etichetta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.usm-tessera__valore {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
}

/* Le scorciatoie: una griglia regolare invece di una fila che va a capo
   lasciando una tessera orfana sull'ultima riga. */
.usm-account-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 1199.98px) {
    .usm-account-shortcuts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .usm-account-shortcuts { grid-template-columns: 1fr; }
    .usm-tessera { flex-direction: column; align-items: flex-start; gap: 14px; }
    .usm-tessera__dati { gap: 12px 28px; }
}

/* =============================================
   Il gruppo "Il tuo conto Usatomania" in evidenza
   =============================================
   E' la parte che distingue questa area clienti da quella di un negozio
   qualunque: conto vendita, fatture e appuntamenti sono i servizi del
   mercatino. Nel menu erano tre voci come le altre. Qui diventano un
   blocco riconoscibile, con il fondo giallo del marchio.
   Le tre voci sono contigue, quindi bastano gli angoli sulla prima e
   sull'ultima perche' leggano come un'unica tessera. */
.woocommerce-MyAccount-navigation li.usm-voce-venduti-giacenze,
.woocommerce-MyAccount-navigation li.usm-voce-fatture,
.woocommerce-MyAccount-navigation li.usm-voce-appuntamenti {
    background: rgba(235, 189, 23, .16);
    border-left: 3px solid var(--usm-gold, #EBBD17);
}

.woocommerce-MyAccount-navigation li.usm-voce-venduti-giacenze {
    border-top-left-radius: var(--usm-radius, 12px);
    border-top-right-radius: var(--usm-radius, 12px);
    padding-top: 4px;
}

.woocommerce-MyAccount-navigation li.usm-voce-appuntamenti {
    border-bottom-left-radius: var(--usm-radius, 12px);
    border-bottom-right-radius: var(--usm-radius, 12px);
    padding-bottom: 4px;
    margin-bottom: 18px;
}

.woocommerce-MyAccount-navigation li.usm-voce-venduti-giacenze a,
.woocommerce-MyAccount-navigation li.usm-voce-fatture a,
.woocommerce-MyAccount-navigation li.usm-voce-appuntamenti a {
    /* Testo scuro sul giallo: e' l'unica combinazione che regge il contrasto
       (il bianco sul giallo del marchio sta sotto 2:1). */
    color: var(--usm-dark, #151616);
    font-weight: 600;
}

.woocommerce-MyAccount-navigation li.usm-voce-venduti-giacenze.is-active a,
.woocommerce-MyAccount-navigation li.usm-voce-fatture.is-active a,
.woocommerce-MyAccount-navigation li.usm-voce-appuntamenti.is-active a,
.woocommerce-MyAccount-navigation li.usm-voce-venduti-giacenze.is-active,
.woocommerce-MyAccount-navigation li.usm-voce-fatture.is-active,
.woocommerce-MyAccount-navigation li.usm-voce-appuntamenti.is-active {
    background: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
}

/* =============================================
   Avviso ai clienti
   =============================================
   Vedi USM_TH_My_Account::avviso_ai_clienti. Il testo lo scrive la redazione
   dalle impostazioni del plugin: qui sta sopra ogni altra cosa, prima della
   tessera, perche' e' l'informazione che cambia. */
.usm-avviso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: var(--usm-radius, 12px);
    border-left: 4px solid var(--usm-gold, #EBBD17);
    background: rgba(235, 189, 23, .12);
    color: var(--usm-text, #1b1c19);
}

.usm-avviso__icona {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1.3;
    color: var(--usm-gold-dark, #c9a110);
    font-variation-settings: 'FILL' 1;
}

.usm-avviso__testo p {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.55;
}

.usm-avviso__testo p:last-child {
    margin-bottom: 0;
}

/* Su schermo stretto la tessera va in colonna: senza questo, etichetta e
   valore del codice fiscale finivano sulla stessa riga e il valore usciva
   dal riquadro. */
@media (max-width: 575.98px) {
    .usm-tessera__dati {
        width: 100%;
    }

    .usm-tessera__voce {
        width: 100%;
    }

    .usm-tessera__valore {
        font-size: 16px;
        letter-spacing: .02em;
        word-break: break-all;
    }

    .usm-avviso {
        padding: 14px;
        gap: 10px;
    }
}

/* =============================================================
   Area clienti su schermo stretto: il menu diventa una fila di tab
   =============================================================
   Su telefono il tema chiude la navigazione dietro un pulsante "..." in
   alto a destra: le sezioni ci sono ma non si vedono, e per arrivare alle
   fatture o al conto vendita bisogna sapere che quel pulsante le contiene.
   Qui il menu resta sempre in vista come riga di pastiglie scorrevoli,
   nello stesso modo delle categorie nelle pagine di catalogo.

   Nota sul selettore: la <ul> della navigazione non ha classi proprie
   (verificato in pagina), quindi si passa dal contenitore. La classe
   .woocommerce-MyAccount-navigation-menu, usata piu' su in questo file,
   nel markup non compare. */
@media (max-width: 991.98px) {
    .my-account-wrapper .my-account-navigation,
    .my-account-wrapper .woocommerce-MyAccount-navigation {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 20px;
    }

    /* Il div intermedio e' quello che il pulsante apre e chiude: sta a
       display:none finche' non lo si tocca. Qui resta sempre aperto. */
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu {
        display: block !important;
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        padding: 2px 0 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        list-style: none;
        scrollbar-width: thin;
        scrollbar-color: var(--usm-gold, #EBBD17) var(--usm-surface-alt, #e9e8e2);
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul::-webkit-scrollbar {
        height: 4px;
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul::-webkit-scrollbar-thumb {
        background: var(--usm-gold, #EBBD17);
        border-radius: 999px;
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    /* Le intestazioni dei gruppi sono pseudo-elementi sulla prima voce di
       ciascun gruppo: in riga spezzerebbero la fila. */
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.usm-gruppo-inizio::before {
        content: none !important;
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li > a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 15px;
        border: 1.5px solid rgba(128, 118, 96, .3);
        border-radius: 999px;
        background: #fff;
        font-family: var(--usm-font-label, 'Work Sans', sans-serif);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        color: var(--usm-text, #1b1c19);
    }

    /* Le tre voci dei servizi del mercatino restano riconoscibili anche qui:
       sono il motivo per cui il cliente entra. */
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.usm-voce-venduti-giacenze > a,
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.usm-voce-fatture > a,
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.usm-voce-appuntamenti > a {
        border-color: var(--usm-gold, #EBBD17);
        background: rgba(235, 189, 23, .16);
        font-weight: 600;
    }

    /* Il tema mette uno sfondo quasi bianco sulla voce attiva e un testo
       bianco: bianco su bianco. Lo sfondo va imposto. */
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.is-active > a,
    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li.woocommerce-MyAccount-navigation-link--is-active > a {
        border-color: var(--usm-dark-green, #213e25) !important;
        background: var(--usm-dark-green, #213e25) !important;
        color: #fff !important;
        font-weight: 600;
    }

    .my-account-wrapper .woocommerce-MyAccount-navigation-menu > ul > li > a::before {
        position: static;
        margin: 0;
        font-size: 16px;
        line-height: 1;
    }
}

/* =============================================================
   Tabelle dell'area clienti
   =============================================================
   DataTables porta con se' uno stile neutro pensato per l'amministrazione:
   qui viene riportato ai colori e ai caratteri del sito, e i controlli
   (ricerca, pagine) diventano parte della pagina invece di sembrarci
   appoggiati sopra. */

.woocommerce-MyAccount-content .dt-container {
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    margin-bottom: 28px;
}

/* Riga dei controlli: quante righe mostrare a sinistra, ricerca a destra. */
.woocommerce-MyAccount-content .dt-layout-row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.woocommerce-MyAccount-content .dt-search input,
.woocommerce-MyAccount-content .dt-length select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(128, 118, 96, .32);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--usm-text, #1b1c19);
}

.woocommerce-MyAccount-content .dt-search input {
    min-width: 220px;
}

.woocommerce-MyAccount-content .dt-search input:focus,
.woocommerce-MyAccount-content .dt-length select:focus {
    border-color: var(--usm-gold, #EBBD17);
    box-shadow: 0 0 0 3px rgba(235, 189, 23, .22);
    outline: none;
}

.woocommerce-MyAccount-content .dt-length label,
.woocommerce-MyAccount-content .dt-info {
    font-size: 13px;
    color: var(--usm-olive, #79806e);
}

/* Intestazioni ordinabili */
.woocommerce-MyAccount-content table.dataTable thead th {
    background: var(--usm-surface, #efeee8);
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--usm-olive, #79806e);
    padding: 12px 14px;
}

.woocommerce-MyAccount-content table.dataTable tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
    font-size: 14px;
    vertical-align: middle;
}

.woocommerce-MyAccount-content table.dataTable tbody tr:hover td {
    background: rgba(235, 189, 23, .06);
}

/* Pagine */
.woocommerce-MyAccount-content .dt-paging .dt-paging-button {
    min-width: 34px;
    height: 34px;
    margin: 0 2px;
    padding: 0 10px;
    border: 1px solid var(--usm-surface-alt, #e9e8e2) !important;
    border-radius: 8px;
    background: #fff !important;
    font-size: 13px;
    color: var(--usm-text, #1b1c19) !important;
}

.woocommerce-MyAccount-content .dt-paging .dt-paging-button.current {
    background: var(--usm-dark-green, #213e25) !important;
    border-color: var(--usm-dark-green, #213e25) !important;
    color: #fff !important;
}

.woocommerce-MyAccount-content .dt-paging .dt-paging-button.disabled {
    opacity: .4;
}

/* Su schermo stretto la tabella scorre invece di sfondare la pagina. */
@media (max-width: 767.98px) {
    .woocommerce-MyAccount-content .dt-container {
        overflow-x: auto;
    }

    .woocommerce-MyAccount-content .dt-search input {
        min-width: 0;
        width: 100%;
    }

    .woocommerce-MyAccount-content .dt-layout-row:first-child {
        gap: 10px;
    }
}

/* =============================================================
   Appuntamenti: righe passate e note al posto del pulsante
   ============================================================= */
.usm-apt-passato td {
    color: var(--usm-olive, #79806e);
}

.usm-apt-nota {
    font-size: 12.5px;
    color: var(--usm-olive, #79806e);
    font-style: italic;
}

/* =============================================================
   Dettaglio fattura
   =============================================================
   Era una lista di totali seguita da una tabella senza cornice. Qui il
   dettaglio si legge come una fattura: articoli sopra, conti in fondo a
   destra, il totale staccato dagli altri importi. */
.usm-fatt {
    background: var(--usm-bg, #fbf9f3);
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 4px 0 10px;
}

.usm-fatt__testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
}

.usm-fatt__etichetta {
    font-family: var(--usm-font-headline, 'Newsreader', serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--usm-dark, #151616);
}

.usm-fatt__conteggio {
    font-size: 12.5px;
    color: var(--usm-olive, #79806e);
}

.usm-fatt__articoli {
    overflow-x: auto;
}

.usm-fatt__tabella {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.usm-fatt__tabella th {
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--usm-olive, #79806e);
}

.usm-fatt__tabella td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(233, 232, 226, .7);
    font-size: 14px;
    color: var(--usm-text, #1b1c19);
}

.usm-fatt__tabella tr:last-child td {
    border-bottom: 0;
}

/* Il codice articolo e' un dato da confrontare, non da leggere: a
   larghezza fissa si incolonna e si trova a colpo d'occhio. */
.usm-fatt__cod {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--usm-olive, #79806e);
    white-space: nowrap;
}

/* Le cifre si leggono incolonnate a destra, con le stesse larghezze. */
.usm-fatt__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.usm-fatt__conti {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--usm-surface-alt, #e9e8e2);
}

.usm-fatt__conti dl {
    min-width: 240px;
    margin: 0;
}

.usm-fatt__conti dl > div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 5px 0;
}

.usm-fatt__conti dt {
    font-size: 13.5px;
    color: var(--usm-olive, #79806e);
    font-weight: 400;
}

.usm-fatt__conti dd {
    margin: 0;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--usm-text, #1b1c19);
}

.usm-fatt__aliquota {
    font-size: 12px;
    opacity: .75;
}

.usm-fatt__totale {
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid var(--usm-outline, #807660);
}

.usm-fatt__totale dt {
    font-size: 15px;
    font-weight: 700;
    color: var(--usm-dark, #151616);
}

.usm-fatt__totale dd {
    font-size: 18px;
    font-weight: 700;
    color: var(--usm-dark, #151616);
}

@media (max-width: 575.98px) {
    .usm-fatt {
        padding: 16px 14px;
    }

    .usm-fatt__conti {
        justify-content: stretch;
    }

    .usm-fatt__conti dl {
        width: 100%;
        min-width: 0;
    }
}

/* Il selettore del numero di righe usciva su tre righe (etichetta, menu,
   parola finale): sta su una riga sola. */
.woocommerce-MyAccount-content .dt-length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0;
}

.woocommerce-MyAccount-content .dt-length select {
    width: auto;
    min-width: 72px;
}

.woocommerce-MyAccount-content .dt-search label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* =============================================================
   Area clienti su telefono: le tabelle diventano schede
   =============================================================
   Una tabella a quattro colonne su uno schermo da 390 px chiede 570 px:
   si legge la descrizione e per vedere il guadagno bisogna trascinare di
   lato. Qui ogni riga diventa una scheda in cui l'intestazione di colonna
   sta accanto al proprio valore, e non si scorre più in orizzontale.

   L'attributo data-etichetta lo scrive tabelle-area-privata.js a ogni
   ridisegno della tabella. */
@media (max-width: 767.98px) {

    .woocommerce-MyAccount-content .dt-container {
        overflow-x: visible;
    }

    .woocommerce-MyAccount-content table.dataTable,
    .woocommerce-MyAccount-content table.dataTable tbody,
    .woocommerce-MyAccount-content table.dataTable tbody tr,
    .woocommerce-MyAccount-content table.dataTable tbody td {
        display: block;
        width: auto !important;
    }

    /* L'intestazione non serve più: l'etichetta è dentro ogni cella. */
    .woocommerce-MyAccount-content table.dataTable thead {
        display: none;
    }

    .woocommerce-MyAccount-content table.dataTable tbody tr {
        margin-bottom: 12px;
        padding: 4px 14px;
        border: 1px solid var(--usm-surface-alt, #e9e8e2);
        border-radius: 12px;
        background: #fff;
    }

    .woocommerce-MyAccount-content table.dataTable tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(233, 232, 226, .8);
        text-align: right;
    }

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

    .woocommerce-MyAccount-content table.dataTable tbody td::before {
        content: attr(data-etichetta);
        flex: 0 0 auto;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--usm-olive, #79806e);
        text-align: left;
    }

    /* Dove una colonna e' il contenuto vero della riga - la descrizione
       dell'articolo - questa sta in alto per esteso, senza etichetta: e'
       quello che si legge per primo. Vale solo per le tabelle che lo
       dichiarano, non per quelle in cui ogni colonna e' un dato a se'
       (negli appuntamenti "fine" senza etichetta sembrerebbe un doppione
       dell'inizio). */
    .woocommerce-MyAccount-content table.usm-tabella--titolo-2 tbody td:nth-child(2) {
        display: block;
        text-align: left;
        padding-top: 2px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--usm-text, #1b1c19);
    }

    .woocommerce-MyAccount-content table.usm-tabella--titolo-2 tbody td:nth-child(2)::before {
        display: none;
    }

    /* Il codice articolo fa da soprattitolo sopra la descrizione. */
    .woocommerce-MyAccount-content table.usm-tabella--titolo-2 tbody td:first-child {
        padding-bottom: 2px;
        border-bottom: 0;
    }

    .woocommerce-MyAccount-content table.usm-tabella--titolo-2 tbody td:first-child strong {
        font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--usm-olive, #79806e);
    }

    /* Riga vuota di DataTables quando la ricerca non trova nulla. */
    .woocommerce-MyAccount-content table.dataTable tbody td.dt-empty {
        display: block;
        text-align: center;
        color: var(--usm-olive, #79806e);
    }

    .woocommerce-MyAccount-content table.dataTable tbody td.dt-empty::before {
        display: none;
    }

    /* Controlli: ricerca a tutta larghezza, il resto sotto. */
    .woocommerce-MyAccount-content .dt-layout-row:first-child {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .woocommerce-MyAccount-content .dt-search input {
        width: 100%;
        height: 44px;
    }

    .woocommerce-MyAccount-content .dt-length {
        display: flex;
        justify-content: flex-end;
    }

    /* Pagine: tocchi da 40px, incolonnate al centro. */
    .woocommerce-MyAccount-content .dt-layout-row:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
    }

    .woocommerce-MyAccount-content .dt-paging .dt-paging-button {
        min-width: 40px;
        height: 40px;
    }

    /* =============================================================
       Dettaglio fattura su telefono
       ============================================================= */
    .usm-fatt {
        padding: 16px 14px;
    }

    .usm-fatt__testa {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .usm-fatt__tabella,
    .usm-fatt__tabella tbody,
    .usm-fatt__tabella tr,
    .usm-fatt__tabella td {
        display: block;
        width: auto;
    }

    .usm-fatt__tabella thead {
        display: none;
    }

    .usm-fatt__tabella tr {
        padding: 10px 0;
        border-bottom: 1px solid rgba(233, 232, 226, .8);
    }

    .usm-fatt__tabella tr:last-child {
        border-bottom: 0;
    }

    .usm-fatt__tabella td {
        border: 0;
        padding: 1px 0;
    }

    /* Descrizione in evidenza, codice e prezzo di contorno. */
    .usm-fatt__tabella td:nth-child(2) {
        font-weight: 600;
        line-height: 1.4;
    }

    .usm-fatt__tabella td.usm-fatt__num {
        text-align: left;
        font-weight: 700;
        color: var(--usm-dark, #151616);
    }
}

/* =============================================================
   Fatture su telefono
   =============================================================
   La tabella delle fatture non passa da DataTables (sotto ogni riga c'e'
   la riga di dettaglio con colspan, che DataTables non sa leggere), quindi
   la trasformazione in schede si fa qui a mano. La riga di dettaglio resta
   una riga a tutta larghezza: e' un contenitore, non un dato. */
@media (max-width: 767.98px) {

    .usm-account-content table:has(.usm-fattura-row),
    .usm-account-content table:has(.usm-fattura-row) tbody,
    .usm-account-content .usm-fattura-row,
    .usm-account-content .usm-fattura-row td,
    .usm-account-content .usm-fattura-detail-row,
    .usm-account-content .usm-fattura-detail-row > td {
        display: block;
        width: auto;
    }

    .usm-account-content table:has(.usm-fattura-row) thead {
        display: none;
    }

    .usm-account-content .usm-fattura-row {
        margin-bottom: 10px;
        padding: 4px 14px;
        border: 1px solid var(--usm-surface-alt, #e9e8e2);
        border-radius: 12px;
        background: #fff;
    }

    .usm-account-content .usm-fattura-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(233, 232, 226, .8);
        text-align: right;
    }

    .usm-account-content .usm-fattura-row td::before {
        content: attr(data-etichetta);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--usm-olive, #79806e);
        text-align: left;
    }

    /* Il collegamento al dettaglio diventa un pulsante a tutta larghezza:
       su telefono deve essere comodo da toccare. */
    .usm-account-content .usm-fattura-row td.usm-fattura-azione {
        justify-content: center;
        border-bottom: 0;
        padding: 10px 0 8px;
    }

    .usm-account-content .usm-fattura-row td.usm-fattura-azione::before {
        display: none;
    }

    .usm-account-content .usm-fattura-row td.usm-fattura-azione a {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--usm-outline, #807660);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
    }

    /* Il dettaglio esce dalla scheda e occupa tutta la larghezza. */
    .usm-account-content .usm-fattura-detail-row > td {
        padding: 0;
        border: 0;
    }
}

/* =============================================================
   Conto vendita: le due schede
   =============================================================
   Venduti e giacenze stavano una sotto l'altra e per arrivare alle seconde
   si scorreva oltre tutte le prime. Le schede riprendono le pastiglie del
   menu dell'area clienti, cosi' la pagina resta coerente con se stessa. */
.usm-schede {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
    overflow-x: auto;
    scrollbar-width: none;
}

.usm-schede::-webkit-scrollbar {
    display: none;
}

.usm-schede__voce {
    display: inline-flex;
    user-select: none;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--usm-olive, #79806e);
    cursor: pointer;
    transition:
        color var(--usm-transition-md, 250ms ease),
        border-color var(--usm-transition-md, 250ms ease);
}

.usm-schede__voce:hover {
    color: var(--usm-dark, #151616);
}

.usm-schede__voce.is-attiva {
    border-bottom-color: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    font-weight: 700;
}

.usm-schede__voce:focus-visible {
    outline: 2px solid var(--usm-gold, #EBBD17);
    outline-offset: -2px;
}

.usm-schede__voce .material-symbols-outlined {
    font-size: 19px;
    color: var(--usm-gold-dark, #c9a110);
}

/* Quanti articoli ci sono: si legge prima di aprire la scheda. */
.usm-schede__quanti:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--usm-surface, #efeee8);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--usm-olive, #79806e);
}

.usm-schede__voce.is-attiva .usm-schede__quanti:not(:empty) {
    background: rgba(235, 189, 23, .22);
    color: var(--usm-gold-dark, #a37e08);
}

.usm-pannello[hidden] {
    display: none;
}

@media (max-width: 575.98px) {
    .usm-schede__voce {
        padding: 10px 12px;
        font-size: 13.5px;
    }

    .usm-schede__voce .material-symbols-outlined {
        font-size: 17px;
    }
}