/* NAPRAWA POLSKICH ZNAKÓW W CZCIONCE DOSIS */
/* 1. Importujemy czcionkę z wyraźnym żądaniem polskich znaków (latin-ext) */
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700&subset=latin,latin-ext');

/* 2. Ponownie przypisujemy czcionkę do całej strony */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li {
    font-family: 'Dosis', sans-serif !important;
}

/* =========================================================
   PRESTASHOP – SWATCHE KOLOR/TEXTURA: 75x75 + PREMIUM UX
   - tylko swatche (color/texture), nie dotyka innych wariantów
   - mgiełka na niewybranych, hover premium
   - 1 czerwona ramka na wybranym, bez podwójnej
   ========================================================= */

/* --- 1) BAZA: tylko swatche color/texture --- */
#product .product-variants :is(a, span, label).color,
#product .product-variants :is(a, span, label).texture,
#product .product-variants-item :is(a, span, label).color,
#product .product-variants-item :is(a, span, label).texture {
  /* rozmiar */
  width: 75px !important;
  height: 75px !important;

  /* wygląd */
  display: inline-block !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;

  /* brak stałych ramek na niewybranych */
  border: none !important;
  outline: none !important;

  /* delikatna mgiełka na niewybranych */
  filter: blur(0.6px) brightness(0.96) saturate(0.92) !important;

  /* animacje */
  transition: filter .18s ease, transform .14s ease, box-shadow .18s ease !important;
  will-change: transform, filter !important;

  /* żeby hover zawsze “łapał” */
  pointer-events: auto !important;
}

/* Jeśli swatch jest renderowany jako <img> wewnątrz */
#product .product-variants :is(a, span, label).color > img,
#product .product-variants :is(a, span, label).texture > img,
#product .product-variants-item :is(a, span, label).color > img,
#product .product-variants-item :is(a, span, label).texture > img {
  width: 75px !important;
  height: 75px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

/* --- 2) HOVER: tylko na swatchach (niewybranych) --- */
#product .product-variants :is(a, span, label).color:hover,
#product .product-variants :is(a, span, label).texture:hover,
#product .product-variants-item :is(a, span, label).color:hover,
#product .product-variants-item :is(a, span, label).texture:hover {
  filter: blur(0.15px) brightness(1) saturate(1) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.16) !important;
  cursor: pointer !important;
}

/* --- 3) WYBRANY: jedna ramka (outline) + wycięcie “drugiej” z motywu --- */
#product .product-variants input:checked + :is(label, span).color,
#product .product-variants input:checked + :is(label, span).texture,
#product .product-variants-item input:checked + :is(label, span).color,
#product .product-variants-item input:checked + :is(label, span).texture,
#product .product-variants :is(a, span, label).color.selected,
#product .product-variants :is(a, span, label).texture.selected,
#product .product-variants :is(a, span, label).color.checked,
#product .product-variants :is(a, span, label).texture.checked,
#product .product-variants :is(a, span, label).color[aria-checked="true"],
#product .product-variants :is(a, span, label).texture[aria-checked="true"],
#product .product-variants-item :is(a, span, label).color.selected,
#product .product-variants-item :is(a, span, label).texture.selected,
#product .product-variants-item :is(a, span, label).color.checked,
#product .product-variants-item :is(a, span, label).texture.checked,
#product .product-variants-item :is(a, span, label).color[aria-checked="true"],
#product .product-variants-item :is(a, span, label).texture[aria-checked="true"] {
  /* ostry wybrany */
  filter: none !important;
  transform: none !important;

  /* JEDNA ramka */
  outline: 4px solid #e60023 !important;
  outline-offset: 2px !important;

  /* kasujemy potencjalne “drugie ramki” z motywu */
  box-shadow: none !important;
  border: none !important;
}

