/* ============================================================
   COȘUL PE CALCULATOR (#cosLateral), DE LA 1024 PX
   Owner, 17.10.2026 seara: „nu e lat cât tot ecranul. mărește textele. mărește cel mai mult imaginile. insistă pe recenzii, pe cross-sell
   și add-ons, că ești pe desktop, strict pe desktop, și ai mult spațiu” + „obligatoriu … totul să fie pe un singur ecran, fără niciun
   scroll, nici vertical, nici orizontal. Cu cât e de mare spațiul, omul să vadă tot din prima.”
   Owner, 17.10.2026 noaptea: „îmi place noul concept de coș lateral dreapta, dar îl vreau full screen” + „pe pagina finalizează (formularul
   «Detalii livrare») are scroll vertical. am zis interzis complet. fă full screen și împarte tot acolo să nu fie scroll” + „vreau să aibă
   buton mare de CTA vizibil, sub el să apară și nr. de recenzii și ratingul meu ca firmă” + „mi se pare lent când dau să intru în coș …
   iar când dau X la coș, iar e delay de animație”.

   Legat din _Layout.cshtml cu media="(min-width: 1024px)" și, aici, totul stă în @media (min-width: 1024px): telefonul (~90% din
   vânzări) și tableta nu primesc nimic. Scripturile (cart-ui.js, checkout-system.js, sidebar-manager.js) NU se schimbă: doar așezarea,
   pe aceleași elemente. Singurul element nou din _Sidebars.cshtml e rândul cu nota firmei (.cos-nota-firma), ascuns sub 1024 px.
     • panoul: pe TOT ecranul (fără margini, fără colțuri), alb, acoperă complet site-ul; apare și dispare INSTANT (fără slide, fără fade);
     • în coș (pasul 1), două coloane:
         stânga  — produsele (poze mari), cadoul, totalul, transportul, „Finalizează comanda” și nota firmei sub el;
         dreapta — recenzia (citatul), garanțiile, „Coletul tău”, apoi „Produse recomandate” ca rând de carduri cu poze mari;
     • în formular (pasul 2), trei coloane: Persoană fizică / Firmă + contactul | adresa | livrarea și plata („Schimbă”), sumarul, codul
       promo, totalul și butonul MARE de comandă, cu nota firmei și „Garanția 200% · Retur 30 de zile” sub el. „Schimbă”, sumarul și
       codul promo se deschid ca strat peste coloana a treia, fără să împingă nimic. Owner, 18.10.2026: „să fie centrat în cart lateral
       dreapta desktop total de plată și buton CTA. poți arăta și 1-2 reviewuri, că tot ai spațiu pe acel ecran” — totalul și butonul
       stau la mijlocul locului liber din coloana a treia (nu lipite jos), iar dedesubt, 1–2 recenzii reale, cât încap întregi;
     • confirmarea, tot în trei coloane;
     • mărimile cresc cu ecranul (clamp + vh / vw); pe ecranele foarte late conținutul stă centrat (cel mult ~1760 px).
   Nicio derulare, nici în pagină, nici în panou (verificat cu barele browserului scăzute: 1280×650, 1366×657, 1440×790, 1536×730,
   1600×790, 1920×960, 1366×768, 1440×900, 1920×1080); cu multe produse se derulează doar lista lor.
   Elemente noi în _Sidebars.cshtml, ambele ascunse sub 1024 px: rândul cu nota firmei (.cos-nota-firma, 17.10) și recenziile din
   formular (.cos-recenzii-formular, 18.10).
   Selectoarele au „body #cosLateral” în față: fișierul e în <head>, iar stilul din _Sidebars.cshtml și _checkout-rapid.css vin mai jos.
   ============================================================ */
