/* =============================================================================
MENU KATEGORII JAK KIOSK (css/menu-kiosk.css) - 2026-10-01
Działa z js/menu-kiosk.js (klasa html.kiosk-on), tylko do 768 px.
Pasek „Producent” (.kiosk-prod) jest nad kioskiem.
========================================================================== */
.kiosk, .kiosk-prod { display: none; }
@media (max-width: 768px) {
/* stare menu zostaje w kodzie (dane dla kiosku), ale go nie widać */
.kiosk-on .headerSection__categories__mobile nav.mainCategories { display: none !important; }
.kiosk {
display: flex;
width: 100%;
height: 520px;               /* skrypt dopasowuje do wysokości ekranu */
margin: 8px 0 12px;
border: 1px solid #ececec;
border-radius: 16px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
/* ── lewy pasek kategorii ─────────────────────────────────────────── */
.kiosk-szyna {
flex: 0 0 96px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: #f4f5f6;
border-right: 1px solid #ececec;
}
.kiosk-szyna::-webkit-scrollbar { display: none; }
.kiosk-szyna__poz {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
min-height: 92px;
padding: 12px 6px 10px;
border: 0;
border-bottom: 1px solid #e8e8e8;
background: transparent;
color: #333;
font: inherit;
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.kiosk-szyna__poz img {
width: 58px; height: 58px; padding: 4px; box-sizing: border-box;
object-fit: contain; background: #fff; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
transition: transform .15s;
}
.kiosk-szyna__poz span { display: block; overflow-wrap: anywhere; hyphens: auto; }
.kiosk-szyna__poz[aria-selected="true"] { background: #fff; color: #e20000; }
.kiosk-szyna__poz[aria-selected="true"]::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #e20000;
}
.kiosk-szyna__poz[aria-selected="true"] img { transform: scale(1.08); box-shadow: 0 0 0 2px #e20000; }
.kiosk-szyna__poz:active { background: #fff; }
/* ── prawa część: kafelki ─────────────────────────────────────────── */
.kiosk-scena {
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: #fff;
}
.kiosk-scena { position: relative; }
/* zmiana producenta: kiosk przygasa z paskiem postępu, po przygotowaniu wraca płynnie (js/menu-kiosk.js) */
.kiosk { position: relative; transition: opacity .2s ease; }
.kiosk.kiosk-zmiana { opacity: .55; pointer-events: none; }
.kiosk.kiosk-zmiana::before {
content: ""; position: absolute; z-index: 5; top: 0; left: 0; height: 3px; width: 35%;
border-radius: 3px; background: #e20000; animation: kiosk-postep 1s ease-in-out infinite;
}
@keyframes kiosk-postep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.kiosk-prod__chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kiosk-ekran { position: relative; z-index: 1; padding: 12px 12px 20px; transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .24s ease; will-change: transform, opacity; }
.kiosk-wjazd-prawo { transform: translateX(56px); opacity: 0; transition: none; }
.kiosk-wjazd-lewo { transform: translateX(-56px); opacity: 0; transition: none; }
/* poprzedni ekran: zostaje na miejscu i odjeżdża / zanika (js/menu-kiosk.js, pokaz) */
.kiosk-ekran.kiosk-wyjazd { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }
.kiosk-wyjazd.kiosk-wyjazd-prawo { transform: translateX(-28%); opacity: 0; }
.kiosk-wyjazd.kiosk-wyjazd-lewo { transform: translateX(28%); opacity: 0; }
.kiosk-wyjazd.kiosk-wyjazd-gora { opacity: 0; transition-duration: .16s; }
.kiosk-wjazd-gora { transform: translateY(14px); opacity: 0; transition: none; }
.kiosk-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.kiosk-glowa__tytul {
flex: 1 1 100%;
order: 2;
margin: 0 !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.2;
color: #1a1a1a;
text-align: left;
}
.kiosk-wstecz {
order: 1;
border: 0; background: #f4f5f6; border-radius: 999px;
padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #333; cursor: pointer;
}
.kiosk-wszystkie {
order: 3;
display: inline-flex; align-items: center;
padding: 7px 12px; border-radius: 999px;
background: #e20000; color: #fff !important;
font-size: 13px; font-weight: 700; text-decoration: none !important;
}
.kiosk-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kiosk-kafel {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 128px;
padding: 12px 6px 10px;
border: 1px solid #ececec;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
color: #1a1a1a !important;
font: inherit;
text-align: center;
text-decoration: none !important;
cursor: pointer;
box-sizing: border-box;
transition: transform .1s ease, box-shadow .15s ease;
-webkit-tap-highlight-color: transparent;
}
.kiosk-kafel:active { transform: scale(.97); box-shadow: 0 0 0 2px #e20000 inset; }
.kiosk-kafel__foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 88px; }
.kiosk-kafel__foto img { width: 100%; height: 88px; object-fit: contain; }
.kiosk-kafel__foto--brak { display: none; }
.kiosk-kafel__nazwa { font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
/* trzeci poziom - kafelki z samym tekstem */
.kiosk-siatka--tekst .kiosk-kafel,
.kiosk-kafel--tekst {
min-height: 72px;
justify-content: center;
background: #fff;
border-color: #e3e3e3;
}
.kiosk-siatka--tekst .kiosk-kafel__nazwa { font-size: 14px; }
/* ── pasek „Producent” nad kioskiem ────────────────────────────────── */
.kiosk-prod {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 2px 0 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kiosk-prod::-webkit-scrollbar { display: none; }
.kiosk-prod[hidden] { display: none; }
.kiosk-prod__etyk { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #777; }
.kiosk-prod__chip {
flex: 0 0 auto;
height: 34px;
margin: 0;
padding: 0 13px;
border: 1px solid #dedede;
border-radius: 999px;
background: #fff;
color: #222;
font: inherit;
font-size: 13px;
font-weight: 700;
line-height: 32px;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.kiosk-prod__chip[aria-pressed="true"] { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
select.kiosk-prod__chip {
-webkit-appearance: none;
appearance: none;
width: auto;
padding-right: 28px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
}
.kiosk-glowa__marka {
order: 4;
display: inline-flex; align-items: center;
padding: 6px 10px; border-radius: 999px;
background: #f4f5f6; color: #333;
font-size: 12px; font-weight: 700;
}
/* tryb producenta: kategorie bez jego produktów znikają, zdjęcia się doczytują */
.kiosk-szyna__poz[hidden], .kiosk-kafel[hidden], .kiosk-szyna__poz img[hidden] { display: none !important; }
.kiosk-laduje img { opacity: .3; }
.kiosk-szyna__poz img, .kiosk-kafel__foto img { transition: opacity .2s; }
.kiosk-pusto { margin: 16px 4px; color: #666; font-size: 14px; line-height: 1.4; text-align: center; }
/* stare przyciski „Produkty Husqvarna” / „Części Husqvarna” nad przełącznikiem */
.headerSection__mainMenu__navLinks .headerSection__pages__other { display: none !important; }
/* szersze ekrany (tablet pionowo): 3 kolumny */
@media (min-width: 520px) {
.kiosk-szyna { flex-basis: 112px; }
.kiosk-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
}
@media (prefers-reduced-motion: reduce) {
.kiosk-ekran, .kiosk-kafel, .kiosk-szyna__poz img, .kiosk-kafel__foto img { transition: none !important; }
}
/* ── bez szarej ramki po kliknięciu (02.10) ───────────────────────────────────
Przełącznik „Produkty / Części” w menu: przy wciśnięciu robił się szary (custom.css :active),
a aktywny miał białą dolną krawędź. Kafelki podkategorii na liście: szara obwódka sklepu
(layout2: :has(a:focus)) po kliknięciu - zostaje tylko dla klawiatury (:focus-visible). */
html body .mobileCategorySwitcher__btn { -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background-color .15s ease; }
html body .mobileCategorySwitcher__btn:active { background: #f2f2f2; transform: scale(.98); }
html body .mobileCategorySwitcher__btn.is-active,
html body .mobileCategorySwitcher__btn.is-active:active { background: #1a1a1a; border-color: #1a1a1a !important; }
html body .mobileCategorySwitcher__btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
html body .mobileCategorySwitcher__btn:focus-visible { outline: 2px solid #e20000; outline-offset: 2px; }
html body .productsList__products--top-subcategories-container-data:has(a:focus:not(:focus-visible)),
html body .productsList__products--top-subcategories-container-data:has(a:active) { outline: none !important; }