/* ============================================================
   CARRELLO (pagina con il blocco Gutenberg woocommerce/cart)

   Le variabili --cart-* arrivano da minicart.css, caricato ovunque.

   Struttura REALE della pagina (letta dal template salvato in wp_posts, id 8):

   .wp-block-woocommerce-cart            ← container-type: inline-size
    └ .wc-block-components-sidebar-layout
      ├ .wc-block-cart__main .wp-block-woocommerce-cart-items-block
      │   ├ table.wc-block-cart-items    ← thead + tbody, tabella vera
      │   └ .wp-block-woocommerce-product-collection   (cross-sell del blocco)
      └ .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block
        ├ .wp-block-woocommerce-cart-order-summary-block
        │   ├ …-order-summary-heading-block
        │   ├ …-order-summary-coupon-form-block        ← box 1
        │   └ …-order-summary-totals-block             ← box 2, iniettato a
        │       runtime da CartOrderSummaryBlock::render() attorno a
        │       subtotale/sconto/commissioni/spedizione/tasse
        ├ .wp-block-woocommerce-cart-express-payment-block
        ├ .wc-block-cart__submit
        ├ .cart-help + .cart-accordion   ← nostri
        └ .wp-block-woocommerce-cart-accepted-payment-methods-block

   Trappole già pagate, da non reintrodurre:
   - La lista prodotti NON si può ristrutturare da PHP: è un <table> generato
     da React, CartLineItemsBlock è una classe vuota e non c'è template da
     sovrascrivere. Si lavora sul display model (vedi colonna sinistra), non
     sui bordi delle celle: nel modello tabellare Bootstrap impone
     border-collapse:collapse (che uccide il border-radius) e in "separate" i
     bordi su <tr>/<tbody> non vengono renderizzati. Con display:block/grid
     entrambi i problemi spariscono.
   - WooCommerce azzera il padding orizzontale delle voci
     (.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item
      {padding-left:0;padding-right:0}), quindi il respiro interno va messo sui
     box, non sulle righe.
   - Il breakpoint interno del carrello è una CONTAINER query a 700px, non una
     media query. Le regole desktop stanno fuori da ogni query e vengono
     annullate sotto i 700px: così, se il container query non fosse
     supportato, resta comunque il layout desktop invece del nulla.
   ============================================================ */

.wc-block-cart {
    --cart-box-border: #e6e6e6;
    --cart-box-radius: 12px;
    --cart-box-pad: 18px;
}

.wc-block-cart .wc-block-components-sidebar-layout {
    gap: 0;
}

/* ============================================================
   COLONNA SINISTRA — un box unico attorno ai prodotti
   ============================================================ */

/* La lista prodotti è un <table> generato da React: non esiste un template PHP
   da sovrascrivere (CartLineItemsBlock è una classe vuota, il markup vive nel
   bundle JS di WooCommerce). Non potendo cambiare l'HTML, cambiamo il MODELLO
   DI DISPLAY: con block/grid la tabella smette di comportarsi da tabella.

   È la scelta che risolve tutti i vincoli incontrati prima:
   - border-collapse diventa irrilevante (niente più conflitto con Bootstrap);
   - i bordi su <tbody> e <tr> vengono finalmente renderizzati;
   - il border-radius funziona;
   - il box sta su <tbody>, quindi il <thead> con "Prodotto / totale" resta
     FUORI dal riquadro, come nel design.
   Le colonne, non più governate dall'algoritmo tabellare, le definiamo noi
   con una grid condivisa da intestazione e righe, così restano allineate. */

.wc-block-cart__main table.wc-block-cart-items {
    --cart-cols: 88px minmax(0, 1fr) auto;

    display: block;
    border: 0;
    background: none;
}