@media (min-width: 1024px) {

    /* ---------- 0) FĂRĂ ANIMAȚIE: coșul apare și dispare dintr-o dată ----------
       Înainte: panoul aluneca 50 ms, iar fundalul întunecat (#overlaySidebar, 0,3 s în _Sidebars.cshtml) se aprindea și se stingea încet:
       ~370 ms de la clic până la coșul gata și ~360 ms de la X până la pagina curată. Acum panoul acoperă tot ecranul, deci fundalul n-are
       ce arăta: cât e coșul deschis, e display: none (e fratele imediat următor al #cosLateral), iar la închidere nu are de la ce să se
       stingă (o tranziție nu pornește dintr-un element nedesenat). Meniul din stânga își păstrează fundalul și animația lui.
       sidebar-manager.js rămâne cum e: „active” se pune în requestAnimationFrame (rulează înaintea desenării cadrului următor), iar
       `hidden` după 50 ms, când panoul e deja în afara ecranului, fără tranziție. */
    body #cosLateral.sidebar.right-sidebar,
    body #cosLateral .cart-content-wrapper,
    body #cosLateral #cart-view,
    body #cosLateral #checkout-view,
    body #cosLateral #confirmation-view,
    body #cosLateral .person-form,
    body #cosLateral .order-summary-content,
    body #cosLateral .optional-details-content {
        transition: none !important;
    }

    body #cosLateral.active ~ #overlaySidebar {
        display: none !important;
    }

    /* ---------- 1) PANOUL: pe tot ecranul ---------- */
    body #cosLateral.sidebar.right-sidebar {
        --cos-px: max(clamp(20px, 2.2vw, 44px), calc((100vw - 1760px) / 2));   /* marginea conținutului, stânga / dreapta */
        --cos-gol: clamp(10px, 1.5vh, 16px);                                    /* spațiul dintre blocuri */
        --cos-col-gol: clamp(24px, 2.6vw, 48px);                                /* între cele două coloane ale coșului */
        --f-gol: clamp(20px, 2.2vw, 44px);                                      /* între cele trei coloane ale formularului */
        --f-buton: clamp(58px, 8vh, 72px);                                      /* butonul de comandă din formular */
        --f-subsol: calc(var(--f-buton) + 66px);                                /* butonul + nota firmei + garanția */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden !important;
        /* închis (cât mai stă până la `hidden`): în afara ecranului, fără tranziție */
        transform: translateX(100%);
    }

        body #cosLateral.sidebar.right-sidebar.active {
            transform: none;
        }

    body #cosLateral .cart-content-wrapper {
        position: relative;   /* subsolul formularului (butonul de comandă) se așază față de panou */
        box-sizing: border-box !important;
        height: 100% !important;
        padding: 0 !important;
    }

    /* ---------- 2) ANTETUL („Coșul tău APACKS” / „Detalii livrare”, „Continuă”, ✕), aliniat cu coloanele ---------- */
    body #cosLateral .cart-header-dreapta {
        flex: 0 0 auto;
        padding-left: var(--cos-px) !important;
        padding-right: var(--cos-px) !important;
    }

    body #cosLateral:not(.checkout-active):not(.confirmation-active) .cart-header-dreapta {
        gap: 16px !important;
        padding-top: clamp(8px, 1.4vh, 14px) !important;
        padding-bottom: clamp(8px, 1.4vh, 14px) !important;
    }

    body #cosLateral .cart-header-dreapta-title {
        font-size: clamp(18px, 1.25vw, 22px) !important;
        line-height: 1.35 !important;   /* pictograma coșului nu se mai taie jos (titlul are overflow: hidden) */
    }

    /* ✕ la mijlocul antetului: regula generală a butoanelor de închidere (_Sidebars.cshtml, a meniului) îl urcă 15 px, iar fără marginea
       de sus a panoului ar fi ieșit din ecran. */
    body #cosLateral .cart-header-dreapta .btn-close-sidebar {
        transform: none !important;
    }

    body #cosLateral:not(.checkout-active):not(.confirmation-active) .cart-header-dreapta .header-pay-btn {
        width: auto !important;
        min-height: 44px;
        padding: 10px 22px !important;
        font-size: 15px !important;
    }

    /* ---------- 3) ÎN COȘ: două coloane pe toată înălțimea ecranului ---------- */
    body #cosLateral:not(.checkout-active):not(.confirmation-active) .checkout-scroll-container {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: var(--cos-gol) var(--cos-px) !important;
        overflow-x: hidden !important;
    }

    /* Coloanele împart rândurile: rândul 4 (minmax(0, 1fr)) ia tot spațiul liber. Lista de produse (stânga) acoperă rândurile 1–4,
       recomandările (dreapta) rândurile 4–6, deci cele două coloane cresc independent: stânga = produse + cadou + finalizare,
       dreapta = citat + garanții + colet + recomandări. Un rând gol (colet ascuns, fără citat) are 0 px: spațiile sunt margini, nu gap. */
    body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) {
        flex: 1 1 auto;
        min-height: 0;
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "produse citat"
            "produse incredere"
            "produse colet"
            "produse recomandate"
            "cadou   recomandate"
            "final   recomandate";
        column-gap: var(--cos-col-gol);
        row-gap: 0;
        align-items: start;
    }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-items-container {
            grid-area: produse;
            align-self: stretch;
            min-height: 0;
            margin: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-cadou {
            grid-area: cadou;
            margin: var(--cos-gol) 0 0;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-finalizare {
            grid-area: final;
            margin: var(--cos-gol) 0 0;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-citat-loc {
            grid-area: citat;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-trust-signals-section {
            grid-area: incredere;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-colet {
            grid-area: colet;
            margin: var(--cos-gol) 0 0;
        }

        body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) > .cart-upsell-section {
            grid-area: recomandate;
            align-self: stretch;
            min-height: 0;
            margin: var(--cos-gol) 0 0;
        }

    /* ---------- 4) PRODUSELE DIN COȘ: poze mari; lângă poză, numele sus și − 1 + dedesubt; în dreapta totalul și 🗑 ----------
       Poza ia cât loc lasă pe ecran antetul, cadoul, totalul, butonul și nota firmei (~520 px din înălțimea ferestrei), împărțit la
       numărul de produse (un rând = poza + ~21 px, lista are ~13 px în plus), ca 1–4 produse să încapă fără derulare: 1 produs
       96–300 px, 2 produse 76–210 px, 3 produse 64–150 px, 4 produse 56–120 px; de la 5 produse 56 px și se derulează doar lista. Poza
       are cel mult 42% din rând, ca numele și − 1 + să aibă mereu loc lângă ea. Pe ecranele scunde, de la 4 produse (sub 820 px
       înălțime) și de la 3 produse (sub 720 px), fiecare produs stă pe o linie (secțiunile de la final). */
    body #cosLateral .cart-items-container {
        --cos-poza: clamp(96px, calc(100vh - 540px), 300px);
    }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item) {
            --cos-poza: clamp(76px, calc(50vh - 292px), 210px);
        }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) {
            --cos-poza: clamp(64px, calc(33.3vh - 202px), 150px);
        }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) {
            --cos-poza: clamp(56px, calc(25vh - 160px), 120px);
        }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item ~ .cart-item) {
            --cos-poza: 56px;
        }

        body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) {
            grid-template-columns: min(var(--cos-poza), 42%) minmax(0, 1fr) auto;
            grid-template-areas:
                "poza nume      total"
                "poza cantitate total";
            column-gap: clamp(12px, 1.2vw, 20px);
            row-gap: 6px;
            align-items: center;
            align-content: center;
            padding-top: clamp(6px, 1vh, 10px);
            padding-bottom: clamp(6px, 1vh, 10px);
        }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) > .cart-link-poza,
            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) > .cart-item-image {
                grid-area: poza;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) > .cart-link-poza {
                width: 100%;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-image {
                width: 100% !important;
                height: auto !important;
                min-width: 0 !important;
                max-width: 100% !important;
                aspect-ratio: 1 / 1;
                border-radius: 12px;
                object-fit: contain;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-details {
                display: contents;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-name {
                grid-area: nume;
                align-self: end;
                margin: 0;
                font-size: clamp(16px, 1.15vw, 19px);
                font-weight: 700;
                line-height: 1.25;
            }

            /* prețul pe bucată e ascuns pe tot site-ul (cart.css); dacă reapare, stă sub nume */
            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-price {
                grid-area: nume;
                align-self: start;
                font-size: 15px;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-quantity-selector {
                grid-area: cantitate;
                align-self: start;
                justify-self: start;
                margin: 0;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-quantity-value {
                min-width: 32px;
                font-size: 17px;
                text-align: center;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .cart-item-total {
                grid-area: total;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
            }

            body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) .item-total-price {
                font-size: clamp(17px, 1.2vw, 20px);
                font-weight: 700;
                white-space: nowrap;
            }

    /* coșul gol: mesajul și „Explorează produsele”, mai mari */
    body #cosLateral .empty-cart-message {
        padding-top: clamp(24px, 6vh, 64px);
    }

        body #cosLateral .empty-cart-message > div:first-child {
            font-size: 48px;
        }

        body #cosLateral .empty-cart-message h4 {
            font-size: 22px;
        }

        body #cosLateral .empty-cart-message p {
            font-size: 16px;
        }

        body #cosLateral .empty-cart-message a {
            min-height: 44px;
            padding: 12px 22px;
            font-size: 15px;
        }

    /* coletele pline și pachetele vechi își păstrează așezarea; doar textul crește */
    body #cosLateral .cart-items-container .cart-item-colet,
    body #cosLateral .cart-items-container .cart-package-header {
        font-size: 15px;
    }

    /* ---------- 5) CADOUL: caseta strânsă într-un rând, deasupra totalului ----------
       Deschisă (alegerea, numele / telefonul / emailul, termenii, „Vreau cadoul”), se ridică PESTE lista de produse, lipită de rândul ei, în
       loc să împingă totalul și butonul în jos: coșul nu capătă derulare și nimic nu sare. Pe ecranul întreg se întinde pe AMBELE coloane
       (130% din lățimea coloanei din stânga + spațiul dintre coloane = cât coloana din dreapta, 1.3fr): alegerea și cele trei câmpuri stau pe
       un rând, termenii pe două, „Vreau cadoul” lângă acord. În coloana din stânga singură caseta avea ~320 px și, la 1366×657, se derula. */
    body #cosLateral .cart-cadou {
        position: relative;
        font-size: 15px;
    }

    body #cosLateral .cart-cadou__antet {
        min-height: 52px;
        padding: 8px 14px;
    }

    body #cosLateral .cart-cadou__titluri strong {
        font-size: 16px;
    }

    body #cosLateral .cart-cadou__sageata {
        font-size: 16px;
    }

    body #cosLateral .cart-cadou__corp:not([hidden]) {
        position: absolute;
        left: -1px;
        right: calc(-130% - var(--cos-col-gol) - 3px);
        bottom: calc(100% - 8px);
        z-index: 6;
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
        column-gap: clamp(12px, 1.2vw, 20px);
        row-gap: 8px;
        align-items: start;
        /* cel mult cât e între antetul coșului și rândul cadoului (antetul, caseta cu totalul și nota, marginile: ~410 px) */
        box-sizing: border-box;
        max-height: calc(100vh - 410px);
        overflow-y: auto;
        padding: 12px 16px 10px;
        border: 1px solid #fcd34d;
        border-radius: 12px;
        background: #fffbeb;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
    }

        body #cosLateral .cart-cadou__corp:not([hidden]) > * {
            grid-column: 1 / -1;
            margin: 0;
        }

        /* pasul 1: alegerea în stânga, numele / telefonul / emailul lângă ea; termenii dedesubt; „Vreau cadoul” cu acordul lângă el */
        body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__alegere {
            grid-column: 1;
            grid-row: 1;
        }

        body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__camp {
            grid-column: auto;
            grid-row: 1;
        }

        body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__termeni {
            grid-row: 2;
        }

        body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__buton {
            grid-column: 1;
            grid-row: 3;
        }

        body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__acord {
            grid-column: 2 / -1;
            grid-row: 3;
            align-self: center;
        }

    body #cosLateral .cart-cadou--gata .cart-cadou__corp:not([hidden]) {
        border-color: #a7f3d0;
        background: #ecfdf5;
    }

    /* cele două cadouri, unul lângă altul */
    body #cosLateral .cart-cadou__alegere {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
    }

        body #cosLateral .cart-cadou__alegere legend {
            grid-column: 1 / -1;
            margin-bottom: 2px;
        }

    body #cosLateral .cart-cadou__optiune {
        font-size: 15px;
    }

    body #cosLateral .cart-cadou__acord {
        font-size: 14px;
    }

    body #cosLateral .cart-cadou__termeni {
        font-size: 13px;
        line-height: 1.4;
    }

    /* pasul cu codul: textul sus, apoi câmpul codului, „Confirmă” și „Retrimite” / „Schimbă datele” pe un rând, nota dedesubt */
    body #cosLateral .cart-cadou__corp:not([hidden]) > .cart-cadou__pas-cod:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2fr);
        column-gap: clamp(12px, 1.2vw, 20px);
        row-gap: 6px;
        align-items: end;
    }

        body #cosLateral .cart-cadou__pas-cod:not([hidden]) > .cart-cadou__cod-unde,
        body #cosLateral .cart-cadou__pas-cod:not([hidden]) > .cart-cadou__nota-cod {
            grid-column: 1 / -1;
            margin: 0;
        }

        body #cosLateral .cart-cadou__pas-cod:not([hidden]) > .cart-cadou__camp--cod,
        body #cosLateral .cart-cadou__pas-cod:not([hidden]) > .cart-cadou__buton,
        body #cosLateral .cart-cadou__pas-cod:not([hidden]) > .cart-cadou__cod-actiuni {
            margin: 0;
        }

    body #cosLateral .cart-cadou__nota-cod {
        font-size: 13px;
    }

    /* ---------- 6) FINALIZAREA: totalul, transportul, pragul, plata, butonul și nota firmei, într-o casetă ---------- */
    body #cosLateral #cart-view > .cart-finalizare {
        padding: clamp(10px, 1.6vh, 16px) clamp(14px, 1.3vw, 20px) !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px;
        background: #f9fafb !important;
        box-shadow: none;
    }

    body #cosLateral .cart-finalizare .cart-subtotal-checkout {
        font-size: clamp(18px, 1.3vw, 21px);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body #cosLateral .cart-finalizare .cart-subtotal-checkout-transport {
        font-size: 16px;
        margin-bottom: 2px;
    }

    body #cosLateral #cart-finalizare .cart-reducere-pachet,
    body #cosLateral #cart-finalizare #cart-transport-value.cart-transport-later,
    body #cosLateral #cart-finalizare .cart-transport-saci,
    body #cosLateral #cart-finalizare .cart-in-aplicatie-nota {
        font-size: 15px;
    }

    body #cosLateral #cart-finalizare .cart-prag .progress-text-content,
    body #cosLateral #cart-finalizare #cartProgressText {
        font-size: 15px !important;
    }

    body #cosLateral .cart-finalizare .cart-prag .progress-track {
        height: 6px !important;
        border-radius: 3px !important;
    }

    body #cosLateral .cart-completare {
        min-height: 48px;
        margin-bottom: 6px;
    }

        body #cosLateral .cart-completare__poza {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        body #cosLateral .cart-completare__nume {
            font-size: 15px;
        }

        body #cosLateral .cart-completare__sub {
            font-size: 15px;
        }

        body #cosLateral .cart-completare__plus {
            padding: 8px 14px;
            font-size: 15px;
        }

    body #cosLateral #cart-finalizare .cart-plata-linie {
        margin: 2px 0 8px;
        font-size: 15px;
    }

    body #cosLateral #cart-finalizare .cart-plata-livrare {
        font-size: 17px;
    }

    body #cosLateral #cart-finalizare .cart-plata-livrare__icon {
        width: 22px;
        height: 22px;
    }

    body #cosLateral #cart-finalizare .cart-plata-alte {
        font-size: 14px;
    }

    body #cosLateral #go-to-checkout-btn.cart-finalizeaza-btn {
        min-height: clamp(54px, 7.5vh, 68px) !important;
        border-radius: 12px !important;
        font-size: clamp(19px, 1.45vw, 24px) !important;
    }

    /* ---------- 7) NOTA FIRMEI sub „Finalizează comanda” și sub butonul de comandă: ★★★★★ 4.9/5 · 341 de recenzii ----------
       Aceleași stele aurii ca în antet (.rio-stele, umplute cât nota), text de 15 px, gri închis pe alb / gri foarte deschis (~9:1). */
    body #cosLateral .cos-nota-firma {
        display: block;
        margin: 8px 0 0;
        font-size: 15px;
        line-height: 1.3;
        color: #374151;
        text-align: center;
        white-space: nowrap;
    }

        body #cosLateral .cos-nota-firma .rio-stele {
            margin-right: 6px;
            font-size: 17px;
        }

        body #cosLateral .cos-nota-firma b {
            font-weight: 700;
            color: #111827;
        }

    /* ---------- 8) DREAPTA SUS: recenzia (citatul), garanțiile, coletul ---------- */
    body #cosLateral .cart-citat {
        margin: 0;
        padding: clamp(12px, 1.8vh, 20px) clamp(16px, 1.4vw, 24px);
        border: 1px solid #fde68a;
        border-left: 4px solid #f59e0b;
        border-radius: 14px;
        background: #fffbeb;
    }

    body #cosLateral #cart-view .cart-citat-text {
        font-size: clamp(17px, 1.3vw, 22px);
        line-height: 1.4;
        color: #1f2937;
    }

    body #cosLateral #cart-view .cart-citat-autor {
        margin-top: 6px;
        font-size: 15px;
        color: #4b5563;
    }

    body #cosLateral .cart-citat-stele {
        font-size: 18px;
    }

    body #cosLateral #cart-view > .cart-trust-signals-section {
        margin: var(--cos-gol) 0 0 !important;
        padding: clamp(8px, 1.2vh, 12px) 12px !important;
        border-radius: 14px;
    }

    /* cele trei garanții: pictograma în stânga textului (un rând mai scund decât pictograma deasupra) */
    body #cosLateral #cart-view .cart-trust-item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 4px 6px;
        text-align: left;
    }

    body #cosLateral .cart-trust-text {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    body #cosLateral .cart-trust-icon {
        flex: 0 0 auto;
        margin: 0 !important;
        font-size: 22px !important;
    }

    body #cosLateral .cart-colet {
        padding: 10px 14px;
        font-size: 15px;
    }

    /* ---------- 9) PRODUSE RECOMANDATE: un rând de carduri cu poze mari și „Adaugă” ---------- */
    body #cosLateral #cart-view > .cart-upsell-section {
        display: flex !important;   /* cart-ui.js pune display: block / none în style; „none” rămâne „none” (regula de dedesubt) */
        flex-direction: column;
        padding: clamp(12px, 1.8vh, 20px) clamp(14px, 1.3vw, 20px) !important;
        border: 1px solid #e9ecef;
        border-radius: 14px;
        overflow: hidden;
    }

        body #cosLateral #cart-view > .cart-upsell-section[style*="display: none"] {
            display: none !important;
        }

    body #cosLateral .upsell-title {
        flex: 0 0 auto;
        margin: 0 0 clamp(8px, 1.2vh, 14px);
        font-size: clamp(18px, 1.3vw, 22px) !important;
        font-weight: 700;
        color: #111827;
    }

    /* Cardurile umplu înălțimea casetei (butoanele „Adaugă” stau la nivelul lui „Finalizează comanda”); poza ia tot locul rămas
       în card, cât lasă numele, prețul și butonul: pe ecranele scunde (1366×657) scade, pe cele înalte crește. */
    body #cosLateral .upsell-product-list {
        flex: 1 1 0;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: clamp(10px, 1vw, 16px);
    }

    body #cosLateral .upsell-product-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: clamp(8px, 0.8vw, 12px);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
    }

        /* Poza ia tot locul rămas în card (cât lasă numele, prețul și butonul): cu cât e mai înalt ecranul, cu atât e mai mare. */
        body #cosLateral .upsell-product-item .cart-link-poza {
            position: relative;
            display: block;
            flex: 1 1 0;
            align-self: stretch;
            width: 100%;
            min-height: clamp(90px, 15vh, 140px);
        }

    body #cosLateral .upsell-product-item .cart-link-poza .upsell-product-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border: 0;
        border-radius: 8px;
    }

    body #cosLateral .upsell-product-details {
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 4px;
    }

    body #cosLateral .upsell-product-header {
        flex-wrap: wrap;
        gap: 4px 6px;
    }

    body #cosLateral .upsell-product-name {
        font-size: clamp(15px, 1.05vw, 17px);
        font-weight: 700;
        line-height: 1.25;
    }

    body #cosLateral .upsell-product-badge {
        font-size: 14px !important;
    }

    body #cosLateral .upsell-product-pricing {
        margin: 0;
        gap: 8px;
    }

    body #cosLateral .upsell-product-price-new {
        font-size: clamp(17px, 1.2vw, 20px);
    }

    body #cosLateral .upsell-product-price-old {
        font-size: 15px;
    }

    body #cosLateral .upsell-product-controls {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Pe calculator, „Adaugă” pune o bucată, dintr-o apăsare (cantitatea se schimbă apoi în coș, cu − / +): fără selectorul de
       cantitate, cardul are loc de o poză mult mai mare. Câmpul rămâne în pagină (ascuns) cu valoarea 1, pe care o citește addUpsellToCart. */
    body #cosLateral .upsell-quantity-selector {
        display: none !important;
    }

    body #cosLateral .btn-add-upsell {
        flex: 1 1 100%;
        min-height: 44px;
        font-size: 15px;
        font-weight: 700;
    }

    /* ---------- 10) FORMULARUL („Detalii livrare”, pasul 2): trei coloane pe tot ecranul, fără derulare ----------
       stânga  — Persoană fizică / Firmă, apoi contactul (nume, telefon, email cu notițele lor; la firmă: denumire, CUI, persoana de contact);
       mijloc  — adresa (județ, localitate, stradă, cod poștal + „Nu știu codul poștal”);
       dreapta — livrarea și plata cu „Schimbă”, sumarul, codul promo; la mijlocul locului rămas, totalul și butonul MARE de comandă
       (cu nota firmei și garanția sub el); dedesubt, 1–2 recenzii reale (18.10.2026).
       GRILA E PANOUL ÎNSUȘI (18.10.2026): butonul de comandă (#checkout-sticky-footer) stă în pagină în afara formularului, ca frate al
       containerului de derulare (pe telefon e lipit jos). Ca să stea în aceeași coloană cu totalul, la mijloc, .cart-content-wrapper
       devine grila (antetul pe primul rând, pe toată lățimea), iar containerul de derulare, #checkout-view și #checkout-form sunt
       display: contents: bucățile lor (și butonul, și recenziile) se așază direct în grilă. Ordinea din pagină, id-urile și logica rămân
       aceleași; doar așezarea se schimbă, și doar de la 1024 px.
       Câmpurile persoanei (#form-fizica / #form-juridica) acoperă primele două coloane și se rup în două cu `columns` (contactul |
       adresa), fiecare coloană cu înălțimea ei (mesajele de eroare de sub câmpuri nu împing coloana vecină). */
    body #cosLateral.confirmation-active .checkout-scroll-container {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: var(--cos-gol) var(--cos-px) !important;
        overflow-x: hidden !important;
    }

    body #cosLateral.checkout-active .cart-content-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* antetul | sumar | cod promo | livrare + plată | cadourile comenzii | GOL | totalul | butonul (+ nota, garanția) | RECENZIILE.
           Cele două rânduri elastice (GOL și RECENZIILE) împart în mod egal locul rămas în coloana 3: totalul și butonul stau la mijlocul
           lui, oricât de înalt e ecranul. Coloanele 1–2 (câmpurile) acoperă toate rândurile de sub antet. */
        grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto minmax(0, 1fr);
        column-gap: var(--f-gol);
        align-items: start;
        padding: 0 var(--cos-px) var(--cos-gol) !important;
    }

        /* antetul („Detalii livrare”, „Finalizează”, ✕): pe toată lățimea panoului, peste marginile grilei */
        body #cosLateral.checkout-active .cart-content-wrapper > .cart-header-dreapta {
            grid-column: 1 / -1;
            grid-row: 1;
            margin: 0 calc(-1 * var(--cos-px)) var(--cos-gol) !important;
        }

    body #cosLateral.checkout-active .checkout-scroll-container {
        display: contents !important;
    }

    body #cosLateral.checkout-active #checkout-view:not([hidden]) {
        --f-tip: clamp(50px, 5.4vh, 58px);    /* înălțimea alegerii Persoană fizică / Firmă */
        --f-camp: clamp(46px, 5vh, 56px);     /* înălțimea câmpurilor */
        display: contents !important;
        transform: none !important;   /* translateX(0) din _checkout-rapid.css ar fi închis straturile „Schimbă” / sumar sub butonul de comandă */
    }

        body #cosLateral.checkout-active #checkout-view:not([hidden]) > #checkout-form {
            display: contents;
        }

        body #cosLateral.checkout-active #checkout-view:not([hidden]) > .person-type-selection {
            position: relative;
            z-index: 2;
            grid-column: 1;
            grid-row: 2 / -1;
            align-self: start;
            box-sizing: border-box;
            height: var(--f-tip);
            margin: 0 !important;
        }

            body #cosLateral.checkout-active #checkout-view:not([hidden]) > .person-type-selection > .person-type-option {
                box-sizing: border-box;
                min-height: 0 !important;
                height: 100%;
            }

        body #cosLateral.checkout-active #checkout-form > .person-form:not([hidden]) {
            grid-column: 1 / 3;
            grid-row: 2 / -1;
            align-self: stretch;
            min-height: 0;
            columns: 2;
            column-gap: var(--f-gol);
            column-fill: auto;
        }

            body #cosLateral.checkout-active #checkout-form > .person-form:not([hidden]) > * {
                break-inside: avoid;
            }

            /* coloana 1 începe sub Persoană fizică / Firmă */
            body #cosLateral.checkout-active #checkout-form > .person-form:not([hidden]) > .form-group:first-child {
                margin-top: calc(var(--f-tip) + 16px);
            }

            /* coloana 2 (adresa) începe sus, cu județul; la ridicarea personală checkout-system.js ascunde județul, localitatea și
               strada (style.display), iar codul poștal trece singur în coloana 2 */
            body #cosLateral.checkout-active #checkout-form > .person-form:not([hidden]) > .form-group:has(#checkout-county, #company-county),
            body #cosLateral.checkout-active #form-fizica:not([hidden]) > .form-group:has(#checkout-address)[style*="none"] + .form-group {
                break-before: column;
                margin-top: 10px;
            }

    /* câmpurile: 46 px la 650–730 px înălțime (ca să încapă firma, cu mesajele de eroare), până la 56 px pe ecranele înalte; eticheta
       stă la mijlocul câmpului cât e gol și urcă deasupra lui ca până acum */
    body #cosLateral.checkout-active #checkout-view .form-group {
        margin-bottom: clamp(10px, 1.5vh, 18px);
    }

        body #cosLateral.checkout-active #checkout-view .form-group input {
            min-height: var(--f-camp);
            padding-top: 10px;
            padding-bottom: 10px;
        }

        body #cosLateral.checkout-active #checkout-view .form-group:not(.has-value) > input:not(:focus):placeholder-shown + label {
            top: calc((var(--f-camp) - 21px) / 2);
        }

        body #cosLateral.checkout-active #checkout-view .form-group textarea {
            min-height: 62px;
            resize: none;
        }

    body #cosLateral.checkout-active #checkout-view .oferte-rand {
        margin: -4px 0 10px;
    }

    body #cosLateral.checkout-active #checkout-view .person-type-option {
        font-size: 16px !important;
    }

    /* coloana 3, de sus în jos: sumarul („Vezi sumar (3 produse) … LEI”) și codul promo (cele două care, deschise, au nevoie de cel mai
       mult loc: stau sus, ca stratul lor să aibă toată coloana sub ele), apoi livrarea și plata și cadourile comenzii; la mijlocul locului
       rămas, totalul și butonul de comandă; dedesubt, recenziile. Ordinea din pagină (tastatura, cititorul de ecran) rămâne cea din formular. */
    body #cosLateral.checkout-active #checkout-form > .order-summary-accordion {
        grid-column: 3;
        grid-row: 2;
        position: relative;
        margin: 0 !important;
    }

    body #cosLateral.checkout-active #checkout-form > .checkout-alegeri {
        grid-column: 3;
        grid-row: 4;
        position: relative;
        margin: var(--cos-gol) 0 0 !important;
        overflow: visible;
    }

    body #cosLateral.checkout-active #checkout-form > .optional-details-section {
        grid-column: 3;
        grid-row: 3;
        position: relative;
        margin: 6px 0 0;
    }

    body #cosLateral.checkout-active #checkout-form > .checkout-cadouri {
        grid-column: 3;
        grid-row: 5;
        margin: 6px 0 0;
    }

    /* totalul: primul din grupul de la mijloc (rândul 6, elastic, e golul de deasupra lui) */
    body #cosLateral.checkout-active #checkout-form > .payment-shipping-total-info.total-final {
        grid-column: 3;
        grid-row: 7;
        margin: var(--cos-gol) 0 0 !important;
    }

    body #cosLateral.checkout-active .checkout-alegere {
        position: relative;
    }

    body #cosLateral.checkout-active .checkout-alegere-eticheta {
        font-size: 13px;
    }

    body #cosLateral.checkout-active .checkout-alegere-valoare {
        font-size: 16px;
    }

    body #cosLateral.checkout-active .checkout-alegere-detaliu {
        font-size: 14px;
    }

    /* nota de sub email: pe un rând și la 13 px (coloana are loc) */
    body #cosLateral.checkout-active #checkout-view .form-nota--un-rand {
        font-size: 13px;
        letter-spacing: 0;
    }

    /* „Schimbă” (livrare / plată), sumarul și codul promo: se deschid ca strat PESTE coloana 3, chiar sub rândul lor (care rămâne vizibil,
       cu „Închide”), fără să împingă nimic în jos. Încap fără derulare; overflow-y: auto rămâne doar ca plasă de siguranță. */
    body #cosLateral.checkout-active .checkout-alegere > .delivery-method-selection:not([hidden]),
    body #cosLateral.checkout-active .checkout-alegere > .payment-method-selection:not([hidden]),
    body #cosLateral.checkout-active .order-summary-accordion > .order-summary-content:not([hidden]),
    body #cosLateral.checkout-active .optional-details-section > .optional-details-content:not([hidden]) {
        position: absolute;
        top: 100%;
        left: -1px;
        right: -1px;
        z-index: 30;
        box-sizing: border-box;
        margin: 0 !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0 0 12px 12px;
        background: #ffffff;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    }

    body #cosLateral.checkout-active .checkout-alegere > .delivery-method-selection:not([hidden]),
    body #cosLateral.checkout-active .checkout-alegere > .payment-method-selection:not([hidden]) {
        max-height: calc(100vh - 250px);
        padding: 12px !important;
    }

    body #cosLateral.checkout-active .checkout-alegere > .payment-method-selection:not([hidden]) {
        max-height: calc(100vh - 310px);
    }

    body #cosLateral.checkout-active .order-summary-accordion > .order-summary-content:not([hidden]) {
        max-height: calc(100vh - 150px) !important;
        padding: 12px 14px !important;
    }

    body #cosLateral.checkout-active .optional-details-section > .optional-details-content:not([hidden]) {
        max-height: calc(100vh - 180px) !important;
        padding: 2px 14px 12px !important;
    }

    body #cosLateral.checkout-active #optional-content .promo-code-title {
        margin-top: 10px !important;
        margin-bottom: 6px !important;
    }

    body #cosLateral.checkout-active #checkout-referral-note {
        margin-bottom: 8px !important;
    }

    body #cosLateral.checkout-active #checkout-mentions {
        min-height: 52px;
    }

    /* totalul, mare */
    body #cosLateral.checkout-active .total-final .total-amount {
        font-size: clamp(28px, 2.2vw, 36px);
    }

    body #cosLateral.checkout-active .total-final .order-total-compact .total-eticheta {
        font-size: 17px;
    }

    body #cosLateral.checkout-active .total-final .compact-info-item {
        font-size: 14px;
    }

    /* Subsolul (butonul de comandă, nota firmei, garanția): în coloana 3, chiar sub total — nu mai e lipit jos (18.10.2026). E o celulă a
       grilei, nu un strat: nimic nu stă sub el, iar straturile „Schimbă” / sumar / cod promo (z-index 30) trec peste el când se deschid. */
    body #cosLateral.checkout-active #checkout-sticky-footer.checkout-footer-sticky {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
        grid-column: 3;
        grid-row: 8;
        box-sizing: border-box;
        width: auto;
        margin: 12px 0 0;
        padding: 0 !important;
        border: 0;
        background: #ffffff;
        box-shadow: none;
    }

    /* ---------- 10b) RECENZIILE DIN FORMULAR (18.10.2026): sub butonul de comandă, în rândul elastic de jos al coloanei 3 ----------
       Cartonașele citatului din coș (.cart-citat), mai mici. Se arată DOAR cele care încap întregi: coloană flexibilă cu rupere
       (flex-wrap), lată cât coloana; un cartonaș care nu mai încape trece în a doua coloană, în afara casetei (overflow: hidden), deci
       nu se vede deloc, nici tăiat pe jumătate. ::before (înalt de 0) ține primul loc, ca și primul cartonaș să poată ieși dacă nu
       încape (pe ecranele scunde). Ce încape stă la mijlocul rândului. position: relative: textul pentru cititorul de ecran
       („5 din 5 stele”, .cart-vizual-ascuns, absolut) rămâne și el în casetă, nu lărgește panoul cu cartonașele ascunse. */
    body #cosLateral.checkout-active .cos-recenzii-formular {
        position: relative;
        grid-column: 3;
        grid-row: 9;
        align-self: stretch;
        box-sizing: border-box;
        min-height: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        gap: 10px 40px;
        overflow: hidden;
        padding-top: 8px;
    }

        body #cosLateral.checkout-active .cos-recenzii-formular::before {
            content: "";
            flex: 0 0 auto;
            width: 100%;
            height: 0;
            margin-bottom: -10px;   /* fără gap în plus deasupra primului cartonaș */
        }

        /* cartonașe strânse (text de 15 px, autorul pe un rând de 13 px), ca să încapă de la ecranele de ~950 px înălțime */
        body #cosLateral.checkout-active .cos-recenzii-formular > .cos-recenzie {
            flex: 0 0 auto;
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: 8px 12px;
            border-left-width: 4px;
        }

    body #cosLateral.checkout-active .cos-recenzii-formular .cart-citat-text {
        font-size: 15px;
        line-height: 1.35;
        color: #1f2937;
    }

    body #cosLateral.checkout-active .cos-recenzii-formular .cart-citat-autor {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.35;
        color: #4b5563;
    }

    body #cosLateral.checkout-active .cos-recenzii-formular .cart-citat-stele {
        font-size: 15px;
    }

    /* logo-ul Pallex de lângă „Livrare” / „Plata” (_checkout-rapid.css), puțin mai mare: pe calculator eticheta are 13 px */
    body #cosLateral.checkout-active .checkout-curier-pastila .checkout-curier-logo {
        height: 16px;
    }

    body #cosLateral #checkout-sticky-footer .place-order-btn,
    body #cosLateral #checkout-sticky-footer .place-order-btn.btn-state-confirmed {
        min-height: var(--f-buton);
        padding: 10px 18px !important;
        border-radius: 12px;
        font-size: clamp(18px, 1.4vw, 23px) !important;
        line-height: 1.2;
    }

    body #cosLateral #checkout-sticky-footer .checkout-incredere {
        margin: 2px 0 0;
        font-size: 14px;
    }

    /* ---------- 11) CONFIRMAREA: trei coloane, fără derulare ----------
       stânga — „Comandă finalizată!”, numărul, anunțul recenziei, cadourile, „De unde ai aflat de noi?”;
       mijloc — „Trimite unui prieten” și confirmarea pe email; dreapta — sumarul comenzii și „Înapoi la magazin”. */
    body #cosLateral.confirmation-active #confirmation-view:not([hidden]) {
        flex: 1 1 0;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        columns: 3;
        column-gap: var(--f-gol);
        column-fill: auto;
    }

        body #cosLateral.confirmation-active #confirmation-view:not([hidden]) > * {
            break-inside: avoid;
        }

        body #cosLateral.confirmation-active #confirmation-view:not([hidden]) > .confirmare-prieten,
        body #cosLateral.confirmation-active #confirmation-view:not([hidden]) > .confirmation-summary {
            break-before: column;
            margin-top: 0;
        }

    body #cosLateral.confirmation-active .confirmare-sursa-variante {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body #cosLateral.confirmation-active #confirmation-email-form {
        margin-top: 0;
    }
}

