/* =====================================================================
   ATRIUM – MENU ROZWIJANE (prefiks klas: atpl-)

   Zmiana kolorów i wymiarów: nadpisz zmienne dla wszystkich trzech
   selektorów naraz (panel jest przenoszony na koniec strony), np.:

     .atpl, .atpl-panel, .atpl-overlay { --atpl-accent: #E30613; }

   Selektory mają podwyższoną wagę (np. „.atpl .atpl-top-link”), żeby
   style motywu i Elementora (przyciski, odnośniki) ich nie nadpisywały.
   ===================================================================== */

/* ---------- 1. Zmienne ---------- */
.atpl,
.atpl-panel,
.atpl-overlay {
  --atpl-accent: #E30613;        /* czerwień Atrium – tło otwartej pozycji, strzałki */
  --atpl-accent-text: #B8050F;   /* czerwień przyciemniona – tekst na jasnym tle (kontrast min. 4.5:1) */
  --atpl-accent-soft: #FDECEE;   /* tło plakietki „Artykuł” */
  --atpl-ink: #14171C;           /* główny tekst */
  --atpl-muted: #5B6370;         /* tekst pomocniczy */
  --atpl-label: #6B7380;         /* nazwy producentów */
  --atpl-line: #E4E7EC;          /* linie */
  --atpl-dark: #2E3135;          /* grafit – jak kafle na atrium.com.pl (warianty ciemny i mieszany) */
  --atpl-on-dark: #FFFFFF;       /* tekst na grafitowym tle */
  --atpl-on-dark-muted: #A3A9B3; /* nazwy producentów na grafitowym tle */
  --atpl-accent-on-dark: #FF6B73;/* czerwień rozjaśniona – najechanie na grafitowym tle (kontrast min. 4.5:1) */
  --atpl-bar: 3px;               /* grubość czerwonego paska */
  --atpl-box-gray: #E9ECEF;      /* tło pola z modelami – wariant pole="szare" */
  --atpl-panel-gray: #F3F4F6;    /* tło panelu – wariant tlo="szare" (jasna szarość) */
  --atpl-bg: #FFFFFF;            /* tło panelu */
  --atpl-dim: rgba(15, 18, 24, 0.32); /* przyciemnienie strony pod panelem */
  --atpl-nav-h: 3.5rem;          /* wysokość pozycji w pasku (komputer) */
  --atpl-panel-w: 1280px;        /* szerokość panelu na komputerze = szerokość strony (na węższym ekranie: ekran minus 2 × 16 px) */
  --atpl-speed: 0.4s;            /* czas wysuwania panelu */
  --atpl-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --atpl-font: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --atpl-font-cond: "Saira Semi Condensed", "Saira", system-ui, sans-serif;
}