/* Intestazione: fuori dal box, stessa grid delle righe per l'allineamento. */
.wc-block-cart__main table.wc-block-cart-items thead {
    display: block;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__header {
    display: grid;
    grid-template-columns: var(--cart-cols);
    gap: 16px;
    padding: 0 4px 10px;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__header th {
    display: block;
    border: 0;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

/* Il box: un solo bordo, sul contenitore delle righe. */
.wc-block-cart__main table.wc-block-cart-items tbody {
    display: block;
    background: var(--cart-card);
    border: 1px solid var(--cart-box-border);
    border-radius: var(--cart-box-radius);
}

/* Ogni riga: solo il separatore inferiore, l'ultima non lo prende. */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row {
    display: grid;
    grid-template-columns: var(--cart-cols);
    gap: 16px;
    align-items: start;
    padding: 20px var(--cart-box-pad);
    border-bottom: 1px solid var(--cart-box-border);
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row:last-child {
    border-bottom: 0;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row td {
    display: block;
    border: 0;
    padding: 0;
    background: none;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__total {
    text-align: right;
}

/* ── Stile del prodotto in riga ──────────────────────────────
   WooCommerce scrive queste regole con selettori a specificità 0,3,1
   (`table.wc-block-cart-items .wc-block-cart-items__row .X`): una classe
   secca non basterebbe a batterle, per questo ogni regola qui sotto ripete
   il percorso completo. Colori e pesi arrivano dalle variabili delle card
   (product-card.css), così il carrello parla la stessa lingua dello shop. */

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
    gap: 6px;
}

/* Titolo in grassetto. `max-width: max-content` è di WooCommerce e taglia i
   titoli lunghi: va rimosso. */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    max-width: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wc-ink);
    text-decoration: none;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
    color: var(--wc-accent-dark);
}

/* Prezzo unitario. In DOM il barrato viene PRIMA dello scontato; nel design
   è il contrario, quindi li riordiniamo con flex order (il contenitore
   .price è già display:flex per WooCommerce). */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
    gap: 8px;
    font-size: 15px;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__value {
    order: 1;
    font-weight: 700;
    color: var(--wc-ink);
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__value.is-discounted {
    margin-left: 0;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__regular {
    order: 2;
    font-size: 13px;
    font-weight: 500;
    color: var(--wc-muted);
    text-decoration: line-through;
}

/* Descrizione breve: WooCommerce la stampa già (short_description, con
   fallback sulla descrizione lunga, troncata a 15 parole lato client) e la
   avvolge in un <p> perché ci passa autop. Qui la si veste soltanto. */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata__description > p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--wc-muted);
}

/* Totale di riga */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--wc-ink);
}

/* Badge risparmio ("Risparmi X"): senza fondo grigio, in ambra come le
   percentuali delle card. */
.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
    padding: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--wc-accent-dark);
}

/* Il cross-sell del blocco ("Potresti essere interessato a…") sta nella stessa
   colonna: staccato dal box, altrimenti sembra parte della lista. */
.wc-block-cart__main .wp-block-woocommerce-product-collection {
    margin-top: 32px;
}

/* ============================================================
   COLONNA DESTRA
   ============================================================ */

.wc-block-cart__sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wc-block-cart__sidebar > * {
    margin: 0;
}

/* Il contenitore del sommario non è un box: lo sono i suoi figli. */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
}

/* Il design non prevede l'intestazione "Totali carrello". */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
    display: none;
}

/* ── Box 1: coupon ───────────────────────────────────────── */

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    padding: 2px var(--cart-box-pad);
    background: var(--cart-card);
    border: 1px solid var(--cart-box-border);
    border-radius: var(--cart-box-radius);
}

.wc-block-cart__sidebar .wc-block-components-panel__button {
    padding-block: 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wc-block-cart__sidebar .wc-block-components-totals-coupon {
    padding: 0;
    border: 0;
}

/* ── Box 2: subtotale, consegna, totale stimato ──────────── */

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
    padding: 4px var(--cart-box-pad);
    background: var(--cart-card);
    border: 1px solid var(--cart-box-border);
    border-radius: var(--cart-box-radius);
}