/* Ecranele scunde (laptop cu bara browserului: ~1366×657, 1280×650) și cele înguste (1024–1279 px): aceleași blocuri, mai strânse,
   ca totul să încapă pe ecran și acolo (cu multe produse se derulează doar lista lor). */
@media (min-width: 1024px) and (max-height: 820px), (min-width: 1024px) and (max-width: 1279px) {
    body #cosLateral.sidebar.right-sidebar {
        --cos-gol: 8px;
    }

    body #cosLateral:not(.checkout-active):not(.confirmation-active) .cart-header-dreapta {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    body #cosLateral .cart-citat {
        padding: 8px 14px;
    }

    body #cosLateral #cart-view .cart-citat-text {
        font-size: 16px;
        line-height: 1.35;
    }

    body #cosLateral #cart-view .cart-citat-autor {
        margin-top: 2px;
    }

    body #cosLateral #cart-view > .cart-trust-signals-section {
        padding: 4px 8px !important;
    }

    body #cosLateral .cart-colet {
        padding: 6px 12px;
    }

    body #cosLateral #cart-view > .cart-upsell-section {
        padding: 10px 12px !important;
    }

    body #cosLateral .upsell-title {
        margin-bottom: 8px;
    }

    body #cosLateral .upsell-product-item {
        gap: 6px;
        padding: 8px;
    }

        body #cosLateral .upsell-product-item .cart-link-poza {
            min-height: 80px;
        }

    body #cosLateral #cart-view > .cart-finalizare {
        padding: 8px 14px !important;
    }

    body #cosLateral .cart-cadou__antet {
        min-height: 48px;
        padding: 4px 12px;
    }

    body #cosLateral #go-to-checkout-btn.cart-finalizeaza-btn {
        min-height: 52px !important;
    }

    body #cosLateral .cos-nota-firma {
        margin-top: 6px;
    }

    body #cosLateral .cart-items-container .cart-item:not(.cart-item-colet) {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* Între 1024 și 1279 px lățime, coloana din stânga (produsele, totalul, butonul) primește mai mult loc decât recomandările: altfel numele,
   rândul „+79,99 LEI și ai transport gratuit” și „Plata la livrare sau cu cardul” treceau pe două rânduri și împingeau lista. Caseta
   cadoului deschisă se întinde tot până la marginea din dreapta (coloana din dreapta = 1/1.15 = 87% din cea din stânga). */
