/* GLOBALNE: powiększony kontener */
.variable-max-width,
.max-width-1200,
.container {
  max-width: 1900px !important;
}

.payment_tunnel .container,
.order_process .container,
.container.basketedit_page,
.container.prepaid_page {
  max-width: 1900px !important;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1900px !important;
  }
}
#projector_dictionary > div > div:nth-child(3) {
  display: none !important;
}
/* Zwiększenie liczby kolumn do 3 na tablecie i większych */
@media (min-width: 757px) {
    /* Ustaw 3 kolumny dla kontenera produktów i włącz tryb grid, jeśli jeszcze nie jest */
    .products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Wymuszenie 3 kolumn na laptopach/desktopach */
@media (min-width: 979px) {
    .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* 📱💻 Wymuszenie układu 2 kafelków obok siebie na mobile/tablet */
@media (max-width: 979px) {
  /* Nadpisanie logiki grid i aktywacja flex/scrolling */
  .products.hotspot__products.swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important; /* zapobiega łamaniu do nowego wiersza */
    overflow-x: auto !important; /* umożliwia przewijanie */
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important; /* odstęp między produktami */
  }

  /* Rozmiar każdego produktu tak, aby 2 mieściły się na ekranie z luką */
  .products.hotspot__products.swiper-wrapper .product.hotspot__product {
    flex-shrink: 0 !important; /* Zapobiega kurczeniu się kafelków */
    scroll-snap-align: start !important;
    width: calc(50% - 5px) !important; /* 50% - połowa odstępu (gap) */
    max-width: calc(50% - 5px) !important;
    box-sizing: border-box !important;

    /* Zapewniamy wycentrowanie obrazka i wypełnienie kafelka */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* 📱 Mniejsze telefony: delikatnie zmniejszamy odstęp */
@media (max-width: 550px) {
  .products.hotspot__products.swiper-wrapper {
    gap: 5px !important;
  }
  .products.hotspot__products.swiper-wrapper .product.hotspot__product {
    width: calc(50% - 2.5px) !important;
    max-width: calc(50% - 2.5px) !important;
  }
}
/* Wymuszenie 4 kolumn na większych ekranach (1400px i więcej) */
@media (min-width: 1600px) {
    .products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
/* 1. Ukrywamy checkbox (jest tylko przełącznikiem) */
.css-toggle-input {
    display: none;
}

/* 2. Domyślnie ukrywamy część tekstu za pomocą max-height */
.hidden-content-for-css {
    max-height: 0;
    overflow: hidden;
    /* Dodajemy płynną animację */
    transition: max-height 0.7s ease-in-out; 
}

/* 3. Domyślnie ukrywamy tekst "Zwiń" */
.read-more-button-css .label-text-hide {
    display: none;
}

/* ========================================================= */
/* 4. LOGIKA KLIKNIĘCIA (GDY CHECKBOX JEST ZAZNACZONY) */
/* Selektor ~ (sibling) jest kluczowy! */
/* ========================================================= */

/* POKAŻ zwiniętą treść */
#read-more-toggle-css:checked ~ .read-more-content-container .hidden-content-for-css {
    /* Ustawienie bardzo dużej wartości gwarantuje rozwinięcie całej treści! */
    max-height: 5000px; 
}

/* Zmień tekst przycisku na "Zwiń" */
#read-more-toggle-css:checked ~ .read-more-trigger-wrapper .label-text-hide {
    display: inline;
}

/* Ukryj tekst "Czytaj więcej" */
#read-more-toggle-css:checked ~ .read-more-trigger-wrapper .label-text-show {
    display: none;
}


/* 5. STYLIZACJA PRZYCISKU (na podstawie Pani poprzedniego kodu) */
.read-more-trigger-wrapper {
    text-align: center;
    margin: 20px 0;
}

.read-more-button-css {
    /* Upewnienie się, że label działa jak blok klikalny */
    display: inline-block; 
    background-color: #379e9d;
    color: #ffffff;
    border: 1px solid #379e9d;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.read-more-button-css:hover {
    background-color: #000000;
    border-color: #000000;
}
.label {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  left: 6px !important;
  bottom: 6px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

:root {
  --label-container-top: auto !important;
  --label-container-bottom: 6px !important;
}
/* Zapobiega nakładaniu się wielu etykiet */
.labels-container {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important; /* odstęp między labelkami */
  z-index: 999 !important;
}

.label {
  position: static !important; /* pozycję kontroluje kontener */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* żeby tekst się nie łamał */
}
.luigi-ac-rest-main .label.--bestseller,
.luigi-ac-products .label.--bestseller {
    display: none !important;
}
.luigi-ac-rest-main .label,
.luigi-ac-products .label {
    display: none !important;
}
#menu_buttons2 > div:nth-child(1),
#menu_buttons2 > div:nth-child(2),
#menu_buttons2 > div:nth-child(3) {
  padding-left: 2px !important;
  padding-right: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#menu_buttons2 {
  display: flex !important;
  flex-wrap: nowrap !important; /* wszystko w jednym wierszu */
  justify-content: flex-start !important; /* elementy z lewej */
  align-items: center !important; /* pionowe wyrównanie */
  gap: 0 !important; /* brak przerwy między elementami, padding zrobi swoje */
}

#menu_buttons2 > div {
  padding-left: 2px !important;
  padding-right: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
#menu_buttons2 {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#menu_buttons2 > div {
  padding-left: 2px !important;
  padding-right: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important; /* poziome wyśrodkowanie obrazka */
  align-items: center !important;     /* pionowe wyśrodkowanie obrazka */
  box-sizing: border-box !important;
}

