/* === GLOBALNE TŁO === */
html, body,
#layout_main,
#content,
.page-content,
.category-listing,
.products,
.products-grid,
.listing__grid,
.product-list {
  background: #ffffff !important;
}

/* === UNIWERSALNY STYL KAFELKÓW PRODUKTÓW === */
.product, .product__tile, .product-tile {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}
.product:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}

/* === ZDJĘCIA PRODUKTÓW === */
.product-tile__image,
.product__image,
.product__photo,
.product__image-wrapper {
  background: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
}

/* Neutralizacja tła */
.product-tile__image picture,
.product__image picture,
.product__photo picture,
.product-tile__image source,
.product__image source,
.product__photo source {
  background: #ffffff !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.1) contrast(1.05) !important;
}

/* Obrazki produktów */
.product-tile__image img,
.product__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #ffffff !important;
  filter: brightness(1.1) contrast(1.1) saturate(1.05) !important;
  transition: transform 0.3s ease !important;
}
.product:hover img {
  transform: scale(1.04);
}

/* === TEKSTY === */
.product-tile__name,
.product__name,
.product-name {
  color: #000 !important;
  font-weight: 500 !important;
  margin: 10px 0 6px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  min-height: 42px !important;
}
.product-tile__price,
.product__price,
.price,
.prices {
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-top: 4px !important;
  display: block !important;
}

/* =======================================================
   TELEFON — 1 PRODUKT W KOLUMNIE DLA KATEGORII (NIE DLA KARUZEL)
   ======================================================= */
@media (max-width: 768px) {
  .products:not(.slider-products):not(.swiper):not(.box):not(.bestsellers):not(.new-products):not(.promotions),
  .products-grid,
  .listing__grid,
  .product-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .product,
  .product__tile,
  .product-tile {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 auto 22px auto !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
}

/* =======================================================
   STRONA GŁÓWNA — KARUZELE (NASZE HITY / NOWOŚCI / PROMOCJE)
   ======================================================= */
.box.products,
.slider-products,
.swiper,
.bestsellers,
.new-products,
.promotions {
  display: flex !important;
  align-items: stretch !important;
}

.box.products .product,
.slider-products .product,
.swiper .product,
.bestsellers .product,
.new-products .product,
.promotions .product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
}

/* Wyrównanie i dopasowanie treści wewnątrz kart */
.box.products .product .product-tile__info,
.slider-products .product .product-tile__info,
.swiper .product .product-tile__info,
.bestsellers .product .product-tile__info,
.new-products .product .product-tile__info,
.promotions .product .product-tile__info {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-bottom: 10px !important;
}

/* Dostosowanie do różnych długości tytułów */
.box.products .product .product-name,
.slider-products .product .product-name,
.swiper .product .product-name,
.bestsellers .product .product-name,
.new-products .product .product-name,
.promotions .product .product-name {
  display: flex !important;
  align-items: flex-end !important;
  flex-grow: 1 !important;
}

/* === Naprawa wysokości dla produktów ładowanych dynamicznie (lazy load) === */
@keyframes equalizeHeight {
  from { opacity: 1; }
  to { opacity: 1; }
}
.box.products .product,
.slider-products .product,
.swiper .product,
.bestsellers .product,
.new-products .product,
.promotions .product {
  animation: equalizeHeight 0.1s ease-in-out;
  animation-iteration-count: 5;
}

/* =======================================================
   STOPKA I SEKCJE DOLNE — PEŁNA SZEROKOŚĆ NA STRONACH CMS
   ======================================================= */

/* Na stronach CMS (B2B, Kontakt, O firmie) rozciągamy sekcje dolne */
body[class*="cms"] footer,
body[class*="cms"] #footer,
body[class*="cms"] .layout__footer,
body[class*="cms"] .section-benefits,
body[class*="cms"] .benefits,
body[class*="cms"] #benefits,
body[class*="cms"] .section-newsletter,
body[class*="cms"] .newsletter,
body[class*="cms"] #newsletter {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

/* Kolorystyka sekcji */
.section-benefits,
.benefits,
#benefits,
.section-newsletter,
.newsletter,
#newsletter {
  background: #000 !important;
  color: #fff !important;
}

.section-benefits h2,
.section-newsletter h3,
.newsletter h3 {
  color: #fff !important;
  text-align: center;
}

/* === STOPKA === */
footer,
#footer,
.layout__footer {
  background: #000 !important;
  color: #fff !important;
  width: 100% !important;
}

footer a,
#footer a,
.layout__footer a {
  color: #fff !important;
}

footer .footer__bottom,
#footer .footer__bottom {
  background: #000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Dla bezpieczeństwa usuwamy poziomy scroll */
body {
  overflow-x: hidden !important;
}