/* ---------- 2. Podstawa (odporna na style motywu) ---------- */
.atpl,
.atpl-panel {
  font-family: var(--atpl-font);
  color: var(--atpl-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.atpl *, .atpl *::before, .atpl *::after,
.atpl-panel *, .atpl-panel *::before, .atpl-panel *::after { box-sizing: border-box; }

.atpl ul, .atpl li,
.atpl-panel ul, .atpl-panel li { margin: 0; padding: 0; list-style: none; }
.atpl-panel p { margin: 0; }
.atpl li::before, .atpl-panel li::before { content: none; }

.atpl .atpl-i,
.atpl-panel .atpl-i {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* obwódka fokusu tylko przy obsłudze klawiaturą (klasę atpl-kbd ustawia skrypt);
   po kliknięciu myszą lub stuknięciu nie ma ramki – także gdy motyw dodaje własną */
.atpl :focus, .atpl :focus-visible,
.atpl-panel :focus, .atpl-panel :focus-visible { outline: none !important; }
html.atpl-kbd .atpl :focus,
html.atpl-kbd .atpl-panel :focus { outline: 2px solid var(--atpl-accent) !important; outline-offset: 2px !important; }

/* =====================================================================
   3. PASEK MENU
   ===================================================================== */
.atpl { position: relative; width: 100%; }
.atpl .atpl-list { display: flex; flex-wrap: wrap; align-items: stretch; }
.atpl.atpl--srodek .atpl-list { justify-content: center; }
.atpl.atpl--prawo .atpl-list { justify-content: flex-end; }
.atpl .atpl-list > li { display: flex; }

.atpl .atpl-top-trigger,
.atpl .atpl-top-trigger:focus,
.atpl .atpl-top-link,
.atpl .atpl-top-link:focus,
.atpl .atpl-top-link:visited {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--atpl-nav-h);
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--atpl-ink);
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 1rem;                 /* rozmiar pozycji w pasku */
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.04em;          /* delikatne rozstrzelenie przy wersalikach */
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.atpl .atpl-top-trigger:hover,
.atpl .atpl-top-link:hover { background: transparent; color: var(--atpl-accent-text); }

/* bieżąca strona */
.atpl .is-current > .atpl-top-link,
.atpl .is-current > .atpl-top-trigger { color: var(--atpl-accent-text); }

/* mała, minimalistyczna strzałka przy pozycjach z panelem */
.atpl .atpl-arrow { width: 0.875rem; height: 0.875rem; stroke-width: 2; opacity: 0.7; transition: transform 0.3s var(--atpl-ease), opacity 0.2s; }
.atpl .atpl-top-trigger:hover .atpl-arrow { opacity: 1; }

/* otwarta pozycja – czerwone tło */
.atpl .atpl-item--panel.is-open > .atpl-top-trigger,
.atpl .atpl-item--panel.is-open > .atpl-top-trigger:hover,
.atpl .atpl-item--panel.is-open > .atpl-top-trigger:focus { background: var(--atpl-accent); color: #fff; }
.atpl .atpl-item--panel.is-open > .atpl-top-trigger .atpl-arrow { transform: rotate(180deg); opacity: 1; }
/* niewidoczny mostek od pozycji do panelu (wysokość ustawia skrypt) – zjazd kursorem w dół nie zamyka panelu */
.atpl .atpl-item--panel { position: relative; }
.atpl .atpl-item--panel.is-open::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--atpl-bridge, 0px);
}

/* klasy pomocnicze widoczności */
.atpl .atpl-list > li.atpl-tylko-telefon { display: none; }

/* =====================================================================
   4. PANEL (przenoszony skryptem na koniec strony, położenie liczy skrypt)
   ===================================================================== */
.atpl-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99990;
  width: min(var(--atpl-panel-w), calc(100vw - 2rem));
  max-height: 80vh;
  visibility: hidden;
  clip-path: inset(0 -3rem 100% -3rem);          /* zamknięty: zwinięty do górnej krawędzi */
  transition: clip-path var(--atpl-speed) var(--atpl-ease), visibility 0s linear var(--atpl-speed);
}
.atpl-panel.is-open {
  visibility: visible;
  clip-path: inset(0 -3rem -3rem -3rem);         /* otwarty – ujemne wartości zostawiają miejsce na cień */
  transition: clip-path var(--atpl-speed) var(--atpl-ease), visibility 0s;
}
.atpl-panel.atpl-panel--instant,
.atpl-panel.atpl-panel--instant * { transition: none !important; }

.atpl-panel .atpl-panel-body {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  container: atpl / inline-size;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--atpl-line);
  border-top: 0;
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--atpl-bg);
  box-shadow: 0 1.5rem 3rem -1rem rgba(16, 20, 28, 0.3);
}

/* tryb telefonu / tabletu – panel na całą szerokość ekranu */
.atpl-panel.atpl-panel--sheet { width: 100%; }
.atpl-panel.atpl-panel--sheet .atpl-panel-body { padding: 1rem; border-left: 0; border-right: 0; }

/* ---------- 5. Kategorie ---------- */
/* kolumny kategorii – każda kolumna to osobny stos: pole z modelami rozwija się pod kategorią
   w jej kolumnie, pozostałe kolumny zostają bez zmian */
.atpl-panel .atpl-cats {
  display: grid;
  grid-template-columns: repeat(var(--atpl-cols, 3), minmax(0, 1fr));
  align-items: start;
  column-gap: 1.25rem;             /* odstęp między kolumnami */
}
.atpl-panel .atpl-col { display: flex; flex-direction: column; min-width: 0; }
.atpl-panel .atpl-catwrap { min-width: 0; }

