/* Be The Standard: cały wygląd, mobile-first.
   Paleta z identyfikacji marki (papier, atrament, bordo #5E0B14), kroje marki: Cormorant Garamond + Inter. */

:root {
  --papier: #fbf9f5;
  --papier-2: #f3eee6;
  --papier-3: #e9e2d6;
  --atrament: #1f1a17;
  --atrament-2: #4b433d;
  --atrament-3: #6e655d;
  --bordo: #5e0b14;
  --bordo-2: #7a1520;
  --kreska: rgb(31 26 23 / .14);
  --kreska-mocna: rgb(31 26 23 / .32);
  --ok: #1d6b45;

  --f-ekspo: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --kontener: 1200px;
  --margines: 20px;
  --sekcja: clamp(56px, 7vw, 96px);
  --cien: 0 1px 2px rgb(31 26 23 / .06), 0 8px 24px -8px rgb(31 26 23 / .14);
  --cien-duzy: 0 2px 4px rgb(31 26 23 / .05), 0 24px 56px -16px rgb(31 26 23 / .22);
  --wejscie: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 700px) { :root { --margines: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--papier); color: var(--atrament); font-family: var(--f-tekst); font-size: 1.0625rem; line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (min-width: 700px) { body { font-size: 1.125rem; } }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--bordo); }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--bordo); color: var(--papier); }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; }
html { scrollbar-color: var(--atrament-3) var(--papier-2); }

h1, h2, h3 { font-family: var(--f-ekspo); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem); line-height: .94; }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1.1; }
h2 em, h1 em { font-style: italic; }
h2 strong { font-weight: 700; }
p { margin: 0 0 1em; }
.proza { max-width: 62ch; }
.proza > :last-child { margin-bottom: 0; }

.w { width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; }
.w-waska { width: min(100% - 2 * var(--margines), 800px); margin-inline: auto; }
.sekcja { padding-block: var(--sekcja); }
.sekcja + .sekcja { border-top: 1px solid var(--kreska); }
.naglowek-sekcji { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); }
.naglowek-sekcji p { color: var(--atrament-2); margin: 0; }
.wstep { font-size: 1.15em; color: var(--atrament-2); }
.akcent-zdanie { font-family: var(--f-ekspo); font-style: italic; font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.25; color: var(--bordo); margin-top: 1.2em; }
.wiersze { line-height: 1.85; }
.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(--atrament); color: var(--papier); padding: 10px 16px; }
.pomin:focus { left: 8px; }
.ik { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
[class$="__w"] > * { min-width: 0; }

/* Listy */
.ptaszki { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 12px; }
.ptaszki li { display: flex; gap: 12px; align-items: flex-start; }
.ptaszki .ik { color: var(--bordo); margin-top: .22em; width: 1.15em; height: 1.15em; }
.ptaszki--nie .ik { color: var(--atrament-3); }
.kreski { list-style: none; padding: 0 0 0 4px; margin: 0 0 1.2em; }
.kreski li { position: relative; padding-left: 22px; }
.kreski li::before { content: ''; position: absolute; left: 0; top: .85em; width: 12px; height: 1px; background: var(--bordo); }
.kreski--poziomo { display: flex; flex-wrap: wrap; gap: 6px 26px; }

/* Przyciski */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 1.5px solid var(--atrament); background: var(--atrament); color: var(--papier); font-family: var(--f-tekst); font-weight: 600; font-size: .95rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-radius: 0; transition: background .25s var(--wejscie), color .25s var(--wejscie), border-color .25s; }
.przycisk { box-shadow: 0 1px 0 rgb(31 26 23 / .25), 0 6px 14px -8px rgb(31 26 23 / .45); transition: background .25s var(--wejscie), color .25s var(--wejscie), border-color .25s, transform .25s var(--wejscie), box-shadow .25s var(--wejscie); }
.przycisk:hover { background: var(--bordo); border-color: var(--bordo); color: var(--papier); transform: translateY(-2px); box-shadow: 0 2px 0 rgb(94 11 20 / .35), 0 14px 24px -10px rgb(94 11 20 / .55); }
.przycisk:active { transform: translateY(1px); box-shadow: 0 0 0 rgb(31 26 23 / 0), 0 2px 6px -3px rgb(31 26 23 / .4); transition-duration: .08s; }
.przycisk--obrys, .przycisk--obrys:active { box-shadow: none; }
.przycisk--obrys:hover { box-shadow: 0 12px 22px -12px rgb(31 26 23 / .45); }
.przycisk--obrys { background: transparent; color: var(--atrament); }
.przycisk--obrys:hover { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }
.przycisk--jasny { background: var(--papier); border-color: var(--papier); color: var(--bordo); }
.przycisk--jasny:hover { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }
.przycisk--maly { min-height: 44px; padding: 10px 18px; font-size: .85rem; }
.przycisk--duzy { min-height: 58px; padding-inline: 32px; }
.przycisk--pelny { width: 100%; }
.przycisk .ik { width: 1.2em; height: 1.2em; }
.przycisk[data-dodano-ok] { background: var(--ok); border-color: var(--ok); color: #fff; }
.ikona-przycisk { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--atrament); background: var(--papier); color: var(--atrament); border-radius: 0; transition: background .2s, color .2s; }
.ikona-przycisk:hover { background: var(--atrament); color: var(--papier); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta--srodek { justify-content: center; }
.cta__nota { font-size: .92rem; color: var(--atrament-3); margin: 12px 0 0; display: flex; align-items: center; gap: 8px; }
@media (max-width: 559px) { .cta { flex-direction: column; } .cta .przycisk { width: 100%; white-space: normal; text-align: center; } }

/* Cena */
.cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.cena__stara { color: var(--atrament-3); font-size: 1.1rem; }
.cena__teraz { font-family: var(--f-ekspo); font-weight: 600; font-size: 2rem; line-height: 1; }
.cena__brutto { font-size: .9rem; color: var(--atrament-3); }
.cena--duza .cena__teraz { font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem); }

