/* ============================================================
   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;
}

/* ============================================================
   FASCIA "NOVITÀ" (fuori dal blocco carrello, quindi media query)
   ============================================================ */

/* Full bleed: la sezione è appesa in coda al contenuto, che è incolonnato.
   overflow: hidden evita che lo slider sfondi il viewport. */
.cart-news {
    --cn-gap: 16px;
    --cn-per: 4;

    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 48px 0;
    overflow: hidden;
    background: var(--cart-bg);
}

.cart-news__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 24px;
}

.cart-news__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.cart-news__subtitle {
    flex: 1 1 100%;
    order: 3;
    margin: 0;
    font-size: .9rem;
    color: var(--cart-muted);
}

.cart-news__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.cart-news__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--cart-card);
    border: 1px solid var(--cart-box-border);
    border-radius: 50%;
    color: var(--cart-text);
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.cart-news__arrow:hover:not(:disabled) {
    background: var(--cart-box-border);
}

.cart-news__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.cart-news__arrow--prev {
    transform: rotate(180deg);
}

/* La griglia dello shop diventa una riga unica scorrevole.
   `!important` su flex-wrap è OBBLIGATORIO: loop-start.php mette sulla lista
   le utility Bootstrap .d-flex e .flex-wrap, e Bootstrap le dichiara
   `flex-wrap:wrap!important`. Senza, le card vanno a capo e si vedono tutti i
   prodotti impilati invece dello slider. */
.cart-news .woocommerce ul.products.d-flex.flex-wrap {
    flex-wrap: nowrap !important;
    gap: var(--cn-gap);
    margin: 0;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* Larghezza calcolata sul numero di card visibili: --cn-per per schermata,
   con i gap scalati. */
.cart-news .woocommerce ul.products.d-flex.flex-wrap > li.product {
    flex: 0 0 auto;
    width: calc((100% - (var(--cn-per) - 1) * var(--cn-gap)) / var(--cn-per));
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

@media (max-width: 991.98px) {
    .cart-news { --cn-per: 3; }
}

@media (max-width: 767.98px) {
    .cart-news { --cn-per: 2; }
}

@media (max-width: 575.98px) {
    .cart-news { --cn-per: 1.3; }
    .cart-news__nav { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* La fascia "novità" chiude già la pagina con il suo fondo grigio: i 60px di
   stacco del footer (40px sotto i 768px) creerebbero una banda bianca in
   mezzo. Questo foglio è caricato solo sul carrello, quindi la regola è già
   circoscritta; il prefisso su body la rende esplicita e la mette al riparo
   da cambi nell'ordine di caricamento — footer.css usa la sola .site-footer,
   qui la specificità è più alta e vince anche dentro la sua media query. */
body.woocommerce-cart .site-footer {
    margin-top: 0;
}

/* ============================================================
   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%;
    }
}