/**
 * Usatomania Theme Hooks — CSS globale (site-wide)
 * Regole applicate a TUTTO il sito. Caricato dopo tokens.css,
 * quindi qui puoi usare le custom properties var(--usm-*).
 *
 * Metti qui: tipografia base, link, bottoni, container, override
 * trasversali. Per il CSS specifico di una pagina usa i file in
 * assets/css/sections/.
 */
/* =============================================
   Variabili del tema Blonwe — correzioni
   ============================================= */
/* BUG BLONWE: il customizer imposta --theme-primary-color a #faca00 (oro) ma
   NON aggiorna --theme-primary-color-RGB, che resta il rosso della demo
   (181,34,59). Tutti gli hover del tema usano rgba(var(--theme-primary-color-RGB), .9)
   → uscivano rossi. Qui la riallineiamo all'oro; l'hover verde è definito sotto. */
/* `html:root` e non `:root`: il customizer del tema stampa un blocco <style>
   inline DOPO i nostri CSS, quindi con pari specificità vincerebbe lui. */
html:root {
    --theme-primary-color-RGB: 235, 189, 23;
    /* Verde UsatoMania (= --theme-secondary-color del tema, quello del footer) */
    --usm-green: #213e25;
    --usm-green-dark: #172c1a;
    /* Il customizer schiaccia --theme-radius-form a 2px, lasciando bottoni e
       campi form squadrati mentre tutto il resto usa --theme-radius-base (10px).
       Riallineata: arrotonda in un colpo solo tutte le CTA e gli input del tema. */
    --theme-radius-form: 10px;
}

/* Il drawer carrello del tema (.cart-widget-side) sta fuori canvas a destra ed
   è position:fixed: `overflow-x:hidden` sul body — che il tema già imposta —
   non lo clippa, quindi restava una barra di scorrimento orizzontale di ~50px
   su carrello, checkout e PLP. `clip` invece di `hidden` perché non crea un
   contenitore di scroll e quindi non rompe le colonne in position:sticky
   (galleria PDP, riepilogo ordine). */
html {
    overflow-x: clip;
}

a.usm-floating-appt {
    position: fixed;
    background: #faca00;
    bottom: 1em;
    right: 1em;
    color: white;
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    /* Senza z-index finiva sotto i blocchi di pagina che ne hanno uno proprio
       (colonna sticky della PDP, slider, carousel). 500 la tiene sopra i
       contenuti ma sotto tutto ciò che deve coprirla: modale login (1000),
       lightbox galleria (1500), drawer carrello (100003), notifiche (100005). */
    z-index: 500;
}

span.usm-floating-appt__label {
    display: none !important;
}

/* Intestazione del calendario appuntamenti: si prenota solo nel mese in corso,
   quindi contiene la sola indicazione del mese, centrata. */
.usm-monthnav {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.usm-wizard__lead--sm {
    text-align: center;
}

span.usm-daycard.usm-daycard--empty {
    height: 30px;
}

button.usm-daycard {
    width: 50px;
}

span.usm-daycard__badge {
    display: none;
}

button.usm-slotcard {
    padding: 0;
}

button#usm-form-back {
    padding: 0;
}
/* =============================================
   Fix audit UI 2026-07 — contrasto CTA e statistiche
   ============================================= */
