@charset "UTF-8";
/* ============================================================ */
/* MEGA NAVIGATION - ELEKTRA SKLEP                              */
/* Plik: css/partials/common/mega-nav-g.css                     */
/* Uwaga: dodaj link do tego pliku w szablonie bazowym          */
/* <link rel="stylesheet" href="...mega-nav-g.css">             */
/* ============================================================ */
/* --- RESET DLA KONTENERA ------------------------------------ */
.ekt-nav-li {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
background: transparent !important;
}
.ekt-nav-wrapper,
.ekt-nav-wrapper *,
.ekt-nav-wrapper *::before,
.ekt-nav-wrapper *::after {
box-sizing: border-box !important;
font-family: "Montserrat", Arial, sans-serif !important;
}
.ekt-nav-wrapper ul,
.ekt-nav-wrapper li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
.ekt-nav-wrapper a {
text-decoration: none !important;
outline: none !important;
box-shadow: none !important;
}
/* --- GŁÓWNY WRAPPER ----------------------------------------- */
.ekt-nav-wrapper {
position: relative;
width: 320px;
display: block;
z-index: 10;
}
/* --- PASEK BOCZNY (SIDEBAR) --------------------------------- */
/* WAŻNE: brak position:relative – containing block dla .ekt-mega-panel
i .ekt-sidebar-show-all to .ekt-nav-wrapper (position:relative).
Dzięki temu overflow:hidden na .ekt-sidebar-menu (strona główna)
NIE obcina mega panelu (jego chain zawierający nie przechodzi przez sidebar-menu). */
.ekt-sidebar-menu {
width: 320px;
background-color: #28274d;
display: flex;
flex-direction: column;
}
.ekt-sidebar-list {
display: block !important;
flex: 1;
}
/* Strona główna – spoczynek: ograniczona wysokość + gradient + przycisk "Pokaż wszystkie" */
.home-subcategories-ui .ekt-sidebar-menu {
max-height: 430px;
overflow: hidden;
}
/* Strona główna – hover: rozwiń pełny sidebar i ukryj przycisk "Pokaż wszystkie".
Selector przez .categories-top-ui:hover bo to on wyzwala otwarcie dropdown'a.
.ekt-sidebar-menu nie ma position:relative więc overflow:hidden nie obcina
.ekt-mega-panel (jego containing block to .ekt-nav-wrapper, poza chain clippingu). */
.categories-top-ui:hover .ekt-sidebar-menu {
max-height: none;
overflow: visible;
padding-bottom: 68px;
}
.ekt-sidebar-item {
position: static;
display: block !important;
}
.ekt-sidebar-link {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 11px 18px !important;
color: #e5e7eb !important;
border-bottom: 1px solid #3a3965 !important;
transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
height: auto !important;
}
.ekt-sidebar-link span {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
}
.ekt-arrow-icon {
width: 13px !important;
height: 13px !important;
flex-shrink: 0;
opacity: 0.4;
transition: opacity 0.2s;
}
.ekt-sidebar-item:hover > .ekt-sidebar-link {
background-color: #1a1a3a !important;
color: #ffffff !important;
padding-left: 23px !important;
}
.ekt-sidebar-item:hover > .ekt-sidebar-link .ekt-arrow-icon {
opacity: 1;
}
/* Pozycjonowany względem .ekt-nav-wrapper (containing block po usunięciu
position:relative z .ekt-sidebar-menu). bottom:0 działa poprawnie na
wszystkich stronach: na głównej = dół 460px sidebara, na pozostałych = dół pełnego sidebara. */
.ekt-sidebar-show-all {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background-color: #28274d;
z-index: 2;
}
.ekt-sidebar-show-all::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: linear-gradient(to bottom, rgba(40, 39, 77, 0), #28274d);
pointer-events: none;
z-index: -1;
}
.ekt-sidebar-show-all a {
display: block !important;
padding: 11px 18px !important;
color: #b31c3d !important;
font-size: 10px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-top: 1px solid #3a3965;
transition: all 0.2s;
}
.ekt-sidebar-show-all a:hover {
color: #ffffff !important;
background-color: #b31c3d !important;
padding-left: 23px !important;
}
/* --- MEGA PANEL --------------------------------------------- */
.ekt-mega-panel {
display: none;
position: absolute;
left: 320px;
top: 0;
width: 1050px;
max-width: calc(100vw - 430px);
min-height: 100%;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-left: 3px solid #b31c3d;
box-shadow: 15px 4px 35px rgba(0, 0, 0, 0.12);
padding: 30px 30px 0 30px !important;
z-index: 100;
flex-direction: column;
animation: ektFadeIn 0.18s ease-out;
}
@keyframes ektFadeIn {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ekt-sidebar-item:hover > .ekt-mega-panel {
display: flex !important;
}
/* --- PRZYCISK DORADCY --------------------------------------- */
.ekt-advisor-square {
position: absolute;
top: -1px;
right: -101px;
width: 100px;
height: 100px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-left: none;
border-radius: 0 6px 6px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 15;
box-shadow: 8px 4px 18px rgba(0, 0, 0, 0.07);
}
.ekt-advisor-square:hover {
background-color: #b31c3d !important;
border-color: #b31c3d !important;
}
.ekt-advisor-square > svg {
width: 28px !important;
height: 28px !important;
stroke: #28274d;
fill: none;
stroke-width: 1.5;
margin-bottom: 7px;
transition: stroke 0.3s ease;
}
.ekt-advisor-square:hover > svg {
stroke: #ffffff;
}
.ekt-advisor-square > span {
font-size: 9px !important;
font-weight: 800 !important;
color: #28274d !important;
text-transform: uppercase !important;
text-align: center !important;
line-height: 1.3 !important;
transition: color 0.3s ease;
}
.ekt-advisor-square:hover > span {
color: #ffffff !important;
}
/* --- ZAKŁADKI (CSS-ONLY TABS) ------------------------------- */
.ekt-tab-radio {
display: none !important;
position: absolute !important;
}
.ekt-tabs-nav {
display: flex;
position: relative;
margin-bottom: 22px !important;
border-bottom: 2px solid #e5e7eb;
flex-shrink: 0;
}
.ekt-tab-label {
flex: 1;
text-align: center !important;
padding: 0 16px 16px 16px !important;
font-size: 14px !important;
font-weight: 800 !important;
color: #9ca3af !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
cursor: pointer;
transition: color 0.25s ease;
user-select: none;
margin: 0 !important;
line-height: 1;
}
.ekt-tab-label:hover {
color: #4b5563 !important;
}
.ekt-tab-radio:nth-of-type(1):checked ~ .ekt-tabs-nav .ekt-tab-label:nth-of-type(1),
.ekt-tab-radio:nth-of-type(2):checked ~ .ekt-tabs-nav .ekt-tab-label:nth-of-type(2) {
color: #b31c3d !important;
}
.ekt-tab-indicator {
position: absolute;
bottom: -2px;
left: 0;
height: 3px;
width: 50%;
background-color: #b31c3d;
transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
border-radius: 2px 2px 0 0;
}
.ekt-tab-radio:nth-of-type(1):checked ~ .ekt-tabs-nav .ekt-tab-indicator {
transform: translateX(0);
}
.ekt-tab-radio:nth-of-type(2):checked ~ .ekt-tabs-nav .ekt-tab-indicator {
transform: translateX(100%);
}
.ekt-tabs-viewport {
overflow: hidden;
width: 100%;
position: relative;
flex: 1;
}
.ekt-tabs-track {
display: flex;
width: 200%;
transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}
.ekt-tab-slide {
width: 50%;
flex-shrink: 0;
}
.ekt-tab-radio:nth-of-type(1):checked ~ .ekt-tabs-viewport .ekt-tabs-track {
transform: translateX(0);
}
.ekt-tab-radio:nth-of-type(2):checked ~ .ekt-tabs-viewport .ekt-tabs-track {
transform: translateX(-50%);
}
/* --- SIATKA PODKATEGORII ------------------------------------ */
.ekt-clean-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px 32px;
margin-bottom: 24px !important;
align-items: start;
width: 100%;
}
.ekt-producers-grid {
grid-template-columns: repeat(6, 1fr);
gap: 8px 16px;
}
.ekt-sub-group {
display: flex;
flex-direction: column;
width: 100%;
}
/* --- NAGŁÓWEK PODKATEGORII ---------------------------------- */
.ekt-sub-header {
display: flex !important;
align-items: center;
gap: 8px;
margin-bottom: 12px !important;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 7px !important;
color: inherit !important;
}
.ekt-sub-icon {
width: 20px !important;
height: 20px !important;
flex-shrink: 0;
stroke: #b31c3d;
fill: none;
stroke-width: 2;
transition: transform 0.25s;
}
.ekt-sub-header strong {
font-size: 14px !important;
font-weight: 800 !important;
color: #28274d !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
transition: color 0.25s;
letter-spacing: 0.2px !important;
}
.ekt-sub-group:hover .ekt-sub-header .ekt-sub-icon {
transform: scale(1.12);
}
.ekt-sub-group:hover .ekt-sub-header strong {
color: #b31c3d !important;
}
/* --- LISTA POZYCJI PODKATEGORII ----------------------------- */
.ekt-sub-list {
display: block !important;
}
.ekt-sub-group.two-cols {
grid-column: span 2;
}
.ekt-sub-group.two-cols .ekt-sub-list {
column-count: 2;
column-gap: 20px;
}
.ekt-sub-list a {
font-size: 11px !important;
font-weight: 600 !important;
color: #4b5563 !important;
text-transform: uppercase !important;
transition: color 0.18s ease;
line-height: 1.35 !important;
display: flex !important;
align-items: flex-start;
gap: 8px;
margin-bottom: 7px !important;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
padding: 0 !important;
}
.ekt-sub-list a:last-child {
margin-bottom: 0 !important;
}
.ekt-sub-list a::before {
content: "";
width: 4px;
height: 4px;
background-color: #b31c3d;
border-radius: 50%;
opacity: 0.45;
transition: opacity 0.18s;
flex-shrink: 0;
margin-top: 5px;
}
.ekt-sub-list a:hover {
color: #b31c3d !important;
}
.ekt-sub-list a:hover::before {
opacity: 1;
}
/* Dla grup-liść (producenci) – uproszczony wygląd */
.ekt-leaf-group .ekt-sub-header {
border-bottom: none;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.ekt-leaf-group .ekt-sub-header .ekt-sub-icon {
display: none !important;
}
.ekt-leaf-group .ekt-sub-header strong {
font-size: 14px !important;
font-weight: 600 !important;
color: #4b5563 !important;
text-transform: none !important;
}
.ekt-leaf-group .ekt-sub-header:hover strong {
color: #b31c3d !important;
}
/* --- DOLNA BELKA PROMOCYJNA --------------------------------- */
.ekt-bottom-features {
margin-top: auto !important;
margin-left: -30px !important;
margin-right: -30px !important;
display: flex;
background-color: #e5e7eb;
border-top: 1px solid #d1d5db;
gap: 1px;
flex-shrink: 0;
}
.ekt-bottom-feature-item {
flex: 1;
background-color: #f9fafb;
padding: 17px 14px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all 0.28s ease;
}
.ekt-bottom-feature-item:hover {
background-color: #28274d;
}
.ekt-bottom-feature-item > svg {
flex-shrink: 0;
stroke: #374151;
fill: none;
stroke-width: 2;
transition: all 0.28s ease;
}
.ekt-bottom-feature-item:hover > svg {
stroke: #b31c3d;
transform: scale(1.1);
}
.ekt-bottom-text {
display: flex;
flex-direction: column;
}
.ekt-bottom-feature-item strong {
font-size: 13px !important;
font-weight: 800 !important;
color: #111827 !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
transition: color 0.28s ease;
}
.ekt-bottom-feature-item span {
font-size: 11px !important;
color: #6b7280 !important;
margin-top: 2px !important;
font-weight: 500 !important;
transition: color 0.28s ease;
line-height: 1.2 !important;
flex: none !important;
align-self: flex-start !important;
}
.ekt-bottom-feature-item:hover strong {
color: #ffffff !important;
}
.ekt-bottom-feature-item:hover span {
color: rgba(255, 255, 255, 0.8) !important;
}
/* --- NADPISANIE KONFLIKTUJĄCYCH STYLI ISTNIEJĄCEGO CMS ------ */
.header-categories-ui .manufacturer-container-ui .categories-top-ui .subcategories-ui > li.ekt-nav-li {
background: transparent !important;
width: 320px !important;
height: auto !important;
padding: 0 !important;
}
.header-categories-ui .manufacturer-container-ui .categories-top-ui .subcategories-ui > li.ekt-nav-li:hover {
background: transparent !important;
}