#menu_buttons2 > div img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}
/* ✅ Wersja mobilna: elementy pod sobą, 100% szerokości, równe odstępy góra/dół */
@media (max-width: 757px) {
  #menu_buttons2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;   /* dziecko ma wypełnić całą szerokość */
    gap: 0 !important;                 /* odstęp robimy paddingiem na elemencie */
    width: 100% !important;
  }

  /* Każdy kafelek na 100% i z równymi odstępami góra/dół */
  #menu_buttons2 .menu_button_wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 0 !important;         /* równe odstępy top/bottom */
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  #menu_buttons2 .menu_button_wrapper:first-child { padding-top: 0 !important; }
  #menu_buttons2 .menu_button_wrapper:last-child  { padding-bottom: 0 !important; }

  /* Nadpisanie klas siatki, które mogą zawężać element (col-md-4/col-6) */
  #menu_buttons2 .col-md-4,
  #menu_buttons2 .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Link i picture też na pełną szerokość */
  #menu_buttons2 .menu_button_wrapper > a,
  #menu_buttons2 .menu_button_wrapper > picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Obrazek naprawdę na 100% szerokości */
  #menu_buttons2 .menu_button_wrapper img {
    display: block !important;
    width: 100% !important;      /* kluczowe */
    max-width: 100% !important;  /* wyłącza ewentualne limity motywu */
    height: auto !important;
  }
}
/* ✅ Wersja mobilna: elementy pod sobą, pełna szerokość, wyśrodkowane i z równymi paddingami */
@media (max-width: 757px) {
  #menu_buttons2 {
    display: flex !important;
    flex-direction: column !important;  /* pionowy układ */
    align-items: center !important;     /* wyśrodkowanie elementów w poziomie */
    justify-content: center !important;
    width: 100% !important;
    gap: 0 !important;                  /* odstęp robimy paddingiem */
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Każdy kafelek na pełną szerokość, z równymi paddingami */
  #menu_buttons2 .menu_button_wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px !important;      /* równy padding: top/bottom 10px, left/right 10px */
    margin: 0 auto !important;
  }
}
/* 🔽 Większy odstęp pod kontenerem #menu_buttons2 */
@media (max-width: 757px) {
  #menu_buttons2 {
    padding-bottom: 30px !important; /* możesz zwiększyć np. do 40px */
  }
}
/* 📱 Wersja mobilna – odstęp 5px między elementami w kontenerze */
@media (max-width: 757px) {
  #menu_buttons2 {
    display: flex !important;
    flex-direction: column !important; /* elementy jeden pod drugim */
    gap: 5px !important;               /* 🔹 odstęp 5px między elementami */
  }
}
/* 📱💻 Układ tabletowy: dwa pierwsze obok siebie, trzeci pełnej szerokości,
   z równymi paddingami i wyrównaniem wysokości */
