/* Nursicare — wspólny arkusz wszystkich stron.
   Kolory z Nursicare_Style_Guide_23Apr17.pdf (STATUS.md → Identyfikacja). Tylko jasny motyw. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/montserrat-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: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/montserrat-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: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/caveat-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: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/caveat-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 {
  --marka: #d41568;        /* Pantone 214 C */
  --marka-ciemna: #b30d56; /* pasek dostawy, linki */
  --marka-hover: #8a0a42;
  --roz: #ffeaf3;          /* jasne tło */
  --zygzak: #ef4a8a;
  --tekst: #2b1f25;
  --tekst-2: #4a3a42;
  --tekst-3: #6b5961;
  --linia: #f1dfe7;
  --linia-2: #f6e9ef;
  --pole: #e3cbd6;
  --ok: #1d6b3a;
  --cien: 0 10px 30px rgba(120, 20, 60, .18);
  --font: Montserrat, Arial, sans-serif;
  --font-reczna: Caveat, "Comic Sans MS", cursive;
  --szer: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #fff; color: var(--tekst); font: 16px/1.6 var(--font); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(28px, 3.2vw, 38px); }
h3 { font-weight: 700; }
p { margin: 0; }
a { color: var(--marka-ciemna); }
a:hover { color: var(--marka-hover); }
:focus-visible { outline: 3px solid var(--marka); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--szer); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sekcja { padding-top: 40px; padding-bottom: 64px; }
.srodek { text-align: center; }
.duzy { font-size: 18px; }
.tlo-roz { background: var(--roz); }
.tlo-marka { background: var(--marka); color: #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

.nadtytul { margin-bottom: 14px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--marka-ciemna); }
.reczny { margin-bottom: 8px; font: 700 clamp(30px, 3vw, 36px)/1.05 var(--font-reczna); color: var(--marka); }
.reczny--srodek { text-align: center; }
.reczny--bialy { color: #fff; }
.przypis { margin-top: 32px; color: var(--tekst-3); font-size: 15px; }
.link-mocny { font-weight: 700; }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 24px;
  border: 2px solid var(--marka); border-radius: 999px; background: var(--marka); color: #fff;
  font: 700 16px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer; }