.atpl-panel .atpl-cat,
.atpl-panel .atpl-cat:focus,
.atpl-panel .atpl-cat:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  box-shadow: none;
  color: var(--atpl-ink);
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 1rem;                 /* rozmiar nazw kategorii */
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.atpl-panel .atpl-cat:hover { background: transparent; color: var(--atpl-accent-text); }
.atpl-panel .atpl-cat:hover .atpl-cat-chev { color: var(--atpl-accent); }
.atpl-panel .atpl-cat.is-current { color: var(--atpl-accent-text); }
.atpl-panel .atpl-cat-chev,
.atpl-panel .atpl-cat .atpl-go { width: 1rem; height: 1rem; color: #9AA1AC; transition: transform 0.3s var(--atpl-ease), color 0.2s; }
.atpl-panel .atpl-cat:hover .atpl-go { color: var(--atpl-accent); transform: translateX(0.125rem); }

/* wybrana kategoria – wygląd zależy od wariantu (punkt 7a) */
.atpl-panel .atpl-cat.is-active .atpl-cat-chev { transform: rotate(180deg); }

/* ---------- 6. Pole z modelami ---------- */
.atpl-panel .atpl-box {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.38s var(--atpl-ease), visibility 0s linear 0.38s;
}
.atpl-panel .atpl-box.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.38s var(--atpl-ease), visibility 0s; }
.atpl-panel .atpl-box-clip { min-height: 0; overflow: hidden; }
.atpl-panel .atpl-box-body { margin-bottom: 0.75rem; padding: 0.875rem 1rem 0.75rem; }

