.hd-22{border-top:1px solid var(--border-divider);border-bottom:1px solid var(--border-divider)}
.hd-23{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad);display:flex;align-items:center;gap:0}
.hd-24{display:flex;list-style:none;align-items:center}
.hd-25{position:static;margin-right:var(--space-5)}
.hd-26{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;height:52px;margin-block:-1px;padding-inline:28px;border:0;background:none;cursor:pointer;font-family:var(--font-condensed);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-action);white-space:nowrap;--kat-tlo:var(--action-primary)}
.hd-26::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--kat-tlo);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:background var(--motion-fast) var(--motion-easing)}
.hd-26:hover{--kat-tlo:var(--action-primary-hover)}
.hd-27{position:absolute;left:0;right:0;top:100%;background:var(--surface-base);border-bottom:1px solid var(--border-divider);box-shadow:var(--shadow-overlay);z-index:30}
.hd-28{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad);display:grid;grid-template-columns:320px 1fr;min-height:420px}
.hd-29{list-style:none;padding-block:var(--space-4)}
.hd-30{display:flex;align-items:center;gap:12px;padding:11px 20px 11px 0;font-family:var(--font-condensed);font-weight:600;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--text-default)}
.hd-31{flex:none;width:3px;height:16px;background:var(--action-primary);transform:skewX(var(--angle-brand));opacity:0}
.hd-32{font-style:normal;font-family:var(--font-body);font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--white);background:var(--neutral-8);padding:1px 6px;border-radius:3px}
.hd-33{margin-left:auto;display:flex;color:var(--neutral-8);opacity:0}
.hd-34{padding:var(--space-6) 0 var(--space-7) var(--space-7);border-left:1px solid var(--border-divider)}
.hd-35{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:900;font-size:var(--size-2);line-height:1.1;letter-spacing:-.01em;color:var(--text-default);text-decoration:none;margin-bottom:var(--space-5)}
.hd-35:hover{color:var(--action-primary)}
.hd-36{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));column-gap:var(--space-7)}
.hd-37{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:15px;line-height:1.35;color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--neutral-3)}
.hd-37:hover{color:var(--action-primary)}
.hd-38{flex:none;width:46px;height:46px;background:var(--surface-subtle)}
.hd-39{margin-top:var(--space-6);max-width:52ch;font-size:13.5px;color:var(--neutral-9)}
.hd-40{position:static}
.hd-41{position:relative;display:flex;align-items:center;gap:8px;height:50px;padding-inline:14px;border:0;background:none;cursor:pointer;font-family:var(--font-condensed);font-weight:600;font-size:15px;letter-spacing:.045em;text-transform:uppercase;color:var(--text-default);white-space:nowrap}
.hd-42{position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--action-primary);transform-origin:left bottom;transition:transform var(--motion-base) var(--motion-easing);transform:skewX(var(--angle-brand)) scaleX(0)}
.hd-43{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad);display:grid;grid-template-columns:320px 1fr}
.hd-44{padding:var(--space-6) var(--space-7) var(--space-7) 0;display:flex;flex-direction:column;gap:var(--space-3)}
.hd-45{display:flex;align-items:center;gap:9px;font-family:var(--font-condensed);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--neutral-9)}
.hd-45::before{content:'';flex:none;width:3px;height:13px;background:var(--action-primary);transform:skewX(var(--angle-brand))}
.hd-46{font-family:var(--font-display);font-weight:900;font-size:var(--size-2);line-height:1.05;letter-spacing:-.01em;color:var(--text-default)}
.hd-47{max-width:34ch;font-size:13.5px;line-height:1.55;color:var(--neutral-9);text-wrap:pretty}
.hd-48{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:15px;line-height:1.35;color:var(--text-default);text-decoration:none;border-bottom:1px solid var(--neutral-3)}
.hd-49{flex:none;width:46px;height:46px;background-position:center;background-size:contain;background-repeat:no-repeat}
.hd-60{position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--action-primary);transform-origin:left bottom;transition:transform var(--motion-base) var(--motion-easing);transform:skewX(var(--angle-brand)) scaleX(0)}
.hd-65{position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--action-primary);transform-origin:left bottom;transition:transform var(--motion-base) var(--motion-easing);transform:skewX(var(--angle-brand)) scaleX(0)}
.hd-66{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}
.hd-67{display:flex;align-items:flex-start;gap:16px;padding:18px 18px 18px 0;border-top:1px solid var(--neutral-3);text-decoration:none;color:var(--text-default);transition:padding-left var(--motion-fast) var(--motion-easing),background var(--motion-fast) var(--motion-easing)}
.hd-67:hover{background:var(--surface-subtle);padding-left:14px}
.hd-68{flex:none;display:flex;color:var(--action-primary);margin-top:1px}
.hd-69{display:block;font-weight:600;font-size:15.5px}
.hd-70{display:block;font-style:normal;font-size:13px;color:var(--text-secondary);margin-top:2px}
.hd-71{position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--action-primary);transform-origin:left bottom;transition:transform var(--motion-base) var(--motion-easing);transform:skewX(var(--angle-brand)) scaleX(0)}
.hd-72{position:relative;display:flex;align-items:center;gap:8px;height:50px;padding-inline:14px;font-family:var(--font-condensed);font-weight:600;font-size:15px;letter-spacing:.045em;text-transform:uppercase;color:var(--text-default);text-decoration:none;white-space:nowrap}
/* ---- stany, które w makiecie robił React ---- */
.hd-30{color:var(--text-default)}
.hd-rodzina.jest-aktywna .hd-30{color:var(--action-primary)}
.hd-rodzina.jest-wkrotce .hd-30{color:var(--neutral-8);cursor:default}
.hd-rodzina.jest-aktywna .hd-31,
.hd-rodzina.jest-aktywna .hd-33{opacity:1}
.hd-poz-btn[aria-expanded="true"] .hd-kreska,
.hd-poz-btn:hover .hd-kreska{transform:skewX(var(--angle-brand)) scaleX(1)}
.hd-panel[hidden]{display:none}
.hd-pane{display:none}
.hd-pane.jest-widoczny{display:block}
.hd-poz-btn:focus{outline:none}
.hd-poz-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.hd-szuflada[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .hd-kreska{transition:none}
}
.hd-88{position:absolute;inset:0;z-index:5;background:var(--surface-base);display:flex;flex-direction:column}
.hd-89{flex:none;display:flex;align-items:center;gap:4px;height:60px;padding-inline:10px;background:var(--surface-dark-base);color:var(--text-on-dark-high)}
.hd-90{flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer}
/* wspólna ikona strzałki rysuje grot w prawo — guzik „Wstecz" obraca ją w lewo */
.hd-91{transform:rotate(180deg)}
.hd-92{font-family:var(--font-condensed);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.hd-93{margin-left:auto;flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer}
.hd-94{flex:1;min-height:0;overflow:auto}
.hd-95{width:100%;display:flex;align-items:center;gap:12px;height:64px;padding-inline:18px;border:0;cursor:pointer;background:var(--action-primary);color:var(--text-on-action);font-family:var(--font-condensed);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.hd-96{margin-left:auto;display:flex}
.hd-97{list-style:none}
.hd-103{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;border-top:1px solid var(--neutral-3);background:var(--surface-subtle)}
.hd-104{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:9px;height:50px;color:var(--text-default);text-decoration:none;font-family:var(--font-condensed);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.hd-104::after{content:'';position:absolute;inset:1.5px;z-index:-1;background:var(--surface-subtle);clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%)}
.hd-104::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--neutral-12);clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%)}
.hd-105{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;height:50px;color:var(--text-on-action);text-decoration:none;font-family:var(--font-condensed);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.hd-105::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--neutral-12);clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%)}
/* ---- szuflada mobilna ----
   W makiecie leży w ramce podglądu telefonu (390 × 788), więc `.hd-88` z `inset:0`
   wystarczało. Na stronie musi się umocować do okna, inaczej łapie się nagłówka
   i cała szuflada ma jego 164 px wysokości. */
