/* ============================================================
   /magazin PE TOATĂ LĂȚIMEA, de sus până jos (owner, 17.10.2026: „paginile sunt încă centrate cumva”).
   Legat din Magazin.cshtml cu media="(min-width: 1024px)": telefonul (~90% din vânzări) și tableta nu-l descarcă înainte de
   afișare și nu primesc nicio regulă (și aici totul stă în @media (min-width: 1024px)). Fișierul vine ÎNAINTEA stilului din
   pagină (<style> din Magazin.cshtml și din partiale): „body” în față câștigă la aceeași regulă.
   Același stil ca prima pagină, /carbuni-gratar, /de-ce-apacks și /comunitate: margine 24–48 px, plafon 1760 px.
     • „Recomandate”: cele două carduri pe toată lățimea, cu poza în stânga și prețul + butonul în dreapta; cu 3–4 carduri
       („Cele mai vândute”) rămân pe verticală;
     • textul de jos pe 2 coloane, întrebările frecvente pe 2 coloane.
   17.10.2026 seara (owner): „pozele produselor mai mari, eventual duble” și, pe cardurile „Recomandate”, stelele cu nota, prețul,
   prețul tăiat și „9,50 lei/kg” PE ACELAȘI RÂND:
     • „Recomandate”: cardul e mai înalt (poza ~2× suprafața de dinainte), iar rândul stele · preț · preț tăiat · lei/kg stă sub titlu;
       butonul „Adaugă în coș” rămâne în primul ecran la 1366×768;
     • grila de produse: 3 coloane pe laptop (cardurile ~1,7× mai late decât cele 5 de dinainte), 4 de la 1680 px; textele cresc puțin
       odată cu cardul (aceleași fonturi, aceleași culori).
   ============================================================ */