@media (min-width: 758px) and (max-width: 979px) {
  #menu_buttons2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 5px !important; /* 🔹 5px między elementami */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Pierwsze dwa elementy – po 50% szerokości z równymi paddingami */
  #menu_buttons2 .menu_button_wrapper:nth-child(1),
  #menu_buttons2 .menu_button_wrapper:nth-child(2) {
    flex: 0 0 calc(50% - 2.5px) !important;
    max-width: calc(50% - 2.5px) !important;
    padding: 5px !important; /* równe odstępy po bokach */
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  /* Trzeci element – pełna szerokość, z równym paddingiem */
  #menu_buttons2 .menu_button_wrapper:nth-child(3) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  /* Obrazki na pełną szerokość i wysokość */
  #menu_buttons2 .menu_button_wrapper a,
  #menu_buttons2 .menu_button_wrapper picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #menu_buttons2 .menu_button_wrapper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* wypełnia, zachowując proporcje */
  }
}
/* 💻 Dodatkowe wyrównanie dla wersji tabletowej */
@media (min-width: 758px) and (max-width: 979px) {
  #menu_buttons2 {
    justify-content: center !important;  /* wyśrodkowanie całego rzędu */
    padding-left: 5px !important;        /* równe odstępy po bokach */
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  #menu_buttons2 .menu_button_wrapper {
    margin: 0 auto !important;           /* środkowanie każdego elementu */
  }
}
/* 💻 Równy margines tylko w wersji tabletowej */
@media (min-width: 758px) and (max-width: 979px) {
  #menu_buttons2.section.row {
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    box-sizing: border-box !important;
  }
}
/* 🖥️ Duże ekrany – usuń padding left/right całkowicie */
@media (min-width: 1400px) {
  #menu_buttons2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #menu_buttons2 .menu_button_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* 🖥️ Duże ekrany: większa wysokość i pełne wypełnienie obrazkiem */
@media (min-width: 1400px) {
  /* łatwa zmiana wysokości w jednym miejscu */
  :root { --menu-buttons-tile-h: 420px; } /* podbij wg potrzeby: 380–520px */

  #menu_buttons2 {
    align-items: stretch !important;   /* dzieci rozciągają się na równą wysokość */
    padding-left: 0 !important;        /* jak chcesz bez bocznych paddingów */
    padding-right: 0 !important;
  }

  #menu_buttons2 .menu_button_wrapper {
    height: var(--menu-buttons-tile-h) !important;  /* stała wysokość kafelka */
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #menu_buttons2 .menu_button_wrapper a,
  #menu_buttons2 .menu_button_wrapper picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  #menu_buttons2 .menu_button_wrapper { aspect-ratio: 1.95 / 1 !important; height: auto !important; }


  #menu_buttons2 .menu_button_wrapper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;           /* obrazek = wysokość kafelka */
    object-fit: cover !important;      /* wypełnia bez zniekształceń */
  }
}
/* 💻🖥️ Laptop + duże ekrany: 5 produktów obok siebie */
@media (min-width: 980px) {
  .products.hotspot__products.swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important; /* równe odstępy */
    align-items: stretch !important;
    gap: 10px !important; /* odstęp między produktami — możesz zmienić np. na 5px */
  }

  /* Każdy produkt zajmuje 1/5 szerokości kontenera */
  .products.hotspot__products.swiper-wrapper .product.hotspot__product {
    flex: 0 0 calc(20% - 8px) !important; /* 100% / 5 = 20%, minus mały margines */
    max-width: calc(20% - 8px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* Obrazek zawsze dopasowany do szerokości produktu */
  .products.hotspot__products.swiper-wrapper .product.hotspot__product img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
}
/* ✅ Wersja bezpieczna dla SEO: Ukrycie wizualne elementu */
.article__text {
    /* Używamy styli dla klasy .sr-only / .hidden  */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Alternatywna próba - zneutralizowanie margin-bottom na potencjalnych elementach wewnętrznych */
#main_banner1.section,
#main_banner1 .main_slider {
    margin-bottom: 0 !important;
}
/* 📱💻 Wymuszenie układu 2 kolumn w wynikach wyszukiwania (#search) */
@media (max-width: 979px) {
    #search.products {
        /* Nadpisanie ustawień grid z Twojego globalnego kodu */
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important; /* Odstęp między kafelkami */
    }

    /* Dopasowanie szerokości kafelków (jeśli konieczne) */
    #search .product {
        width: 100% !important; 
        max-width: 100% !important; 
        
        /* Upewnienie się, że elementy nie są za małe z powodu starszych reguł */
        flex: auto !important; 
    }
}
/* 📱 Optymalizacja dla małych telefonów (poniżej 550px) */
@media (max-width: 550px) {
    #search.products {
        gap: 5px !important; /* Mniejszy odstęp między produktami */
    }
}
/* ✅ Rozciągnięcie #main_cms na pełną szerokość ekranu (full width) */
#main_cms {
    /* Używamy negatywnych marginesów, aby wyjść poza marginesy kontenera strony,
       które na telefonach wynoszą ok. 15px (zmienna --row_spacer) */
    width: 100% !important;
    position: relative !important; /* Wymagane dla poprawnego działania left/margin-left */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.article__block {
  display: flex;               /* Ustawia elementy obok siebie */
  flex-wrap: nowrap;           /* Zapobiega zawijaniu do kolejnego wiersza */
  justify-content: space-between; /* Równe odstępy między artykułami */
  align-items: flex-start;     /* Wyrównanie do góry */
  width: 100%;                 /* Szerokość 100% kontenera */
  box-sizing: border-box;      /* Poprawne obliczanie szerokości */
}