/* producenci jeden pod drugim – pole ma szerokość swojej kolumny */
.atpl-panel .atpl-brands { display: flex; flex-direction: column; gap: 0.875rem; }
.atpl-panel .atpl-brand-name,
.atpl-panel .atpl-brand-name a {
  margin: 0 0 0.375rem;
  color: var(--atpl-label);
  font-family: var(--atpl-font);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.atpl-panel .atpl-brand-name a:hover { color: var(--atpl-accent-text); }

.atpl-panel .atpl-prod,
.atpl-panel .atpl-prod:focus,
.atpl-panel .atpl-prod:visited {
  display: inline-block;
  padding: 0.3125rem 0;
  color: var(--atpl-ink);          /* modele na czarno… */
  font-family: var(--atpl-font);
  font-weight: 500;
  font-size: 1rem;                 /* rozmiar nazw modeli */
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s;
}
.atpl-panel .atpl-prod:hover { color: var(--atpl-accent-text); text-decoration: none; }   /* …czerwone po najechaniu, bez podkreślenia */
.atpl-panel .atpl-prod.is-current { font-weight: 700; }

.atpl-panel .atpl-all,
.atpl-panel .atpl-all:visited {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(20, 23, 28, 0.08);
  color: var(--atpl-ink);
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s;
}
.atpl-panel .atpl-all .atpl-go { width: 1rem; height: 1rem; color: var(--atpl-accent); transition: transform 0.25s var(--atpl-ease); }
.atpl-panel .atpl-all:hover { color: var(--atpl-accent-text); }
.atpl-panel .atpl-all:hover .atpl-go { transform: translateX(0.25rem); }



/* ---------- 6a. Układ „wiersze” (parametr uklad="wiersze") ----------
   Pole z modelami zajmuje cały rząd pod wybraną kategorią, rzędy poniżej przesuwają się w dół.
   Grupy producentów stoją w tych samych kolumnach co kategorie (położenie ustawia skrypt). */
.atpl-panel[data-atpl-layout="wiersze"] .atpl-cats { grid-auto-flow: row dense; column-gap: 0.375rem; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-catwrap { display: contents; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-box { grid-column: 1 / -1; }
/* wnętrze pola ma te same kolumny co kategorie – białe pole zajmuje tylko kolumny z produktami */
.atpl-panel[data-atpl-layout="wiersze"] .atpl-box-clip {
  display: grid;
  grid-template-columns: repeat(var(--atpl-bn, var(--atpl-cols, 3)), minmax(0, 1fr));
  column-gap: 0.375rem;
}
.atpl-panel[data-atpl-layout="wiersze"] .atpl-box-body { grid-column: 1 / -1; min-width: 0; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-box-body { padding: 0.875rem 0 0.75rem; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-brands {
  display: grid;
  grid-template-columns: repeat(var(--atpl-bcols, var(--atpl-cols, 3)), minmax(0, 1fr));
  column-gap: 0.375rem;
  row-gap: 1rem;
  align-items: start;
}
/* kolumna producentów układana przez skrypt, gdy producentów jest więcej niż kolumn (bez pustych miejsc) */
.atpl-panel[data-atpl-layout="wiersze"] .atpl-bcol { display: flex; flex-direction: column; row-gap: 1rem; min-width: 0; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-brand { padding: 0 1rem; min-width: 0; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-brand ul { column-gap: 1.25rem; }
.atpl-panel[data-atpl-layout="wiersze"] .atpl-all { margin-left: 1rem; margin-right: 1rem; }
.atpl-panel .atpl-brand li { break-inside: avoid; }

/* ---------- 7a. Warianty wyglądu (parametr styl="…") ---------- */

/* CIEMNY – wybrana kategoria i pole z modelami w graficie, czerwony pasek na dole (jak kafle na stronie) */
.atpl-panel--ciemny .atpl-cat.is-active,
.atpl-panel--ciemny .atpl-cat.is-active:hover,
.atpl-panel--ciemny .atpl-cat.is-active:focus { background: var(--atpl-dark); color: var(--atpl-on-dark); border-radius: 0.5rem 0.5rem 0 0; }
.atpl-panel--ciemny .atpl-cat.is-active .atpl-cat-chev { color: var(--atpl-on-dark); }
.atpl-panel--ciemny .atpl-box-body { background: var(--atpl-dark); border-radius: 0 0 0.5rem 0.5rem; box-shadow: inset 0 calc(-1 * var(--atpl-bar)) 0 var(--atpl-accent); }
.atpl-panel--ciemny .atpl-brand-name,
.atpl-panel--ciemny .atpl-brand-name a { color: var(--atpl-on-dark-muted); }
.atpl-panel--ciemny .atpl-prod,
.atpl-panel--ciemny .atpl-prod:focus,
.atpl-panel--ciemny .atpl-prod:visited { color: var(--atpl-on-dark); }
.atpl-panel--ciemny .atpl-prod:hover,
.atpl-panel--ciemny .atpl-brand-name a:hover { color: var(--atpl-accent-on-dark); }
.atpl-panel--ciemny .atpl-all,
.atpl-panel--ciemny .atpl-all:visited { color: var(--atpl-on-dark); border-top-color: rgba(255, 255, 255, 0.14); }
.atpl-panel--ciemny .atpl-all:hover { color: var(--atpl-accent-on-dark); }
.atpl-panel--ciemny .atpl-all .atpl-go { color: var(--atpl-accent-on-dark); }
html.atpl-kbd .atpl-panel--ciemny .atpl-box-body :focus { outline-color: var(--atpl-on-dark) !important; }

/* JASNY – wszystko na białym, wybrana kategoria z czerwonym podkreśleniem (jak aktywna pozycja na stronie) */
.atpl-panel--jasny .atpl-cat.is-active,
.atpl-panel--jasny .atpl-cat.is-active:hover,
.atpl-panel--jasny .atpl-cat.is-active:focus { background: transparent; color: var(--atpl-accent-text); border-radius: 0; box-shadow: inset 0 calc(-1 * var(--atpl-bar)) 0 var(--atpl-accent); }
.atpl-panel--jasny .atpl-cat.is-active .atpl-cat-chev { color: var(--atpl-accent); }
.atpl-panel--jasny .atpl-box-body { background: var(--atpl-bg); border-bottom: 1px solid var(--atpl-line); }

/* MIESZANY – wybrana kategoria jako grafitowy kafel z czerwonym paskiem, modele na białym polu z ramką */
.atpl-panel--mieszany .atpl-cat.is-active,
.atpl-panel--mieszany .atpl-cat.is-active:hover,
.atpl-panel--mieszany .atpl-cat.is-active:focus { background: var(--atpl-dark); color: var(--atpl-on-dark); border-radius: 0.375rem; box-shadow: inset 0 calc(-1 * var(--atpl-bar)) 0 var(--atpl-accent); }
.atpl-panel--mieszany .atpl-cat.is-active .atpl-cat-chev { color: var(--atpl-on-dark); }
.atpl-panel--mieszany .atpl-box-body { margin-top: 0.375rem; background: var(--atpl-bg); border: 1px solid var(--atpl-line); border-radius: 0.5rem; }

/* ---------- 7. Dół panelu ---------- */
.atpl-panel .atpl-panel-foot { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--atpl-line); }
.atpl-panel .atpl-cats + .atpl-panel-foot { margin-top: 0.75rem; }
.atpl-panel-body > .atpl-panel-foot:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.atpl-panel .atpl-foot-link,
.atpl-panel .atpl-foot-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--atpl-ink);
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s;
}
.atpl-panel .atpl-foot-link:hover { color: var(--atpl-accent-text); }
.atpl-panel .atpl-foot-link .atpl-go { width: 1rem; height: 1rem; color: var(--atpl-accent); }
.atpl-panel .atpl-foot-badge { padding: 0.125rem 0.4375rem; border-radius: 0.25rem; background: var(--atpl-accent-soft); color: var(--atpl-accent-text); font-family: var(--atpl-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- 8. Dopasowanie panelu do jego szerokości ---------- */
/* do 864 px szerokości panelu – 2 kolumny kategorii, do 480 px – 1 kolumna */
/* węższy panel (tablet) – mniejsze nazwy kategorii, żeby mieściły się w kolumnach */
@container atpl (max-width: 54rem) {
  .atpl-panel .atpl-cat,
  .atpl-panel .atpl-cat:focus { padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
  .atpl-panel .atpl-cats { column-gap: 0.75rem; }
  .atpl-panel[data-atpl-layout="wiersze"]:not([data-atpl-cols="1"]) .atpl-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.375rem; }
}
/* telefon – jedna kolumna (kolejność kategorii zostaje taka jak w menu) */
@container atpl (max-width: 40rem) {
  .atpl-panel[data-atpl-layout] .atpl-cats,
  .atpl-panel[data-atpl-layout]:not([data-atpl-cols="1"]) .atpl-cats { grid-template-columns: minmax(0, 1fr); }
}
/* przeglądarki bez obsługi zapytań o kontener (starsze) */
@supports not (container-type: inline-size) {
  @media (max-width: 64rem) { .atpl-panel[data-atpl-layout="wiersze"]:not([data-atpl-cols="1"]) .atpl-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 40rem) { .atpl-panel[data-atpl-layout] .atpl-cats, .atpl-panel[data-atpl-layout]:not([data-atpl-cols="1"]) .atpl-cats { grid-template-columns: minmax(0, 1fr); } }
}

/* ---------- 9. Przyciemnienie strony ---------- */
.atpl-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99989;
  background: var(--atpl-dim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.atpl-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }

/* blokada przewijania strony, gdy panel zajmuje ekran telefonu */
html.atpl-lock,
html.atpl-lock body { overflow: hidden; }

/* =====================================================================
   10. RESPONSYWNOŚĆ PASKA
   ===================================================================== */

/* węższy komputer: gdy pozycje nie mieszczą się w jednym rzędzie, skrypt ustawia stopień zagęszczenia 1–3 */
.atpl[data-atpl-fit="1"] .atpl-top-trigger,
.atpl[data-atpl-fit="1"] .atpl-top-trigger:focus,
.atpl[data-atpl-fit="1"] .atpl-top-link,
.atpl[data-atpl-fit="1"] .atpl-top-link:focus,
.atpl[data-atpl-fit="1"] .atpl-top-link:visited { padding: 0 0.75rem; font-size: 0.9375rem; }
.atpl[data-atpl-fit="2"] .atpl-top-trigger,
.atpl[data-atpl-fit="2"] .atpl-top-trigger:focus,
.atpl[data-atpl-fit="2"] .atpl-top-link,
.atpl[data-atpl-fit="2"] .atpl-top-link:focus,
.atpl[data-atpl-fit="2"] .atpl-top-link:visited { gap: 0.375rem; padding: 0 0.5rem; font-size: 0.875rem; }
.atpl[data-atpl-fit="3"] .atpl-top-trigger,
.atpl[data-atpl-fit="3"] .atpl-top-trigger:focus,
.atpl[data-atpl-fit="3"] .atpl-top-link,
.atpl[data-atpl-fit="3"] .atpl-top-link:focus,
.atpl[data-atpl-fit="3"] .atpl-top-link:visited { gap: 0.3125rem; padding: 0 0.4375rem; font-size: 0.8125rem; letter-spacing: 0.03em; }
.atpl[data-atpl-fit="3"] .atpl-arrow { width: 0.75rem; height: 0.75rem; }

/* telefon i tablet (do 1024 px) – pasek zastępuje przycisk „Menu” (punkt 14); te reguły działają,
   gdy przycisk zostanie wyłączony we własnym CSS */
@media (max-width: 64rem) {
  .atpl .atpl-list { gap: 0 0.25rem; }
  .atpl .atpl-top-trigger,
  .atpl .atpl-top-trigger:focus,
  .atpl .atpl-top-link,
  .atpl .atpl-top-link:focus,
  .atpl .atpl-top-link:visited {
    min-height: 2.5rem;            /* wygodne pole do stuknięcia */
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  .atpl .atpl-list > li.atpl-tylko-telefon { display: flex; }
  .atpl .atpl-list > li.atpl-tylko-komputer { display: none; }
}

/* małe telefony (do 375 px) */
@media (max-width: 23.4375rem) {
  .atpl .atpl-top-trigger,
  .atpl .atpl-top-trigger:focus,
  .atpl .atpl-top-link,
  .atpl .atpl-top-link:focus,
  .atpl .atpl-top-link:visited { padding: 0.5rem 0.5rem; font-size: 0.8125rem; letter-spacing: 0.03em; }
  .atpl .atpl-arrow { width: 0.8125rem; height: 0.8125rem; }
}

/* ---------- 11. Ograniczenie animacji ---------- */
@media (prefers-reduced-motion: reduce) {
  .atpl *, .atpl-panel, .atpl-panel *, .atpl-overlay { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}


/* =====================================================================
   12. OCHRONA KOLORÓW PRZED STYLAMI MOTYWU I ELEMENTORA
   Niektóre motywy nadpisują kolory przycisków i odnośników z „!important”.
   Poniższe reguły przywracają kolory menu (zmiana – przez zmienne z punktu 1).
   ===================================================================== */
.atpl .atpl-top-trigger,
.atpl .atpl-top-link { background-color: transparent !important; color: var(--atpl-ink) !important; opacity: 1 !important; filter: none !important; }
.atpl .atpl-top-trigger:hover,
.atpl .atpl-top-link:hover,
.atpl .is-current > .atpl-top-link,
.atpl .is-current > .atpl-top-trigger { color: var(--atpl-accent-text) !important; }
.atpl .atpl-item--panel.is-open > .atpl-top-trigger { background-color: var(--atpl-accent) !important; color: #fff !important; }

.atpl-panel .atpl-panel-body { background-color: var(--atpl-bg) !important; opacity: 1 !important; filter: none !important; }

.atpl-panel .atpl-cat { background-color: transparent !important; color: var(--atpl-ink) !important; opacity: 1 !important; }
.atpl-panel .atpl-cat:hover,
.atpl-panel .atpl-cat.is-current { color: var(--atpl-accent-text) !important; }
.atpl-panel--mieszany .atpl-cat.is-active,
.atpl-panel--ciemny .atpl-cat.is-active { background-color: var(--atpl-dark) !important; color: var(--atpl-on-dark) !important; }
.atpl-panel--jasny .atpl-cat.is-active { color: var(--atpl-accent-text) !important; }

.atpl-panel--mieszany .atpl-box-body,
.atpl-panel--jasny .atpl-box-body { background-color: var(--atpl-bg) !important; }
.atpl-panel--ciemny .atpl-box-body { background-color: var(--atpl-dark) !important; }

.atpl-panel .atpl-brand-name,
.atpl-panel .atpl-brand-name a { color: var(--atpl-label) !important; }
.atpl-panel--ciemny .atpl-brand-name,
.atpl-panel--ciemny .atpl-brand-name a { color: var(--atpl-on-dark-muted) !important; }

.atpl-panel .atpl-prod { color: var(--atpl-ink) !important; text-decoration: none !important; }
.atpl-panel .atpl-prod:hover { color: var(--atpl-accent-text) !important; }
.atpl-panel--ciemny .atpl-prod { color: var(--atpl-on-dark) !important; }
.atpl-panel--ciemny .atpl-prod:hover { color: var(--atpl-accent-on-dark) !important; }

.atpl-panel .atpl-all,
.atpl-panel .atpl-foot-link { color: var(--atpl-ink) !important; }
.atpl-panel .atpl-all:hover,
.atpl-panel .atpl-foot-link:hover { color: var(--atpl-accent-text) !important; }
.atpl-panel--ciemny .atpl-all { color: var(--atpl-on-dark) !important; }
.atpl-panel--ciemny .atpl-all:hover { color: var(--atpl-accent-on-dark) !important; }


/* =====================================================================
   13. TŁO POLA Z MODELAMI (parametr pole="biale | szare | ciemne")
   ===================================================================== */
.atpl-panel--pole-szare .atpl-box-body { background-color: var(--atpl-box-gray) !important; border-color: transparent !important; }

.atpl-panel--pole-ciemne .atpl-box-body { background-color: var(--atpl-dark) !important; border-color: transparent !important; }
.atpl-panel--pole-ciemne .atpl-brand-name,
.atpl-panel--pole-ciemne .atpl-brand-name a { color: var(--atpl-on-dark-muted) !important; }
.atpl-panel--pole-ciemne .atpl-prod { color: var(--atpl-on-dark) !important; }
.atpl-panel--pole-ciemne .atpl-prod:hover { color: var(--atpl-accent-on-dark) !important; }
.atpl-panel--pole-ciemne .atpl-all { color: var(--atpl-on-dark) !important; border-top-color: rgba(255, 255, 255, 0.14); }
.atpl-panel--pole-ciemne .atpl-all:hover { color: var(--atpl-accent-on-dark) !important; }
.atpl-panel--pole-ciemne .atpl-all .atpl-go { color: var(--atpl-accent-on-dark); }
html.atpl-kbd .atpl-panel--pole-ciemne .atpl-box-body :focus { outline-color: var(--atpl-on-dark) !important; }


/* ---------- tło całego panelu (parametr tlo="szare") – pole z modelami odcina się na biało ---------- */
.atpl-panel--tlo-szare .atpl-panel-body { background-color: var(--atpl-panel-gray) !important; }
.atpl-panel--tlo-szare.atpl-panel--pole-biale .atpl-box-body { border-color: transparent !important; box-shadow: 0 1px 3px rgba(16, 20, 28, 0.08); }
.atpl-panel--tlo-szare .atpl-panel-foot { border-top-color: rgba(20, 23, 28, 0.1); }


/* =====================================================================
   14. PRZYCISK „MENU” I WYSUWANA LISTA
   Tablet i telefon (do 1024 px) oraz komputer, gdy pasek nie mieści się w jednym rzędzie
   nawet po zagęszczeniu (klasę atpl--przycisk ustawia skrypt).
   ===================================================================== */
.atpl .atpl-burger { display: none; }

/* wygląd przycisku */
.atpl .atpl-burger,
.atpl .atpl-burger:focus,
.atpl .atpl-burger:hover {
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 0.375rem;
  background-color: transparent !important;
  box-shadow: none;
  color: var(--atpl-ink) !important;
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.atpl .atpl-burger.is-open,
.atpl .atpl-burger.is-open:hover,
.atpl .atpl-burger.is-open:focus { background-color: var(--atpl-accent) !important; color: #fff !important; }

/* kiedy przycisk zastępuje pasek */
@media (max-width: 64rem) {
  .atpl { display: flex; }
  .atpl.atpl--srodek { justify-content: center; }
  .atpl.atpl--prawo { justify-content: flex-end; }
  .atpl .atpl-list { display: none; }
  .atpl .atpl-burger { display: inline-flex; }
}
.atpl.atpl--przycisk { display: flex; }
.atpl.atpl--przycisk.atpl--srodek { justify-content: center; }
.atpl.atpl--przycisk.atpl--prawo { justify-content: flex-end; }
.atpl.atpl--przycisk .atpl-list { display: none; }
.atpl.atpl--przycisk .atpl-burger { display: inline-flex; }
.atpl .atpl-burger-icon { position: relative; display: block; width: 1.25rem; height: 0.875rem; }
.atpl .atpl-burger-icon i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--atpl-ease), opacity 0.2s, top 0.3s var(--atpl-ease); }
.atpl .atpl-burger-icon i:nth-child(1) { top: 0; }
.atpl .atpl-burger-icon i:nth-child(2) { top: calc(50% - 1px); }
.atpl .atpl-burger-icon i:nth-child(3) { top: calc(100% - 2px); }
.atpl .atpl-burger.is-open .atpl-burger-icon i:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.atpl .atpl-burger.is-open .atpl-burger-icon i:nth-child(2) { opacity: 0; }
.atpl .atpl-burger.is-open .atpl-burger-icon i:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* szuflada (przenoszona skryptem na koniec strony) */
.atpl-drawer {
  --atpl-accent: #E30613; --atpl-accent-text: #B8050F; --atpl-ink: #14171C; --atpl-line: #E4E7EC; --atpl-bg: #FFFFFF;
  --atpl-panel-gray: #F3F4F6; --atpl-speed: 0.4s; --atpl-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --atpl-font: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --atpl-font-cond: "Saira Semi Condensed", "Saira", system-ui, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99990;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--atpl-bg);
  box-shadow: 0 1.5rem 3rem -1rem rgba(16, 20, 28, 0.3);
  font-family: var(--atpl-font);
  color: var(--atpl-ink);
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--atpl-speed) var(--atpl-ease), visibility 0s linear var(--atpl-speed);
}
.atpl-drawer.is-open { visibility: visible; clip-path: inset(0 0 -3rem 0); transition: clip-path var(--atpl-speed) var(--atpl-ease), visibility 0s; }
.atpl-drawer *, .atpl-drawer *::before, .atpl-drawer *::after { box-sizing: border-box; }
.atpl-drawer .atpl-dlist, .atpl-drawer .atpl-ditem { margin: 0; padding: 0; list-style: none; }
.atpl-drawer .atpl-ditem::before { content: none; }
.atpl-drawer .atpl-ditem { border-bottom: 1px solid var(--atpl-line); }

.atpl-drawer .atpl-dtrigger,
.atpl-drawer .atpl-dtrigger:hover,
.atpl-drawer .atpl-dtrigger:focus,
.atpl-drawer .atpl-dlink,
.atpl-drawer .atpl-dlink:hover,
.atpl-drawer .atpl-dlink:focus,
.atpl-drawer .atpl-dlink:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none;
  color: var(--atpl-ink) !important;
  font-family: var(--atpl-font-cond);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.atpl-drawer .atpl-dtrigger.is-open { color: var(--atpl-accent-text) !important; }
.atpl-drawer .atpl-dchev { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform 0.3s var(--atpl-ease); }
.atpl-drawer .atpl-dtrigger.is-open .atpl-dchev { transform: rotate(180deg); opacity: 1; }

.atpl-drawer .atpl-dsection { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.38s var(--atpl-ease), visibility 0s linear 0.38s; }
.atpl-drawer .atpl-dsection.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.38s var(--atpl-ease), visibility 0s; }
.atpl-drawer .atpl-dsection-clip { min-height: 0; overflow: hidden; }
.atpl-drawer .atpl-dsection-inner { background: var(--atpl-panel-gray); }

/* panel kategorii w szufladzie – zwykły blok zamiast pływającego panelu */
.atpl-panel.atpl-panel--in-drawer { position: static; z-index: auto; width: auto !important; max-height: none !important; visibility: inherit; clip-path: none; transition: none; }
.atpl-panel.atpl-panel--in-drawer .atpl-panel-body { max-height: none; overflow: visible; padding: 0.5rem 1rem 1rem; border: 0; border-radius: 0; box-shadow: none; background-color: transparent !important; }

html.atpl-kbd .atpl-drawer :focus { outline: 2px solid var(--atpl-accent) !important; outline-offset: -2px !important; }
.atpl-drawer :focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .atpl-drawer, .atpl-drawer * { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* komunikat dla administratora, gdy menu nie jest przypisane */
.atpl-empty { padding: 0.75rem 1rem; border: 1px dashed #E30613; border-radius: 0.5rem; font-size: 0.875rem; }