/* ═══════════════════════════════════════════════════════════════════════════
   BARA FIXĂ „ADAUGĂ ÎN COȘ" — PAGINA DE PRODUS, DOAR PE TELEFON (≤767px)

   ⚠️ ASTA NU E PARITATE. E O ADĂUGARE DELIBERATĂ.
   Producția (nici tema desktop, nici tema `Mobile`) NU are așa ceva. Aprobare
   explicită de owner, 2026-08-30, ca îmbunătățire de utilizabilitate: „avem
   ceva vechi, nu e neapărat totul bun". Fișierul e marcat ca atare ca să
   rămână clar, peste șase luni, de ce portul diverge aici de original.

   PROBLEMA MĂSURATĂ (browser real, 375×812, UA de iPhone, produsul
   `bile-lelo-luna-classic`):
     înălțimea documentului         4729 px
     `.product-add-to-cart-button`  la y = 898 px, înălțime 30 px
   Adică butonul de cumpărare dispare după primul ecran și rămâne invizibil pe
   ~81% din pagină. Fără bară, clientul trebuie să deruleze înapoi 3800 px ca
   să poată cumpăra.

   ── CE NU FACE FIȘIERUL ĂSTA ──────────────────────────────────────────────
   1. Nu deschide un al doilea drum către coș. Butonul din bară e
      `<button type="submit" form="CartAddForm">` — asociere NATIVĂ de
      formular, deci apasă exact formularul existent, iar `shop-add-to-cart.js`
      îl interceptează prin evenimentul `submit` al aceluiași formular. Zero
      logică de coș aici, zero în `shop-sticky-cart.js`.
   2. Nu recalculează și nu re-formatează prețul: scriptul COPIAZĂ textul deja
      randat din `.product-price-row-bottom` (valoarea `PricingService`).
   3. Nu atinge desktopul. TOT ce urmează, fără nicio excepție, e într-un
      `@media (max-width: 767px)`. Pragul e 767, nu 768, ca la 768px pagina să
      fie bit-cu-bit cea de azi.

   ── DE CE `[hidden]` ȘI NU DOAR O CLASĂ ───────────────────────────────────
   Blade randează bara cu atributul `hidden`. Scriptul îl scoate DOAR când
   `matchMedia('(max-width: 767px)')` se potrivește, și îl pune la loc când nu.
   Consecințele, ambele cerute:
     - fără JavaScript bara nu apare NICIODATĂ, iar pagina rămâne exact ca azi;
     - peste 767px bara e `hidden`, deci n-are cutie, indiferent de CSS.
   Regula de mai jos e a doua plasă de siguranță: `display:flex` din media
   query ar bate `[hidden]` din foaia de user-agent, deci îl reafirmăm.
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-sticky-cart[hidden] { display: none !important; }

/* Implicit inexistentă. Singurul loc care o aprinde e media query-ul de mai
   jos, deci la 768px și peste nicio regulă din fișier nu se poate potrivi. */
.shop-sticky-cart { display: none; }

@media (max-width: 767px) {

  /* ── Spațiul de la finalul paginii ────────────────────────────────────────
     Bara e `position: fixed`, deci acoperă ultimii ~56px de conținut. Scriptul
     măsoară înălțimea REALĂ a barei (nu o valoare ghicită) și o pune în
     `--shop-sticky-cart-h`; clasa se adaugă pe `<body>` O SINGURĂ DATĂ, la
     inițializare, nu la fiecare apariție — altfel înălțimea documentului ar
     sări sub degetul utilizatorului de fiecare dată când bara intră sau iese.
     Padding pe `body` (nu margin pe subsol): spațiul se adaugă DUPĂ subsol,
     care e ultimul copil, exact unde stă bara. */
  body.has-shop-sticky-cart {
    padding-bottom: var(--shop-sticky-cart-h, 56px);
  }

  .shop-sticky-cart {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sub TOT ce e deja fix pe storefront: notificarea de coș (10000),
       panoul de sugestii (10001), sertarul de filtre (1040/1045). Bara nu are
       voie să acopere confirmarea „Produsul a fost adăugat în coș" — aceea e
       feedback-ul acțiunii pe care o declanșează chiar ea. */
    z-index: 900;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    /* `env(safe-area-inset-bottom)` — bara de gesturi de pe iPhone-urile fără
       buton fizic. Pe orice altceva `env()` e 0px și nu schimbă nimic. */
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);

    /* Starea ascunsă. `visibility` pe lângă `opacity` ca bara ascunsă să nu
       fure atingeri; întârzierea de pe `visibility` o ține vizibilă cât ține
       animația de ieșire. */
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform 0.18s ease-out,
      opacity 0.18s ease-out,
      visibility 0s linear 0.18s;
  }

  .shop-sticky-cart.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
      transform 0.18s ease-out,
      opacity 0.18s ease-out,
      visibility 0s linear 0s;
  }

  /* ── Prețul ───────────────────────────────────────────────────────────────
     Textul e copiat de script din `.product-price-row-bottom`, adică exact
     ce vede clientul mai sus în pagină. `min-width: 0` ca flexbox să-l poată
     strânge în loc să împingă butonul afară din ecran pe un preț lung. */
  .shop-sticky-cart__price {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    color: #cd0018;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Butonul ──────────────────────────────────────────────────────────────
     44×44 e minimul de țintă de atingere. Butonul real din pagină are 30px
     înălțime (măsurat) — aici nu-l imităm, fiindcă bara e făcută tocmai ca să
     fie apăsată cu degetul. */
  .shop-sticky-cart__button {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: #cd0018;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    /* `.product` are `-webkit-tap-highlight-color` implicit; îl lăsăm. */
    -webkit-appearance: none;
    appearance: none;
  }

  .shop-sticky-cart__button:disabled {
    background: #999999;
    cursor: default;
  }
}

/* ── Mișcarea ───────────────────────────────────────────────────────────────
   `prefers-reduced-motion: reduce` ⇒ bara apare și dispare instant. Se scoate
   și întârzierea de pe `visibility`, altfel ieșirea ar rămâne cu 180ms de
   întârziere fără nicio animație care s-o justifice. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .shop-sticky-cart,
  .shop-sticky-cart.is-visible {
    transition: none;
  }
}
