/* =============================================================================
   CARRELLO v2 — foglio di stile della pagina /cart
   Caricato da tpl/cart-page.html (pagecss2="cart" in inc/v2-head.html), dopo
   v2-base.css e pagina-v2.css. Tutto e' scopato su body.cart-v2.

   Origine: la "PARTE 1 — BASE" del cart.css del negozio di riferimento,
   ricolorata con i token v2 (oro, carta, inchiostro). La "PARTE 2" non serve:
   esisteva solo per annullare un tema Bootstrap che qui non c'e'. Per lo
   stesso motivo qui c'e' in piu' la tabella desktop, che li' disegnava il tema.
   Le classi sono quelle del riferimento: cart.js le usa come agganci.

   In piu' per La Querce: l'avviso della vendita a cartoni da 3 (.cartoni) e lo
   stato "carrello vuoto" (.cartempty).
   ========================================================================== */

/* lo spazio fra la barra in basso (fissa su mobile) e il fondo dello schermo.
   La barra utente (.usermenu) qui e' nascosta (v2-base.css): niente da
   scavalcare, la barra del carrello sta sul fondo. */
.cart-v2 {
    --cart-bar-bottom: 0px;
}

.cart-v2 .pv2-hero__sub a {
    color: inherit;
    font-weight: inherit;
}

.cart-v2 .pv2-hero__sub a:hover {
    color: #fff;
    text-decoration: none;
}

/* =============================================================================
   Riquadro con la lista
   ========================================================================== */

.cart-v2 .cartcard {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(28, 27, 23, .04), 0 10px 30px rgba(28, 27, 23, .05);
    overflow: hidden;
}

.cart-v2 .table-cart {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
}

/* -- Comandi a icona ---------------------------------------------------------
   L'icona resta piccola, ma l'area sensibile al tocco arriva a 44x44 (linea
   guida Apple; il minimo WCAG 2.5.8 e' 24x24): i pulsanti + / - sono
   adiacenti e su smartphone si sbagliava bersaglio. */
.cart-v2 .iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-soft);
    cursor: pointer;
    /* niente ritardo del doppio-tap-zoom ne' selezione nei tocchi ripetuti */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}

.cart-v2 .iconbtn > svg {
    pointer-events: none; /* il target del click e' sempre il button */
    transition: transform .08s ease-out;
}

.cart-v2 .iconbtn:hover {
    color: var(--gold-dark);
}

.cart-v2 .delrowcart:hover {
    color: #8a2b2b;
}

/* riscontro immediato al tocco: sul touch :hover non esiste */
.cart-v2 .iconbtn:active > svg {
    transform: scale(.86);
}

/* durante la chiamata all'API il pulsante e' disabilitato */
.cart-v2 .iconbtn[disabled] {
    opacity: .4;
    cursor: default;
}

.cart-v2 .iconbtn[disabled] > svg {
    transform: none;
}

/* -- Stepper quantita': una pillola bordata, a ogni larghezza ---------------- */
.cart-v2 .qt {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(28, 27, 23, .2);
    border-radius: 999px;
    background-color: var(--surface);
    padding: 0 .2rem;
}

.cart-v2 .qtnumber {
    min-width: 2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* -- Nome e foto ------------------------------------------------------------ */
.cart-v2 .table-cart-figure {
    display: block;
    flex: 0 0 auto;
    width: 88px;
    line-height: 0;
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--paper);
}

.cart-v2 .table-cart-figure picture {
    display: block;
    line-height: 0;
}

.cart-v2 .table-cart-figure img {
    display: block;
    width: 100%;
    height: 88px;
    object-fit: contain;
    aspect-ratio: auto;
}

.cart-v2 .table-cart-link {
    color: var(--text);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.cart-v2 .table-cart-link:hover {
    color: var(--gold-dark);
    text-decoration: none;
}

.cart-v2 .table-cart-descr {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-soft);
}