.hd-szuflada {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 60;
  background: var(--surface-base);
}
.hd-szuflada .hd-88 { position: absolute; inset: 0; }
/* na szerokim ekranie szuflada nie ma prawa się pokazać — jest na stałe pozycjonowana
   i przykryłaby całą stronę, gdyby ktoś ją otworzył skryptem */
@media (min-width: 1024px) { .hd-szuflada { display: none; } }
/* ---- otwieranie szuflady ----
   Wjazd od lewej z lekkim przygaszeniem. Świadomie animacją, nie przejściem między stanami:
   przy przejściu stan spoczynkowy musiałby być „poza ekranem", więc gdyby animacja nie ruszyła
   (karta w tle, oszczędzanie energii), menu zostałoby niewidoczne. Animacja tylko odgrywa
   wejście — stanem docelowym jest normalne położenie. Zamknięcie odgrywa zjazd na klasie
   `jest-zamykana` — `hidden` wchodzi dopiero po animationend (skrypt ma zapasowy timer),
   krócej niż wjazd, bo wyjścia mają być szybsze od wejść. */
.hd-szuflada.jest-otwarta { animation: hd-wjazd 260ms var(--motion-easing); }
@keyframes hd-wjazd {
  from { transform: translateX(-100%); opacity: .4; }
  to   { transform: none; opacity: 1; }
}
.hd-szuflada.jest-zamykana { animation: hd-zjazd 220ms var(--motion-easing) forwards; }
@keyframes hd-zjazd {
  from { transform: none; opacity: 1; }
  to   { transform: translateX(-100%); opacity: .4; }
}
/* ---- pływające guziki i czat przy otwartej szufladzie ----
   Telefon i czat są `position: fixed` z z-index 1000 i 9999, więc lądowały na wierzchu
   menu i zasłaniały pozycje. Chowamy je na czas otwarcia zamiast podbijać z-index szuflady
   w nieskończoność. */
