/* =========================================================================
   PROFI-TURBO — sklep, warstwa WLASNA

   Ladowany PO site.css, ktory jest arkuszem marki przeniesionym 1:1 ze strony
   profiturbo-www. Stamtad pochodzi wszystko, co wspolne: zmienne kolorow,
   typografia, .container, .btn, naglowek, menu, przelacznik jezyka i stopka.
   Dzieki temu naglowek i stopka sklepu sa identyczne ZE ZRODLA, a nie
   odtworzone na oko - i nie rozjada sie przy nastepnej zmianie na stronie.

   Tutaj siedza wylacznie komponenty, ktorych strona nie ma: listing, filtry,
   kafelek produktu, karta produktu z wariantami i kaucja, koszyk.

   Nazwy sa dobrane tak, zeby NIE pokrywaly sie z arkuszem marki - kafelek
   produktu to .pcard, nie .card, bo .card istnieje juz na stronie i jego
   reguly przeciekalyby tutaj.
   ========================================================================= */

/* =========================================================== atrybut hidden

   MUSI stac na gorze i MUSI miec !important.

   `[hidden] { display: none }` jest regula PRZEGLADARKI, wiec przegrywa
   z kazda wlasna regula, ktora ustawia `display` na klasie. A ustawiaja je
   prawie wszystkie: .price (flex), .stock (inline-flex), .buyrow (grid),
   .deposit-note (flex). Efekt: element z atrybutem `hidden` byl dalej
   widoczny.

   Kosztowalo to realny blad na karcie produktu: przy wybranej regeneracji
   wlasnej turbiny klient widzial JEDNOCZESNIE "Dodaj do koszyka"
   i "Zadzwon po wycene", a pod spodem akapit o kaucji, ktorej ta pozycja
   nie pobiera.

   Uwaga przy sprawdzaniu: w JavaScripcie `el.hidden` zwraca wtedy `true`,
   mimo ze element jest na ekranie - bo to tylko odbicie atrybutu. Jedyny
   wiarygodny test to `getComputedStyle(el).display`. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------- odstepy

   Dwa tokeny na caly sklep. Kazda siatka i kazdy uklad kolumnowy korzysta
   z tych samych wartosci - inaczej kafelki kategorii, produktow i pasa
   zaufania maja trzy rozne przerwy i strona wyglada na skladana na raty.
*/
:root {
  --sh-gap: 14px;       /* miedzy kafelkami w siatce */
  --sh-gap-lg: 20px;    /* miedzy kolumnami ukladu (filtry | lista) */
  --sh-pad: 16px;       /* wnetrze bialej karty */
}

/* ------------------------------------------------- uzupelnienia przyciskow */

/* Strona nie ma przycisku stonowanego ani rozciaganego na cala szerokosc -
   w sklepie obu brakuje (akcje drugorzedne i przyciski w kafelkach). */
.btn--quiet {
  background: var(--surface-alt, #f4f4f6);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn--quiet:hover { background: #eceef1; }

.btn--block { width: 100%; }

/* Pozycje jezykow sa tu odnosnikami, a na stronie przyciskami - przegladarka
   nadaje <a> wlasny kolor i podkreslenie, wiec trzeba je zdjac, zeby lista
   wygladala tak samo w obu miejscach. */
a.lang__opt { text-decoration: none; color: inherit; }
a.lang__opt:hover { text-decoration: none; }
a.lang-row__opt { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------- koszyk w naglowku */

/* Strona nie ma koszyka, wiec tego jednego elementu nie ma w arkuszu marki.
   Dopasowany wygladem do .header__phone, zeby nie wyrozmial sie w pasku. */
.header__cart {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  font-size: .875rem; font-weight: 700;
  transition: border-color .2s ease;
}
.header__cart:hover { border-color: var(--pink); text-decoration: none; }
.header__cart svg { width: 18px; height: 18px; flex: none; }

.header__cart-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; border-radius: 999px;
  font-size: .6875rem; font-weight: 800; line-height: 1;
}

/*
   Ponizej 1060px arkusz marki chowa caly .header__actions i pokazuje burger.
   Koszyk MUSI zostac widoczny takze wtedy - to jedyne wejscie do zamowienia
   na telefonie, a schowanie go pod burgerem oznacza porzucone koszyki.
   Dlatego wyciagamy go z paska akcji i stawiamy obok burgera.
*/
@media (max-width: 1059px) {
  .site-header__inner { position: relative; }
  .header__cart {
    order: 9; margin-left: auto;
    height: 40px; padding: 0 12px;
  }
  .header__cart span.visually-hidden + .header__cart-count { margin-left: 0; }
  /* .header__actions jest ukryty, wiec koszyk musi stac poza nim - patrz blade */
}

/* przy waskim pasku chowamy telefon, zanim zwinie sie cale menu */
.site-header.is-tight .header__cart { padding: 0 10px; }

/*
   Arkusz marki ma `.site-header.is-compact .mobile-nav { display: none !important }`.
   Na stronie to nie szkodzi, bo tryb `is-compact` praktycznie tam nie wystepuje.
   W sklepie wystepuje - i ta regula zablokowalaby otwieranie menu burgerem,
   czyli jedyna nawigacje przy waskim pasku. Przywracamy stan otwarty.
*/
.site-header.is-compact .mobile-nav.is-open { display: block !important; }

/* ------------------------------------------------------------- komunikaty */

.flash {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 16px; margin: 0 0 18px;
  border-radius: var(--radius); border: 1px solid; font-size: .9375rem;
}
.flash svg { flex: none; margin-top: 2px; }
.flash--ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.flash--err { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.flash--warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }

/* ---------------------------------------------------------------- okruchy */

.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 16px 0; font-size: .875rem; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--pink-text); }
.crumbs span[aria-current] { color: var(--text); font-weight: 600; }
.crumbs i { font-style: normal; opacity: .5; }

