/* ===== Strona "Konfiguratory": rowna siatka kafelkow ===== */
.configurators.flex-container {
max-width: 1080px;
margin: 25px auto 50px;
padding: 0 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
justify-items: stretch;
}
.configurators.flex-container .configurator {
margin: 0;
line-height: 0;
}
.configurators.flex-container .configurator a {
display: block;
height: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.configurators.flex-container .configurator a:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
transform: translateY(-3px);
}
.configurators.flex-container .configurator img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (max-width: 420px) {
.configurators.flex-container {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
/* ===== Lista produktow: nazwa produktu w max 4 linijkach ===== */
.product-item:not(.product-item-pl) .product-item__description p:first-child,
.product-item:not(.product-item-pl) .product-item__description h2 {
white-space: normal;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
/* padding-bottom przeniesiony na margin — przy line-clamp
przycieta 5. linia przeswituje w obszarze paddingu */
padding-bottom: 0;
}
.product-item:not(.product-item-pl) .product-item__description p:first-child {
margin-bottom: 10px;
}
.product-item:not(.product-item-pl) .product-item__description h2 {
margin-bottom: 15px;
}
/* Kafelki tile-3 (product-item-third) — nazwa produktu wraca do <h2>
(skrypty layoutu, m.in. setTilesInformations po filtrowaniu, szukaja h2),
ale ostylowana jak zwykly <p> — jak nazwa w partials/product-item.html.
Selektory z gridView/listView potrzebne, by nadpisac bazowe reguly
layout2 (16px/600/letter-spacing 1.8px, clamp 2 w grid i 1 w liscie) */
.product-item-third .product-item__description h2,
.productsList__gridView-js .product-item-third .product-item__description h2,
.product-list__gridView-js .product-item-third .product-item__description h2,
.productsList__listView-js .product-item-third .product-item__description h2,
.product-list__listView-js .product-item-third .product-item__description h2 {
width: 100%;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: normal;
color: #191616;
padding: 0;
margin: 8px 0 16px;
white-space: normal;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
max-height: 96px; /* 4 x 24px linii */
}
@media only screen and (max-width: 768px) {
.product-item-third .product-item__description h2,
.productsList__gridView-js .product-item-third .product-item__description h2,
.product-list__gridView-js .product-item-third .product-item__description h2,
.productsList__listView-js .product-item-third .product-item__description h2,
.product-list__listView-js .product-item-third .product-item__description h2 {
font-size: 12px;
}
.headerSection__searchForm.mobileSearch .searchForm__searchAutocomplete {
top: 118px;
}
}
/* placeholder ma sztywna wysokosc na desktopie — +48px na 2 dodatkowe linie */
@media only screen and (min-width: 769px) {
.productsList__gridView-js .product-item__placeholder,
.product-list__gridView-js .product-item__placeholder {
height: 548px;
}
.productsList__gridView-js .product-item__placeholder.withGraphicalVariants,
.product-list__gridView-js .product-item__placeholder.withGraphicalVariants {
height: 668px;
}
.productsList__gridView-js .product-item__placeholder.withColorVariants,
.product-list__gridView-js .product-item__placeholder.withColorVariants {
height: 568px;
}
}
/* ===== Karta produktu: additionalInfo przeniesiony z sekcji galerii
do info-container — bazowy position:absolute + bottom:0 + margin -50px
pozycjonowal go pod galeria w starym miejscu, przez co w nowym
znikal pod sekcja opisu ===== */
.product-details__info-container .product-details__additionalInfo {
position: static;
margin: 0 0 15px;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
}
/* info-container ma wlasne reguly na .stock-label/.availability-label/.value/
.delivery-cost-container (18px, bold, 31px marginesu) — przywracamy
typografie paska z poprzedniego miejsca (12px, secondaryFontColor) */
.product-details__info-container .product-details__additionalInfo .stock-label,
.product-details__info-container .product-details__additionalInfo .availability-label {
color: #73767A;
font-size: 12px;
font-weight: 700;
}
.product-details__info-container .product-details__additionalInfo .value {
font-size: 12px;
}
/* other-options przeniesione do sekcji galerii (.product-details__images) —
na malych ekranach sekcja jest full-width bez bocznych paddingow,
a space-between rozpycha przyciski do krawedzi; wyrownujemy uklad */
@media only screen and (max-width: 768px) {
.product-details__images .product-details__other-options {
padding: 15px 10px;
margin-top: 10px;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
row-gap: 5px;
}
.product-details__images .product-details__other-options .product-details__other-option {
flex: 1 1 0;
min-width: 90px;
margin: 0;
padding: 5px 2px;
font-size: 12px;
text-align: center;
}
.product-details__images .product-details__other-options .product-details__other-option svg {
display: block;
margin: 0 auto 6px;
}
}
.product-details__info-container .product-details__additionalInfo .delivery-cost-container,
.product-details__info-container .product-details__additionalInfo .stock-container,
.product-details__info-container .product-details__additionalInfo .availability-container {
margin-bottom: 0;
}
/* wszystkie teksty w pasku additionalInfo pogrubione;
link kosztu dostawy osobno — layout2 ustawia na nim font-weight:400
selektorem .product-details .delivery-cost-container a */
.product-details__additionalInfo,
.product-details__additionalInfo *,
.product-details .product-details__additionalInfo .delivery-cost-container a {
font-weight: 700;
}
/* ===== Main obnizony o 12px, ale tylko przed scrollem =====
frozenHeader jest dodawany do .headerSection przez JS (setFrozenHeader)
dopiero po przescrollowaniu i tylko na desktopie (>768px) */
@media only screen and (min-width: 769px) {
.headerSection:not(.frozenHeader) ~ main {
margin-top: 12px;
}
}
article.regulations.konfigurator {
display: block;
}
article.regulations.konfigurator .ui-jqgrid-titlebar,
article.regulations.konfigurator .ui-jqgrid-titlebar .ui-jqgrid-title {
color: #000;
}
article.regulations.konfigurator .ui-jqgrid th.ui-state-default {
border-radius: 0;
}
@media only screen and (min-width: 769px) {
.headerSection__menu {
justify-content: flex-start;
gap: 10px;
flex-wrap: nowrap;
}
.headerSection__menu-buttons {
margin-left: auto;
}
}
.headerSection__menu .configuratorsNav {
display: flex;
align-items: flex-end;
gap: 8px;
flex: 0 0 auto;
margin: 0 0 0 10px;
min-width: 0;
}
.headerSection__menu .configurators {
width: 50px;
margin: 0;
flex: 0 0 auto;
}
.headerSection__menu .configurators a {
display: block;
text-align: center;
text-decoration: none !important;
background-color: transparent;
color: #191616;
}
.headerSection__menu .configurators a:hover {
color: #73767A;
}
.headerSection__menu .configurators a span {
display: block;
font-size: 9px;
line-height: 11px;
white-space: nowrap;
}
.headerSection__menu .configurators a svg {
display: block;
width: 100%;
height: 36px;
}
.headerSection__menu .configurators a img {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
height: 36px;
object-fit: contain;
}
.headerSection__menu .configurators .material-icons {
display: block;
font-size: 28px;
line-height: 36px;
}
.headerSection__menu .configurators.configuratorssmall {
width: auto;
min-width: 50px;
margin-left: 10px;
}
.headerSection__menu .configurators {
display: none;
}
.headerSection__menu .configurators.configuratorssmall {
display: block;
}
@media only screen and (min-width: 950px) {
.headerSection__menu .configurators {
display: block;
}
.headerSection__menu .configurators.configuratorssmall {
display: none;
}
}
/* Mobile (<=768px): configuratorssmall obok ikony wyszukiwarki (headerSection__menu-search) */
@media only screen and (max-width: 768px) {
html.is-pwa .headerSection__menu .configuratorsNav {
margin-left: 48px;
}
}
/* ===== Strzalki slidera kategorii w naglowku — kolorystyka jak primary-action-button ===== */
.headerSection__categories .swiper-button-prev,
.headerSection__categories .swiper-button-next {
background-color: #191616;
border: 2px solid #191616;
--swiper-navigation-color: #ffffff;
}
.headerSection__categories .swiper-button-prev:hover,
.headerSection__categories .swiper-button-next:hover {
background-color: #F5F5F5;
border-color: #F5F5F5;
--swiper-navigation-color: #191616;
}
@media only screen and (min-width: 769px) {
.headerSection__menu .headerSection__menu-logo--wrapper {
position: static;
transform: none;
flex: 0 0 auto;
}
.headerSection__menu .headerSection__menu-search {
padding-left: 0;
margin: 0;
flex: 1 1 auto;
min-width: 0;
display: flex;
justify-content: center;
}
.headerSection__menu .headerSection__searchForm {
width: 100%;
max-width: 420px;
min-width: 0;
}
.headerSection__menu .headerSection__searchForm-searchContainer {
width: 100%;
min-width: 0;
}
.headerSection__menu .headerSection__searchForm-phrase {
width: 100%;
min-width: 0;
}
.headerSection__menu-buttons {
width: auto;
}
}
@media only screen and (min-width: 1240px) {
.headerSection__menu .configuratorsNav {
gap: 10px;
}
.headerSection__menu .configurators {
width: 60px;
}
.headerSection__menu .configurators a svg,
.headerSection__menu .configurators a img {
height: 46px;
}
.headerSection__menu .configurators a span {
font-size: 10px;
line-height: 12px;
}
}
a svg#svg3872 .str0, a svg#svg3872 .str1, a svg#svg3872 .str2,
a svg#svg3872 .str3, a svg#svg3872 .str4, a svg#svg3872 .str5,
a svg#svg3872 .str6, a svg#svg3872 .str7, a svg#svg3872 .str8,
a svg#svg3872 .str9 { stroke: black; }
a svg#svg3872 .fil0 { fill: #F37435; fill-rule: nonzero; }
a svg#svg3872 .fil1 { fill: #FEFEFE; fill-rule: nonzero; }
a svg#svg3872 .fil2 { fill: none; }
a svg#svg3872 .fil3, a svg#svg3872 .fil4 { fill: black; }
a:hover svg#svg3872 .str0, a:hover svg#svg3872 .str1, a:hover svg#svg3872 .str2,
a:hover svg#svg3872 .str3, a:hover svg#svg3872 .str4, a:hover svg#svg3872 .str5,
a:hover svg#svg3872 .str6, a:hover svg#svg3872 .str7, a:hover svg#svg3872 .str8,
a:hover svg#svg3872 .str9 { stroke: #73767A; }
a:hover svg#svg3872 .fil3, a:hover svg#svg3872 .fil4 { fill: #73767A; }
a svg#svg76 .str0, a svg#svg76 .str1, a svg#svg76 .str2,
a svg#svg76 .str3, a svg#svg76 .str4, a svg#svg76 .str5,
a svg#svg76 .str6, a svg#svg76 .str7, a svg#svg76 .str8,
a svg#svg76 .str9 { stroke: black; }
a svg#svg76 .fil3 { fill: black; }
a:hover svg#svg76 .str0, a:hover svg#svg76 .str1, a:hover svg#svg76 .str2,
a:hover svg#svg76 .str3, a:hover svg#svg76 .str4, a:hover svg#svg76 .str5,
a:hover svg#svg76 .str6, a:hover svg#svg76 .str7, a:hover svg#svg76 .str8,
a:hover svg#svg76 .str9 { stroke: #73767A; }
a:hover svg#svg76 .fil3 { fill: #73767A; }
a svg#svg219 .str8, a svg#svg219 .str5, a svg#svg219 .str1,
a svg#svg219 .str7, a svg#svg219 .str4, a svg#svg219 .str6,
a svg#svg219 .str0, a svg#svg219 .str11, a svg#svg219 .str12,
a svg#svg219 .str14, a svg#svg219 .str10, a svg#svg219 .str9,
a svg#svg219 .str13, a svg#svg219 .str3, a svg#svg219 .str2 { stroke: black; }
a svg#svg219 .fil3 { fill: black; }
a:hover svg#svg219 .str8, a:hover svg#svg219 .str5, a:hover svg#svg219 .str1,
a:hover svg#svg219 .str7, a:hover svg#svg219 .str4, a:hover svg#svg219 .str6,
a:hover svg#svg219 .str0, a:hover svg#svg219 .str11, a:hover svg#svg219 .str12,
a:hover svg#svg219 .str14, a:hover svg#svg219 .str10, a:hover svg#svg219 .str9,
a:hover svg#svg219 .str13, a:hover svg#svg219 .str3, a:hover svg#svg219 .str2 { stroke: #73767A; }
a:hover svg#svg219 .fil3 { fill: #73767A; }
a svg#svg130 .str0, a svg#svg130 .str1 { stroke: black; }
a svg#svg130 .fil4, a svg#svg130 .fil2 { fill: black; }
a:hover svg#svg130 .str0, a:hover svg#svg130 .str1 { stroke: #73767A; }
a:hover svg#svg130 .fil4, a:hover svg#svg130 .fil2 { fill: #73767A; }
@media screen and (max-width: 768px) {
.headerSection__menu-logo--wrapper img {
max-height: 55px;
}
.banner1__column {
margin-left: 0px;
}
}
@media screen and (max-width: 768px) {
.widgetContainerleftTop,
.widgetContainerleftBottom,
.widgetContainerrightBottom,
.widgetContainerrightTop {
top: auto;
bottom: 55px;
z-index: 10001;
}
}
@media only screen and (max-width: 599px) {
.breadcrumbs {
line-height: normal;
}
}
.breadcrumbs-wrapper {
height: auto;
}
.breadcrumbs {
padding: 10px;
}
@media screen and (min-width: 769px) {
.headerSection {
height: 140px;
}
.headerSection__menu {
margin-top: 0px;
}
.headerSection__categories {
margin-top: 0px;
}
}
.fab-product-bar__content {
padding: 4px;
}
/* Lista produktów: wszystkie filtry widoczne domyślnie (przycisk "Ukryj filtry" nadal je zwija) */
@media screen and (min-width: 769px) {
.productsList__filters--container.productsList__filters--hiddenFilter {
display: block;
}
}
/* ===== Staly przycisk "Wstecz" w lewym gornym rogu (base_layout.html) =====
Widoczny tylko w trybie PWA (sklep zainstalowany na ekranie glownym).
Wykrywanie: media query display-mode (Android/desktop) lub klasa html.is-pwa (iOS Safari, navigator.standalone). */
.back-button-fixed {
display: none;
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px 0 10px;
border: 2px solid #191616;
border-radius: 18px;
background-color: #191616;
color: #ffffff;
font-size: 12px;
line-height: 1;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
transition: background-color 200ms, color 200ms;
}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
.back-button-fixed {
display: inline-flex;
}
}
html.is-pwa .back-button-fixed {
display: inline-flex;
}
.back-button-fixed:hover,
.back-button-fixed:focus-visible {
background-color: #F5F5F5;
color: #191616;
border-color: #F5F5F5;
}
.back-button-fixed__icon {
flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
.back-button-fixed {
top: 8px;
left: 8px;
height: 32px;
padding: 0 10px 0 8px;
}
.back-button-fixed__label {
display: none;
}
.headerSection__menu-search {
cursor: pointer;
}
}
@media print {
.back-button-fixed {
display: none !important;
}
}