/* Sklep Miłosza Brzezińskiego. Grafit i złoto z logo, Literata w nagłówkach, Albert Sans w tekście. */

@font-face { font-family: 'Literata'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/literata-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/literata-normal-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: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/literata-italic-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: 'Albert Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/albertsans-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/albertsans-normal-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: 'Albert Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/albertsans-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Albert Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/albertsans-italic-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; }

:root {
  --grafit: #1f1e1c;
  --grafit-2: #2b2a27;
  --grafit-3: #3a3934;
  --tekst: #1f1e1c;
  --tekst-2: #55524b;
  --tekst-jasny: #d9d5cc;
  --linia: #e3e1dc;
  --mgla: #f4f3f0;
  --bialy: #fff;
  --zloto: #a39262;
  --zloto-jasne: #c9bb8f;
  --zloto-ciemne: #6f6034;
  --zielony: #256a40;
  --cta: #c2410c;
  --cta-jasny: #dc5419;
  --cta-ciemny: #9a330a;
  --akcent: #a39262;
  --r: 6px;
  --cien: 0 1px 2px rgb(31 30 28 / .06), 0 8px 24px -8px rgb(31 30 28 / .14);
  --naglowki: 'Literata', Georgia, 'Times New Roman', serif;
  --tekstowy: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --szer: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Tło w kolorze okładki liczone tam, gdzie element ustawia własny --akcent. */
body, [style*='--akcent'] { --tint: color-mix(in srgb, var(--akcent) 14%, #fff); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 140px; }
body { margin: 0; font-family: var(--tekstowy); font-size: 1.125rem; line-height: 1.6; color: var(--tekst); background: var(--bialy); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zloto-ciemne); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tekst); }
h1, h2, h3 { font-family: var(--naglowki); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); }
h3 { font-size: 1.25rem; }
/* Nagłówki małymi literami, jak logo (12.10.2026). Regulaminy aplikacji (po angielsku) bez zmian. */
h1, h2, h3, h4 { text-transform: lowercase; }
.w-waska.proza :is(h1, h2, h3, h4) { text-transform: none; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
::selection { background: var(--zloto-jasne); color: var(--grafit); }
:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
.ik { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -0.2em; }
.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: 12px; top: -60px; background: var(--zloto); color: var(--grafit); padding: 10px 16px; z-index: 100; border-radius: var(--r); }
.pomin:focus { top: 12px; }
.w { width: min(100% - 32px, var(--szer)); margin-inline: auto; }
.w-waska { width: min(100% - 32px, 760px); margin-inline: auto; }
.srodek { text-align: center; margin-top: 28px; }

/* ---------- przyciski ---------- */

.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 24px; border: 1px solid var(--cta-ciemny); border-radius: var(--r);
  background: linear-gradient(180deg, var(--cta-jasny), var(--cta)); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 0 rgb(0 0 0 / .18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 0 var(--cta-ciemny), 0 8px 18px -8px rgb(194 65 12 / .6);
  transition: filter .2s, box-shadow .2s, transform .1s; }
