/* Mobile-only layout tweaks (loaded with media="(max-width: 860px)")
   Cel: czytelny układ na smartfonie + przycisk "Kategorie" (wysuwany panel z kategoriami i produktami).
*/

@media (max-width: 860px){
  /* Safe-area dla iPhone (notch) + wygodna zmienna na wysokość nagłówka (ustawiana w JS) */
  :root{
    --safe-top: env(safe-area-inset-top, 0px);
    --m-header-h: 76px; /* fallback – JS nadpisze realną wysokością */
  }

  /* zapobiegaj poziomemu "wychodzeniu" poza ekran */
  html, body{ max-width:100vw; overflow-x:hidden; }
  img, svg, video, canvas, iframe{ max-width:100%; height:auto; }

  /* Na części telefonów sticky bywa kapryśne.
     Żeby NAPEWNO było "pod adresem strony" i zostało na ekranie – robimy fixed.
     (JS ustawia --m-header-h, aby treść nie chowała się pod nagłówkiem.) */
  header{
    position: fixed !important;
    top: var(--safe-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1100;
    background: var(--bg,#fff);
    transform: none !important;
  }

  /* Na mobile ukrywamy topbar, żeby nie "wchodził" pod fixed header */
  .topbar{ display:none !important; }

  /* Odsuń treść o wysokość headera (plus safe-area) */
  body{
    padding-top: calc(var(--safe-top) + var(--m-header-h)) !important;
  }

  /* Sticky potrafi się wyłożyć, jeśli rodzic ma overflow/transform */
  header, header .wrap{ overflow: visible !important; }

  /* Topbar jest schowany wyżej; nie blokuj sticky/fixed przez transformy */
  .topbar{ transform: none !important; }

  /* blokada scrolla tła po otwarciu panelu */
  html.m-lock, html.m-lock body{ overflow:hidden; }

  /* Topbar */
  .topbar .wrap{ padding:8px 12px; justify-content:space-between; gap:10px; }
  .topbar .chip{ font-size:13px; }
  .topbar .chip .ico{ margin-right:6px; }

  /* Header: 2 wiersze (logo + przyciski), potem wyszukiwarka */
  /* (pozycjonowanie sticky jest ustawione wyżej) */
  header .wrap{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo actions"
      "search search";
    align-items:center;
    gap:10px;
    padding:12px 12px;
  }
  header .logo{ grid-area:logo; min-width:0; }
  header .search{ grid-area:search; }
  header .menu{ display:none; } /* desktop menu schowane */
  .catbar{ display:none; }      /* czerwony pasek kategorii tylko desktop */

  /* Logo – większe na telefonie */
  .logo-img{
    height:40px !important;
    width:auto !important;
    max-width:160px;
    object-fit:contain;
  }
  .logo-text{ font-size:16px; }

  /* Przyciski mobilne */
  .m-actions{
    grid-area:actions;
    display:flex;
    gap:8px;
    align-items:center;
  }
  .icon-btn{
    border:1px solid rgba(0,0,0,.12);
    background:rgba(255,255,255,.92);
    border-radius:14px;
    padding:10px 12px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.08);
  }
  .icon-btn:active{ transform:translateY(1px); }
  .icon-btn:focus{ outline:3px solid rgba(20,138,59,.35); outline-offset:2px; }

  /* Search – pełna szerokość + większy tap target */
  header .search input{
    height:44px;
    font-size:16px;
  }
  header .search button{
    height:44px;
    width:46px;
  }

  /* Overlay */
  .m-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:1200;
  }

  /* Drawer */
  .m-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(92vw, 380px);
    background:#fff;
    z-index:1300;
    transform:translateX(110%);
    transition:transform .25s ease;
    box-shadow:-14px 0 38px rgba(0,0,0,.22);
    display:flex;
    flex-direction:column;
    border-left:1px solid rgba(0,0,0,.08);
    outline:none;
  }
  .m-drawer.is-open{ transform:translateX(0); }

  .m-drawer__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .m-drawer__body{
    padding:10px 12px 18px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .m-link{
    display:block;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.08);
    margin-bottom:10px;
    font-weight:700;
  }

  /* Accordion in categories drawer */
  .m-acc{
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    margin-bottom:10px;
    background:#fff;
    overflow:hidden;
  }
  .m-acc__sum{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 12px;
    font-weight:800;
    cursor:pointer;
  }
  .m-acc__sum::-webkit-details-marker{ display:none; }
  .m-acc[open] .m-acc__chev{ transform:rotate(90deg); }
  .m-acc__chev{ transition:transform .18s ease; font-size:20px; }

  .m-acc__body{
    padding:0 12px 12px;
    border-top:1px solid rgba(0,0,0,.06);
  }
  .m-sub{
    display:block;
    padding:10px 10px;
    border-radius:12px;
    margin-top:8px;
    background:rgba(20,138,59,.06);
  }
  .m-sub:active{ transform:translateY(1px); }

  /* Karty/siatki na mobile – więcej powietrza */
  .wrap{ padding-left:12px; padding-right:12px; }
  .grid.cards3{ grid-template-columns:1fr; }
  .grid.cards2{ grid-template-columns:1fr; }
  .card{ border-radius:18px; }
  .card .label{ font-size:16px; }

  /* Formularze */
  input, textarea, select{ font-size:16px; }

  /* ===== Kontakt: czytelny formularz na smartfonie ===== */
  /* Na mobile przełączamy formularz na kolumnę (pewne układanie + łatwe "order") */
  form.contact-form.contact-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
  }

  /* Wewnątrz lewej kolumny: też jedna kolumna */
  .contact-left{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
    order:1;
  }

  /* Opis (textarea) pod polami */
  .contact-form .field-wide{ order:2; }

  /* Box z danymi kontaktowymi pod opisem */
  .contact-right{ order:3; }

  /* Przycisk wysyłki */
  .contact-form button[type="submit"],
  .contact-form .btn-primary{ order:4; width:100%; }

  /* CHECKBOX RODO NA SAM DÓŁ – POD PRZYCISKIEM */
  .contact-form .privacy-field{ order:5; }

  /* Drobny tekst (np. pod formularzem) na końcu */
  .contact-form .sub{ order:6; }

  /* Pola: zawsze jedna kolumna, większe odstępy */
  .contact-form .field{
    grid-template-columns: 1fr !important;
    gap:6px !important;
    margin:0 !important;
  }
  .contact-form .field label{ font-size:14px; }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    padding:12px 12px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.14);
    background:#fff;
  }

  .contact-form textarea{
    min-height:140px !important;
  }

  /* Przycisk: większy i łatwy do kliknięcia */
  .contact-form button[type="submit"],
  .contact-form .btn-primary{
    padding:13px 14px !important;
    border-radius:16px !important;
    font-size:16px !important;
  }

  /* RODO pod przyciskiem: czytelny „panel” */
  .contact-form .privacy-field{
    padding:12px 12px;
    border-radius:16px;
    border:1px solid rgba(0,0,0,.10);
    background:rgba(0,0,0,.02);
  }
  .contact-form .privacy-field .chk{
    align-items:flex-start;
    gap:10px;
  }
  .contact-form .privacy-field .chk input[type="checkbox"]{
    width:20px;
    height:20px;
    margin-top:2px !important;
  }
  .contact-form .privacy-field .chk a{ white-space:normal; }

  /* Sidebar box: trochę powietrza i brak "wpychania" */
  .contact-right .contact-box{
    padding:14px !important;
    border-radius:16px !important;
  }

  /* (reszta stylów kontaktu jest wyżej; unikamy duplikatów) */
}


