/**
 * UsatoMania Child — Cart
 * Layout gestito da Blonwe/Bootstrap. Qui solo override USM custom.
 */

 .cart-widget-side {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    height: 100vh;
    top: 0;
}


/* Fix audit UI 2026-07: prezzi riga visibili nel carrello mobile */
@media (max-width: 782px) {
    .woocommerce-cart-form td.product-price,
    .woocommerce-cart-form td.product-subtotal {
        display: table-cell !important;
    }
}

/* =============================================
   Drawer carrello (widget Menu Cart di Elementor Pro)
   =============================================
   Il widget ancora subtotale e pulsante con `position: absolute` in fondo al
   pannello: con un articolo solo restavano 560 px di bianco tra la riga
   prodotto e il totale, e il carrello sembrava rotto piu' che vuoto.
   Il pannello diventa una colonna vera: la lista occupa lo spazio disponibile
   e scorre, il riepilogo e' un blocco appoggiato in fondo.
   Serviva anche una gerarchia: nome, prezzo e subtotale erano tutti 16px/400,
   quindi il dato che conta - quanto spendo - non si distingueva da nulla. */

.cart-widget-side .site-scroll {
    display: flex;
    flex-direction: column;
}

.cart-widget-side .cart-side-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 0;
}

.cart-widget-side .fl-mini-cart-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cart-widget-side .elementor-menu-cart__products {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 4px 20px 12px;
}

/* ── Riga prodotto ────────────────────────────────────────────
   La miniatura era in `float: right`: l'immagine finiva a destra e il testo
   partiva dal bordo sinistro del pannello, che e' l'opposto di come si legge
   un carrello. */
.cart-widget-side .elementor-menu-cart__product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 14px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
}

.cart-widget-side .elementor-menu-cart__product:last-child {
    border-bottom: 0;
}

.cart-widget-side .elementor-menu-cart__product-image {
    order: -1;
    float: none !important;
    flex: 0 0 72px;
    width: 72px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--usm-surface, #efeee8);
}

.cart-widget-side .elementor-menu-cart__product-image img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 0;
}

.cart-widget-side .elementor-menu-cart__product-name {
    flex: 1 1 calc(100% - 118px);
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--usm-text, #1b1c19);
}

/* Il prezzo va a capo sotto il nome, incolonnato con esso: la miniatura
   occupa 72 px piu' 14 di gap. */
