/* ============================================================
   PRIMUL ECRAN PE TELEFON, pe cele 13 pagini de produs cu galerie (16.10.2026)
   Pagini: cărbuni cocos, lână de lemn, kit lemne, coceni, cană de aprindere, clește, perie, lopată, kamado, rotisor, grătar clasic,
   peleți brad-fag și peleți fag. Ogatan își are blocul lui, în carbuni-brichetati-hexagonali.css.

   Motiv: pe telefon prețul și „Adaugă în coș” erau sub primul ecran (cocos y≈908, lână 954, cană 877, peleți 963; ecranul vizibil are
   664 px pe iPhone cu Safari și 553 px pe iPhone SE): ~85 px de spațiu gol sub antet, poza de 300 px, două rânduri de miniaturi de 80 px
   și stelele înaintea prețului. ~90% din vânzări vin de pe telefon.

   Ce face (doar sub 768 px; fonturile, culorile și pozele rămân ale paginilor, desktopul nu se schimbă):
     • scoate spațiul gol de sub antet (main-content avea padding-top: 60 px peste cei ~97 px ai antetului fix);
     • poza ia cât a rămas din ecranul VIZIBIL (100svh, adică cu barele browserului), între 112 și 340 px;
     • miniaturile: pătrate de 48 px (erau 80), într-un singur rând care se derulează lateral (ca până acum);
     • titlul, cu variantele și cardul de preț strânse: prețul, cantitatea și „Adaugă în coș” vin imediat sub poză;
     • stelele (REVIEWS.io) trec vizual SUB cardul de preț (cu `order`; în HTML rămân unde erau);
     • textul de pe buton: 14 px (era 11 px, iar la ≤375 px 10 px), butonul de minimum 44–48 px;
     • rândurile de încredere de sub buton și eticheta „Cel mai vândut”: 12 px (erau 11,5 și 8,7 px).
   Rezultat măsurat pe 390×664 (butonul „Adaugă în coș” se termină la): lână 579, cocos 581, peleți 583, kit lemne / coceni 558, cană / clește / perie
   564, lopată 511, kamado / rotisor 561, grătar clasic 540 — adică deasupra barei fixe de jos (începe la 607). Pe 375×553 poza coboară la 112 px și
   butoanele se termină între 427 (lopată) și 500 (peleți; cocos 498, lână 496), la marginea barei de jos (de la 496). Dacă totuși un buton rămâne mai jos (variante pe două rânduri, bară de cookie-uri), bara fixă de jos
   (_BaraProdusMobil) arată prețul și butonul.
   Constanta 470 px = tot ce stă pe ecran în afară de poză (antet 97 + miniaturi + titlu + variante + card de preț + bara de jos 57 + respirație);
   dacă se schimbă ceva din acest bloc, se recalculează aici și se verifică pe 375×553.
   Selectorii sunt pe prefix de clasă (main-content*, hero*, container*, product-gallery*, …): toate paginile folosesc aceleași nume cu sufix
   (-lana, -cana, -gratarClasic …), iar `!important` e necesar fiindcă fiecare CSS de pagină are reguli de aceeași putere, uneori în mai multe locuri.
   ============================================================ */
@media (max-width: 767.98px) {
    main[class^="main-content"] { padding-top: 0 !important; }
    main[class^="main-content"] > section[class^="hero"] { padding-top: 6px !important; }

    /* poza: cât rămâne din ecranul vizibil; prima declarație (vh) e pentru browserele fără svh */
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-gallery"] { margin-bottom: 8px !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="main-image-container"] {
        height: clamp(112px, calc(100vh - 470px - var(--cc-h, 0px)), 340px) !important;
        height: clamp(112px, calc(100svh - 470px - var(--cc-h, 0px)), 340px) !important;
        margin-bottom: 6px !important;
    }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="main-image-container"] > img[class^="main-image"],
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="main-image-container"] > video { height: 100% !important; width: 100% !important; object-fit: contain; }

    /* miniaturile: un rând, pătrate de 48 px (țintă de atingere peste 44 px); fără derulare verticală (un pixel în plus făcea să apară bara) */
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="thumbnails-container"] { padding: 0 !important; margin: 0 0 4px !important; overflow-y: hidden !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="thumbnails-container"] > [class^="thumbnails"] { gap: 6px !important; padding: 0 !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="thumbnail"]:not([class^="thumbnails"]):not([class^="thumbnail-active"]) { width: 48px !important; height: 48px !important; border-radius: 8px !important; }

    /* coloana de info: titlu, variante, card de preț, apoi stelele; restul, ca înainte */
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] { display: flex; flex-direction: column; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] > * { order: 5; min-width: 0; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] > [class^="product-header"] { order: 1; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] > [id^="productVariants"] { order: 2; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] > [class^="pricing"] { order: 3; padding: 10px 12px !important; margin: 0 0 8px !important; gap: 6px !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-info"] > .rio-stele-bloc { order: 4; }

    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="product-title"] { font-size: clamp(16px, 4.6vw, 18px) !important; line-height: 1.2 !important; margin: 0 0 8px !important; }

    /* variantele: pe un singur rând, de lățime egală (3 variante la lână încap pe un rând); varianta unică, mai jos, e etichetă */
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [id^="productVariants"] { gap: 8px !important; margin-bottom: 8px !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [id^="productVariants"] > [data-id] { flex: 1 1 0 !important; min-width: 0 !important; white-space: normal !important; text-align: center; line-height: 1.2 !important; padding: 6px 4px !important; min-height: 44px; font-size: 13px !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [data-una-varianta] > [data-id] { flex: 0 0 auto !important; padding: 6px 14px !important; }

    /* prețul: preț, preț vechi și reducere pe un rând; lei/kg dedesubt */
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="price-tags"] { align-items: baseline !important; gap: 0 10px !important; flex-wrap: wrap !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="current-price"] { font-size: 28px !important; line-height: 1.15 !important; height: auto !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="original-price"] { font-size: 16px !important; line-height: 1.2 !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="pret-pe-kg"] { margin: 0 !important; }

    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [id^="primaryAddToCartBtn"] { min-height: 48px; font-size: 14px !important; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] .sub-buton-produs { font-size: 12px; }
    .cma-eticheta { font-size: 12px; top: -10px; }
}