/* Nagłówek */
.naglowek { position: sticky; top: 0; z-index: 40; background: rgb(251 249 245 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.naglowek.przewiniety { border-color: var(--kreska); box-shadow: 0 6px 24px -14px rgb(31 26 23 / .35); }
.naglowek__w { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; min-height: 76px; }
.logo { justify-self: start; }
.logo img { height: 56px; width: auto; }
.menu { display: flex; gap: 30px; }
.menu a { font-size: 1.075rem; font-weight: 500; text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: var(--bordo); color: var(--atrament); }
.naglowek__akcje { justify-self: end; display: flex; align-items: center; gap: 22px; }
@media (max-width: 959px) { .naglowek__akcje { gap: 6px; } }
.przycisk-koszyk { position: relative; display: grid; place-items: center; width: 48px; height: 48px; text-decoration: none; }
.przycisk-koszyk .ik { width: 26px; height: 26px; }
.przycisk-koszyk__licznik { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bordo); color: var(--papier); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.przycisk-koszyk__licznik[hidden] { display: none; }
.przycisk-koszyk__licznik.podskok { animation: podskok .5s var(--wejscie); }
@keyframes podskok { 30% { transform: scale(1.45); } }
.przycisk-menu { display: none; width: 48px; height: 48px; border: 0; background: none; place-items: center; }
.przycisk-menu .ik { width: 28px; height: 28px; }
@media (max-width: 959px) {
  .naglowek__w { grid-template-columns: auto 1fr; min-height: 66px; }
  .logo img { height: 46px; }
  .przycisk-menu { display: grid; }
  .naglowek__kup { display: none; }
  .menu { position: fixed; inset: 66px 0 auto; flex-direction: column; gap: 0; background: var(--papier); border-bottom: 1px solid var(--kreska); padding: 8px var(--margines) 20px; box-shadow: var(--cien-duzy); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--wejscie), visibility .25s; }
  .menu a { font-family: var(--f-ekspo); font-size: 1.6rem; padding: 12px 0; border-bottom: 1px solid var(--kreska); }
  .menu-otwarte .menu { transform: none; opacity: 1; visibility: visible; }
}

/* ============ GŁÓWNA ============ */

/* Hero: zdjęcie z posiedzenia zarządu, treść jak zawiadomienie o zebraniu */
.hero { display: grid; background: var(--papier-2); }
.hero__foto, .hero__foto picture { height: 100%; }
@media (max-width: 999px) { .hero__foto img { max-height: 62vh; } }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero__tresc { padding: 36px var(--margines) 48px; }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.3rem); margin-bottom: .45em; }
.hero__obecnosc { display: inline-block; font-family: var(--f-tekst); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bordo); border: 2px solid var(--bordo); padding: 8px 14px 7px; margin: 0 0 22px; transform: rotate(-2.5deg); animation: pieczatka .7s var(--wejscie) .35s both; }
@keyframes pieczatka { 0% { opacity: 0; transform: rotate(-9deg) scale(1.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-2.5deg) scale(1); } }
.hero__tresc > p { max-width: 46ch; color: var(--atrament-2); }
.rada { border-bottom: 1px solid var(--kreska); padding-block: clamp(40px, 5vw, 64px); }
.rada__w { display: grid; gap: 18px; }
.rada__kto { font-family: var(--f-ekspo); font-style: italic; font-size: 1.6rem; color: var(--bordo); margin: 0; }
.rada__pytania { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; counter-reset: p; }
.rada__pytania li { font-family: var(--f-ekspo); font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.2; padding-left: 22px; border-left: 1px solid var(--bordo); }
@media (min-width: 900px) { .rada__w { grid-template-columns: 1fr 3fr; align-items: start; } .rada__pytania { grid-template-columns: 1fr 1.5fr; gap: 40px; } }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: min(82vh, 800px); }
  .hero__foto { order: 2; }
  .hero__tresc { align-self: center; padding: 56px 48px 64px max(var(--margines), calc((100vw - var(--kontener)) / 2)); }
}