/* CTA gialli: testo scuro (prima bianco su giallo, 1.55:1) */
.add_to_cart_button,
.checkout-button,
a.elementor-button--checkout,
.usm-btn-primary {
    color: var(--usm-dark, #151616) !important;
}
/* FAB Prenota: testo scuro; su mobile non copre la bottom bar */
a.usm-floating-appt { color: var(--usm-dark, #151616); }
@media (max-width: 782px) {
    a.usm-floating-appt { bottom: 96px; }
}
/* Statistiche home: label leggibili (prima bianco su crema, 1:1) */
.klb-count-block .entry-description,
.klb-count-block .entry-description p { color: var(--usm-text, #1b1c19); }
.klb-count-block .entry-title { color: #8a6d00; }
/* Titoli card categoria home: clamp entro la card (sbordavano di 40px) */
.category-home-carousel .entry-inner { max-width: calc(100% - 80px); box-sizing: border-box; }
/* CTA loop "Aggiungi al carrello" su mobile: niente testo mozzato */
@media (max-width: 782px) {
    .product-buttons .add_to_cart_button,
    ul.products .add_to_cart_button {
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 12px 8px;
        line-height: 1.2;
        white-space: normal;
    }
}
/* Specificità rinforzata contro il CSS generato da Elementor */
.elementor-widget-blonwe-text-block .klb-count-block .entry-description,
.elementor-widget-blonwe-text-block .klb-count-block .entry-description p {
    color: var(--usm-text, #1b1c19) !important;
}
.elementor-widget-blonwe-text-block .klb-count-block .entry-title {
    color: #8a6d00 !important;
}
/* Specificità rinforzata per i bottoni loop (il tema usa selettori più pesanti) */
body a.button.add_to_cart_button,
body .product-buttons a.add_to_cart_button,
body ul.products a.add_to_cart_button,
body .products .product-buttons .button {
    color: var(--usm-dark, #151616) !important;
}
/* Il tema imposta il bianco con !important e alta specificità:
   :not(#usm-x) porta questa regola a specificità di livello ID. */
.klb-count-block .entry-description p:not(#usm-x) {
    color: var(--usm-text, #1b1c19) !important;
}

/* =============================================
   CTA — hover verde UsatoMania
   =============================================
   Il tema colora l'hover con rgba(var(--theme-primary-color-RGB), .9): con la
   variabile riallineata sopra l'hover diventerebbe oro su oro (invisibile).
   Qui lo portiamo sul verde del brand, con testo bianco per il contrasto.
   Specificità: le regole di Blonwe sono del tipo
   `button:not(.unset).primary:not(.outline):hover` (0,3,1) — i selettori sotto
   aggiungono il tag o una classe in più per vincere senza !important. */
a.button:hover,
a.button:focus-visible,
button.button:not(.unset):hover,
a.add_to_cart_button:not(.unset):hover,
a.added_to_cart:not(.unset):hover,
button.single_add_to_cart_button:not(.unset):hover,
a.checkout-button:not(.unset):hover,
button.woocommerce-form-login__submit:not(.unset):hover,
button.woocommerce-form-register__submit:not(.unset):hover,
input[type="submit"]:not(.unset):hover,
a.elementor-button--checkout:hover,
a.elementor-button--view-cart:hover,
a.usm-btn--primary:hover,
button.usm-btn--primary:hover {
    background-color: var(--usm-green, #213e25);
    border-color: var(--usm-green, #213e25);
    color: #fff !important;
}

/* Il tema usa un selettore a due ID per l'hover del bottone d'ordine:
   qui !important è l'unico modo ragionevole di vincere. */
.checkout-wrapper #place_order:hover,
.woocommerce-checkout #place_order:hover {
    background-color: var(--usm-green, #213e25) !important;
    color: #fff !important;
}

/* =============================================
   CTA — hover verde: i selettori che il blocco sopra NON batteva
   =============================================
   Il blocco precedente copre le CTA "semplici", ma Blonwe ha tre famiglie di
   regole più pesanti che continuavano a vincere e a mostrare l'hover del tema.
   Strategia: RICALCARE il selettore del tema invece di inventarne uno più
   corto. A parità di specificità vinciamo per ordine di sorgente, perché
   global.css è accodato dopo base.css, style.css e i moduli di blonwe-core
   (verificato sull'HTML renderizzato: usm-global-css è l'ultimo del gruppo).
   !important solo dove il tema lo usa a sua volta. */

/* --- 1. Famiglia "primary" del tema (base.css:7409). È il selettore più
       pesante del sito — .primary-button:not(.outline) .button:not(.unset):not(.outline):hover
       = (0,6,0) — e non usa !important. Colora le card prodotto della home
       (wrapper .product-buttons.primary-button), il submit di login e i
       submit Contact Form 7. --- */
.primary-button:not(.outline) button:not(.unset):not(.outline):hover,
.primary-button:not(.outline) .button:not(.unset):not(.outline):hover,
.primary-button:not(.outline) .btn:not(.unset):not(.outline):hover,
.primary-button:not(.outline) input[type="submit"]:not(.unset):not(.outline):hover,
button:not(.unset).primary:not(.outline):hover,
.button:not(.unset).primary:not(.outline):hover,
.btn:not(.unset).primary:not(.outline):hover,
input[type="submit"]:not(.unset).primary:not(.outline):hover,
button:not(.unset).woocommerce-form-login__submit:not(.outline):hover,
.button:not(.unset).woocommerce-form-login__submit:not(.outline):hover,
button:not(.unset).wpcf7-submit:not(.outline):hover,
input[type="submit"]:not(.unset).wpcf7-submit:not(.outline):hover {
    background-color: var(--usm-green, #213e25);
    border-color: var(--usm-green, #213e25);
    /* !important necessario: più sopra forziamo il testo scuro sulle CTA oro
       (fix contrasto AA) con !important; sul verde dell'hover serve il bianco
       e solo un !important riesce a scavalcare quella regola. */
    color: #fff !important;
}

/* --- 2. Regole del tema SENZA !important: ricalcate 1:1, vinciamo per ordine
       di sorgente. Il commento accanto è il punto d'origine. --- */
/* base.css:17363 — submit registrazione nella pagina login/registrazione */
.site-login .site-login-inner .login-form-container .woocommerce-form-register__submit:hover,
/* style.css:1339 — submit registrazione dentro "Il mio account" */
.my-account-page .woocommerce-form-register button.woocommerce-form-register__submit:hover,
/* base.css:22080 — submit "Invia recensione" nella PDP */
.single-product-wrapper .woocommerce-Reviews #review_form_wrapper .comment-form > *.form-submit .submit:hover,
/* style.css:578 — submit commento del blog */
.post-comments .comment-respond .comment-form .form-submit input:hover,
/* style.css:3446 — submit del form "articolo protetto da password" */
.klb-post form.post-password-form input[type="submit"]:hover,
/* style.css:686 e 1535 — "Visualizza carrello" che compare dopo l'add-to-cart AJAX */
.product-type-13 a.added_to_cart:hover,
.primary-button a.added_to_cart:hover,
/* blonwe-core compare.css:161 — "Aggiungi al carrello" nella tabella confronta.
   `table.` in più perché il modulo è accodato condizionalmente e non voglio
   dipendere dall'ordine di caricamento. */
table.klbcp_table .product-add_to_cart a.button:hover {
    background-color: var(--usm-green, #213e25);
    border-color: var(--usm-green, #213e25);
    color: #fff;
}

/* --- 3. Regole dove il tema usa già !important: qui è l'unico modo di vincere,
       e la specificità è identica alla sua. --- */
/* style.css:673 — "Aggiungi al carrello" nelle card della PLP (.product-type-13) */
.product-type-13 a.add_to_cart_button:hover,
/* style.css:3111 — varianti grouped/external della stessa card */
.product-type-13 a.product_type_grouped:hover,
.product-type-13 a.product_type_external:hover,
/* style.css:1087 — "Procedi al pagamento" del carrello */
a.checkout-button:hover,
/* style.css:2033 — "Carica altri" della paginazione infinita della PLP */
nav.woocommerce-pagination.klb-load-more .button:hover,
/* order-tracking.css:36 — submit "Traccia il tuo ordine" */
body .klb-order-tracking .woocommerce-form-track-order > p button:hover {
    background-color: var(--usm-green, #213e25) !important;
    border-color: var(--usm-green, #213e25) !important;
    color: #fff !important;
}

/* --- 4. Rossi HARD-CODED, che il riallineamento di --theme-primary-color-RGB
       non poteva risolvere: qui il tema scrive il rosso della demo a mano. --- */
/* style.css:1021 — nel mini-carrello nativo il bottone "Cassa" è #E53E3E anche
   a riposo. Oggi il drawer usa il template di Elementor Pro, ma la regola serve
   se si torna al mini-cart di WooCommerce/Blonwe. */
p.woocommerce-mini-cart__buttons a.button.checkout {
    background-color: var(--usm-gold, #EBBD17);
    color: var(--usm-dark, #151616);
    border-color: transparent;
    /* il tema scrive 8px qui dentro: il raggio va ridichiarato nello stesso
       blocco, una regola più corta perderebbe per specificità */
    border-radius: var(--theme-radius-form, 10px);
}
p.woocommerce-mini-cart__buttons a.button.checkout:hover {
    background-color: var(--usm-green, #213e25);
    color: #fff;
}
/* style.css:2291 e 2295 — il cuore "Aggiungi ai preferiti" della card prodotto.
   Non è un rosso semantico (errore/danger, che resta rosso): è un accento. */
.products .wishlist-button:hover a,
.products .wishlist-button a.klbwishlist-added {
    color: var(--usm-green, #213e25);
}

/* =============================================
   CTA — border-radius uniforme
   =============================================
   --theme-radius-form (riallineata a 10px in cima) copre già tutti i bottoni,
   input, select2 e quantity del tema. Restano fuori solo le CTA con il raggio
   scritto a mano, elencate qui. Gli elementi volutamente tondi (frecce dei
   carousel, badge pill, avatar) NON sono toccati. */
/* Elementor stampa `.elementor-button{border-radius:3px}` (0,1,0) e il suo CSS
   è accodato DOPO il nostro: basta aggiungere il tag per superarlo a parità
   d'ordine. Vale per il widget Bottone, i Form e le CTA del minicart. */
a.elementor-button,
button.elementor-button,
input.elementor-button {
    border-radius: var(--theme-radius-form, 10px);
}
/* style.css:1036 — "Visualizza carrello" del mini-carrello nativo, 8px.
   Ricalco `:not(.checkout)` perché senza di lui la regola del tema (0,3,2)
   resterebbe più specifica della nostra. Il gemello .checkout ha il raggio
   nel blocco colore qui sopra. */
p.woocommerce-mini-cart__buttons a.button:not(.checkout) {
    border-radius: var(--theme-radius-form, 10px);
}

/* =============================================
   Minicart (widget carrello Elementor Pro)
   =============================================
   Le due CTA del drawer erano inline-block e su alcune pagine restavano
   strette: qui vanno a piena larghezza, una sotto l'altra. */
.elementor-menu-cart__footer-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Rimozione riga dal minicart.
   Elementor Pro stampa il link (a.elementor_remove_from_cart_button con href e
   aria-label corretti) ma SENZA testo né icona: il CSS che gli dà la × non
   viene caricato, quindi l'elemento resta 0×0 e il carrello sembra senza
   possibilità di rimuovere i prodotti. Qui gli diamo la × (Material Symbols,
   già in coda) e lo mettiamo in alto a destra della riga. */
.elementor-menu-cart__product {
    position: relative;
}
.elementor-menu-cart__product .elementor-menu-cart__product-remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    z-index: 2;
}
.elementor-menu-cart__product a.elementor_remove_from_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--usm-surface, #efeee8);
    color: var(--usm-text-muted, #79806e);
    text-decoration: none;
    transition:
        background var(--usm-transition, 150ms ease),
        color var(--usm-transition, 150ms ease);
}
.elementor-menu-cart__product a.elementor_remove_from_cart_button::before {
    content: "close";
    font-family: var(--usm-font-icons, 'Material Symbols Outlined');
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.elementor-menu-cart__product a.elementor_remove_from_cart_button:hover,
.elementor-menu-cart__product a.elementor_remove_from_cart_button:focus-visible {
    background: var(--usm-error, #ba1a1a);
    color: #fff;
}
/* Il nome prodotto non deve finire sotto la × */
.elementor-menu-cart__product .elementor-menu-cart__product-name {
    padding-right: 34px;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    text-align: center;
    /* Stesso raggio dei bottoni del tema (--theme-radius-form = 10px): con i
       12px di --usm-radius il drawer aveva CTA più tonde del resto del sito. */
    border-radius: var(--theme-radius-form, 10px);
}

/* =============================================
   Pagine editoriali (Chi siamo, Vendi con noi, legali…)
   =============================================
   Sono pagine di solo testo rese dal template del tema: senza un limite di
   misura le righe arrivavano a 1250px, illeggibili. */
body.page:not(.home) .klb-post {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
body.page .klb-post h2 { margin-top: 1.6em; }
body.page .klb-post h3 { margin-top: 1.4em; }
body.page .klb-post ul,
body.page .klb-post ol { margin-bottom: 1.2em; }
body.page .klb-post li { margin-bottom: .4em; line-height: 1.6; }

/* Occhiello introduttivo delle pagine editoriali */
.usm-page-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--usm-text-muted, #79806e);
}

/* Nota di servizio: visibile ma chiaramente distinta dal contenuto.
   Serve a segnalare i testi legali che il cliente deve ancora validare. */
.usm-page-nota {
    padding: 14px 18px;
    margin-bottom: 28px;
    background: rgba(235, 189, 23, .10);
    border-left: 4px solid var(--usm-gold, #EBBD17);
    border-radius: 0 var(--usm-radius-md, 8px) var(--usm-radius-md, 8px) 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--usm-text, #1b1c19);
}

.usm-page-cta { margin-top: 32px; }
.usm-page-cta a.button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 28px;
    border-radius: var(--usm-radius, 12px);
    font-weight: 700;
}

/* =============================================
   CTA flottante "Prenota" — solo desktop
   =============================================
   Su mobile occupa spazio utile sopra la bottom bar e non serve. */
@media (max-width: 991.98px) {
    a.usm-floating-appt {
        display: none !important;
    }
}



/* ── Barra promo in cima anche su mobile ─────────────────────────────────
   Il tema stampa la topbar dentro .header-desktop, che sotto i 1200px viene
   nascosta per intero (classe min-1200). Non potendo mostrare un figlio di un
   contenitore display:none, riattiviamo il contenitore e nascondiamo le altre
   due righe: così il contenuto resta uno solo, quello del Customizer, senza
   duplicare markup nell'header mobile.                                     */
/* Il nastro scorrevole vive dentro .header-notify, un flex item che il tema
   lascia a min-width:auto: non potendo restringersi sotto il proprio contenuto
   diventava largo quanto il nastro intero (~3950px). Di conseguenza il
   width:100% della barra si calcolava su quei 3950px e overflow:hidden non
   ritagliava nulla: restava visibile solo il primo messaggio, gli altri
   scorrevano fuori dallo schermo. Vale a ogni risoluzione, non solo mobile. */
.site-header .header-topbar .header-notify {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Il nastro deve restare largo quanto il suo contenuto: la traslazione del
   -50% dei keyframes è calcolata su questa larghezza. */
.site-header .header-topbar .usm-hp-announce-track {
    width: max-content;
}

@media (max-width: 1199.98px) {
    /* !important obbligato: base.css del tema nasconde .min-1200 con !important. */
    .site-header .header-desktop.min-1200 { display: block !important; }
    .site-header .header-desktop.min-1200 > .header-row:not(.header-topbar) { display: none; }

    /* La colonna di sinistra della topbar è vuota: toglierla evita che il
       messaggio resti schiacciato a destra sugli schermi stretti. */
    .site-header .header-topbar .header-inner > .col:first-child { display: none; }
    .site-header .header-topbar .header-inner > .col:last-child { width: 100%; }
    .site-header .header-topbar .container { padding-left: 12px; padding-right: 12px; }
    .usm-hp-announce { font-size: 12px; }
}

/* ── Banner: resa su mobile ──────────────────────────────────────────────
   Le immagini dei banner sono composte per il desktop: su schermo stretto,
   con object-fit:cover, l'inquadratura centrata taglia via il soggetto.
   Spostandola al 70% rientrano l'insegna del negozio nello slider della home
   e i soggetti nelle card categoria.                                       */
@media (max-width: 767.98px) {
    .klb-banner.inner-style .entry-media img { object-position: 70%; }

    .klb-banner.inner-style.justify-start .entry-wrapper {
        position: absolute;
        bottom: 15%;
        width: 100%;
    }
}

/* ── Variante colori della home: leggibilità sulle bande piene ───────────
   Le classi .usm-band esistono solo sulla pagina /home-colori/. I testi del
   tema sono pensati per fondi chiari: sul verde #213E25 sparivano (contrasto
   1.4:1) e sul giallo l'occhiello oro finiva oro su oro (1.1:1).
   Le card che hanno un fondo proprio restano scure: lì il contrasto c'è già. */
.usm-band--green .entry-title,
.usm-band--green .entry-subtitle,
.usm-band--green .entry-excerpt,
.usm-band--green .module-header p,
.usm-band--green .elementor-widget-blonwe-text-block p,
.usm-band--green .slick-dots li {
    color: var(--usm-bg, #fbf9f3);
}

.usm-band--green :is(.product, .klb-banner, .entry-wrapper) :is(.entry-title, .entry-subtitle, .entry-excerpt) {
    color: var(--usm-dark-alt, #1b1c19);
}

/* I numeri dei contatori restano oro: sul verde scuro si leggono meglio del
   bianco e tengono l'accento del marchio. */
.usm-band--green .elementor-widget-blonwe-text-block .entry-title {
    color: var(--usm-gold, #EBBD17);
}

/* Sul giallo l'occhiello passa al verde logo. */
.usm-band--gold .entry-subtitle {
    color: var(--usm-green, #213e25);
}

/* Questi tre erano già fissati con !important più sopra (contrasto della home
   normale, dove il fondo è crema) o dal CSS che Elementor genera per la pagina.
   `:not(#usm-x)` porta il selettore a specificità di livello ID senza toccare
   il markup: è la stessa tecnica usata per le statistiche della home. */
.usm-band--green .klb-count-block .entry-title:not(#usm-x) {
    color: var(--usm-gold, #EBBD17) !important;
}
.usm-band--green .klb-count-block .entry-description:not(#usm-x),
.usm-band--green .klb-count-block .entry-description p:not(#usm-x) {
    color: var(--usm-bg, #fbf9f3) !important;
}
.usm-band--gold .entry-subtitle:not(#usm-x) {
    color: var(--usm-green, #213e25) !important;
}
/* Su mobile l'occhiello dell'hero testuale è oro: sulla banda gialla sparisce. */
.usm-band--gold .usm-hero-mobile__eyebrow {
    color: var(--usm-green, #213e25);
}

/* Il <picture> che avvolge l'immagine delle slide (vedi
   USM_TH_Elementor::immagine_slider_per_mobile) non deve creare una scatola
   propria: `display: contents` lo toglie dal layout e l'<img> resta figlia
   effettiva di .entry-media, con le regole del tema che continuano a valere. */
.usm-slide-picture {
    display: contents;
}

/* =============================================
   Icona account nell'header mobile
   =============================================
   Vedi USM_TH_Accesso. Da telefono non esisteva alcun ingresso all'area
   privata: ne' nell'header, ne' fra le 63 voci del menu a scomparsa.
   L'icona sta accanto al carrello, dove la si cerca; il testo "Accedi /
   Account" che l'accompagna su desktop qui e' di troppo, resta il simbolo. */
.usm-account-mobile {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.usm-account-mobile .action-text {
    display: none !important;
}

.usm-account-mobile .action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: area di tocco che si prende senza sbagliare. */
    min-width: 44px;
    min-height: 44px;
    color: inherit;
}

.usm-account-mobile .action-icon i {
    font-size: 22px;
    line-height: 1;
}

/* L'icona serve solo dove il tema non ne stampa gia' una: sopra i 1200px
   entra in funzione l'header desktop, che ha la sua. */
@media (min-width: 1201px) {
    .usm-account-mobile {
        display: none;
    }
}