body.ma-szuflade .tsfab,
body.ma-szuflade #cw-widget-holder,
body.ma-szuflade #cw-bubble-holder,
body.ma-szuflade .woot-widget-bubble,
body.ma-szuflade .woot-widget-holder,
body.ma-szuflade #brevo-conversations { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hd-szuflada.jest-otwarta,
  .hd-szuflada.jest-zamykana { animation: none; }
}
/* szuflada zakrywa cały ekran, więc jej ciemny pasek też musi objąć górny margines */
.hd-szuflada .hd-89 {
  padding-top: calc(env(safe-area-inset-top, 0px));
  height: auto;
  min-height: calc(60px + env(safe-area-inset-top, 0px));
}
/* ---- stopka szuflady: konto i język (makieta 2026-08-12 09:28) ---- */
.hd-szuflada .hd-103 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.hd-mob-konto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hd-mob-login {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--text-default);
  text-decoration: none;
  font-size: 14.5px;
}
.hd-mob-login__i { display: flex; color: var(--action-primary); }
.hd-mob-jezyki {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--neutral-3);
  border-radius: var(--radius-control);
}
.hd-mob-jezyk {
  min-width: 46px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--neutral-9);
  text-decoration: none;
  transition: background var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing);
}
.hd-mob-jezyk.jest-aktywny { background: var(--white); color: var(--text-default); }
.hd-mob-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ---- wiersze szuflady mobilnej (buduje je skrypt z paneli wyżej) ---- */
.hd-mob-wiersz{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:15.5px;color:var(--text-default);text-decoration:none;border-bottom:1px solid var(--neutral-3)}
/* ---- jedna strzałka w całym menu ----
   Wiersze miały strzałkę zrobioną z obróconego kwadratu (ostry róg, ścięte końce),
   a guzik „Katalog maszyn" ikonę z makiety. Teraz wiersz dostaje klon tej samej ikony,
   więc obie strzałki są tym samym rysunkiem, a kolor idzie z tekstu wiersza. */
.hd-szuflada .hd-mob-wiersz.ma-strzalke::after { content: none; }
.hd-mob-strzalka {
  flex: none;
  margin-left: auto;
  display: flex;
  color: var(--neutral-9);
}
/* guzik katalogu ma z makiety 18 px marginesu, wiersze 26 — strzałki nie stały w jednej linii */
.hd-szuflada .hd-95 { padding-right: 26px; }
/* strzałka i znacznik stały 18 px od krawędzi ekranu — na telefonie za blisko kanta */
.hd-szuflada .hd-mob-wiersz { padding-right: 26px; }
/* znacznik „wkrótce" w wierszu szuflady — dosuwa się do nazwy, strzałka zostaje przy krawędzi */
.hd-mob-wiersz .hd-32 { flex: none; margin-left: 8px; }
.hd-mob-wiersz.jest-wkrotce { color: var(--neutral-9); }
/* ---- kafelki podkategorii w szufladzie (makieta 2026-08-12 09:42) ----
   Widok rodziny pokazuje kafelki dwa w rzędzie zamiast listy wierszy. */
