/* =========================================================
   RESPONSIVE.CSS — mobilny layout dla całej paczki
   Działa bez ruszania PHP. Desktop pozostaje bez zmian.
   ========================================================= */

/* ---------- Baza / kontenery ---------- */
:root{ --container-pad:16px; --gap:12px; }
* { box-sizing: border-box; }
img,svg,video{ max-width:100%; height:auto; display:block; }
.container{ max-width:1200px; margin:0 auto; padding-inline:var(--container-pad); }

/* ---------- Nagłówek / nawigacja ---------- */
header.nav { position:relative; background:#fff; z-index:50; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__logo, .nav__logoPdf{ height:36px; width:auto; display:block; }
.nav__menu{ display:flex; gap:24px; align-items:center; }
.nav__icons{ display:flex; align-items:center; gap:12px; }
.nav__ico{ display:flex; align-items:center; gap:8px; }
.nav__icoText{ font-weight:700; }

/* Burger domyślnie ukryty */
.nav__burger{ display:none; width:40px; height:40px; border:0; background:transparent; border-radius:8px; align-items:center; justify-content:center; }
.nav__burger svg{ width:24px; height:24px; }

/* <= 960: menu zwijane, burger widoczny */
@media (max-width:960px){
  .nav__burger{ display:inline-flex; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; gap:10px;
    background:#fff; border-top:1px solid #e5e7eb; padding:12px var(--container-pad);
  }
  header.nav.is-open .nav__menu{ display:flex; }
}

/* Napis „Koszyk” ginie na wąskich, zostaje sama ikona */
@media (max-width:768px){ .nav__icoText{ display:none; } }
/* logo lekko mniejsze na mniejszych */
@media (max-width:1024px){ .nav__logo, .nav__logoPdf{ height:32px; } }
@media (max-width:768px){ .nav__logo, .nav__logoPdf{ height:28px; } }

/* ---------- Hero sekcje ---------- */
.co-hero{
  background: var(--bg) center/cover no-repeat;
  min-height: 360px;
  display:flex; align-items:flex-end;
  padding: 32px 0;
}
.co-hero h1{ color:#fff; margin:0 0 16px 0; }
@media (max-width:768px){
  .co-hero{ min-height:220px; padding:24px 0; }
  .co-hero h1{ font-size:28px; }
}

/* ---------- Typografia długich treści (regulamin/polityka/onas) ---------- */
.main-text p{
  max-width: 62ch;                 /* czytelna szerokość linii */
  margin: 0 auto 14px;
  line-height: 1.7;
  font-size: clamp(15px, 1.95vw, 17px);
  text-align:left;
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
}
.main-text h1,.main-text h2,.main-text h3{ text-wrap:balance; }
.main-text ul, .main-text ol{ margin:0 auto 14px; padding-left:1.2rem; max-width:62ch; }
.main-text table{ width:100%; display:block; overflow-x:auto; border-collapse:collapse; }

/* Jeśli sekcja na głównej ma długi opis: */
.why h2{ text-wrap:balance; margin-bottom:10px; }
.why p{ max-width:62ch; margin:0 auto 14px; text-align:left; line-height:1.7; }

/* ---------- Kafelki / siatki na stronach ---------- */
/* Features (4 → 2 → 1) */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:960px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .features{ grid-template-columns:1fr; } }

/* Siatka produktów w sklepie (3 → 2 → 1) */
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1024px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .products-grid{ grid-template-columns:1fr; } }

/* Karty produktów – obrazki nie wychodzą, CTA pełna szerokość na mobile */
.product-card img{ width:100%; height:auto; object-fit:cover; }
@media (max-width:680px){
  .product-card .btn{ width:100%; }
}