/* Wyłącz hover-owe podnoszenie na wybranym (żeby nie “skakał”) */
#product .product-variants input:checked + :is(label, span).color:hover,
#product .product-variants input:checked + :is(label, span).texture:hover,
#product .product-variants-item input:checked + :is(label, span).color:hover,
#product .product-variants-item input:checked + :is(label, span).texture:hover,
#product .product-variants :is(a, span, label).selected:hover,
#product .product-variants-item :is(a, span, label).selected:hover,
#product .product-variants :is(a, span, label).checked:hover,
#product .product-variants-item :is(a, span, label).checked:hover,
#product .product-variants :is(a, span, label)[aria-checked="true"]:hover,
#product .product-variants-item :is(a, span, label)[aria-checked="true"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Jeśli motyw rysował dodatkowy ring pseudo-elementem – wyłączamy go TYLKO na wybranym */
#product .product-variants input:checked + :is(label, span).color::before,
#product .product-variants input:checked + :is(label, span).texture::before,
#product .product-variants input:checked + :is(label, span).color::after,
#product .product-variants input:checked + :is(label, span).texture::after,
#product .product-variants-item input:checked + :is(label, span).color::before,
#product .product-variants-item input:checked + :is(label, span).texture::before,
#product .product-variants-item input:checked + :is(label, span).color::after,
#product .product-variants-item input:checked + :is(label, span).texture::after,
#product .product-variants :is(a, span, label).selected::before,
#product .product-variants :is(a, span, label).selected::after,
#product .product-variants-item :is(a, span, label).selected::before,
#product .product-variants-item :is(a, span, label).selected::after {
  content: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* --- 4) BEZPIECZNIK: nie dotykamy innych wariantów (radio/select) --- */
/* (Nic tu nie zmniejszamy — ten blok jest celowo “pusty” w sensie braku width/height na input/select)
   Zostawiamy normalne zachowanie motywu dla tekstowych radio/selectów. */
#product .product-variants select,
#product .product-variants input:not(.input-color),
#product .product-variants-item select,
#product .product-variants-item input:not(.input-color) {
  /* nie ustawiamy width/height, żeby nic nie popsuć */
}

/* ===== FIX: wymuś 75x75 dla tekstur/kolorów + obrazków w środku ===== */

/* swatch (kontener) */
#product .product-variants :is(a, span, label).color,
#product .product-variants :is(a, span, label).texture,
#product .product-variants-item :is(a, span, label).color,
#product .product-variants-item :is(a, span, label).texture {
  width: 75px !important;
  height: 75px !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  overflow: hidden !important;         /* ważne, gdy img jest większy */
}

/* obrazek gdziekolwiek w środku swatcha (nie tylko jako direct child) */
#product .product-variants :is(a, span, label).color img,
#product .product-variants :is(a, span, label).texture img,
#product .product-variants-item :is(a, span, label).color img,
#product .product-variants-item :is(a, span, label).texture img {
  width: 75px !important;
  height: 75px !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
}

/* jeśli tekstura jest jako background-image */
#product .product-variants :is(a, span, label).color,
#product .product-variants :is(a, span, label).texture,
#product .product-variants-item :is(a, span, label).color,
#product .product-variants-item :is(a, span, label).texture {
  background-size: cover !important;
  background-position: center !important;
}

.product-extra-options-note{
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: #f5f8fc;
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  color: #3b4a5a;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
}

/* ikonka info po lewej */
.product-extra-options-note:before{
  content: "ℹ";
  font-size: 16px;
  font-weight: 600;
  color: #4a7ecb;
  margin-right: 8px;
}

/* ===== RADIO jako kafelki "jak swatche" (nie dotyka color/texture) ===== */

/* ukryj natywne kółko, żeby wyglądało jak kafelek */
#product .product-variants input[type="radio"]:not(.input-color) {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* kafelek (label/span obok radio) – tylko NIE color/texture */
#product .product-variants input[type="radio"]:not(.input-color) + :is(label, span):not(.color):not(.texture) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 75px !important;
  min-height: 75px !important;
  padding: 10px 12px !important;

  border-radius: 10px !important;
  box-sizing: border-box !important;

  /* “przygaszenie” jak przy swatchach, ale bez blur (żeby tekst był czytelny) */
  opacity: 0.85 !important;
  filter: brightness(0.96) saturate(0.92) !important;

  transition: filter .18s ease, transform .14s ease, box-shadow .18s ease, opacity .18s ease, outline-color .18s ease !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* hover – “odmglenie” (czyli normalny wygląd) + lift */
#product .product-variants input[type="radio"]:not(.input-color) + :is(label, span):not(.color):not(.texture):hover {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.16) !important;
}

/* wybrane – jedna czerwona ramka jak swatch */
#product .product-variants input[type="radio"]:not(.input-color):checked + :is(label, span):not(.color):not(.texture) {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;

  outline: 4px solid #e60023 !important;
  outline-offset: 2px !important;

  box-shadow: none !important;  /* żeby nie było „drugiej ramki” */
  border: none !important;
}