.hd-szuflada .hd-mob-kafle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 10px;          /* pion większy niż w makiecie: zdjęcie wychodzi 14 px pod kafel */
  padding: 14px 16px 30px;
}
.hd-mob-kafel {
  position: relative;
  display: block;
  height: 176px;           /* 152 z makiety nie mieściło dwóch wierszy nazwy i odstępu nad zdjęciem */
  border: 1px solid var(--neutral-3);   /* ta sama kreska co nad stopką szuflady */
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  text-decoration: none;
}
/* Kreska idzie tuż pod nazwą, więc przy jednej linijce podjeżdża wyżej — decyzja Magdy.
   Zdjęcia i tak stoją równo, bo są pozycjonowane bezwzględnie od górnej krawędzi kafla. */
.hd-mob-kafel__t > span:first-child { display: block; }
.hd-mob-kafel__t {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 12px 0;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.22;
  letter-spacing: .005em;
  color: var(--text-default);
}
.hd-mob-kafel__kr {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--action-primary);
  transform: skewX(var(--angle-brand));
}
.hd-mob-kafel__wkr {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--white);
  background: var(--neutral-8);
  padding: 2px 6px;
  border-radius: 3px;
}
.hd-mob-kafel__img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 78px;               /* 16 px prześwitu pod kreską, która kończy się na 62 px */
  height: 112px;
  width: 112%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}
/* ---- reakcja na dotknięcie ----
   Na telefonie nie ma najechania, więc jedyny moment, w którym można potwierdzić dotknięcie,
   to `:active`. Wciśnięcie lekko zmniejsza element i przygasza tło; powrót jest wolniejszy
   od wciśnięcia, dzięki czemu ruch nie wygląda na szarpnięcie. */
.hd-mob-kafel,
.hd-mob-wiersz,
.hd-szuflada .hd-95,
.hd-szuflada .hd-104,
.hd-szuflada .hd-105,
.hd-mob-jezyk,
.hd-mob-login {
  transition: transform 220ms var(--motion-easing), background var(--motion-base) var(--motion-easing);
  -webkit-tap-highlight-color: transparent;
}
.hd-mob-kafel:active,
.hd-szuflada .hd-104:active,
.hd-szuflada .hd-105:active {
  transform: scale(.97);
  transition-duration: var(--motion-fast);
}
.hd-mob-kafel:active { background: var(--neutral-3); }
/* Katalog maszyn ciągnie się na całą szerokość szuflady — zmniejszenie odsłaniało spod niego
   biel strony. Zamiast tego ciemniejsza czerwień i minimalnie ciaśniejszy napis. */
.hd-szuflada .hd-95 { transition: background var(--motion-fast) var(--motion-easing), letter-spacing var(--motion-fast) var(--motion-easing); }
.hd-szuflada .hd-95:active { background: var(--action-primary-hover); letter-spacing: .04em; }
.hd-mob-wiersz:active { background: var(--surface-subtle); transition-duration: var(--motion-fast); }
.hd-mob-jezyk:active,
.hd-mob-login:active { transform: scale(.95); transition-duration: var(--motion-fast); }
/* kafle katalogu na desktopie — to samo potwierdzenie kliknięcia, na ekranach dotykowych też działa */
.hd-1 .hd-pane .hd-37:active { transform: translateY(-6px) scale(.985); transition-duration: var(--motion-fast); }
@media (prefers-reduced-motion: reduce) {
  .hd-mob-kafel:active,
  .hd-mob-jezyk:active,
  .hd-mob-login:active,
  .hd-szuflada .hd-104:active,
  .hd-szuflada .hd-105:active,
  .hd-1 .hd-pane .hd-37:active { transform: none; }
}
/* ---- miejsce bez zdjęcia ----
   Zamiast pustego prostokąta obrys sygnetu Toolsy w szarości `--neutral-8`; ten sam plik
   we wszystkich trzech miejscach: wiersz szuflady, kafelek i baner rodziny bez podkategorii. */
