/* =========================================================
   "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 – DOTYK
   - brak dropdownów
   - łamanie PO WYRAZACH (bez „S K L E P”)
   - zawijanie do kolejnych linii (bez ucinania)
   UWAGA: u Ciebie lista to <ol> (nie <ul>)
   ========================================================= */

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

  /* 1) chowamy dropdowny / submenu w breadcrumbs */
  #breadcrumbs .back_button,
  #breadcrumbs .dropdown,
  #breadcrumbs [class*="dropdown"],
  #breadcrumbs [class*="menu"],
  #breadcrumbs [class*="popup"],
  #breadcrumbs [class*="sub"],
  #breadcrumbs ul,
  #breadcrumbs ol li ul,
  #breadcrumbs li ul {
    display: none !important;
  }

  /* 2) breadcrumbs nie jako flex (na iOS potrafi blokować wrap/robić ściskanie) */
  #breadcrumbs{
    display: block !important;
    max-width: 100%;
  }

  /* 3) nie ucinamy */
  #breadcrumbs .list_wrapper{
    max-width: 100%;
    overflow: visible !important;
  }

  /* 4) klucz: OL ma być flex + wrap */
  #breadcrumbs .list_wrapper > ol{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 5) łamanie po WYRAZACH */
  #breadcrumbs .list_wrapper > ol > li,
  #breadcrumbs .list_wrapper > ol > li > a,
  #breadcrumbs .list_wrapper > ol > li > span{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important; /* ratuje ekstremalnie długie ciągi bez spacji */
    hyphens: none !important;
    max-width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   KARTA PRODUKTU – iOS/touch
   blokada „bujania” strony w bok (bez psucia slidera)
   ========================================================= */

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

  body {
    overflow-x: hidden !important;
  }

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

  .photos__slider_wrapper img,
  .photos__photo {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  .photos__figure,
  .photos__link {
    display: block;
    max-width: 100%;
  }
}


/* =========================================================
   KARTA PRODUKTU – info o modelce
   odstęp od galerii (tablet + mobile)
   ========================================================= */

@media (max-width: 1199px) {
  .projector_page .model_info {
    margin-top: 10px !important;
  }
}


/* =========================================================
   KMX CLUB – style strony klubowej
   ========================================================= */

.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;
}

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

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

.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;
}

@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;
}

.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;
}

.kmx-club-break img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 600px;
}

.kmx-club .cta {
  padding: 3rem;
  text-align: center;
  background: none;
  border: none;
}

.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;
}

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

/* =========================================================
   BREADCRUMBS – MOBILE
   ukryj nazwę produktu (ostatni element)
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  #breadcrumbs .bc-product-name {
    display: none !important;
  }
}