/* Opinie: taśma zrzutów wiadomości */
.opinie { overflow: hidden; }
.tasma { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(var(--margines), calc((100vw - var(--kontener)) / 2)) 20px; scrollbar-width: thin; }
.opinia { flex: none; scroll-snap-align: center; display: grid; place-items: center; width: min(82vw, 340px); height: 380px; background: #fff; box-shadow: var(--cien); padding: 14px; overflow: hidden; }
.opinia img { max-height: 100%; width: auto; object-fit: contain; transition: transform .5s var(--wejscie); }
.opinia:hover img { transform: scale(1.04); }
.tasma__nav { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }

/* Pas produktu */
.produkt-pas { background: var(--papier); }
.produkt-pas__w { display: grid; gap: 32px; align-items: center; }
.produkt-pas__foto { display: block; max-width: min(100%, 380px); margin-inline: auto; }
.produkt-pas__foto img { filter: drop-shadow(0 30px 30px rgb(31 26 23 / .18)); transition: transform .6s var(--wejscie); }
.produkt-pas__foto:hover img { transform: translateY(-6px) rotate(-1deg); }
.produkt-pas .cena { margin-top: 8px; }
@media (min-width: 800px) { .produkt-pas__w { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* Sekcje tekst + wycinek */
.dwa__w { display: grid; gap: 36px; align-items: center; }
.dwa__foto img { margin-inline: auto; max-height: min(640px, 58vh); width: auto; }
@media (max-width: 859px) { .dwa__foto img, .dzien__foto img { max-height: 440px; } .porownanie__foto img { max-width: min(100%, 300px); } }
@media (min-width: 860px) {
  .dwa__w { grid-template-columns: 5fr 7fr; gap: 72px; }
  .dwa--odwr .dwa__w { grid-template-columns: 7fr 5fr; }
  .dwa--odwr .dwa__foto { order: 2; }
}

/* 63% */
.badanie { background: var(--papier-2); }
.badanie__w { display: grid; gap: 40px; align-items: start; }
.badanie__procent { font-family: var(--f-ekspo); font-weight: 500; font-size: clamp(6rem, 4rem + 9vw, 11rem); line-height: .8; color: var(--bordo); margin: 0 0 .1em; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.badanie h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); max-width: 16ch; }
.badanie__zrodlo { font-size: .9rem; color: var(--atrament-3); }
.badanie__foto { margin-top: 24px; max-width: min(100%, 460px); mix-blend-mode: multiply; }
@media (min-width: 900px) { .badanie__w { grid-template-columns: 5fr 6fr; gap: 80px; } .badanie__liczba { position: sticky; top: 110px; } }

/* Mozaika zdjęć workbooka */
.mozaika { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mozaika__el { display: block; overflow: hidden; background: var(--papier-2); aspect-ratio: 3 / 4; }
.mozaika__el img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--wejscie); }
.mozaika__el:hover img { transform: scale(1.07); }
.mozaika__el--0 { grid-column: span 2; aspect-ratio: 1; }
.mozaika__el--7 { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (min-width: 800px) {
  .mozaika { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .mozaika__el--0 { grid-row: span 2; aspect-ratio: auto; }
  .mozaika__el--7 { aspect-ratio: auto; }
}

/* Oferta (główny box zakupu) */
.oferta { background: var(--papier-2); }
.oferta__w { display: grid; gap: 40px; align-items: start; }
.oferta__foto { max-width: min(100%, 440px); margin-inline: auto; }
.oferta__foto img { filter: drop-shadow(0 34px 34px rgb(31 26 23 / .2)); }
.oferta h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
.oferta__cytat { margin: 0 0 1em; font-family: var(--f-ekspo); font-style: italic; font-size: 1.45rem; line-height: 1.3; color: var(--bordo); }
.oferta__podtytul { font-weight: 600; margin-bottom: .6em; }
.kup { background: var(--papier); border: 1px solid var(--kreska); padding: clamp(20px, 3vw, 32px); margin-top: 28px; box-shadow: var(--cien); }
.kup .cta { margin-top: 20px; }
.dobierz { display: grid; grid-template-columns: auto 96px 1fr; gap: 14px; align-items: center; margin-top: 20px; padding: 14px; border: 1px dashed var(--kreska-mocna); cursor: pointer; transition: border-color .2s, background .2s; font-size: .98rem; line-height: 1.45; }
.dobierz:hover { border-color: var(--bordo); }
.dobierz:has(input:checked) { border-style: solid; border-color: var(--bordo); background: rgb(94 11 20 / .04); }
.dobierz input { width: 22px; height: 22px; accent-color: var(--bordo); margin: 0; }
.dobierz img { width: 96px; height: 54px; object-fit: cover; }
.dobierz strong { display: block; }
.dobierz s { color: var(--atrament-3); }
.dobierz b { color: var(--bordo); }
@media (max-width: 459px) { .dobierz { grid-template-columns: auto 1fr; } .dobierz img { display: none; } }
.oferta__metoda { margin-top: 28px; font-size: .95rem; color: var(--atrament-2); }
.oferta__metoda span { display: inline-block; margin-top: 4px; font-weight: 600; letter-spacing: .14em; color: var(--atrament); }
.oferta__zwrot { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--atrament-2); }
.oferta__zwrot .ik { margin-top: .2em; color: var(--bordo); }
@media (min-width: 900px) { .oferta__w { grid-template-columns: 5fr 7fr; gap: 72px; } .oferta__foto { position: sticky; top: 120px; } }

/* Wykonanie i format */
.format__w { display: grid; gap: 40px; align-items: center; }
.format__foto img { width: 100%; }
.spec { display: grid; grid-template-columns: 1fr; gap: 0 32px; margin: 0; }
.spec__el { padding: 16px 0; border-top: 1px solid var(--kreska); }
.spec dt { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--atrament-3); margin-bottom: 4px; }
.spec dd { margin: 0; font-family: var(--f-ekspo); font-size: 1.35rem; line-height: 1.3; }
.format__nota { margin-top: 20px; color: var(--atrament-2); }
.format__pl { display: inline-block; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--bordo); border-top: 1px solid var(--bordo); padding-top: 8px; }
@media (min-width: 640px) { .spec { grid-template-columns: 1fr 1fr; } .spec__el:nth-child(3), .spec__el:nth-child(6) { grid-column: span 2; } }
@media (min-width: 900px) { .format__w { grid-template-columns: 5fr 7fr; gap: 72px; } }