@media (min-width: 1024px) and (max-width: 1279px) {
    body #cosLateral:not(.checkout-active):not(.confirmation-active) #cart-view:not([hidden]) {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    body #cosLateral .cart-cadou__corp:not([hidden]) {
        right: calc(-87% - var(--cos-col-gol) - 3px);
    }

    /* recomandările, în coloana mai îngustă: poza poate scădea până la 56 px pe ecranele foarte scunde (1024×640) */
    body #cosLateral .upsell-product-item .cart-link-poza {
        min-height: 56px;
    }
}

/* Pe ecranele scunde de laptop (lățime de la 1280 px), blocurile strânse de mai sus lasă loc pentru poze mai mari în listă. */
@media (min-width: 1280px) and (max-height: 820px) {
    body #cosLateral .cart-items-container {
        --cos-poza: clamp(96px, calc(100vh - 470px), 300px);
    }

    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item) {
        --cos-poza: clamp(76px, calc(50vh - 236px), 210px);
    }

    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) {
        --cos-poza: clamp(64px, calc(33.3vh - 165px), 150px);
    }
}

/* Ecranele scunde de laptop (de la 1280 px lățime, sub 820 px înălțime): de la 4 produse, fiecare produs pe O linie (poza, numele,
   − 1 +, totalul și 🗑). Sub 1280 px lățime coloana e prea îngustă pentru o linie (numele s-ar rupe pe litere): rămân pe două rânduri. */