/* Ogni gruppo di righe è avvolto in un .totals-wrapper con bordo proprio:
   qui dentro serve solo il ritmo verticale, i separatori li ridisegniamo. */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper {
    padding: 14px 0;
    border: 0;
}

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper {
    border-top: 1px solid var(--cart-box-border);
}

.wc-block-cart__sidebar .wc-block-components-totals-item__label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Riga spedizione: etichetta + camioncino ─────────────── */

/* Con UNA sola tariffa WooCommerce non scrive "Consegna": mette il nome del
   metodo AL POSTO dell'etichetta (TotalsShipping: `_ = (0===h.length||g) ?
   label : h[0]`), così il cliente legge "Tariffa unica" e non capisce cosa
   sta pagando. Rimettiamo l'etichetta con un ::before — libero, perché il
   pallino del radio WooCommerce lo disegna sull'<input>, non qui.
   Il testo arriva da --cart-shipping-label, valorizzata da PHP, altrimenti
   sarebbe stringa fissa non traducibile. */
/* Il nome del metodo resta nel DOM come NODO DI TESTO ANONIMO dentro il
   label: CSS non ha modo di selezionarlo. Lo si nasconde azzerando la
   dimensione del carattere sul contenitore — il ::before si ridichiara la
   propria misura e resta l'unica cosa visibile. */
.wc-block-cart__sidebar .wc-block-components-totals-shipping .wc-block-components-totals-item__label {
    display: flex;
    align-items: center;
    font-size: 0;
}

.wc-block-cart__sidebar .wc-block-components-totals-shipping .wc-block-components-totals-item__label::before {
    content: var(--cart-shipping-label, "Spedizione");
    min-height: 20px;
    padding-left: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='1'/%3E%3Cpath d='M16 8h4l3 3v5h-7V8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") no-repeat left center / 18px 18px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cart-text);
}

/* ── Bottone «procedi al pagamento» ──────────────────────── */

.wc-block-cart__sidebar .wc-block-cart__submit {
    padding: 0;
    margin-top: 4px;
}

/* ── Banner "primo ordine" ───────────────────────────────── */

.cart-banner {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--cart-gradient);
    border-radius: var(--cart-box-radius);
}

.cart-banner__media {
    flex: 0 0 34%;
    max-width: 34%;
}

.cart-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-banner__body {
    flex: 1 1 auto;
    padding: 14px var(--cart-box-pad);
}

.cart-banner__title {
    margin: 0 0 2px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cart-text);
}

.cart-banner__text {
    margin: 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--cart-text);
}

.cart-banner__link {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}

/* ── Barra spedizione gratuita ───────────────────────────── */

/* Gemella di .minicart__shipping (minicart.css): stesse proporzioni e stesso
   gradiente, così il cliente riconosce lo stesso indicatore nei due punti. */
.cart-progress {
    padding: 14px var(--cart-box-pad);
    background: var(--cart-card);
    border: 1px solid var(--cart-box-border);
    border-radius: var(--cart-box-radius);
}

.cart-progress__text {
    margin: 0 0 10px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--cart-text);
}

.cart-progress__track {
    height: 8px;
    border-radius: 4px;
    background: #e6e6e6;
    overflow: hidden;
}

.cart-progress__bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--cart-gradient);
    transition: width .4s ease;
}

/* ── Riga "hai bisogno di aiuto" ─────────────────────────── */

.cart-help {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 0;
    font-size: .8rem;
    color: var(--cart-muted);
}

.cart-help__title {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cart-orange-dark);
}

.cart-help__link {
    font-weight: 600;
    color: var(--cart-text);
    text-decoration: underline;
}

/* ── Accordion (details/summary nativi, zero JS) ─────────── */

.cart-accordion {
    margin-top: 18px;
}

.cart-accordion__item {
    border-top: 1px solid var(--cart-box-border);
}

.cart-accordion__item:last-child {
    border-bottom: 1px solid var(--cart-box-border);
}

.cart-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cart-text);
    cursor: pointer;
    list-style: none;
}

