/* ============================================================================
1. HEADER - sekcja, logo, ikony
========================================================================== */
.headerSection .headerSection__logo {
text-align: center;
z-index: 1;
display: flex;
margin-top: 0 !important;
position: absolute;
background-color: initial;
}
@media (min-width: 769px) and (max-width: 1150px) {
.headerSection .headerSection__logo {
top: 0 !important;
}
}
@media only screen and (min-width: 769px) {
.headerSection {
min-height: auto !important;
padding-top: 10px !important;
padding-bottom: 20px !important;
}
.headerSection.headerSection__bg .headerContainer > .headerSection__row {
min-height: 70px !important;
}
}
@media only screen and (max-width: 768px) {
.headerSection__logo {
left: 15px;
height: 60px !important;
margin-top: unset;
max-width: 100px;
}
.headerSection__logo img,
.headerSection__logo svg {
max-height: 100px !important;
max-width: fit-content !important;
width: auto !important;
background: #FFFFFF !important;
}
.headerSection__logo-img {
max-width: 220px !important;
max-height: 45px !important;
padding-top: 5px !important;
}
}
/* --- Ikony w headerze --- */
.headerSection .headerSection__iconsMenu {
font-size: 14px;
padding-top: 3px;
position: absolute;
top: 55px !important;
bottom: unset !important;
z-index: 2;
}
.headerSection .headerSection__iconsMenu button {
padding: 10px 30px 15px 30px !important;
border: 1px solid black;
border-radius: 15px;
}
.headerSection .headerSection__iconsMenu button:hover {
background-color: #EEEEEE;
transition: 200ms;
}
.headerSection.frozenHeader .headerContainer > .scrollHeader .headerSection__iconsMenu {
top: 35px !important;
}
.headerSection .header__icon {
vertical-align: bottom !important;
}
.headerSection__languageAndCurrencyMenu__openBtn {
display: none !important;
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__iconsMenu .mobileSearchIcon {
position: absolute;
top: 10px !important;
right: 20px;
}
.headerSection .headerSection__mobilePopup {
display: none;
position: fixed;
top: 0;
bottom: 56px;
overflow-y: auto;
overflow-x: hidden;
z-index: 13;
padding: 15px 20px 20px !important;
}
.headerSection .headerSection__mobilePopup__closeBtn {
display: none !important;
}
}
.topBanner__text {
font-size: 13px !important;
}
/* ============================================================================
2. KATEGORIE GŁÓWNE
========================================================================== */
.headerSection .mainCategories {
font-size: 12.5px !important;
}
.headerSection .mainCategories__categories-wrapper {
padding-bottom: 0 !important;
min-height: 50px !important;
}
@media screen and (min-width: 769px) {
.headerSection .mainCategories {
position: relative;
margin: 62px 0 5px;
padding-top: 25px !important;
}
}
@media screen and (max-width: 768px) {
.headerSection .mainCategories {
font-size: 14px !important;
}
.headerSection .headerSection__categories__mobile {
display: block !important;
}
}
.mainCategories__category {
display: flex;
justify-content: left !important;
align-items: center !important;
text-align: left !important;
width: 200px !important;
}
@media only screen and (max-width: 768px) {
.mainCategories__category {
width: 300px !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .mainCategories__category > a {
display: inline-flex !important;
max-width: unset !important;
width: 80% !important;
align-items: center !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .mainCategories__category > a > span {
font-weight: 600;
display: block;
width: auto;
padding-right: 0 !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .header__icon--arrowDown {
padding: 10px;
position: absolute;
top: 16px !important;
right: 5px !important;
width: 25px !important;
height: 25px !important;
}
}
.categoriesWrapper-js {
order: var(--order-desktop, 0);
}
@media (max-width: 768px) {
.categoriesWrapper-js {
order: var(--order-mobile, 0);
}
}
.headerSection .subCategories {
display: none;
color: #191616;
justify-content: center !important;
flex-wrap: wrap;
position: absolute;
padding: 30px 0;
background-color: #FFFFFF;
z-index: 100;
left: 0;
width: 100%;
text-align: left;
box-shadow: 0 10px 15px rgba(0, 0, 0, .0627);
}
@media (min-height: 768px) {
.headerSection .subCategories {
max-height: 800px;
overflow-y: auto;
}
}
.headerSection .subCategories__category-wrapper {
margin: 0 5%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px !important;
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .subCategories .subCategories__category-wrapper .subCategories__category-block ul .subCategories__underundercategory > a > span,
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .subCategories .subCategories__category-wrapper .subCategories__category-block-no-children ul .subCategories__underundercategory > a > span {
padding-left: 0 !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .subCategories .subCategories__category-wrapper .subCategories__category-block .subCategories__undercategory > a > span,
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .subCategories .subCategories__category-wrapper .subCategories__category-block-no-children .subCategories__undercategory > a > span {
padding-left: 5px !important;
}
}
/* ============================================================================
4. PRZEŁĄCZNIK KATEGORII NA MOBILE (Części / Produkty gotowe)
========================================================================== */
.mobileCategorySwitcher {
display: flex !important;
gap: 10px;
padding: 10px 0;
background: #fff;
border-bottom: 1px solid #e5e5e5;
}
.mobileCategorySwitcher__btn {
flex: 1;
display: flex !important;
align-items: center;
justify-content: center;
padding: 14px 12px;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
background: #f2f2f2;
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
min-height: 48px; /* wygodny obszar do dotyku */
}
.mobileCategorySwitcher__btn:active {
background: #e6e6e6;
}
.mobileCategorySwitcher__btn.is-active {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
font-weight: 700;
border-bottom: 2px solid currentColor;
}
@media (max-width: 768px) {
.mainCategories.mobileCategoryNav-js {
display: none;
}
.mainCategories.mobileCategoryNav-js.is-visible {
display: block;
}
.mainCategories.mobileCategoryNav-js .categoriesWrapper-js {
display: none;
}
.mainCategories.mobileCategoryNav-js .categoriesWrapper-js.is-group-active {
display: block;
}
}
/* ============================================================================
5. IKONY KATEGORII + HOVER
========================================================================== */
.category-menu-tekst {
display: inline-block;
}
.category_menu_tekst {
vertical-align: middle !important;
}
.category-menu-icon {
max-height: 40px !important;
max-width: 40px !important;
position: relative;
display: inline-block;
vertical-align: middle !important;
margin-right: 8px !important;
transition:
transform 0.35s cubic-bezier(.4, 0, .2, 1),
filter 0.35s cubic-bezier(.4, 0, .2, 1),
opacity 0.35s cubic-bezier(.4, 0, .2, 1);
}
.mainCategories__category:hover .category-menu-icon,
.category-link:hover .category-menu-icon {
transform: scale(1.3) translateY(-5px);
filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
opacity: 1;
}
.undercategory-menu-icon {
max-height: 45px !important;
max-width: 100px !important;
padding-right: 15px;
vertical-align: middle;
display: inline-block;
transition:
transform 0.35s cubic-bezier(.4, 0, .2, 1),
filter 0.35s cubic-bezier(.4, 0, .2, 1),
opacity 0.35s cubic-bezier(.4, 0, .2, 1);
}
.underundercategory-menu-icon {
max-height: 50px !important;
max-width: 100px !important;
display: inline-block;
vertical-align: middle;
}
.sub-category-link:hover {
transform: scale(1.1) translateY(-2px) translateX(10px);
filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
opacity: 1;
z-index: 1;
}
.sub-category-link:hover > .undercategory-menu-icon {
transform: scale(1.1) translateY(-2px) translateX(5px);
filter: brightness(1) drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
z-index: 1;
}
.category-link:hover > .undercategory-menu-icon {
transform: scale(1.1) translateY(-2px) translateX(5px);
filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
opacity: 1;
z-index: 1;
}
.changeCategoryLink {
cursor: pointer !important;
}
/* --- Siatka 2x2 miniatur kategorii --- */
.category-grid-container {
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
overflow: hidden;
background: #f5f5f5;
}
/* DO SPRAWDZENIA: 50% szerokości/wysokości KOMÓRKI (a komórka to już połowa
kontenera) daje obrazek zajmujący 1/4 swojego pola. Jeśli miniatury mają
wypełniać komórki, powinno być 100% / 100%. */
.category-grid-img {
width: 50%;
height: 50%;
object-fit: cover;
display: block;
}
/* ============================================================================
6. BREADCRUMBS
========================================================================== */
.breadcrumbs-wrapper {
margin: 0;
width: 100%;
height: auto !important;
background: #EEEEEE !important;
}
@media only screen and (max-width: 768px) {
.breadcrumbs-wrapper {
display: none !important;
}
}
.breadcrumbs {
list-style: none;
display: inline-flex;
margin: 0;
padding: 5px 0 !important;
width: 100%;
}
.breadcrumbs__piece {
margin-right: 5px;
font-size: 15px;
font-weight: 300;
color: #6E7072;
cursor: pointer;
display: inline-flex;
white-space: nowrap;
}
/* ============================================================================
7. LISTA PRODUKTÓW - kontener i układ
========================================================================== */
.product-list-js .product-list-wrapper {
background: #FFFFFF;
max-width: 1400px;
margin: 20px auto !important;
clear: both;
display: flex;
font-size: 17px !important;
font-weight: 400;
color: #262626;
text-align: center;
}
.product-list-js .product-list-wrapper .product-list__title {
border-bottom: 0 !important;
}
@media (max-width: 768px) {
.product-list-js .product-list-wrapper .product-list__title {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
.product-list-js .product-list-wrapper .product-list .category-nav__previous {
margin: 0;
padding-bottom: 10px !important;
text-align: left;
}
.product-list-js .product-list-wrapper .product-list__categories-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 70px !important;
}
.product-list__grid {
margin-top: 20px !important;
}
.product-list-js .product-list-wrapper .product-list__category {
height: 250px !important;
width: 290px !important;
margin: 12px;
font-weight: bold;
color: #262626;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
position: relative;
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
overflow: hidden;
box-sizing: border-box;
}
.product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label {
padding: 5px 10px 10px 30px !important;
text-align: center;
}
.product-list-js .product-list-wrapper .filter-group-list,
.product-list-js .product-list-wrapper .filter-group,
.product-list-js .product-list-wrapper .category-nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center !important;
}
@media (max-width: 768px) {
.product-list__gridView-js .products-container {
grid-template-columns: 100% !important;
}
.display-details__counter-bottom {
margin-top: 10px !important;
}
.product-list__banners--noResults {
margin-top: 20% !important;
}
}
@media screen and (min-width: 1401px) {
.product-list-js .product-list__gridView-js .products-container {
grid-template-columns: 25% 25% 25% 25% !important;
}
}
@media screen and (max-width: 599px) {
.product-list-js .product-list-wrapper .product-list__grid-wrapper .display-details {
margin-top: 0 !important;
margin-left: 0 !important;
}
}
/* ----------------------------------------------------------------------------
7a. POJEMNIK PRZEWIJANIA LISTY (mobile) - powiązany z JS
----------------------------------------------------------------------------
-------------------------------------------------------------------------- */
@media (max-width: 599px) {
.product-list-js {
overflow-y: auto;
overflow-x: auto;
height: 100vh;
height: 100dvh;
scroll-behavior: auto;
scroll-snap-type: y proximity;
scroll-padding-top: 120px; /* = PRODUCT_SCROLL_OFFSET_ABOVE_PX w JS */
-webkit-overflow-scrolling: touch;
}
.product-url {
scroll-snap-align: start;
scroll-snap-stop: always;
flex-shrink: 0;
}
.mobile-sticky-search .product-item__description {
scroll-snap-align: center !important;
scroll-snap-stop: always;
flex-shrink: 0;
}
.mobile-sticky-search .product-item__description {
scroll-snap-align: center !important;
scroll-snap-stop: always;
flex-shrink: 0;
}
.new-pagination {
scroll-snap-align: center !important;
scroll-snap-stop: always;
flex-shrink: 0;
}
.mss-btn {
scroll-snap-align: top !important;
scroll-snap-stop: always;
flex-shrink: 0;
}
.product-list__gridView-js .product-item__placeholder:first-child .product-item__description,
.productsList__gridView-js .product-item__placeholder:first-child .product-item__description {
scroll-snap-align: none !important; /* albo: none, jeśli w ogóle nie ma snapować */
}
}
/* ============================================================================
8. KAFELEK PRODUKTU (grid view)
========================================================================== */
.productsList__gridView-js .product-item__placeholder,
.product-list__gridView-js .product-item__placeholder {
margin-bottom: 25px;
position: relative;
}
@media (min-width: 769px) {
.productsList__gridView-js .product-item__placeholder,
.product-list__gridView-js .product-item__placeholder {
height: 500px !important;
}
}
@media (max-width: 768px) {
.productsList__gridView-js .product-item__placeholder,
.product-list__gridView-js .product-item__placeholder {
height: auto !important;
margin-bottom: 10px;
}
}
.productsList__gridView-js .product-item-third .product-item__link,
.product-list__gridView-js .product-item-third .product-item__link {
margin: 0 auto 15px auto;
height: 250px !important;
}
@media (max-width: 768px) {
.productsList__gridView-js .product-item-third .product-item__link,
.product-list__gridView-js .product-item-third .product-item__link {
height: 210px !important;
}
}
.productsList__gridView-js .product-item-third .product-item__link .product-item__image img,
.product-list__gridView-js .product-item-third .product-item__link .product-item__image img {
min-width: 85% !important;
}
.productsList__gridView-js .product-item-third .product-item__description h2,
.product-list__gridView-js .product-item-third .product-item__description h2 {
width: 100%;
margin-top: 8px;
margin-bottom: 8px !important;
letter-spacing: 1.6px !important;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8 !important;
max-height: 100px !important;
white-space: normal;
overflow: hidden;
}
@media (max-width: 768px) {
.productsList__gridView-js .product-item-third .product-item__description h2,
.product-list__gridView-js .product-item-third .product-item__description h2 {
height: auto;
}
}
@media (min-width: 769px) {
.productsList__gridView-js .product-item-third .product-item__description h2,
.product-list__gridView-js .product-item-third .product-item__description h2 {
height: 96px !important;
max-height: 96px !important;
}
}
.productsList__gridView-js .product-item-third .product-item__addToCart,
.product-list__gridView-js .product-item-third .product-item__addToCart {
visibility: visible !important;
display: inline-block !important;
width: 30px;
height: 30px;
padding: 8px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.productsList__gridView-js .product-item-third .product-item__priceAndExtraButton,
.product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: fit-content;
position: relative;
margin: 10px auto;
}
@media screen and (min-width: 769px) {
.productsList__gridView-js .product-item-third .product-item__priceAndExtraButton,
.product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
min-height: 90px !important;
}
}
@media screen and (max-width: 768px) {
.productsList__gridView-js .product-item-third .product-item__priceAndExtraButton,
.product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
min-height: 40px !important;
}
}
.productsList__gridView-js .product-item-third .product-item__description .product-item__phantom,
.product-list__gridView-js .product-item-third .product-item__description .product-item__phantom {
width: 100%;
display: none !important;
margin-top: 5px;
}
.productsList__gridView-js .product-item-third .old-and-min-price,
.product-list__gridView-js .product-item-third .old-and-min-price {
position: initial;
flex-direction: column;
align-items: flex-start;
padding-bottom: 20px;
}
/* --- Hover: kafelek "wyskakuje" ponad siatkę (tylko desktop) --- */
@media screen and (min-width: 769px) {
.productsList__gridView-js .product-item-third:hover,
.productsList__gridView-js .product-item-third:focus-within,
.product-list__gridView-js .product-item-third:hover,
.product-list__gridView-js .product-item-third:focus-within {
position: absolute;
left: -10px;
top: -10px !important;
z-index: 3;
box-shadow: 0 10px 30px 10px rgba(0, 0, 0, .12);
}
.productsList__gridView-js .product-item-third:hover::before,
.productsList__gridView-js .product-item-third:focus-within::before,
.product-list__gridView-js .product-item-third:hover::before,
.product-list__gridView-js .product-item-third:focus-within::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -20px !important;
z-index: -1;
pointer-events: auto;
}
.productsList__gridView-js .product-item-third:hover .product-item__phantom,
.productsList__gridView-js .product-item-third:focus-within .product-item__phantom,
.product-list__gridView-js .product-item-third:hover .product-item__phantom,
.product-list__gridView-js .product-item-third:focus-within .product-item__phantom {
display: none !important;
height: 0 !important;
}
}
/* ============================================================================
9. KAFLE PODKATEGORII NAD LISTĄ
========================================================================== */
.productsList__products--top-subcategories-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px !important;
padding: 0 10px;
margin: 0 auto;
max-width: 1400px;
}
@media (max-width: 768px) {
.productsList__products--top-subcategories-container {
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
}
.productsList__products--top-subcategories-container-data {
text-align: center;
min-width: 150px;
max-width: 100%;
height: auto;
word-break: keep-all;
hyphens: none;
padding: 5px 8px 5px 0 !important;
}
.productsList__products--top-subcategories-container-data:focus {
outline: none !important;
}
.productsList__products--top-subcategories-container-data a {
display: block;
text-decoration: none;
color: inherit;
}
.productsList__products--top-subcategories-container-data-name {
display: block;
font-size: 1rem;
line-height: 1.3;
font-weight: 600;
padding: 0 8px;
word-break: keep-all !important;
}
.productsList__products--top-subcategories-container-data-name:focus {
outline: none;
}
.productsList__products--top-subcategories-container-data:hover > .img {
transform: scale(1.15) translateY(-2px);
filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
opacity: 1;
transition: all 0.25s ease;
}
.productsList__products--top-subcategories-container-data-image {
max-height: 150px !important;
height: auto;
border-radius: 8px;
margin-bottom: 12px;
}
@media screen and (max-width: 768px) {
/* Szerokość deklarowana 2x (85% / 90%) - obowiązywało 90%. */
.productsList__products--top-subcategories-container-data a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 90% !important;
}
.productsList__products--top-subcategories-container-data a::after {
content: ">";
font-size: 30px !important;
}
.productsList__products--top-subcategories-container-data-image {
height: 40px !important;
width: 100px !important;
max-height: 150px !important;
border-radius: 8px;
margin-bottom: 12px;
}
}
/* ============================================================================
10. PAGINACJA
========================================================================== */
.new-pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pagination__link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
height: 36px !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
transition: all 0.15s ease !important;
}
.pagination__link a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
color: #333 !important;
text-decoration: none !important;
border-radius: inherit !important;
}
.pagination__link--active,
.pagination__link--active a {
background: #5F6BE8 !important;
color: white !important;
font-weight: 600 !important;
cursor: default !important;
pointer-events: none !important;
}
.pagination__link:hover:not(.pagination__link--active):not(.pagination__link-dots) {
background: #e5e7eb !important;
color: #111 !important;
}
.pagination__link-dots {
min-width: 24px !important;
color: #6b7280 !important;
font-weight: 400 !important;
pointer-events: none !important;
user-select: none !important;
}
.pagination__link .svgIcon {
fill: currentColor !important;
}
.pagination__link.pagination__mobile-icon {
min-width: 40px !important;
}
.productsList__products--bottom-item {
margin-top: 24px !important;
text-align: center !important;
}
.productsList__products--bottom--option {
padding: 6px 12px !important;
}
.productsList__products--bottom--option a {
display: block !important;
color: #111 !important;
text-decoration: none !important;
}
.productsList__products--bottom--option.selectedOption,
.productsList__products--bottom--option:hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
/* ============================================================================
11. KARTA PRODUKTU
========================================================================== */
.productDetails-section--fixed {
top: 50px !important;
display: block;
}
.productDetails-section--fixed.hide-on-desktop ~ .productDetails-section--fixed.hide-on-desktop {
display: none !important;
}
.productDetails-section--innerLeft {
width: 100% !important;
background-color: #FFFFFF;
display: block;
}
.productDetails-section--innerRight {
width: 100% !important;
background-color: #FFFFFF;
display: block;
margin: 0 auto;
}
.productDetails-productName {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10 !important;
overflow: hidden;
margin: 0 0 5px !important;
font-size: 26px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.31;
letter-spacing: .8px;
color: #262626;
text-align: left;
}
.productDetails-name {
width: 100% !important;
}
.productDetails-options {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center !important;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #E5E5E5;
padding-top: 25px !important;
}
.productDetails-options--option {
margin-right: 0 !important;
}
.productDetails-options--option span {
color: #262626;
font-size: 16px !important;
margin-left: 4px;
}
.productDetails-options--option svg {
fill: rgba(135, 135, 135, 1);
width: 17px !important;
height: 17px !important;
margin-bottom: -3px !important;
}
.productDetails-attributes--quantity {
height: 50px;
font-size: 14px;
font-weight: 600;
display: flex;
flex-direction: row;
width: 300px !important;
align-items: center;
margin: 20px 0;
}
.productDetails-attributes .button-option[data-selected="true"] {
border: 0 !important;
}
.productDetails .close-gallery-button {
display: none;
z-index: 1001;
position: absolute;
right: 30px !important;
top: 150px !important;
height: 40px !important;
width: 40px !important;
fill: #262626 !important;
}
.product-mobile-description a {
display: none !important;
}
@media (max-width: 768px) {
.productDetails-images--image:not(.productDetails-images--video) {
height: 300px !important;
width: 100% !important;
}
.productDetails-content {
position: fixed;
top: 0;
left: 0;
width: calc(100vw - 40px);
background: #FFFFFF;
margin: 0;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 1001 !important;
}
.productDetails-content--header svg,
.productDetails-section--fullScreenOnMobile .svgIcon-close {
position: absolute;
width: 30px !important;
height: 30px !important;
fill: #262626;
top: 47%;
right: 100px !important;
transform: translate(0, -50%);
}
.hide-on-desktop {
display: inline-block;
visibility: visible;
font-size: 16px !important;
width: calc(100vw - 70px);
}
.hide-on-desktop img {
max-width: 100% !important;
max-height: 500px !important;
height: auto !important;
width: auto !important;
display: block;
margin: 10px auto;
object-fit: contain;
}
}
/* Wysokość deklarowana 2x (23px / 28px) - obowiązywało 28px. */
.svgIconCartProductPage {
height: 28px !important;
width: 23px !important;
}
.svgIconClose {
width: 30px !important;
height: 30px !important;
}
/* ============================================================================
12. POPUP "DODANO DO KOSZYKA"
========================================================================== */
.product-item__cartPopup--container header {
width: 80% !important;
}
.product-item__cartPopup .product-details .product-details__detailsWrapper--productImage,
.product-item__cartPopup .productDetails .product-details__detailsWrapper--productImage {
width: 80% !important;
min-width: 200px;
}
.popup-dialog.after-adding-to-cart-popup .after-add-to-cart-popup__buttons a.remember-choice {
width: 70% !important;
}
@media (max-width: 768px) {
.product-item__cartPopup--closePopup {
top: 15px !important;
right: 10px;
}
.product-item__cartPopup .productDetails-buttonsAndDetails .productDetails-buttons {
margin-bottom: 80px !important;
}
.popup-dialog.-adding-to-cart-popup .popup-dialog-wrapper.popup-with-recommended .after-add-to-cart-popup__added-details-header {
overflow: auto;
}
}
/* ============================================================================
13. KOSZYK
========================================================================== */
.cartContainer .productsList .cart__details-box .cart__qty-box .js-value input {
background-color: #FFFFFF;
text-align: center;
color: #262626;
max-width: 50px;
font-weight: 500;
font-size: 17px !important;
}
.cartContainer .productsList .cart__details-box .cart__text--delete .trashIcon {
fill: rgba(135, 135, 135, 1);
width: 16px !important;
height: 16px !important;
margin-right: 5px;
}
.cartContainer .deliveryAndPayment .paymentChannel__box .submitButton {
margin: 0 auto !important;
}
.cartContainer .deliveryAndPayment .paymentChannel__title {
font-size: 18px;
letter-spacing: 0;
line-height: 26px;
color: #262626;
margin-bottom: 0 !important;
display: block;
width: 100%;
font-weight: 600;
}
.cartItemsList-product--details_name {
white-space: normal !important; /* `wrap` nie jest poprawną wartością white-space */
}
/* Waga produktu ukryta w całym koszyku */
.weight-value,
.cart__text--product-weight {
display: none !important;
}
@media screen and (max-width: 768px) {
.cartContainer .productsList .cart__qty-box .js-value {
width: 50px !important;
height: 15px !important;
}
.cartContainer .productsList .cart__qty-box .cart__qty-col {
width: 20px !important;
height: 15px !important;
padding: 5px 5px 15px 5px !important;
}
.paymentChannel__labelsContainer {
justify-content: space-between !important;
max-height: 65% !important;
overflow-x: hidden;
}
}
@media screen and (max-width: 450px) {
.deliveryMethod__imageContainer,
.paymentMethod__imageContainer,
.loyaltyPointsPayment__imageContainer {
display: inline-block !important;
}
}
/* --- Promo logowania w koszyku --- */
.cart__invoice-login-promo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid #e8e8e8;
border-radius: 12px;
background: #f9f9f9;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.cart__promo-left {
display: flex;
align-items: center;
gap: 12px;
}
.cart__promo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8f1fb;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #1a6abf;
}
.cart__promo-icon svg {
width: 16px;
height: 16px;
}
.cart__promo-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 2px;
}
.cart__promo-desc {
font-size: 13px;
color: #666;
margin: 0;
}
.cart__promo-benefits {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 1rem;
}
.cart__benefit-pill {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #555;
border: 1px solid #e0e0e0;
border-radius: 99px;
padding: 4px 10px;
background: #fff;
}
.cart__benefit-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2d9e5e;
flex-shrink: 0;
}
.cart__guest-separator {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
}
.cart__guest-line {
flex: 1;
height: 1px;
background: #e0e0e0;
}
.cart__guest-text {
font-size: 12px;
color: #999;
white-space: nowrap;
}
@media (max-width: 560px) {
.cart__invoice-login-promo {
flex-direction: column;
align-items: flex-start;
}
.cart__invoice-login-promo .secondary-action-button {
width: 100%;
}
.login-invoice-button {
width: 90% !important;
}
}
@media (max-width: 768px) {
.reg-container {
width: calc(32rem - 32px);
padding: 24px 16px 62px 16px !important;
}
}
/* ============================================================================
14. PORÓWNYWARKA
========================================================================== */
.product-list .addToComparePopup {
position: fixed;
z-index: 100;
right: 10%;
bottom: 80px !important;
width: 500px !important;
height: 35px !important;
box-shadow: 0 3px 8px #616060;
background-color: #FFFFFF;
}
@media (max-width: 768px) {
.product-list .addToComparePopup {
bottom: 140px !important;
}
.product-list .addToComparePopup .comparisonIcon {
float: right;
margin: -2px 80px 5px 10px !important;
}
}
.productDetails .addToComparePopup .comparisonIcons {
margin-top: 25px;
margin-bottom: 0;
text-align: center;
display: flex;
justify-content: space-between;
}
.productDetails .addToComparePopup .goToComparisonTool {
height: auto !important;
}
.comparerContainer .topSection-productInfo .productName {
-webkit-line-clamp: 5 !important;
}
.comparerContainer .topSection-productInfo .removeItem {
position: absolute;
top: 0 !important;
right: 20px !important;
}
.productsList__gridView-js .product-item-third .product-item__comparer--icon,
.product-list__gridView-js .product-item-third .product-item__comparer--icon {
fill: rgba(135, 135, 135, 1);
width: 20px !important;
height: 20px !important;
margin-right: 5px;
}
@media (max-width: 768px) {
.product-item__comparer--icon {
width: 18px !important;
height: 18px !important;
vertical-align: middle;
padding-bottom: 2px;
}
}
/* ============================================================================
15. IKONY INTERAKCYJNE - wspólna animacja hover
----------------------------------------------------------------------------
========================================================================== */
.product-item__comparer--icon,
.header-comparer--icon,
.comparisonIcon,
.product-item__heartIcon,
.header__cart-icon-desktop {
transition:
transform 0.35s cubic-bezier(.4, 0, .2, 1),
filter 0.35s cubic-bezier(.4, 0, .2, 1),
opacity 0.35s cubic-bezier(.4, 0, .2, 1);
}
.product-item__comparer--icon:hover,
.header-comparer--icon:hover {
transform: scale(1.3);
filter: brightness(1.3);
opacity: 1;
}
.comparisonIcon:hover,
.product-item__heartIcon:hover,
.header__cart-icon-desktop:hover {
transform: scale(1.2);
opacity: 1;
}
.header__cart-icon-desktop {
margin-right: 3px;
}
.js-checkOrderTiming:hover .header__cart-icon-desktop {
transform: scale(1.2);
opacity: 1;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* ============================================================================
16. GTRANSLATE - przełącznik języka
========================================================================== */
.gt_switcher_wrapper {
position: fixed;
top: 30px !important;
right: 3% !important;
z-index: 10;
}
.gt_container--hich1m .gt_switcher {
font-family: Arial;
font-size: 12pt;
text-align: center;
cursor: pointer;
overflow: hidden;
width: 58px !important;
line-height: 0;
}
.gt_container--hich1m .gt_switcher .gt_selected a {
border: 1px solid #ccc;
color: #666;
padding: 3px 5px 3px 6px !important;
width: auto !important;
}
.gt_container--hich1m .gt_switcher .gt_option a {
color: #000;
padding: 3px 5px 3px 15px !important;
}
.gt_selected a,
.gt_option a {
font-size: 0 !important;
}
.gt_selected a {
display: inline-flex;
align-items: center;
}
.gt_option a > *:not(img) {
display: none !important;
}
.gt_option a img {
display: inline-block !important;
width: 24px !important;
height: 24px !important;
padding-right: 5px !important;
}
.gt_selected a img {
font-size: 16px !important; /* przywraca niezerowy rozmiar po font-size: 0 wyżej */
margin-right: 5px !important;
padding-right: 10px !important;
}
/* ============================================================================
17. WYSZUKIWARKA CZĘŚCI - neutralizacja stylów przeglądarki
========================================================================== */
/* 2026-09-28: usunięto wyzerowanie ramki/tła/cienia pól #manufacturerSearch i
#categorySearch (blokowało obramowanie i podświetlenie przy kliknięciu).
Pełny wygląd wyszukiwarki części jest teraz w css/desktop-search.css (.part-search). */
.IconButton_button__4Y2QE {
width: 200px !important;
}
.header-recommended {
display: none;
position: absolute;
transform: translate(50%);
right: 50%;
background-color: #FFFFFF;
grid-template-columns: 1300px 200px !important;
max-width: 1300px;
padding: 20px;
height: 474px;
z-index: 15;
top: 45px;
box-shadow: 0 10px 30px 10px rgba(0, 0, 0, .12);
}
.search-header,
.search-header h2 {
margin-bottom: 15px;
}
.search-header h2 {
font-size: 22px;
font-weight: 600;
}
.search-header p {
margin: 4px 0 0 0;
font-size: 14px;
color: #777;
}
.mss-collapsed {
display: none !important;
}
/* ============================================================================
18. SWIPER / KARUZELE
========================================================================== */
.swiper-wrapper {
padding: 0 !important;
}
/* DO SPRAWDZENIA: w oryginale był tu blok `@media(max-width: 768px)_{ height:
250px !important; }` - literówka `_{` sprawiała, że cały fragment był
nieprawidłowy i przeglądarka go pomijała. Odkomentuj, jeśli ta wysokość
była zamierzona.
@media (max-width: 768px) {
.swiper-wrapper {
height: 250px !important;
}
}
*/
.swiper-button-next.default,
.swiper-button-prev.default {
background-color: #000000 !important;
border-radius: 50%;
width: 40px !important;
height: 40px !important;
flex-shrink: 0;
transition: background-color .3s;
font-weight: bold;
}
@media (min-width: 769px) {
.swiper-button-next.default,
.swiper-button-prev.default {
width: 60px !important;
height: 60px !important;
}
}
.swiper-button-next.default:hover,
.swiper-button-prev.default:hover {
background-color: #000000 !important;
color: #e20000 !important;
}
.swiper-button-next,
.swiper-button-prev {
margin: -5px 5px !important;
}
.swiper-button-next {
padding-right: 3px;
}
.swiper-button-prev {
padding-left: 3px;
}
.swiper-button-compare {
top: 30% !important;
}
.swiper-button-prev.swiper-button-compare {
padding-left: 0 !important;
}
.swiper-button-next.swiper-button-compare {
padding-right: 0 !important;
}
.swiper-button-pause {
display: none !important;
}
/* ============================================================================
19. MENU DOLNE I PRZYCISKI PŁYWAJĄCE (mobile)
========================================================================== */
@media only screen and (max-width: 768px) {
.bottomMenu {
width: 100%;
height: auto !important;
background-color: #EEEEEE !important;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: fixed;
bottom: 0;
padding-top: 10px;
padding-bottom: 5px;
z-index: 1000;
}
.bottomMenu .menuItem {
flex: 0 1 15% !important;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.bottomMenu .menuItem svg {
fill: #000000 !important;
width: 35px !important;
height: 60px !important;
margin: 0 auto;
}
.bottomMenu .menuItem .text {
font-size: 14px !important;
line-height: 14px !important;
color: #000000 !important;
font-weight: 400;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
}
}
#daccacc {
position: fixed;
display: inline-block;
padding: 0;
border-radius: 50%;
border: 1px solid transparent;
box-sizing: border-box;
background: transparent;
transition: all 0.3s ease;
bottom: 100px !important;
left: 20px;
width: 50px;
height: 50px;
}
@media screen and (max-width: 900px) {
.go-to-top__btn-js {
width: 40px;
height: 40px;
bottom: 120px !important;
}
}
@media screen and (max-width: 768px) {
.cookie-message-opener {
bottom: 150px !important;
left: 10px;
}
}
/* Widoczność sterowana z JS (initBackArrow) */
.back-arrow {
display: none;
position: fixed;
top: 50%;
right: 5%;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: #222;
color: #fff;
border-radius: 50%;
font-size: 22px;
text-decoration: none;
cursor: pointer;
z-index: 1000;
}
/* DO SPRAWDZENIA: `@media (width: 420px)` to warunek na DOKŁADNIE 420px -
praktycznie nigdy nie zachodzi. Prawdopodobnie miało być `max-width: 420px`.
(Ten sam błąd był w JS przy strzałce wstecz.) */
@media (width: 420px) {
.see-more-button {
display: inline-block !important;
}
}
/* ============================================================================
20. STOPKA I BANERY
========================================================================== */
.footer-attribution {
font-size: 12px !important;
}
.footer-banners .banner__itemsContainer img {
max-width: 75px !important;
display: block !important;
margin: auto !important;
}
.banner1__image.lazy--big {
aspect-ratio: auto;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.banner1__image.lazy--big {
margin-top: 90px !important;
}
}
.contactSection {
width: 85%;
max-width: 1400px;
margin: 50px auto !important;
}
@media (max-width: 768px) {
.contactSection__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0 !important;
}
.contactSection__cell__banner .contactSection__contactData {
margin-top: 0 !important;
}
}
/* ============================================================================
21. NARZĘDZIA I WYŁĄCZENIA
========================================================================== */
@media (max-width: 768px) {
.mobile-hide {
display: none !important;
}
}
.cookie-hidden {
display: none !important;
}
.callback24-container,
.cb24-main-container {
display: none !important;
}
select:not(.darkTheme) {
background-image: none !important;
}
.login-register-reminder-form .reg-required-fields {
margin: 0px 16px !important;
color: #5b5858;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-align: left;
}
.stockLevel-container {
display: none !important;
}
.paymentMethod__date {
display: none !important;
}
.paymentMethod__value {
display: none !important;
}
.gt_container--hich1m .gt_switcher {
font-family: Arial;
font-size: 12pt;
text-align: left;
cursor: pointer;
overflow: hidden;
width: 70px !important;
line-height: 0;
}
.gt_switcher {
@media(width: 420px){
display:none !important;
}
}
.google_translate_element {
display: none !important;
}
.cartDeliveryDateTime {
display: none !important;
}
.headerSection__pages__other:hover {
background-color: #EEEEEE;
transition: 200ms;
}
#google_translate_element {
display: none;
}
/* ============================================================================
Poprawki 2026-09
========================================================================== */
/* nagłówek H1 na liście produktów - wygląd bez zmian */
h1.category-nav__current { margin: 0; font-size: inherit; line-height: inherit; }
/* nagłówek widoczny tylko dla Google i czytników ekranu */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 768px) {
/* flaga języka: z prawego górnego rogu (zasłaniała lupę) na lewy dół, nad dolne menu */
.gt_switcher_wrapper { top: auto !important; bottom: 118px !important; right: auto !important; left: 12px !important; }
}
/* strzałka "wstecz" - chowana na czas, gdy nachodzi na strzałki galerii / sliderów */
.back-arrow { transition: opacity .2s; }
.back-arrow.back-arrow--hidden { opacity: 0; pointer-events: none; }
/* ============================================================================
Pasek "Do koszyka" na telefonie (karta produktu) - patrz custom.js
========================================================================== */
.sticky-cart {
position: fixed;
left: 0;
right: 0;
bottom: var(--sticky-cart-bottom, 0px);
z-index: 999; /* pod dolnym menu (1000) */
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
background: #fff;
box-shadow: 0 -4px 12px rgba(0, 0, 0, .12);
visibility: hidden;
transform: translateY(100%);
transition: transform .2s ease, visibility 0s linear .2s;
}
.sticky-cart.is-visible {
visibility: visible;
transform: none;
transition: transform .2s ease, visibility 0s;
}
.sticky-cart__price {
font-family: Poppins, sans-serif;
font-size: 20px;
font-weight: 700;
color: #e20000;
white-space: nowrap;
}
.sticky-cart__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
min-width: 190px;
height: 46px;
padding: 0 18px;
border: 0;
border-radius: 8px;
background: #e20000;
color: #fff;
font-family: Poppins, sans-serif;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
}
/* pływające przyciski (do góry, flaga języka) podnosimy nad pasek */
body.has-sticky-cart .go-to-top__btn-js { bottom: 184px !important; }
body.has-sticky-cart .gt_switcher_wrapper { bottom: 182px !important; }
@media (min-width: 769px) {
.sticky-cart { display: none !important; }
}
/* ============================================================================
Poprawki UX 2026-09 (2)
========================================================================== */
/* --- Pasek atutów pod banerami na stronie głównej (home-page.html) --- */
.usp-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
max-width: 1400px;
margin: 20px auto;
padding: 0 20px;
box-sizing: border-box;
font-family: Poppins, sans-serif;
}
.usp-bar__item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #f5f5f5;
border-radius: 10px;
font-size: 14px;
line-height: 1.35;
color: #262626;
}
.usp-bar__item svg {
flex: 0 0 28px;
width: 28px;
height: 28px;
fill: none;
stroke: #e20000;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.usp-bar__item b { font-weight: 600; }
@media (max-width: 1024px) {
.usp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.usp-bar { margin: 4px auto 16px; padding: 0 12px; gap: 8px; }
.usp-bar__item { padding: 10px; gap: 8px; font-size: 12.5px; }
.usp-bar__item svg { flex-basis: 22px; width: 22px; height: 22px; }
/* --- Banery na telefonie: przesuwany pasek zamiast 4 banerów jeden pod drugim --- */
.hero-slider .hero-slider__track {
flex-direction: row !important;
gap: 10px !important;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding: 0 12px;
padding: 0 12px;
box-sizing: border-box;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.hero-slider .hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider .hero-slider__slide,
.hero-slider .hero-slider__slide:first-child {
flex: 0 0 88%;
scroll-snap-align: start;
border-radius: 10px;
overflow: hidden;
}
}
/* --- Lista produktów na telefonie: 2 kolumny zamiast 1 --- */
@media (max-width: 600px) {
#products-2 .product-list__gridView-js .products-container {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 8px !important;
}
#products-2 .product-list__gridView-js .product-item-third {
width: calc(100% - 16px);
padding: 8px;
}
#products-2 .product-list__gridView-js .product-item-third .product-item__link {
height: 150px !important;
}
#products-2 .product-list__gridView-js .product-item-third .product-item__description h2 {
font-size: 13px;
line-height: 18px;
letter-spacing: .2px;
margin: 6px 0 8px;
}
}
/* pasek atutów: dostawa - wersja dla Polski / dla klientów z zagranicy (skrypt w home-page.html) */
.usp-bar .usp-delivery-eu { display: none; }
.usp-bar.usp-bar--eu .usp-delivery-eu { display: inline; }
.usp-bar.usp-bar--eu .usp-delivery-pl { display: none; }
/* nagłówek "Ostatnio oglądane" na telefonie - taki sam wygląd jak "Identyfikatory towaru" i "Opinie" */
@media (max-width: 768px) {
.productDetails-recent--container .productDetails-recent--title.productDetails-section__header--mobileOnly {
width: calc(100% + 24px);
height: 81px;
margin: 0 -12px -1px !important;
padding: 0 12px;
line-height: 81px;
}
.productDetails-recent--title .productDetails-section__mobileName,
.productDetails-recent--title .productDetails-section__mobileName b {
font-weight: 500 !important;
color: #444;
line-height: inherit;
}
.productDetails-recent--title .svgIcon {
top: 50% !important;
transform: translateY(-50%);
}
}
/* lista produktów na telefonie (2 kolumny): nazwa zawsze na 5 linii, dzięki czemu
ceny i przyciski koszyka w sąsiednich kafelkach są na tej samej wysokości */
@media (max-width: 600px) {
#products-2 .product-list__gridView-js .product-item-third .product-item__description h2 {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5 !important;
height: 90px;
max-height: 90px !important;
overflow: hidden;
}
#products-2 .product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
align-items: flex-start;
}
}
/* ============================================================================
Strona główna: "Kategorie produktów" (.home-cats) i "Najczęściej kupowane"
(.bestsellers-home) - kod w home-page.html
========================================================================== */
.home-cats__title {
margin: 0;
font-weight: 400;
}
.home-cats__title b {
font-weight: 700;
}
/* odstęp od paska atutów daje już .gridMainElement (60px) */
.home-cats {
margin: 0 0 56px;
}
/* nagłówek jak w sekcjach polecanych: tytuł na linii */
.home-cats__head {
margin: 0 0 40px;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.home-cats__title {
position: relative;
bottom: -13px;
display: inline-block;
padding: 0 20px;
background: #fff;
color: #262626;
font-family: Poppins, sans-serif;
font-size: 24px;
line-height: normal;
}
/* kafelki jak na husqvarna.com: zdjęcie produktu na jasnoszarym tle, nazwa pod spodem */
.home-cats__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 12px;
}
.home-cats__item {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 12px 14px;
border-radius: 10px;
background: #f3f3f3;
color: #262626;
text-decoration: none;
transition: background-color .15s ease, box-shadow .15s ease;
}
.home-cats__item:hover,
.home-cats__item:focus-visible {
background: #ececec;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
color: #262626;
text-decoration: none;
}
.home-cats__img {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.home-cats__img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply; /* białe tło zdjęcia zlewa się z szarym kafelkiem */
transition: transform .25s ease;
}
.home-cats__item:hover .home-cats__img img {
transform: scale(1.05);
}
.home-cats__label {
font-family: Poppins, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.home-cats__label::after {
content: "\203A";
margin-left: 6px;
color: #e20000;
font-weight: 700;
}
/* tablet i telefon: dwa rzędy przewijane w bok */
@media (max-width: 1100px) {
.home-cats__grid {
grid-template-columns: none;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
grid-auto-columns: 22%;
overflow-x: auto;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.home-cats__grid::-webkit-scrollbar { display: none; }
.home-cats__item { scroll-snap-align: start; }
}
@media (max-width: 768px) {
.home-cats { margin: 24px 0 0; }
.home-cats__head { margin-bottom: 32px; }
.home-cats__title { font-size: 22px; }
.home-cats__grid {
grid-auto-columns: 40%;
gap: 10px;
padding: 0 12px 8px;
scroll-padding-left: 12px;
}
.home-cats__item { gap: 8px; padding: 10px 10px 12px; }
.home-cats__item:hover .home-cats__img img { transform: none; }
.home-cats__label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.home-cats__item, .home-cats__img img { transition: none; }
.home-cats__item:hover .home-cats__img img { transform: none; }
}
/* ---------- Najczęściej kupowane: kafelki w stylu kategorii, jeden rząd ---------- */
.home-bs {
margin: 0 0 16px;
}
.home-bs__wrap {
position: relative;
}
.home-bs__list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 5 * 12px) / 6); /* 6 kafelków na ekranie */
gap: 12px;
padding-bottom: 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.home-bs__list::-webkit-scrollbar { display: none; }
.home-bs__item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 12px 14px;
border-radius: 10px;
background: #f3f3f3;
color: #262626;
text-decoration: none;
scroll-snap-align: start;
transition: background-color .15s ease, box-shadow .15s ease;
}
.home-bs__item:hover,
.home-bs__item:focus-visible {
background: #ececec;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
color: #262626;
text-decoration: none;
}
.home-bs__img {
position: relative;
display: block;
aspect-ratio: 1 / 1;
}
.home-bs__img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform .25s ease;
}
.home-bs__item:hover .home-bs__img img {
transform: scale(1.05);
}
.home-bs__flag {
position: absolute;
top: 0;
left: 0;
padding: 3px 6px;
border-radius: 4px;
background: #e20000;
color: #fff;
font-family: Poppins, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
/* nazwa zawsze na 2 linie, żeby ceny w sąsiednich kafelkach były na jednej wysokości */
.home-bs__name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 2.7em;
overflow: hidden;
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
.home-bs__prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
font-family: Poppins, sans-serif;
}
.home-bs__price {
color: #262626;
font-size: 15px;
font-weight: 700;
}
.home-bs__price--promo {
color: #e20000;
}
.home-bs__old {
color: #8a8a8a;
font-size: 12px;
text-decoration: line-through;
}
.home-bs__min {
flex-basis: 100%;
color: #6b6b6b;
font-size: 11px;
line-height: 1.3;
}
.home-bs__arrow {
position: absolute;
top: calc(50% - 20px);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0 0 3px;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
color: #262626;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: opacity .15s ease, color .15s ease;
}
.home-bs__arrow--prev { left: 20px; }
.home-bs__arrow--next { right: 20px; }
.home-bs__arrow:hover { color: #e20000; }
.home-bs__arrow:disabled {
opacity: 0;
pointer-events: none;
}
@media (max-width: 1100px) {
.home-bs__list { grid-auto-columns: 22%; }
}
@media (max-width: 768px) {
.home-bs { margin: 40px 0; }
.home-bs__list {
grid-auto-columns: 40%;
gap: 10px;
padding: 0 12px 8px;
scroll-padding-left: 12px;
}
.home-bs__item { gap: 6px; padding: 10px 10px 12px; }
.home-bs__item:hover .home-bs__img img { transform: none; }
.home-bs__arrow { display: none; }
.home-bs__price { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.home-bs__item, .home-bs__img img { transition: none; }
.home-bs__item:hover .home-bs__img img { transform: none; }
}
/* ==========================================================================
Poprawka: strzałki karuzeli "Najczęściej kupowane" (.home-bs__arrow)
wystają 20px poza kontener (left:-20px / right:-20px) i przy szerokich
ekranach (np. 1920px) wychodzą poza stronę, powodując poziomy scroll.
Dodano 2026-09-28.
========================================================================== */
.home-bs__wrap {
overflow-x: clip;
}
/* ==========================================================================
Strony produktów archiwalnych: ukrycie boksu zakupu (cena + "Dodaj do
koszyka"). Na stronie archiwalnej platforma pokazuje komunikat
"Przeglądasz ofertę archiwalną, wybrany towar jest niedostępny", ale boks
z przyciskiem do koszyka nadal się renderuje (na komputerze jako pływająca
karta pod treścią). Ukrywamy go tylko tam, gdzie jest ten komunikat -
zwykłe karty produktów się nie zmieniają. Ukrywamy też dolny pasek
"Dodaj do koszyka" na telefonie (.sticky-cart z custom.js).
Dodano 2026-09-28.
========================================================================== */
.productDetails-js:has(.productDetails-details--archivalProductInfo) .productDetails-section--right,
.productDetails-js:has(.productDetails-details--archivalProductInfo) .productDetails-productInfo .productDetails-section--fixed,
body:has(.productDetails-details--archivalProductInfo) .sticky-cart {
display: none !important;
}
/* ==========================================================================
Strona główna: wspólny kontener sekcji i jednolite strzałki przewijania
Dodano 2026-09-28.
1. Kontener (tylko komputer/tablet, od 769px): baner główny, pasek atutów,
"Kategorie produktów", "Najczęściej kupowane" i "Opinie klientów" mają
treść o szerokości maks. 1400px (tak jak newsletter i stopka),
wyśrodkowaną, z marginesem 3% z każdej strony. Wcześniej na ekranach
szerszych niż 1600px sekcje dochodziły do samej krawędzi.
Baner dostaje zaokrąglone rogi.
2. Strzałki (od 769px; na telefonie są ukryte jak dotąd): baner,
"Najczęściej kupowane" (.home-bs__arrow) i "Opinie klientów"
(.bs-reviews__arrow) wyglądają tak samo - białe kółko 44px z cieniem,
ikona SVG, po najechaniu czerwona. W banerze strzałki są na zdjęciu,
w karuzelach - na krawędzi listy (połowa w marginesie strony).
Prefiks .gridContainer jest potrzebny, żeby wygrać ze stylami
zapisanymi w plikach sekcji (banner-custom-1.html, home-reviews.html).
========================================================================== */
@media (min-width: 769px) {
/* --- 1. kontener --- */
.home-cats > .page-padding,
.home-bs > .page-padding,
.bs-reviews > .page-padding {
box-sizing: content-box;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 3%;
padding-right: 3%;
}
.usp-bar {
box-sizing: content-box;
padding-left: 3%;
padding-right: 3%;
}
.gridContainer .hero-slider {
width: 94%;
max-width: 1400px;
margin: 16px auto 0;
border-radius: 12px;
}
/* strzałki karuzeli wchodzą w margines strony, więc nie przycinamy ich
(przycięcie z poprawki wyżej było potrzebne, gdy sekcja nie miała marginesu) */
.home-bs__wrap {
overflow-x: visible;
}
/* --- 2. strzałki --- */
.gridContainer .hero-slider__arrow,
.gridContainer .home-bs__arrow,
.gridContainer .bs-reviews__arrow {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: #262626;
font-size: 0;
line-height: 0;
cursor: pointer;
transform: translateY(-50%);
transition: opacity .15s ease, color .15s ease;
}
.gridContainer .hero-slider__arrow svg,
.gridContainer .home-bs__arrow svg,
.gridContainer .bs-reviews__arrow svg {
display: block;
width: 22px;
height: 22px;
}
.gridContainer .hero-slider__arrow:hover,
.gridContainer .home-bs__arrow:hover,
.gridContainer .bs-reviews__arrow:hover {
background: #fff;
color: #e20000;
}
.gridContainer .hero-slider__arrow:hover {
transform: translateY(-50%);
}
.gridContainer .hero-slider__arrow:focus-visible,
.gridContainer .home-bs__arrow:focus-visible,
.gridContainer .bs-reviews__arrow:focus-visible {
outline: 2px solid #262626;
outline-offset: 2px;
}
.gridContainer .home-bs__arrow:disabled,
.gridContainer .bs-reviews__arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* baner: na zdjęciu, 16px od krawędzi */
.gridContainer .hero-slider__arrow--prev { left: 16px; right: auto; }
.gridContainer .hero-slider__arrow--next { left: auto; right: 16px; }
/* karuzele: środek strzałki na krawędzi listy */
.gridContainer .home-bs__arrow--prev,
.gridContainer .bs-reviews__arrow--prev {
left: 0;
right: auto;
transform: translate(-50%, -50%);
}
.gridContainer .home-bs__arrow--next,
.gridContainer .bs-reviews__arrow--next {
left: auto;
right: 0;
transform: translate(50%, -50%);
}
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
.gridContainer .hero-slider__arrow,
.gridContainer .home-bs__arrow,
.gridContainer .bs-reviews__arrow {
transition: none;
}
}
/* =============================================
KAFELKI PODKATEGORII - zdjęcia (2026-09-29)
Zdjęcia podkategorii (usr/*.png) mają różne proporcje (np. 760x320,
1960x2754), a były rozciągane do stałego pola i wyglądały na zgniecione.
Teraz mieszczą się w polu w całości, a na telefonie stoją w jednakowym
jasnym polu. Brakujące zdjęcie (np. "Inne") zastępuje ikona części
(js/custom.js, klasa .is-zastepcza).
============================================= */
.productsList__products--top-subcategories-container-data img.productsList__products--top-subcategories-container-data-image {
object-fit: contain;
}
.productsList__products--top-subcategories-container-data img.is-zastepcza {
box-sizing: border-box;
padding: 36px;
}
@media screen and (max-width: 768px) {
.productsList__products--top-subcategories-container-data a > div {
flex: 0 0 auto;
max-height: none;
}
.productsList__products--top-subcategories-container-data img.productsList__products--top-subcategories-container-data-image {
display: block;
box-sizing: border-box;
width: 96px !important;
height: 68px !important;
min-height: 0;
max-height: none !important;
margin: 0 !important;
padding: 4px;
border-radius: 10px;
background: #f3f3f3;
}
.productsList__products--top-subcategories-container-data img.is-zastepcza {
padding: 16px 30px;
}
}
/* ==========================================================================
MENU „KATEGORIE” NA TELEFONIE I TABLECIE (do 768 px) - 2026-10-01
Kategorie na całą szerokość panelu: ikona po lewej, nazwa, strzałka po prawej
(wcześniej stała szerokość 300 px - na szerszych ekranach wąska kolumna
na środku z łamanymi nazwami). Podkategorie: ikona i nazwa w jednej linii,
bez odstępów 30 px między wierszami i bez poziomego paska przewijania.
========================================================================== */
@media only screen and (max-width: 768px) {
.headerSection .headerSection__categories__mobile .mainCategories { width: 100% !important; align-self: stretch !important; box-sizing: border-box; }
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper { width: 100% !important; box-sizing: border-box; }
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .mainCategories__category {
display: flex !important; width: 100% !important; max-width: none !important; box-sizing: border-box;
padding: 10px 52px 10px 4px !important; justify-content: flex-start !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .mainCategories__category .category-link {
display: flex !important; align-items: center !important; gap: 14px; width: 100% !important; max-width: none !important;
}
.headerSection .headerSection__categories__mobile .mainCategories__category .category-link__icon-wrap { flex: 0 0 44px; display: flex; justify-content: center; }
.headerSection .headerSection__categories__mobile .mainCategories__category .category-link__label { flex: 1 1 auto; width: auto !important; text-align: left !important; font-size: 15px; line-height: 1.3; }
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper > .showSubCategories-js { top: 8px !important; right: 4px !important; }
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper > .mobileUndercategoryNameSvgRectangle { top: 0 !important; right: 0 !important; width: 56px !important; height: 61px !important; }
/* podkategorie */
.headerSection .headerSection__categories__mobile .subCategories-js { overflow-x: hidden !important; }
.headerSection .headerSection__categories__mobile .subCategories__category-wrapper { display: block !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
.headerSection .headerSection__categories__mobile .subCategories__category-block { margin: 0 !important; border-bottom: 1px solid #eee; }
.headerSection .headerSection__categories__mobile .subCategories__category-block > .subCategories__undercategory { display: block; padding: 6px 52px 6px 18px !important; box-sizing: border-box; }
.headerSection .headerSection__categories__mobile .subCategories__undercategory .sub-category-link > span {
display: flex !important; align-items: center; gap: 12px; padding: 0 !important; font-size: 14px; line-height: 1.3;
}
.headerSection .headerSection__categories__mobile .subCategories__undercategory .undercategory-menu-icon { width: 40px !important; height: 40px !important; object-fit: contain; padding: 0 !important; flex: 0 0 40px; }
.headerSection .headerSection__categories__mobile .subCategories__category-block > .showSubSubCategories-js { top: 4px !important; right: 4px !important; }
.headerSection .headerSection__categories__mobile .subCategories__category-block > .mobileUndercategoryNameSvgRectangle { top: 0 !important; right: 0 !important; width: 56px !important; height: 52px !important; }
/* trzeci poziom (np. Kosiarki → Kosiarki spalinowe) */
.headerSection .headerSection__categories__mobile .subCategories__category-block > ul { padding: 0 !important; margin: 0 !important; }
.headerSection .headerSection__categories__mobile .subCategories__underundercategory { display: block !important; padding: 0 !important; margin: 0 !important; border-top: 1px solid #f2f2f2; }
.headerSection .headerSection__categories__mobile .subCategories__underundercategory .sub-category-link { padding: 10px 16px 10px 70px !important; font-size: 14px; }
}
.bs-eta__sub {
display: none !important;
}
.sticky-cart__price {
padding-left:45px !important;
}
.finishSummary__download {
display:none !important;
}
.bs-tb-qr {
display:none !important;
}
/* Podkategorie: jeden rząd z przewijaniem poziomym — 2026-10-30 */
.product-list .productsList__products--top-subcategories-container{display:flex!important;flex-flow:row nowrap!important;justify-content:flex-start!important;align-items:stretch!important;gap:14px!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box;overflow-x:auto!important;overflow-y:hidden!important;padding:8px 0 14px!important;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.product-list .productsList__products--top-subcategories-container>.productsList__products--top-subcategories-container-data{flex:0 0 clamp(144px,calc((100% - 84px)/7),180px)!important;width:clamp(144px,calc((100% - 84px)/7),180px)!important;min-width:144px!important;max-width:180px!important;margin:0!important;padding:0!important;box-sizing:border-box;scroll-snap-align:start}
.product-list .productsList__products--top-subcategories-container .sub-category-link{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;min-width:0!important;text-align:center}
.product-list .productsList__products--top-subcategories-container .sub-category-link>div{display:flex!important;align-items:center;justify-content:center;width:112px!important;height:112px!important;min-height:112px!important;max-height:112px!important;margin:0 auto 10px!important;flex:none}
.product-list .productsList__products--top-subcategories-container .productsList__products--top-subcategories-container-data-image{display:block;box-sizing:border-box;width:112px!important;min-width:112px!important;max-width:112px!important;height:112px!important;min-height:112px!important;max-height:112px!important;margin:0!important;object-fit:contain}
.product-list .productsList__products--top-subcategories-container .productsList__products--top-subcategories-container-data-name{display:block;width:100%;margin:0!important;padding:0 4px!important;white-space:normal!important;overflow-wrap:break-word;line-height:1.4!important;font-size:12px!important}
.product-list .productsList__products--top-subcategories-container .sub-category-link:focus-visible{outline:3px solid #23365b;outline-offset:-3px;border-radius:8px}
/* Katalog mobilny: wyrównanie cen i koszyka jak na desktopie — 2026-10-30 */
.kc-products .kc-product .product-item__priceAndExtraButton{align-items:center!important}
.kc-products .kc-product .product-item__addToCart{align-self:center!important}
/* Ramki kafelków pozostają w obszarze przewijania także po najechaniu. */
.product-list .productsList__products--top-subcategories-container .sub-category-link:hover{transform:none;filter:none}
.product-list .productsList__products--top-subcategories-container .sub-category-link:hover img.kk-foto{transform:none;box-shadow:inset 0 0 0 1px #e20000}
/* Równe dolne krawędzie kafelków i aktywne filtry — 2026-10-30 */
.product-list .productsList__products--top-subcategories-container .sub-category-link{height:100%;box-sizing:border-box}
.product-list .productsList__products--top-subcategories-container .productsList__products--top-subcategories-container-data-name{flex:1 0 auto;min-height:2.8em}
@media(max-width:768px){
.product-list .productsList__products--top-subcategories-container .sub-category-link::after{display:block;margin-top:8px;line-height:1}
.product-list .productsList__products--top-subcategories-container>.productsList__products--top-subcategories-container-data{padding-bottom:10px!important}
}
body:has(.selectedFilters-js .removeFilter-js:not(.hidden)) .mf-filtry,
body:has(.selectedFilters-js .removeFilter-js:not(.hidden)) .mf-plywajacy{background:#e20000!important;border-color:#e20000!important;color:#fff!important}
/* Lupy: centrowanie bez odziedziczonych przesunięć SVG — 2026-10-30 */
.headerSection .mobileSearchIcon{align-items:center!important}
.headerSection .mobileSearchIcon>svg{position:static!important;top:auto!important;transform:none!important;margin:0!important;display:block;flex-shrink:0}
.headerSection__searchForm__btn{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;line-height:1}
.headerSection__searchForm__btn>svg{position:static!important;top:auto!important;transform:none!important;margin:0!important;display:block!important;flex-shrink:0}
/* Kontynuuj przeglądanie — 2026-10-30 */
.bs-resume{margin:28px 0;min-width:0;color:#222}
.bs-resume__heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bs-resume h2{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.3;font-weight:700;letter-spacing:normal}
.bs-resume__heading p{margin:5px 0 0;color:#666;font-size:13px;line-height:1.5}
.bs-resume__list{display:flex;gap:14px;list-style:none!important;padding:4px 3px 12px!important;margin:0!important;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
.bs-resume__item{display:flex;flex:0 0 clamp(170px,calc((100% - 56px)/5),230px);scroll-snap-align:start;list-style:none!important;margin:0!important;padding:0!important}
.bs-resume__link{display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding:12px;border:1px solid #e6e6e6;border-radius:14px;background:#fff;color:#222!important;text-decoration:none!important;gap:9px}
.bs-resume__link:hover{border-color:#e20000;background:#fffafa}
.bs-resume__link:focus-visible{outline:3px solid #e20000;outline-offset:1px}
.bs-resume__image{display:flex;align-items:center;justify-content:center;height:116px;flex:none}
.bs-resume__image img{display:block;width:100%;height:100%;object-fit:contain;max-height:116px}
.bs-resume__name{font-size:13px;line-height:1.5;overflow-wrap:anywhere;font-weight:500}
.bs-resume__price{font-size:15px;font-weight:700;line-height:1.5;margin-top:auto;padding-top:4px}
.bs-resume__cta{display:flex;justify-content:space-between;align-items:center;color:#c00;font-weight:600;font-size:12px;line-height:1.5;padding-top:8px;border-top:1px solid #eee}
@media(max-width:768px){.bs-resume{margin:22px 0}.bs-resume__list{gap:10px}.bs-resume__item{flex-basis:172px}.bs-resume__link{padding:11px}.bs-resume__image{height:102px}.bs-resume__image img{max-height:102px}}
.bs-resume{padding-inline:3%;box-sizing:border-box}
.bs-resume__name+.bs-resume__cta{margin-top:auto}
@media(max-width:768px){.bs-resume{padding-inline:12px}}
/* Moje urządzenia — odizolowany dialog i wejście przy wyszukiwarce. */
.mg-host{flex-wrap:wrap!important}
.mg-entry{display:flex;align-items:center;gap:10px;flex:0 0 100%;grid-column:1/-1;width:100%;box-sizing:border-box;margin:10px 0 0;font-size:12px;line-height:1.5;color:#666}
.mg-entry small{font-size:12px;line-height:1.5}
.mg-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 14px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#222!important;font:600 13px/1.4 Poppins,Arial,sans-serif;text-decoration:none!important;cursor:pointer}
.mg-button:hover{border-color:#e20000;background:#fff8f8}
.mg-button:focus-visible,.mg-text-button:focus-visible{outline:3px solid #23365b;outline-offset:2px}
.mg-primary{background:#e20000!important;color:#fff!important;border-color:#e20000!important}
.mg-primary:hover{background:#b90000!important}
.mg-button:disabled{opacity:.5;cursor:not-allowed}
.mg-text-button{border:0;background:none;padding:8px;color:#b90000;font:500 12px/1.5 Poppins,Arial,sans-serif;text-decoration:underline;cursor:pointer}
.mg-save-context{margin-top:5px}
.mg-dialog{position:fixed;inset:0;box-sizing:border-box;width:min(700px,calc(100vw - 24px));max-width:700px;max-height:90vh;max-height:90dvh;margin:auto;padding:0;border:0;border-radius:16px;background:#fff;color:#222;box-shadow:0 15px 70px #0004;overflow:hidden;font:400 14px/1.5 Poppins,Arial,sans-serif}
.mg-dialog[open]{display:flex;flex-direction:column}
.mg-dialog::backdrop{background:#0009}
.mg-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid #eee;flex:none}
.mg-header h2{margin:0;font-size:23px;line-height:1.3;font-weight:700;letter-spacing:normal}
.mg-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#f4f4f4;color:#222;font:28px/1 Arial,sans-serif;cursor:pointer}
.mg-close:focus-visible{outline:3px solid #23365b;outline-offset:2px}
.mg-content{padding:18px 22px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.mg-note{margin:0 0 16px;color:#666;font-size:12px;line-height:1.6}
.mg-content>.mg-button+.mg-note{margin-top:16px}
.mg-empty{padding:16px;background:#fff7f7;border:1px solid #f1dada;border-radius:10px;font-size:14px}
.mg-list{list-style:none!important;padding:0!important;margin:0 0 18px!important;display:grid;gap:12px}
.mg-card{list-style:none!important;padding:16px!important;margin:0!important;border:1px solid #e5e5e5;border-radius:12px;background:#fff}
.mg-card h3{margin:6px 0;font-size:17px;line-height:1.5;letter-spacing:normal;overflow-wrap:anywhere;font-weight:700}
.mg-kind{display:inline-block;border-radius:20px;padding:3px 9px;background:#f3f3f3;font-weight:600;font-size:11px}
.mg-model{margin:5px 0;color:#555;font-size:13px;overflow-wrap:anywhere}
.mg-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.mg-storage{display:block;margin-top:10px;color:#777;font-size:11px}
.mg-status{flex:none;padding:0 22px;min-height:0;font-size:13px;color:#216e30}
.mg-status:not(:empty){padding-top:12px;padding-bottom:12px;border-top:1px solid #eee}
.mg-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 0 4px;border-top:1px solid #eee;margin-top:18px}
.mg-form h3,.mg-help,.mg-remember,.mg-form>.mg-actions,.mg-error{grid-column:1/-1}
.mg-form h3{font-size:18px;font-weight:700;line-height:1.4;margin:0 0 4px;letter-spacing:normal}
.mg-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;min-width:0}
.mg-field input,.mg-field select{box-sizing:border-box;display:block;width:100%;min-width:0;height:46px;border:1px solid #ccc;border-radius:8px;padding:10px 11px;background:#fff;color:#222;font:400 14px/1.4 Poppins,Arial,sans-serif}
.mg-field input:focus,.mg-field select:focus{outline:2px solid #23365b;outline-offset:1px}
.mg-help{font-size:12px;color:#555;border-radius:8px;background:#f7f7f7;padding:12px}
.mg-help summary{font-weight:600;cursor:pointer;color:#222;list-style:revert}
.mg-help p{margin:8px 0 0;line-height:1.6}
.mg-remember{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.6;font-weight:400}
.mg-remember input{appearance:auto;width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:#e20000}
.mg-error{color:#bd0000;font-size:12px;margin:0}
@media(max-width:600px){.mg-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:12px}.mg-header{padding:14px 16px}.mg-header h2{font-size:21px}.mg-content{padding:16px}.mg-form{grid-template-columns:1fr}.mg-entry{align-items:flex-start;flex-wrap:wrap;gap:6px}.mg-entry small{flex-basis:100%}.mg-card{padding:13px!important}.mg-status{padding-inline:16px}}