/* VARIANTA UNICĂ (16.10.2026): „Inox 31Cm”, „550g”, sau doar o variantă rămasă vizibilă după blocări. Era un buton roșu lat, la fel ca butonul
   de comandă, iar butonul adevărat stătea mai jos și mai mic. Acum: etichetă neutră, gri, fără umbră și fără mână. Atributul îl pune
   _BaraProdusMobil (din HTML) și /js/produs-extra.js (când disponibilitate.js ascunde sau arată variante). Pe orice lățime. */
main[class^="main-content"] [data-una-varianta] > [data-id] {
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    color: #e5e5e5 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
}

/* 17.10.2026 (owner): pe telefon poza principală UMPLE cadrul (cover) — produsul se vede mult mai mare; poza întreagă e la butonul ⛶
   „ecran complet” (pus de produs-extra.js). Titlul produsului centrat. */
@media (max-width: 767.98px) {
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="main-image-container"] > img[class^="main-image"] { object-fit: cover !important; object-position: 50% 50%; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="product-title"] { text-align: center !important; }
}
/* Butonul „ecran complet” din colțul pozei și fereastra cu poza întreagă (toate paginile de produs, telefon și calculator). */
.poza-ecran-complet { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.poza-ecran-complet:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767.98px) { .poza-ecran-complet { right: 2px; bottom: 2px; } }   /* owner, 17.10.2026: mai la dreapta și mai jos; 19.10.2026: încă puțin (5 → 2 px) */
.poza-mare { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,.95); }
.poza-mare[hidden] { display: none; }
.poza-mare img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.poza-mare__x { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.6); color: #fff; font-size: 20px; cursor: pointer; }

/* 17.10.2026 seara (owner): pe telefon, galeria puțin mai jos sub antet (+10 px). Înălțimea pozei o dă produs-extra.js (minim 220 px). */
@media (max-width: 767.98px) {
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] [class^="product-gallery"] { margin-top: 10px; }
}

/* Săgețile și numărul pozei din ecranul complet (owner, 17.10.2026). 48 px, ca să se atingă ușor; numărul jos, deasupra barei telefonului. */
.poza-mare__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.6); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
.poza-mare__nav--prev { left: 8px; }
.poza-mare__nav--next { right: 8px; }
.poza-mare__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.poza-mare__nr { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2;
    padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; font-weight: 600; }
@media (min-width: 1024px) {
    .poza-mare__nav { width: 56px; height: 56px; font-size: 34px; }
    .poza-mare__nav--prev { left: 24px; }
    .poza-mare__nav--next { right: 24px; }
}

/* Titlul deasupra pozelor pe telefon (owner, 17.10.2026). Îl mută scriptul din _BaraProdusMobil.cshtml (clasa titlu-sus), doar când galeria
   stă deasupra informațiilor; aici doar așezarea lui deasupra pozei: centrat, cu puțin spațiu până la poză. */
main h1.titlu-sus {
    text-align: center;
    margin: 4px 0 8px;
}

/* Butonul în primul ecran pe /peleti-brad (owner, 19.10.2026: „vreau să fie în ATF”). Paletul de 1.005 kg (varianta aleasă la intrare) are
   în caseta de preț două rânduri lungi înaintea butonului: „palet 67 saci × 15 kg (1.005 kg) • 2,39 lei/kg …” și „Transport gratuit cu Pallex,
   camion cu lift • Economisești …”. Pe telefon trec sub buton (caseta e flex pe coloană; `order` mută doar așezarea, HTML-ul rămâne la fel),
   iar prețul și butonul rămân sus. Măsurat pe iPhone SE (375×553): butonul era la 627 px, sub ecran, chiar cu poza la minimul de 112 px. */
@media (max-width: 767.98px) {
    main#PeletiBrad [id^="priceSubtext"],
    main#PeletiBrad [id^="savingsText"] { order: 1; }
}

/* Titlul și poza mai sus pe telefon (owner, 20.10.2026: „poziționează titlul la fiecare produs mai sus puțin pe vertical … și apoi poza
   principală puțin mai sus”): fără spațiul de deasupra titlului (6 → 0 px) și 6 px între titlu și poză (în loc de 10). Locul câștigat îl
   ia poza (potrivirea din produs-extra.js o lungește până la rândul cu stele / buton). */
@media (max-width: 767.98px) {
    main[class^="main-content"] > section[class^="hero"] { padding-top: 0 !important; }
    main h1.titlu-sus { margin: 0 0 6px; }
    main[class^="main-content"] > section[class^="hero"] > [class^="container"] > [class^="product-gallery"] { margin-top: 0 !important; }
}