/* =============================================================================
MEGA-MENU KATEGORII NA KOMPUTERZE (css/menu-desktop.css) - 2026-10-01
Działa z js/menu-desktop.js (klasa html.mm-on), od 769 px.
Pasek „Produkty” / „Części zamienne” + panel: kategorie po lewej,
kolumny podkategorii ze zdjęciami po prawej, filtr producenta.
========================================================================== */
.mm, .mm-tlo { display: none; }
@media (min-width: 769px) {
/* stara siatka ikon zostaje w kodzie jako źródło danych */
.mm-on .headerSection__categories__desktop nav.mainCategories { display: none !important; }
/* miejsce na pasek od pierwszego wyświetlenia strony (bez skoku układu) */
.mm-on .headerSection__categories__desktop { min-height: 130px; }
.mm {
display: block;
position: relative;
flex: 0 0 100%;
width: 100%;
z-index: 1001;
}
/* ── pasek z wejściami: przełącznik segmentowy ──────────────────────── */
.mm-bar {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 12px;
}
.mm-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
height: 42px;
margin: 0;
padding: 0 16px 0 14px;
border: 1px solid #e6e7ea;
border-radius: 12px;
background: #f3f4f6;
color: #2b2b2b;
font: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: .1px;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s, color .15s, box-shadow .15s;
}
.mm-tab:hover { background: #fff; border-color: #d9dbe0; color: #1a1a1a; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.mm-tab.is-active { background: #fff; border-color: #d9dbe0; color: #1a1a1a; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.mm-tab:focus-visible { outline: 2px solid #e20000; outline-offset: 2px; }
.mm-tab__ikona { width: 20px; height: 20px; flex: 0 0 20px; color: #e20000; }
.mm-tab__strzalka {
width: 8px;
height: 8px;
margin-left: 2px;
border-right: 2px solid #9a9a9a;
border-bottom: 2px solid #9a9a9a;
font-size: 0;
transform: translateY(-2px) rotate(45deg);
transition: transform .2s, border-color .15s;
}
.mm-tab:hover .mm-tab__strzalka, .mm-tab.is-active .mm-tab__strzalka { border-color: #e20000; }
.mm-tab.is-active .mm-tab__strzalka { transform: translateY(2px) rotate(-135deg); }
/* czerwony znacznik pod aktywną zakładką */
.mm-tab.is-active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: #e20000;
}
/* ── panel ───────────────────────────────────────────────────────────── */
.mm-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
max-height: 70vh;
background: #fff;
border: 1px solid #ececec;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
overflow: hidden;
text-align: left;
animation: mm-wjazd .16s ease-out;
}
.mm-panel[hidden] { display: none; }
@keyframes mm-wjazd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* lewa kolumna: kategorie grupy */
.mm-rail {
overflow-y: auto;
padding: 10px;
background: #f6f7f8;
border-right: 1px solid #eee;
scrollbar-width: thin;
}
.mm-rail__poz {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 10px;
border-radius: 12px;
color: #222 !important;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-decoration: none !important;
}
.mm-rail__poz[hidden] { display: none; }
.mm-rail__img {
flex: 0 0 44px;
width: 44px;
height: 44px;
padding: 3px;
object-fit: contain;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
box-sizing: border-box;
}
.mm-rail__img[hidden] { display: none; }
.mm-rail__nazwa { flex: 1 1 auto; }
.mm-rail__strzalka { color: #b5b5b5; font-size: 18px; }
.mm-rail__poz:hover { background: #eceef0; }
.mm-rail__poz[aria-selected="true"] { background: #fff; color: #e20000 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.mm-rail__poz[aria-selected="true"] .mm-rail__strzalka { color: #e20000; }
.mm-rail__poz:focus-visible { outline: 2px solid #e20000; outline-offset: -2px; }
/* prawa część */
.mm-main { overflow-y: auto; padding: 18px 24px 24px; scrollbar-width: thin; }
.mm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.mm-head__tytul { font-size: 22px; font-weight: 800; color: #1a1a1a !important; text-decoration: none !important; }
.mm-head__tytul:hover { color: #e20000 !important; }
.mm-head__marka { padding: 5px 10px; border-radius: 999px; background: #f4f5f6; font-size: 12px; font-weight: 700; color: #333; }
.mm-head__wszystkie {
margin-left: auto;
padding: 8px 14px;
border-radius: 999px;
background: #e20000;
color: #fff !important;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
}
.mm-head__wszystkie:hover { background: #b80000; }
/* filtr producenta */
.mm-filtr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #eee; }
.mm-filtr[hidden] { display: none; }
.mm-filtr__etyk { font-size: 12.5px; font-weight: 700; color: #777; }
.mm-chip {
height: 30px;
margin: 0;
padding: 0 12px;
border: 1px solid #dedede;
border-radius: 999px;
background: #fff;
color: #222;
font: inherit;
font-size: 12.5px;
font-weight: 700;
line-height: 28px;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
}
.mm-chip:hover { border-color: #1a1a1a; }
.mm-chip[aria-pressed="true"] { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
select.mm-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;
}
/* kolumny podkategorii */
.mm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 26px; }
.mm-col[hidden] { display: none; }
.mm-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #1a1a1a !important; text-decoration: none !important; }
.mm-col__img {
flex: 0 0 56px;
width: 56px;
height: 56px;
padding: 3px;
object-fit: contain;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
box-sizing: border-box;
transition: transform .15s ease, border-color .15s;
}
.mm-col__img[hidden] { display: none; }
.mm-col__nazwa { font-size: 15px; font-weight: 700; line-height: 1.25; }
.mm-col__head:hover .mm-col__nazwa { color: #e20000; }
.mm-col__head:hover .mm-col__img { transform: scale(1.05); border-color: #e20000; }
.mm-col__lista { list-style: none; margin: 0; padding: 0 0 0 66px; }
.mm-col__lista li { margin: 0; padding: 0; }
.mm-col__lista li[hidden], .mm-col__nadmiar { display: none; }
.mm-col.is-rozwiniete .mm-col__nadmiar { display: list-item; }
.mm-col.is-rozwiniete .mm-col__nadmiar[hidden] { display: none; }
.mm-col__lista a { display: inline-block; padding: 3px 0; font-size: 13.5px; line-height: 1.35; color: #555 !important; text-decoration: none !important; }
.mm-col__lista a:hover, .mm-col__lista a:focus-visible { color: #e20000 !important; text-decoration: underline !important; }
.mm-col__wiecej { margin: 4px 0 0 66px; padding: 0; border: 0; background: none; color: #e20000; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mm-col__wiecej:hover { text-decoration: underline; }
.mm-pusto { grid-column: 1 / -1; margin: 10px 0; color: #666; font-size: 14px; }
.mm-laduje img { opacity: .35; }
.mm-rail__img, .mm-col__img { transition: opacity .2s; }
/* przyciemnione tło pod panelem */
.mm-tlo {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, .35);
opacity: 0;
pointer-events: none;
transition: opacity .18s;
}
.mm-otwarte .mm-tlo { opacity: 1; pointer-events: auto; }
.mm-otwarte .headerSection { position: relative; z-index: 1001; }
}
@media (min-width: 769px) and (max-width: 1100px) {
.mm-panel { grid-template-columns: 240px minmax(0, 1fr); }
.mm-cols { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* ── Przyciski „Produkty Husqvarna” / „Części Husqvarna” / promocje w nagłówku ──
(linki z szablonu nagłówka mają style w atrybucie style - nadpisujemy je tutaj) */
@media (min-width: 769px) {
/* promocje w pierwszej linii, przyciski Husqvarna pod nimi - po lewej stronie logo,
bez zmiany wysokości nagłówka (wysokość 28 px, druga linia wychodzi poza blok) */
.headerSection__mainMenu__navLinks > div[style*="gap:30px"] {
display: grid !important;
grid-template-columns: auto auto;
justify-content: start;
align-items: center !important;
gap: 6px 8px !important;
height: 28px;
margin-top: -8px;
}
.headerSection__mainMenu__navLinks > div[style*="gap:30px"] > .headerSection__pages__other:first-child { grid-column: 1 / -1; }
.headerSection__mainMenu__navLinks .headerSection__pages__other { margin-right: 0 !important; border: 0 !important; width: auto !important; display: inline-flex !important; }
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"], .headerSection__pages__other > a[href*="aktualne-oferty"]) {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 13px 0 10px;
border-radius: 999px;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .1px;
white-space: nowrap;
text-decoration: none !important;
box-sizing: border-box;
transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"], .headerSection__pages__other > a[href*="aktualne-oferty"])::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
background: currentColor;
-webkit-mask: var(--hq-ikona) center / contain no-repeat;
mask: var(--hq-ikona) center / contain no-repeat;
}
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"], .headerSection__pages__other > a[href*="aktualne-oferty"]):focus-visible { outline: 2px solid #e20000; outline-offset: 2px; }
.headerSection__pages__other > a[href*="husqvarna,40"] {
background: #273a60;
border: 1.5px solid #273a60;
color: #fff !important;
--hq-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11l3 5h3v4h-2'/%3E%3Cpath d='M3 7v9h3'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M10 17h5'/%3E%3C/svg%3E");
}
.headerSection__pages__other > a[href*="husqvarna,40"]:hover { background: #1b2a47; border-color: #1b2a47; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39, 58, 96, .25); }
.headerSection__pages__other > a[href*="husqvarna_katalog,37"] {
background: #fff;
border: 1.5px solid #273a60;
color: #273a60 !important;
--hq-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
}
.headerSection__pages__other > a[href*="husqvarna_katalog,37"]:hover { background: #273a60; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39, 58, 96, .25); }
.headerSection__pages__other > a[href*="aktualne-oferty"] {
height: auto;
padding: 0;
color: #273a60 !important;
--hq-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}
.headerSection__pages__other > a[href*="aktualne-oferty"]::before { background: #f35b04; }
.headerSection__pages__other > a[href*="aktualne-oferty"]:hover { text-decoration: underline !important; }
}
/* węższe ekrany: przyciski Husqvarna bez ikon, żeby nie wchodziły pod logo */
@media (min-width: 769px) and (max-width: 1000px) {
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"])::before { display: none; }
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"]) { padding: 0 11px; font-size: 12px !important; }
}
@media (min-width: 769px) and (max-width: 860px) {
.headerSection__mainMenu__navLinks > div[style*="gap:30px"] { gap: 6px 6px !important; }
:is(.headerSection__pages__other > a[href*="husqvarna,40"], .headerSection__pages__other > a[href*="husqvarna_katalog,37"]) { padding: 0 8px; font-size: 11px !important; letter-spacing: 0; }
}
/* ── Szkielet zamiast ikony do czasu wczytania zdjęcia produktu (kafelki, kiosk, mega-menu) ──
.bs-czeka: obrazek jest w layoucie, ale jego treść (np. ikona sklepu) jest schowana poza ramką */
img.bs-czeka {
object-position: -99999px -99999px !important;
background: linear-gradient(90deg, #f1f2f4 25%, #e6e7ea 37%, #f1f2f4 63%) 0 0 / 400% 100% !important;
animation: bs-szkielet 1.3s ease infinite;
border-radius: 12px;
}
@keyframes bs-szkielet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.kiosk-laduje img.bs-czeka, .mm-laduje img.bs-czeka { opacity: 1 !important; }
/* ── Kafelki podkategorii nad listą produktów (js/kafle-kategorii.js) - telefon i komputer ── */
/* ikony nie migają przed podmianą na zdjęcia; gdyby skrypt nie zadziałał, pokażą się po 3 s */
.productsList__products--top-subcategories-container:not(.kk-gotowe) .productsList__products--top-subcategories-container-data-image {
visibility: hidden;
animation: kk-pokaz 0s 3s forwards;
}
@keyframes kk-pokaz { to { visibility: visible; } }
/* bez szarej ramki / podświetlenia po kliknięciu w kategorię (zostaje obwódka dla klawiatury) */
.productsList__products--top-subcategories-container-data a,
.mm a, .mm button, .kiosk a, .kiosk button, .kiosk-prod button,
.headerSection .category-link, .headerSection .sub-category-link { -webkit-tap-highlight-color: transparent; }
.productsList__products--top-subcategories-container-data a:focus:not(:focus-visible),
.mm a:focus:not(:focus-visible), .mm button:focus:not(:focus-visible),
.kiosk a:focus:not(:focus-visible), .kiosk button:focus:not(:focus-visible),
.headerSection .category-link:focus:not(:focus-visible), .headerSection .sub-category-link:focus:not(:focus-visible) { outline: none !important; box-shadow: none; }
.productsList__products--top-subcategories-container-data a:active,
.productsList__products--top-subcategories-container-data a:focus { background: transparent !important; }
.productsList__products--top-subcategories-container-data[hidden] { display: none !important; }
img.productsList__products--top-subcategories-container-data-image.kk-foto {
width: 150px !important;          /* stały kwadrat - zdjęcia mają różne proporcje */
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain;
padding: 8px;
background: #fff;
border: 1px solid #ececec;
border-radius: 16px;
box-sizing: border-box;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.productsList__products--top-subcategories-container-data a:hover img.kk-foto {
transform: translateY(-2px);
border-color: #e20000;
box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
/* ── Ścieżka kategorii (breadcrumbs) - lepsza widoczność ── */
.breadcrumbs-wrapper { background: #fff !important; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
ul.breadcrumbs { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 !important; padding: 9px 0 !important; font-size: 14px !important; line-height: 1.3; }
.breadcrumbs .breadcrumbs__piece { display: inline-flex !important; align-items: center; margin: 0 !important; color: #1a1a1a !important; font-size: 14px !important; }
.breadcrumbs .breadcrumbs__piece > a { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: #3a3a3a !important; font-weight: 600 !important; text-decoration: none !important; transition: background-color .15s, color .15s; }
.breadcrumbs .breadcrumbs__piece > a:hover, .breadcrumbs .breadcrumbs__piece > a:focus-visible { background: #f2f3f5; color: #e20000 !important; }
.breadcrumbs .separator { font-size: 0 !important; margin: 0 1px !important; color: transparent !important; }
.breadcrumbs .separator::before { content: "›"; font-size: 17px; font-weight: 400; color: #a5a5a5; }
.breadcrumbs .breadcrumbs__piece--previous { display: none !important; }
.breadcrumbs .breadcrumbs__piece--last { padding: 5px 12px !important; border-radius: 999px; background: #fdeaea; color: #c00000 !important; font-weight: 800 !important; }
@media (max-width: 768px) {
ul.breadcrumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 7px 0 !important; font-size: 13px !important; }
ul.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs .breadcrumbs__piece, .breadcrumbs .breadcrumbs__piece > a { font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
img.bs-czeka { animation: none; }
.mm-panel { animation: none; }
.mm-tab__strzalka, .mm-col__img, .mm-tlo { transition: none !important; }
.headerSection__pages__other > a { transition: none !important; }
img.kk-foto { transition: none !important; }
}
/* 2026-10-02: kafelki podkategorii na telefonie - sklep układa je w wiersze o wysokości ~90 px
(zdjęcie po lewej, nazwa po prawej); kwadrat 150 px wychodził poza wiersz i nachodził na kolejne */
@media (max-width: 768px) {
img.productsList__products--top-subcategories-container-data-image.kk-foto {
width: 84px !important;
height: 84px !important;
max-width: 84px !important;
aspect-ratio: auto;
padding: 5px;
border-radius: 12px;
}
.productsList__products--top-subcategories-container-data a > div { flex: 0 0 auto; width: auto !important; }
}
.mm,
.mm-bar {
pointer-events: none;
}
.mm-bar > *,
.mm-panel {
pointer-events: auto;
}