@media (min-width: 1280px) and (max-height: 820px) {
    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) {
        --cos-poza: clamp(44px, calc(25vh - 125px), 64px);
    }

    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) {
            grid-template-columns: var(--cos-poza) minmax(0, 1fr) auto 150px;
            grid-template-areas: "poza nume cantitate total";
            padding-top: 3px;
            padding-bottom: 3px;
        }

            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-name {
                align-self: center;
                font-size: 15px;
            }

            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-quantity-selector {
                align-self: center;
            }

            /* totalul și 🗑 pe același rând, într-o coloană de lățime fixă: − 1 + stau unul sub altul la toate produsele */
            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-total {
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
            }
}

/* Ecranele cele mai scunde (sub 720 px: 1280×650, 1366×657): de la 3 produse, fiecare produs pe O linie (poza, numele, − 1 +, totalul
   și 🗑), ca trei produse (și patru, cu poze de 44 px) să încapă fără derulare lângă cadou, total, buton și nota firmei. */
@media (min-width: 1280px) and (max-height: 719px) {
    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) {
        --cos-poza: clamp(52px, calc(33.3vh - 158px), 64px);
    }

    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item ~ .cart-item) {
        --cos-poza: 44px;
    }

    body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

        body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) {
            grid-template-columns: var(--cos-poza) minmax(0, 1fr) auto 150px;
            grid-template-areas: "poza nume cantitate total";
            padding-top: 3px;
            padding-bottom: 3px;
        }

            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-name {
                align-self: center;
                font-size: 15px;
            }

            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-quantity-selector {
                align-self: center;
            }

            /* totalul și 🗑 pe același rând, într-o coloană de lățime fixă: − 1 + stau unul sub altul la toate produsele */
            body #cosLateral .cart-items-container:has(.cart-item ~ .cart-item ~ .cart-item) .cart-item:not(.cart-item-colet) .cart-item-total {
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
            }
}

/* Formularul pe ecranele cele mai scunde (sub 720 px): alegerea persoanei și câmpurile, puțin mai scunde. */
@media (min-width: 1024px) and (max-height: 719px) {
    body #cosLateral.checkout-active #checkout-view:not([hidden]) {
        --f-tip: 46px;
        --f-camp: 44px;
    }

    body #cosLateral.checkout-active #checkout-view .form-group {
        margin-bottom: 8px;
    }

    body #cosLateral.checkout-active .checkout-alegere-rand {
        min-height: 58px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}