.btn svg { flex-shrink: 0; }
.btn:hover { background: var(--marka-ciemna); border-color: var(--marka-ciemna); color: #fff; }
.btn--jasny { background: #fff; color: var(--marka-ciemna); }
.btn--jasny:hover { background: var(--roz); color: var(--marka-hover); border-color: var(--marka); }
.btn--lg { min-height: 52px; padding: 15px 28px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; border-width: 0; }
.btn--kwadrat { border-radius: 14px; min-height: 52px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }
.przyciski--srodek { justify-content: center; }

/* Pasek + nagłówek */
.pasek { background: var(--marka-ciemna); color: #fff; font-size: 14px; text-align: center; padding: 9px 16px; }
.naglowek { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--linia); }
.naglowek__in { display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; flex-shrink: 0; color: var(--marka); }
.logo:hover { color: var(--marka-ciemna); }
.menu { display: flex; flex-grow: 1; gap: 22px; align-items: center; font-weight: 600; font-size: 15px; }
.menu a { color: var(--tekst); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--marka-ciemna); border-bottom-color: var(--marka); }
.naglowek__akcje { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.koszyk-licznik { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: #fff; color: var(--marka-ciemna); font-size: 13px; }
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linia); border-radius: 12px; background: #fff; color: var(--tekst); cursor: pointer; }
.burger__zamknij, .burger[aria-expanded="true"] .burger__otworz { display: none; }
.burger[aria-expanded="true"] .burger__zamknij { display: block; }
.menu-mobilne { display: flex; flex-direction: column; padding: 8px 24px 20px; border-top: 1px solid var(--linia); font-weight: 600; font-size: 18px; }
.menu-mobilne a:not(.btn) { color: var(--tekst); text-decoration: none; padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--linia-2); }
.menu-mobilne a[aria-current="page"] { color: var(--marka-ciemna); }
.menu-mobilne .btn { margin-top: 12px; }
@media (max-width: 1080px) { .menu { gap: 16px; font-size: 14px; } .naglowek__in { gap: 18px; } }
@media (max-width: 960px) {
  .menu { display: none; }
  .js .burger { display: inline-flex; }
}
@media (min-width: 961px) { .menu-mobilne { display: none !important; } }

/* Fale (jedna ścieżka #fala z naglowek.html; z-… = kolor sekcji powyżej, na-… = poniżej) */
.fala { line-height: 0; }
.fala svg { width: 100%; height: 64px; }
.fala--wysoka svg { height: 72px; }
.fala--odbita svg { transform: scaleX(-1); }
.fala--z-roz { color: var(--roz); }
.fala--z-bialy { color: #fff; }
.fala--z-marka { color: var(--marka); }
.fala--na-roz { background: var(--roz); }
.fala--na-bialy { background: #fff; }
.fala--na-marka { background: var(--marka); }
.fala svg { fill: currentColor; }
@media (max-width: 600px) { .fala svg, .fala--wysoka svg { height: 40px; } }

/* Hero */
.hero { background: var(--roz); }
.hero__in { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.hero__tekst, .hero__foto { flex: 1 1 440px; min-width: 0; }
.hero h1 { margin-bottom: 22px; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.1; }
.hero__lead { margin-bottom: 28px; max-width: 520px; font-size: 19px; color: var(--tekst-2); }
.hero .przyciski { margin-bottom: 28px; }
.hero__plusy { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--tekst-2); }
.hero__plusy li { display: inline-flex; align-items: center; gap: 7px; }
.hero__plusy svg { width: 18px; height: 18px; color: var(--marka); flex-shrink: 0; }
.hero__foto { position: relative; }
.hero__foto img { width: 100%; height: 470px; object-fit: cover; object-position: 40% 40%; border-radius: 28px; }
.hero__plakietka { position: absolute; left: -14px; bottom: 26px; padding: 12px 26px 14px; border-radius: 20px; background: #fff;
  box-shadow: var(--cien); transform: rotate(-4deg); font: 700 clamp(34px, 3vw, 46px)/1 var(--font-reczna); color: var(--marka); }
.zygzak { position: relative; display: inline-block; white-space: nowrap; color: var(--marka); }
.zygzak svg { position: absolute; left: -4%; top: 18%; width: 108%; height: 100%; overflow: visible; pointer-events: none; }
.zygzak path { fill: none; stroke: var(--zygzak); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .zygzak path { animation: zygzak 1.6s ease-out both; }
}
@keyframes zygzak { 0%, 30% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@media (max-width: 960px) {
  .hero__in { gap: 28px; padding-top: 24px; }
  .hero__foto { order: -1; }
  .hero__foto img { height: auto; aspect-ratio: 4 / 3; }
  .hero__plakietka { left: 12px; bottom: -18px; padding: 8px 18px 10px; }
}

/* Jak działa */
.korzysci h2 { margin-bottom: 44px; }
.korzysci__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 32px; text-align: center; }
.korzysc { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.korzysc h3 { font-size: 21px; }
.korzysc p { max-width: 330px; color: var(--tekst-2); }
.cechy { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 980px; margin: 48px auto 0; padding: 0; list-style: none; }
.cechy li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: var(--roz); font-weight: 600; font-size: 15px; line-height: 1.35; }
.cechy svg { flex-shrink: 0; }

/* Film + kroki */
.film { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; padding-top: 32px; padding-bottom: 56px; }
.film__ekran { flex: 1.4 1 520px; min-width: 0; position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 20px 50px rgba(120, 20, 60, .18); background: var(--tekst); }
.film__ekran img, .film__ekran video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--marka); color: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .45); }
.film__play:hover { color: #fff; background: var(--marka-ciemna); }
@media (prefers-reduced-motion: no-preference) { .film__play { transition: transform .2s ease; } .film__play:hover { transform: scale(1.06); } }
.film__etykiety { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.film__etykiety span { padding: 6px 12px; border-radius: 999px; background: rgba(43, 31, 37, .82); color: #fff; font-size: 14px; font-weight: 600; }
.film__opis { flex: 1 1 340px; min-width: 0; color: var(--tekst-2); }
.film__opis h2 { margin-bottom: 14px; color: var(--tekst); }
.film__opis .duzy { margin-bottom: 22px; }
.kroki-wrap { padding-bottom: 56px; }
.kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: krok; }
.kroki li { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fff; counter-increment: krok; }
.kroki img { width: 100%; height: 130px; object-fit: contain; }
.kroki li > div { position: relative; }
.kroki li > div::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--marka); color: #fff; font-weight: 800; }
.kroki h3 { display: flex; align-items: center; min-height: 34px; margin: 0 0 6px; padding-left: 44px; font-size: 17px; line-height: 1.2; }
.kroki p { font-size: 15px; color: var(--tekst-2); }

/* Produkty */
.produkty__gora { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; color: var(--tekst-2); }
.produkty__gora h2 { margin-bottom: 6px; color: var(--tekst); }
.produkty__info { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--tekst); }
.produkty__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.produkt { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linia); border-radius: 24px; overflow: hidden; background: #fff; }
.produkt--wyrozniony { border: 2px solid var(--marka); overflow: visible; }
.produkt--wyrozniony .produkt__foto { border-radius: 22px 22px 0 0; }
.produkt__wstazka { position: absolute; z-index: 2; top: 18px; right: -6px; padding: 8px 16px; border-radius: 14px; background: #fff;
  box-shadow: 0 8px 22px rgba(120, 20, 60, .16); transform: rotate(5deg); font: 700 26px/1 var(--font-reczna); color: var(--marka); }