.przycisk:hover { filter: brightness(1.07); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 2px 0 var(--cta-ciemny), 0 12px 24px -8px rgb(194 65 12 / .7); }
.przycisk:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 0 0 var(--cta-ciemny), 0 4px 10px -6px rgb(194 65 12 / .6); }
.przycisk--obrys { background: #fff; border-color: var(--grafit); color: var(--grafit); text-shadow: none; box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--grafit), 0 6px 14px -8px rgb(31 30 28 / .35); }
.przycisk--obrys:hover { background: var(--mgla); color: var(--grafit); filter: none; }
.przycisk--maly { min-height: 42px; padding: 0 16px; font-size: .95rem; }
.przycisk--ikona { padding: 0; width: 44px; min-height: 44px; }
.przycisk--pelny { width: 100%; }
.przycisk--duzy { min-height: 56px; font-size: 1.05rem; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.link-strzalka { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; color: var(--tekst); text-decoration: none; border-bottom: 1px solid var(--zloto); padding-bottom: 2px; }
.link-strzalka .ik { transition: transform .2s; }
.link-strzalka:hover .ik { transform: translateX(3px); }
.ikona-przycisk { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; }

/* ---------- nagłówek ---------- */

.pasek-info { margin: 0; background: var(--grafit-2); color: var(--tekst-jasny); font-size: 1rem; text-align: center; padding: 8px 16px; font-weight: 600; }
.pasek-info strong { color: #fff; font-weight: 600; }
.pasek-info span { color: var(--zloto-jasne); }
.naglowek { position: sticky; top: 0; z-index: 40; background: var(--grafit); color: #fff; transition: box-shadow .2s; }
.naglowek.przewiniety { box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.naglowek__w { width: min(100% - 32px, var(--szer)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; gap: 24px; }
.logo img { width: 220px; height: auto; }
.menu { display: flex; gap: 6px; }
.menu a { color: var(--tekst-jasny); text-decoration: none; font-weight: 500; font-size: 1.125rem; padding: 10px 14px; border-radius: var(--r); transition: color .2s, background .2s; }
.menu a:hover, .menu a[aria-current] { color: #fff; background: var(--grafit-3); }
.naglowek__akcje { justify-self: end; display: flex; align-items: center; gap: 8px; }
.przycisk-koszyk { position: relative; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--grafit-3); }
.przycisk-koszyk:hover { color: #fff; border-color: var(--zloto); }
.przycisk-koszyk .ik { width: 22px; height: 22px; }
.przycisk-koszyk__suma { font-weight: 650; font-variant-numeric: tabular-nums; }
.przycisk-koszyk__licznik { position: absolute; top: -7px; left: 26px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--zloto); color: var(--grafit); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.przycisk-koszyk__licznik[hidden] { display: none; }
.przycisk-menu { display: none; width: 46px; height: 46px; border: 1px solid var(--grafit-3); border-radius: var(--r); background: none; color: #fff; place-items: center; }
.przycisk-menu .ik { width: 24px; height: 24px; }

/* ---------- sekcje ---------- */

.sekcja { padding: 64px 0; }
.sekcja--mgla { background: var(--mgla); }
.naglowek-sekcji { max-width: 720px; margin-bottom: 32px; }
.naglowek-sekcji p { color: var(--tekst-2); margin: 0; font-size: 1.1rem; }
.naglowek-sekcji--srodek { margin-inline: auto; text-align: center; }
.naglowek-sekcji--srodek h1, .naglowek-sekcji--srodek h2 { position: relative; padding-bottom: 16px; }
.naglowek-sekcji--srodek h1::after, .naglowek-sekcji--srodek h2::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; height: 2px; background: var(--zloto); transform: translateX(-50%); }
.wstep { font-size: 1.2rem; color: var(--tekst-2); }
.proza { max-width: 68ch; }
.proza p, .proza li { font-size: 1.15rem; }
.proza--duza p, .proza--duza li { font-size: 1.2rem; line-height: 1.65; }
.proza h3 { margin-top: 1.4em; font-size: 1.3rem; }
.proza ul li::marker { color: var(--zloto); }
.proza ol li::marker { color: var(--zloto-ciemne); font-weight: 700; }
.proza li + li { margin-top: .4em; }

/* ---------- ceny ---------- */

.cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.cena__stara { color: var(--tekst-2); font-size: 1rem; }
.cena__teraz { font-weight: 700; font-size: 1.2rem; }
.cena__zysk { display: inline-flex; align-items: center; gap: 6px; color: var(--zielony); font-weight: 650; font-size: .95rem; }
.cena--duza .cena__zysk { padding: 4px 10px; border-radius: var(--r); background: #e3f1e8; font-size: .9rem; }
.cena--duza .cena__teraz { font-size: 2rem; font-family: var(--naglowki); }
.cena--duza .cena__stara { font-size: 1.15rem; }

/* ---------- karty produktów ---------- */

.siatka-produktow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.karta { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linia); border-radius: var(--r); overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.karta:hover { box-shadow: var(--cien); border-color: color-mix(in srgb, var(--akcent) 40%, var(--linia)); }
.karta[hidden] { display: none; }
.karta__foto { position: relative; --pad: 18px; aspect-ratio: 1; background: color-mix(in srgb, var(--akcent) 12%, #fff); overflow: hidden; }
.karta__foto { --wys: 78%; }
.karta__foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; mix-blend-mode: multiply; transition: scale .4s cubic-bezier(.2, .7, .2, 1); }
.karta:hover .karta__foto img { scale: 1.06; }
.karta__tresc { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; text-align: center; }
.karta__wariant { margin: 0 0 4px; font-size: .9rem; font-weight: 600; color: var(--tekst-2); }
.karta__nazwa { font-size: 1.2rem; margin: 0 0 8px; }
.karta__nazwa a { color: var(--tekst); text-decoration: none; }
.karta__nazwa a::after { content: ''; }
.karta__zysk { margin: 0 0 8px; color: var(--zielony); font-weight: 650; font-size: .9rem; }
.karta__dol { margin-top: auto; display: grid; gap: 10px; }
.karta__dol .cena { justify-content: center; }

/* ---------- strona główna ---------- */

.pasek-faktow { background: var(--grafit-2); color: var(--tekst-jasny); }
.pasek-faktow ul { list-style: none; padding: 22px 0; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.pasek-faktow li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 16px; text-align: left; font-size: .95rem; line-height: 1.35; }
.pasek-faktow li + li { border-left: 1px solid var(--grafit-3); }
.pasek-faktow .ik { width: 30px; height: 30px; color: var(--zloto); }
.pasek-faktow strong { display: block; color: #fff; font-size: 1.05rem; }


/* baner sklepu */
.baner { padding: 28px 0 32px; background: var(--grafit); }
.baner__siatka { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.baner__glowny { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 36px 40px; border-radius: var(--r); color: #fff;
  background: radial-gradient(120% 140% at 85% 30%, color-mix(in srgb, var(--akcent) 55%, var(--grafit-2)) 0, var(--grafit-2) 62%); }
.baner__rotacja { display: grid; }
.baner__glowny[hidden], .kafel[hidden] { display: none; }
.baner__glowny .baner__tytul { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1.05; margin: 12px 0 10px; }
.znaczek-nowosc { display: inline-block; padding: 5px 10px; border-radius: var(--r); background: var(--zloto); color: var(--grafit); font-weight: 700; font-size: .85rem; }
.baner__podtytul { color: var(--tekst-jasny); font-family: var(--naglowki); font-style: italic; font-size: 1.12rem; max-width: 40ch; }
.baner__oferta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 18px 0; font-weight: 600; }
.baner__oferta .cena__teraz { font-size: 1.7rem; font-family: var(--naglowki); color: #fff; }
.baner__oferta .cena__stara { color: var(--tekst-jasny); }
.baner__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.przycisk--jasne-obrys { background: transparent; border-color: var(--zloto-jasne); color: #fff; box-shadow: none; text-shadow: none; }
.przycisk--jasne-obrys:hover { background: #fff; border-color: #fff; color: var(--grafit); }
.baner__okladka { display: block; width: 230px; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .45)); transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.baner__okladka:hover { transform: translateY(-5px) rotate(-1deg); }
.baner__boczne { display: grid; gap: 16px; }
.kafel { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 16px 18px 16px 16px; border-radius: var(--r); color: #fff;
  background: radial-gradient(90% 130% at 12% 50%, color-mix(in srgb, var(--akcent) 50%, var(--grafit-2)) 0, var(--grafit-2) 70%); }
.kafel__foto { position: relative; --pad: 6px; aspect-ratio: 1; }
.kafel__foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; transition: scale .4s; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .4)); }
.kafel:hover .kafel__foto img { scale: 1.05; }
.kafel__tytul { font-size: 1.25rem; margin-bottom: 4px; }
.kafel__tytul a { color: #fff; text-decoration: none; }
.kafel__opis { font-size: .95rem; color: var(--tekst-jasny); margin-bottom: 10px; }
.kafel .cena__teraz { color: #fff; }
.kafel .cena__stara { color: var(--tekst-jasny); }
.kafel__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* sklep na głównej */
.sklep-glowna__glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sklep-glowna__glowa h2 { margin: 0; }
.sklep-glowna .filtry { margin: 0; justify-content: flex-end; }
.sklep-glowna .siatka-produktow { grid-template-columns: repeat(3, 1fr); }
.sklep-glowna .karta__foto { aspect-ratio: 4 / 3; }

/* Miejski Pustelnik na głównej */
.mp__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mp__podtytul { font-family: var(--naglowki); font-style: italic; font-size: 1.2rem; color: color-mix(in srgb, var(--akcent) 50%, var(--grafit)); }
.mp-opcje { list-style: none; padding: 0; margin: 22px 0 18px; display: grid; gap: 8px; }
.mp-opcja { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 10px 12px 10px 16px; background: #fff; border: 1px solid var(--linia); border-radius: var(--r); }
.mp-opcja--wyr { border-color: var(--zloto); box-shadow: inset 0 0 0 1px var(--zloto); }
.mp-opcja__nazwa { color: var(--tekst); font-weight: 650; text-decoration: none; }
.mp-opcja--wyr .mp-opcja__nazwa::after { content: 'najtaniej za format'; display: block; font-weight: 500; font-size: .85rem; color: var(--zielony); }
.mp-wiecej { margin: -10px 0 18px; }
.mp-wiecej summary { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; cursor: pointer; list-style: none; border-bottom: 1px solid var(--zloto); padding-bottom: 2px; }
.mp-wiecej summary::-webkit-details-marker { display: none; }
.mp-wiecej summary .ik { transition: transform .25s; color: var(--zloto-ciemne); }
.mp-wiecej[open] summary .ik { transform: rotate(45deg); }
.mp-wiecej .mp-opcje { margin: 12px 0 0; }
.mp__srodek { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp__srodek a { display: block; overflow: hidden; border-radius: var(--r); box-shadow: var(--cien); background: #fff; }
.mp__srodek a:first-child { grid-column: 1 / -1; }
.mp__srodek img { width: 100%; transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.mp__srodek a:hover img { scale: 1.05; }
.mp__linki { margin: 0; }

.tytul__opis { font-size: 1rem; color: var(--tekst-2); }
.tytul__tresc { display: flex; flex-direction: column; }
.tytul__dol { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tytul__od { margin: 0; color: var(--tekst-2); }
.tytul__od strong { color: var(--tekst); font-size: 1.15rem; }
.tytul__komplet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r); background: var(--tint); font-size: .95rem; }
.tytul__komplet > span { flex: 1 1 100%; color: var(--zielony); }
.tytul__komplet > span strong { color: var(--tekst); }
.tytul__komplet .cena { margin-right: auto; }

/* mozaika rozkładówek */
.mozaika { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.mozaika a { display: block; overflow: hidden; border-radius: var(--r); background: #fff; box-shadow: var(--cien); grid-column: span 2; }
.mozaika a:nth-child(1), .mozaika a:nth-child(2) { grid-column: span 3; }
.mozaika img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.mozaika a:hover img { scale: 1.05; }

/* pozostałe tytuły */
.tytuly { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tytul { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 20px; border: 1px solid var(--linia); border-radius: var(--r); background: #fff; }
.tytul:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 180px 1fr; }
.tytul__foto { position: relative; --pad: 12px; background: var(--tint); border-radius: 4px; overflow: hidden; align-self: start; aspect-ratio: 1; }
.tytul__foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; mix-blend-mode: multiply; transition: scale .4s; }
.tytul:hover .tytul__foto img { scale: 1.06; }
.tytul h3 { font-size: 1.5rem; margin-bottom: 2px; }
.tytul h3 a { color: var(--tekst); text-decoration: none; }
.tytul__podtytul { font-family: var(--naglowki); font-style: italic; color: color-mix(in srgb, var(--akcent) 55%, var(--grafit)); margin-bottom: 8px; }
.tytul__tresc > p { font-size: 1rem; color: var(--tekst-2); }
.tytul__chipy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 12px; border: 1px solid var(--linia); border-radius: var(--r); font-size: .9rem; color: var(--tekst); text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s; }
.chip strong { font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--akcent); background: var(--tint); color: var(--tekst); }
.tytul__linki { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; font-size: .95rem; }

/* zestawy serii */
.seria { background: var(--grafit); color: #fff; }
.seria .naglowek-sekcji p { color: var(--tekst-jasny); }
.seria__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zestaw-serii { display: flex; flex-direction: column; padding: 22px; border-radius: var(--r); background: var(--grafit-2); border: 1px solid var(--grafit-3); transition: border-color .25s; }
.zestaw-serii:hover { border-color: var(--zloto); }
.zestaw-serii__foto { position: relative; --pad: 12px; aspect-ratio: 4 / 3; background: #fff; border-radius: 4px; margin-bottom: 18px; overflow: hidden; }
.zestaw-serii__foto img { position: absolute; inset: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); object-fit: contain; transition: scale .4s; }
.zestaw-serii:hover .zestaw-serii__foto img { scale: 1.05; }
.zestaw-serii h3 a { color: #fff; text-decoration: none; }
.zestaw-serii__zysk { color: var(--zloto-jasne); font-weight: 600; }
.zestaw-serii__dol { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zestaw-serii .cena__stara { color: var(--tekst-jasny); }

/* aplikacja */
.aplikacja { background: var(--mgla); }
.aplikacja__siatka { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.aplikacja__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.aplikacja__lista li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border-radius: var(--r); font-size: 1rem; color: var(--tekst-2); }
.aplikacja__lista .ik { width: 28px; height: 28px; color: var(--zloto-ciemne); margin-top: 2px; }
.aplikacja__lista strong { display: block; color: var(--tekst); font-size: 1.05rem; }
.aplikacje { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.aplikacja-link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: var(--r); background: var(--grafit); color: #fff; text-decoration: none; line-height: 1.15; font-weight: 600; transition: background .2s; }
.aplikacja-link:hover { background: var(--grafit-3); color: #fff; }
.aplikacja-link .ik { width: 26px; height: 26px; }
.aplikacja-link small { display: block; font-size: .72rem; font-weight: 400; color: var(--tekst-jasny); }

/* autor */
.autor__siatka { display: grid; grid-template-columns: 400px 1fr; grid-template-areas: 'portret tekst' 'portret drugie'; gap: 28px 56px; align-items: start; }
.autor__portret { grid-area: portret; position: sticky; top: 110px; border-radius: var(--r); overflow: hidden; }
.autor__tekst { grid-area: tekst; }
.autor__tekst h1, .autor__tekst h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); }
.autor__drugie { grid-area: drugie; border-radius: var(--r); overflow: hidden; }
.autor__drugie img, .autor__portret img { width: 100%; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.autor__drugie:hover img, .autor__portret:hover img { scale: 1.03; }
.autor__social, .stopka__social { display: flex; gap: 8px; margin: 18px 0 0; }
.autor__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--linia); border-radius: 50%; color: var(--tekst); transition: border-color .2s, color .2s; }
.autor__social a:hover { border-color: var(--zloto); color: var(--zloto-ciemne); }

/* ---------- karta produktu ---------- */

.okruszki ol { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px; font-size: .9rem; color: var(--tekst-2); }
.okruszki li + li::before { content: '/'; margin-right: 6px; color: var(--linia); }
.okruszki a { color: var(--tekst-2); }
.p-hero { padding: 24px 0 48px; }
.p-hero__siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.p-foto { --pad: 40px; position: sticky; top: 100px; aspect-ratio: 1; background: var(--tint); border-radius: var(--r); overflow: hidden; }
.p-foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; mix-blend-mode: multiply; }
.p-foto__znaczek { position: absolute; top: 18px; left: 18px; padding: 6px 12px; background: var(--grafit); color: #fff; font-weight: 650; font-size: .9rem; border-radius: var(--r); }
.p-kup__autor { margin: 0 0 4px; color: var(--zloto-ciemne); letter-spacing: .14em; font-size: .95rem; }
.p-kup h1 { margin-bottom: 6px; }
.p-kup__wariant { display: block; font-family: var(--tekstowy); font-size: 1.05rem; font-weight: 600; color: var(--tekst-2); margin-top: 8px; letter-spacing: 0; }
.p-kup__lead { font-family: var(--naglowki); font-style: italic; font-size: 1.15rem; color: var(--tekst-2); }
.wersje { margin: 18px 0; }
.wersje__tytul { font-weight: 650; margin-bottom: 8px; font-size: 1rem; }
.wersje__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wersja { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linia); border-radius: var(--r); color: var(--tekst); text-decoration: none; font-size: .92rem; line-height: 1.25; transition: border-color .2s, background .2s; }
.wersja:hover { border-color: var(--akcent); color: var(--tekst); }
.wersja__cena { display: flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wersja__ikony { display: flex; gap: 3px; color: var(--zloto-ciemne); margin-bottom: 2px; }
.wersja__ikony .ik { width: 18px; height: 18px; }
.wersja__zysk { padding: 1px 6px; border-radius: 4px; background: #e3f1e8; color: var(--zielony); font-size: .78rem; font-weight: 700; }
.wersja__znaczek { position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 4px; background: var(--cta); color: #fff; font-size: .72rem; font-weight: 700; }
.wersja--najlepsza { border-color: var(--cta); }
.wersja[aria-current] { border-color: var(--grafit); box-shadow: inset 0 0 0 1px var(--grafit); background: var(--tint); }
.wersja--pakiet:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.parametry { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.parametry li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r); background: var(--mgla); font-size: .92rem; font-weight: 550; }
.parametry .ik { color: var(--zloto-ciemne); }
.p-kup__omnibus { margin: 6px 0 0; font-size: .85rem; color: var(--tekst-2); }
.dobierz { border: 1px solid var(--linia); border-radius: var(--r); margin: 18px 0 0; padding: 10px 14px 6px; }
.dobierz legend { font-weight: 650; padding: 0 6px; font-size: 1rem; }
.dobierz__opcja { display: grid; grid-template-columns: 22px 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: .98rem; }
.dobierz__opcja + .dobierz__opcja { border-top: 1px solid var(--linia); }
.dobierz__opcja input { width: 20px; height: 20px; accent-color: var(--grafit); }
.dobierz__foto { position: relative; --pad: 4px; width: 52px; height: 52px; background: var(--tint); border-radius: 4px; }
.dobierz__foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; mix-blend-mode: multiply; }
.dobierz__nazwa small { display: block; color: var(--tekst-2); font-size: .85rem; }
.dobierz__cena { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-kup__przyciski { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin: 20px 0 18px; }
.zaufanie { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--tekst-2); }
.zaufanie li { display: flex; gap: 10px; align-items: center; }
.zaufanie .ik { color: var(--zloto-ciemne); }

.p-spis { position: sticky; top: 76px; z-index: 30; background: rgb(255 255 255 / .97); backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--linia); box-shadow: 0 6px 18px -14px rgb(31 30 28 / .35); }
.p-spis__w { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; min-height: 62px; }
.p-spis__linki { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: auto; }
.p-spis__linki a { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 20px; color: var(--tekst-2); text-decoration: none; font-weight: 600; font-size: 1.1rem; white-space: nowrap; transition: color .2s; }
.p-spis__linki a + a::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--linia); }
.p-spis__linki a .ik { width: 20px; height: 20px; color: var(--zloto); transition: color .2s; }
.p-spis__linki a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--zloto); transform: scaleX(0); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.p-spis__linki a:hover { color: var(--tekst); }
.p-spis__linki a:hover::after { transform: scaleX(.5); }
.p-spis__linki a.aktywny { color: var(--tekst); }
.p-spis__linki a.aktywny .ik { color: var(--zloto-ciemne); }
.p-spis__linki a.aktywny::after { transform: scaleX(1); }
.p-spis__kup { display: none; align-items: center; gap: 14px; }
.p-spis.pokaz-kup .p-spis__kup { display: flex; }

.pakiety-oferta { background: var(--mgla); }
@media (min-width: 901px) { .pakiety-oferta .naglowek-sekcji { max-width: none; } .pakiety-oferta .naglowek-sekcji p { white-space: nowrap; } }
.pakiety-oferta__lista { display: grid; gap: 12px; max-width: 920px; margin-inline: auto; }
.pakiet { position: relative; display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; background: #fff; border: 1px solid var(--linia); border-radius: var(--r); }
.pakiet--polecany { border-color: var(--zloto); box-shadow: inset 0 0 0 1px var(--zloto); }
.pakiet__foto { position: relative; --pad: 6px; aspect-ratio: 1; background: var(--tint); border-radius: 4px; overflow: hidden; }
.pakiet__foto img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: var(--wys, 80%); width: auto; max-width: calc(100% - 2 * var(--pad)); object-fit: contain; object-fit: contain; mix-blend-mode: multiply; }
.pakiet h3 { font-size: 1.15rem; margin-bottom: 4px; }
.pakiet h3 a { color: var(--tekst); text-decoration: none; }
.pakiet__sklad { margin: 0; color: var(--tekst-2); font-size: .98rem; }
.pakiet__zysk { margin: 4px 0 0; color: var(--zielony); font-weight: 650; font-size: .95rem; }
.pakiet__dol { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.opis__siatka { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.opis__siatka > .proza:only-child { grid-column: 1 / -1; margin-inline: auto; }
.w-wariancie { position: sticky; top: 150px; padding: 22px 24px; border-radius: var(--r); background: var(--tint); }
.w-wariancie__tytul { font-size: 1.3rem; }
.w-wariancie p, .w-wariancie li { font-size: 1.05rem; }
.w-wariancie h3 { font-size: 1.1rem; margin: 0; }
.w-wariancie__foto { display: grid; place-items: center; margin-bottom: 18px; }
.w-wariancie__foto img { max-height: 200px; width: auto; filter: drop-shadow(0 10px 18px rgb(31 30 28 / .22)); }
.w-wariancie__fragmenty { margin-top: 20px; }
.w-wariancie__fragmenty h3 { margin-bottom: 10px; }
.w-wariancie__strony { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.w-wariancie__strony a { display: block; overflow: hidden; border-radius: 6px; box-shadow: var(--cien); background: #fff; }
.w-wariancie__strony img { width: 100%; transition: scale .4s; }
.w-wariancie__strony a:hover img { scale: 1.05; }
.w-wariancie .fragment-pdf { margin: 20px 0 0; }
.w-wariancie .fragment-pdf .przycisk { width: 100%; justify-content: center; }

.spis { columns: 2; column-gap: 48px; }
.spis__rozdzial { margin-bottom: 26px; }
.spis__rozdzial h3 { break-after: avoid; }
.spis li { break-inside: avoid; }
.spis__rozdzial h3 { display: flex; gap: 12px; align-items: baseline; font-size: 1.2rem; }
.spis__nr { font-size: 2rem; color: var(--zloto); line-height: 1; min-width: 1.2em; }
.spis ol { list-style: none; padding: 0; margin: 0; }
.spis li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 1.02rem; border-bottom: 1px dotted var(--linia); }
.spis__str { color: var(--tekst-2); font-variant-numeric: tabular-nums; }

.jak__siatka { display: grid; gap: 24px; max-width: 760px; margin-inline: auto; }
.jak__siatka--dwie { grid-template-columns: 1fr 1fr; max-width: none; }
.jak__kol { padding: 26px 28px; border: 1px solid var(--linia); border-radius: var(--r); }
.jak__kol h3 { display: flex; gap: 10px; align-items: center; }
.jak__kol h3 .ik { color: var(--zloto-ciemne); width: 26px; height: 26px; }
.jak__kol p, .jak__kol li { font-size: 1.05rem; }
.jak__kol strong { font-weight: 500; }
.jak__kol p:first-of-type strong { font-weight: 650; }

.autor-pas { background: var(--grafit); color: var(--tekst-jasny); }
.autor-pas__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.autor-pas__foto { border-radius: var(--r); overflow: hidden; }
.autor-pas h2 { color: #fff; }
.autor-pas strong { color: #fff; }
.autor-pas .link-strzalka { color: #fff; }

.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--linia); border-radius: var(--r); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 650; font-size: 1.1rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ik { transition: transform .25s; color: var(--zloto-ciemne); }
.faq details[open] summary .ik { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 8px; color: var(--tekst-2); }

.pasek-kup { display: none; }

/* ---------- kategorie, sklep ---------- */

.zakladki, .filtry { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; }
.zakladki a, .filtry button { padding: 9px 16px; border: 1px solid var(--linia); border-radius: var(--r); background: #fff; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .98rem; white-space: nowrap; }
.zakladki a[aria-current], .filtry button[aria-pressed='true'] { background: var(--grafit); border-color: var(--grafit); color: #fff; }

/* ---------- koszyk ---------- */

.koszyk-ekran { min-height: 80vh; }
.koszyk-ekran h1 { margin-bottom: 20px; }
.pusty h2 { font-size: 1.5rem; }
.koszyk-komunikat { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--r); background: #e8f3ec; color: var(--zielony); font-weight: 600; }
.koszyk-komunikat[hidden], .koszyk-strona[hidden], .koszyk-pasek[hidden], .pusty[hidden] { display: none; }
.koszyk-strona { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.koszyk-strona__bok { position: sticky; top: 100px; padding: 24px; border: 1px solid var(--linia); border-radius: var(--r); background: var(--mgla); }
.poz { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linia); }
.poz img { width: 96px; height: 96px; object-fit: contain; background: var(--mgla); border-radius: 4px; padding: 6px; }
.poz__nazwa { display: block; font-weight: 650; color: var(--tekst); text-decoration: none; font-size: 1.08rem; }
.poz__typ { display: block; color: var(--tekst-2); font-size: .92rem; margin: 2px 0 8px; }
.poz__ilosc { display: inline-flex; align-items: center; border: 1px solid var(--linia); border-radius: var(--r); }
.poz__ilosc button { width: 36px; height: 36px; border: 0; background: none; display: grid; place-items: center; }
.poz__ilosc span { min-width: 28px; text-align: center; font-weight: 650; }
.poz__prawo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.poz__prawo span { display: flex; gap: 8px; align-items: baseline; }
.poz__prawo s { color: var(--tekst-2); font-size: .95rem; }
.poz__usun { display: inline-flex; gap: 6px; align-items: center; border: 0; background: none; color: var(--tekst-2); font-size: .9rem; }
.poz__usun:hover { color: #a3262c; }
.zamiana { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin-top: 18px; padding: 18px; border: 1px solid var(--zloto); border-radius: var(--r); background: color-mix(in srgb, var(--zloto) 8%, #fff); }
.zamiana img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.zamiana__tytul { font-weight: 700; margin-bottom: 4px; }
.koszyk-sekcja { margin-top: 36px; }
.koszyk-sekcja h2 { font-size: 1.5rem; }
.zestawy { display: grid; gap: 12px; }
.zestaw { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--linia); border-radius: var(--r); }
.zestaw__foto img { width: 110px; height: 90px; object-fit: contain; }
.zestaw h3 { font-size: 1.05rem; margin-bottom: 2px; }
.zestaw h3 a { color: var(--tekst); text-decoration: none; }
.zestaw__tresc p { margin: 0; font-size: .92rem; color: var(--tekst-2); }
.zestaw__zysk { color: var(--zielony) !important; font-weight: 650; }
.zestaw__kup { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dobierz-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.propozycja { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--linia); border-radius: var(--r); text-align: center; }
.propozycja__foto img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--mgla); border-radius: 4px; padding: 8px; }
.propozycja__nazwa { font-weight: 650; color: var(--tekst); text-decoration: none; font-size: .98rem; }
.propozycja__powod { color: var(--tekst-2); font-size: .88rem; }
.propozycja .cena { justify-content: center; }
.propozycja .przycisk { margin-top: auto; }
.podsumowanie__tytul { font-size: 1.4rem; }
.podsumowanie { display: grid; gap: 10px; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.podsumowanie > div { display: flex; justify-content: space-between; gap: 12px; }
.podsumowanie > div > span:last-child { white-space: nowrap; }
.podsumowanie__nota { margin: -6px 0 0; font-size: .88rem; color: var(--tekst-2); }
.podsumowanie__zysk { color: var(--zielony); font-weight: 650; }
.podsumowanie__razem { padding-top: 12px; border-top: 1px solid var(--linia); font-weight: 700; font-size: 1.25rem; }
.szuflada__nota { font-size: .9rem; color: var(--tekst-2); margin: 14px 0; }
.koszyk-strona__bok .zaufanie { margin: 20px 0 18px; }
.koszyk-dalej { display: inline-flex; gap: 8px; align-items: center; color: var(--tekst-2); }
.koszyk-dalej .ik { transform: scaleX(-1); }
.pusty { text-align: center; padding: 30px 0; }
.pusty > .ik { width: 48px; height: 48px; color: var(--zloto); }
.pusty .siatka-produktow { text-align: left; margin-top: 28px; }
.koszyk-pasek { display: none; }

/* ---------- okno „dodano” ---------- */

dialog { border: 0; padding: 0; }
.dodano { width: min(100% - 24px, 520px); padding: 30px 28px 24px; border-radius: 10px; text-align: center; box-shadow: 0 30px 80px rgb(0 0 0 / .3); }
.dodano::backdrop, .lightbox::backdrop { background: rgb(31 30 28 / .6); }
.dodano__ptaszek { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #e8f3ec; color: var(--zielony); }
.dodano__ptaszek .ik { width: 32px; height: 32px; }
.dodano__tytul { font-family: var(--naglowki); font-size: 1.4rem; font-weight: 600; color: var(--zielony); }
.dodano__produkt { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; text-align: left; padding: 14px; border-radius: var(--r); background: var(--mgla); }
.dodano__produkt img { width: 100px; height: 100px; object-fit: contain; mix-blend-mode: multiply; }
.dodano__nazwa { font-weight: 650; margin-bottom: 4px; }
.dodano__extra { display: block; font-size: .9rem; color: var(--tekst-2); margin-bottom: 4px; }
.dodano__pasuje { margin: 18px 0 8px; font-weight: 650; text-align: left; }
.dodano__prop { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--linia); border-radius: var(--r); font-size: .95rem; }
.dodano__prop img { width: 64px; height: 64px; object-fit: contain; }
.dodano__prop-tytul { font-weight: 650; margin: 0; }
.dodano__prop span { color: var(--tekst-2); font-size: .88rem; }
.dodano__przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; display: none; place-items: center; }
.lightbox[open] { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }
.lightbox__zamknij { position: fixed; top: 16px; right: 16px; }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); }
.lightbox__nav--wstecz { left: 16px; }
.lightbox__nav--dalej { right: 16px; }

.prosta { padding: 72px 0 24px; text-align: center; }
.prosta > div > .ik { width: 52px; height: 52px; color: var(--zloto); }
.prosta .wstep { margin-inline: auto; }

/* ---------- stopka ---------- */

.stopka { background: var(--grafit); color: var(--tekst-jasny); padding: 56px 0 24px; font-size: 1rem; }
.stopka__w { width: min(100% - 32px, var(--szer)); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.stopka__logo { width: 230px; margin-bottom: 16px; }
.stopka__marka p { max-width: 36ch; }
.stopka__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grafit-3); color: #fff; }
.stopka__social a:hover { border-color: var(--zloto); color: var(--zloto-jasne); }
.stopka__kol { display: flex; flex-direction: column; gap: 8px; }
.stopka__tytul { margin: 0 0 6px; color: var(--zloto); font-weight: 650; font-size: 1rem; }
.stopka a { color: var(--tekst-jasny); text-decoration: none; }
.stopka a:hover { color: #fff; }
.stopka__kontakt { display: inline-flex; gap: 10px; align-items: center; font-size: 1.05rem; }
.stopka__kontakt .ik { color: var(--zloto); }
.stopka__godziny { margin: 4px 0 0; font-size: .92rem; color: #a8a49b; }
.stopka__dol { width: min(100% - 32px, var(--szer)); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--grafit-3); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .9rem; color: #a8a49b; }
.stopka__dol p { margin: 0; }
.stopka__imker { display: inline-flex; align-items: center; gap: 12px; }
.stopka__imker img { height: 26px; width: auto; }

/* ---------- tablet ---------- */

@media (max-width: 1080px) {
  .siatka-produktow { grid-template-columns: repeat(3, 1fr); }
  .opis__siatka { grid-template-columns: 1fr; }
  .w-wariancie { position: static; order: -1; }
  .w-wariancie__foto { display: none; }
  .stopka__w { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .naglowek__w { grid-template-columns: 1fr auto; min-height: 64px; }
  .logo img { width: 180px; }
  .przycisk-menu { display: grid; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 8px 16px 18px; background: var(--grafit); border-top: 1px solid var(--grafit-3); }
  .menu-otwarte .menu { display: flex; }
  .menu a { padding: 14px 8px; font-size: 1.1rem; }
  .p-spis { top: 64px; }
  .p-spis__linki { margin-inline: 0; }
  .p-spis__linki a { padding: 0 14px; font-size: 1rem; }
  html { scroll-padding-top: 130px; }
  .baner__siatka, .mp__siatka, .p-hero__siatka, .aplikacja__siatka, .autor-pas__siatka, .koszyk-strona { grid-template-columns: 1fr; }
  .baner__okladka { width: 160px; }
  .p-foto { position: relative; top: 0; --pad: 20px; aspect-ratio: 4 / 3; }
  .tytuly { grid-template-columns: minmax(0, 1fr); }
  .pasek-faktow ul { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .pasek-faktow li:nth-child(3) { border-left: 0; }
  .seria__siatka { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .autor__siatka { grid-template-columns: 1fr; grid-template-areas: 'tekst' 'portret' 'drugie'; }
  .autor__portret { position: static; max-width: 420px; }
  .spis { columns: 1; }
  .jak__siatka--dwie { grid-template-columns: 1fr; }
  .koszyk-strona__bok { position: static; }
  .dobierz-siatka { grid-template-columns: 1fr 1fr; }
  .ma-pasek-kup { padding-bottom: 76px; }
  .pasek-kup { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linia); box-shadow: 0 -8px 24px rgb(31 30 28 / .1); transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .pasek-kup.widoczny { transform: none; }
  .pasek-kup__nazwa { margin: 0; font-size: .85rem; color: var(--tekst-2); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pasek-kup .cena__stara { display: none; }
  .p-spis .p-spis__kup { display: none !important; }
  .koszyk-ekran { padding-bottom: 100px; }
  .koszyk-pasek { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linia); box-shadow: 0 -8px 24px rgb(31 30 28 / .1); }
  .koszyk-pasek span { display: block; font-size: .85rem; color: var(--tekst-2); }
  .koszyk-pasek strong { font-size: 1.2rem; }
}

/* ---------- telefon ---------- */

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .pasek-info { font-size: .9rem; }
  .pasek-info span { display: none; }
  .sekcja { padding: 48px 0; }
  .przycisk-koszyk__suma { display: none; }
  .przycisk-koszyk { padding: 10px 12px; }
  .baner { padding: 16px 0 20px; }
  .baner__glowny { grid-template-columns: 1fr; padding: 24px 20px; }
  .baner__okladka { grid-row: 1; width: 150px; justify-self: center; }
  .baner__cta .przycisk { width: 100%; }
  .kafel { grid-template-columns: 96px 1fr; padding: 12px; gap: 12px; }
  .sklep-glowna .filtry { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .mp-opcja { grid-template-columns: 1fr auto; }
  .mp-opcja .przycisk { grid-column: 1 / -1; }
  .pasek-faktow ul { grid-template-columns: 1fr; }
  .pasek-faktow li { justify-content: flex-start; border-left: 0 !important; }
  .siatka-produktow, .sklep-glowna .siatka-produktow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sklep-glowna .karta__foto { aspect-ratio: 1; }
  .karta__tresc { padding: 12px 10px 14px; }
  .karta__nazwa { font-size: 1.05rem; }
  .karta__dol { flex-direction: column; gap: 8px; }
  .karta__dol .przycisk { width: 100%; gap: 8px; }
  .karta__dol .przycisk .sr { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .mozaika { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mozaika a, .mozaika a:nth-child(1), .mozaika a:nth-child(2) { grid-column: span 1; }
  .mozaika a:nth-child(1) { grid-column: 1 / -1; }
  .tytul, .tytul:last-child:nth-child(odd) { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .tytul__dol { flex-wrap: wrap; }
  .tytul h3 { font-size: 1.3rem; }
  .tytul__chipy, .tytul__linki { grid-column: 1 / -1; }
  .wersje__lista { grid-template-columns: 1fr 1fr; }
  .wersja--pakiet:last-child:nth-child(3n + 1) { grid-column: auto; }
  .wersja--pakiet:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .p-kup__przyciski { grid-template-columns: 1fr; }
  .pakiet { grid-template-columns: 80px 1fr; padding: 12px; gap: 14px; }
  .pakiet__dol { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .dobierz__opcja { grid-template-columns: 22px 44px 1fr; }
  .dobierz__foto { width: 44px; height: 44px; }
  .dobierz__cena { grid-column: 3; font-size: .92rem; }
  .jak__kol { padding: 20px; }
  .poz { grid-template-columns: 72px 1fr; }
  .poz img { width: 72px; height: 72px; }
  .poz__prawo { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .zamiana { grid-template-columns: 1fr; text-align: center; }
  .zamiana img { margin-inline: auto; }
  .zestaw { grid-template-columns: 80px 1fr; }
  .zestaw__foto img { width: 80px; height: 70px; }
  .zestaw__kup { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .dobierz-siatka { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dodano { padding: 24px 18px 18px; }
  .dodano__przyciski { grid-template-columns: 1fr; }
  .dodano__przyciski .przycisk--obrys { order: 2; }
  .dodano__produkt { grid-template-columns: 76px 1fr; }
  .dodano__produkt img { width: 76px; height: 76px; }
  .stopka__w { grid-template-columns: 1fr; gap: 28px; }
  .stopka__dol { flex-direction: column; align-items: flex-start; }
  .autor__tekst .proza p { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}