/* LuczekShop.pl: niebo Luczka, czerwień Pimpka, żółć z banerów, wzór łapek i kostek jak na grafikach marki. */

@font-face { font-family: 'Paytone One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/paytone-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Paytone One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/paytone-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tlo: #ffffff;
  --tlo-2: #eef8fe;            /* jasne niebo na sekcjach naprzemiennych */
  --tlo-3: #dff1fc;
  --karta: #ffffff;
  --linia: #d5e9f6;
  --linia-mocna: #a9d3ee;
  --tekst: #0f2a44;            /* granat: 14:1 na bieli */
  --tekst-2: #34506b;          /* 8:1 */
  --tekst-3: #5a7189;          /* 5:1 */
  --niebo: #1494d6;            /* błękit Luczka z banerów */
  --niebo-ciemne: #0b6fb3;     /* biały tekst 5:1 */
  --niebo-glebokie: #0b4f82;
  --granat: #0c2b47;
  --czerwien: #d8353b;         /* Pimpek: biały tekst 4,6:1 */
  --czerwien-2: #bb262c;
  --zolty: #ffcd29;            /* „MEGA NOWOŚĆ” z banerów, tylko z granatowym tekstem */
  --zolty-2: #ffe27a;
  --zielen: #1f9d55;
  --promien: 22px;
  --promien-sr: 16px;
  --promien-maly: 12px;
  --cien: 0 1px 2px rgba(11, 79, 130, .08), 0 18px 40px -22px rgba(11, 79, 130, .45);
  --cien-mocny: 0 2px 4px rgba(11, 79, 130, .1), 0 30px 60px -28px rgba(11, 79, 130, .6);
  --w: 1240px;
  --font: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-n: 'Paytone One', 'Rubik', ui-sans-serif, system-ui, sans-serif;
  --lapki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.12'%3E%3Cpath transform='translate(14 12) scale(.12)' d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72ZM168,208a24,24,0,0,1-9.45-1.93,80.14,80.14,0,0,0-61.19,0,24,24,0,0,1-20.71-43.26,51.22,51.22,0,0,0,24.46-30.67,28,28,0,0,1,53.78,0,51.27,51.27,0,0,0,24.53,30.71A24,24,0,0,1,168,208Z'/%3E%3Cpath transform='translate(70 70) scale(.1) rotate(-20 128 128)' d='M216.47,99.53A32.12,32.12,0,0,0,228,73a32,32,0,0,0-58.91-17.39A32.44,32.44,0,0,0,166,60.81L134.81,92,164,121.19l31.19-31.19a32.44,32.44,0,0,0,5.2-3.09A32,32,0,0,1,216.47,99.53ZM89.19,164,60.81,192.38a32.44,32.44,0,0,0-5.2,3.09A32,32,0,1,0,86.91,229.39,32.44,32.44,0,0,0,90,224.19L121.19,193Z'/%3E%3C/g%3E%3C/svg%3E");
  --lapki-jasne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%231494d6' fill-opacity='.07'%3E%3Cpath transform='translate(14 12) scale(.12)' d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72ZM168,208a24,24,0,0,1-9.45-1.93,80.14,80.14,0,0,0-61.19,0,24,24,0,0,1-20.71-43.26,51.22,51.22,0,0,0,24.46-30.67,28,28,0,0,1,53.78,0,51.27,51.27,0,0,0,24.53,30.71A24,24,0,0,1,168,208Z'/%3E%3Cpath transform='translate(70 70) scale(.1) rotate(-20 128 128)' d='M216.47,99.53A32.12,32.12,0,0,0,228,73a32,32,0,0,0-58.91-17.39A32.44,32.44,0,0,0,166,60.81L134.81,92,164,121.19l31.19-31.19a32.44,32.44,0,0,0,5.2-3.09A32,32,0,0,1,216.47,99.53ZM89.19,164,60.81,192.38a32.44,32.44,0,0,0-5.2,3.09A32,32,0,1,0,86.91,229.39,32.44,32.44,0,0,0,90,224.19L121.19,193Z'/%3E%3C/g%3E%3C/svg%3E");
  --lapki-czerwone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23d8353b' fill-opacity='.07'%3E%3Cpath transform='translate(14 12) scale(.12)' d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72ZM168,208a24,24,0,0,1-9.45-1.93,80.14,80.14,0,0,0-61.19,0,24,24,0,0,1-20.71-43.26,51.22,51.22,0,0,0,24.46-30.67,28,28,0,0,1,53.78,0,51.27,51.27,0,0,0,24.53,30.71A24,24,0,0,1,168,208Z'/%3E%3Cpath transform='translate(70 70) scale(.1) rotate(-20 128 128)' d='M216.47,99.53A32.12,32.12,0,0,0,228,73a32,32,0,0,0-58.91-17.39A32.44,32.44,0,0,0,166,60.81L134.81,92,164,121.19l31.19-31.19a32.44,32.44,0,0,0,5.2-3.09A32,32,0,0,1,216.47,99.53ZM89.19,164,60.81,192.38a32.44,32.44,0,0,0-5.2,3.09A32,32,0,1,0,86.91,229.39,32.44,32.44,0,0,0,90,224.19L121.19,193Z'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
  accent-color: var(--niebo-ciemne);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; overflow-x: clip; }
body { margin: 0; caret-color: var(--niebo-ciemne); background: var(--tlo); color: var(--tekst); font: 400 1.125rem/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: rgba(15, 42, 68, .35); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 400; font-family: var(--font-n); letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2334506b' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
::selection { background-color: var(--zolty); color: var(--granat); }
:focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; border-radius: var(--promien-maly); }
html { scrollbar-color: var(--linia-mocna) var(--tlo-2); }
input::placeholder { color: var(--tekst-3); }
.ik { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -.18em; }
.ik--wstecz { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--granat); color: #fff; padding: 8px 14px; border-radius: var(--promien-maly); }
.pomin:focus { left: 8px; }
[hidden] { display: none !important; }
.w { width: min(var(--w), 100% - 32px); margin-inline: auto; }
.w-waska { width: min(880px, 100% - 32px); margin-inline: auto; }
.sekcja { padding-block: 64px; }
.sekcja--tlo { background: var(--tlo-2); }
.odstep { height: 64px; }
.naglowek-sekcji { text-align: center; margin: 0 auto 34px; max-width: 720px; }
.naglowek-sekcji h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); color: var(--granat); }
.naglowek-sekcji p { color: var(--tekst-2); margin-top: 12px; font-size: 1.12rem; }
.sekcja__dalej { display: flex; justify-content: center; margin-top: 34px; }