.produkt__foto { position: relative; display: flex; justify-content: center; align-items: center; height: 320px; padding: 24px; background: var(--roz); }
.produkt__img { width: 220px; height: 272px; object-fit: contain; }
.produkt__img.is-pad, .produkt__foto--pad .produkt__img { width: 100%; object-fit: cover; border-radius: 16px; }
.produkt__miniatury { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.produkt__miniatury button { width: 52px; height: 52px; padding: 0; overflow: hidden; border: 2px solid #fff; border-radius: 12px; background: #fff; cursor: pointer; }
.produkt__miniatury button[aria-pressed="true"] { border-color: var(--marka); }
.produkt__miniatury img { width: 100%; height: 100%; object-fit: contain; }
.produkt__miniatury button[data-widok="pad"] img { object-fit: cover; }
.no-js .produkt__miniatury { display: none; }
.produkt__opis { display: flex; flex-direction: column; flex-grow: 1; gap: 6px; padding: 24px; }
.produkt__opis h3 { font-size: 21px; }
.produkt__uwaga { color: var(--tekst-3); font-size: 14px; }
.produkt__cena { margin: 10px 0 16px; font-weight: 800; font-size: 30px; }
.produkt__dodaj { margin-top: auto; }
.produkt__dodaj.is-w-koszyku { background: #fff; color: var(--marka-ciemna); }
.produkt__dodaj:disabled { cursor: default; }
.do-koszyka { margin-top: 24px; }
@media (max-width: 700px) { .produkty__info { align-items: flex-start; } }

/* Kod rabatowy */
.kod { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
.kod__tekst { flex: 1 1 420px; min-width: 0; }
.kod__tekst h2 { margin-bottom: 14px; }
.kod__tekst .duzy { max-width: 520px; }
.kod__form { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; background: #fff; color: var(--tekst); }
.kod__form label { font-weight: 700; }
.kod__pole { display: flex; flex-wrap: wrap; gap: 10px; }
.kod__pole input { flex: 1 1 200px; min-width: 0; min-height: 52px; padding: 14px 16px; border: 2px solid var(--pole); border-radius: 14px;
  font: 17px var(--font); color: var(--tekst); text-transform: uppercase; }
.kod__pole input::placeholder { text-transform: none; color: var(--tekst-3); }
.kod__pole input:focus { border-color: var(--marka); outline: none; }
.kod__ok { color: var(--ok); font-weight: 600; }
.kod__male { font-size: 14px; color: var(--tekst-3); }

/* Karty i ramki */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-top: 40px; padding-bottom: 24px; }
.karta { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--roz); }
.karta img { width: 100%; height: 260px; object-fit: cover; }
.karta__opis { display: flex; flex-direction: column; flex-grow: 1; gap: 10px; padding: 28px; color: var(--tekst-2); }
.karta__opis h2 { font-size: 28px; color: var(--tekst); }
.karta__link { margin-top: auto; align-self: flex-start; padding: 10px 0; min-height: 44px; text-decoration: none; }
.ramki { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-bottom: 56px; }
.ramka { padding: 32px; border: 1px solid var(--linia); border-radius: 24px; color: var(--tekst-2); }
.ramka h2 { margin-bottom: 10px; font-size: 26px; color: var(--tekst); }
.ramka p { margin-bottom: 18px; }
@media (max-width: 400px) { .karty, .ramki { grid-template-columns: 1fr; } .ramka, .karta__opis { padding: 24px; } }

/* Kontakt */
.kontakt { padding-top: 32px; padding-bottom: 48px; text-align: center; color: var(--tekst-2); }
.kontakt h2 { margin-bottom: 8px; color: var(--tekst); }
.kontakt .przyciski { margin: 26px 0 22px; }

/* Sklep — karta produktu */
.okruszki { margin-bottom: 20px; font-size: 14px; color: var(--tekst-3); }
.karta-produktu { padding-top: 24px; padding-bottom: 48px; }
.karta-produktu__in { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.galeria { flex: 1 1 460px; min-width: 0; }
.galeria__ekran { display: flex; align-items: center; justify-content: center; height: 460px; padding: 24px; border-radius: 28px; background: var(--roz); }
.galeria__img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.galeria__img.is-okladka { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.galeria__miniatury { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.galeria__miniatury button { width: 84px; height: 84px; padding: 0; overflow: hidden; border: 2px solid var(--linia); border-radius: 16px; background: #fff; cursor: pointer; }
.galeria__miniatury button[aria-pressed="true"] { border: 3px solid var(--marka); }
.galeria__miniatury img { width: 100%; height: 100%; object-fit: contain; }
.galeria__miniatury [data-okladka] img { object-fit: cover; }
.no-js .galeria__miniatury { display: none; }
.zakup { flex: 1 1 420px; min-width: 0; }
.zakup .nadtytul { margin-bottom: 6px; }
.zakup h1 { margin-bottom: 12px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.12; }
.zakup__lead { margin-bottom: 22px; font-size: 18px; color: var(--tekst-2); }
.warianty { margin: 0 0 18px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.warianty legend { margin-bottom: 10px; padding: 0; font-weight: 700; }
.wariant { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 18px;
  border: 2px solid var(--linia); border-radius: 16px; background: #fff; cursor: pointer; }
.wariant:hover { border-color: var(--pole); }
.wariant:has(input:checked) { border-color: var(--marka); background: var(--roz); }
.wariant input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wariant:has(input:focus-visible) { outline: 3px solid var(--marka); outline-offset: 3px; }
.wariant__opis { display: flex; flex-direction: column; }
.wariant__nazwa { font-weight: 700; font-size: 17px; }
.wariant__uwaga { font-size: 14px; color: var(--tekst-3); }
.wariant__cena { font-weight: 800; font-size: 20px; white-space: nowrap; }
.zakup__akcje { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.ilosc { display: inline-flex; align-items: center; overflow: hidden; border: 2px solid var(--pole); border-radius: 999px; }
.ilosc button { width: 50px; height: 50px; border: 0; background: #fff; color: var(--tekst); font-size: 22px; cursor: pointer; }
.ilosc button:disabled { color: var(--pole); cursor: default; }
.ilosc input { width: 44px; height: 50px; border: 0; text-align: center; font: 700 18px var(--font); color: var(--tekst); -moz-appearance: textfield; }
.ilosc input::-webkit-inner-spin-button, .ilosc input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-js .ilosc button { display: none; }
.zakup__dodaj { flex: 1 1 220px; min-height: 54px; }
.komunikat { margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; font-weight: 600; }
.komunikat--ok { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: #e9f6ee; color: var(--ok); }
.komunikat--ok a { color: var(--ok); font-weight: 700; }
.komunikat--uwaga { padding: 0; color: var(--marka-ciemna); }
.lista-ok { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--tekst-2); }
.lista-ok li { display: flex; gap: 10px; align-items: flex-start; }
.lista-ok svg { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; color: var(--marka); }
.zakup__male { margin-top: 18px; font-size: 14px; color: var(--tekst-3); }
@media (max-width: 600px) { .galeria__ekran { height: 340px; } .galeria__miniatury button { width: 72px; height: 72px; } }

/* Zakładki (bez JS: wszystkie panele po kolei) */
.zakladki { padding-top: 16px; padding-bottom: 56px; }
.zakladki__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.zakladki__lista button { min-height: 46px; padding: 10px 20px; border: 2px solid var(--marka); border-radius: 999px; background: #fff;
  color: var(--marka-ciemna); font: 700 15px var(--font); cursor: pointer; }
.zakladki__lista button[aria-selected="true"] { background: var(--marka); color: #fff; }
.zakladki__panel { padding: 32px; border-radius: 24px; background: #fff; color: var(--tekst-2); }
.zakladki__panel + .zakladki__panel { margin-top: 24px; }
.js .zakladki__panel + .zakladki__panel { margin-top: 0; }
.zakladki__panel h2 { margin-bottom: 14px; font-size: 26px; color: var(--tekst); }
.zakladki__panel p + p, .zakladki__panel .lista-ok + p { margin-top: 14px; }
.zakladki__panel .kroki { margin-top: 18px; }
.zakladki__panel .kroki li { background: var(--roz); }
.panel-2kol { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.panel-2kol__tekst { flex: 1.4 1 420px; min-width: 0; font-size: 17px; }
.panel-2kol__foto { flex: 1 1 320px; min-width: 0; border-radius: 20px; }
.cechy--pion { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; max-width: none; margin: 0; }
.sklad { display: flex; flex-direction: column; gap: 14px; margin: 0; font-size: 16px; }
.sklad dt { font-weight: 700; color: var(--tekst); }
.sklad dd { margin: 2px 0 0; }
.sklad__alergeny { margin-top: 18px; font-weight: 600; color: var(--tekst); }
@media (max-width: 600px) { .zakladki__panel { padding: 22px 18px; } .zakladki__lista button { padding: 8px 14px; font-size: 14px; } }

/* Koszyk — jeden ekran */
.zamowienie { padding-top: 24px; padding-bottom: 48px; }
.zamowienie h1 { margin-bottom: 24px; font-size: clamp(30px, 3.4vw, 40px); }
.etapy { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--tekst-3); }
.etapy li { display: flex; align-items: center; gap: 8px; }
.etapy span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--linia); border-radius: 50%; font-size: 13px; }
.etapy [aria-current="step"] { color: var(--marka-ciemna); }
.etapy [aria-current="step"] span { border-color: var(--marka); background: var(--marka); color: #fff; }
.pusty { padding: 32px; border: 1px solid var(--linia); border-radius: 24px; }
.pusty__produkty { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.zamowienie__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 32px; align-items: start; }
.zamowienie__kroki { display: flex; flex-direction: column; gap: 24px; }
.krok { margin: 0; padding: 24px; border: 1px solid var(--linia); border-radius: 24px; min-width: 0; }
.krok legend { display: flex; align-items: center; gap: 12px; padding: 0 8px; margin-left: -8px; font-weight: 800; font-size: 22px; }
.krok__nr { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marka); color: #fff; font-size: 16px; }
.pozycje { margin: 8px 0 0; padding: 0; list-style: none; }
.pozycja { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; grid-template-areas: "img opis ilosc suma" "img opis ilosc usun"; gap: 4px 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--linia-2); }
.pozycja:last-child { border-bottom: 0; }
.pozycja__img { grid-area: img; width: 84px; height: 84px; object-fit: contain; border-radius: 14px; background: var(--roz); }
.pozycja__opis { grid-area: opis; }
.pozycja__nazwa { font-weight: 700; }
.pozycja__cena { font-size: 14px; color: var(--tekst-3); }
.pozycja .ilosc { grid-area: ilosc; }
.pozycja__suma { grid-area: suma; font-weight: 800; text-align: right; white-space: nowrap; }
.pozycja__usun { grid-area: usun; justify-self: end; padding: 6px 0; min-height: 32px; border: 0; background: none; color: var(--marka-ciemna); font: 600 14px var(--font); text-decoration: underline; cursor: pointer; }
.ilosc--mala button { width: 40px; height: 40px; font-size: 20px; }
.ilosc__wartosc { min-width: 30px; text-align: center; font-weight: 700; }
.pozycje__dodaj { margin-top: 10px; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) {
  .pozycja { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img opis opis" "img ilosc suma" ". usun usun"; }
  .pozycja__img { width: 64px; height: 64px; }
}
.opcje { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole--szerokie { grid-column: 1 / -1; }
.pole label { font-weight: 600; font-size: 15px; }
.pole input, .kod-mini input { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--pole); border-radius: 12px; font: 16px var(--font); color: var(--tekst); background: #fff; }
.pole input:focus, .kod-mini input:focus { border-color: var(--marka); outline: none; }
.is-sprawdzony .pole input:invalid { border-color: #c0392b; background: #fff6f6; }
.pole__pomoc { font-size: 14px; color: var(--tekst-3); }
@media (max-width: 560px) { .pola { grid-template-columns: 1fr; } .krok { padding: 18px 16px; } }
.zaznacz { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; cursor: pointer; }
.zaznacz input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--marka); }
.is-sprawdzony .zaznacz input:invalid + span { color: #c0392b; }
.podsumowanie { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: var(--roz); }
.podsumowanie h2 { font-size: 24px; }
.kod-mini { display: flex; flex-direction: column; gap: 6px; }
.kod-mini label { font-weight: 600; font-size: 15px; }
.kod-mini__pole { display: flex; gap: 8px; }
.kod-mini input { text-transform: uppercase; }
.kod-mini input::placeholder { text-transform: none; }
.kod-mini .btn { min-height: 50px; padding: 10px 16px; }
.kod-mini__info { font-size: 14px; color: var(--tekst-2); }
.kod-mini__info:empty { display: none; }
.sumy { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--linia); }
.sumy div { display: flex; justify-content: space-between; gap: 12px; }
.sumy dd { margin: 0; font-weight: 600; white-space: nowrap; }
.sumy__razem { padding-top: 8px; border-top: 1px solid var(--linia); font-size: 20px; font-weight: 800; }
.sumy__razem dd { font-weight: 800; }
.podsumowanie__vat, .podsumowanie__info { font-size: 13px; color: var(--tekst-3); }
.zaznacz--zgoda { margin-top: 0; font-size: 14px; }
.podsumowanie__zamow { width: 100%; }
/* przyciski z kwotą w <span>: tekst ma płynąć jak zdanie, nie jak kolumny flex */
.podsumowanie__zamow, .zakup__dodaj { display: block; line-height: 1.35; }
.podsumowanie__zamow span, .zakup__dodaj span { white-space: nowrap; }
.podsumowanie__zamow:disabled { opacity: .7; cursor: wait; }
.komunikat--blad { margin: 0; background: #fff0f0; color: #a3261b; }
.komunikat--blad a { color: #a3261b; font-weight: 700; }
.pomoc-tel { padding: 8px 0; color: var(--tekst-2); }
.dziekujemy { max-width: 720px; display: flex; flex-direction: column; gap: 14px; color: var(--tekst-2); }
.dziekujemy h1 { margin-bottom: 4px; color: var(--tekst); }
.dziekujemy .przyciski { margin: 10px 0; }
.dziekujemy__male { font-size: 14px; color: var(--tekst-3); }
@media (max-width: 900px) {
  .zamowienie__in { grid-template-columns: 1fr; }
  .podsumowanie { position: static; }
}

/* Stopka */
.stopka { color: var(--tekst-2); font-size: 15px; }
.stopka__kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-top: 32px; padding-bottom: 28px; }
.stopka nav { display: flex; flex-direction: column; gap: 8px; }
.stopka nav a { color: var(--tekst-2); }
.stopka nav a:hover { color: var(--marka-ciemna); }
.stopka__tytul { margin-bottom: 8px; font-weight: 700; color: var(--tekst); }
.stopka nav .stopka__tytul { margin-bottom: 0; }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 32px;
  border-top: 1px solid var(--linia); font-size: 13px; color: var(--tekst-3); }

@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .naglowek__in { gap: 10px; }
  .logo svg { width: 124px; height: auto; }
  .naglowek__akcje { gap: 8px; }
  .koszyk-link { padding-left: 14px; padding-right: 14px; }
  .btn--lg { flex: 1 1 100%; }
  .kod__form { padding: 20px; }
}