.article__item {
  flex: 1 1 32%;               /* Każdy artykuł zajmuje około 1/3 szerokości */
  box-sizing: border-box;
  margin: 0 2px;               /* Odstęp między artykułami */
}

.article__item img {
  width: 100%;                 /* Obrazek wypełnia całą szerokość kafelka */
  height: auto;                /* Zachowanie proporcji */
  display: block;
}

/* --- Mobile: tylko 2 elementy obok siebie, 3 ukryty --- */
@media (max-width: 768px) {
  .article__block {
    flex-wrap: wrap;           /* Pozwala zawinąć elementy przy mniejszych ekranach */
  }

  .article__item {
    flex: 1 1 48%;             /* Dwa elementy obok siebie (z marginesem) */
    margin: 1%;
  }

  /* Ukryj trzeci artykuł na mobile */
  .article__item:nth-child(3) {
    display: none;
  }
}
#blog-item .blog-item_sub.cm img.blog_image {
  display: none !important;
}
@media (min-width: 1200px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 100%;
    }
}
.price.--omnibus.omnibus_price {
    display: none !important;
}
/* Ustaw pozycję wrappera po lewej w kolumnowym flexie */
.product.hotspot__product.swiper-slide.d-flex.flex-column .product__content_wrapper {
  align-self: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  width: 100%; /* żeby tekst miał pełną szerokość i nie „kleił” się do środka */
}

/* Gdy sam wrapper ma display:flex i jest centrowany — odcentruj go */
.product.hotspot__product.swiper-slide.d-flex.flex-column .product__content_wrapper {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Dodatkowo „odcentruj” typowe elementy w środku */
.product.hotspot__product.swiper-slide.d-flex.flex-column .product__content_wrapper .product__name,
.product.hotspot__product.swiper-slide.d-flex.flex-column .product__content_wrapper .price,
.product.hotspot__product.swiper-slide.d-flex.flex-column .product__content_wrapper .price * {
  text-align: left !important;
  margin-left: 0 !important;
}
.products.hotspot__products.swiper-wrapper .product.hotspot__product.swiper-slide.d-flex.flex-column {
    background-color: #f1f1f1 !important;
    border-radius: 6px;
    padding: 1px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.products.hotspot__products.swiper-wrapper .product.hotspot__product.swiper-slide.d-flex.flex-column:hover {
    transform: translateY(-3px);
}
.article__image_wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* zachowuje proporcje */
  overflow: hidden;
}
.article__image_wrapper .article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.price__sub {
  font-size: 2rem !important; /* <-- tu ustaw nowy rozmiar, np. 2rem lub 20px */
}
.product__prices .omnibus_label {
  display: none !important;
}
.swiper-wrapper {
  align-items: stretch !important;
}

.swiper-slide {
  height: auto !important;
}
.product.hotspot__product .price_percent {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  font-size: 1.2em !important;
  font-weight: 550 !important;
  color: #751111 !important;
  padding: 2px 6px !important;
  padding-bottom: 0 !important; /* 🔥 zawsze bez dolnego paddingu */
  border-radius: 3px !important;
}
/* Domyślnie (telefony) — elementy jeden pod drugim */
.article__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  box-sizing: border-box;
  padding: 0 1rem;
}