/* Jak to działa */
.jak__w { display: grid; gap: 40px; align-items: start; }
.schodki { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 8px; counter-reset: s; }
.schodki li { font-family: var(--f-ekspo); font-size: 1.6rem; line-height: 1.2; }
.schodki li:nth-child(2) { padding-left: 1.2em; } .schodki li:nth-child(3) { padding-left: 2.4em; } .schodki li:nth-child(4) { padding-left: 3.6em; color: var(--bordo); font-style: italic; }
.przyklad { background: var(--atrament); color: var(--papier); padding: clamp(24px, 4vw, 44px); }
.przyklad h3 { font-style: italic; color: #e9c9cd; }
.przyklad__cel { font-family: var(--f-ekspo); font-size: 1.55rem; line-height: 1.25; }
.przyklad .kreski li::before { background: #e9c9cd; }
.przyklad__dzis { font-family: var(--f-ekspo); font-style: italic; font-size: 1.45rem; line-height: 1.3; border-top: 1px solid rgb(251 249 245 / .25); padding-top: 16px; margin: 0; }
@media (min-width: 900px) { .jak__w { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* W środku + obszary */
.wewnatrz__w { display: grid; gap: 40px; align-items: center; }
.wewnatrz .ptaszki { font-size: 1.08em; }
@media (min-width: 900px) { .wewnatrz__w { grid-template-columns: 5fr 7fr; gap: 64px; } }
.obszary { margin-top: clamp(56px, 7vw, 96px); text-align: center; }
.obszary__siatka { display: grid; gap: 0; text-align: left; margin-top: 32px; border-top: 1px solid var(--atrament); }
.obszar { padding: 26px 0; border-bottom: 1px solid var(--kreska); }
.obszar h3 { color: var(--bordo); margin-bottom: .3em; }
.obszar p { margin: 0; color: var(--atrament-2); }
@media (min-width: 760px) { .obszary__siatka { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* 12 lekcji */
.lekcje { background: var(--papier-2); }
.lekcje__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 56px; }
.lekcje__lista li { display: grid; grid-template-columns: 7.2em 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--kreska); }
.lekcje__nr { font-family: var(--f-ekspo); font-style: italic; font-size: 1.15rem; color: var(--bordo); white-space: nowrap; }
.lekcje__wdrozenie { margin-top: 36px; text-align: center; }
.lekcje__wdrozenie .kreski--poziomo { justify-content: center; }
@media (min-width: 800px) { .lekcje__lista { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(6, auto); } }

/* Dzień po wdrożeniu */
.dzien__w { display: grid; gap: 32px; align-items: center; }
.dzien__foto img { max-height: 560px; width: auto; margin-inline: auto; }
@media (min-width: 860px) { .dzien__w { grid-template-columns: 7fr 4fr; gap: 72px; } }

/* Przed / Z systemem */
.porownanie { background: var(--papier-2); }
.porownanie__w { display: grid; gap: 40px; align-items: center; }
.porownanie__foto img { max-width: min(100%, 380px); margin-inline: auto; mix-blend-mode: multiply; }
.przed-po { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.przed-po th { text-align: left; font-family: var(--f-ekspo); font-weight: 600; font-size: 1.5rem; padding: 0 14px 12px; border-bottom: 1px solid var(--atrament); }
.przed-po th + th { color: var(--bordo); }
.przed-po td { padding: 14px; vertical-align: top; width: 50%; }
.przed-po tbody tr:nth-child(odd) { background: rgb(251 249 245 / .8); }
.przed-po td .ik { display: inline-block; vertical-align: -.2em; margin-right: 8px; width: 1em; height: 1em; }
.przed-po td:first-child { color: var(--atrament-3); }
.przed-po td:first-child .ik { color: var(--atrament-3); }
.przed-po td + td { font-weight: 600; }
.przed-po td + td .ik { color: var(--bordo); }
@media (min-width: 900px) { .porownanie__w { grid-template-columns: 4fr 7fr; gap: 64px; } }

/* Dla kogo */
.dla-kogo__w { display: grid; gap: 40px; }
.dla-kogo h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.dla-kogo__kol--nie { color: var(--atrament-2); }
@media (min-width: 860px) { .dla-kogo__w { grid-template-columns: 1fr 1fr; gap: 72px; } .dla-kogo__kol--nie { border-left: 1px solid var(--kreska); padding-left: 56px; } }

/* Autorka */
.autorka { background: var(--papier-2); }
.autorka__w { display: grid; gap: 40px; align-items: start; }
.autorka__foto { margin: 0; position: relative; max-width: min(100%, 440px); }
.autorka__foto img { width: 100%; }
.autorka__foto figcaption { display: flex; flex-direction: column; margin-top: 14px; }
.autorka__foto figcaption strong { font-family: var(--f-ekspo); font-style: italic; font-weight: 500; font-size: 1.5rem; }
.autorka__foto figcaption span { font-size: .9rem; color: var(--atrament-3); }
.autorka__cytat { margin: 0 0 1.4em; padding-left: 22px; border-left: 1px solid var(--bordo); font-family: var(--f-ekspo); font-style: italic; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); line-height: 1.32; }
.autorka__dalej summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--atrament); padding: 6px 0; margin-bottom: 1em; }
.autorka__dalej summary::-webkit-details-marker { display: none; }
.autorka__dalej summary:hover { color: var(--bordo); border-color: var(--bordo); }
.autorka__dalej[open] summary .ik { transform: rotate(180deg); }
.autorka__dalej summary .ik { transition: transform .3s var(--wejscie); }
.autorka__dalej[open] summary span { font-size: 0; } .autorka__dalej[open] summary span::after { content: 'Zwiń historię'; font-size: .9rem; }
@media (min-width: 900px) { .autorka__w { grid-template-columns: 5fr 7fr; gap: 72px; } .autorka__foto { position: sticky; top: 110px; } }

/* Bezpłatna lekcja (sekcja bordo) */
.lekcja { background: var(--bordo); color: var(--papier); padding-block: var(--sekcja); }
.lekcja__w { display: grid; gap: 40px; align-items: center; }
.lekcja__foto img { width: 100%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); }
.lekcja h2 { color: var(--papier); }
.lekcja__temat { font-family: var(--f-ekspo); font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); line-height: 1.2; }
.lekcja .ptaszki .ik { color: var(--papier); }
.lekcja p, .lekcja li { color: rgb(251 249 245 / .9); }
.lekcja__form { margin-top: 24px; }
.lekcja__etykieta { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 8px; }
.lekcja__pola { display: grid; gap: 10px; }
.lekcja__pola input { min-height: 54px; border: 1.5px solid rgb(251 249 245 / .5); background: rgb(251 249 245 / .08); color: var(--papier); padding: 0 18px; font: inherit; border-radius: 0; }
.lekcja__pola input::placeholder { color: rgb(251 249 245 / .7); }
.lekcja__pola input:focus { outline: none; border-color: var(--papier); background: rgb(251 249 245 / .14); }
.lekcja__blad { background: var(--papier); color: var(--bordo) !important; padding: 8px 12px; margin-top: 10px; font-weight: 600; font-size: .95rem; }
.lekcja__nota { font-size: .85rem; margin-top: 14px; color: rgb(251 249 245 / .78) !important; }
.lekcja__ok { border: 1px solid rgb(251 249 245 / .5); padding: 20px; margin-top: 24px; }
.lekcja__ml { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lekcja [hidden] { display: none !important; }
.lekcja .przycisk--jasny:hover { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }
@media (min-width: 600px) { .lekcja__pola { grid-template-columns: 1fr auto; } }
@media (min-width: 900px) { .lekcja__w { grid-template-columns: 6fr 5fr; gap: 64px; } }

/* Pytanie końcowe i zamknięcie */
.pytanie { background: var(--atrament); color: var(--papier); text-align: center; }
.pytanie p { color: rgb(251 249 245 / .85); }
.pytanie .cta { justify-content: center; }
.pytanie .przycisk { background: var(--papier); color: var(--atrament); border-color: var(--papier); }
.pytanie .przycisk:hover { background: var(--bordo); border-color: var(--bordo); color: var(--papier); }
.pytanie .przycisk--obrys { background: transparent; color: var(--papier); border-color: rgb(251 249 245 / .6); }
.pytanie .cta__nota { justify-content: center; color: rgb(251 249 245 / .7); }
.zamkniecie { text-align: center; }
.zamkniecie .cta, .zamkniecie .cta__nota { justify-content: center; }
.zamkniecie h2 + p { font-family: var(--f-ekspo); font-style: italic; font-size: 1.5rem; color: var(--bordo); }

/* FAQ */
.faq h2 { text-align: center; }
.faq__lista { border-top: 1px solid var(--atrament); }
.faq__el { border-bottom: 1px solid var(--kreska); }
.faq__el summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--f-ekspo); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); line-height: 1.25; font-weight: 500; }
.faq__el summary::-webkit-details-marker { display: none; }
.faq__el summary .ik { color: var(--bordo); transition: transform .3s var(--wejscie); }
.faq__el[open] summary .ik { transform: rotate(45deg); }
.faq__el summary:hover { color: var(--bordo); }
.faq__el p { margin: 0 0 22px; color: var(--atrament-2); max-width: 66ch; }
.faq__inne { text-align: center; margin-top: 32px; color: var(--atrament-2); }