.hd-mob-mini--pusty {
  background-image: url(../img/znak-obrys.svg);
}
.hd-mob-kafel--pusty::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 64px;
  background: url(../img/znak-obrys.svg) center/58px no-repeat;
}
/* miniatura w wierszu szuflady — ten sam plik 92 px, którego używa panel na desktopie */
.hd-mob-mini {
  flex: none;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.hd-mob-mini--ikona {
  display: grid;
  place-items: center;
  color: var(--action-primary);
}
/* napis zjada wolne miejsce, więc znaczniki „wkrótce" ustawiają się w jednej kolumnie
   przy prawej krawędzi zamiast dyndać zaraz za nazwą, każdy w innym miejscu */
.hd-mob-txt { flex: 1; min-width: 0; }
.hd-mob-wiersz.jest-dzialem{font-family:var(--font-condensed);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:15px}
.hd-mob-wiersz.ma-strzalke::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.6px solid var(--neutral-9);border-bottom:1.6px solid var(--neutral-9);transform:rotate(-45deg)}
.hd-mob-wiersz:active{background:var(--surface-subtle)}
/* ---- szerokość dopasowana do treści sklepu ----
   Makieta przyszła z tokenem --container-max: 1240 px, a kontener motywu ma 1860 px
   (zmierzone przy stopce i tam zapisane jako --ts-max). Nagłówek był przez to węższy
   od reszty strony. Bierzemy tę samą zmienną, żeby liczba została w jednym miejscu —
   wartość zapasowa jest tylko na wypadek, gdyby arkusz stopki kiedyś zniknął. */
.hd-1,
.hd-mob,
.hd-szuflada {
  --container-max: var(--ts-max, 1860px);
  --container-pad: var(--ts-pad, 32px);
}
/* ---- zerowanie tego, co dokłada motyw ----
   Makieta nie miała Bootstrapa, sklep ma. Bootstrap nakłada na każdą listę
   margin-bottom: 1rem i padding-left: 2rem — stąd odstęp pod paskiem nawigacji
   i przesunięcie pozycji. Reset tylko w obrębie nagłówka, jak w stopce. */
.hd-1 ul, .hd-mob ul, .hd-szuflada ul,
.hd-1 ol, .hd-mob ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Pasek kategorii bez górnej kreski — pod polem wyszukiwania jest już jego własna
   linia, dwie równoległe robiły się szumem. Dolna zostaje, bo oddziela nagłówek od treści. */
.hd-1 .hd-22 {
  border-top: 0;
  /* Powietrze między wierszem wyszukiwarki a pasem kategorii — wartość z siatki
     systemu (--space-3 = 12 px), nie dobrana na oko. */
  padding-top: var(--space-3);
  /* Najjaśniejszy szary z palety systemu (neutral-3). Domyślny --border-divider
     to neutral-6 — na białym tle czytał się jak kreska konstrukcyjna, a tu chodzi
     tylko o delikatne domknięcie nagłówka. */
  border-bottom-color: var(--neutral-3);
}
/* Kontakt odsunięty do prawej krawędzi paska. Lista musi najpierw zająć całą szerokość
   (domyślnie flex item kurczy się do treści), potem ostatnia pozycja zbiera wolne miejsce. */
.hd-1 .hd-24 { flex: 1; }
.hd-1 .hd-24 > .hd-prawa { margin-left: auto; }
.hd-1 .hd-72 { padding-right: 0; }
/* „Katalog maszyn" jako równoległobok — ścięcie także od lewej, jak w guziku oferty
   i w guzikach pływających ze stopki. Kształt siedzi w ::before, bo clip-path na samym
   elemencie obciąłby też treść. */
.hd-1 .hd-26::before {
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
/* ---- przyciemnienie treści przy otwartym panelu ----
   Zasłona jest rodzeństwem nagłówka i ma niższy z-index niż on, więc ściemnia stronę,
   a nie sam nagłówek. Nie łapie kliknięć dopóki jest przezroczysta; po otwarciu panelu
   łapie, żeby kliknięcie obok panelu go zamykało. */
.hd-zaslona {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--motion-easing);
}
/* Przyciemnienie na pseudo-elemencie, nie na samym elemencie: Safari 26 wyprowadza kolor
   paska stanu iPhone'a z tła elementów fixed przy krawędzi viewportu i próbkuje je NAWET
   przy opacity:0 — a pseudo-elementów nie czyta wcale. Wizualnie zero różnicy. */
.hd-zaslona::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 26, .45);
}
.hd-zaslona.jest-widoczna { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hd-zaslona { transition: none; } }
/* ---- kafle w panelu „Katalog maszyn" — wg makiety Header.dc.html (2026-08-11 13:12) ----
   Tylko tutaj. Panele „Osprzęt i materiały" oraz „Narzędzia ręczne" zostają listami,
   bo mają po kilkanaście pozycji i kafle zrobiłyby z nich ścianę.
   Pierwsza podkategoria rodziny dostaje ciemny kafel z czerwienią marki. */
