/* ==========================================================================
   STOC EXPRESS — portalul clientului pe telefon
   --------------------------------------------------------------------------
   Se încarcă ULTIMA, după cont.css și cont-ui.css, și doar corectează ce
   arată rău pe ecran mic. N-am umblat în cele două foi mari: sunt calibrate
   pe mockup-ul de desktop, iar o modificare acolo se vede peste tot.

   Ce rezolvă, în ordinea în care se simte:

   1. MARGINILE TELEFONULUI. Acum că portalul se instalează ca aplicație, pe
      iPhone bara de sus intra sub decupaj, iar butonul coșului sta peste
      linia de home. Nicăieri nu se folosea `env(safe-area-inset-*)`, fiindcă
      într-o filă de browser nu se vede — în aplicație, da.

   2. BARA DE JOS. În aplicație, meniul principal ascuns sub trei liniuțe e
      cel mai sigur mod de a părea sit web. Cinci butoane la degetul mare,
      fixe, cu starea curentă evidentă. Sertarul rămâne, pentru restul.

   3. RUPTURILE. Rânduri care ieșeau din ecran, butoane înghesuite pe trei
      rânduri, ținte de atins de 30px, bare de filtre care se rupeau urât.

   Regula peste tot: 44px minim de atins, o singură coloană când nu încape
   frumos două, și niciun scroll orizontal în afară de cel intenționat.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ---------- 1. marginile aparatului ---------- */
  /* Pe telefoanele cu decupaj, `env()` întoarce 0 în browser și valoarea
     reală în aplicația instalată. Deci aceleași reguli merg în ambele. */
  .top {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header) + env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .side { top: calc(var(--header) + env(safe-area-inset-top)); }
  .side__veil { top: calc(var(--header) + env(safe-area-inset-top)); }
  .main {
    padding-top: calc(var(--header) + env(safe-area-inset-top) + 18px);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* nimic nu are voie să împingă pagina lateral */
  html, body { overflow-x: hidden; }
  .app { max-width: 100%; overflow-x: clip; }
}

/* ==========================================================================
   2. BARA DE JOS — doar pe telefon
   ========================================================================== */