.cart-v2 .column__price {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* -- Totali ----------------------------------------------------------------- */
.cart-v2 .carttotals {
    padding: .5rem clamp(1rem, 3vw, 1.75rem) 1.25rem;
    border-top: 1px solid var(--line);
    background-color: #fbfaf7;
}

.cart-v2 .rowcart {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 1.5rem;
    padding: .75rem 0 0;
}

.cart-v2 .total__title,
.cart-v2 .total__title_discount {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-soft);
}

.cart-v2 .rowcart__total .total__price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.cart-v2 .rowcart__total_discount .total__price_discount {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-dark);
}

.cart-v2 .discount_applied {
    margin-left: .35rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background-color: rgba(170, 150, 75, .15);
    color: var(--gold-dark);
    letter-spacing: .04em;
}

/* =============================================================================
   Vendita a cartoni da 3
   Il contenitore (regione live) resta in pagina anche vuoto: si vede solo il
   riquadro interno, quando c'e'.
   ========================================================================== */

.cart-v2 .cartoni {
    margin-top: 1.5rem;
}

.cart-v2 .cartoni:empty {
    margin-top: 0;
}

.cart-v2 .cartoni__box {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border-radius: var(--radius);
}

.cart-v2 .cartoni__icon {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.cart-v2 .cartoni__testo {
    margin: 0;
    line-height: 1.55;
}

/* da completare: ben visibile, filetto oro a sinistra */
.cart-v2 .cartoni__box--ko {
    padding: 1.1rem 1.25rem;
    background-color: #fbf7ea;
    border: 1px solid rgba(170, 150, 75, .45);
    border-left: 4px solid var(--gold);
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
}

.cart-v2 .cartoni__box--ko .cartoni__icon {
    color: var(--gold-dark);
}

/* completo: una riga discreta */
.cart-v2 .cartoni__box--ok {
    justify-content: flex-end;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold-dark);
}

/* clic sul pulsante bloccato: l'avviso lampeggia una volta per farsi trovare */
.cart-v2 .cartoni--richiamo .cartoni__box--ko {
    animation: cartoni-richiamo .9s ease;
}

@keyframes cartoni-richiamo {
    0%   { box-shadow: 0 0 0 0 rgba(170, 150, 75, .55); }
    100% { box-shadow: 0 0 0 14px rgba(170, 150, 75, 0); }
}

/* =============================================================================
   Pulsante di avanzamento
   Desktop: a destra, sulla colonna dei totali, con il ritorno al negozio a
   sinistra.
   ========================================================================== */

.cart-v2 .cartcta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 2rem;
}

.cart-v2 .cartcta__back {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-soft);
}

.cart-v2 .cartcta__back:hover {
    color: var(--gold-dark);
    text-decoration: none;
}

.cart-v2 .confirmcart {
    margin: 0;
    cursor: pointer;
    font-size: .85rem;
    padding: 1.05rem 2.2rem;
}

/* bloccato dal cartone incompleto: focalizzabile, ma visibilmente inerte */
.cart-v2 .confirmcart.is-disabled,
.cart-v2 .confirmcart[aria-disabled="true"] {
    background-color: #cfc7a6;
    border-color: #cfc7a6;
    color: #fff;
    cursor: not-allowed;
}

.cart-v2 .confirmcart.is-disabled:hover,
.cart-v2 .confirmcart[aria-disabled="true"]:hover {
    background-color: #cfc7a6;
    border-color: #cfc7a6;
    color: #fff;
}

/* invio in corso */
.cart-v2 .confirmcart.button--loading {
    opacity: .7;
    cursor: progress;
}

.cart-v2 .confirmcart[disabled] {
    cursor: progress;
}

/* =============================================================================
   Carrello vuoto
   ========================================================================== */

.cart-v2 .cartempty {
    max-width: 34rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(28, 27, 23, .04), 0 10px 30px rgba(28, 27, 23, .05);
}

.cart-v2 .cartempty[hidden],
.cart-v2 .cartbox[hidden] {
    display: none;
}

.cart-v2 .cartempty__icon {
    color: var(--gold);
}

.cart-v2 .cartempty__title {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    margin: 1.25rem 0 0;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text);
}

