/* === Menu (opcjonalnie) === */
[title="PROMOCJE" i] { color: #238FA7 !important; }
[title="OUTLET"   i] { color: #ff0000 !important; }

/* === Ukrycie ilości produktów === */
#projector_amount { display: none !important; }

/* === Hero banner === */
.hero-banner {
  display:block; position:relative; width:100%;
  border-radius:12px; overflow:hidden;
  aspect-ratio: 2840 / 1220;
}
@media (max-width: 768px) {
  .hero-banner { aspect-ratio: 950 / 630; }
}

/* =========================================
   1) Kategorie / listingi (strony listujące)
   ========================================= */
.search.products .product,
.projector_product {
  box-sizing: border-box !important;
  border: 1px solid #9aa3af !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.search.products .product:hover,
.projector_product:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.16) !important;
}

/* =========================================
   2) Strona główna – NOWOŚCI (hotspot)
   ========================================= */
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide {
  box-sizing: border-box !important;
  border: 1px solid #9aa3af !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.16) !important;
}
/* nie ucinaj cieni */
section[id^="main_hotspot_zone"] .swiper,
section[id^="main_hotspot_zone"] .swiper-wrapper {
  overflow: visible !important;
}

/* =========================================
   3) POLECAMY – slider na dole kategorii
   ========================================= */
.hotspot__wrapper .product.hotspot__product.swiper-slide {
  box-sizing: border-box !important;
  border: 1px solid #9aa3af !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.16) !important;
}
/* nie ucinaj cieni */
.hotspot__wrapper .swiper,
.hotspot__wrapper .swiper-wrapper {
  overflow: visible !important;
}
/* ===========================
   UPIĘKSZENIA (ADD-ON)
   =========================== */

/* 1) Delikatny zoom zdjęcia na hover (bez skakania layoutu) */
.product__icon picture,
.product__icon img {
  display: block;
  transition: transform .25s ease;
  will-change: transform;
}
.search.products .product:hover .product__icon picture,
.search.products .product:hover .product__icon img,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon picture,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon img,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon picture,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon img {
  transform: scale(1.035);
}

/* 2) Bardzo subtelne tło karty (gradient) */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide {
  background: linear-gradient(180deg,#fff 0%,#fafafa 100%) !important;
}

/* 3) Minimalna zmiana koloru ramki przy hover (akcent) */
.search.products .product:hover,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover {
  border-color: #7e8aa0 !important;
}

/* 4) Ładniejsze „badges” (NOWOŚĆ / PROMOCJA itd.) – bez rozjeżdżania */
.label_icons strong,
.badge,
[class*="label_"],
[class*="badge_"],
[class*="tag_"] {
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .2px;
}
[class*="promo"],
.badge--promo { background:#ffe8ec; color:#c61a3a; }
[class*="nowo"],
.badge--new   { background:#e8faf1; color:#1a7f4b; }

/* 5) Czytelniejsze ceny: większa kwota, delikatna jednostka/”stara” cena */
.price, .product__price { font-size: 18px; font-weight: 700; }
.price small, .product__price small,
.price .unit { font-size: 12px; opacity: .75; margin-left: 4px; }
.old_price, .price--old { text-decoration: line-through; opacity: .55; }

/* 6) Mikro-interakcje i szacunek dla reduced-motion */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 7) Lepszy focus klawiaturą (a11y) */
.search.products .product:focus-within,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:focus-within,
.hotspot__wrapper .product.hotspot__product.swiper-slide:focus-within {
  outline: 3px solid rgba(35,143,167,.35);
  outline-offset: 3px;
}

/* 8) Stabilny układ kart (kolumna) + czystsze odstępy treści */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide {
  display: flex; flex-direction: column;
}
.product__content_wrapper { margin-top: 10px; }
.product__content_wrapper > *:last-child { margin-bottom: 0; }

/* === BRAND COLOR === */
:root { --lubatex: #291671; }  /* zmień tu, jeśli chcesz inny odcień */

/* --- wspólny selektor na „pudełko” zdjęcia --- */
.search.products .product .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon {
  position: relative;
  border-radius: 14px;
  overflow: hidden;                /* żeby ramka idealnie się wycinała */
  background: #fff;                /* jednolite tło pod PNG/WebP */
  /* subtelna stała obwódka w kolorze marki (cieniowana do środka) */
  box-shadow: inset 0 0 0 2px var(--lubatex);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* obrazek – ładny zoom i proporcje */
.search.products .product .product__icon picture,
.search.products .product .product__icon img,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon picture,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon img,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon picture,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease;
}

/* HOVER: mocniejsza ramka + miękki zoom obrazka */
.search.products .product:hover .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon {
  box-shadow: inset 0 0 0 4px var(--lubatex), 0 0 0 0 rgba(0,0,0,0); /* 4px inside */
}
.search.products .product:hover .product__icon img,
.search.products .product:hover .product__icon picture,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon img,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon picture,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon img,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon picture {
  transform: scale(1.035);
}

/* FOCUS (klawiatura) – czytelny obrys w kolorze marki, bez przesunięć layoutu */
.search.products .product:focus-within .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:focus-within .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide:focus-within .product__icon {
  box-shadow: inset 0 0 0 4px var(--lubatex);
}

/* redukcja ruchu – dla wrażliwych użytkowników */
@media (prefers-reduced-motion: reduce) {
  .product__icon, .product__icon img, .product__icon picture { transition: none !important; }
}
/* =========================
   TŁO KART – WYBIERZ PRESET
   ========================= */

/* PRESET A — "brandowy" bardzo jasny błękit */
:root {
  --card-bg-top: #fbe5d1;   /* jaśniejsza góra */
  --card-bg-bot: #f8caa3;   /* ciut ciemniejszy dół */
  --img-box-bg:  #ffffff;   /* tło za samym zdjęciem – zostawiamy białe */
}

/* PRESET B — neutralny, elegancki szary (cieplejszy niż #fafafa) */
/*
:root {
  --card-bg-top: #fbfcfe;
  --card-bg-bot: #f3f5f9;
  --img-box-bg:  #ffffff;
}
*/

/* PRESET C — „kremowe” off-white (bardzo subtelne ocieplenie) */
/*
:root {
  --card-bg-top: #fffef9;
  --card-bg-bot: #faf6eb;
  --img-box-bg:  #ffffff;
}
*/

/* Zastosuj wybrane tło do kart (listing + home + polecamy) */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide {
  background: linear-gradient(180deg, var(--card-bg-top) 0%, var(--card-bg-bot) 100%) !important;
}

/* Pudełko ze zdjęciem zostaje białe, żeby produkty nie „siniały” */
.search.products .product .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon {
  background: var(--img-box-bg) !important;
}
/* ===== LISTING: jaśniejsza szarość u góry → jasny szary u dołu ===== */
:root{
  /* jaśniejsza góra */
  --listing-bg-top: #f7f7f8;  /* bardzo jasny szary */
  /* jasny szary dół */
  --listing-bg-bot: #e9ecef;  /* jasny szary */
}

/* Kategorie / strona „Nowości” (tylko listing) */
.search.products .product,
.projector_product{
  background: linear-gradient(180deg, var(--listing-bg-top) 0%, var(--listing-bg-bot) 100%) !important;
}

/* pudełko na zdjęcie zostaje białe — żeby produkty nie „szarzały” */
.search.products .product .product__icon,
.projector_product .product__icon{
  background: #fff !important;
}

/* HOME i POLECAMY bez zmian (nic tu nie definiujemy) */
/* --- kolor marki (zmień, jeśli chcesz) --- */
/* kolor akcentu */
:root { --lubatex: #291671; }

/* BLOG na stronie głównej */
#main_blog .article__image_wrapper{
  position: relative !important;
  display: block !important;
  padding: 0 !important;           /* zerujemy ewentualny padding */
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #e9ecef !important;     /* jasne tło pod zdjęciem */
}

/* Ramka narysowana pseudo-elementem – ZAWSZE 4 boki */
#main_blog .article__image_wrapper::before{
  content: "";
  position: absolute;
  inset: 0;                        /* równo do krawędzi wrappera */
  border: 3px solid var(--lubatex);
  border-radius: inherit;
  pointer-events: none;            /* nie blokuje kliknięcia w link */
}

/* Hover – minimalnie grubsza ramka */
#main_blog .article__item:hover .article__image_wrapper::before{
  border-width: 4px;
}

/* Zdjęcie – zostawiamy contain; tylko płynność i delikatny zoom */
#main_blog .article__image_wrapper img.article__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .25s ease;
}
#main_blog .article__item:hover .article__image_wrapper img.article__image{
  transform: scale(1.03);
}

/* mniej ruchu dla wrażliwych użytkowników */
@media (prefers-reduced-motion: reduce){
  #main_blog .article__image_wrapper::before,
  #main_blog .article__image_wrapper img.article__image { transition: none !important; }
}