/* ===== RADIO: wymuś układ w rzędzie (a nie kolumnie) ===== */

.product-variants ul.type-radio {
  display: flex !important;          /* zamiast inline-flex */
  flex-direction: row !important;    /* kluczowe */
  flex-wrap: wrap !important;        /* kluczowe */
  gap: 12px !important;
  align-items: flex-start !important;
}

/* każdy LI ma być “kafelkiem”, nie pełną linią */
.product-variants ul.type-radio > li.input-container {
  width: auto !important;
  flex: 0 0 auto !important;         /* zdejmuje flex-basis 100% */
  max-width: none !important;
}

/* sam napis jako kafelek */
.product-variants ul.type-radio > li.input-container > .radio-label {
  display: inline-flex !important;
  width: auto !important;

  min-width: 75px !important;
  min-height: 75px !important;
  align-items: center !important;
  justify-content: center !important;
}





/* ===== FIX: galeria produktu – przyciski mają być klikalne ===== */

#product-images-cont {
  position: relative;
  z-index: 1;
}

/* najczęstsze klasy przycisków w sliderach (Slick/Swiper/Owl + różne motywy) */
#product-images-cont .slick-prev,
#product-images-cont .slick-next,
#product-images-cont .swiper-button-prev,
#product-images-cont .swiper-button-next,
#product-images-cont .owl-prev,
#product-images-cont .owl-next,
#product-images-cont .js-qv-mask,
#product-images-cont .thumbs-nav,
#product-images-cont .product-images-navigation,
#product-images-cont .product-images-arrows,
#product-images-cont .images-nav,
#product-images-cont [class*="prev"],
#product-images-cont [class*="next"] {
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* czasem motyw robi “nakładkę” pseudo-elementem na kontenerze – wyłącz jej klikalność */
#product-images-cont::before,
#product-images-cont::after {
  pointer-events: none !important;
}


/* ===== Sticky bar w product-info-section (neutralny) ===== */
#product .product-info-section .sticky-config-bar{
  position: sticky;
  top: 0;                 /* jeśli masz sticky header, ustaw np. 70px */
  z-index: 99;

  background: #fff;
  border: 0 1px 1px solid rgba(0,0,0,0.10);
  border-radius: 0 0 12px 12px;

  padding: 10px 12px;
  margin: 0 0 12px 0;

  display: none;          /* domyślnie ukryty */
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  box-shadow: 0 15px 15px rgba(0,0,0,0.12);
}

/* ===== Desktop (>= 1024px) – uwzględnij górny sticky header 34px ===== */
@media (min-width: 1024px){
  #product .product-info-section .sticky-config-bar{
    top: 34px;
  }
}

#product .product-info-section .sticky-config-bar{
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);     /* start wyżej */
  pointer-events: none;

  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

#product .product-info-section .sticky-config-bar.is-visible{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

#product .product-info-section .sticky-config-bar .scb-title{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#d01920;
}

#product .product-info-section .sticky-config-bar .scb-price{
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  color:#d01920;
}


/*wygląd cech w miniaturach produktów*/

/* usuń ewentualną "ramkę" na całym bloku (jeśli motyw ją daje) */
.product-miniature .miniature-attributes{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 8px;
}

/* układ: nazwa cechy + zestaw kafelków wartości */
.product-miniature .miniature-attributes .pk_feature_item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 6px 0;
}

/* dwukropek chowamy */
.product-miniature .miniature-attributes .pk_feature_item small{
  display:none !important;
}

.product-miniature .miniature-attributes .pk_feature_item strong{
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
}

/* kontener na wartości */
.product-miniature .miniature-attributes .pk_feature_values{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* pojedyncza wartość jako badge */
.product-miniature .miniature-attributes .pk_feature_value{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f1f1f1;
  color:#333;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

.product-miniature .miniature-attributes .pk_feature_value{
  text-decoration:none;
}

.product-miniature .miniature-attributes .pk_feature_value:hover{
  background:#e6e6e6;
}

/* TŁO CIEŃ WOKOŁO MINIATURY PRODUKTU */
article.product-miniature {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform, box-shadow;
  padding:0 5px;
}

article.product-miniature:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}