.cart-v2 .cartempty__title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin: .85rem auto 0;
    background-color: var(--gold);
}

.cart-v2 .cartempty__text {
    margin: 1.25rem 0 2rem;
    line-height: 1.7;
    color: var(--text-soft);
}

/* =============================================================================
   Tabella, da 1200px
   Righe divisorie sulle celle: con border-collapse una linea unica attraversa
   la riga dalla foto al subtotale (sul <tr> verrebbe assorbita dalle celle).
   ========================================================================== */

@media screen and (min-width: 1200px) {

    .cart-v2 .table-cart th {
        padding: 1.1rem 1rem;
        text-align: left;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-soft);
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
    }

    .cart-v2 .table-cart th.column__price {
        text-align: right;
    }

    .cart-v2 .table-cart th.column__qt {
        text-align: center;
    }

    .cart-v2 .table-cart th:first-child,
    .cart-v2 .table-cart td:first-child {
        padding-left: 1.75rem;
    }

    .cart-v2 .table-cart th:last-child,
    .cart-v2 .table-cart td:last-child {
        padding-right: 1.75rem;
    }

    .cart-v2 .table-cart td {
        padding: 1.1rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--line);
    }

    .cart-v2 .table-cart tbody tr.cartrow:last-child > td {
        border-bottom: 0;
    }

    /* foto e nome affiancati nella stessa cella: il flex sta su un
       contenitore interno, una <td> in flex smetterebbe di essere una cella */
    .cart-v2 .table-cart td.cartproduct {
        width: 50%;
    }

    .cart-v2 .cartproduct__inner {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .cart-v2 .table-cart td.productdel {
        width: 1%;
        padding-left: 0;
        padding-right: 0;
    }

    .cart-v2 .table-cart td.qtcell {
        text-align: center;
    }

    .cart-v2 .table-cart td.priceqt {
        font-weight: 600;
    }
}

/* =============================================================================
   Carrello a schede sotto i 1200px
   Immagine a sinistra, nome e prezzo incolonnati a destra, comandi raggruppati
   in fondo alla scheda.
   ========================================================================== */