@media (max-width: 767px) {

  .mbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e3e8ef);
    padding-bottom: env(safe-area-inset-bottom);
    /* umbra în sus, ca să se desprindă de conținut la derulare */
    box-shadow: 0 -6px 20px rgba(11, 35, 64, .07);
  }
  .mbar__b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 2px 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--t600, #6b7889);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mbar__b svg { width: 22px; height: 22px; flex: none; stroke-width: 1.7; }
  .mbar__b.is-on { color: var(--gold-600, #a8842f); }
  /* liniuța de deasupra spune care ecran e deschis fără să te uiți la text */
  .mbar__b.is-on::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--gold-400, #c9a44c);
  }
  /* pastila de număr, pe Comenzi și Oferte */
  .mbar__n {
    position: absolute;
    top: 4px;
    left: calc(50% + 7px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold-400, #c9a44c);
    color: var(--navy-900, #0B2340);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }
  .mbar__n[hidden] { display: none; }

  /* Burgerul dispare: bara de jos are deja „Meniu", care deschide același
     sertar. Două uși către aceeași cameră, una sus-stânga și una jos-dreapta,
     doar pun omul să aleagă degeaba. Rămâne cea de la degetul mare.
     Peste 767px bara de jos nu există, deci burgerul rămâne singura cale
     spre sertar și NU se atinge. */
  .top__burger { display: none !important; }
  /* fără el, bara de sus se aliniază la stânga, nu rămâne cu un gol */
  .top { justify-content: flex-start; }
  .top__acts { margin-left: 0; flex: 1; }
  /* Acum că burgerul nu mai e, e loc pentru căutarea întreagă, cu text.
     cont.css o strângea la 40px și îi ascundea textul tocmai fiindcă nu
     încăpea lângă burger; nu mai e cazul. */
  .topsearch { flex: 1; min-width: 0; width: auto; justify-content: flex-start; padding: 0 14px; }
  .topsearch span { display: inline; }

  /* loc pentru bară, ca ultimul rând din pagină să nu stea sub ea */
  .main { padding-bottom: calc(66px + env(safe-area-inset-bottom) + 18px); }

  /* coșul urcă deasupra barei */
  .cartfab {
    right: 16px;
    bottom: calc(74px + env(safe-area-inset-bottom));
  }

  /* sertarele care urcă de jos se opresc peste bară, nu sub ea */
  .cart, .npanel { padding-bottom: env(safe-area-inset-bottom); }
}

/* pe desktop bara nu există */
@media (min-width: 768px) { .mbar { display: none; } }

/* ==========================================================================
   3. RUPTURILE
   ========================================================================== */
@media (max-width: 767px) {

  /* --- bara de filtre: un rând care se derulează, nu trei care se rup --- */
  .bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* căutarea rămâne sus, pe toată lățimea; restul se derulează sub ea */
    flex-wrap: wrap;
  }
  .bar::-webkit-scrollbar { display: none; }
  .bsearch { flex: 1 1 100%; min-width: 0; }
  .bsearch input { height: 44px; font-size: 16px; }
  /* 16px nu e o preferință: sub atât, Safari mărește pagina la atingerea
     câmpului și rămâne mărită. Se vede ca o „săritură" la fiecare căutare. */
  .bsel { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .bsel select { width: 100%; height: 42px; font-size: 14px; }
  .bico { flex: 0 0 42px; height: 42px; }
  /* Comutatorul grila/lista are DOUA butoane. Latimea fixa de 42px il taia
     la primul, iar iconita ramanea impinsa intr-o parte. Pe telefon arata
     acum la fel ca pe calculator: doua patrate lipite, iconita pe mijloc. */
  .bview { flex: 0 0 auto; height: 42px; display: inline-flex; }
  .bview button { width: 42px; height: 42px; padding: 0; display: flex;
    align-items: center; justify-content: center; }
  .bview button svg { width: 18px; height: 18px; }

  /* --- ținte de atins --- */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; }
  .ico, .avatbtn, .top__burger { min-width: 40px; min-height: 40px; }
  .ctab { min-height: 42px; display: inline-flex; align-items: center; }

  /* --- cardul de comandă: nimic pe orizontală, totul în coloană --- */
  .ocd { padding: 16px; min-height: 0; }
  .ocd__top { flex-wrap: wrap; row-gap: 8px; }
  .ocd__num { font-size: 15.5px; }
  .ocd__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ocd__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ocd__acts .btn { width: 100%; justify-content: center; }
  /* un singur buton nu se împarte în două coloane */
  .ocd__acts .btn:only-child { grid-column: 1 / -1; }

  /* --- cardul de produs: prețul și butonul nu se mai bat pe un rând --- */
  .pcd__row { flex-wrap: wrap; row-gap: 6px; }
  .pcd__add { width: 100%; justify-content: center; min-height: 42px; }
  .pcd__t { overflow-wrap: anywhere; }

  /* --- titlurile lungi de produs nu mai împing cardul --- */
  .ocd__list, .crow__t, .osum__t, .ntf__t { overflow-wrap: anywhere; }

  /* --- coșul: rândurile respiră --- */
  .crow { align-items: flex-start; }
  /* CANTITATEA SE VEDEA CA UN „!".
     Cutia are latime fixa (92px), iar pe telefon cele doua butoane au fost
     marite la 38px fiecare — deci pentru cifra ramaneau 16px si se taia pe
     verticala. Pe telefon lasam cutia sa creasca dupa continut. */
  .qty { min-height: 40px; width: auto; min-width: 120px; }
  .qty button { min-width: 38px; flex: 0 0 38px; }
  .qty input { flex: 1 1 auto; width: auto; min-width: 40px; font-size: 15px; }

  /* --- ferestrele: cât ecranul, cu marginile aparatului respectate --- */
  .omod, .askbox, .guide {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
  }
  .guide__b { grid-template-columns: 1fr; }
  .guide__nav {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--border, #e3e8ef);
  }
  .guide__nav button { white-space: nowrap; }

  /* --- căutarea globală pornea prea de sus și se ascundea sub tastatură --- */
  .cmd { top: 10px; width: calc(100vw - 16px); }
  .cmd__in input { font-size: 16px; height: 46px; }

  /* --- setările: rândurile de formular pe o coloană --- */
  .frow, .agrid, .cols2, .setwrap { grid-template-columns: 1fr; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 44px; }

  /* --- cardurile de instalare și notificări, aerisite --- */
  .inst { padding: 16px 16px 18px; }
  .npact { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .npact .btn { width: 100%; justify-content: center; }

  /* --- butoanele de contact din Suport: unul sub altul, întregi --- */
  .sup__contact { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .sup__contact .btn, .sup__contact a.btn { width: 100%; justify-content: center; }

  /* --- antetul paginii ---
     cont.css îl pune deja pe coloană sub 767px, dar butonul „Ieși din cont"
     rămânea întins pe toată lățimea, ca o acțiune principală. Nu e:
     ieșirea din cont e ultimul lucru pe care vrei să-l atingi din greșeală
     cu degetul mare. Îl strângem la stânga, la mărimea textului. */
  .mhead .outbtn { align-self: flex-start; width: auto; min-height: 40px; }

  /* --- „Powered by" nu mai atârnă sub bara de jos --- */
  .powered { margin-bottom: 8px; }
}

/* telefoane mici: două coloane de produse strâng prea tare */
@media (max-width: 399px) {
  .mbar__b { font-size: 9.5px; }
  .mbar__b svg { width: 21px; height: 21px; }
  .ocd__acts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Aplicația instalată: fără elementele care au sens doar în browser
   ========================================================================== */
@media (display-mode: standalone) {
  /* derularea „cu elastic" a paginii, sub bara de sus fixă, arată a pagină
     web scăpată de sub control; într-o aplicație nu se face */
  body { overscroll-behavior-y: none; }
}

/* ---------- ce s-a adaugat dupa v320, pe telefon ---------- */
@media (max-width: 820px) {
  /* banda de sus si cea din cos: text lizibil, fara sa se taie */
  .engros { flex-direction: column; align-items: flex-start; gap: 4px; }
  .engros span { font-size: 13px; line-height: 1.45; }
  .cartmin b { font-size: 13.5px; }
  .cartmin span { font-size: 12.5px; }
  .ofnota { font-size: 12px; }
  /* pe telefon documentele se deschid in vizualizatorul telefonului */
  .pdfovl { display: none !important; }
  /* TREPTELE DE PRET, PE TELEFON.
     Pastilele si cifrele se pastreaza asa cum sunt pe calculator; aici
     doar se maresc, ca sa se vada. Pe ecran mic ieseau la 11-12px si nu
     se puteau citi. */
  .tier { flex: 0 0 50%; padding-left: 14px; }
  .tier i { font-size: 13px; padding: 2px 10px; line-height: 1.5; }
  .tier b { font-size: 24px; margin-top: 6px; }
  .tier span { font-size: 12.5px; }
  .lgd { font-size: 12.5px; line-height: 1.7; }
  .lgd i { font-size: 12.5px; padding: 2px 9px; }
  .stline b { font-size: 12.5px; }
  .stline em { font-size: 12.5px; line-height: 1.5; }
}
@media (max-width: 420px) {
  .tier i { font-size: 12.5px; }
  .tier b { font-size: 22px; }
  /* legenda pe randul ei, ca sa nu se rupa pastilele in doua */
  .lgd { display: block; margin-top: 6px; }
}

/* ---------- categoriile, incadrate ca restul paginii ----------
   Regula veche le tinea pe un rand cu derulare laterala si le trage cu
   16px in afara marginii; peste ea, o alta regula le-a pus la loc pe mai
   multe randuri, dar marginea negativa a ramas. De-aia stateau mai in
   stanga decat cardurile si ieseau in dreapta. */
@media (max-width: 767px) {
  .catbar {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0 0 18px;
    padding: 0;
  }
  .catchip { flex: 0 0 auto; height: auto; min-height: 36px; }
}

/* ============================================================
   TELEFON: fara derulare laterala, fara text inghesuit
   ============================================================ */
@media (max-width: 820px) {
  /* 1. „Iesi din cont" nu e actiunea principala a paginii.
        Statea mare, in mijloc, sub numele firmei — parea o invitatie. */
  .mhead { flex-direction: column; align-items: stretch; gap: 10px; }
  .mhead .outbtn {
    align-self: flex-end; width: auto; height: 34px; min-height: 34px;
    padding: 0 12px; font-size: 12.5px; color: #6B7684; border-color: #E3E7ED;
    background: transparent;
  }
  .mhead .outbtn svg { width: 14px; height: 14px; }

  /* 2. Taburile se aseaza pe randuri, nu se deruleaza lateral. */
  .tabs { flex-wrap: wrap; overflow: visible; gap: 8px; }
  .tabs .ctab { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .ftabs { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .ftabs__t { flex: 1 1 auto; text-align: center; min-height: 42px; }

  /* 3. Bannerele: pe telefon, iconita rotunda de 96px lasa textului o
        coloana de doua cuvinte. O micsoram si punem totul pe verticala. */
  .pbanner, .nbanner { flex-direction: column; align-items: stretch; gap: 14px;
    padding: 20px 18px; min-height: 0; }
  .pbanner__i, .nbanner__i { width: 46px; height: 46px; }
  .pbanner__i svg, .nbanner__i svg { width: 22px; height: 22px; }
  .pbanner__t, .nbanner__t { width: 100%; }
  .pbanner__t p, .nbanner__t p { max-width: none; }
  .pbanner .btn, .nbanner .btn, .pbanner__t .btn, .nbanner__t .btn { width: 100%; justify-content: center; }
  /* cifrele de sub „Totul sub control": trei coloane egale, nu trei coloane
     inguste in care fiecare cuvant sare pe randul lui */
  .nbanner__art { display: none; }
  .nbanner__st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-left: 0; width: 100%; }
  .nbanner__st > * { min-width: 0; }
}
@media (max-width: 480px) {
  .nbanner__st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}