@media (max-width: 768px) {
  html,
  body {
    max-width: 100vw;
    /* clip zamiast hidden - hidden zrywa position:sticky (nav, cat-bar); hidden zostaje jako fallback dla starych przegladarek */
    overflow-x: hidden !important;
    overflow-x: clip !important;
    background: #1a1a1a;
  }

  .announce-bar {
    max-width: 100vw !important;
    overflow: hidden !important;
    min-height: 32px;
    padding: 0 !important;
    contain: layout paint;
  }

  .announce-track {
    max-width: 100vw;
    min-height: 32px;
    align-items: center;
  }

  .announce-item {
    line-height: 32px;
    white-space: nowrap;
  }

  body:has(#mobileMenu.open) {
    overflow: hidden !important;
  }

  body:has(#mobileMenu.open) .announce-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 260 !important;
  }

  body:has(#mobileMenu.open) nav {
    position: fixed !important;
    top: 32px !important;
    left: 0;
    right: 0;
    z-index: 260 !important;
  }

  body:has(#mobileMenu.open) .cat-bar {
    display: none !important;
  }

  body:has(#mobileMenu.open) #cookieBanner,
  body:has(#mobileMenu.open) .cookie-banner,
  body:has(#mobileMenu.open) .float-pill,
  body:has(#mobileMenu.open) #stickyBar,
  body:has(#mobileMenu.open) #scrollTopBtn {
    display: none !important;
  }

  .mobile-menu {
    top: 0 !important;
    z-index: 250 !important;
    background: #0f0f0f !important;
    padding-top: 0;
    pointer-events: none;
  }

  .mobile-menu.open {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: 104px;
    overflow-y: auto !important;
    box-shadow: none !important;
    pointer-events: auto;
  }

  .cart-sidebar {
    right: 0 !important;
    transform: translateX(100%);
    transition: transform 0.3s;
  }

  .cart-sidebar.open {
    transform: translateX(0);
  }

  footer {
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 40px 20px !important;
  }

  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100% !important;
  }

  footer * {
    max-width: 100%;
  }

  #cookieBanner {
    padding: 10px 14px !important;
  }

  #cookieBanner > div {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #cookieBanner p {
    min-width: 0 !important;
    flex-basis: 100% !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #cookieBanner button {
    padding: 9px 16px !important;
    font-size: 12px !important;
  }

  body:has(#productLayout) #productLayout {
    min-height: 1180px !important;
  }

  body:has(#productLayout) .product-layout {
    width: 100%;
    max-width: 100%;
    padding: 0 16px 36px !important;
  }

  body:has(#productLayout) .gallery,
  body:has(#productLayout) .product-info,
  body:has(#productLayout) .tabs-section,
  body:has(#productLayout) .tab-content {
    max-width: 100%;
    min-width: 0;
  }

  body:has(#productLayout) .tabs-section {
    padding: 0 16px 36px !important;
  }

  body:has(#productLayout) .tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 24px;
    overflow: visible;
  }

  body:has(#productLayout) .tab-btn {
    width: 100% !important;
    min-width: 0;
    min-height: 42px;
    padding: 11px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    color: #b8b8b8 !important;
    background: #111 !important;
    border-color: #2f2f2f !important;
    border-width: 1px !important;
    border-style: solid !important;
    margin: 0 !important;
  }

  body:has(#productLayout) .tab-btn.active {
    color: #fff !important;
    background: #181818 !important;
    border-color: #ffa825 !important;
  }

  body:has(#productLayout) .tab-content.active {
    min-height: 0 !important;
  }

  body:has(#productLayout) .long-description-section {
    margin-top: 24px !important;
    padding: 24px 0 0 !important;
  }

  body:has(#productLayout) .long-description-section .long-desc-inner > h2,
  body:has(#productLayout) .long-description-section .long-desc-inner > h3,
  body:has(#productLayout) .long-description-section .long-desc-inner > p,
  body:has(#productLayout) .long-description-section .long-desc-inner > ul,
  body:has(#productLayout) .opis-anim,
  body:has(#productLayout) .opis-anim-r,
  body:has(#productLayout) .desc-features li,
  body:has(#productLayout) #tab-opis .fd-li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   POPRAWKI WSPOLNE (mobile + desktop) - 2026-07-19
   Strony produktow to 2649 statyk z CSS wklejonym w kazda z nich; ten arkusz
   jest jedynym wspolnym punktem, wiec drobne korekty wygladu ida tutaj
   zamiast regeneracji wszystkich stron.
   ========================================================================= */

/* Popupy sklepu mialy ostre rogi i odstawaly od reszty UI (karty 12-16px,
   przyciski 4-8px). Dotyczy popupu "dodano do koszyka" i okna upsellu. */
.cart-popup{border-radius:14px;}
.cart-popup img{border-radius:8px;}

/* Upsell nie mial ani ramki, ani cienia - wygladal jak plaski prostokat. */
.upsell-box{border-radius:16px;border:1px solid #2a2a2a;box-shadow:0 24px 60px rgba(0,0,0,0.6);}
.upsell-box img{border-radius:10px;}

/* Przyciskow celowo NIE ruszamy: sklep ma globalna regule button{border-radius:4px}
   o wyzszej specyficznosci (5x :not()), wiec wlasne 8px byloby martwym kodem -
   i tak lepiej, zeby przyciski w popupach wygladaly jak wszedzie indziej. */

/* Ptaszek potwierdzenia "dodano do koszyka" byl zielony (#22c55e) - jedyny obcy kolor
   w calym UI. Pomaranczowy, tak jak ptaszki .anim-check w boxach zaufania.
   Arkusz laduje sie PO inline <style> statyk, wiec przy rownej specyficznosci wygrywa. */
.success-anim circle,
.success-anim path{stroke:#FFA825;}

/* Dymek Kreatora w pasku kategorii (2026-07-21): po najechaniu opis + notka beta.
   Pasek jest ciemny, wiec karta dymka tez ciemna. Tekst resetuje uppercase/spacing
   dziedziczone z .cat-bar-link. Pojawia sie pod wpisem, z-index nad paskiem. */
.cat-bar-kreator{position:relative;}
.cat-bar-kreator .kreator-tip{display:none;position:absolute;top:calc(100% - 2px);left:12px;z-index:400;
  width:300px;padding:14px 16px;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,0.6);text-align:left;}
.cat-bar-kreator .kreator-tip p{margin:0;font-size:12.5px;line-height:1.55;color:#ddd;font-weight:500;
  letter-spacing:normal;text-transform:none;}
.cat-bar-kreator .kreator-tip .kt-beta{margin-top:9px;padding-top:9px;border-top:1px solid #262626;
  font-size:10.5px;color:#999;font-weight:600;letter-spacing:0.3px;text-transform:none;}
.cat-bar-kreator:hover .kreator-tip{display:block;}

/* ===== 2026-07-28: obszary dotyku w nawigacji (audyt mobilny) =====
   Ikona koszyka miala 34px, hamburger 30x24 - ponizej progu wygodnego trafienia palcem.
   Plik jest wspolny dla listingu i wszystkich stron produktow, wiec regula dziala wszedzie.
   Wymiary samych ikon bez zmian - rosnie tylko klikalne pole. */
@media (max-width: 768px) {
  .nav-cart,
  .nav-search-btn,
  .hamburger {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-cart,
  .nav-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hamburger {
    align-items: center;
    justify-content: center;
  }
}

/* ===== STOPKA NA TELEFONIE: WYSRODKOWANA (2026-07-30) =====
   Zglosil Damian: kolumny stopki (Kontakt, Dane firmy, Kategorie, Dokumenty) byly
   wyjustowane do lewej. Siatka stopki nie ma klasy - jest wklejona inline w kilkunastu
   plikach - dlatego selektor celuje w atrybut style i musi miec !important. */
@media (max-width: 640px) {
  footer div[style*="grid-template-columns"] { text-align: center !important; }
  footer div[style*="grid-template-columns"] > div { align-items: center !important; }
}