/* ============================================================
   MOBIL 2026 - wspolny pakiet dla sklepow Lumarko (lumarko-el, lumarko-mdf)
   17.10.2026, polecenie Piotra: "mobilna aplikacja do dupy, zastosuj najnowsze
   rozwiazania dla mobilnych stron dla wszystkich moich sklepow".
   Wszystko ponizej wynika z POMIARU na iPhone 390x844 (Playwright, is_mobile):
   cele dotykowe mialy 20-36 px zamiast wymaganych 44, karta nie miala przyklejonego
   paska zakupu, karuzele nie zatrzymywaly sie na kafelku.
   ============================================================ */

/* --- 1. Fundament: dynamiczna wysokosc ekranu i bezpieczne marginesy iPhone'a --- */
:root{
  --dotyk:44px;                   /* minimalny cel dotykowy (WCAG 2.2 / Apple HIG) */
  --bezp-l:env(safe-area-inset-left,0px);
  --bezp-p:env(safe-area-inset-right,0px);
  --bezp-d:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (height:100dvh){ .pelny-ekran{height:100dvh} }

@media (max-width:860px){
  /* --- 2. Zero przypadkowego poziomego przewijania i zero "skakania" po kliknieciu --- */
  html,body{overflow-x:clip;max-width:100%}
  *{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
  a,button,input,select,label,summary{touch-action:manipulation}
  body{padding-left:var(--bezp-l);padding-right:var(--bezp-p)}

  /* --- 3. Cele dotykowe: zmierzone 20-36 px, maja byc 44 --- */
  .naglowek .ikony a,.naglowek .ikony button,.szukaj-mob,
  .naglowek a[href*="konto"],.naglowek a[href*="koszyk"],.naglowek a[href*="ulubione"]{
    min-width:var(--dotyk);min-height:var(--dotyk);display:inline-flex;
    align-items:center;justify-content:center}
  .ilosc button{min-width:var(--dotyk);min-height:var(--dotyk);font-size:20px}
  .ilosc input{min-height:var(--dotyk);font-size:16px;width:56px;text-align:center}
  /* 16px w polach to NIE kosmetyka: ponizej iOS sam powieksza strone przy wpisywaniu */
  input,select,textarea{font-size:16px!important}
  /* okruszki: klasa to .okruszki (zmierzone w motywie, nie .breadcrumb) */
  .okruszki{overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .okruszki::-webkit-scrollbar{display:none}
  .okruszki a,.okruszki .ost{display:inline-flex;align-items:center;min-height:38px;padding:4px 2px}
  .statusy-z button,.slajd-tytuly button{min-height:var(--dotyk);padding:10px 8px}
  .serce,.lubie{min-width:var(--dotyk);min-height:var(--dotyk)}
  /* glowny przycisk zakupu: zmierzone 128x34 - na telefonie ma byc szeroki i wysoki */
  .do-koszyka .przycisk,.karta .info .przycisk{width:100%;min-height:48px;font-size:17px}
  .karta .ilosc{min-height:48px}
  /* strzalki karuzel 36 -> 44, ikony spolecznosciowe 34 -> 44 */
  .kar-l,.kar-p,.strz{min-width:var(--dotyk);min-height:var(--dotyk)}
  .stopka-social a{min-width:var(--dotyk);min-height:var(--dotyk);display:inline-flex;
    align-items:center;justify-content:center}
  /* linki stopki i karty: 20-22 px wysokosci to za malo dla palca */
  .stopka a,.stopka-dane a,.karta .info .pdf a,.karta .telefony a{display:inline-flex;
    align-items:center;min-height:38px;padding:3px 0}
  .stopka ul li{margin:0}
  /* baner zgod: krzyzyk mial 24x22 */
  .zgody button,.zgody .x{min-width:var(--dotyk);min-height:var(--dotyk)}
  .naglowek a.logo{min-height:var(--dotyk);display:inline-flex;align-items:center}
  /* domkniecie po pomiarze: te cele mialy 20-22 px wysokosci albo 34 px szerokosci */
  .konto-wiersz a,.naglowek a.konto{min-height:var(--dotyk);display:inline-flex;align-items:center;gap:6px}
  .blok-pdf a{min-height:var(--dotyk);display:inline-flex;align-items:center}
  .stopka-social a{min-width:var(--dotyk)!important;min-height:var(--dotyk)!important;
    display:inline-flex!important;align-items:center;justify-content:center}
  .stopka a,.stopka-dane a,.stopka-dol a{min-height:var(--dotyk)}
  .karta .telefony a,.okruszki a{min-height:42px}
  [data-zmien-zgody]{min-height:var(--dotyk);display:inline-flex;align-items:center}
  /* krzyzyk w gornym pasku informacyjnym mial 24x22 (zmierzone) */
  .pasek-gora button{min-width:var(--dotyk);min-height:var(--dotyk);display:inline-flex;
    align-items:center;justify-content:center;font-size:20px}
  /* baner zgod (RODO) - krzyzyk zamkniecia mial 24x22; selektor szeroki, bo baner wstawia
     wtyczka wspolna i nie mamy pewnosci co do klas */
  #zgody button,#zgody a,.zgody button,.zgody a,.zgody-w button,.zgody-w a{
    min-width:var(--dotyk);min-height:var(--dotyk);display:inline-flex;
    align-items:center;justify-content:center}
  #zgody a,.zgody-w a{min-width:0}  /* linki w tekscie zgody tylko wyzsze, nie szersze */

  /* --- 4. Karuzele: palec ma zatrzymywac sie na kafelku, nie w polowie --- */
  .kar-lista,.slajdy,.galeria,.blog-lista{
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .kar-lista::-webkit-scrollbar,.slajdy::-webkit-scrollbar{display:none}
  .kar-lista>*,.slajdy>*{scroll-snap-align:start}

  /* --- 5. Szybsze wyswietlanie dlugiej strony glownej (przegladarka rysuje to, co widac) --- */
  .siatka-sekcja,.na-blogu,.statusy,.banery-3{content-visibility:auto;contain-intrinsic-size:auto 700px}

  /* --- 6. Czytelnosc: nic ponizej 14 px, naglowki nie rozpychaja ekranu --- */
  body{font-size:15px;line-height:1.55}
  h1{font-size:22px;line-height:1.25}
  .h-seo{font-size:19px;line-height:1.3}
  .statusy-z{gap:14px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    scroll-snap-type:x proximity;padding-bottom:4px}
  .statusy-z button{white-space:nowrap;font-size:20px;scroll-snap-align:center}

  /* --- 7. Menu i panele nie przewijaja strony pod spodem --- */
  .menu-mob,.panel-mob,.kat-lista.otwarte{overscroll-behavior:contain}
}

/* --- 8. Przyklejony pasek zakupu na karcie produktu (standard sklepow mobilnych) --- */
.pasek-zakup{display:none}
@media (max-width:860px){
  .pasek-zakup{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;gap:12px;padding:10px 14px calc(10px + var(--bezp-d));
    background:#fff;border-top:1px solid var(--linia,#ddd);
    box-shadow:0 -6px 18px rgba(0,0,0,.08);
    transform:translateY(110%);transition:transform .22s ease}
  .pasek-zakup.widac{transform:none}
  .pasek-zakup .pz-cena{font-weight:700;font-size:17px;white-space:nowrap}
  .pasek-zakup .pz-kup{flex:1;min-height:var(--dotyk);border:0;border-radius:4px;
    background:#222;color:#fff;font-weight:600;font-size:16px;cursor:pointer}
  .pasek-zakup .pz-kup[disabled]{background:#999}
  /* zeby pasek nie zaslanial stopki */
  body.ma-pasek-zakup{padding-bottom:72px}
}

/* --- 9. Szanujemy ustawienie "mniej animacji" w telefonie --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --- 10. Wyrazna lupa na telefonie (17.10.2026, polecenie Piotra) --- */
@media (max-width:991px){
  .szukaj-mob,button[class*="szukaj"],.lupa-mob{
    background:#c52240!important;color:#fff!important;border:0!important;border-radius:50%!important;
    width:44px!important;height:44px!important;min-width:44px;display:inline-flex!important;
    align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .szukaj-mob svg,.szukaj-mob *,button[class*="szukaj"] svg{stroke:#fff!important;color:#fff!important;fill:none}
  .szukaj-mob.lum-puls{animation:lumPuls 1.1s ease-in-out 6}
  @keyframes lumPuls{
    0%{transform:scale(1);box-shadow:0 0 0 0 rgba(197,34,64,.55)}
    50%{transform:scale(1.14);box-shadow:0 0 0 10px rgba(197,34,64,0)}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(197,34,64,0)}}
}