/* ============ POZOSTAŁE STRONY ============ */

.prosta-strona h1 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); }
.prawny h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prawny p { font-size: 1rem; color: var(--atrament-2); margin-bottom: .6em; overflow-wrap: anywhere; }
.kontakt { display: grid; gap: 0; margin: 32px 0; border-top: 1px solid var(--atrament); }
.kontakt__el { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding: 22px 0; border-bottom: 1px solid var(--kreska); }
.kontakt__el .ik { grid-row: span 3; width: 28px; height: 28px; color: var(--bordo); margin-top: 4px; }
.kontakt__el h2 { font-size: 1.1rem; font-family: var(--f-tekst); font-weight: 600; margin: 0; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-3); }
.kontakt__el a { font-family: var(--f-ekspo); font-size: 1.7rem; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.kontakt__el p { margin: 0; color: var(--atrament-2); }
.kontakt__firma h2 { font-size: 1.6rem; }
.blad { text-align: center; }
.blad__foto { width: 200px; margin: 0 auto 16px; mix-blend-mode: multiply; }

/* Produkty */
.siatka-produktow { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.karta { display: flex; flex-direction: column; background: #fff; padding: 18px 18px 24px; box-shadow: var(--cien); }
.karta__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); margin-bottom: 18px; }
.karta__foto img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .6s var(--wejscie); }
.karta:hover .karta__foto img { transform: scale(1.06); }
.karta__typ { font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--atrament-3); margin: 0 0 4px; }
.karta__nazwa { font-size: 1.8rem; margin: 0 0 8px; }
.karta__nazwa a { text-decoration: none; }
.karta__lead { color: var(--atrament-2); }
.karta .cena { margin: auto 0 16px; }
.karta--wkrotce .karta__foto img { object-fit: cover; padding: 0; filter: grayscale(1); }