@media screen and (max-width: 1199.98px) {

    .cart-v2 .table-cart,
    .cart-v2 .table-cart tbody,
    .cart-v2 .table-cart tr,
    .cart-v2 .table-cart td {
        display: block;
        width: auto;
    }

    /* intestazioni tolte alla vista ma NON all'accessibilita': grazie ai role=
       del markup gli screen reader continuano a leggere una tabella */
    .cart-v2 .table-cart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cart-v2 .table-cart tr.cartrow {
        display: grid;
        /* col1 = immagine, col2 = testo, col3 = spazio elastico, col4 = importo.
           Nell'ultima riga convivono stepper, cestino e totale, e lo stepper
           deve partire dal bordo sinistro della scheda. */
        grid-template-columns: 80px auto minmax(0, 1fr) auto;
        grid-template-areas:
            "img    name   name       name"
            "img    price  price      price"
            "qtcell qtcell productdel priceqt";
        column-gap: 1rem;
        row-gap: .375rem;
        align-items: start;
        padding: 1.25rem clamp(1rem, 4vw, 1.5rem);
        border-bottom: 1px solid var(--line);
    }

    .cart-v2 .table-cart tr.cartrow:last-child {
        border-bottom: 0;
    }

    /* display:contents scioglie la cella prodotto: immagine e nome stanno nello
       stesso <td> e cosi' finiscono in due aree diverse della griglia */
    .cart-v2 .table-cart tr.cartrow > td.cartproduct,
    .cart-v2 .cartproduct__inner {
        display: contents;
    }

    .cart-v2 .table-cart td.cartproduct .table-cart-figure {
        grid-area: img;
        width: 80px;
    }

    .cart-v2 .table-cart td.cartproduct .table-cart-figure img {
        height: 80px;
    }

    .cart-v2 .table-cart td.cartproduct .table-cart-link {
        grid-area: name;
        min-width: 0;
        font-size: 1rem;
    }

    /* prezzo unitario: l'informazione cercata per prima */
    .cart-v2 .table-cart td.price {
        grid-area: price;
        text-align: left;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.3;
    }

    /* suffisso "cad.": senza, il prezzo sotto al nome sembrava l'importo della
       riga. In ::after perche' su desktop lo dice gia' la colonna "Prezzo". */
    .cart-v2 .table-cart td.price[data-unit]::after {
        content: " " attr(data-unit);
        font-size: .8rem;
        font-weight: 400;
        color: var(--text-soft);
    }

    .cart-v2 .table-cart td.qtcell,
    .cart-v2 .table-cart td.productdel,
    .cart-v2 .table-cart td.priceqt {
        margin-top: 1rem;
        align-self: center;
    }

    .cart-v2 .table-cart td.qtcell {
        grid-area: qtcell;
        justify-self: start;
    }

    /* `width: 44px` esplicita: con justify-self la cella diventa fit-content e
       il pulsante da 44px sborderebbe sopra i comandi vicini */
    .cart-v2 .table-cart td.productdel {
        grid-area: productdel;
        justify-self: start;
        width: 44px;
    }

    .cart-v2 .table-cart td.productdel .delrowcart {
        border: 1px solid rgba(28, 27, 23, .2);
        border-radius: 999px;
        background-color: var(--surface);
    }

    /* totale di riga: qui l'etichetta serve, altrimenti sarebbe un secondo
       importo indistinguibile dal prezzo unitario */
    .cart-v2 .table-cart td.priceqt {
        grid-area: priceqt;
        justify-self: end;
        text-align: right;
        font-size: 1rem;
        font-weight: 600;
    }

    .cart-v2 .table-cart td.priceqt[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .125rem;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-soft);
    }

    /* Su smartphone e tablet il pulsante e' una barra che segue la pagina: con
       piu' prodotti finiva sotto la piega. */
    .cart-v2 .cartcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--cart-bar-bottom);
        z-index: 1100;
        margin: 0;
        padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom, 0px));
        background-color: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--line);
        box-shadow: 0 -2px 12px rgba(28, 27, 23, .08);
    }


    .cart-v2 .cartcta__back {
        display: none;
    }

    .cart-v2 .confirmcart {
        width: 100%;
        white-space: normal; /* "Procedi all'ordine (3 articoli)" va a capo */
    }

    /* la barra non deve coprire il fondo della pagina */
    .cart-v2 main {
        padding-bottom: 7rem;
    }
}

@media screen and (max-width: 400px) {

    .cart-v2 .table-cart tr.cartrow {
        grid-template-columns: 64px auto minmax(0, 1fr) auto;
        column-gap: .75rem;
    }

    .cart-v2 .table-cart td.cartproduct .table-cart-figure {
        width: 64px;
    }

    .cart-v2 .table-cart td.cartproduct .table-cart-figure img {
        height: 64px;
    }

    .cart-v2 .confirmcart {
        padding-left: 1rem;
        padding-right: 1rem;
        letter-spacing: .08em;
    }
}

/* =============================================================================
   Pagamenti e consegne sotto il pulsante (art. 51 c.3 Cod. Consumo)
   Informazione dovuta, non una vendita: tono discreto, filetto sopra.
   Per tornare indietro basta togliere questo blocco e .cartinfo in cart-page.html.
   ========================================================================== */

.cart-v2 .cartinfo {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: .85rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.cart-v2 .cartinfo__list {
    margin: 0;
}

.cart-v2 .cartinfo__row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: .25rem 1rem;
    padding: .35rem 0;
}

.cart-v2 .cartinfo__row dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold-dark);
    padding-top: .15rem;
}

.cart-v2 .cartinfo__row dd {
    margin: 0;
}

.cart-v2 .cartinfo__link {
    margin: .75rem 0 0;
}

.cart-v2 .cartinfo__link a {
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {
    .cart-v2 .cartinfo__row {
        grid-template-columns: 1fr;
        gap: .1rem;
    }
}