/* ---------- przyciski ---------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 999px;
  background: var(--czerwien) linear-gradient(180deg, #d8353b 0%, #bb262c 100%); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 22px -14px rgba(11, 40, 70, .55);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, filter .2s; }
.przycisk:hover { filter: brightness(1.06); transform: translateY(-2px); }
.przycisk:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.przycisk--maly { min-height: 42px; padding: 0 18px; font-size: .96rem; }
.przycisk--duzy { min-height: 58px; padding: 0 30px; font-size: 1.1rem; }
.przycisk--pelny { width: 100%; }
.przycisk--obrys { background: #fff; color: var(--granat); border-color: var(--linia-mocna); box-shadow: 0 8px 18px -14px rgba(11, 79, 130, .5); }
.przycisk--obrys:hover { border-color: var(--niebo); filter: none; }
.przycisk--jasny { background: var(--zolty) linear-gradient(180deg, #ffe066 0%, #ffc61a 100%); color: var(--granat);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 22px -14px rgba(11, 40, 70, .5); }
.przycisk--obrys-jasny { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.przycisk--obrys-jasny:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.przycisk[disabled], .przycisk--wylaczony { background: #c9d6e2; color: #4c637a; box-shadow: none; cursor: not-allowed; transform: none; filter: none; }
.przycisk.dodano-ok { background: var(--zielen); }
.ikona-przycisk { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--linia); background: #fff; color: var(--granat); cursor: pointer; }
.ikona-przycisk:hover { border-color: var(--niebo); }
.link { background: none; border: 0; padding: 0; color: var(--niebo-ciemne); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ---------- belka i nagłówek ---------- */
.belka { background: var(--granat); color: #fff; font-size: .92rem; font-weight: 600; }
.belka__w { width: min(var(--w), 100% - 32px); margin-inline: auto; display: flex; justify-content: center; gap: 28px; padding: 9px 0; text-align: center; }
.belka__w span { display: inline-flex; align-items: center; gap: 8px; }
.belka .ik { color: var(--zolty); width: 18px; height: 18px; }
.naglowek { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linia); transition: box-shadow .25s; }
.naglowek.przewiniety { box-shadow: 0 14px 30px -20px rgba(11, 79, 130, .45); }
.naglowek__w { width: min(var(--w), 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 84px; }
.naglowek__lewa { display: flex; align-items: center; gap: 12px; }
.logo { display: inline-flex; text-decoration: none; }
.logo img { width: 190px; height: auto; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.logo:hover img { transform: rotate(-2deg) scale(1.03); }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1.03rem; color: var(--tekst); white-space: nowrap; transition: background-color .2s, color .2s; }
.menu a:hover, .menu a[aria-current] { background: var(--tlo-3); color: var(--niebo-glebokie); }
.menu .menu__nowosci { color: var(--granat); background: var(--zolty); }
.menu .menu__nowosci:hover, .menu .menu__nowosci[aria-current] { background: var(--zolty-2); color: var(--granat); }
.menu .menu__pimpek { color: var(--czerwien-2); }
.menu .menu__pimpek:hover, .menu .menu__pimpek[aria-current] { background: #fde7e8; color: var(--czerwien-2); }
.naglowek__akcje { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.przycisk-menu { display: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--linia); background: #fff; color: var(--granat); cursor: pointer; }
.przycisk-menu .ik { width: 24px; height: 24px; }
.przycisk-szukaj { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--linia); color: var(--granat); background: #fff; transition: border-color .2s; }
.przycisk-szukaj:hover { border-color: var(--niebo); }
.przycisk-szukaj .ik { width: 22px; height: 22px; }
.przycisk-koszyk { position: relative; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 1.06rem; text-decoration: none;
  background: var(--niebo-ciemne) linear-gradient(180deg, #1a8fd3 0%, #0b6fb3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 22px -14px rgba(11, 40, 70, .6); }
.przycisk-koszyk .ik { width: 24px; height: 24px; }
.przycisk-koszyk__licznik { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--czerwien); color: #fff; font-size: .8rem; display: grid; place-items: center; border: 2px solid #fff; }
.przycisk-koszyk.podskok { animation: podskok .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes podskok { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(.96); } }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linia); box-shadow: var(--cien-mocny); }
.menu-panel__w { width: min(var(--w), 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px 0 28px; }
.menu-panel__tytul { font-family: var(--font-n); color: var(--niebo-glebokie); margin-bottom: 8px; font-size: 1.1rem; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--promien-maly); text-decoration: none; font-weight: 600; color: var(--tekst); }
.menu-panel a .ik { width: 24px; height: 24px; color: var(--niebo); }
.menu-panel a:hover { background: var(--tlo-2); }

/* ---------- karta produktu w siatce ---------- */
.siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.karta { position: relative; display: flex; flex-direction: column; background: var(--karta); border: 2px solid var(--linia); border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien);
  transition: border-color .25s, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
.karta:hover { border-color: var(--niebo); transform: translateY(-4px); box-shadow: var(--cien-mocny); }
.karta--pimpek:hover { border-color: var(--czerwien); }
.karta__foto { position: relative; display: block; aspect-ratio: 1; background: #34b7ee; overflow: hidden; }
.karta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.karta__foto2 { opacity: 0; }
.karta:hover .karta__foto2 { opacity: 1; }
.karta:hover .karta__foto img { transform: scale(1.06); }
.karta__znaczki { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.karta__tresc { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; flex: 1; text-align: center; }
.karta__typ { font-size: .86rem; color: var(--tekst-3); font-weight: 600; }
.karta__nazwa { font-family: var(--font); font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.karta__nazwa a { text-decoration: none; }
.karta__nazwa a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.karta__rozmiary { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--tekst-2); font-weight: 600; }
.karta__rozmiary li { padding: 1px 7px; background: var(--tlo-2); border-radius: 999px; }
.karta__rozmiary li.brak { color: var(--tekst-3); text-decoration: line-through; background: none; }
.karta__dol { margin-top: auto; display: grid; justify-items: center; gap: 12px; padding-top: 8px; }
.karta__dol .przycisk { width: 100%; position: relative; z-index: 2; }
.znaczek { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--granat); font-size: .8rem; font-weight: 800; box-shadow: 0 4px 10px -4px rgba(11, 79, 130, .5); }
.znaczek--nowosc { background: var(--zolty); }
.znaczek--hit { background: #fff; color: var(--niebo-glebokie); }
.znaczek--promo, .znaczek--zestaw { background: var(--czerwien); color: #fff; }
.znaczek--brak { background: #e3ebf2; color: var(--tekst-2); }
.cena { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.cena__stara { color: var(--tekst-3); font-size: 1.02rem; text-decoration-thickness: 2px; }
.cena__teraz { font-family: var(--font-n); font-size: 1.32rem; color: var(--granat); white-space: nowrap; }
.cena__stara + .cena__teraz { color: var(--czerwien-2); }

/* ---------- główna: hero ---------- */
.hero { position: relative; padding: 48px 0 56px; overflow: hidden; color: #fff;
  background: var(--lapki), radial-gradient(120% 90% at 85% 10%, #3cc6f5 0%, transparent 60%), linear-gradient(160deg, #1aa3e3 0%, #0b6fb3 72%, #0b4f82 100%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: #fff; clip-path: ellipse(60% 100% at 50% 100%); }
.hero > .w { position: relative; z-index: 1; }
.hero__siatka { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
.hero__tekst { display: grid; gap: 20px; justify-items: start; }
.hero h1 { font-size: clamp(2.05rem, .9rem + 3.3vw, 3.6rem); line-height: 1.02; color: #fff; text-shadow: 0 4px 0 rgba(6, 50, 86, .35); }
.hero h1 span { display: block; white-space: nowrap; }
.hero__lead { font-size: 1.2rem; color: #eaf7ff; max-width: 32em; }
.hero__przyciski { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__fakty { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero__fakty li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(6, 50, 86, .35); font-weight: 600; font-size: .98rem; }
.hero__fakty .ik { color: var(--zolty); width: 20px; height: 20px; }
/* Mozaika: duży kafel (2 rzędy), dwa mniejsze obok, szeroki pod nimi. Zestaw zmienia się co 5 minut, ten sam dla wszystkich. */
.hero__mozaika { position: relative; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; aspect-ratio: 3 / 2; }
.hero__kafel--3 { grid-column: 2 / 4; }
.hero__kafel { position: relative; display: block; overflow: hidden; border-radius: 24px; border: 4px solid #fff; background: #34b7ee; box-shadow: 0 30px 50px -26px rgba(4, 35, 62, .85); text-decoration: none; color: var(--granat); }
.hero__kafel--0 { grid-row: span 2; }
.hero__kafel--0 img { object-position: 50% 0; }
.hero__kafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; }
.hero__kafel img.wchodzi { opacity: 0; }
.hero__metka { transition: opacity .35s ease, transform .35s ease; }
.hero__metka.zmiana { opacity: 0; transform: translateY(6px); }
.hero__kafel:hover img { transform: scale(1.07); }
.hero__metka { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 18px -10px rgba(4, 35, 62, .6); }
.hero__nazwa { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.hero__cena { font-family: var(--font-n); font-size: 1.05rem; color: var(--czerwien-2); }
.hero__nowosc { order: -1; padding: 2px 10px; border-radius: 999px; background: var(--zolty); font-weight: 800; font-size: .78rem; }
.hero__kafel--0 .hero__metka { left: 14px; right: auto; bottom: 14px; padding: 12px 16px; }
.hero__kafel--0 .hero__nazwa { flex-basis: 100%; font-size: 1.1rem; }
.hero__kafel--0 .hero__cena { font-size: 1.35rem; }

/* ---------- banery ---------- */
.banery { padding: 26px 0 8px; }
.banery__tor { position: relative; aspect-ratio: 1920 / 747; border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien-mocny); background: var(--tlo-3); }
.banery__slajd { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.banery__slajd:first-child { opacity: 1; }
.banery[data-js] .banery__slajd { opacity: 0; }
.banery[data-js] .banery__slajd[data-aktywny] { opacity: 1; z-index: 1; }
.banery__slajd img { width: 100%; height: 100%; object-fit: cover; }
.banery__nawigacja { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; }
.banery__kropki { display: flex; gap: 2px; }
.banery__kropki button { display: grid; place-items: center; min-width: 26px; height: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer; }
.banery__kropki button::before { content: ''; width: 12px; height: 12px; border-radius: 999px; background: var(--linia-mocna); transition: width .3s, background-color .3s; }
.banery__kropki button[aria-current="true"]::before { width: 34px; background: var(--niebo-ciemne); }
.banery__strzalka { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--linia); background: #fff; color: var(--granat); cursor: pointer; }
.banery__strzalka:hover { border-color: var(--niebo); }

/* ---------- bohaterowie ---------- */
.bohaterowie__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bohater { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 18px 26px; border-radius: 28px; text-decoration: none; color: #fff; overflow: hidden; text-align: center;
  box-shadow: var(--cien-mocny); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.bohater::before { content: ''; position: absolute; inset: 0; background: var(--lapki); opacity: .9; pointer-events: none; }
.bohater:hover { transform: translateY(-6px) rotate(-.6deg); }
.bohater--luczek { background: linear-gradient(170deg, #22aef0, #0b6fb3); }
.bohater--pimpek { background: linear-gradient(170deg, #ec5257, #b3242a); }
.bohater--duet { background: linear-gradient(135deg, #1a9be0 0%, #1a9be0 48%, #d8353b 52%, #d8353b 100%); }
.bohater img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; border: 4px solid rgba(255, 255, 255, .9); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.bohater:hover img { transform: scale(1.03); }
.bohater__nazwa { position: relative; margin-top: 12px; font-family: var(--font-n); font-size: 2rem; line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.bohater__ile { position: relative; font-weight: 600; color: rgba(255, 255, 255, .92); }
.bohater__link { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--granat); font-weight: 700; }
.bohater--pimpek .bohater__link { color: var(--czerwien-2); }

/* ---------- kategorie ---------- */
.kat-kafle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.kat-kafel { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 12px 20px; border-radius: var(--promien); background: var(--tlo-2); border: 2px solid var(--linia); text-decoration: none; text-align: center; transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .35s; }
.kat-kafel:hover { transform: translateY(-4px); border-color: var(--niebo); box-shadow: var(--cien); }
.kat-kafel__foto { width: 100%; aspect-ratio: 1; border-radius: var(--promien-sr); overflow: hidden; }
.kat-kafel__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.kat-kafel:hover .kat-kafel__foto img { transform: scale(1.08); }
.kat-kafel__ikona { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -30px; position: relative; border-radius: 50%; background: #fff; color: var(--niebo-ciemne); box-shadow: 0 8px 16px -8px rgba(11, 79, 130, .6); }
.kat-kafel__ikona .ik { width: 30px; height: 30px; }
.kat-kafel__nazwa { font-family: var(--font-n); font-size: 1.22rem; color: var(--granat); margin-top: 4px; }
.kat-kafel__ile { font-size: .9rem; color: var(--tekst-3); font-weight: 600; }

/* ---------- zestawy ---------- */
.zestawy-pas { position: relative; color: #fff; background: var(--lapki), linear-gradient(170deg, #0b6fb3 0%, #0b4f82 100%); }
.zestawy-pas .naglowek-sekcji h2 { color: #fff; }
.zestawy-pas .naglowek-sekcji p { color: #dff2fd; }
.zestawy-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.zestaw-karta { position: relative; display: flex; flex-direction: column; border-radius: var(--promien); overflow: hidden; background: #fff; color: var(--tekst); box-shadow: 0 30px 50px -28px rgba(2, 25, 45, .9); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.zestaw-karta:hover { transform: translateY(-5px); }
.zestaw-karta__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.zestaw-karta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.zestaw-karta:hover .zestaw-karta__foto img { transform: scale(1.06); }
.zestaw-karta__zysk { position: absolute; top: 14px; left: 14px; padding: 8px 14px; border-radius: 999px; background: var(--zolty); color: var(--granat); font-family: var(--font-n); font-size: 1.1rem; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5); transform: rotate(-4deg); }
.zestaw-karta__tresc { display: grid; gap: 12px; padding: 18px 20px 22px; text-align: center; flex: 1; }
.zestaw-karta h3 { font-family: var(--font); font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.zestaw-karta h3 a { text-decoration: none; }
.zestaw-karta__sklad { display: flex; justify-content: center; align-items: center; gap: 6px; }
.zestaw-karta__sklad img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(11, 79, 130, .5); }
.zestaw-karta__sklad img + img { margin-left: -14px; }
.zestaw-karta__sklad span { margin-left: 6px; font-weight: 700; color: var(--tekst-2); font-size: .95rem; }
.zestaw-karta .karta__dol { margin-top: auto; }

/* ---------- szkoła ---------- */
.szkola-pas { padding: 64px 0; background: linear-gradient(180deg, #fff9df 0%, #fff 100%); }
.szkola-pas__w { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.szkola-pas__baner { display: block; border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien-mocny); transform: rotate(-1.2deg); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.szkola-pas__baner:hover { transform: rotate(0) scale(1.01); }
.szkola-pas__tresc { display: grid; gap: 18px; text-align: center; justify-items: center; }
.szkola-pas h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); color: var(--granat); }
.szkola-pas__tresc > p { color: var(--tekst-2); font-size: 1.12rem; }
.mini-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.mini { display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: var(--promien-sr); background: #fff; border: 2px solid var(--linia); text-decoration: none; font-size: .9rem; font-weight: 600; line-height: 1.3; transition: border-color .2s, transform .3s; }
.mini:hover { border-color: var(--niebo); transform: translateY(-3px); }
.mini img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.mini .cena__teraz { font-size: 1rem; }
.szkola-pas__przyciski { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- karty gratis ---------- */
.karty-pas { background: var(--zolty) linear-gradient(100deg, #ffd84a, #ffc61a); color: var(--granat); }
.karty-pas__w { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 30px 0; text-align: left; }
.karty-pas__ikona { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 10px 20px -10px rgba(120, 80, 0, .6); }
.karty-pas__ikona .ik { width: 42px; height: 42px; color: var(--czerwien); }
.karty-pas h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.95rem); }
.karty-pas p { margin-top: 4px; font-weight: 500; }

/* ---------- listingi ---------- */
.listing-glowa { padding: 30px 0 8px; }
.okruszki ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92rem; color: var(--tekst-3); }
.okruszki li + li::before { content: '/'; margin-right: 6px; opacity: .6; }
.okruszki a { text-decoration: none; color: var(--niebo-ciemne); font-weight: 600; }
.okruszki a:hover { text-decoration: underline; }
.listing-glowa h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); margin-top: 16px; color: var(--granat); text-align: center; }
.listing-glowa__opis { color: var(--tekst-2); margin: 12px auto 0; max-width: 62ch; font-size: 1.12rem; text-align: center; }
.pasek-kat { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.pasek-kat a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--tlo-2); border: 2px solid var(--linia); text-decoration: none; font-weight: 600; font-size: .98rem; transition: border-color .2s, background-color .2s; }
.pasek-kat a .ik { color: var(--niebo); width: 20px; height: 20px; }
.pasek-kat a:hover { border-color: var(--niebo); }
.pasek-kat a[aria-current] { background: var(--niebo-ciemne); border-color: var(--niebo-ciemne); color: #fff; }
.pasek-kat a[aria-current] .ik { color: #fff; }
.filtry-pasek { margin: 24px 0 22px; }
.filtry-pasek__rzad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: start; padding: 16px 20px; border-radius: var(--promien); background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien); }
.facety { display: grid; gap: 12px; }
.facet { display: flex; align-items: center; gap: 12px; min-width: 0; }
.facet__nazwa { flex: none; width: 84px; color: var(--tekst-3); font-weight: 700; font-size: .95rem; }
.facet__przycisk { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 16px; border-radius: 999px; border: 2px solid var(--linia); background: #fff; font-weight: 650; cursor: pointer; }
.facet__przycisk:hover, .facet__przycisk[aria-expanded="true"] { border-color: var(--niebo); }
.facet__przycisk .ik { width: 16px; height: 16px; color: var(--tekst-2); transition: transform .2s; }
.facet__przycisk[aria-expanded="true"] .ik { transform: rotate(180deg); }
.facet--aktywny .facet__przycisk { border-color: var(--niebo-ciemne); }
.facet__ile { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--czerwien); color: #fff; font-size: .8rem; font-weight: 800; }
.facet__opcje { display: flex; flex-wrap: wrap; gap: 8px; }
.facet__opcje button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linia); background: #fff; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.facet__opcje button:hover { border-color: var(--niebo); }
.facet__opcje button[aria-pressed="true"] { background: var(--niebo-ciemne); color: #fff; border-color: var(--niebo-ciemne); }
.filtry-akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 20px; }
.przelacznik { display: inline-flex; align-items: center; gap: 10px; height: 40px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.przelacznik input { width: 20px; height: 20px; }
.sortuj { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst-3); font-weight: 650; }
.sortuj select { height: 42px; padding: 0 14px; border-radius: 999px; background-color: #fff; border: 2px solid var(--linia); color: var(--tekst); font-weight: 600; }
.aktywne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.aktywny-filtr { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px; border: 0; background: var(--tlo-3); color: var(--granat); font-weight: 650; font-size: .92rem; cursor: pointer; }
.aktywny-filtr .ik { width: 14px; height: 14px; }
.brak-wynikow { padding: 36px; text-align: center; color: var(--tekst-2); border: 2px dashed var(--linia-mocna); border-radius: var(--promien); }
.licznik { color: var(--tekst-3); font-size: .95rem; margin: 18px 0 14px; text-align: center; font-weight: 600; }

/* ---------- karta produktu ---------- */
.p-hero { padding: 22px 0 48px; background: linear-gradient(180deg, var(--tlo-2) 0%, #fff 70%); }
.p-hero--pimpek { background: linear-gradient(180deg, #fff0f0 0%, #fff 70%); }
.p-hero__h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--granat); margin-top: 16px; }
.p-hero__siatka { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 22px; }
.galeria { position: sticky; top: 104px; display: grid; gap: 12px; }
.galeria__glowne { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: #34b7ee; cursor: zoom-in; border: 4px solid #fff; box-shadow: var(--cien-mocny); }
.galeria__glowne img { width: 100%; height: 100%; object-fit: cover; }
.galeria__znaczki { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.galeria__miniatury { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding: 4px 2px 6px; }
.galeria__miniatury button { flex: none; width: 82px; aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: var(--promien-maly); overflow: hidden; background: #34b7ee; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.galeria__miniatury button[aria-current="true"], .galeria__miniatury button:hover { opacity: 1; border-color: var(--niebo-ciemne); }
.galeria__miniatury img { width: 100%; height: 100%; object-fit: cover; }
.p-kup { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 26px; background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien); }
.p-kup__typ { display: flex; align-items: center; gap: 10px; color: var(--tekst-3); font-weight: 650; font-size: .98rem; }
.postac { display: inline-flex; padding: 4px 12px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .88rem; }
.postac--luczek { background: var(--niebo-ciemne); }
.postac--pimpek { background: var(--czerwien); }
.postac--duet { background: linear-gradient(90deg, var(--niebo-ciemne) 0 50%, var(--czerwien) 50% 100%); }
.p-kup__lead { font-size: 1.16rem; color: var(--tekst-2); }
.p-kup .cena { justify-content: flex-start; }
.p-kup .cena__teraz { font-size: 2.3rem; }
.p-kup .cena__stara { font-size: 1.3rem; }
.cena__zysk { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--zolty); color: var(--granat); font-size: .92rem; font-weight: 700; }
.wybor { border: 0; margin: 0; padding: 0; min-width: 0; }
.wybor legend { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 0; margin-bottom: 10px; font-weight: 700; }
.wybor__podpowiedz { font-weight: 500; color: var(--tekst-3); }
.rozmiary { display: flex; flex-wrap: wrap; gap: 8px; }
.rozmiar { position: relative; }
.rozmiar input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rozmiar span { display: grid; place-items: center; min-width: 64px; height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--linia-mocna); background: #fff; font-weight: 700; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.rozmiar input:hover + span { border-color: var(--niebo); transform: translateY(-1px); }
.rozmiar input:checked + span { background: var(--niebo-ciemne); color: #fff; border-color: var(--niebo-ciemne); }
.rozmiar input:focus-visible + span { outline: 3px solid var(--zolty); outline-offset: 2px; }
.rozmiar input:disabled { cursor: not-allowed; }
.rozmiar input:disabled + span { color: var(--tekst-3); border-style: dashed; text-decoration: line-through; opacity: .6; background: var(--tlo-2); }
.wybor.blad .rozmiar span { border-color: var(--czerwien); }
.wybor__blad { color: var(--czerwien-2); font-weight: 600; font-size: .95rem; margin-top: 8px; }
.tabela-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 0; padding: 0; color: var(--niebo-ciemne); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.dobierz { border: 2px solid var(--linia); border-radius: var(--promien-sr); padding: 12px 16px 14px; margin: 0; background: var(--tlo-2); }
.dobierz legend { padding: 0 8px; font-weight: 700; font-family: var(--font-n); color: var(--niebo-glebokie); font-size: 1.05rem; }
.dobierz__opcja { display: grid; grid-template-columns: auto 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; cursor: pointer; }
.dobierz__opcja + .dobierz__opcja { border-top: 1px solid var(--linia); }
.dobierz__opcja input[type=checkbox] { width: 22px; height: 22px; }
.dobierz__opcja img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }
.dobierz__nazwa { font-weight: 600; line-height: 1.3; font-size: 1rem; }
.dobierz__nazwa small { display: block; color: var(--tekst-3); font-weight: 500; font-size: .86rem; }
.dobierz__nazwa select { margin-top: 4px; padding: 4px 8px; border-radius: 999px; background-color: #fff; border: 2px solid var(--linia); font-size: .88rem; }
.dobierz__cena { font-weight: 700; white-space: nowrap; }
.dobierz__cena s { color: var(--tekst-3); font-weight: 400; margin-right: 6px; font-size: .9rem; }
.p-kup__przyciski { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.zaufanie { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--tekst-2); font-size: 1rem; }
.zaufanie li { display: flex; gap: 10px; align-items: flex-start; }
.zaufanie .ik { color: var(--niebo); margin-top: 3px; width: 20px; height: 20px; }
.p-kup__wysylka { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--promien-maly); background: #e8f8ee; color: #15623a; font-weight: 650; font-size: 1rem; }
.p-kup__wysylka .ik { width: 24px; height: 24px; color: var(--zielen); }

.p-spis { position: sticky; top: 85px; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border-block: 1px solid var(--linia); }
.p-spis__w { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 70px; overflow-x: auto; scrollbar-width: none; }
.p-spis__w > a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--linia); text-decoration: none; font-weight: 700; font-size: 1.08rem; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.p-spis__w > a .ik { width: 22px; height: 22px; color: var(--niebo); }
.p-spis__w > a:hover { border-color: var(--niebo); }
.p-spis__w > a.aktywny { background: var(--niebo-ciemne); color: #fff; border-color: var(--niebo-ciemne); }
.p-spis__w > a.aktywny .ik { color: #fff; }
.p-spis__kup { display: none; align-items: center; gap: 14px; margin-left: auto; padding-left: 16px; }
.p-spis__kup img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.p-spis__nazwa { font-weight: 700; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-spis.pokaz-kup .p-spis__w { justify-content: flex-start; }
.p-spis.pokaz-kup .p-spis__kup { display: flex; }

.proza { font-size: 1.15rem; line-height: 1.7; color: var(--tekst-2); max-width: 70ch; }
.proza > * + * { margin-top: 1em; }
.proza h2 { font-size: 1.9rem; color: var(--granat); margin-bottom: .3em; }
.proza h3 { font-size: 1.4rem; color: var(--niebo-glebokie); margin-top: 1.3em; }
.proza strong { color: var(--tekst); }
.proza ul, .proza ol { padding-left: 1.3em; }
.proza ul { list-style: none; padding-left: 0; }
.proza ul > li { position: relative; padding-left: 30px; }
.proza ul > li::before { content: ''; position: absolute; left: 0; top: .38em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tlo-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230b6fb3' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.proza li + li { margin-top: .35em; }
.proza img { border-radius: var(--promien-sr); margin-inline: auto; }
.proza a { color: var(--niebo-ciemne); font-weight: 600; }
.opis { padding: 64px 0 24px; }
.opis__siatka { display: grid; grid-template-columns: minmax(0, 860px); justify-content: center; }
.opis__siatka--foto { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: start; justify-content: stretch; }
.proza--opis { font-size: 1.2rem; }
.proza--opis > h3:first-of-type { margin-top: .2em; font-size: 1.55rem; }
.opis__foto { position: sticky; top: 170px; display: block; aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: 4px solid #fff; box-shadow: var(--cien-mocny); transform: rotate(1.5deg); }
.opis__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.opis__foto:hover img { transform: scale(1.05); }
.szczegoly { padding: 40px 0 64px; }
.cechy { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: calc(var(--kol) * 300px); margin: 0 auto; }
.cechy > .cecha { flex: 0 0 calc((100% - (var(--kol) - 1) * 14px) / var(--kol)); }
.cecha { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 22px 20px 24px; border-radius: var(--promien); background: var(--tlo-2); border: 2px solid var(--linia); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.cecha__ikona { width: 34px; height: 34px; color: var(--niebo-ciemne); margin-bottom: 8px; }
.cecha dt { color: var(--tekst-3); font-weight: 650; font-size: .92rem; margin-bottom: 4px; }
.cecha dd { margin: 0; font-size: 1.06rem; font-weight: 600; line-height: 1.45; color: var(--tekst); }

.pakiety { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); justify-content: center; gap: 16px; }
.pakiet { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px; border-radius: var(--promien); background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien); }
.pakiet--polecany { border-color: var(--zolty); }
.pakiet__foto { display: block; aspect-ratio: 1; border-radius: var(--promien-sr); overflow: hidden; }
.pakiet__foto img { width: 100%; height: 100%; object-fit: cover; }
.pakiet h3 { font-family: var(--font); font-weight: 700; font-size: 1.1rem; }
.pakiet h3 a { text-decoration: none; }
.pakiet__sklad { color: var(--tekst-2); font-size: .95rem; margin-top: 6px; }
.pakiet__mini { display: flex; gap: 4px; margin-top: 8px; }
.pakiet__mini img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.pakiet__dol { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pakiet .cena { justify-content: flex-start; }
.zysk { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--zolty); color: var(--granat); font-weight: 700; font-size: .88rem; }
.pakiety--jeden { grid-template-columns: minmax(0, 760px); }
.pakiety--jeden .pakiet { grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding: 22px; }
.pakiety--jeden .pakiet h3 { font-size: 1.35rem; }
.pakiety--jeden .cena__teraz { font-size: 1.6rem; }
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.faq details { border: 2px solid var(--linia); border-radius: var(--promien-sr); background: #fff; transition: border-color .2s; }
.faq details[open] { border-color: var(--niebo); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ik { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--tlo-3); color: var(--niebo-ciemne); transition: transform .25s; }
.faq details[open] summary .ik { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--tekst-2); }

.pasek-kup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); border-top: 2px solid var(--linia); box-shadow: 0 -12px 30px -20px rgba(11, 79, 130, .5); transform: translateY(110%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pasek-kup.widoczny { transform: none; }
.pasek-kup__nazwa { font-weight: 700; font-size: .92rem; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek-kup .cena { justify-content: flex-start; }
.pasek-kup .cena__teraz { font-size: 1.1rem; }

/* ---------- koszyk ---------- */
.koszyk { padding: 28px 0 64px; }
.koszyk h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); margin: 14px 0 24px; color: var(--granat); text-align: center; }
.koszyk__komunikat { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--promien-maly); background: #e8f8ee; border: 2px solid #9fdcb8; margin-bottom: 18px; font-weight: 600; color: #15623a; }
.koszyk__komunikat .ik { color: var(--zielen); }
.koszyk__siatka { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 32px; align-items: start; }
.koszyk__pozycje { display: grid; gap: 12px; }
.poz { display: grid; grid-template-columns: 170px 1fr auto; gap: 20px; padding: 14px; border-radius: var(--promien); background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien); }
.poz.nowa { animation: nowa 1.4s ease-out; }
@keyframes nowa { 0% { background: #dff6e8; transform: translateY(-8px); } 30% { transform: none; } }
.poz__foto { display: block; aspect-ratio: 1; border-radius: var(--promien-sr); overflow: hidden; }
.poz__foto img { width: 100%; height: 100%; object-fit: cover; }
.poz__nazwa { font-family: var(--font-n); font-size: 1.3rem; text-decoration: none; line-height: 1.2; color: var(--granat); }
.poz__typ { display: block; color: var(--tekst-3); font-size: .92rem; margin-top: 4px; }
.poz__wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.poz__wariant { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--tlo-3); font-size: 1rem; font-weight: 700; }
.poz__wiersz .poz__ilosc { margin-top: 0; }
.poz__sklad { margin: 6px 0 0; padding: 0; list-style: none; color: var(--tekst-2); font-size: .92rem; }
.poz__ilosc { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; border: 2px solid var(--linia); border-radius: 999px; padding: 3px; }
.poz__ilosc button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.poz__ilosc button:hover { background: var(--tlo-3); }
.poz__ilosc span { min-width: 22px; text-align: center; font-weight: 700; }
.poz__prawo { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; text-align: right; }
.poz__prawo strong { font-family: var(--font-n); font-weight: 400; font-size: 1.6rem; display: block; color: var(--granat); }
.poz__prawo s { color: var(--tekst-3); display: block; }
.poz__usun { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--tekst-3); cursor: pointer; font-size: .92rem; }
.poz__usun:hover { color: var(--czerwien-2); }
.zamiana { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: var(--promien); border: 2px solid var(--zolty); background: #fffbea; }
.zamiana img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--promien-sr); }
.zamiana__tytul { font-family: var(--font-n); font-size: 1.2rem; color: var(--granat); }
.zamiana p + p { color: var(--tekst-2); margin: 6px 0 12px; }
.koszyk-sekcja { margin-top: 36px; }
.koszyk-sekcja h2 { text-align: center; font-size: 1.6rem; margin-bottom: 18px; color: var(--granat); }
.propozycje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.propozycja { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--promien); background: #fff; border: 2px solid var(--linia); text-align: center; transition: opacity .3s, transform .3s; }
.propozycja.odjazd { opacity: 0; transform: translateY(-10px); }
.propozycja img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--promien-sr); }
.propozycja__nazwa { font-weight: 700; text-decoration: none; line-height: 1.3; }
.propozycja__powod { color: var(--tekst-3); font-size: .88rem; }
.propozycja .cena { justify-content: center; margin-top: auto; }
.propozycja .przycisk, .propozycja select { width: 100%; }
.propozycja select, .dodano__prop select { padding: 8px 12px; border-radius: 999px; background-color: #fff; border: 2px solid var(--linia); }
.podsumowanie-box { position: sticky; top: 104px; padding: 24px; border-radius: 26px; background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien-mocny); display: grid; gap: 16px; }
.podsumowanie-box h2 { font-size: 1.45rem; color: var(--granat); }
.podsumowanie { display: grid; gap: 10px; }
.podsumowanie div { display: flex; justify-content: space-between; gap: 12px; color: var(--tekst-2); }
.podsumowanie__zysk { color: var(--zielen) !important; font-weight: 700; }
.podsumowanie__razem { padding-top: 12px; border-top: 2px dashed var(--linia); color: var(--granat) !important; font-family: var(--font-n); font-size: 1.45rem; }
.podsumowanie-box .przycisk--duzy.puls { animation: puls 1.6s ease-out 2; }
@keyframes puls { 50% { transform: scale(1.03); } }
.nota { color: var(--tekst-3); font-size: .92rem; }
.nota--uwaga { color: var(--czerwien-2); font-weight: 600; }
.koszyk__pusty { text-align: center; padding: 40px 0 10px; }
.koszyk__pusty p { color: var(--tekst-2); margin: 10px 0 22px; }
.koszyk__pusty .przycisk { margin: 4px; }
.pasek-kasy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); border-top: 2px solid var(--linia); box-shadow: 0 -12px 30px -20px rgba(11, 79, 130, .5); }
.pasek-kasy span { display: block; color: var(--tekst-3); font-size: .82rem; }
.pasek-kasy strong { font-family: var(--font-n); font-weight: 400; font-size: 1.25rem; color: var(--granat); }

/* ---------- okna ---------- */
dialog { color: var(--tekst); }
dialog::backdrop { background: rgba(8, 35, 60, .55); backdrop-filter: blur(6px); }
.dodano { width: min(540px, 100% - 24px); padding: 28px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(8, 35, 60, .8); text-align: center; }
.dodano[open] { animation: wjazd .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes wjazd { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.dodano__ptaszek { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #dff6e8; color: var(--zielen); }
.dodano__ptaszek .ik { width: 34px; height: 34px; }
.dodano__tytul { margin-top: 10px; font-family: var(--font-n); font-size: 1.5rem; color: var(--zielen); }
.dodano__produkt { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin-top: 18px; padding: 12px; border-radius: var(--promien-sr); background: var(--tlo-2); text-align: left; }
.dodano__produkt img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--promien-maly); }
.dodano__produkt .cena { justify-content: flex-start; }
.dodano__nazwa { font-weight: 700; line-height: 1.3; }
.dodano__extra { display: block; color: var(--tekst-2); font-size: .9rem; margin-top: 2px; }
.dodano__pasuje { margin-top: 18px; text-align: left; font-weight: 700; color: var(--niebo-glebokie); }
.dodano__prop { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; margin-top: 8px; padding: 10px; border-radius: var(--promien-sr); border: 2px solid var(--linia); text-align: left; }
.dodano__prop img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--promien-maly); }
.dodano__prop-tytul { font-weight: 700; line-height: 1.3; }
.dodano__prop span { color: var(--tekst-2); font-size: .88rem; }
.dodano__prop .cena { justify-content: flex-start; }
.dodano__przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.okno { width: min(820px, 100% - 24px); max-height: 88vh; padding: 0; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px rgba(8, 35, 60, .8); }
.okno__glowa { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 2px solid var(--linia); }
.okno__tytul { font-family: var(--font-n); font-size: 1.3rem; color: var(--granat); }
.okno__tresc { padding: 18px 20px 22px; overflow-x: auto; }
.okno__tresc img { border-radius: var(--promien-sr); }
.tabela-r__nota { margin-top: 14px; color: var(--tekst-3); font-size: .9rem; text-align: center; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 35, 60, .94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain; border-radius: var(--promien); }
.lightbox__zamknij { position: absolute; top: 16px; right: 16px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--wstecz { left: 16px; }
.lightbox__nav--dalej { right: 16px; }

/* ---------- stopka ---------- */
.stopka { background: var(--granat); color: #c9dcec; }
.stopka__w { width: min(var(--w), 100% - 32px); margin-inline: auto; }
.stopka__zaproszenie { position: relative; overflow: hidden; background: var(--lapki), radial-gradient(90% 120% at 50% 0%, #1a9be0 0%, #0b6fb3 55%, #0b4f82 100%); color: #fff; text-align: center; }
.stopka__zaproszenie-w { display: grid; justify-items: center; gap: 18px; padding: 56px 0 50px; }
.stopka__logo { width: min(360px, 80vw); filter: drop-shadow(0 12px 20px rgba(4, 35, 62, .5)); }
.stopka__haslo { font-family: var(--font-n); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); max-width: 30em; line-height: 1.3; }
.stopka__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.stopka__pigulki { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.stopka__pigulki a, .stopka__pigulki span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(4, 35, 62, .35); color: #fff; text-decoration: none; font-weight: 600; }
.stopka__pigulki a:hover { background: rgba(4, 35, 62, .55); }
.stopka__pigulki .ik { color: var(--zolty); }
.stopka__atuty { background: #0a2540; }
.stopka__zalety { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 28px 0; list-style: none; }
.stopka__zalety li { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px 16px; font-size: .92rem; color: #a9c4dc; }
.stopka__zalety strong { display: block; color: #fff; font-size: 1.05rem; }
.stopka__zalety .ik { width: 40px; height: 40px; color: var(--zolty); margin-bottom: 6px; }
.stopka__kolumny { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.3fr; gap: 32px; padding: 46px 0 36px; }
.stopka__kol { display: flex; flex-direction: column; gap: 9px; }
.stopka__kol a { text-decoration: none; width: fit-content; transition: color .2s; }
.stopka__kol a:hover { color: #fff; text-decoration: underline; }
.stopka__tytul { font-family: var(--font-n); color: var(--zolty); margin-bottom: 6px; font-size: 1.12rem; }
.stopka__tytul--drugi { margin-top: 10px; }
.stopka__dane p { line-height: 1.55; }
.stopka__dol { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .92rem; color: #a9c4dc; }
.stopka__imker { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #a9c4dc; }
.stopka__imker img { width: auto; height: 21px; }

.zgoda { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(440px, 100% - 32px); padding: 18px; border-radius: var(--promien); background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien-mocny); font-size: .96rem; color: var(--tekst-2); }
.zgoda__przyciski { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- wyszukiwarka ---------- */
.szukaj { width: min(680px, 100% - 24px); margin-top: 10vh; padding: 0; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px rgba(8, 35, 60, .8); }
.szukaj__pole { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 2px solid var(--linia); }
.szukaj__pole .ik { width: 22px; height: 22px; color: var(--niebo-ciemne); }
.szukaj__pole input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font-size: 1.15rem; outline: none; }
.szukaj__pole--strona { max-width: 680px; margin: 22px auto 18px; border: 2px solid var(--linia); border-radius: 999px; background: #fff; }
.szukaj__wyniki { max-height: 60vh; overflow-y: auto; padding: 6px; }
.szukaj__wyniki:empty { display: none; }
.wynik { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: var(--promien-maly); text-decoration: none; }
.wynik:hover, .wynik:focus-visible { background: var(--tlo-2); }
.wynik img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.wynik strong { display: block; font-weight: 700; line-height: 1.3; }
.wynik small { color: var(--tekst-3); font-size: .86rem; }
.wynik .cena__teraz { font-size: 1.05rem; }
.szukaj__wszystkie { display: block; padding: 12px; text-align: center; font-weight: 700; color: var(--niebo-ciemne); }
.szukaj__pusto { padding: 18px; color: var(--tekst-2); }
.blad404 .szukaj__pole--strona { margin: 0 auto 18px; }

/* ---------- strony informacyjne ---------- */
.info { padding: 28px 0 72px; }
.info h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); margin: 14px 0 24px; color: var(--granat); }
.info .proza { max-width: none; }
.info .proza h2 { font-size: 1.5rem; margin-top: 1.6em; }
.tabela-info { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--linia); border-radius: var(--promien-sr); overflow: hidden; font-variant-numeric: tabular-nums; }
.tabela-info th, .tabela-info td { padding: 14px 18px; text-align: left; }
.tabela-info thead th { background: var(--tlo-2); color: var(--granat); }
.tabela-info tbody tr + tr td { border-top: 1px solid var(--linia); }
.tabela-info td:last-child { font-weight: 700; color: var(--granat); }
.kroki { list-style: none; padding: 0 !important; counter-reset: krok; display: grid; gap: 10px; }
.kroki li { counter-increment: krok; position: relative; padding: 14px 16px 14px 62px; border-radius: var(--promien-sr); background: var(--tlo-2); }
.kroki li::before { content: counter(krok); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--niebo-ciemne); color: #fff; font-family: var(--font-n); }
.kontakt-lista { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.kontakt-lista li { display: flex; align-items: center; gap: 10px; padding-left: 0 !important; font-size: 1.15rem; font-weight: 600; }
.kontakt-lista li::before { display: none; }
.kontakt-lista .ik { color: var(--niebo-ciemne); width: 24px; height: 24px; }
.blad404 { text-align: center; padding: 80px 0; background: var(--lapki), linear-gradient(170deg, #1aa3e3, #0b6fb3); color: #fff; }
.blad404 h1 { font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.6rem); }
.blad404 p { color: #eaf7ff; margin: 14px auto 26px; max-width: 48ch; }
.blad404 .link { color: #fff; }
.blad404 .przycisk { margin: 4px; }

/* ---------- responsywność ---------- */
@media (max-width: 1180px) {
  .menu a { padding: 9px 9px; font-size: .98rem; }
  .logo img { width: 160px; }
  .kat-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .naglowek__w { grid-template-columns: 1fr auto; gap: 12px; min-height: 68px; }
  .menu { display: none; }
  .przycisk-menu { display: inline-grid; }
  .logo img { width: 150px; }
  .p-spis { top: 69px; }
  .menu-panel__w { grid-template-columns: 1fr 1fr; gap: 18px 16px; max-height: calc(100dvh - 120px); overflow-y: auto; }
  .siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-hero__siatka, .koszyk__siatka, .opis__siatka, .szkola-pas__w { grid-template-columns: 1fr; }
  .hero__tekst { justify-items: center; text-align: center; }
  .hero__przyciski, .hero__fakty { justify-content: center; }
  .hero__siatka { grid-template-columns: 1fr; }
  .hero__tekst { justify-items: center; text-align: center; }
  .hero__przyciski, .hero__fakty { justify-content: center; }
  .hero__mozaika { max-width: 720px; width: 100%; margin-inline: auto; }
  .galeria, .podsumowanie-box, .opis__foto { position: static; }
  .opis__siatka--foto { grid-template-columns: 1fr; gap: 28px; }
  .opis__foto { max-width: 520px; margin-inline: auto; }
  .bohaterowie__siatka, .zestawy-siatka { grid-template-columns: 1fr 1fr; }
  .bohater--duet { grid-column: 1 / -1; order: 3; }
  .stopka__kolumny { grid-template-columns: 1fr 1fr; }
  .stopka__zalety { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 1.06rem; }
  .belka__dodatkowe { display: none !important; }
  .naglowek__w { min-height: 62px; gap: 8px; }
  .logo img { width: 128px; }
  .przycisk-koszyk__suma { display: none; }
  .przycisk-koszyk { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .przycisk-koszyk .ik { width: 22px; height: 22px; }
  .przycisk-szukaj, .przycisk-menu { width: 46px; height: 46px; }
  .p-spis { top: 63px; }
  .sekcja, .szkola-pas { padding-block: 48px; }
  .odstep { height: 48px; }
  .siatka { grid-template-columns: 1fr 1fr; gap: 12px; }
  .karta { border-radius: 18px; }
  .karta__tresc { padding: 12px 10px 14px; }
  .karta__nazwa { font-size: .98rem; }
  .karta__dol .przycisk { padding: 0 10px; font-size: .9rem; }
  .karta__dol .przycisk .ik { display: none; }
  .karta__rozmiary { display: none; }
  .cena__teraz { font-size: 1.15rem; }
  .hero { padding: 26px 0 44px; }
  .hero__przyciski { width: 100%; flex-direction: column; }
  .hero__przyciski .przycisk { width: 100%; }
  .hero__fakty li { font-size: .9rem; padding: 6px 12px; }
  .hero__mozaika { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; gap: 10px; }
  .hero__kafel--3 { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .hero__kafel { aspect-ratio: 1; border-width: 3px; border-radius: 18px; }
  .hero__kafel--0 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3.6; }
  .hero__kafel .hero__metka { left: 6px; right: 6px; bottom: 6px; padding: 6px 9px; border-radius: 12px; }
  .hero__nazwa { font-size: .8rem; }
  .hero__cena { font-size: .95rem; }
  .banery { padding-top: 18px; }
  .banery__tor { border-radius: 16px; }
  .bohaterowie__siatka { grid-template-columns: 1fr; }
  .bohater { grid-template-columns: 120px 1fr; justify-items: start; align-items: center; text-align: left; gap: 2px 16px; padding: 14px; }
  .bohater img { grid-row: span 3; width: 120px; border-width: 3px; }
  .bohater__nazwa { margin-top: 0; font-size: 1.6rem; }
  .bohater__link { margin-top: 6px; padding: 8px 14px; font-size: .95rem; }
  .bohater--duet { grid-column: auto; order: 0; }
  .kat-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kat-kafel__nazwa { font-size: 1.08rem; }
  .zestawy-siatka { grid-template-columns: 1fr; }
  .mini-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szkola-pas__przyciski { flex-direction: column; width: 100%; }
  .szkola-pas__przyciski .przycisk { width: 100%; }
  .karty-pas__w { flex-direction: column; text-align: center; gap: 14px; }
  .p-hero__h1 { font-size: 1.85rem; }
  .p-kup { padding: 18px; }
  .p-kup .cena__teraz { font-size: 2rem; }
  .p-kup__przyciski { grid-template-columns: 1fr; }
  .filtry-pasek__rzad { position: relative; grid-template-columns: 1fr; padding: 12px; }
  .facety { display: flex; flex-wrap: wrap; gap: 8px; }
  .facet { position: static; }
  .facet__nazwa { display: none; }
  .facet__przycisk { display: inline-flex; }
  .facet__panel { display: none; position: absolute; top: 68px; left: 12px; right: 12px; z-index: 25; padding: 12px; border-radius: var(--promien-sr); background: #fff; border: 2px solid var(--linia); box-shadow: var(--cien-mocny); }
  .facet.otwarty .facet__panel { display: block; }
  .filtry-pasek--jeden .facet__przycisk { display: none; }
  .filtry-pasek--jeden .facety, .filtry-pasek--jeden .facet { width: 100%; }
  .filtry-pasek--jeden .facet__panel { display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .filtry-pasek--jeden .facet__opcje { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtry-pasek--jeden .facet__opcje button { flex: none; }
  .filtry-akcje { justify-content: space-between; }
  .sortuj span { display: none; }
  .pasek-kat { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; }
  .pasek-kat a { flex: none; }
  .pakiety { grid-template-columns: 1fr; }
  .pakiet { grid-template-columns: 100px 1fr; gap: 14px; }
  .pakiety--jeden .pakiet { grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; }
  .pakiety--jeden .pakiet h3 { font-size: 1.12rem; }
  .dobierz__opcja { grid-template-columns: auto 48px 1fr; }
  .dobierz__opcja img { width: 48px; height: 48px; }
  .dobierz__cena { grid-column: 3; }
  .cechy { --kol: 2 !important; gap: 10px; }
  .cechy > .cecha { flex-basis: calc((100% - 10px) / 2); }
  .cecha { padding: 18px 12px 20px; }
  .p-spis__kup { display: none !important; }
  .p-spis__w { justify-content: flex-start; }
  .p-spis__w > a { padding: 8px 16px; font-size: 1rem; }
  .pasek-kup, .pasek-kasy { display: flex; }
  .ma-pasek-kup .stopka, .ma-pasek-kasy .stopka { padding-bottom: 70px; }
  .poz { grid-template-columns: 110px 1fr; }
  .poz__prawo { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .zamiana { grid-template-columns: 1fr; }
  .zamiana img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .propozycje { grid-template-columns: 1fr 1fr; }
  .dodano { padding: 22px 18px; }
  .dodano__przyciski { grid-template-columns: 1fr; }
  .dodano__przyciski .przycisk:last-child { order: -1; }
  .stopka__kolumny { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .stopka__dane { grid-column: 1 / -1; }
  .stopka__cta { flex-direction: column; width: 100%; }
  .stopka__cta .przycisk { width: 100%; }
  .stopka__dol { flex-direction: column; text-align: center; }
  .wynik { grid-template-columns: 48px 1fr; }
  .wynik img { width: 48px; height: 48px; }
  .wynik > .cena { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 380px) {
  .logo img { width: 112px; }
  .siatka { gap: 10px; }
  .karta__dol .przycisk { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 700px) {
  /* Nieparzysta liczba kart w siatce 2-kolumnowej na głównej: ostatnia znika, żeby nie zostawała sierota. */
  .siatka--parzysta > .karta:last-child:nth-child(odd) { display: none; }
  .bohater__link { white-space: nowrap; }
}
/* Okno „Dodano”: wybór rozmiaru propozycji pod opisem, mały i wyrównany do lewej. */
.dodano__prop > div { min-width: 0; }
.dodano__prop span { display: block; }
.dodano__prop select { display: block; width: auto; min-width: 104px; height: 36px; margin-top: 6px; padding: 0 34px 0 12px !important; font-size: .92rem; font-weight: 600; background-position: right 10px center; }
.propozycja select { height: 40px; padding: 0 34px 0 14px !important; font-weight: 600; }
@media (max-width: 700px) {
  .dodano__prop { grid-template-columns: 56px 1fr; }
  .dodano__prop .przycisk { grid-column: 1 / -1; width: 100%; }
}
.dodano__tytul:focus { outline: none; }

/* ---------- tła: pas kategorii i karta produktu ---------- */
.listing-pas { position: relative; padding: 26px 0 70px; color: #fff; text-align: center; overflow: hidden;
  background: var(--lapki), radial-gradient(70% 120% at 85% 0%, #3cc6f5 0%, transparent 60%), linear-gradient(160deg, #1aa3e3 0%, #0b6fb3 75%, #0b4f82 100%); }
.listing-pas::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: var(--tlo-2); clip-path: ellipse(60% 100% at 50% 100%); }
.listing-pas--pimpek { background: var(--lapki), radial-gradient(70% 120% at 85% 0%, #f57b80 0%, transparent 60%), linear-gradient(160deg, #e5474d 0%, #bb262c 75%, #8f1b20 100%); }
.listing-pas--nowosci, .listing-pas--zestawy { background: var(--lapki), radial-gradient(70% 120% at 85% 0%, #ffd84a 0%, transparent 45%), linear-gradient(160deg, #1aa3e3 0%, #0b6fb3 75%, #0b4f82 100%); }
.listing-pas > .w { position: relative; z-index: 1; }
.listing-pas .okruszki ol { justify-content: center; color: rgba(255, 255, 255, .75); }
.listing-pas .okruszki a { color: #fff; }
.listing-pas h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); margin-top: 18px; color: #fff; text-shadow: 0 4px 0 rgba(6, 50, 86, .3); }
.listing-pas .listing-glowa__opis { color: #eaf7ff; }
.listing-pas .pasek-kat a { background: rgba(255, 255, 255, .95); border-color: transparent; color: var(--granat); box-shadow: 0 8px 18px -12px rgba(4, 35, 62, .7); }
.listing-pas .pasek-kat a:hover { border-color: var(--zolty); }
.listing-pas .pasek-kat a[aria-current] { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.listing-pas .pasek-kat a[aria-current] .ik { color: var(--granat); }
.listing-glowa { padding: 0 0 8px; background: var(--lapki-jasne), linear-gradient(180deg, var(--tlo-2) 0%, #fff 900px); }
.listing-glowa .filtry-pasek { margin-top: 0; }
.listing-glowa + .odstep { background: #fff; }
.p-hero { position: relative; overflow: hidden; background: var(--lapki-jasne), radial-gradient(40% 50% at 10% 20%, rgba(60, 198, 245, .28) 0%, transparent 70%), radial-gradient(35% 45% at 95% 70%, rgba(255, 205, 41, .22) 0%, transparent 70%), linear-gradient(180deg, var(--tlo-2) 0%, #fff 85%); }
.p-hero--pimpek { background: var(--lapki-czerwone), radial-gradient(40% 50% at 10% 20%, rgba(245, 123, 128, .28) 0%, transparent 70%), radial-gradient(35% 45% at 95% 70%, rgba(255, 205, 41, .2) 0%, transparent 70%), linear-gradient(180deg, #fff0f0 0%, #fff 85%); }
.p-hero--duet { background: var(--lapki-jasne), radial-gradient(40% 50% at 8% 20%, rgba(60, 198, 245, .3) 0%, transparent 70%), radial-gradient(38% 50% at 96% 30%, rgba(245, 123, 128, .26) 0%, transparent 70%), linear-gradient(180deg, var(--tlo-2) 0%, #fff 85%); }
.szczegoly { background: var(--lapki-jasne), var(--tlo-2); }
@media (max-width: 700px) {
  .listing-pas { padding: 18px 0 56px; }
  .listing-pas .pasek-kat a { background: #fff; }
}
/* Karta produktu: kolorowy pas z łapkami za tytułem, galeria i box zakupu nachodzą na niego. */
.p-hero { isolation: isolate; }
.p-hero::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 330px; clip-path: ellipse(85% 100% at 50% 0%);
  background: var(--lapki), radial-gradient(60% 120% at 85% 0%, #3cc6f5 0%, transparent 60%), linear-gradient(160deg, #1aa3e3 0%, #0b6fb3 75%, #0b4f82 100%); }
.p-hero--pimpek::before { background: var(--lapki), radial-gradient(60% 120% at 85% 0%, #f57b80 0%, transparent 60%), linear-gradient(160deg, #e5474d 0%, #bb262c 75%, #8f1b20 100%); }
.p-hero--duet::before { background: var(--lapki), linear-gradient(115deg, #1aa3e3 0%, #0b6fb3 49.8%, #d8353b 50.2%, #bb262c 100%); }
.p-hero .okruszki ol { color: rgba(255, 255, 255, .75); }
.p-hero .okruszki a { color: #fff; }
.p-hero__h1 { color: #fff; text-shadow: 0 3px 0 rgba(6, 50, 86, .3); }
.p-hero--pimpek .p-hero__h1 { text-shadow: 0 3px 0 rgba(90, 15, 20, .3); }
@media (max-width: 700px) {
  .p-hero::before { height: 260px; clip-path: ellipse(120% 100% at 50% 0%); }
}
.hero__kafel--3 img { object-position: 50% 22%; }
@media (max-width: 700px) {
  .hero__mozaika .hero__kafel--3 { aspect-ratio: 2 / 1; }
}