/* Pokój Artysty — arkusz wspólny dla wszystkich podstron.
   Układ i kolory siedzą w atrybutach style= przy elementach (tak powstała makieta);
   tutaj są rzeczy wspólne: reset, ruch, stany hover i wersja mobilna. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: #756756;
  color: #2C2A25;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* Nagłówki są tu wyłącznie po to, żeby struktura strony była czytelna dla Google
   i czytników ekranu — wygląd w całości ustawiają atrybuty style= przy elementach. */
h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; }

/* skrót dla osób poruszających się klawiaturą — widoczny dopiero po sfokusowaniu */
.do-tresci {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #FFFDF8; color: #2C2A25; border: 2px solid #836320;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 999px; transition: top .18s ease;
}
.do-tresci:focus { top: 12px; }

a { color: #6F551C; text-decoration: none; transition: color .2s ease; }
a:hover { color: #5A4517; }

/* czytelne obramowanie przy nawigacji klawiaturą */
a:focus-visible, button:focus-visible {
  outline: 2px solid #836320;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── menu: złota kreska wysuwa się spod pozycji ── */
/* Jeden mechanizm dla pozycji aktywnej i dla hoveru — inaczej robily sie dwie kreski. */
.nav-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 0 !important;
  transition: color .2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.4,0,.2,1), background-color .2s ease;
}
.nav-links a.active { color: #557891 !important; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover,
.nav-links a:focus-visible { color: #557891 !important; }
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); background: #557891; }

/* ── karty kontaktu ── */
.karta { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.karta:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(61, 59, 52, .16); }

/* ── karty produktów ──
   Reaguje SAMO ZDJĘCIE, nie cała karta — dzięki temu widać własny hover przycisku
   „Dodaj do koszyka" i nic nie skacze pod kursorem. */
.foto { overflow: hidden; }
.foto img { transition: transform .5s cubic-bezier(.4,0,.2,1), filter .3s ease; }
.foto::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(28, 24, 18, 0.08);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.foto:hover img { transform: scale(1.06); }
.foto:hover::after { opacity: 1; }

div[data-card] { cursor: default; }

/* ── linki w stopce (jasny tekst na brązie) ──
   UWAGA: nie celuj tu w [style*="background: #756756"] — korzeń strony ma to samo tło,
   więc taka reguła podkreślała WSZYSTKIE linki, w tym menu (stąd „podwójne podkreślenie”). */
.stopka a { transition: color .2s ease, text-decoration-color .2s ease; }
.stopka a:hover {
  color: #D4E0E8 !important;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* ── karty opinii (tło z pejzażu) ── */
.karta-opinii { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.karta-opinii img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.karta-opinii:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(61, 59, 52, .12); }
.karta-opinii:hover img { transform: scale(1.05); }

/* ── galeria na karcie produktu ── */
.glowne-zdjecie { cursor: zoom-in; transition: opacity .25s ease; }
.miniatura {
  outline: 2px solid transparent; outline-offset: -2px;
  transition: outline-color .2s ease, opacity .2s ease;
}
.miniatura:hover { opacity: .82; }
.miniatura.wybrana { outline-color: #836320; opacity: 1; }

/* powiększenie na pełny ekran */
.lupa {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: rgba(24, 21, 16, .93); padding: 40px 20px;
}
.lupa.otwarta { display: grid; animation: wejscie .2s ease both; }
.lupa img {
  max-width: min(92vw, 1000px); max-height: 86vh;
  object-fit: contain; display: block; background: #FFFFFF;
}
.lupa button {
  position: absolute; width: 46px; height: 46px; border: 0; border-radius: 999px;
  background: rgba(255, 253, 248, .92); color: #2C2A25;
  font-size: 21px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s ease, transform .2s ease;
}
.lupa button:hover { background: #FFFFFF; transform: scale(1.06); }
.lupa-zamknij { top: 18px; right: 18px; }
.lupa-poprz { left: 18px; top: 50%; margin-top: -23px; }
.lupa-nast { right: 18px; top: 50%; margin-top: -23px; }
.lupa-podpis {
  position: absolute; bottom: 18px; left: 20px; right: 20px; text-align: center;
  color: rgba(255, 253, 248, .88); font-size: 14.5px;
}
body.bez-przewijania { overflow: hidden; }

@media (max-width: 620px) {
  .lupa { padding: 16px 10px; }
  .lupa button { width: 40px; height: 40px; }
  .lupa-poprz { left: 8px; }
  .lupa-nast { right: 8px; }
}

/* ── feed z Instagrama ── */
.ig-widget[hidden] { display: none !important; }
.ig-zapas[hidden] { display: none !important; }

/* ── kafelki w sekcji Instagram ── */
.insta-kafel {
  position: relative; display: block; overflow: hidden; border-radius: 12px;
  line-height: 0;
}
.insta-kafel img { border-radius: 12px; }
.insta-ikona {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(28, 24, 18, 0.34);
  opacity: 0; transition: opacity .28s ease;
}
.insta-ikona svg {
  width: 30px; height: 30px; stroke: #FFFDF8; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transform: scale(.82); transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.insta-kafel:hover .insta-ikona,
.insta-kafel:focus-visible .insta-ikona { opacity: 1; }
.insta-kafel:hover .insta-ikona svg { transform: scale(1); }
/* rolka — mały znaczek „odtwórz” w rogu, widoczny zawsze */
.insta-rolka {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.insta-rolka svg { width: 100%; height: 100%; fill: #FFFDF8; }

/* ── ikona Instagrama w menu ── */
.nav-ig svg { transition: stroke .2s ease, transform .2s ease; }
.nav-ig:hover svg, .nav-ig:focus-visible svg { stroke: #557891 !important; transform: translateY(-2px); }
.nav-ig::after { display: none; }   /* to ikona, nie pozycja menu — bez kreski */

/* ── logo ── */
.logo { display: inline-block; transition: opacity .2s ease, transform .2s ease; }
.logo:hover { opacity: .78; transform: translateY(-1px); }

/* ── formularze (newsletter, powiadomienie o dostępności) ── */
.pole {
  font: inherit; font-size: 16px; color: #2C2A25;
  background: #FFFFFF; border: 1px solid #E2D8C2; border-radius: 999px;
  padding: 14px 24px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pole::placeholder { color: #6E675B; }
.pole:hover { border-color: #C9B788; }
.pole:focus {
  outline: none; border-color: #836320;
  box-shadow: 0 0 0 3px rgba(131, 99, 32, .20);
}
/* czerwona obwódka tylko gdy w polu coś jest i to coś jest błędne — puste pole nie straszy */
.pole:user-invalid:not(:placeholder-shown) { border-color: #C0553C; }
.zapis { align-items: stretch; }
.zgoda { font-size: 12.5px; line-height: 1.55; color: #6E675B; text-align: left; margin-top: 2px; }
.zgoda a { color: #6F551C; border-bottom: 1px solid #D9CDB4; }
.zgoda a:hover { color: #2C2A25; border-bottom-color: #836320; }
/* Link w środku zdania (np. mail pod koszykiem, regulamin) musi się odróżniać
   nie tylko kolorem — inaczej osoba słabiej widząca go nie zauważy (WCAG 1.4.1).
   Ta sama cienka kreska co w zgodach pod formularzami. Menu, stopka i
   poradniki mają własny wygląd linków, więc je pomijamy. */
a:not([class]):not([style]):not(nav a):not(.stopka a):not(.zgoda a):not(.insp-kolumna a):not(.insp-wstep a) { border-bottom: 1px solid #D9CDB4; }
a:not([class]):not([style]):not(nav a):not(.stopka a):not(.zgoda a):not(.insp-kolumna a):not(.insp-wstep a):hover { border-bottom-color: #836320; }
.info-zapisu {
  font-size: 14.5px; line-height: 1.6; color: #52503F;
  background: #FBF6EA; border-left: 3px solid #836320;
  padding: 12px 16px; margin-top: 2px;
  animation: wejscie .35s ease both;
}
.info-zapisu .ponow-zapis { display: block; margin-top: 8px; }
.info-zapisu .ponow-zapis[hidden] { display: none; }
.info-zapisu .ponow-zapis button {
  font: inherit; color: #836320; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.info-zapisu .ponow-zapis button:hover { color: #6F551C; }
.info-zapisu .ponow-zapis button:disabled { color: #6E675B; cursor: default; text-decoration: none; }

/* przyciski ciemnieją po najechaniu: złote #836320 → #6F551C, błękitne #a5b8c6 → #8CA3B4 */
[style*="background: #836320"],
[style*="background: #a5b8c6"] { transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease; }
[style*="background: #836320"]:hover { background: #6F551C !important; }
[style*="background: #a5b8c6"]:hover { background: #8CA3B4 !important; }

/* przycisk w karcie — cała karta jest linkiem, więc to tylko wygląd, ale reaguje sam na siebie */
.btn-karta { transition: background-color .22s ease, box-shadow .22s ease; }
.btn-karta:hover { box-shadow: 0 8px 20px rgba(61,59,52,.18); }

/* „Powiadom mnie o dostępności" na kafelku — obrys wypełnia się na najechanie */
.powiadom { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; }
.powiadom:hover { background: #2C2A25 !important; color: #FFFDF8 !important; transform: translateY(-2px); }

/* ── kafelki „Jak to działa" ── */
.krok { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.krok img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.krok .zaslona { transition: background-color .3s ease; }
.krok:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(61, 59, 52, .14); }
.krok:hover img { transform: scale(1.07); }
.krok:hover .zaslona { background: rgba(255, 252, 242, 0.70) !important; }

/* ── FAQ: rozwijane odpowiedzi ── */
.faq { transition: border-color .2s ease, box-shadow .2s ease; }
.faq:hover { border-color: #D8CDB4 !important; box-shadow: 0 8px 20px rgba(61,59,52,.07); }
.faq-pytanie { cursor: pointer; user-select: none; }
.faq-pytanie:hover > div:first-child { color: #6F551C !important; }
.faq-znak { transition: transform .25s ease, color .2s ease; }
.faq.otwarte .faq-znak { color: #6F551C !important; }
.faq-odp { animation: wejscie .35s ease both; }
.faq-pytanie:focus-visible { outline: 2px solid #836320; outline-offset: -2px; }

/* ── przyciski ── */
.btn { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(61,59,52,.20); filter: brightness(.96); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* ── zdjęcia w galeriach (Instagram, opinie, podglądy stron) ── */
.zoom { overflow: hidden; }
.zoom img, .galeria img { transition: transform .55s cubic-bezier(.4,0,.2,1), filter .3s ease; }
.galeria img:hover { transform: scale(1.06); filter: saturate(1.06); }

/* ── zakładki na karcie produktu ── */
.tab { background: none; border: 0; font: inherit; transition: color .2s ease, border-color .2s ease; }
.tab:hover { color: #6F551C !important; }
.panel[hidden] { display: none; }
.panel { animation: wejscie .45s cubic-bezier(.2,.7,.3,1) both; }

/* ── sekcje wchodzą przy przewijaniu ── */
.odslon { opacity: 0; transform: translateY(26px); }
.odslon.widoczna {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

@keyframes wejscie { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* hero: powolne, subtelne przybliżenie tła */
.hero > img { animation: oddech 24s ease-in-out infinite alternate; }
@keyframes oddech { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ── menu: 901–1180 px — 8 pozycji w menu (od 03.11 z Inspiracjami) musi zmieścić się w jednej linii ── */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-header { padding-left: 28px !important; padding-right: 28px !important; }
  .nav-links { gap: 20px !important; }
  .nav-links a { font-size: 14.5px !important; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .nav-links { gap: 15px !important; }
  .nav-links a { font-size: 14px !important; }
}

/* ── menu mobilne ── */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }

@media (max-width: 900px) {
  .site-root { min-width: 0 !important; }
  .nav-links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: flex-start !important;
    gap: 18px !important; padding: 22px 26px 28px !important;
    background: #FFFFFF; border-bottom: 1px solid #EEE8DA;
    box-shadow: 0 14px 30px rgba(61,59,52,.10); z-index: 60;
  }
  .nav-links.open { display: flex !important; animation: wejscie .3s ease both; }
  .nav-toggle { display: block; }
  .site-header { position: relative; }

  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display: grid"][style*="repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* feed z Instagrama ma zmienną liczbę kolumn ustawianą z JS — na telefonie zwykle trzy,
     ale przy jednym czy dwóch postach trzy kolumny dałyby śmiesznie małe kafelki */
  .ig-widget { grid-template-columns: repeat(3, 1fr) !important; max-width: none !important; }
  .ig-widget[data-ile="1"] { grid-template-columns: 1fr !important; max-width: 320px !important; }
  .ig-widget[data-ile="2"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="max(48px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Nagłówek hero ma się mieścić w DWÓCH wierszach na każdym telefonie —
     stąd skalowanie z szerokością ekranu zamiast sztywnych progów. */
  h1, [style*="font-size: 56.5px"] { font-size: clamp(18px, 6vw, 32px) !important; line-height: 1.22 !important; }
  [style*="font-size: 44px"] { font-size: 29px !important; line-height: 1.28 !important; }
  [style*="font-size: 35.5px"], [style*="font-size: 33.5px"] { font-size: 25px !important; line-height: 1.3 !important; }
  [style*="font-size: 20.5px"] { font-size: 17.5px !important; line-height: 1.75 !important; }
  [style*="font-size: 19px"], [style*="font-size: 18.5px"], [style*="font-size: 18px"] { line-height: 1.8 !important; }
  [style*="font-size: 17.5px"], [style*="font-size: 17px"] { line-height: 1.8 !important; }
  /* nagłówek sekcji potrzebuje powietrza nad treścią */
  [style*="letter-spacing: 0.24em"] { letter-spacing: 0.18em !important; }

  /* ── hero: niech oddycha ── */
  .hero { height: auto !important; }
  .hero > div:last-child {
    height: auto !important;
    padding-top: 88px !important; padding-bottom: 88px !important;
    gap: 22px !important;
  }
  .hero > div:last-child > div:nth-child(4) { margin-top: 18px !important; }

  .about-cutout { width: 100% !important; margin-left: 0 !important; }

  /* nic nie może być szersze niż ekran */
  [style*="width: 380px"], .zapis { width: 100% !important; max-width: 100% !important; }
  [style*="width: 106%"], [style*="width: 108%"] { width: 100% !important; margin-left: 0 !important; }

  /* Trzy fakty pod przyciskami łamią się na telefonie na trzy linijki.
     Kropki rozdzielające zostawały wtedy na końcach linii i wyglądały
     jak literówki — na wąskim ekranie je chowamy. */
  .hero-fakty { gap: 4px !important; flex-direction: column !important; }
  .hero-fakty span[aria-hidden] { display: none !important; }

  /* przyciski w hero i pod sekcjami: jeden pod drugim, na pełną szerokość */
  .hero [style*="display: flex"][style*="gap: 14px"],
  .hero [style*="display: flex"][style*="gap: 16px"] {
    flex-direction: column !important; align-items: stretch !important; width: 100%;
  }
  .hero .btn, .hero [style*="border-radius: 999px"] { text-align: center; width: 100%; }

  /* Zakladki na karcie produktu. Przewijanie w poziomie chowalo ostatnia zakladke
     poza ekranem — nikt jej nie znajdowal. Zamiast tego lamiemy je na dwa rzedy. */
  .tabs {
    flex-wrap: wrap !important;
    gap: 4px 22px !important;
    margin-bottom: 26px !important;
  }
  .tab {
    white-space: nowrap; flex: 0 0 auto;
    font-size: 15px !important;
    padding: 0 0 10px !important;
  }

  /* rytm sekcji: równe, spokojne odstępy zamiast desktopowych 88–92 px */
  [style*="padding: 92px"], [style*="padding: 88px"], [style*="padding: 76px"] {
    padding-top: 64px !important; padding-bottom: 64px !important;
  }
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }
  /* siatki (kroki, produkty, opinie) — jedna kolumna, więc odstęp może być mniejszy */
  [style*="display: grid"][style*="margin-top: 56px"] { margin-top: 34px !important; }
  [style*="display: grid"][style*="gap: 32px"],
  [style*="display: grid"][style*="gap: 30px"],
  [style*="display: grid"][style*="gap: 28px"],
  [style*="display: grid"][style*="gap: 26px"] { gap: 22px !important; }
  /* kafelki „Jak to działa" — więcej powietrza w środku */
  .krok { padding: 44px 26px !important; }

  /* dolny pasek stopki jeden pod drugim */
  [style*="border-top: 1px solid rgba(255,253,248"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 8px !important;
    text-align: left !important;
  }

  /* wygodne cele dotyku */
  .nav-links a { padding: 6px 0 10px; font-size: 17px !important; }
  .btn, button.btn { min-height: 48px; }
}

/* tablet: karty spokojnie mieszczą się po dwie — telefonów (do 600 px) to nie dotyczy */
@media (min-width: 601px) and (max-width: 900px) {
  [style*="display: grid"][style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 520px) {
  /* UWAGA: nie zwężamy tu siatek do dwóch kolumn — karty produktów, kroki i opinie
     mają być JEDNA na ekran. Wyjątkiem są miniatury (Instagram, podglądy stron),
     które obsługuje reguła repeat(6) wyżej. */
  [style*="max(48px"] { padding-left: 18px !important; padding-right: 18px !important; }
  .hero > div:last-child { padding-top: 76px !important; padding-bottom: 76px !important; }
}

/* szanujemy ustawienie „ogranicz ruch” w systemie */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .odslon { opacity: 1; transform: none; }
}

/* ── koszyk w nagłówku ──────────────────────────────────────────────
   Ikona prowadzi na stronę zamówienia, a liczba przy niej mówi, ile
   zestawów czeka. Licznik pokazuje się dopiero, gdy coś w koszyku jest —
   pusta plakietka przy ikonie wygląda jak błąd. */
.ikona-koszyka { position: relative; display: inline-flex; line-height: 0 }
.licznik-koszyka {
  position: absolute; top: -7px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #a5b8c6; color: #17150F;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 11.5px;
  line-height: 18px; text-align: center; box-sizing: border-box;
}


/* ── kafelki „Podobne zestawy” ──────────────────────────────────────
   Były zwykłymi divami z „łapką” i atrybutem data-goto, którego nic nie
   obsługiwało — kursor obiecywał kliknięcie, a kliknięcie nic nie dawało.
   Teraz to linki; dokładamy im widoczną reakcję na najechanie i obwódkę
   przy chodzeniu po stronie klawiaturą. */
.kafelek-podobny {
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.kafelek-podobny:hover {
  border-color: #836320;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 42, 37, 0.08);
}
.kafelek-podobny:focus-visible {
  outline: 2px solid #836320;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kafelek-podobny, .kafelek-podobny:hover { transition: none; transform: none; }
}


/* ── pasek koszyka przy dolnej krawędzi ─────────────────────────────
   Pokazuje się dopiero, gdy w koszyku coś jest. Ma wyglądać jak część
   sklepu, nie jak baner zgody na ciasteczka — te ludzie zamykają odruchowo,
   nie czytając. Stąd kolory strony, brak przyciemnienia tła i brak krzyżyka.
   z-index niżej niż nakładka menu (200), żeby nie zasłaniał otwartego menu. */
.pasek-koszyka {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: #FFFDF8;
  border-top: 1px solid #E7DFCE;
  box-shadow: 0 -6px 24px rgba(44, 42, 37, 0.10);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(115%);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.pasek-koszyka.widac { transform: none; }

.pasek-koszyka-tresc {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pasek-koszyka-tresc .pasek-koszyka-ile { flex: 1 1 auto; min-width: 0; }

/*  Okładki jedna na drugiej — przy trzech zestawach zajmują tyle miejsca
    co półtorej miniatury, a wciąż widać, że jest ich kilka. */
.pasek-koszyka-foty { display: flex; flex: 0 0 auto; }
.pasek-koszyka-foty:empty { display: none; }
.pasek-koszyka-foto {
  width: 44px; height: 44px;
  object-fit: cover;
  border: 2px solid #FFFDF8;
  border-radius: 8px;
  background: #F1EBDD;
  display: block;
}
.pasek-koszyka-foto + .pasek-koszyka-foto { margin-left: -16px; }
.pasek-koszyka-ile {
  font-family: Poppins, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: #2C2A25;
  /*  Nazwa zestawu bywa długa („Karty pracy — Obrazy Claude'a Moneta”).
      Na wąskim ekranie przycinamy ją do dwóch linijek, zamiast pozwolić
      jej rozepchać pasek na pół ekranu. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pasek-koszyka-akcja {
  font-family: Poppins, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  background: #a5b8c6;
  color: #17150F;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.pasek-koszyka-akcja:hover { background: #8CA3B4; }
.pasek-koszyka-akcja:focus-visible { outline: 2px solid #2C2A25; outline-offset: 2px; }

/*  Odstęp u dołu strony, żeby pasek nigdy nie zasłonił stopki ani
    przycisku w formularzu. Dokładamy go tylko wtedy, gdy pasek jest. */
body.ma-pasek-koszyka { padding-bottom: 84px; }

@media (max-width: 600px) {
  .pasek-koszyka-tresc { gap: 10px; }
  .pasek-koszyka-ile { font-size: 14px; }
  .pasek-koszyka-akcja { padding: 12px 16px; font-size: 14.5px; }
  .pasek-koszyka-foto { width: 40px; height: 40px; }
  .pasek-koszyka-foto + .pasek-koszyka-foto { margin-left: -14px; }
  body.ma-pasek-koszyka { padding-bottom: 92px; }
}

/*  Na najwęższych ekranach nazwa, miniatura i przycisk nie zmieszczą się
    w jednej linii bez ściskania przycisku do nieczytelnego rozmiaru.
    Wtedy przycisk schodzi niżej i zajmuje całą szerokość — przy okazji
    staje się dużo wygodniejszym celem dla kciuka. */
@media (max-width: 430px) {
  .pasek-koszyka-tresc { flex-wrap: wrap; }
  .pasek-koszyka-ile { flex: 1 1 140px; }
  .pasek-koszyka-akcja { flex: 1 0 100%; text-align: center; }
  body.ma-pasek-koszyka { padding-bottom: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  .pasek-koszyka { transition: none; }
}


/* ── „Co oferuje Pokój Artysty” i karuzela stron ───────────────────
   Gora: stos wydrukowanych stron po lewej, lista powodow po prawej.
   Stos ma stale proporcje, wiec skaluje sie razem z kolumna i nie
   wymaga podawania wysokosci w pikselach na kazdy ekran osobno. */
.oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
/*  Powod ma wiecej wciecia, niz widac: przy najechaniu tlo musi miec
    gdzie sie rozlac, a tekst nie moze przez to drgnac. Ujemny margines
    cofa to wciecie, zeby kolumna tekstu stala tam, gdzie stala. */
.korzysc { padding: 20px 16px; margin: 0 -16px; }
.korzysc.z-kreska { border-top: 1px solid #EEE8DA; }
/*  width: 100% nie jest ozdoba — wszystkie dzieci stosu sa
    pozycjonowane absolutnie, wiec bez tego element zwezilby sie
    do zera i na telefonie stos w ogole by sie nie pokazal.  */
.stos { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.stos img {
  position: absolute;
  display: block;
  border: 1px solid #EEE8DA;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(40, 36, 30, 0.16);
}

/*  Rzad kart zaczyna sie blisko lewej krawedzi, zeby od razu bylo widac
    piec kart i skrawek szostej — wczesniej wciecie bylo liczone jak
    dla kolumny tekstu i razem ze strzalka zostawialo z lewej strony
    prawie dwiescie pikseli pustki. Wciecie trzyma teraz oprawa,
    a sam pas przewijania nie ma zadnego. */
.karuzela-oprawa {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin-top: 50px; padding: 0 24px;
}
.karuzela {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* pionowe wciecie zostaje: na cien i przekrzywienie kart */
  padding: 22px 0 16px;
  scrollbar-width: none;
}
.karuzela::-webkit-scrollbar { display: none; }
.karuzela:focus-visible { outline: 2px solid #836320; outline-offset: 4px; }
.strona-zestawu { flex: 0 0 auto; width: 200px; margin: 0; scroll-snap-align: start; }
.strona-kadr {
  transform: rotate(var(--obrot, 0deg));
  background: #FFFFFF;
  padding: 10px;
  border: 1px solid #EEE8DA;
  box-shadow: 0 14px 30px rgba(40, 36, 30, 0.10);
}
.strona-zestawu img { width: 100%; height: auto; display: block; }
.strona-zestawu figcaption {
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 13.5px;
  line-height: 1.4; letter-spacing: 0.02em; color: #6E675B; text-align: center; padding-top: 14px;
}
.karuzela-strzalka {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px;
  border: 1.5px solid #E2D8C2; background: #FFFFFF; cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease, border-color .2s ease;
}
.karuzela-strzalka svg { width: 22px; height: 22px; stroke: #2C2A25; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.karuzela-strzalka:hover { background: #F1E8D7; border-color: #836320; }
.karuzela-strzalka[disabled] { opacity: 0.35; cursor: default; }
.karuzela-strzalka[disabled]:hover { background: #FFFFFF; border-color: #E2D8C2; }

/* ── film w karuzeli ──────────────────────────────────────────────
   Film jest pionowy 9:16, strony maja proporcje kartki A4. Zeby karta
   z filmem nie wystawala ponizej sasiednich i zeby podpisy stanely
   w jednej linii, kadrujemy film do proporcji kartki — obcina to
   gorny i dolny skrawek dywanu, czyli nic, co trzeba widziec. */
.strona-film video {
  width: 100%;
  aspect-ratio: 438 / 620;
  object-fit: cover;
  display: block;
  background: #2C2A25;
}

/* ── „Co rozwija” ──────────────────────────────────────────────────
   Piec ikon rysowanych SVG. Kolory stonowane i z jednej rodziny —
   kazda inna, ale zadna nie krzyczy. */
.rozwija {
  display: grid;
  /*  Sześć pozycji, a nazwy długie („Motoryka mała i grafomotoryka”),
      więc trzy w rzędzie, nie sześć — inaczej podpisy łamią się
      na cztery wiersze i siatka faluje. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 24px;
  margin-top: 54px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.rozwija-kafel { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rozwija-ikona { width: 92px; height: 92px; display: block; }
.rozwija-nazwa {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px;
  line-height: 1.4; color: #2C2A25; max-width: 200px;
}

/* ── najechanie myszka ─────────────────────────────────────────────
   Tylko tam, gdzie mysz naprawde jest. Na ekranie dotykowym stan
   hover zostaje po dotknieciu i element swieci sie, dopoki ktos nie
   dotknie czegos innego — wyglada jak zaciecie strony. */
@media (hover: hover) {
  .korzysc { transition: background-color .25s ease, box-shadow .25s ease; }
  .korzysc:hover {
    background: #FDFBF5;
    /* zlota kreska wjezdza od lewej, zamiast przesuwac tekst */
    box-shadow: inset 2px 0 0 #B8A06A;
  }
  .korzysc-nr { transition: color .25s ease; }
  .korzysc:hover .korzysc-nr { color: #836320; }

  /* Karta prostuje sie i lekko rosnie, jakby ktos podniosl ja ze stosu. */
  .strona-kadr { transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease; }
  .strona-zestawu:hover .strona-kadr {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 24px 46px rgba(40, 36, 30, 0.20);
  }
  .strona-zestawu figcaption { transition: color .25s ease; }
  .strona-zestawu:hover figcaption { color: #2C2A25; }
}

@media (max-width: 900px) {
  /* Stos idzie nad tekst. Proporcje zostaja kwadratowe: splaszczony
     kadr nie miescil w sobie obroconych kartek i te wychodzily poza
     niego, wchodzac na naglowek sekcji. */
  .oferta { grid-template-columns: 1fr !important; gap: 34px !important; }
  .stos { max-width: 360px; margin: 0 auto; }
  /* Strzalki zabieraja na waskim ekranie miejsce nalezne obrazkowi —
     tam przewija sie palcem. */
  .karuzela-strzalka { display: none; }
  /* Na telefonie wciecie daje sama oprawa — strzalek i tak nie ma. */
  .karuzela { gap: 16px; }
  .strona-zestawu { width: 232px; }
  /* Piec ikon w rzedzie na telefonie zrobiloby z nich znaczki
     pocztowe — ida po dwie, ostatnia na calej szerokosci. */
  .rozwija { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 14px !important; }
  .rozwija-ikona { width: 76px; height: 76px; }
  .rozwija-nazwa { font-size: 14.5px; }
}


/* ── film: zajawka w karcie i powiekszony podglad ──────────────────
   W karcie leci wyciszona zajawka BEZ przyciskow — przy karcie szerokiej
   na 276 px pasek sterowania zajmowal pol obrazka i nie dalo sie w niego
   trafic palcem. Cala karta jest teraz przyciskiem, a film otwiera sie
   w powiekszeniu, gdzie przyciski maja normalna wielkosc. */
.film-otworz {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(28, 24, 18, 0.28);
  transition: transform .25s ease, background-color .25s ease;
}
.film-play svg { width: 26px; height: 26px; fill: #2C2A25; margin-left: 2px; }
.film-otworz:focus-visible { outline: 2px solid #836320; outline-offset: 3px; }

.podglad {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
}
.podglad[hidden] { display: none; }
.podglad-tlo {
  position: absolute; inset: 0;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(24, 20, 15, 0.86);
}
.podglad-ramka { position: relative; }
.podglad-ramka video {
  display: block;
  max-height: 84vh; max-width: min(92vw, 520px);
  width: auto; height: auto;
  background: #2C2A25;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.podglad-zamknij {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; cursor: pointer; background: #FFFDF8;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.podglad-zamknij svg { width: 20px; height: 20px; stroke: #2C2A25; fill: none; stroke-width: 2; stroke-linecap: round; }
body.podglad-otwarty { overflow: hidden; }

@media (hover: hover) {
  .film-otworz:hover .film-play { transform: translate(-50%, -50%) scale(1.08); background: #FFFDF8; }
}

@media (max-width: 900px) {
  .podglad { padding: 16px; }
  .podglad-zamknij { top: -10px; right: -10px; width: 40px; height: 40px; }
}


/* ── ramka na głównym zdjęciu karty produktu ───────────────────────
   Strona z zestawu to kartka A4 — w kwadratowym kadrze zostawało
   wokół niej puste miejsce, które wyglądało jak błąd składu. Teraz
   to puste miejsce jest passe-partout: kremowe tło, cienka złota
   kreska i delikatny cień, jak przy obrazie w galerii. */
.ramka-zdjecia {
  background: #FFFDF8;
  border: 1px solid #E6DAC0;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(40, 36, 30, 0.08);
}
.ramka-zdjecia .glowne-zdjecie {
  border: 1px solid #EEE8DA;
  background: #FFFFFF;
}

@media (max-width: 900px) {
  .ramka-zdjecia { padding: 12px; }
}


/* ── obrazki wycięte z tła ─────────────────────────────────────────
   Makieta poradnika i zdjęcie sióstr nie mają już białego prostokąta
   dookoła, więc własnego cienia też nie mają. Dorysowuje go przeglądarka
   i — w odróżnieniu od zwykłego box-shadow — robi to po kształcie
   obrazka, a nie po jego prostokącie. */
img[src*="freebie-poradnik"],
img[src*="about-magda-agata"] {
  filter: drop-shadow(0 16px 26px rgba(40, 36, 30, 0.16));
}


/* ── komunikaty przy polach formularza ────────────────────────────
   Zastępują dymek przeglądarki („Please fill in this field.").
   Kolor tekstu #8E3A24 ma kontrast ponad 8:1 na bieli i na kremie,
   więc czyta się go bez wysiłku; czerwona obwódka pola to ten sam
   ceglasty #C0553C, który był już przy złym adresie. */
.pole-z-bledem { display: flex; flex-direction: column; gap: 7px; min-width: 0; width: 100%; align-self: start; }
/* pole obok pola z komunikatem nie rozciąga się na jego wysokość */
input.pole { align-self: start; }
.blad-pola {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 0 20px;
  font-size: 14.5px; line-height: 1.45; color: #8E3A24; text-align: left;
  animation: wejscie .22s ease both;
}
.blad-pola::before {
  content: '!'; flex: 0 0 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: #C0553C; color: #FFFFFF;
  font: 700 12px/18px Poppins, sans-serif; text-align: center;
}
.blad-pola-zgoda { margin: -4px 0 2px 30px; }
.pole[aria-invalid="true"],
.pole[aria-invalid="true"]:hover {
  border-color: #C0553C;
  box-shadow: 0 0 0 3px rgba(192, 85, 60, .14);
}
.pole[aria-invalid="true"]:focus { border-color: #C0553C; box-shadow: 0 0 0 3px rgba(192, 85, 60, .24); }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #C0553C; outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .blad-pola { animation: none; } }


/* ── półka „W przygotowaniu" na stronie Produkty ─────────────────
   Okładki zestawów, które dopiero powstają, stoją lekko przekrzywione,
   jak odłożone na półkę. Pokój artysty ma już swoją kartę produktu,
   więc jego okładka jest odnośnikiem i reaguje na najechanie. */
.polka-pozycja { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; margin: 0; text-decoration: none; color: inherit; }
.polka-okladka {
  display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #F4EFE4;
  transform: rotate(var(--obrot, 0deg));
  box-shadow: 0 12px 26px rgba(40, 36, 30, .16);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
/* okładki mają szerokie kremowe marginesy — przybliżamy, żeby było widać zestaw */
.polka-okladka img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.42); }
.polka-podpis { font-size: 14px; line-height: 1.35; color: #52503F; text-align: center; }
@media (hover: hover) {
  a.polka-pozycja:hover .polka-okladka { transform: rotate(0deg) translateY(-6px); box-shadow: 0 18px 34px rgba(40, 36, 30, .2); }
  a.polka-pozycja:hover .polka-podpis { color: #6F551C; }
}
a.polka-pozycja:focus-visible { outline: 2px solid #836320; outline-offset: 6px; }

@media (max-width: 900px) {
  /* na telefonie półka przewija się w bok — pięć dużych okładek jedna
     pod drugą zajęłoby kilka ekranów */
  .polka {
    display: flex !important; overflow-x: auto; gap: 18px !important;
    scroll-snap-type: x mandatory; padding: 10px 4px 22px !important;
    /* do krawędzi ekranu: tyle, ile margines strony na telefonie (22px) */
    margin-left: -22px !important; margin-right: -22px !important; padding-left: 22px !important; padding-right: 22px !important;
    scrollbar-width: none;
  }
  .polka::-webkit-scrollbar { display: none; }
  .polka-pozycja { flex: 0 0 42%; scroll-snap-align: start; }
  .zapis-linia { flex-direction: column; align-items: stretch !important; }
}
@media (prefers-reduced-motion: reduce) { .polka-okladka { transition: none; } }


/* ── opinie jako „tablica inspiracji” (19.10.2026) ─────────────────
   Karteczki przyklejone taśmą, polaroidy z kartami pracy i małe kolorowe
   karteczki. Ułożenie siedzi w klasach (nie w style=), bo na telefonie
   tablica przechodzi na dwie kolumny. Nową krótką opinię dodaje się,
   kopiując jedną <figure class="tablica-sticky">. */
.tablica-tlo { background-image: radial-gradient(#d9ceb6 1px, transparent 1.2px); background-size: 22px 22px; }
.tablica {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px;
  margin-top: 60px; text-align: left; align-items: start;
}
.tablica figure, .tablica-karteczki figure { margin: 0; }
.tablica-gw { color: #836320; font-size: 15px; letter-spacing: 4px; line-height: 1; }

.tablica-notka {
  position: relative; background: #FFFCF2; padding: 36px 32px 28px;
  box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 14px 26px rgba(70,55,25,.16);
  transform: rotate(var(--obrot, 0deg));
}
/* taśma klejąca */
.tablica-notka::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(165,184,198,.62); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.tablica-notka.tasma-zolta::before { background: rgba(232,204,130,.72); transform: translateX(-50%) rotate(4deg); }
.tablica-notka.tasma-rozowa::before { background: rgba(214,170,160,.66); }
.tablica-cytat {
  font-family: Caveat, "Segoe Print", cursive; font-weight: 700;
  font-size: 30px; line-height: 1.1; color: #2f2a22; margin-top: 10px;
}
.tablica-duza .tablica-cytat { font-size: 37px; }
.tablica-tekst { margin: 14px 0 0; font-size: 16px; line-height: 1.66; color: #4A443A; }
.tablica-duza .tablica-tekst { font-size: 17px; line-height: 1.7; }
.tablica-podpis {
  margin-top: 14px; font-family: Caveat, "Segoe Print", cursive; font-weight: 700;
  font-size: 23px; color: #836320;
}
.tablica-duza .tablica-podpis { font-size: 27px; }

.tablica-polaroid {
  position: relative; display: block; background: #FFFFFF; padding: 12px 12px 48px;
  box-shadow: 0 14px 26px rgba(70,55,25,.18); color: #4a4236;
  transform: rotate(var(--obrot, 0deg));
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.tablica-polaroid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tablica-foto-podpis {
  position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center;
  font-family: Caveat, "Segoe Print", cursive; font-weight: 700; font-size: 23px; line-height: 1.1;
}
.tablica-pinezka {
  position: absolute; top: -9px; left: 50%; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #e98a7a, #b5473a); box-shadow: 0 3px 4px rgba(0,0,0,.3);
}
@media (hover: hover) {
  .tablica-polaroid:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 20px 34px rgba(70,55,25,.22); color: #6F551C; }
}

.tablica-sticky {
  background: #FBE9A8; padding: 22px 20px 24px;
  box-shadow: 0 10px 18px rgba(70,55,25,.15);
  transform: rotate(var(--obrot, 0deg));
}
.tablica-sticky.niebieska { background: #DCE6EC; }
.tablica-sticky.rozowa { background: #F3D9CF; }
.tablica-sticky.zielona { background: #E3E9D3; }
.tablica-sticky .tablica-gw { font-size: 12px; letter-spacing: 2px; }
.tablica-sticky p {
  margin: 8px 0 0; font-family: Caveat, "Segoe Print", cursive; font-weight: 700;
  font-size: 23px; line-height: 1.15; color: #3a321f;
}

/* ułożenie na komputerze: 12 kolumn */
.tablica-duza  { grid-column: 1 / 6;  grid-row: 1 / 3; --obrot: -1.5deg; }
.tablica-foto1 { grid-column: 6 / 9;  grid-row: 1; --obrot: 3deg; margin-top: 10px; }
.tablica-n2    { grid-column: 9 / 13; grid-row: 1; --obrot: 1.8deg; margin-top: 24px; }
.tablica-n3    { grid-column: 6 / 10; grid-row: 2; --obrot: -2deg; margin-top: 8px; }
.tablica-foto2 { grid-column: 10 / 13; grid-row: 2; --obrot: -3.5deg; margin-top: 20px; }
.tablica-karteczki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 30px; align-items: start; }
.tablica-karteczki > :nth-child(4n+1) { --obrot: 2deg; }
.tablica-karteczki > :nth-child(4n+2) { --obrot: -2.5deg; }
.tablica-karteczki > :nth-child(4n+3) { --obrot: 1.5deg; }
.tablica-karteczki > :nth-child(4n+4) { --obrot: -1.5deg; }

@media (max-width: 900px) {
  .tablica { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
  .tablica > * { grid-column: auto; grid-row: auto; margin-top: 0; }
  .tablica-notka { grid-column: 1 / -1; padding: 32px 24px 24px; }
  .tablica-n2 { --obrot: 1deg; }
  .tablica-n3 { --obrot: -1deg; }
  .tablica-duza { --obrot: -.8deg; }
  .tablica-polaroid { order: 5; }
  .tablica-duza .tablica-cytat { font-size: 32px; }
  .tablica-cytat { font-size: 28px; }
  .tablica-polaroid { padding: 10px 10px 40px; }
  .tablica-foto-podpis { font-size: 18px; bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tablica-karteczki { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
  .tablica-sticky { padding: 18px 16px 20px; }
  .tablica-sticky p { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .tablica-polaroid { transition: none; } }

/* opinia @kreatywna_nauka (21.10.2026) — trzeci rząd tablicy, szeroko */
.tablica-n4 { --obrot: .8deg; }
@media (min-width: 901px) {
  .tablica-n4 { grid-column: 3 / 11; grid-row: 3; margin-top: 18px; }
  .tablica-jedna .tablica-n4 { grid-row: 1; margin-top: 0; }
}
@media (max-width: 900px) { .tablica-n4 { --obrot: .6deg; } }

/* ── Inspiracje: lista poradników i poradnik (21.10.2026) ─────────────
   Strony buduje narzedzia/build_inspiracje.py. Szerokość tekstu ~720px,
   żeby długi poradnik czytał się wygodnie także na komputerze. */
.insp-artykul, .insp-lista { background: #FFFDF8; padding: 0 0 96px; }
.insp-wstep { max-width: 820px; margin: 0 auto; padding: 56px 24px 34px; }
.insp-wstep-srodek { text-align: center; }
.insp-okruszki { font-size: 14.5px; color: #6E675B; margin-bottom: 26px; }
.insp-okruszki a { color: #6E675B; border-bottom: 1px solid #DDD3BE; }
.insp-okruszki a:hover { color: #6F551C; }
.insp-label { font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; color: #836320; }
.insp-wstep h1 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 44px; line-height: 1.18; color: #2C2A25; margin-top: 14px; }
.insp-lead { font-size: 19.5px; line-height: 1.7; color: #52503F; margin-top: 18px; }
.insp-wstep-srodek .insp-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.insp-autor { font-size: 15px; color: #6E675B; margin-top: 18px; }
.insp-wstep-hero { max-width: 1140px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-bottom: 20px; }
.insp-hero { display: block; width: 100%; max-width: 360px; height: auto; justify-self: center; transform: rotate(2deg); box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 18px 34px rgba(70,55,25,.18); border: 1px solid #EEE8DA; }
.insp-kolumna { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.insp-kolumna section { margin-top: 54px; }
.insp-kolumna h2 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 29px; line-height: 1.28; color: #2C2A25; }
.insp-kolumna p, .insp-kolumna li { font-size: 18px; line-height: 1.75; color: #3F3C33; }
.insp-kolumna p { margin-top: 16px; }
.insp-kolumna ul, .insp-kolumna ol { margin: 16px 0 0; padding-left: 24px; }
.insp-kolumna li + li { margin-top: 8px; }
.insp-kolumna a { color: #6F551C; border-bottom: 1px solid rgba(111,85,28,.35); }
.insp-spis { margin-top: 44px; background: #F7F1E3; padding: 24px 28px; }
.insp-spis ol { margin-top: 10px; }
.insp-spis li { font-size: 17px; line-height: 1.6; }
.insp-spis a { border-bottom: 0; }
.insp-foto { margin: 28px 0 0; }
.insp-foto img { display: block; width: 100%; height: auto; border: 1px solid #EEE8DA; }
.insp-foto figcaption { font-size: 14.5px; color: #6E675B; margin-top: 10px; }
.insp-zabawa { margin-top: 26px; background: #FFFFFF; border: 1px solid #E7DFCE; padding: 26px 28px 24px; }
.insp-zabawa-nr { font-family: Poppins, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: #836320; }
.insp-zabawa h3 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.3; color: #2C2A25; margin-top: 6px; }
.insp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.insp-meta span { font-size: 14px; color: #52503F; border: 1px solid #EEE8DA; background: #FFFDF8; padding: 4px 12px; border-radius: 999px; }
.insp-zabawa ol li { font-size: 17px; }
.insp-wsk { background: #FBF6EA; padding: 12px 16px; font-size: 16px !important; }
.insp-prezent { margin-top: 44px; background: #F3ECDC; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.insp-prezent-h { font-size: 24px !important; margin-top: 8px; }
.insp-prezent p { font-size: 16.5px; margin-top: 10px; }
.insp-prezent form { display: flex; flex-direction: column; gap: 10px; }
.insp-prezent .btn { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; background: #a5b8c6; color: #17150F; padding: 15px 22px; border-radius: 999px; border: 0; cursor: pointer; }
.insp-zgoda { font-size: 12.5px; line-height: 1.55; color: #6E675B; }
.insp-zgoda a { color: #6F551C; }
.insp-produkt { margin-top: 64px; border: 1px solid #E7DFCE; background: #FFFFFF; padding: 28px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.insp-produkt img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.insp-produkt a:first-child { border: 0; }
.insp-produkt-h { font-size: 26px !important; margin-top: 8px; }
.insp-produkt p { font-size: 16.5px; margin-top: 10px; }
.insp-kod { font-size: 15.5px; color: #3F3C33; background: #FBF6EA; padding: 10px 14px; margin-top: 14px; }
.insp-btn { display: inline-block; margin-top: 18px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; background: #a5b8c6; color: #17150F !important; padding: 14px 26px; border-radius: 999px; border: 0 !important; }
.insp-autorki { margin-top: 44px; display: flex; gap: 18px; align-items: center; border-top: 1px solid #EEE8DA; padding-top: 28px; font-size: 16px; line-height: 1.65; color: #52503F; }
.insp-autorki img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.insp-karty { max-width: 1140px; margin: 10px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.insp-karta { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #EEE8DA; color: inherit; transition: box-shadow .22s ease, transform .22s ease; }
.insp-karta:hover { box-shadow: 0 12px 28px rgba(61,59,52,.14); transform: translateY(-3px); }
.insp-karta img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.insp-karta-tekst { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.insp-karta h2 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.3; color: #2C2A25; }
.insp-karta p { font-size: 15.5px; line-height: 1.6; color: #52503F; }
.insp-czytaj { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #6F551C; margin-top: 4px; }
@media (max-width: 900px) {
  .insp-wstep { padding: 34px 16px 24px; }
  .insp-wstep h1 { font-size: 31px; }
  .insp-lead { font-size: 17.5px; }
  .insp-wstep-hero { grid-template-columns: 1fr; gap: 30px; }
  .insp-hero { max-width: 250px; }
  .insp-kolumna { padding: 0 16px; }
  .insp-kolumna h2 { font-size: 24px; }
  .insp-kolumna p, .insp-kolumna li { font-size: 17px; }
  .insp-zabawa { padding: 22px 18px 20px; }
  .insp-prezent { grid-template-columns: 1fr; padding: 24px 18px; }
  .insp-produkt { grid-template-columns: 1fr; padding: 20px; }
  .insp-produkt img { max-width: 260px; }
  .insp-karty { grid-template-columns: 1fr; padding: 0 16px; }
}