.hd-1 .hd-pane .hd-36 {
  grid-template-columns: repeat(auto-fill, 190px);
  justify-content: start;
  gap: var(--space-8);
  padding-top: var(--space-2);
}
/* Mgła u dołu jest WARSTWĄ TŁA kafla, nie osobnym elementem. Wcześniej robił to
   `.hd-kf-mgla` z własnym `border-radius` nałożonym na zaokrąglenie kafla — na styku dwóch
   zaokrągleń antyaliasing nie pokrywał się co do piksela i w dolnych rogach prześwitywał
   ciemny gradient kafla (zgłoszenie Magdy 2026-08-14, widoczne na kaflu głównym).
   Przycinania rodzicem użyć nie można: zdjęcie celowo wychodzi 14 px pod kafel. */
.hd-1 .hd-pane .hd-37 {
  position: relative;
  display: block;
  height: 268px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 45%, var(--surface-base) 88%)
      left bottom / 100% 92px no-repeat,
    var(--surface-subtle);
  transition: transform 320ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37:hover { transform: translateY(-6px); }
.hd-1 .hd-pane .hd-37-glowny {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 45%, var(--surface-base) 88%)
      left bottom / 100% 92px no-repeat,
    linear-gradient(338deg, var(--neutral-12) 0%, #31100C 52%, var(--red-9) 100%);
}
.hd-kf-jasno {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(178deg, var(--white) 0%, var(--neutral-3) 100%);
  opacity: 0;
  transition: opacity 380ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37:hover .hd-kf-jasno { opacity: 1; }
.hd-kf-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.hd-kf-glow > span {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -40%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(201, 0, 0, .85) 0%, rgba(201, 0, 0, 0) 70%);
  opacity: 0;
  transform: translateY(24px) scale(.85);
  transition: opacity 380ms var(--motion-easing), transform 380ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37:hover .hd-kf-glow > span { opacity: 1; transform: translateY(0) scale(1); }
.hd-kf-tyt {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px 0;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--text-default);
  transition: color 240ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37:hover .hd-kf-tyt { color: var(--action-primary); }
.hd-1 .hd-pane .hd-37-glowny .hd-kf-tyt,
.hd-1 .hd-pane .hd-37-glowny:hover .hd-kf-tyt { color: var(--text-on-dark-high); }
.hd-kf-kr {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--action-primary);
  transform-origin: left center;
  transform: skewX(var(--angle-brand)) scaleX(0);
  transition: transform 320ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37-glowny .hd-kf-kr { background: var(--white); }
.hd-1 .hd-pane .hd-37:hover .hd-kf-kr { transform: skewX(var(--angle-brand)) scaleX(1); }
/* nazwa rezerwuje dwa wiersze, żeby kreska i zdjęcie stały w każdym kaflu na tej samej wysokości */
.hd-1 .hd-pane .hd-kf-tyt > span:first-child {
  display: block;
  min-height: 2.5em;
}
.hd-1 .hd-pane .hd-kf-img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -14px;
  width: 108%;   /* 124 z makiety wchodziło 15 px na nazwę; 108 daje 16 px prześwitu */
  height: auto;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 16px rgba(29, 29, 26, .2));
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1), filter 320ms var(--motion-easing),
              opacity 320ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-37-glowny .hd-kf-img { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); }
.hd-1 .hd-pane .hd-37:hover .hd-kf-img {
  transform: translateX(-50%) scale(1.03);
  filter: drop-shadow(0 20px 22px rgba(29, 29, 26, .26));
}
.hd-1 .hd-pane .hd-37-glowny:hover .hd-kf-img { filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .5)); }
/* `.hd-kf-mgla` USUNIĘTA 2026-08-14 — mgła jest teraz warstwą tła `.hd-37` (patrz wyżej).
   Znacznik zniknął też z `blok-drzewo.tpl`. */
/* baner rodziny bez podkategorii — slot na zdjęcie kategorii */
.hd-1 .hd-pane .hd-kf-baner {
  position: relative;
  display: block;
  height: 200px;
  border-radius: var(--radius-card);
  background: var(--surface-sunken) center 60%/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
}
.hd-kf-baner-cien {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 13, .78) 0%, rgba(15, 15, 13, .45) 42%, rgba(15, 15, 13, 0) 78%);
}
/* ---- hover banera: ten sam zestaw ruchów co w kaflu produktu ----
   Cztery rzeczy naraz, każda z czasem przepisanym z `.hd-37`: karta unosi się o 6 px (320 ms),
   zdjęcie zbliża o 3 % (420 ms), od dołu wchodzi czerwona poświata (380 ms), kreska pod tytułem
   wjeżdża z lewej (320 ms). Tytuł zostaje biały — tak jak w ciemnym kaflu `.hd-37-glowny`,
   gdzie czerwień z jasnych kafli byłaby nieczytelna. */