/* ----------------------------------------------------------- naglowek sklepu */

.shophero {
  position: relative;
  background: var(--ink, #121417) url('../img/turbo-hero.webp') center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.shophero::before {
  /* Zdjecie turbiny jest jasne po prawej - bez przyciemnienia bialy naglowek
     na nim znika. Gradient, nie plaska plachta, zeby zdjecie zostalo widoczne. */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 11, 13, .94) 0%, rgba(10, 11, 13, .80) 42%, rgba(10, 11, 13, .25) 100%);
}
/*
   padding-block, NIE padding.

   Ten element nosi takze klase .container, ktora daje marginesy boczne.
   Skrot `padding: 52px 0` wyzerowalby je i na telefonie naglowek
   zaczynalby sie dokladnie przy krawedzi ekranu.
*/
.shophero__inner { position: relative; z-index: 1; padding-block: 52px 56px; max-width: 620px; }

.shophero__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .74); margin-bottom: 14px;
}
.shophero__kicker::before { content: ''; width: 28px; height: 2px; background: var(--pink); }

.shophero h1 {
  color: #fff; margin-bottom: .4em;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -.03em;
}
.shophero h1 em { font-style: normal; color: var(--pink-text-dark, #ef3f78); display: block; }

.shophero__lead { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; max-width: 520px; }

.shophero__points {
  display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 26px 0 0;
  list-style: none; padding: 0;
}
.shophero__points li {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.shophero__points svg { flex: none; color: var(--pink-text-dark, #ef3f78); }

/* ------------------------------------------------------ kafelki kategorii */

.cats {
  display: grid; gap: var(--sh-gap); margin: var(--sh-gap-lg) 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  list-style: none;
}
.cats a {
  display: flex; align-items: center; gap: 12px; height: 100%;
  padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
}
.cats a:hover { border-color: var(--pink); }
.cats a[aria-current="page"] { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset; }
.cats__name { font-size: .875rem; font-weight: 700; line-height: 1.3; }
.cats__count { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); }

/* -------------------------------------------------------- uklad listingu */

.listing {
  display: grid; gap: var(--sh-gap-lg); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sh-gap-lg) 0 36px;
}
@media (min-width: 980px) {
  .listing { grid-template-columns: 264px minmax(0, 1fr); gap: var(--sh-gap-lg); }
}

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm); padding: var(--sh-pad);
}

/* ------------------------------------------------------------------ filtry */

.filters__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.filters__head h2 { font-size: 1.125rem; margin: 0; }
.filters__clear { font-size: .8125rem; font-weight: 600; color: var(--pink-text); }

.fld { margin-bottom: 16px; }
.fld > label, .fld__legend {
  display: block; margin-bottom: 7px;
  font-size: .8125rem; font-weight: 700; color: var(--text-2, #3d434d);
}
.fld fieldset { border: 0; margin: 0; padding: 0; }
.fld__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.input, .select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: .9375rem; color: var(--text);
}
.input:focus, .select:focus { border-color: var(--pink); outline-offset: 1px; }
.input::placeholder { color: #9aa1ad; }

.check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .875rem; }
.check input { width: 18px; height: 18px; accent-color: var(--pink); flex: none; }

/* --------------------------------------------------------- pasek nad lista */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.toolbar__count { font-size: .9375rem; color: var(--muted); margin: 0; }
.toolbar__count b { color: var(--text); }
.toolbar__sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toolbar__sort label { font-size: .875rem; color: var(--muted); }
.toolbar__sort .select { width: auto; min-width: 186px; }

/* ----------------------------------------------------- kafelek produktu */

.pgrid {
  display: grid; gap: var(--sh-gap);
  /* 195px to najwezsza karta, przy ktorej nazwa produktu miesci sie
     w dwoch wierszach */
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
}
@media (max-width: 420px) {
  /* ponizej tej szerokosci dwie kolumny robia z nazwy produktu slupek liter */
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pcard:hover { border-color: #d8dbe0; box-shadow: var(--shadow-md, 0 18px 48px rgba(16,18,22,.10)); transform: translateY(-2px); }

.pcard__media {
  position: relative; display: block;
  aspect-ratio: 4 / 3; background: var(--surface-alt, #f4f4f6); overflow: hidden;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }

.pcard__badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--pink); color: #fff;
}
.pcard__badge--new { background: #16a34a; }
.pcard__badge--regen { background: #475569; }
.pcard__badge--hybrid { background: #0f172a; }

.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px 16px; flex: 1; }
.pcard__name { font-size: .9375rem; font-weight: 700; line-height: 1.35; margin: 0; }
.pcard__name a:hover { color: var(--pink-text); }
.pcard__spec { font-size: .8125rem; color: var(--muted); margin: 0; }
.pcard__oem { font-size: .75rem; color: #9aa1ad; margin: 0; }

.pcard__price { margin-top: auto; padding-top: 10px; }
.pcard__price b { font-size: 1.25rem; font-weight: 800; color: var(--pink-text); }
.pcard__price small { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; }

.pcard__actions { display: grid; gap: 8px; margin-top: 12px; }

/* Plakietka kaucji — ten sam wyglad na kafelku i w podsumowaniu koszyka,
   zeby klient rozpoznal te kwote jako to samo w obu miejscach. */
.deposit-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 9px; border-radius: 999px;
  background: var(--pink-050, #fdf2f6); color: #9d1246;
  font-size: .75rem; font-weight: 700;
}
.deposit-tag svg { flex: none; }

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

.product {
  display: grid; gap: var(--sh-gap-lg); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 0 36px;
}
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 32px; }
}

.gallery__main {
  aspect-ratio: 4 / 3; background: var(--surface-alt, #f4f4f6);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }

.gallery__thumbs {
  display: grid; gap: var(--sh-gap); margin-top: var(--sh-gap);
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.gallery__thumbs button {
  padding: 0; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  background: var(--surface-alt, #f4f4f6);
  border: 1px solid var(--line); border-radius: 10px;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product__kicker {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink-text); margin-bottom: 8px;
}
.product__spec { color: var(--muted); font-size: .9375rem; margin: 0 0 12px; }

.product__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
  font-size: .875rem; color: var(--muted);
}
.rating { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.rating__stars { color: #f59e0b; letter-spacing: 1px; }

/* ================================================= garaz klienta */

.garage { list-style: none; margin: 0 0 var(--sh-gap); padding: 0; }

.garage__item { padding: 14px 0; border-top: 1px solid var(--line); }
.garage__item:last-child { border-bottom: 1px solid var(--line); }

.garage__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

/* Tablica rejestracyjna wygladem tablicy: klient rozpoznaje swoje auto
   po niej szybciej niz po nazwie wersji silnikowej. */
.garage__plate {
  padding: 2px 8px; border: 2px solid var(--ink); border-radius: 4px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em;
}

.garage__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); }
.garage__gain { color: #16a34a; font-weight: 700; }

.garage__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.garage__actions form { margin: 0; }

.garage__add > summary {
  cursor: pointer; padding: 10px 0; font-weight: 700; color: var(--pink-text);
  list-style: none;
}
.garage__add > summary::-webkit-details-marker { display: none; }
.garage__add > summary::before { content: '+ '; }
.garage__add[open] > summary::before { content: '− '; }

/* ================================================================ opinie */

.shopreviews { max-width: 760px; }

.shopreviews__summary { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--sh-gap); }
.shopreviews__stars { color: #f59e0b; letter-spacing: 1px; }

.shopreviews__list { list-style: none; margin: 0 0 var(--sh-gap-lg); padding: 0; }

.shopreview { padding: 14px 0; border-top: 1px solid var(--line); }
.shopreview:last-child { border-bottom: 1px solid var(--line); }
.shopreview__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; font-size: .875rem; }
.shopreview__text { margin: 0; color: #434a55; line-height: 1.6; white-space: pre-line; }

.shopreviews__form { padding-top: var(--sh-gap); }
.shopreviews__form h3 { margin: 0 0 var(--sh-gap); }

/* ---------------------------------------------- wybór oceny gwiazdkami

   Przyciski radiowe stoją od 5 do 1, a gwiazdki są odwrócone wizualnie
   (row-reverse). Dzięki temu podświetlenie „do lewej” robi sam CSS
   selektorem ~, który idzie tylko w przód — bez ani jednej linii JS,
   więc ocena da się wystawić także z wyłączonym JavaScriptem. */
.rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate legend { flex-basis: 100%; }
.rate input { position: absolute; opacity: 0; width: 0; height: 0; }

.rate label {
  cursor: pointer; font-size: 1.75rem; line-height: 1;
  color: #d8dbe0; transition: color .12s;
}
.rate label:hover,
.rate label:hover ~ label,
.rate input:checked ~ label { color: #f59e0b; }

/* Obramowanie przy nawigacji klawiaturą: bez tego wybór oceny jest
   niedostępny dla kogoś, kto nie używa myszy. */
.rate input:focus-visible + label { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.price b {
  font-size: clamp(1.9rem, 4.6vw, 2.5rem); font-weight: 800;
  color: var(--pink-text); line-height: 1.1;
}
.price small { font-size: .8125rem; color: var(--muted); font-weight: 600; }

.stock { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; margin: 0; }
.stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; }
.stock--out { color: var(--muted); }
.stock--out::before { background: #9aa1ad; }
.stock--order::before { background: #f59e0b; }

/* ------------------------------------------- warianty — tu siedzi kaucja */

.variants { display: grid; gap: 10px; margin: var(--sh-gap-lg) 0; border: 0; padding: 0; }
.variant {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.variant:hover { border-color: #d8dbe0; }
.variant:has(input:checked) { border-color: var(--pink); background: #fffafc; box-shadow: 0 0 0 1px var(--pink) inset; }
.variant:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.variant input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pink); }
.variant__name { font-size: .9375rem; font-weight: 700; }
.variant__note { display: block; font-size: .8125rem; color: var(--muted); margin: 2px 0 0; }
/* oznaczenie "odsyłasz swoją część" przy trybach z wymianą */
.variant__send {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--pink-050, #fdf2f6); color: #9d1246;
  font-size: .6875rem; font-weight: 800; letter-spacing: .02em;
}
.variant__send svg { flex: none; }

.variant__price { text-align: right; font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }
.variant__deposit { display: block; font-size: .75rem; font-weight: 700; color: #9d1246; white-space: nowrap; }

.deposit-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; margin: 14px 0 0;
  background: var(--pink-050, #fdf2f6); border: 1px solid #f7d4e2; border-radius: var(--radius);
  font-size: .875rem; color: #7a0f36;
}
.deposit-note svg { flex: none; margin-top: 2px; }
.deposit-note b { display: block; margin-bottom: 2px; }

/* kroki zwrotu kaucji — tlumaczy klientowi, co sie z ta kwota dzieje */
.deposit-steps {
  display: grid; gap: var(--sh-gap); margin: var(--sh-gap) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  counter-reset: krok;
}
.deposit-steps li {
  position: relative; padding-left: 38px; font-size: .8125rem; color: var(--muted);
}
.deposit-steps li::before {
  counter-increment: krok; content: counter(krok);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-050, #fdf2f6); color: var(--pink-text);
  font-size: .8125rem; font-weight: 800;
}
.deposit-steps b { display: block; color: var(--text); font-size: .875rem; }

.buyrow { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
@media (min-width: 520px) {
  .buyrow { grid-template-columns: 136px minmax(0, 1fr); align-items: center; }
}

.qty {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center;
  height: 46px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.qty button {
  height: 100%; border: 0; background: #fff; cursor: pointer;
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--text-2, #3d434d);
}
.qty button:hover { background: var(--surface-alt, #f4f4f6); }
.qty input {
  height: 100%; width: 100%; border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.perks {
  display: grid; gap: var(--sh-gap); margin: var(--sh-gap-lg) 0 0; padding: var(--sh-pad) 0 0;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none;
}
.perks li { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; }
.perks svg { flex: none; color: var(--pink-text); margin-top: 2px; }
.perks b { display: block; font-size: .875rem; color: var(--text); }
.perks span { color: var(--muted); }

/* --------------------------------------------------------------- zakladki */

.tabs { margin: 36px 0 0; }
.tabs__nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.tabs__nav button {
  flex: none; padding: 12px 18px; border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--muted);
}
.tabs__nav button[aria-selected="true"] { color: var(--pink-text); border-bottom-color: var(--pink); }
.tabs__panel { padding: 24px 0 0; }
.tabs__panel[hidden] { display: none; }

.specs { width: 100%; border-collapse: collapse; font-size: .875rem; }
.specs th, .specs td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.specs th { font-weight: 600; color: var(--muted); width: 45%; }
.specs td { font-weight: 700; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* ===================================== cena na telefon (wycena indywidualna)

   Pozycja bez ceny nie moze wygladac jak pozycja darmowa ani jak blad.
   Dlatego zamiast kwoty stoi tu numer telefonu - tak samo wyrozniony
   jak cena, bo to jest wezwanie do dzialania na tej karcie. */

.askprice { margin: 6px 0 14px; }

.askprice__label {
  margin: 0 0 6px;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
}

.askprice__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--pink-text); text-decoration: none;
}
.askprice__phone:hover { text-decoration: underline; }
.askprice__phone svg { flex: none; }

.askprice__note {
  margin: 8px 0 0; max-width: 46ch;
  font-size: .8125rem; line-height: 1.55; color: var(--muted);
}

/* Na liscie wariantow: tam gdzie innym stoi kwota */
.variant__ask { font-size: .9375rem; font-weight: 800; color: var(--pink-text); white-space: nowrap; }

/* Na kafelku listingu */
.pcard__onrequest { font-size: 1rem; font-weight: 800; color: var(--pink-text); }
.pcard__ask { display: block; color: var(--pink-text); font-weight: 700; }

@media (max-width: 420px) {
  /* Numer telefonu nie moze rozpychac karty w poziomie na telefonie -
     to wlasnie na nim ten przycisk jest najwazniejszy. */
  .askprice__phone { font-size: 1.1875rem; }
}

/* Logo producenta w wierszu tabeli. `object-fit: contain` zamiast skalowania
   w dol: znaki producentow maja rozne proporcje i rozciagniete wygladaja
   na podrobione. */
.specs__logo {
  width: auto;
  max-width: 72px;
  height: 24px;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
  margin-right: 8px;
}

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

.cart {
  display: grid; gap: var(--sh-gap-lg); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 0 36px;
}
@media (min-width: 940px) {
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sh-gap-lg); }
}

.line {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: 84px minmax(0, 1fr);
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.line:last-of-type { border-bottom: 0; }
.line__media { aspect-ratio: 1; background: var(--surface-alt, #f4f4f6); border-radius: var(--radius); overflow: hidden; }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font-size: .9375rem; font-weight: 700; margin: 0 0 2px; }
.line__variant { font-size: .8125rem; color: var(--muted); margin: 0; }
.line__sku { font-size: .75rem; color: #9aa1ad; margin: 2px 0 0; }
.line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.line__price { margin-left: auto; text-align: right; font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }
.line__deposit { display: block; font-size: .75rem; font-weight: 700; color: #9d1246; }
.line .qty { height: 40px; grid-template-columns: 36px minmax(0, 1fr) 36px; width: 124px; }
.line__remove {
  border: 0; background: none; padding: 6px; cursor: pointer; text-decoration: underline;
  font: inherit; font-size: .8125rem; color: var(--muted);
}
.line__remove:hover { color: #b91c1c; }

.sum { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.sum__row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .9375rem; }
.sum__row--muted { color: var(--muted); font-size: .875rem; }
.sum__row--discount { color: #15803d; font-weight: 700; }
.sum__row--deposit { color: #9d1246; font-weight: 700; }
.sum__sep { height: 1px; background: var(--line); margin: 12px 0; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.sum__total span { font-size: 1.0625rem; font-weight: 800; }
.sum__total b { font-size: 1.625rem; font-weight: 800; color: var(--pink-text); white-space: nowrap; }

.coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 14px 0; }

.empty { text-align: center; padding: 56px 20px; }
.empty h1, .empty h2 { margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 auto 20px; }

/* ------------------------------------------------------------ pasy zaufania */

.strip { background: var(--surface-alt, #f4f4f6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip ul {
  display: grid; gap: var(--sh-gap); padding: 22px 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.strip li { display: flex; gap: 12px; align-items: flex-start; }
.strip svg { flex: none; color: var(--pink-text); }
.strip b { display: block; font-size: .9375rem; }
.strip span { font-size: .875rem; color: var(--muted); }

.shopcta {
  background: var(--ink, #121417) url('../img/cta-chra.webp') center / cover no-repeat;
  color: #fff; position: relative;
}
.shopcta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 11, 13, .93) 0%, rgba(10, 11, 13, .74) 52%, rgba(10, 11, 13, .30) 100%);
}
.shopcta__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--sh-gap-lg); align-items: center; padding: 40px 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .shopcta__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
}
.shopcta h2 { color: #fff; margin-bottom: 10px; }
.shopcta h2 em { font-style: normal; color: var(--pink-text-dark, #ef3f78); }
.shopcta p { color: rgba(255, 255, 255, .80); margin-bottom: 0; }
.shopcta__boxes { display: grid; gap: var(--sh-gap); }
.shopcta__box {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}
.shopcta__box:hover { background: rgba(255, 255, 255, .12); }
.shopcta__box svg { flex: none; color: var(--pink-text-dark, #ef3f78); }
.shopcta__box b { display: block; font-size: .9375rem; }
.shopcta__box span { font-size: .8125rem; color: rgba(255, 255, 255, .72); }

/* ================================================= logowanie i rejestracja */

.authgrid {
  display: grid; gap: var(--sh-gap-lg);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sh-gap-lg) 0 0;
  /* stretch, nie start: logowanie ma mniej pol niz rejestracja i przy
     wyrownaniu do gory jedna kolumna konczyla sie w polowie drugiej */
  align-items: stretch;
}
@media (min-width: 900px) {
  .authgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.authbox { padding: 26px; }
.authbox h2 { font-size: 1.5rem; margin-bottom: 6px; }
.authbox__lead { color: var(--muted); font-size: .9375rem; margin-bottom: var(--sh-gap-lg); }
.authbox__hint { font-size: .8125rem; color: var(--muted); margin: -6px 0 var(--sh-gap); }

/* Jedna kolumna: odzyskiwanie hasla nie ma pary (logowanie/rejestracja),
   a rozciagniete na cala szerokosc pole adresu wyglada jak blad ukladu. */
.authgrid--single { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px; }

/* „Pamiętaj mnie" i „Nie pamiętam hasła" w jednym wierszu */
.authbox__row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: var(--sh-gap);
}
.authbox__row .check { margin: 0; }

.authbox__forgot { font-size: .8125rem; font-weight: 600; color: var(--pink-text); }
.authbox__forgot:hover { text-decoration: underline; }

.authbox__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: var(--sh-gap);
  border-radius: 50%; background: var(--pink-050, #fdf2f6); color: var(--pink-text);
}
.authbox__icon svg { width: 24px; height: 24px; }

/* Rejestracja na ciemnym tle — tak jak w makiecie. Kolory pol i tekstow
   trzeba przestawic jawnie, bo .input i .check sa pisane pod jasne tlo. */
.authbox--dark {
  background: var(--ink, #121417);
  border-color: rgba(255, 255, 255, .10);
  color: #fff;
}
.authbox--dark h2 { color: #fff; }
.authbox--dark .authbox__lead,
.authbox--dark .authbox__hint { color: rgba(255, 255, 255, .62); }
.authbox--dark .authbox__icon { background: rgba(230, 25, 91, .18); color: var(--pink-text-dark, #ef3f78); }
.authbox--dark .fld > label { color: rgba(255, 255, 255, .80); }
.authbox--dark .input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.authbox--dark .input::placeholder { color: rgba(255, 255, 255, .38); }
.authbox--dark .input:focus { border-color: var(--pink); background: rgba(255, 255, 255, .10); }
.authbox--dark .check { color: rgba(255, 255, 255, .80); }

/* separator "lub kontynuuj przez" */
.authbox__or {
  display: flex; align-items: center; gap: 12px;
  margin: var(--sh-gap-lg) 0 var(--sh-gap);
  font-size: .8125rem; color: var(--muted);
}
.authbox__or::before, .authbox__or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.whylist {
  display: grid; gap: var(--sh-gap); margin: var(--sh-gap) 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
}
.whylist li { display: flex; gap: 12px; align-items: flex-start; }
.whylist svg { flex: none; width: 24px; height: 24px; color: var(--pink-text); }
.whylist b { display: block; font-size: .9375rem; }
.whylist span span { font-size: .875rem; color: var(--muted); }

/* ================================================================== konto */

.depositbox { border-color: #f7d4e2; background: var(--pink-050, #fdf2f6); margin: var(--sh-gap-lg) 0 0; }
.depositbox--late { border-color: #fecaca; background: #fef2f2; }
.depositbox__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sh-gap); }
.depositbox__label {
  margin: 0; font-size: .75rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #9d1246;
}
.depositbox__amount {
  margin: 2px 0 0; font-size: 1.75rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--pink-text);
}
.depositbox__note { margin: var(--sh-gap) 0 0; font-size: .875rem; color: #7a0f36; }

.depositlist { list-style: none; margin: var(--sh-gap) 0 0; padding: 0; }
.depositlist__item {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid rgba(157, 18, 70, .14);
  font-size: .875rem;
}
.depositlist__item .muted { display: block; font-size: .8125rem; color: var(--muted); }
.depositlist__right { text-align: right; white-space: nowrap; }

.orderrow {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.orderrow:last-of-type { border-bottom: 0; }
.orderrow:hover { text-decoration: none; }
.orderrow:hover b { color: var(--pink-text); }
.orderrow .muted { display: block; font-size: .8125rem; color: var(--muted); }
.orderrow__right { text-align: right; white-space: nowrap; }
.orderrow__right > span { display: block; margin-top: 4px; }

.tagok, .taglate {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}
.tagok { background: #dcfce7; color: #14532d; }
.taglate { background: #fef2f2; color: #b91c1c; }

/* stan kaucji przy pozycji zamowienia */
.corestate {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 10px 0 0; padding: 9px 11px;
  background: var(--pink-050, #fdf2f6); border-radius: var(--radius);
  font-size: .8125rem; color: #7a0f36;
}
.corestate--late { background: #fef2f2; color: #7f1d1d; }
.corestate svg { flex: none; margin-top: 2px; }
.corestate__note { display: block; margin-top: 4px; opacity: .85; }

/* ------------------------------------------------------------ finalizacja */

/* paski kroków: koszyk → dane → potwierdzenie */
.steps {
  display: grid; gap: var(--sh-gap); margin: 0 0 var(--sh-gap-lg); padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; counter-reset: none;
}
.steps__item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-width: 0; font-size: .875rem; color: var(--muted);
}
.steps__no {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt, #f4f4f6); color: var(--muted);
  font-size: .875rem; font-weight: 800;
}
.steps__item--done .steps__no { background: var(--pink-050, #fdf2f6); color: var(--pink-text); }
.steps__item--current .steps__no { background: var(--pink); color: #fff; }
.steps__item--current { color: var(--text); }
.steps__item b { font-weight: 700; }
/* kreska łącząca kroki — na wąskim ekranie znika razem z układem poziomym */
.steps__item:not(:last-child)::after {
  content: ''; position: absolute; right: -7px; top: 50%;
  width: calc(var(--sh-gap) - 2px); height: 2px; background: var(--line);
}
.steps__item--done::after { background: var(--pink); }

/* numerowane nagłówki sekcji formularza */
.sectitle {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--sh-gap); font-size: 1.0625rem;
}
.sectitle__no {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; font-size: .8125rem; font-weight: 800;
}
.sectitle__hint { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.sectitle--summary { cursor: pointer; margin: 0; list-style: none; }
.sectitle--summary::-webkit-details-marker { display: none; }
details[open] .sectitle--summary { margin-bottom: 0; }

/* pozycje w podsumowaniu kasy */
.sumline {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.sumline:last-of-type { border-bottom: 0; }
.sumline__variant { display: block; font-size: .8125rem; color: var(--muted); }
.sumline__qty { display: block; font-size: .75rem; color: #9aa1ad; }
.sumline b { white-space: nowrap; }

.tagfree {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: #dcfce7; color: #14532d; font-size: .75rem; font-weight: 800;
}

/* ekran podziękowania */
.done { text-align: center; padding: 32px 20px; }
.done h1 { margin-bottom: 8px; }
.done p { color: var(--muted); max-width: 520px; margin: 0 auto 6px; }
.done__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 14px;
  border-radius: 50%; background: #dcfce7; color: #15803d;
}
.done__mark svg { width: 28px; height: 28px; }
.done__number {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--sh-gap); padding: 10px 18px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  font-size: .875rem; color: var(--muted);
}
.done__number b { font-size: 1.125rem; color: var(--text); letter-spacing: .02em; }

/* ---------------------------------------------------------- stronicowanie

   Pelne style, a nie sam margines: wczesniej sklep mial tutaj wylacznie
   `margin-top`, wiec przyciski stron renderowaly sie jako goly ciag linkow
   („« Poprzednia 1 2 Następna »"). Panel administracyjny mial je od poczatku
   — ten sam uklad, tylko wieksze pola, bo to strona dla klienta i czesto
   obslugiwana palcem. */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  /* Bez wlasnej kreski u gory - nad lista produktow jest juz separator
     i wychodzily z tego dwie linie jedna pod druga. */
  margin-top: 26px;
  font-size: .875rem;
}

.pager svg { width: 18px; height: 18px; }

.pager__info { margin: 0; color: var(--muted); }

.pager__links { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}

.pager__link:hover {
  border-color: var(--pink);
  color: var(--pink-text);
  text-decoration: none;
}

.pager__link.is-current {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* Nieczynna strzalka zostaje widoczna, ale nie zaprasza do klikania — jej
   zniknieciem przesunelibysmy pozostale przyciski na kazdej stronie. */
.pager__link.is-off {
  background: var(--surface-alt, #f4f4f6);
  color: #b8bcc4;
  cursor: default;
}

.pager__gap { padding: 8px 2px; color: var(--muted); }

@media (max-width: 560px) {
  .pager { gap: 10px; }
  .pager__links { margin-left: 0; width: 100%; }
  .pager__link { min-width: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------- drobiazgi */

.fx-note { font-size: .8125rem; color: var(--muted); padding: 10px 0 0; margin: 0; }

/* =========================================================================
   TELEFON

   Zebrane w jednym miejscu, a nie rozsypane po pliku - na waskim ekranie
   psuje sie zwykle kilka rzeczy naraz i latwiej je poprawiac razem.
   Prog 720px: ponizej niego uklad jest juz jednokolumnowy wszedzie.
   ========================================================================= */

@media (max-width: 720px) {
  :root { --sh-gap: 12px; --sh-gap-lg: 16px; --sh-pad: 14px; }

  /* Naglowek sklepu: mniej powietrza i ciemniej, bo na waskim kadrze
     zdjecie turbiny wchodzi pod sam tekst. */
  .shophero__inner { padding-block: 30px 32px; }
  .shophero { background-position: 72% center; }
  .shophero::before {
    background: linear-gradient(180deg, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .86) 60%, rgba(10, 11, 13, .80) 100%);
  }
  .shophero__lead { font-size: 1rem; }
  .shophero__points { gap: 10px 18px; margin-top: 18px; }
  .shophero__points li { font-size: .8125rem; }

  /* Kafelki kategorii: dwa w rzedzie zamiast jednego — pieciu pozycji
     w jednej kolumnie nie da sie objac wzrokiem. */
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cats a { padding: 11px 12px; }
  .cats__name { font-size: .8125rem; }

  /* Pasek nad lista: sortowanie na pelna szerokosc, zeby nie scisnelo liczby */
  .toolbar__sort { width: 100%; margin-left: 0; }
  .toolbar__sort .select { flex: 1; min-width: 0; }

  /* Para pol formularza jedno pod drugim — dwa pola po 160px to
     nieczytelne etykiety i wpisywanie na slepo. */
  .fld__pair { grid-template-columns: minmax(0, 1fr); }

  /* Kroki zamowienia pionowo; kreska laczaca nie ma juz czego laczyc */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps__item::after { display: none; }

  /* Podsumowanie NIE przyklejone: w jednej kolumnie przykleja sie nad trescia
     i zaslania formularz zamiast pomagac. */
  .sum { position: static; }

  /* Pozycja koszyka: mniejsza miniatura, cena w osobnym wierszu */
  .line { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .line__foot { gap: 8px 10px; }
  .line__price { width: 100%; margin-left: 0; text-align: left; }

  /* Wariant produktu: cena pod nazwa, nie obok — przy "Regenerowana — z kaucja"
     na dwie linie kolumna z cena robila sie wezsza niz sama kwota. */
  .variant { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .variant__price { grid-column: 2; text-align: left; margin-top: 6px; }
  .variant__deposit { display: inline; margin-left: 8px; }

  /* Tabela parametrow: etykieta nad wartoscia */
  .specs th, .specs td { display: block; width: auto; padding: 8px 0; }
  .specs th { border-bottom: 0; padding-bottom: 2px; }
  .specs td { padding-top: 0; }

  .coupon { grid-template-columns: minmax(0, 1fr); }
  .done { padding: 24px 14px; }
  .done__number { flex-wrap: wrap; justify-content: center; }
  .sum__total b { font-size: 1.375rem; }
  .tabs__panel { padding-top: 18px; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  /* Dopiero tutaj dwie kolumny kategorii robia slupki liter */
  .cats { grid-template-columns: minmax(0, 1fr); }
  .perks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .shophero__points { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------- filtry zwijane na telefonie

   Panel filtrow ma ponad 600px wysokosci. W jednej kolumnie stoi w calosci
   NAD lista, wiec klient na telefonie przewija caly formularz, zanim zobaczy
   pierwszy produkt. Zwijamy go do jednego paska.

   Na szerokim ekranie <summary> znika i panel jest zawsze otwarty - nie ma
   tam czego zwijac, bo stoi w osobnej kolumnie obok listy.
*/
.filters__summary {
  display: none;
  align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 700;
}
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary svg { width: 18px; height: 18px; flex: none; color: var(--pink-text); }
.filters__summary .filters__chev { margin-left: auto; transition: transform .2s ease; }
details[open] > .filters__summary .filters__chev { transform: rotate(180deg); }

@media (max-width: 979px) {
  .filters__summary { display: flex; }
  /* odstep pojawia sie dopiero po rozwinieciu */
  details[open] > .filters__summary { margin-bottom: var(--sh-gap); }
  /* naglowek "Filtry" mowi juz pasek zwijany - drugi raz jest zbedny */
  .filters__head h2 { display: none; }
  .filters__head { justify-content: flex-end; margin-bottom: 10px; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* przeskok do tresci — pierwszy element strony dla klawiatury i czytnikow */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  background: var(--ink, #121417); color: #fff; text-decoration: none;
}
.skip:focus { left: 0; }