/* Karta dashboardu */
.karta-produktu__w { display: grid; gap: 36px; align-items: center; }
.karta-produktu__foto img { width: 100%; }
.okruszki { font-size: .9rem; color: var(--atrament-3); margin-bottom: 14px; }
.okruszki a { text-decoration: none; border-bottom: 1px solid var(--kreska-mocna); }
.karta-produktu h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); }
.karta-produktu .cta__nota .ik { color: #1d6f42; }
.z-workbookiem { margin-top: 28px; padding: 18px 20px; border: 1px dashed var(--bordo); }
.z-workbookiem p { margin: 0 0 12px; }
.z-workbookiem s { color: var(--atrament-3); }
.z-workbookiem b { color: var(--bordo); }
.z-workbookiem .przycisk { white-space: normal; text-align: center; }
@media (min-width: 900px) { .karta-produktu__w { grid-template-columns: 7fr 5fr; gap: 64px; } }
.opis-dashboard { background: var(--papier-2); }
.przed-po-dwa { display: grid; gap: 28px; margin-bottom: 32px; }
.przed-po-dwa h2 { font-size: 1.7rem; }
.przed-po-dwa > div + div h2 { color: var(--bordo); }
@media (min-width: 760px) { .przed-po-dwa { grid-template-columns: 1fr 1fr; gap: 48px; } }
.opis-dashboard .proza { max-width: none; }

/* ============ KOSZYK ============ */

.koszyk-ekran h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); margin-bottom: 24px; }
.koszyk-komunikat { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 14px 18px; background: #e8f3ec; color: var(--ok); font-weight: 600; }
.koszyk-komunikat[hidden] { display: none; }
.koszyk-strona { display: grid; gap: 32px; align-items: start; }
.koszyk-strona[hidden] { display: none; }
.koszyk-strona__bok { background: #fff; padding: 26px; position: sticky; top: 100px; box-shadow: var(--cien-duzy); }
@media (min-width: 900px) { .koszyk-strona { grid-template-columns: 1.5fr 1fr; gap: 48px; } }
@media (max-width: 899px) { .koszyk-strona__bok { position: static; } }
.poz { display: grid; grid-template-columns: 150px 1fr; gap: 18px 22px; align-items: center; padding: 18px; background: #fff; box-shadow: var(--cien); margin-bottom: 14px; }
.poz.nowa { animation: nowa 1.4s var(--wejscie); }
@keyframes nowa { 0% { background: #e3f1e8; transform: translateY(-10px); } 100% { background: #fff; transform: none; } }
.poz img { width: 150px; aspect-ratio: 4 / 3; object-fit: contain; background: var(--papier-2); padding: 8px; }
.poz__nazwa { font-family: var(--f-ekspo); font-weight: 600; font-size: 1.45rem; line-height: 1.15; text-decoration: none; display: block; }
.poz__typ { font-size: .95rem; color: var(--atrament-3); display: block; margin-top: 4px; }
.poz__dol { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.poz__ilosc { display: inline-flex; align-items: center; border: 1px solid var(--kreska-mocna); }
.poz__ilosc button { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; }
.poz__ilosc button:hover { background: var(--papier-2); }
.poz__ilosc span { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.poz__cena { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.poz__cena s { color: var(--atrament-3); }
.poz__cena strong { font-family: var(--f-ekspo); font-size: 1.7rem; font-weight: 600; }
.poz__usun { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--atrament-3); padding: 8px; font-size: .92rem; }
.poz__usun:hover { color: var(--bordo); }
@media (max-width: 520px) { .poz { grid-template-columns: 96px 1fr; } .poz img { width: 96px; } }
.koszyk-sekcja { margin-top: 40px; }
.koszyk-sekcja h2 { text-align: center; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.propozycja { display: grid; grid-template-columns: 150px 1fr; gap: 18px 22px; align-items: center; background: var(--papier-2); padding: 18px; border: 1px dashed var(--bordo); }
.propozycja img { width: 150px; aspect-ratio: 4 / 3; object-fit: contain; background: var(--papier); padding: 8px; }
.propozycja__nazwa { font-family: var(--f-ekspo); font-weight: 600; font-size: 1.4rem; line-height: 1.15; text-decoration: none; display: block; }
.propozycja__powod { display: block; color: var(--atrament-2); margin: 6px 0 10px; }
.propozycja .cena { margin-bottom: 12px; }
@media (max-width: 520px) { .propozycja { grid-template-columns: 1fr; text-align: center; } .propozycja img { margin-inline: auto; } .propozycja .cena { justify-content: center; } }
.podsumowanie__tytul { font-size: 1.8rem; margin: 0 0 16px; }
.podsumowanie { display: grid; gap: 8px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.podsumowanie div { display: flex; justify-content: space-between; gap: 12px; }
.podsumowanie__zysk { color: var(--ok); font-weight: 600; }
.podsumowanie__razem { font-family: var(--f-ekspo); font-weight: 600; font-size: 1.9rem; padding-top: 12px; border-top: 1px solid var(--atrament); margin-top: 6px; }
.koszyk-nota { font-size: .92rem; color: var(--atrament-3); margin: 14px 0 0; }
.zaufanie { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-size: .95rem; }
.zaufanie li { display: flex; align-items: center; gap: 10px; }
.zaufanie .ik { color: var(--bordo); }
.koszyk-dalej { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 500; }
.przycisk--puls { animation: puls 2.4s var(--wejscie) 1s 2; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgb(94 11 20 / .35); } 50% { box-shadow: 0 0 0 10px rgb(94 11 20 / 0); } }
.pusty { text-align: center; padding: 20px 0; }
.pusty[hidden] { display: none; }
.koszyk-pasek { display: none; }
@media (max-width: 899px) {
  .koszyk-pasek:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--margines); background: var(--papier); border-top: 1px solid var(--kreska); box-shadow: 0 -10px 30px -16px rgb(31 26 23 / .4); }
  .koszyk-pasek span { display: block; font-size: .85rem; color: var(--atrament-3); }
  .koszyk-pasek strong { font-family: var(--f-ekspo); font-size: 1.5rem; }
  .koszyk-pasek .przycisk { white-space: nowrap; }
  .ma-koszyk-pasek .stopka { padding-bottom: 84px; }
}

/* Okno „Dodano do koszyka” */
.dodano { border: 0; padding: clamp(22px, 4vw, 36px); width: min(100% - 32px, 520px); background: var(--papier); color: var(--atrament); box-shadow: var(--cien-duzy); text-align: center; }
.dodano::backdrop { background: rgb(31 26 23 / .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dodano[open] { animation: okno .45s var(--wejscie); }
@keyframes okno { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.dodano__ptaszek { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: #fff; }
.dodano__ptaszek .ik { width: 28px; height: 28px; }
.dodano__tytul { font-family: var(--f-ekspo); font-size: 1.9rem; font-weight: 600; color: var(--ok); margin: 10px 0 18px; }
.dodano__produkt { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; text-align: left; padding: 14px; background: #fff; }
.dodano__produkt img { width: 110px; aspect-ratio: 4 / 3; object-fit: contain; }
.dodano__nazwa { font-family: var(--f-ekspo); font-size: 1.3rem; font-weight: 600; line-height: 1.15; margin: 0 0 6px; }
.dodano__extra { display: block; font-size: .9rem; color: var(--atrament-2); margin-bottom: 6px; }
.dodano .cena__teraz { font-size: 1.5rem; }
.dodano__pasuje { font-weight: 600; margin: 18px 0 8px; text-align: left; }
.dodano__prop { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px dashed var(--bordo); }
.dodano__prop img { width: 72px; aspect-ratio: 4 / 3; object-fit: contain; }
.dodano__prop-tytul { font-weight: 600; margin: 0; line-height: 1.3; }
.dodano__prop span { font-size: .92rem; color: var(--atrament-2); }
.dodano__przyciski { display: flex; gap: 10px; margin-top: 22px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .dodano__przyciski { flex-direction: column-reverse; } .dodano__przyciski .przycisk { width: 100%; } .dodano__prop { grid-template-columns: 56px 1fr; } .dodano__prop .przycisk { grid-column: 1 / -1; } }

/* Zgoda cookies */
.zgoda { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 520px; background: var(--papier); border: 1px solid var(--kreska); padding: 18px 20px; box-shadow: var(--cien-duzy); font-size: .95rem; }
.zgoda[hidden] { display: none; }
.zgoda p { margin: 0 0 12px; }
.zgoda__przyciski { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ma-koszyk-pasek .zgoda { bottom: 90px; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100dvh; width: 100%; height: 100dvh; }
.lightbox::backdrop { background: rgb(31 26 23 / .92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 86vh; width: auto; }
.lightbox__zamknij { position: fixed; top: 16px; right: 16px; }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); }
.lightbox__nav--wstecz { left: 12px; }
.lightbox__nav--dalej { right: 12px; }

/* Stopka */
.stopka { background: var(--atrament); color: rgb(251 249 245 / .82); }
.stopka a { color: var(--papier); text-decoration: none; }
.stopka a:hover { color: #f0d3d6; text-decoration: underline; }
.stopka__w { display: grid; gap: 36px; width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; padding-block: 64px 44px; }
.stopka__logo { width: 120px; margin-bottom: 18px; }
.stopka__marka p { max-width: 36ch; font-family: var(--f-ekspo); font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--papier); }
.stopka__kol { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 1rem; }
.stopka__kol a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.stopka__tytul { font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e3b9be; margin: 0 0 4px; }
.stopka__firma { font-size: .92rem; margin: 6px 0 0; }
.stopka__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; padding-block: 22px 30px; border-top: 1px solid rgb(251 249 245 / .16); font-size: .92rem; }
.stopka__dol p { margin: 0; }
.stopka__imker { display: inline-flex !important; align-items: center; gap: 14px; opacity: .85; }
.stopka__imker:hover { opacity: 1; text-decoration: none !important; }
.stopka__imker img { height: 24px; width: auto; }
@media (min-width: 900px) { .stopka__w { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }

/* Ikony przy cechach, parametrach i obszarach */
.cta__nota .ik { color: var(--bordo); width: 1.15em; height: 1.15em; }
.cechy { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cechy li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--kreska); background: var(--papier); font-size: .92rem; line-height: 1.3; }
.cechy .ik { color: var(--bordo); width: 1.2em; height: 1.2em; }
.spec__el { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-content: start; }
.spec__el .ik { grid-row: span 2; width: 26px; height: 26px; color: var(--bordo); margin-top: 2px; }
.format__pl { display: inline-flex; align-items: center; gap: 8px; }
.format__pl .ik { width: 1.2em; height: 1.2em; }
.obszar { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; align-content: start; }
.obszar .ik { grid-row: span 2; width: 40px; height: 40px; padding: 8px; color: var(--bordo); border: 1px solid rgb(94 11 20 / .35); border-radius: 50%; transition: background .3s, color .3s; }
.obszar:hover .ik { background: var(--bordo); color: var(--papier); }

/* 3. Wejście treści przy przewijaniu (tylko z JS i bez ograniczenia ruchu) */
.js-ruch .odslon { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--wejscie), transform .9s var(--wejscie); transition-delay: var(--opoznienie, 0s); }
.js-ruch .odslon.widoczny { opacity: 1; transform: none; }

/* 4. Workbook w ofercie przechyla się za kursorem, na dotyku lekko się kołysze */
.oferta__foto { perspective: 1200px; }
.oferta__foto img { transition: transform .5s var(--wejscie); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); will-change: transform; }
@media (hover: none) { .oferta__foto img { animation: kolysanie 6s ease-in-out infinite; } }
@keyframes kolysanie { 0%, 100% { transform: rotateY(-5deg) rotateX(2deg); } 50% { transform: rotateY(5deg) rotateX(-1deg); } }

/* 5. Jeden puls na głównym przycisku, gdy oferta wchodzi na ekran */
.puls-raz { animation: puls 1.6s var(--wejscie) 1; }

/* 1. Pasek zakupu na telefonie */
.pasek-kup { display: none; }
@media (max-width: 899px) {
  .pasek-kup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margines) calc(10px + env(safe-area-inset-bottom)); background: rgb(251 249 245 / .97); border-top: 1px solid var(--kreska); box-shadow: 0 -10px 30px -16px rgb(31 26 23 / .4); transform: translateY(110%); transition: transform .45s var(--wejscie); }
  .pasek-kup.widoczny { transform: none; }
  .pasek-kup span { display: block; font-size: .8rem; color: var(--atrament-3); line-height: 1.2; }
  .pasek-kup strong { font-family: var(--f-ekspo); font-size: 1.5rem; line-height: 1.1; }
  .pasek-kup .przycisk { min-height: 48px; padding-inline: 18px; }
  .ma-pasek-kup .zgoda { bottom: 86px; }
  .ma-pasek-kup .stopka { padding-bottom: 80px; }
}