/* =========================================================
   "W kolekcji" / bundle – MOBILE: pionowo + bez scrolla w bok
   ========================================================= */

@media (max-width: 756px) {

  .projector_bundle { overflow-x: visible !important; }

  .projector_bundle__block{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:visible !important;
  }

  .projector_bundle__block .slick-slider,
  .projector_bundle__block .slick-list,
  .projector_bundle__block .slick-track{
    width:100% !important;
    transform:none !important;
    overflow:visible !important;
  }

  .projector_bundle__block .slick-track{ display:block !important; }

  .projector_bundle__block .slick-slide{
    float:none !important;
    width:100% !important;
    height:auto !important;
  }

  .projector_bundle__item{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:0 0 14px !important;
  }

  .projector_bundle__checkbox_group{
    flex:0 0 auto !important;
    margin-top:6px !important;
  }

  .projector_bundle__icon{
    width:64px !important;
    min-width:64px !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .projector_bundle__icon img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  .projector_bundle__name,
  .projector_bundle__price_wrapper,
  .projector_bundle__option,
  .projector_bundle__info,
  .projector_bundle__details,
  .projector_bundle__content{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .projector_bundle__arrow,
  .projector_bundle__block .slick-arrow{
    display:none !important;
  }
}


/* =========================================================
   DESKTOP (>=757px) – select jak na mobile (100% szerokości)
   ========================================================= */

@media (min-width: 757px) {

  .projector_bundle .projector_bundle__option > *{
    width:100% !important;
  }

  .projector_bundle .projector_bundle__option .f-dropdown .f-dropdown-toggle,
  .projector_bundle .projector_bundle__option select:not(.f-select-select){
    width:100% !important;
  }

  .projector_bundle .projector_bundle__option{
    max-width:100% !important;
  }
}


/* =========================================================
   BREADCRUMBS – OPCJA NR 1 (REKOMENDOWANA)
   CAŁKOWITE WYŁĄCZENIE DROPDOWNÓW NA URZĄDZENIACH DOTYKOWYCH
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  /* wywalamy dropdown / back menu */
  #breadcrumbs .back_button,
  #breadcrumbs .dropdown,
  #breadcrumbs ul ul {
    display: none !important;
  }

  /* breadcrumb jako zwykły tekst */
  #breadcrumbs{
    max-width:100%;
    overflow:hidden;
  }

  #breadcrumbs .list_wrapper{
    max-width:100%;
    overflow:hidden;
  }

  #breadcrumbs .list_wrapper ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  #breadcrumbs .list_wrapper li,
  #breadcrumbs .list_wrapper a,
  #breadcrumbs .list_wrapper span{
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
}

/* =========================================================
   BREADCRUMBS – DOTYK: WYŁĄCZ WSZYSTKIE POPUPY/DROPDOWNY
   (zostaje tylko tekst ścieżki)
   ========================================================= */
@media (hover: none) and (pointer: coarse) {

  /* 1) chowamy wszystkie potencjalne “menu/popupy” w obrębie breadcrumbs */
  #breadcrumbs .back_button,
  #breadcrumbs .dropdown,
  #breadcrumbs [class*="dropdown"],
  #breadcrumbs [class*="menu"],
  #breadcrumbs [class*="popup"],
  #breadcrumbs [class*="sub"],
  #breadcrumbs ul ul,
  #breadcrumbs li ul,
  #breadcrumbs li > div {
    display: none !important;
  }

  /* 2) zostawiamy tylko główną listę okruszków */
  #breadcrumbs .list_wrapper { 
    max-width: 100%;
    overflow: hidden;
  }

  #breadcrumbs .list_wrapper > ul{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }

  /* 3) tekst może się łamać, ale bez “pionowych liter” */
  #breadcrumbs .list_wrapper > ul > li,
  #breadcrumbs .list_wrapper > ul > li > a,
  #breadcrumbs .list_wrapper > ul > li > span{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================================================
   KARTA PRODUKTU – iOS/touch: blokada „bujania” w bok
   (bez psucia slidera galerii)
   ========================================================= */
@media (hover: none) and (pointer: coarse) {

  /* 1) Najbezpieczniej: blokujemy poziomy overflow na karcie produktu */
  body {
    overflow-x: hidden !important;
  }

  #container.projector_page,
  .projector_page {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  /* 2) Nie ruszamy slick-track/slides! Tylko obrazki */
  .photos__slider_wrapper img,
  .photos__photo {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 3) Asekuracja: czasem link/figure potrafi być „inline” i robić overflow */
  .photos__figure,
  .photos__link {
    display: block;
    max-width: 100%;
  }
}

/* Styl główny KMX KLUB  */
.kmx-club {
  font-family: sailec, 'Open Sans', sans-serif;
  font-weight: 200;
  color: #0B0B0B;
  line-height: 1.6;
}

.kmx-club h1, .kmx-club h2 {
  font-family: ivar-fine, serif;
  font-weight: 400;
  color: #0B0B0B;
}

/* Layout */
.kmx-club main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.kmx-club section {
  margin-bottom: 4rem;
}

/* Układ sekcji z obrazem i tekstem */
.kmx-club-accent-split {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.kmx-club-accent-split .image {
  flex: 1 1 45%;
}

.kmx-club-accent-split .image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Ograniczenie wysokości zdjęcia na dużych ekranach */
@media (min-width: 1024px) {
  .kmx-club-accent-split .image img {
    max-height: 450px;
    object-fit: cover;
  }
}

.kmx-club-accent-split .text {
  flex: 1 1 50%;
}

.kmx-club-accent-split .text ul {
  list-style: disc;
  padding-left: 2rem;
}

/* Tabela progów */
.kmx-club .thresholds table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.kmx-club .thresholds th,
.kmx-club .thresholds td {
  border: 1px solid #ccc;
  padding: 1.2rem;
  font-size: 1.4rem;
}

.kmx-club .thresholds th {
  background-color: #F0F0F0;
  font-weight: bold;
}

/* Sekcja zdjęcia break */
.kmx-club-break img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 600px;
}

/* CTA przycisk główny */
.kmx-club .cta {
  padding: 3rem;
  text-align: center;
  background: none;
  border: none;
}

/* Przyciski – wersja czarno-biała z hoverem */
.kmx-club-button-wrap {
  margin-top: 2.5rem;
  text-align: center;
}

.kmx-club-button {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 1rem 2.5rem;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid transparent;
  transition: background 0.2s ease-in-out,
              color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}

.kmx-club-button:hover,
.kmx-club-button:focus {
  background: #fff;
  color: #000;
  border-color: #000;
}

/* Responsywność */
@media (max-width: 768px) {
  .kmx-club-accent-split {
    flex-direction: column;
  }
}