/**
 * Pagina coșului, sub 767px.
 *
 * Vezi class-cart-page.php pentru măsurători și pentru de ce e doar CSS.
 * Pe scurt: `shop_table_responsive` transformă fiecare celulă într-un rând,
 * cu eticheta scrisă din `data-title`. Șase celule per produs = șase rânduri
 * și patru etichete repetate. Aici cele șase celule se așază într-o grilă de
 * trei rânduri, aceeași anatomie ca rândul din sertarul lateral: poza la
 * stânga, denumirea sus, cantitatea și totalul jos.
 *
 * Culorile sunt ale temei — griuri reci (#e4e4e8, #6b6b70), cerneala
 * #1a1a1a. Nicio paletă nouă.
 */

@media (max-width: 767px) {

    /* Tabelul nu mai are nevoie de chenar propriu: rândurile devin carduri. */
    .woocommerce-cart .woocommerce-cart-form__contents {
        border: 0;
        margin: 0 0 18px;
    }

    .woocommerce-cart .woocommerce-cart-form__contents thead {
        display: none;
    }

    /* ── Un produs, un card ───────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item {
        position: relative;
        display: grid;
        /* A treia coloană e dictată de totalul pe linie („1.134,00 lei"),
           deci denumirea trebuie să se întindă peste ea — altfel primește
           81px și se rupe pe verticală, câte o silabă pe rând. Văzut la
           330px. Ștergerea iese din grilă, sus-dreapta, ca să nu-și ceară
           propria coloană. */
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "poza nume      nume"
            "poza pret      pret"
            "poza cantitate total";
        align-items: start;
        column-gap: 12px;
        row-gap: 6px;
        margin: 0;
        /* Culoarul din dreapta e rezervat ștergerii. 44px, nu 26, fiindcă
           atâta măsoară ținta ei de atingere — vezi mai jos. */
        padding: 14px 44px 14px 0;
        /* Tema desenează un chenar închis de jur împrejurul rândului, tot cu
           `!important`. Un card cu contur negru la fiecare produs face pagina
           să pară un formular; rămâne o singură linie subțire între produse,
           în griul rece al temei. */
        border: 0 !important;
        border-bottom: 1px solid #e4e4e8 !important;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item:first-child {
        padding-top: 0;
    }

    /* Etichetele „Produs / Preț / Cantitate / Sub-total" se sting: într-un
       rând compact poziția spune deja ce e fiecare, iar repetate de cinci ori
       sunt jumătate din înălțimea paginii. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td::before {
        content: none;
    }

    /* `!important` aici NU e lene.
    
       `woocommerce-smallscreen.css` scrie `text-align: right !important` pe
       fiecare celulă, iar tema adaugă padding și chenar cu aceeași armă.
       Sunt fișiere ale WooCommerce și ale temei, pe care nu le atingem — o
       declarație normală, oricât de specifică, nu bate un `!important`.
       Singura cale e aceeași armă, pe un selector îngust: doar rândurile de
       produs, doar sub 767px. Măsurat în browser: fără ele, textul rămâne
       aliniat la dreapta și celulele își păstrează 15px sus și 20px stânga. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td {
        display: block;
        width: auto;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Denumirea e bloc; altfel varianta și reducerea, fiind inline, se
       împletesc cu ea: „Pătură lână VIRGINĂ - / Discount: Tirol Olive". */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name > a {
        display: block;
    }

    /* Varianta aleasă și reducerea vin ca <dl class="variation"> cu dt/dd.
       Fiecare pereche pe rândul ei ar adăuga patru linii per produs; aici
       perechea stă pe un rând, iar lista e un bloc sub denumire. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation {
        display: block;
        margin: 3px 0 0;
        padding: 0;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.45;
        color: #6b6b70;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt {
        display: inline;
        margin: 0 4px 0 0;
        padding: 0;
        font-weight: 400;
        clear: none;
        float: none;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd {
        display: inline;
        margin: 0;
        padding: 0;
        float: none;
    }

    /* Fiecare pereche dt+dd pe rândul ei, fără <br> în markup. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt:not(:first-of-type)::before {
        content: "";
        display: block;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation p {
        display: inline;
        margin: 0;
    }

    /* ── Poza ─────────────────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail {
        grid-area: poza;
        align-self: start;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail img {
        display: block;
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 6px;
        margin: 0;
    }

    /* ── Denumirea ────────────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name {
        grid-area: nume;
        font-size: 13px;
        line-height: 1.35;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a {
        color: #1a1a1a;
        text-decoration: none;
        font-weight: 600;
    }

    /* Reducerea, dacă există, e o notă sub denumire — nu un rând de tabel. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name .avatex-cart-discount,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name small,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name .variation {
        display: block;
        margin-top: 3px;
        font-size: 11.5px;
        font-weight: 400;
        color: #6b6b70;
    }

    /* ── Prețul unitar ────────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price {
        grid-area: pret;
        font-size: 12px;
        color: #6b6b70;
    }

    /* ── Cantitatea ───────────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity {
        grid-area: cantitate;
        align-self: center;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity {
        margin: 0;
        float: none;
        max-width: 108px;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity input.qty {
        max-width: 100%;
        height: 44px;
        border-radius: 6px;
    }

    /* ── Totalul pe linie ─────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
        grid-area: total;
        align-self: center;
        text-align: right;
        font-weight: 700;
        font-size: 14px;
        color: #1a1a1a;
        white-space: nowrap;
    }

    /* ── Ștergerea ────────────────────────────────────── */

    /* Era o pictogramă de 17px fără niciun spațiu în jur, adică sub jumătate
       din pragul de 44px. Cazul cel mai prost din pagină: mică și
       ireversibilă, deci greșeai în ambele sensuri — o ratai când o voiai și
       o nimereai când nu.

       Pictograma rămâne 17px; crește doar suprafața din jurul ei, până la
       44×44, în culoarul de 44px rezervat mai sus. Rândul nu se înalță:
       cutia e poziționată absolut, deci nu intră în grilă. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove {
        position: absolute;
        top: 2px;
        right: 0;
        text-align: right;
    }

    /* Tema desenează o pictogramă în `::before`, iar WooCommerce lasă și
       textul „×" — două semne de ștergere unul peste altul. Rămâne
       pictograma: textul se stinge cu `font-size: 0`, iar pseudo-elementul
       își primește mărimea înapoi. */
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 0;
        line-height: 1;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove::before {
        font-size: 17px;
        color: #6b6b70;
    }

    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove:hover::before {
        color: #9e0b0f;
    }

    /* ── Rândul cu cuponul și „Actualizează coșul" ────── */
    /* Flex, nu `block`. Motivul e de măsurătoare, nu de stil: cele două
       butoane de întreținere erau `inline-block` cu `calc(50% - 5px)`, iar
       între două cutii inline HTML-ul mai pune un spațiu de vreo 4px. 50% −
       5 + 6 margine + 4 spațiu depășește rândul, deci al doilea buton cădea
       dedesubt. Într-un container flex spațiul alb dintre copii nu mai
       există, iar `gap` ține distanțele. */
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 8px;
        padding: 14px 0 0;
        border: 0;
        text-align: left;
    }

    /* Tema pune un `:after` cu `content: ''` pe `td.actions`, ca să curețe
       float-urile. Într-un container flex un pseudo-element cu conținut
       devine copil flex: un al treilea element gol, care mai mănâncă un
       `gap`. Float-urile oricum nu mai există aici. */
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions::after {
        display: none;
    }

    /* Cuponul e motivul pentru care pagina merită păstrată: aici se aplică
       CASA10 și tot aici se vede reducerea scăzută din total. Deci intră pe
       un rând, nu pe trei.

       `!important` pe `flex` și `width`: tema dă inputului o lățime fixă de
       290px, iar la 330px ecran asta forțează butonul pe rândul următor.
       Măsurat: rândul trecea de la 44px la 130px. Eticheta e
       `screen-reader-text`, deci rămâne unde e — placeholder-ul o dublează
       vizual, cititoarele de ecran o citesc pe ea. */
    /* Selectorul e lung fiindcă trebuie. Tema scrie
       `.woocommerce-cart table.cart td.actions .coupon`, adică (0,4,3), iar
       foile ei se încarcă DUPĂ ale noastre — verificat în HTML-ul paginii:
       cart-page.css la octetul 17628, drile/style.css la 22454,
       uploads/drile.css la 23613. La egalitate câștigă tema, deci aici e
       nevoie de (0,5,4), nu de (0,3,1) cât era. Fără asta rămâneau ale temei
       `flex-flow: row wrap` și `align-items: flex-end`. */
    .woocommerce-cart table.cart td.actions div.coupon {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        float: none;
        /* Rândul lui, întreg; distanța până la butoane o dă `gap`-ul
           containerului, nu o margine proprie. */
        flex: 1 0 100%;
        width: auto;
        margin: 0;
    }

    .woocommerce-cart td.actions .coupon .input-text {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
        margin: 0;
    }

    .woocommerce-cart td.actions .coupon .button {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0;
        white-space: nowrap;
        font-size: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Înălțimea. Cuponul e singurul loc din coș unde se scrie ceva cu
       degetul, iar câmpul și butonul lui stăteau la 36px.

       Selectorul e mai lung decât ar părea nevoie fiindcă tema desenează
       butonul din `dynamic_style.php` cu
       `.woocommerce-cart table.cart td.actions .coupon button`, adică
       (0,4,3). Cele de mai sus sunt (0,4,1) și pierd — de-acolo vin și
       `!important`-urile de pe `flex` și `width`. Aici urcăm la (0,5,3) și
       câștigăm curat, fără încă o armă. */
    .woocommerce-cart table.cart td.actions .coupon input.input-text {
        height: 44px;
        border-radius: 6px;
    }

    .woocommerce-cart table.cart td.actions .coupon button.button {
        min-height: 44px;
        border-radius: 6px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    /* „Actualizează coșul" și „Golește coșul" sunt acțiuni de întreținere,
       nu drumul înainte: împart un rând și rămân pe contur.

       Împart rândul cu `flex: 1 1 0`, nu cu un procent: baza flexibilă de
       zero bate orice lățime pe care ar pune-o tema, inclusiv una cu
       `!important`, fiindcă pentru un copil flex `flex-basis` are
       întâietate în fața lui `width`. */
    /* `tr:not(.cart_item)` în selector nu e de decor. „Actualizează coșul"
       e DEZACTIVAT până schimbi o cantitate, iar tema are o regulă pentru
       butoane dezactivate (`.woocommerce button.button:disabled`, 0,4,1)
       care îi dădea 26px padding lateral. Butonul se rupea pe două rânduri
       la 390px și urca la 68px. Măsurat la 390 și 360px. Aici (0,5,3). */
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) td.actions > .button {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        border-radius: 6px;
        width: auto !important;
        margin: 0;
        font-size: 12px;
        letter-spacing: 0.02em;
        padding-left: 6px;
        padding-right: 6px;
        /* „ACTUALIZEAZĂ COȘUL" se rupea în „ACTUALIZEA / ZĂ COȘUL". */
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    /* Cele două acțiuni de întreținere sunt azi exact inverse una alteia:
       tema desenează „Actualizează coșul" plin și „Golește coșul" pe contur,
       iar la hover le schimbă între ele (`dynamic_style.php`, cele două
       grupuri de culoare). Rezultatul e că două butoane cu aceeași greutate
       arată diferit, iar cel plin concurează cu „Finalizează comanda".

       Aici amândouă stau pe contur, în negrul temei (#202020, nu al nostru —
       n-are rost să introducem o a doua cerneală într-un buton pe care
       tema îl mai atinge). Finalizarea rămâne singurul buton plin.

       Specificitate: regula temei e (0,3,1); asta e (0,4,2). */
    .woocommerce-cart td.actions > button.button[name="update_cart"],
    .woocommerce-cart td.actions > button.button[name="update_cart"]:disabled {
        background-color: #fff;
        color: #202020;
        border: 1px solid #202020;
    }

    /* Odată mutat reperul, și hover-ul trebuie întors, altfel apăsarea nu
       mai arată nimic. Poarta `hover: hover` e din același motiv ca peste
       tot: pe telefon starea ar rămâne lipită după atingere. */
    @media (hover: hover) and (pointer: fine) {
        .woocommerce-cart td.actions > button.button[name="update_cart"]:hover {
            background-color: #202020;
            color: #fff;
            border-color: #202020;
        }
    }

    /* ── Totalurile ───────────────────────────────────── */
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart_totals {
        width: 100%;
        float: none;
        margin: 0;
    }

    .woocommerce-cart .cart_totals table.shop_table th,
    .woocommerce-cart .cart_totals table.shop_table td {
        padding: 9px 0;
        font-size: 13px;
    }

    .woocommerce-cart .wc-proceed-to-checkout {
        padding: 12px 0 0;
    }
}

@media (max-width: 767px) {

    /* Antetul paginii: tema îi dă marginile de desktop. */
    .woocommerce-cart .woocommerce-cart-form {
        margin-bottom: 0;
    }

    .woocommerce-cart .cart-collaterals h2,
    .woocommerce-cart .cart_totals h2 {
        font-size: 15px;
        margin: 0 0 10px;
    }

    /* Butonul de finalizare e singurul plin din pagină — aceeași regulă ca
       în sertar. Îl facem cât rândul, ca să fie ținta evidentă.

       Specificitate: tema scrie `.wc-proceed-to-checkout a.button.checkout-button`,
       adică (0,3,1), la egalitate cu ce era aici înainte; `a.button` în plus
       urcă la (0,4,1) și taie dependența de ordinea foilor. */
    .woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        border-radius: 6px;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────
   Navigarea din tastatură
   ─────────────────────────────────────────────────────────
   În afara media query-ului dinadins: pe desktop e la fel de necesar.
   Tema stinge conturul implicit și nu pune nimic în loc, deci fără asta
   cine parcurge coșul cu Tab nu vede unde a ajuns. Decalajul de 2px scoate
   inelul în afara butonului, deci se vede și pe cel plin. */
.woocommerce-cart td.actions button.button:focus-visible,
.woocommerce-cart td.actions .coupon .input-text:focus-visible,
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove a.remove:focus-visible,
.woocommerce-cart table.shop_table_responsive tr.cart_item input.qty:focus-visible,
.woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────
   v1.40.13 — pe toate lățimile
   ───────────────────────────────────────────────────────── */

/* „Actualizează coșul" pe contur și pe desktop. Pe telefon e așa din
   1.40.9; pe desktop rămăsese blocul gri plin al temei pentru butoane
   dezactivate — mai greu vizual decât „Șterge tot" de lângă el, deși e
   o acțiune care nici nu se poate apăsa încă. Cât e dezactivat, conturul
   și textul se sting în gri, ca să se vadă că așteaptă o schimbare. */
.woocommerce-cart td.actions > button.button[name="update_cart"],
.woocommerce-cart td.actions > button.button[name="update_cart"]:disabled {
    background-color: #fff;
    color: #202020;
    border: 1px solid #202020;
    opacity: 1;
}

.woocommerce-cart td.actions > button.button[name="update_cart"]:disabled,
.woocommerce-cart td.actions > button.button[name="update_cart"][disabled] {
    color: #6b6b70;
    border-color: #c9c9cf;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .woocommerce-cart td.actions > button.button[name="update_cart"]:not(:disabled):hover {
        background-color: #202020;
        color: #fff;
        border-color: #202020;
    }
}

/* Rândul de livrare din totaluri: un singur rând, ca „Total" de sub el.
   Tema randa „Livrare", apoi metoda pe rândul următor, apoi „Opțiunile de
   livrare vor fi actualizate la finalizare." — trei rânduri pentru o
   singură informație. Nota dispare: în coș nu există nimic de actualizat,
   iar suma reală se vede oricum la checkout. */
/* Specificitate: tema scrie `.cart-collaterals .cart_totals table.shop_table
   tbody td` (0,3,3) cu `display: block`; aici (0,5,4). */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tbody tr.woocommerce-shipping-totals td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Eticheta „Livrare" e un `::before` al celulei (tema ascunde `th`), cu
   `display: block` și 15px dedesubt (`tr.shipping td::before`) — de aceea
   suma cădea pe rândul următor. */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tbody tr.woocommerce-shipping-totals td::before {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    float: none;
}

.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals #shipping_method {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination {
    display: none;
}

.avatex-ship-free {
    color: #1a7f43;
    font-weight: 600;
}