/* ---------- Formularze (kontakt / zamówienie) ---------- */
.fld{ padding:12px; border:1px solid #e6e8ea; border-radius:12px; background:#fff; }
.inp{ height:44px; border-radius:10px; width:100%; }
.inp--area{ min-height:120px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }

/* Invoice sekcja – i tak pokazuje/ukrywa JS, tu tylko spacing */
.invoice-fld .invoice-wrap{ margin-top:10px; }
.invoice-fld .co-label{ font-size:13px; font-weight:600; color:#374151; }

/* Kontakt – mapa pod formularzem na mobile */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact iframe, .contact .map{ width:100%; aspect-ratio: 16/10; border:0; }
@media (max-width:860px){
  .contact{ grid-template-columns:1fr; }
  .contact iframe, .contact .map{ aspect-ratio: 16/11; }
}

/* ---------- Koszyk i Zamówienie ---------- */
/* Układ 2 kolumnowy → 1 kolumna */
.co{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:1024px){ .co{ grid-template-columns:3fr 2fr; } }
@media (max-width:860px){
  .co{ grid-template-columns:1fr; }
  .co-form{ order:1; }
  .co-summary{ order:2; }
  .btn--order{ width:100%; }
}

/* Tabele przewijalne w poziomie na wąskich */
table{ width:100%; border-collapse:collapse; }
@media (max-width:760px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Kupon – pionowo na mobile */
.coupon{ display:flex; gap:8px; }
@media (max-width:720px){ .coupon{ flex-direction:column; } }

/* Drobne badge/chips w podsumowaniach mailowych na stronie (jeśli używasz) */
.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:640px){ .chips{ flex-direction:column; align-items:flex-start; } }

/* ---------- Stopka ---------- */
.site-footer .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .site-footer .cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .site-footer .cols{ grid-template-columns:1fr; } }

/* ---------- Utility (przydaje się w treściach) ---------- */
.hide-mobile{ display:initial; }
@media (max-width:768px){ .hide-mobile{ display:none !important; } }

.center { text-align:center; }
.left   { text-align:left; }
.right  { text-align:right; }
.mt-0{ margin-top:0 !important; }
.mt-8{ margin-top:8px !important; }
.mt-12{ margin-top:12px !important; }
.mb-12{ margin-bottom:12px !important; }

/* ===========================
   MOBILE HOTFIX PACK (global)
   =========================== */

/* 1) Flexy: pozwól dzieciom się zwężać zamiast nachodzić */
@media (max-width: 860px){
  .co, .co * { min-width: 0; }          /* krytyczne przy flexboxach */
  .co-summary, .co-form { width: 100%; }
}

/* 2) Wiersze podsumowań: rozbij na dwie linie gdy brak miejsca */
.box__row{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.box__row > *{ min-width:0; }
.box__row strong{ margin-left:auto; }

/* 3) Opcje dostawy/płatności – niech się łamią do wielu kolumn */
.options{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  display:flex; align-items:center; gap:6px;
  flex: 1 1 180px;                     /* 2–3 w rzędzie, potem w dół */
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:10px;
}

/* 4) Formularz: 2 kolumny -> 1 kolumna i pełna szerokość przycisków */
@media (max-width: 720px){
  .grid-2{ display:grid; grid-template-columns:1fr; gap:12px; }
  .btn--order{ width:100%; }
  .coupon{ flex-direction:column; }
}

/* 5) Tabele (koszyk, zamówienie): zawijanie + przewijanie horyzontalne */
@media (max-width: 768px){
  table, .cart-table{
    width:100%;
    table-layout: fixed;               /* równe kolumny – mniej „szarpie” */
    display:block;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  table th, table td,
  .cart-table th, .cart-table td{
    white-space: normal !important;    /* nadpisz ew. nowrap */
    word-break: break-word;
    overflow-wrap: anywhere;
    padding:8px 10px;
    vertical-align: top;
  }
  /* typowe kolumny liczbowe po prawej */
  td.qty, td.price, td.total,
  .cart-table td.qty, .cart-table td.price, .cart-table td.total{ text-align:right; }
}

/* 6) Karty pozycji koszyka (jeśli nie masz tabeli) – uelastycznij */
.cart-item{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.cart-item__name{ flex:1 1 240px; min-width:0; }
.cart-item__qty, .cart-item__price, .cart-item__remove{ flex:0 0 auto; }

/* 7) Teksty: pozwól łamać DŁUGIE nazwy/maile/kupony */
a, p, li, .name, .product-name, .email, .code{
  overflow-wrap:anywhere; word-break:break-word;
}

/* 8) Ikony i odznaki w headerze – nie wypychają wąskich ekranów */
.nav__icons{ display:flex; align-items:center; gap:8px; min-width:0; }
@media (max-width:768px){ .nav__icoText{ display:none; } }

/* 9) Obrazki w kartach i koszyku nigdy nie „wychodzą” z boxów */
.card img, .product-card img, .cart-item img{
  max-width:100%; height:auto; object-fit:cover;
}

/* 10) Kontakt/mapa – jedna kolumna na mobilu */
@media (max-width:860px){
  .contact{ display:grid; grid-template-columns:1fr; gap:16px; }
}

/* 11) Długie treści (regulamin, polityka, o nas) – czytelna szerokość */
.main-text p, .why p{
  max-width:62ch; margin:0 auto 14px; text-align:left;
  line-height:1.7; font-size:clamp(15px,1.95vw,17px);
  -webkit-hyphens:auto; hyphens:auto;
}

/* 12) Bezpieczniki: unicestwiaj twarde nowrapy z innych CSS */
@media (max-width: 860px){
  .nowrap, [style*="white-space:nowrap"]{ white-space:normal !important; }
}

/* ===========================
   EMERGENCY MOBILE FIXES
   (wkleić na SAMYM KOŃCU pliku)
   =========================== */

/* 0) Ogólne: pozwól elementom flex się zwężać */
@media (max-width: 860px){
  .co, .co *, .row, .grid, [class*="grid"], [class*="row"] { min-width: 0; }
}

/* 1) Kafelki/USP na głównej – ZAWSZE 1 kolumna na wąskich */
@media (max-width: 600px){
  .features,
  .home-usp,
  .usp,
  .usp-list,
  .why .features,
  .why-features,
  .cards-4, .boxes-4,
  .cards, .boxes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .features > *, .home-usp > *, .usp > *, .cards > *, .boxes > *, .usp-list > * {
    width: 100% !important;
  }
}

/* 2) Sekcja kroków (01–03) – niech się łamie elegancko */
@media (max-width: 600px){
  .co-steps{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; }
  .co-steps .step{ flex:1 1 90px; text-align:center; }
}

/* 3) Layout zamówienie/koszyk – 2 kolumny -> 1 kolumna */
@media (max-width: 860px){
  .co{ display:grid; grid-template-columns: 1fr !important; gap: 16px; }
  .co-form{ order:1; width:100%; }
  .co-summary{ order:2; width:100%; }
  .btn--order{ width:100%; }
}

/* 4) Tabele (koszyk, zamówienie) – zawijanie + h-scroll gdy trzeba */
@media (max-width: 740px){
  table, .cart-table{
    width:100%;
    table-layout: fixed;                 /* mniej „szarpie” kolumny */
    display:block;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  table th, table td,
  .cart-table th, .cart-table td{
    white-space: normal !important;      /* wymuś zawijanie */
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    padding: 8px 10px;
  }
  /* pierwsza kolumna (nazwa produktu) bierze resztę */
  table th:first-child, table td:first-child,
  .cart-table th:first-child, .cart-table td:first-child{ width: 100%; }
  /* liczby/ceny nie rozpychają */
  table th:nth-child(n+2), table td:nth-child(n+2),
  .cart-table th:nth-child(n+2), .cart-table td:nth-child(n+2){ width:1%; text-align:right; }
  /* pola ilości niech mają stałą, małą szerokość */
  table input[type="number"], .cart-table input[type="number"]{ width:64px; min-width:64px; }
}

/* 5) Opcje dostawy/płatności – kafelki niech się łamią */
.options{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  display:flex; align-items:center; gap:6px;
  flex: 1 1 180px;                        /* 2–3 w rzędzie, potem w dół */
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:10px;
}

/* 6) Wiersze podsumowań – niech nie wychodzą poza box */
.box__row{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.box__row > *{ min-width:0; }
.box__row strong{ margin-left:auto; }

/* 7) Obrazki w kartach/koszyku nie „wychodzą” z ramek */
.card img, .product-card img, .cart-item img{ max-width:100%; height:auto; object-fit:cover; }

/* 8) Formularze 2-kolumnowe -> 1 kolumna, kupon pionowo */
@media (max-width: 720px){
  .grid-2{ display:grid; grid-template-columns:1fr !important; gap:12px; }
  .coupon{ display:flex; flex-direction:column; gap:8px; }
}

/* 9) Złap wszystkie twarde nowrapy (często winowajca nachodzenia) */
@media (max-width: 860px){
  .nowrap, [style*="white-space:nowrap"]{ white-space:normal !important; }
}

/* 10) Długie teksty/maile/kody – zawsze się zwiną */
a, p, li, .name, .product-name, .email, .code{ overflow-wrap:anywhere; word-break:break-word; }

/* === CART: anty–nachodzenie przycisków i ceny === */

/* 1) Ilość: układ jako flex + stałe minimum */
.cart-table td.qty,
table td.qty{
  white-space: nowrap;
}
.cart-table td.qty,
table td:nth-child(2){ /* fallback, jeśli nie masz klasy .qty */
  min-width: 120px;              /* rezerwuje miejsce na [-] [input] [+] */
}
.cart-table td.qty > *{ display:inline-flex; align-items:center; gap:8px; }
.cart-table td.qty input[type="number"]{ width:64px; min-width:64px; text-align:center; }
.cart-table td.qty button{ flex:0 0 auto; }

/* 2) Cena / Suma: wąskie, prawe kolumny + odstęp od ilości */
.cart-table td.price,
.cart-table td.total,
table td:nth-child(3),
table td:nth-child(4){
  width: 88px;                  /* stałe, wąskie kolumny */
  min-width: 78px;
  text-align: right;
  white-space: nowrap;
}
.cart-table td.price,
table td:nth-child(3){
  padding-left: 12px;           /* „odkleja” cenę od pola ilości */
}

/* 3) Usuń: mała stała szerokość */
.cart-table td.remove,
table td:last-child{ width: 48px; min-width:48px; text-align:right; }

/* 4) Bezpieczniki — na naprawdę wąskich ekranach */
@media (max-width: 740px){
  .cart-table{ table-layout: fixed; }
  .cart-table th, .cart-table td{ overflow-wrap:anywhere; word-break:break-word; }
  .cart-table td.qty{ min-width: 128px; }
  .cart-table td.price, .cart-table td.total{ width: 92px; min-width: 92px; }
}

/* 5) Global: komórki mają miejsce na zawijanie, nic nie „przebija” sąsiada */
.cart-table th, .cart-table td{ position: relative; z-index: 0; }

/* Stacked-row fallback (mobile-only) */
@media (max-width: 560px){
  .cart-table thead{ display:none; }
  .cart-table tr{ display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; }
  .cart-table td:nth-child(1){ grid-column: 1 / -1; }   /* produkt na całą szerokość */
  .cart-table td.qty{ grid-column: 1 / 2; }
  .cart-table td.price{ grid-column: 2 / 3; justify-self:end; }
  .cart-table td.total{ grid-column: 3 / 4; justify-self:end; }
  .cart-table td.remove{ grid-column: 3 / 4; justify-self:end; }
}

/* === Uzupełnienia globalne (2025-09-23) === */
@media (max-width: 560px){
  /* Zapobieganie nachodzeniu elementów tekstowych */
  h1,h2,h3,h4,h5,h6, p, .sec-head h2 { word-wrap: break-word; overflow-wrap: anywhere; }
  /* Zmniejsz domyślnie odstępy w hero */
  .hero--home{ min-height: 520px; }
  /* Zmniejsz marginesy sekcji */
  .container{ padding-inline: 14px; }
}

/* === KOSZYK — nagłówek "Produkt / Ilość / Cena" na telefonie === */

/* 1) Telefony ~iPhone SE / bardzo wąskie ≤390px: nic nie nachodzi */
@media (max-width: 390px) {
  /* dopasuj selektor do swojej tabeli koszyka */
  .cart-table,
  .cart table { width: 100%; }

  .cart-table thead tr,
  .cart table thead tr {
    display: grid;
    grid-template-columns: 1.3fr .9fr .9fr; /* Produkt / Ilość / Cena */
    gap: 6px;
  }

  .cart-table thead th,
  .cart table thead th {
    white-space: normal;          /* pozwól zawijanie */
    overflow-wrap: anywhere;      /* łam słowa gdy trzeba */
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.15;
    padding: 8px 6px;
    text-align: left;
  }

  .cart-table tbody tr,
  .cart table tbody tr {
    display: grid;
    grid-template-columns: 1.3fr .9fr .9fr;
    align-items: center;
    gap: 8px;
  }

  /* kolumna ze zdjęciem + nazwą produktu */
  .cart-table td.product,
  .cart table td.product { min-width: 0; }

  /* kolumna ilości – niech się mieści */
  .cart-table td.qty input,
  .cart table td.qty input { min-width: 64px; }

  /* wyrównanie ceny do prawej */
  .cart-table td.price,
  .cart table td.price { text-align: right; }
}

/* 2) Ekstremalnie wąskie ≤340px: układ dwu-rzędowy + etykiety */
@media (max-width: 340px) {
  .cart-table thead,
  .cart table thead { display: none; } /* schowaj wiersz nagłówka */

  .cart-table tbody tr,
  .cart table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;                /* 2 kolumny w rzędzie 2 */
    grid-template-areas:
      "prod prod"                                  /* rząd 1: Produkt */
      "qty  price";                                /* rząd 2: Ilość | Cena */
    gap: 8px 10px;
  }

  /* DOPASUJ klasy, jeśli u Ciebie są inne:
     - .product = komórka z miniaturą + nazwą,
     - .qty     = komórka z kontrolką ilości,
     - .price   = komórka z ceną.
     Jeśli u Ciebie to np. .cart__col--product/.cart__col--qty/.cart__col--price,
     zmień selektory poniżej 1:1. */

  .cart-table td.product,
  .cart table td.product   { grid-area: prod; }
  .cart-table td.qty,
  .cart table td.qty       { grid-area: qty; }
  .cart-table td.price,
  .cart table td.price     { grid-area: price; text-align: right; }

  /* pseudo-etykiety zamiast schowanego thead */
  .cart-table td.qty::before,
  .cart table td.qty::before {
    content: "Ilość";
    display: block;
    font-size: 0.75rem;
    color: #6b7280; /* szarość */
    margin-bottom: 4px;
  }
  .cart-table td.price::before,
  .cart table td.price::before {
    content: "Cena";
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
    text-align: left;
  }

  /* ogólne — pozwól zawijać wszędzie */
  .cart-table td, .cart-table th,
  .cart table td, .cart table th {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* === KOSZYK (grid) — telefony: 3 kolumny i brak nachodzenia === */
/* Do 480px chowamy "Suma" i "Usuń" i zostawiamy: Produkt | Ilość | Cena */
@media (max-width: 480px) {
  .cart__table .t-head,
  .cart__table .t-row {
    display: grid;
    grid-template-columns: 1fr 86px 96px; /* Produkt | Ilość | Cena */
    gap: 8px;
    align-items: center;
  }

  /* schowaj 4. i 5. kolumnę w nagłówku */
  .cart__table .t-head > :nth-child(4),
  .cart__table .t-head > :nth-child(5) { display: none; }

  /* schowaj komórki sumy i usuwania w wierszach pozycji */
  .cart__table .t-row .c--sum,
  .cart__table .t-row .c--rm { display: none; }

  /* niech nazwa produktu może się zawijać i nie wypychała grida */
  .cart__table .c--prod { min-width: 0; }
  .cart__table .c--prod span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
  }

  /* ilość – żeby się mieściła */
  .cart__table .qty__btn { min-width: 30px; height: 30px; }
  .cart__table .qty__input { min-width: 54px; height: 30px; text-align: center; }

  /* cena po prawej */
  .cart__table .c--price { text-align: right; }

  /* nagłówki mniejsze, żeby nie zachodziły */
  .cart__table .t-head { font-size: 13px; }
}

/* bardzo wąskie ekrany (np. 360px i mniej) – jeszcze ciaśniejsze kolumny */
@media (max-width: 360px) {
  .cart__table .t-head,
  .cart__table .t-row {
    grid-template-columns: 1fr 72px 82px;
    gap: 6px;
  }
  .cart__table .qty__btn   { min-width: 28px; height: 28px; }
  .cart__table .qty__input { min-width: 48px; height: 28px; }
}