@media (min-width: 1024px) {
    :root {
        --dk-gutter: clamp(24px, 2.6vw, 48px);
        --dk-max: 1760px;
    }

    body .mag-container {
        box-sizing: border-box;
        max-width: var(--dk-max);
        padding-left: var(--dk-gutter);
        padding-right: var(--dk-gutter);
    }

    /* ---------- grila de produse: cardurile (și pozele) mult mai mari ---------- */
    body .mag-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 1.4vw, 26px);
    }

    body .mag-grid .mag-body {
        padding: clamp(14px, 1.1vw, 20px);
    }

    body .mag-grid .mag-cat {
        font-size: 13px;
    }

    body .mag-grid .mag-title {
        font-size: clamp(1rem, 0.35vw + 0.75rem, 1.2rem);
    }

    body .mag-grid .mag-stele {
        font-size: 14px;
    }

    body .mag-grid .mag-price {
        font-size: clamp(1.7rem, 0.4vw + 1.35rem, 2rem);
    }

    body .mag-grid .mag-price-old,
    body .mag-grid .mag-price-unit {
        font-size: 14px;
    }

    body .mag-grid .mag-price-kg {
        font-size: 14px;
    }

    body .mag-grid .mag-cta {
        min-height: 48px;
        font-size: 14px;
    }

    /* ---------- „Recomandate” ---------- */
    body .mag-best-grid {
        gap: clamp(14px, 1.4vw, 24px);
    }

    /* Stelele cu nota, prețul, prețul tăiat și „lei/kg” pe ACELAȘI rând (sub titlu); categoria, titlul și butonul pe rândul lor.
       Dacă rândul nu încape (card îngust), trece frumos pe rândul următor, fără să iasă din card. */
    body .mag-best-card .mag-body {
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        column-gap: 10px;
        row-gap: 0;
    }

        body .mag-best-card .mag-body > * {
            flex: 0 0 100%;
            min-width: 0;
        }

        body .mag-best-card .mag-body > .mag-title {
            margin: 0 0 10px;
        }

        body .mag-best-card .mag-body > .mag-stele,
        body .mag-best-card .mag-body > .mag-price-row,
        body .mag-best-card .mag-body > .mag-price-kg {
            flex: 0 0 auto;
            margin: 4px 0;
        }

        body .mag-best-card .mag-body > .mag-cta {
            margin-top: clamp(12px, 1.2vw, 20px);
        }

    body .mag-best-card .mag-stele {
        font-size: 15px;
    }

    body .mag-best-card .mag-price-row {
        flex-wrap: nowrap;
        align-items: baseline;
    }

    body .mag-best-card .mag-price {
        font-size: clamp(1.9rem, 0.3vw + 1.6rem, 2.2rem);
    }

    body .mag-best-card .mag-price-old {
        font-size: 15px;
    }

    body .mag-best-card .mag-price-kg {
        font-size: 15px;
    }

    body .mag-best-card .mag-cat {
        font-size: 13px;
    }

    body .mag-best-card .mag-title {
        font-size: clamp(1.15rem, 0.5vw + 0.85rem, 1.45rem);
    }

    body .mag-best-card .mag-cta {
        min-height: 50px;
        font-size: 15px;
    }

    /* ---------- textul de jos: pe 2 coloane lizibile ---------- */
    body .mag-seo .mag-container {
        max-width: var(--dk-max);
        column-count: 2;
        column-gap: clamp(40px, 4vw, 80px);
    }

    body .mag-seo h2 {
        column-span: all;
    }

    body .mag-seo p {
        break-inside: avoid;
    }

    /* ---------- întrebările frecvente (partialul are max-width: 800px): pe toată lățimea, 2 coloane ---------- */
    body .mag-seo ~ .intrebari-frecvente {
        max-width: var(--dk-max);
        padding-left: var(--dk-gutter);
        padding-right: var(--dk-gutter);
    }

    body .mag-seo ~ .intrebari-frecvente .intrebari-frecvente__lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(14px, 1.4vw, 24px);
        align-items: start;
    }

    /* Cu 1–2 carduri sus, fiecare card e pe orizontală (poza | nume, rândul cu prețul, buton), de la 1024 px (înainte de la 1280 px).
       Cardul are ~44% din înălțimea ferestrei (300–520 px): poza crește odată cu ecranul, iar butonul rămâne în primul ecran
       (1366×768: cardul se termină la ~725 px). Textul are mereu ~420 px (cât să încapă stelele, prețul, prețul tăiat și lei/kg pe
       un rând); tot restul lățimii e al pozei (cel puțin 200 px, cel mult 60% din card). Sub ~1280 px rândul trece pe două rânduri. */
    body .mag-best-grid:not(.mag-best-grid--n3):not(.mag-best-grid--n4) > .mag-best-card {
        flex-direction: row;
        align-items: stretch;
        min-height: clamp(300px, 44vh, 520px);
    }

    body .mag-best-grid:not(.mag-best-grid--n3):not(.mag-best-grid--n4) > .mag-best-card .mag-img {
        flex: 0 0 clamp(200px, calc(100% - 420px), 60%);
        aspect-ratio: auto;
        max-height: none;
        height: auto;
    }

    body .mag-best-grid:not(.mag-best-grid--n3):not(.mag-best-grid--n4) > .mag-best-card .mag-img img {
        position: absolute;
        inset: 0;
        padding: clamp(10px, 1vw, 18px);
    }

    /* procentul de reducere: în colțul pozei (în dreapta cardului ar acoperi titlul) */
    body .mag-best-grid:not(.mag-best-grid--n3):not(.mag-best-grid--n4) > .mag-best-card > .mag-discount {
        left: calc(clamp(200px, calc(100% - 420px), 60%) - 56px);
        right: auto;
    }

    body .mag-best-grid:not(.mag-best-grid--n3):not(.mag-best-grid--n4) > .mag-best-card .mag-body {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
        padding: clamp(16px, 1.5vw, 24px);
    }
}

/* Ecranele late: 4 coloane în grilă (cardurile rămân ~400 px, dublu față de cele 6 de dinainte). */
@media (min-width: 1680px) {
    body .mag-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}