/* Od 768px wzwyż – 3 kolumny, elastyczne dopasowanie */
@media (min-width: 768px) {
  .article__block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 100vw;
    overflow-x: hidden;
    align-items: stretch;
  }

  .article__item {
    min-width: 0;
  }
}
@media (max-width: 767.98px) {
  .article__block {
    display: flex;
    flex-direction: column;
    align-items: center;  /* wyśrodkowanie poziome */
    justify-content: center;
    gap: 20px;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .article__item {
    width: 100%;
    max-width: 420px;  /* szerokość pojedynczej karty – można zmienić */
    margin: 0 auto;    /* dla pewności centrowania */
  }
}
@media (max-width: 767.98px) {
  .products__wrapper.swiper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;           /* Odstęp między elementami */
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;         /* Usuwamy padding kontenera */
  }

  .products__wrapper .product.hotspot__product.swiper-slide {
    box-sizing: border-box !important;
    padding: 0 !important;         /* Bez paddingu wewnętrznego */
    margin: 2px !important;        /* 2px marginesu między produktami */
  }
}
/* 📱 Smukłe, szare, pulsujące strzałki — tylko na telefonach */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {

  .products__wrapper,
  .products.hotspot__products.swiper-wrapper {
    position: relative !important;
    isolation: isolate !important;
  }

  /* upewniamy się, że można przesuwać */
  .products.hotspot__products.swiper-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  /* 🡠 lewa strzałka */
  .products__wrapper::before,
  .products.hotspot__products.swiper-wrapper::before {
    content: "‹";
    position: absolute;
    left: 2px;                    /* maksymalnie przy krawędzi */
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;              /* mniejsza strzałka */
    font-weight: 700;
    color: rgba(120, 120, 120, 0.9); /* szary kolor */
    z-index: 9999;
    pointer-events: none;
    animation: arrowPulse 2s ease-in-out infinite;
  }

  /* 🡢 prawa strzałka */
  .products__wrapper::after,
  .products.hotspot__products.swiper-wrapper::after {
    content: "›";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
    color: rgba(120, 120, 120, 0.9);
    z-index: 9999;
    pointer-events: none;
    animation: arrowPulse 3s ease-in-out infinite;
  }

  @keyframes arrowPulse {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateY(-50%) scale(1.2); }
  }
}
@media (max-width: 767.98px) {
  main#content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.swiper-button-prev.--rounded,
.swiper-button-next.--rounded {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hotspot__name.headline__wrapper {
  padding-left: 15px !important;
}
.products__wrapper {
  margin-left: 5px !important;
  margin-right: 5px !important;
}
.product.hotspot__product.swiper-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.label_icons {
  padding-left: 0 !important;
}
.label_icons {
  position: absolute !important;
  left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.main_slider__item.swiper-slide {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 🎯 Marginesy po bokach tylko dla wybranych elementów pod main#content */
#projector_productname,
#projector_form,
#details_wrapper,
#product_questions_list {
  margin-right: 15px !important;
}
/* 🎯 Marginesy po bokach tylko dla wybranych elementów pod main#content */
#projector_photos,
#dynamic_tabs_handler,
#details_wrapper,
#product_questions_list {
  margin-left: 15px !important;
}
/* 📱 Wersja mobilna — mniejsze marginesy */
@media (max-width: 767.98px) {
  #projector_photos,
  #GalleryModalTemplate,
  #projector_productname,
  #projector_form,
  #dynamic_tabs_handler,
  #details_wrapper,
  #product_questions_list {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
@media (max-width: 768px) {
  .product_name__block.--label {
    display: none !important;
  }
}
@media (max-width: 768px) {
  #dynamic_tabs_handler {
    max-width: 100vw !important;   /* nigdy nie szerszy niż ekran */
    overflow-x: hidden !important; /* ukrywa poziome przewijanie */
    margin: 0 auto !important;     /* wyśrodkowanie */
    padding: 0 10px !important;    /* delikatny margines wewnętrzny */
    box-sizing: border-box !important;
  }

  #dynamic_tabs_handler .tabs__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #details_wrapper_mobile,
  #product_questions_list_mobile,
  #opinions_section_mobile {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
section#Progress.progress[style] {
  margin: 30px !important;
}
.label.--bargain.--omnibus {
  color: transparent !important;   /* ukryj oryginalny tekst */
  background-color: #000 !important; /* czarne tło */
}
#design_preview_window {
  display: none !important;
}
@media (min-width: 1024px) {
    .responsive-img-wrapper {
        height: 700px !important;
        overflow: hidden;
    }
}
#projector_status {
    display: none !important;
}
/* 1. Resetowanie wszelkich ujemnych marginesów na liscie produktów */
/* To powinno skompensować ewentualne "wyciąganie" listy na krawędzie */
#main_hotspot_zone1 .products__wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. Dodajemy padding do elementu Hotspot, aby stworzyć przestrzeń (margin) */

/* Ustawienie dla mobilnych (5px) */
@media (max-width: 756px) {
  section#main_hotspot_zone1 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* Ustawienie dla większych ekranów (10px) */
@media (min-width: 757px) {
  section#main_hotspot_zone1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 3. Wyrównanie nagłówka Hotspot do nowego paddingu sekcji */
#main_hotspot_zone1 .headline__wrapper {
  padding-left: 0 !important;
}