/* Il triangolino nativo va tolto su entrambi i motori: la freccia è la nostra. */
.cart-accordion__head::-webkit-details-marker {
    display: none;
}

.cart-accordion__head::marker {
    content: '';
}

.cart-accordion__icon {
    flex: 0 0 auto;
    display: inline-flex;
    transition: transform .2s ease;
}

.cart-accordion__item[open] .cart-accordion__icon {
    transform: rotate(180deg);
}

.cart-accordion__body {
    padding-bottom: 18px;
}

.cart-accordion__text {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--cart-muted);
}

.cart-accordion__text p {
    margin: 0 0 8px;
}

.cart-accordion__text p:last-child {
    margin-bottom: 0;
}

.cart-accordion__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.cart-accordion__logo {
    width: auto;
    height: 26px;
    object-fit: contain;
}



/* ============================================================
   SOTTO I 700px DI CONTENITORE
   Le righe diventano display:grid e i td perdono il padding: la tecnica a
   celle non vale più, il box torna sulla tabella.
   ============================================================ */

@container (max-width: 699px) {
    /* Stessa tecnica, due colonne: l'immagine a sinistra su entrambe le righe,
       descrizione sopra e totale sotto. WooCommerce qui nasconde da sé
       l'intestazione. Le regole del box su <tbody> restano valide come sopra. */
    .wc-block-cart__main table.wc-block-cart-items {
        --cart-cols: 72px minmax(0, 1fr);
    }

    .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row {
        padding: 16px;
    }

    .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__image {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__product {
        grid-column: 2;
        grid-row: 1;
    }

    .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__total {
        grid-column: 2;
        grid-row: 2;
    }

    .wc-block-cart .wc-block-components-sidebar-layout {
        gap: 24px;
    }

    .cart-banner__media {
        flex-basis: 30%;
        max-width: 30%;
    }
}

/* ============================================================
   CARRELLO VUOTO — l'invito ai percorsi

   Markup: CartPageController::empty_cart_markup(), che sostituisce il
   contenuto del blocco «carrello vuoto» di WooCommerce (dove il template
   predefinito mette una collezione di prodotti).

   La faccina triste di WooCommerce va via: la stampa un ::before sul titolo
   che qui non c'è più, ma il blocco porta anche una regola sua sul contenitore,
   e senza questa riga resterebbe un'icona sopra il nostro riquadro.
   ============================================================ */

.wp-block-woocommerce-empty-cart-block > .cart-empty {
    max-width: 620px;
    margin: 8px auto 24px;
    padding: 44px 32px 40px;
    border: 1px solid var(--cart-box-border, #e6e6e6);
    border-radius: 18px;
    background: #fbfaf9;
    text-align: center;
}

.cart-empty__mark {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    color: var(--cart-text, #111);
}

.cart-empty__mark svg { width: 100%; height: 100%; display: block; }

.cart-empty__eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.cart-empty__title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cart-text, #111);
}

.cart-empty__text {
    /* La misura del rigo: oltre i ~60 caratteri, su una riga centrata, l'occhio
       fatica a tornare a capo. */
    max-width: 46ch;
    margin: 0 auto 26px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #5a564f;
}

.cart-empty__cta {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
}

.cart-empty__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(17, 17, 17, .18);
    color: #fff;
}

/* ── I livelli, in fila ─────────────────────────────────────────────────── */
/* Non è decorazione: «scopri i percorsi» detto e basta è un bottone, mentre
   vedere che i livelli sono cinque e come si chiamano è già una risposta alla
   domanda che ha in testa chi ha il carrello vuoto. */

.cart-empty__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin: 30px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--cart-box-border, #e6e6e6);
    list-style: none;
}

.cart-empty__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--cart-box-border, #e6e6e6);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    color: #33302b;
}

.cart-empty__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .wp-block-woocommerce-empty-cart-block > .cart-empty {
        padding: 34px 20px 30px;
    }

    .cart-empty__title { font-size: 25px; }
}