.hd-1 .hd-pane .hd-kf-baner { transition: transform 320ms var(--motion-easing); }
.hd-1 .hd-pane .hd-kf-baner:hover { transform: translateY(-6px); }
/* Zdjęcie w osobnej warstwie, bo `background-size: cover` nie animuje się płynnie.
   `background-image: inherit` bierze adres z atrybutu `style` rodzica, więc szablon
   nie musi go powtarzać. Kotwica skali ta sama co kadru tła (60 % wysokości). */
.hd-1 .hd-pane .hd-kf-baner::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: inherit;
  background-position: center 60%;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 50% 60%;
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1);
}
.hd-1 .hd-pane .hd-kf-baner:hover::before { transform: scale(1.03); }
/* poświata przepisana z `.hd-kf-glow > span` co do wartości */
.hd-1 .hd-pane .hd-kf-baner::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -30%;
  right: -30%;
  bottom: -40%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(201, 0, 0, .85) 0%, rgba(201, 0, 0, 0) 70%);
  opacity: 0;
  transform: translateY(24px) scale(.85);
  transition: opacity 380ms var(--motion-easing), transform 380ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-kf-baner:hover::after { opacity: 1; transform: translateY(0) scale(1); }
.hd-kf-baner-tyt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  color: var(--text-on-dark-high);
}
/* kreska wjeżdża z lewej dokładnie jak `.hd-kf-kr` w kaflu — w spoczynku jej nie ma */
.hd-kf-baner-kr {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--white);
  transform-origin: left center;
  transform: skewX(var(--angle-brand)) scaleX(0);
  transition: transform 320ms var(--motion-easing);
}
.hd-1 .hd-pane .hd-kf-baner:hover .hd-kf-baner-kr { transform: skewX(var(--angle-brand)) scaleX(1); }
.hd-kf-baner-nota {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 16px;
  font-family: var(--font-condensed);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
/* ---- wskaźnik ładowania zdjęć ----
   Trzy słupki marki z handoffu „ekran ładowania" (wariant B): 8×26 px, skos pod kątem marki,
   pętla 1,05 s z opóźnieniami 0 / 130 / 260 ms. Pokazywany WYŁĄCZNIE wtedy, gdy któreś zdjęcie
   w widocznym bloku nie jest jeszcze w pamięci przeglądarki — przy zdjęciach z cache JS nie
   dokłada tej klasy w ogóle, więc nie kosztuje ani jednej klatki. */
.hd-wskaznik {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hd-wskaznik > i {
  display: block;
  width: 8px;
  height: 26px;
  background: var(--action-primary);
  animation: hd-slupki 1.05s var(--motion-easing) infinite;
}
.hd-wskaznik > i:nth-child(2) { animation-delay: 130ms; }
.hd-wskaznik > i:nth-child(3) { animation-delay: 260ms; }
@keyframes hd-slupki {
  0%, 70%, 100% { opacity: .2; transform: skewX(var(--angle-brand)) translateY(0); }
  35% { opacity: 1; transform: skewX(var(--angle-brand)) translateY(-8px); }
}
/* Zdjęcia czekają razem i wchodzą razem — inaczej doładowują się jedno po drugim.
   Kotwicą dla wskaźnika jest blok, w którym zdjęcia siedzą. */
.hd-1 .hd-pane,
.hd-szuflada .hd-97 { position: relative; }
.jest-ladowanie .hd-kf-img,
.jest-ladowanie .hd-mob-kafel__img,
.jest-ladowanie .hd-mob-mini,
.jest-ladowanie .hd-kf-baner::before { opacity: 0; }
.hd-mob-kafel__img,
.hd-mob-mini { transition: opacity 320ms var(--motion-easing); }
@media (prefers-reduced-motion: reduce) {
  .hd-wskaznik > i { animation: none; opacity: 1; transform: skewX(var(--angle-brand)); }
  .hd-mob-kafel__img, .hd-mob-mini { transition: none; }
}
/* zdjęcie wychodzi 14 px pod kafel — opis rodziny musi mieć na to zapas
   (reset .hd-1 p{margin:0} zjadał margines z .hd-39) */
.hd-1 .hd-pane .hd-39 { margin-top: var(--space-6); }
/* panele „Osprzęt", „Narzędzia ręczne", „Dokumentacja" i „Serwis" bez szarych przegródek;
   zamiast kreski pozycję wyróżnia szary pasek na najechaniu — jeden wzorzec we wszystkich czterech */
.hd-1 .hd-48 { border-bottom: 0; }
.hd-1 .hd-67 { border-top: 0; }
.hd-1 .hd-67 .hd-32 { margin-left: 8px; vertical-align: 2px; }
.hd-1 .hd-48,
.hd-1 .hd-67 {
  border-radius: var(--radius-control);
  padding-inline: 14px;
  margin-inline: -14px;
  transition: background var(--motion-base) var(--motion-easing),
              color var(--motion-base) var(--motion-easing);
}
.hd-1 .hd-48 { padding-block: 10px; }
.hd-1 .hd-48:hover,
.hd-1 .hd-67:hover { background: var(--surface-subtle); }
/* motyw farbuje a:hover na czerwono — wiersze „Dokumentacji" bronią się własnymi kolorami
   w środku, wiersze listy dziedziczą; ten sam ciemny tekst na hover w obu */
.hd-1 .hd-48:hover { color: var(--text-default); }
/* treść przesuwa się transformem, nie paddingiem — padding przelicza układ w każdej klatce
   i widać to jako szarpnięcie; transform idzie po stronie kompozytora */
.hd-1 .hd-48 > *,
.hd-1 .hd-67 > * { transition: transform var(--motion-base) var(--motion-easing); }
.hd-1 .hd-48:hover > *,
.hd-1 .hd-67:hover > * { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) {
  .hd-1 .hd-pane .hd-37,
  .hd-1 .hd-pane .hd-kf-img,
  .hd-kf-jasno,
  .hd-kf-kr,
  .hd-kf-glow > span,
  .hd-1 .hd-pane .hd-kf-baner,
  .hd-1 .hd-pane .hd-kf-baner::before,
  .hd-1 .hd-pane .hd-kf-baner::after,
  .hd-kf-baner-kr { transition: none; }
  .hd-1 .hd-pane .hd-37:hover { transform: none; }
  .hd-1 .hd-pane .hd-37:hover .hd-kf-img { transform: translateX(-50%); }
  /* baner bez ruchu, ale kreska musi zostać widoczna — inaczej zniknęłaby na stałe */
  .hd-1 .hd-pane .hd-kf-baner:hover { transform: none; }
  .hd-1 .hd-pane .hd-kf-baner:hover::before { transform: none; }
  .hd-kf-baner-kr,
  .hd-1 .hd-pane .hd-kf-baner:hover .hd-kf-baner-kr { transform: skewX(var(--angle-brand)) scaleX(1); }
  .hd-1 .hd-48 > *, .hd-1 .hd-67 > * { transition: none; }
  .hd-1 .hd-48:hover > *, .hd-1 .hd-67:hover > * { transform: none; }
}
/* ---- pola formularzy na mobile: minimum 16 px ----
   Safari na iOS sam przybliża stronę, gdy dotknięte pole ma tekst mniejszy niż 16 px,
   i po wyjściu z pola nie wraca do poprzedniego powiększenia. To zachowanie systemowe,
   nie da się go wyłączyć inaczej niż rozmiarem tekstu (`user-scalable=no` Safari ignoruje).
   Dotyczy każdego pola, nie tylko wyszukiwarki — stąd reguła zbiorcza. */
@media (max-width: 1023px) {
  .hd-1 .hd-17,
  .hd-mob .hd-87,
  .hd-1 input,
  .hd-1 select,
  .hd-1 textarea,
  .hd-mob input,
  .hd-mob select,
  .hd-mob textarea,
  .hd-szuflada input,
  .hd-szuflada select,
  .hd-szuflada textarea { font-size: 16px; }
}
/* Placeholder banera USUNIĘTY 2026-08-14. Szablon renderuje `.hd-kf-baner` wyłącznie w gałęzi
   `{elseif $rodzina.baner}`, więc baner bez zdjęcia nie istnieje i ta reguła nie miała czego
   obsłużyć — za to nadpisywała `background-size` prawdziwego banera na 86 px (skrót `background`
   resetuje rozmiar, a inline style ustawia tylko `background-image`). Zdjęcie wyświetlało się
   jako znaczek na środku pustego pola. Wyszło przy pierwszym wgranym banerze — listwy, kat. 16. */