/* ============================================================
   SCARA DE CANTITATE „1 / N / M bucăți” pe paginile de produs (owner, 17.10.2026)
   Pagini: cărbuni cocos, lână de lemn, coceni, cană de aprindere, kit lemne, peleți brad-fag (doar sacul). Ogatan își are scara lui
   (carbuni-brichetati-hexagonali.css, clasele og-scara-*). Marcajul: Views/Shared/_ScaraCantitate.cshtml; cifrele: Services/ScaraCantitate.cs;
   comportamentul: wwwroot/js/scara-cantitate.js.

   Motiv: la o singură bucată clientul plătește transport separat, iar de la o anumită cantitate (un colet întreg) transportul e gratuit — dar
   nu avea de unde să știe. Trei căsuțe cu totalul și transportul scrise; cea cu transport gratuit are bandă verde. Fără reducere, fără preț
   tăiat nou, iar implicit rămâne 1 bucată. Căsuța aleasă apasă „+” / „−” pe selectorul paginii (ascuns cât scara e pe ecran).

   Clasa `sc-cu-scara` stă pe secțiunea .hero a paginii (o pune serverul, ScaraCantitate.ClasaHero, și scriptul la schimbarea variantei).

   PRIMUL ECRAN PE TELEFON (regula proiectului: „Adaugă în coș” rămâne în primul ecran). Scara stă în cardul de preț, între rândul cu prețul și
   rândul cu butonul, deci adaugă înălțimea ei plus spațiul de 6 px dintre rândurile cardului (produs-primul-ecran.css). Selectorul +/− era în
   același rând cu butonul, deci ascunderea lui nu scoate nimic din înălțime. Scara: bordură 3 + partea de sus 43,5 (5 + 16,1 + 1 + 18,4 + 3)
   + transportul 18,4 (2 + 14,4 + 2) = 65 px, plus 6 px = 71 px; cu 1 px de siguranță, rezerva din formula pozei crește de la 470 la 542 px.
     • înălțime vizibilă > 620 px (iPhone cu Safari ≈ 664, Android ≈ 640): poza = 100svh − 542 px (aceeași poziție a butonului ca până acum);
     • înălțime vizibilă ≤ 620 px (iPhone SE ≈ 553): căsuțele se strâng (53 px + 6 = 59 px, cu siguranță 60), rândul de miniaturi se ascunde
       (48 + 4 = 52 px; poza are săgețile ei) și rezerva devine 470 + 60 − 52 = 478 px, cu poza minimum 96 px.
   /js/produs-extra.js (nu se modifică) potrivește apoi înălțimea pozei din JS până la rândul cu stele, deci formulele de aici sunt doar punctul de
   pornire (și ce se vede fără JavaScript). Dacă se schimbă ceva din căsuțe, se recalculează aici și se verifică pe 375×553 și 390×664.
   ============================================================ */

/* Cât scara e pe ecran, selectorul +/− al paginii se ascunde (!important: pe peleți îl comută și scriptul paginii, cu stil direct). */
.sc-cu-scara [data-sc-selector] { display: none !important; }

.sc-scara[hidden] { display: none !important; }

.sc-scara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.sc-op {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color .15s ease, background .15s ease;
}

.sc-op:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sc-op.is-active { border-color: #c10206; background: rgba(193, 2, 6, .12); }

@media (hover: hover) {
    .sc-op:hover { border-color: rgba(255, 255, 255, .4); }
    .sc-op.is-active:hover { border-color: #c10206; }
}

.sc-op .sc-sus { display: block; padding: 5px 4px 3px; }
.sc-op .sc-n { display: block; font-size: 14px; font-weight: 700; line-height: 1.15; color: #fff; }
.sc-op .sc-total { display: block; margin-top: 1px; font-size: 16px; font-weight: 800; line-height: 1.15; color: #fff; }
.sc-op.is-active .sc-total { color: #ff3b3f; }

/* Transportul: gri la cantitățile cu transport plătit, bandă verde plină la alegerea cu transport gratuit (alb pe #15803d = 5:1). */
.sc-op .sc-transp { display: block; padding: 2px 2px; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #b6b6b6; overflow-wrap: break-word; }
.sc-op--gratuit { border-color: rgba(40, 199, 111, .6); }
.sc-op--gratuit .sc-transp { background: #15803d; color: #fff; }

/* Calculator și tabletă: căsuțe puțin mai mari; cardul de preț are loc. */
@media (min-width: 768px) {
    .sc-scara { gap: 10px; }
    .sc-op .sc-sus { padding: 6px 6px 4px; }
    .sc-op .sc-n { font-size: 15px; }
    .sc-op .sc-total { font-size: 18px; }
    .sc-op .sc-transp { padding: 4px 4px; font-size: 13px; }
}

/* ---------- TELEFON ---------- */
@media (max-width: 767.98px) {
    /* Cardul de preț are 12 px de umplutură pe telefon (produs-primul-ecran.css): căsuțele ies 6 px din ea, ca „+ 15 lei transport” să încapă pe un rând. */
    .sc-scara { gap: 6px; margin: 0 -6px; }
    .sc-op { border-radius: 10px; }

    /* Poza, când scara e pe ecran: aceeași formulă ca în produs-primul-ecran.css, cu rezerva mărită cu înălțimea scării (470 → 542 px). */
    main[class^="main-content"] > section[class^="hero"].sc-cu-scara > [class^="container"] [class^="main-image-container"] {
        height: clamp(112px, calc(100vh - 542px - var(--cc-h, 0px)), 340px) !important;
        height: clamp(112px, calc(100svh - 542px - var(--cc-h, 0px)), 340px) !important;
    }
}

/* Telefoane scunde (iPhone SE ≈ 553 px vizibili): căsuțe mai strânse, fără rândul de miniaturi (−52 px; poza are săgețile ei) și cu poza minimum 96 px. */
@media (max-width: 767.98px) and (max-height: 620px) {
    .sc-op .sc-sus { padding: 2px 3px 1px; }
    .sc-op .sc-n { font-size: 13px; line-height: 1.1; }
    .sc-op .sc-total { margin-top: 0; font-size: 15px; line-height: 1.1; }
    .sc-op .sc-transp { padding: 1px 2px; line-height: 1.15; }

    main[class^="main-content"] > section[class^="hero"].sc-cu-scara > [class^="container"] [class^="thumbnails-container"] { display: none !important; }
    main[class^="main-content"] > section[class^="hero"].sc-cu-scara > [class^="container"] [class^="main-image-container"] {
        height: clamp(96px, calc(100vh - 478px - var(--cc-h, 0px)), 340px) !important;
        height: clamp(96px, calc(100svh - 478px - var(--cc-h, 0px)), 340px) !important;
    }
}

/* Telefoane foarte înguste (320 px): „+ 15 lei transport” nu încape în ~95 px; literele se strâng puțin (și poate trece pe al doilea rând, fără scroll lateral). */
@media (max-width: 340px) {
    .sc-op .sc-transp { padding-left: 0; padding-right: 0; letter-spacing: -.04em; }
}