.cart-widget-side .elementor-menu-cart__product-price {
    flex: 0 0 100%;
    margin-top: 6px;
    padding-left: 86px;
    /* Il tema lo tiene a 12px: nel carrello il prezzo finiva piu' piccolo del
       nome dell'articolo. !important perche' la regola del tema vince. */
    font-size: 16px !important;
    font-weight: 700;
    color: var(--usm-dark, #151616);
}

/* La "x" era un cerchietto grigio appoggiato sopra la foto, dove sembrava
   parte dell'immagine. Qui e' un comando discreto nell'angolo della riga:
   assoluto, altrimenti in un contenitore che va a capo finisce sotto il
   prezzo, in mezzo al contenuto. */
.cart-widget-side .elementor-menu-cart__product {
    position: relative;
    padding-right: 30px;
}

.cart-widget-side .elementor-menu-cart__product-remove {
    position: absolute;
    top: 12px;
    right: 0;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--usm-olive, #79806e);
    line-height: 26px;
    text-align: center;
    transition: background var(--usm-transition-md, 250ms ease), color var(--usm-transition-md, 250ms ease);
}

.cart-widget-side .elementor-menu-cart__product-remove:hover {
    background: var(--usm-surface, #efeee8);
    color: var(--usm-error, #ba1a1a);
}

/* ── Riepilogo in fondo ───────────────────────────────────────
   Da due elementi assoluti sospesi nel vuoto a un blocco unico, con uno
   sfondo che lo stacca dalla lista. */
.cart-widget-side .elementor-menu-cart__subtotal,
.cart-widget-side .elementor-menu-cart__footer-buttons {
    position: static !important;
    width: auto;
    background: var(--usm-bg, #fbf9f3);
}

.cart-widget-side .elementor-menu-cart__subtotal {
    border-top: 1px solid var(--usm-surface-alt, #e9e8e2);
    padding: 16px 20px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-dark, #151616);
    text-align: left;
}

/* Il subtotale da solo lascia la domanda aperta: quanto pago di spedizione?
   Una riga sotto il totale e' il posto giusto per rispondere. */
.cart-widget-side .elementor-menu-cart__subtotal::after {
    content: "Spedizione e ritiro li scegli al passo successivo.";
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--usm-olive, #79806e);
}

.cart-widget-side .elementor-menu-cart__footer-buttons {
    padding: 14px 20px 20px;
}

.cart-widget-side .elementor-menu-cart__footer-buttons a {
    min-height: 50px;
    font-size: 15px;
    font-weight: 600;
}

/* Intestazione: il conteggio articoli sta gia' nell'icona in alto, qui serve
   solo che il titolo abbia il peso di un titolo. */
.cart-widget-side .cart-side-header {
    border-bottom: 1px solid var(--usm-surface-alt, #e9e8e2);
    padding: 16px 20px;
}

.cart-widget-side .cart-side-title {
    font-family: var(--usm-font-headline, 'Newsreader', serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-dark, #151616);
}

/* Con un articolo solo restano 540 px di pannello vuoto tra la riga prodotto
   e il riepilogo. Il vuoto in un carrello con un pezzo solo e' inevitabile:
   quello che si puo' evitare e' che sembri un errore. La lista diventa una
   colonna e questo blocco si appoggia in fondo, cosi' l'aria si distribuisce
   tra due elementi ancorati invece di lasciare un buco unico in mezzo.
   Il contenuto e' quello che a carrello aperto ci si sta chiedendo: come lo
   ricevo e di che merce si tratta. Stesse tre promesse della scheda prodotto. */
.cart-widget-side .elementor-menu-cart__products {
    display: flex;
    flex-direction: column;
}

.cart-widget-side .elementor-menu-cart__products::after {
    content: "\2713  Ritiro gratuito in negozio a Pontedassio\A\2713  Spedizione GLS in tutta Italia\A\2713  Ogni pezzo è controllato prima della vendita";
    display: block;
    margin-top: auto;
    padding: 16px 18px;
    border-radius: var(--usm-radius, 12px);
    background: var(--usm-surface, #efeee8);
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.9;
    color: var(--usm-text, #1b1c19);
}

/* ── Azione secondaria ────────────────────────────────────────
   "Visualizza carrello" era `display: none`: chi vuole controllare o togliere
   qualcosa prima di pagare non aveva strada. Torna visibile, ma come link
   discreto sotto la CTA: l'azione principale resta una sola. */
.cart-widget-side .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
    display: inline-flex !important;
    align-self: center;
    order: 2;
    min-height: 0;
    padding: 4px 0;
    border: 0;
    background: transparent !important;
    color: var(--usm-olive, #79806e) !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-widget-side .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
    color: var(--usm-dark, #151616) !important;
}

.cart-widget-side .elementor-menu-cart__footer-buttons .elementor-button--checkout {
    order: 1;
}

/* ── Riga prodotto: altezza libera ────────────────────────────
   Il tema fissa l'altezza della riga a 125 px. Con i nomi lunghi che arrivano
   dal gestionale, su schermo stretto il titolo va a quattro righe e il prezzo
   finisce 13 px sotto il bordo della riga: la linea di separazione passava
   in mezzo alla cifra. */
.cart-widget-side .elementor-menu-cart__product {
    height: auto !important;
    min-height: 0;
}

/* Tre righe bastano a riconoscere l'articolo: la scheda completa e' a un
   tocco di distanza, e il carrello deve restare leggibile a colpo d'occhio. */
.cart-widget-side .elementor-menu-cart__product-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Carrello vuoto ───────────────────────────────────────────
   Il messaggio restava appiccicato al bordo, allineato a sinistra e senza
   un'uscita: e' una conseguenza del `padding: 0` messo sul corpo del
   pannello per farne una colonna. Qui il messaggio si riprende il suo
   spazio e diventa un invito, non un vicolo cieco. */
.cart-widget-side .woocommerce-mini-cart__empty-message {
    margin: 0;
    padding: 48px 24px 24px;
    text-align: center;
    font-size: 15px;
    color: var(--usm-olive, #79806e);
}

.cart-widget-side .woocommerce-mini-cart__empty-message::before {
    content: "shopping_basket";
    display: block;
    margin-bottom: 12px;
    font-family: 'Material Symbols Outlined';
    font-size: 40px;
    line-height: 1;
    color: var(--usm-surface-alt, #d8d4c8);
    font-variation-settings: 'FILL' 1;
}

.cart-widget-side .woocommerce-mini-cart__empty-message::after {
    content: "Il catalogo cambia ogni giorno: ogni pezzo è unico e passa una volta sola.";
    display: block;
    max-width: 30ch;
    margin: 10px auto 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--usm-olive, #79806e);
}