/* HARD OVERRIDE header scroll — POPRAWIONE
   (nie zabijamy sticky na headerze, zostawiamy tylko reset dla topbar) */
@media (max-width:860px){
  html body .topbar{
    display:none !important;
  }

  html body header{
    position: fixed !important;
    top: var(--safe-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1100;
    background: var(--bg,#fff);
    transform: none !important;
  }

  html body{ padding-top: calc(var(--safe-top) + var(--m-header-h)) !important; }
  html body main{ margin-top:0 !important; padding-top:0 !important; }

  /* ===== Produkt (szczegóły) – twarde zabezpieczenia przed wychodzeniem poza ekran ===== */
  html body main{ overflow-x:hidden !important; }

  .prod-top, .gallery, .gal-main, .gal-thumbs, .spec-wrap, .spec-grid, .spec-card{ max-width:100%; }
  .gallery, .gal-main, .gal-thumbs{ width:100%; min-width:0; }

  /* Główne zdjęcie – zawsze w 100% szerokości, bez rozpychania */
  .gal-main{ overflow:hidden; }
  .gal-main img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:52vh;
    object-fit:cover;
    display:block;
  }

  /* Miniatury – przewijanie poziome w obrębie kontenera */
  .gal-thumbs{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .gal-thumbs .thumb{ flex:0 0 auto; width:74px; height:54px; }

  /* Obrazek z kolorami */
  .colors-link{ width:100%; }
  .colors-img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block;
  }

  /* "wg specyfikacji" (sekcja KV) – łamanie + na bardzo małych ekranach 1 kolumna */
  .kv{ grid-template-columns:1fr 1fr; }
  .kv .k{ min-width:0; }
  .kv .k > div{ min-width:0; }
  .kv b, .kv .sub{ overflow-wrap:anywhere; word-break:break-word; }
}

@media (max-width:420px){
  .kv{ grid-template-columns:1fr; }
}