/* ============================================================
   FarbyJUB.sk – vlastné úpravy vzhľadu
   Súbor: homepage.css
   Nahrávať cez FTP do /user/documents/upload/web-upravy/
   Odkazovať zo sekcie Záhlavie takto:
   <link href="/user/documents/upload/web-upravy/homepage.css" rel="stylesheet">

   Pri každej ďalšej úprave pridávaj nové bloky NIŽŠIE pod komentár
   s popisom danej úpravy, nech mame poriadok v tom, čo k čomu patrí.
   ============================================================ */


/* ------------------------------------------------------------
   1) Homepage – produktový carousel v taboch (Vnútorné farby,
      Fasádne farby, Decor, Fasády, Maliarske náradie, ETICS)
   ------------------------------------------------------------ */

.homepage-tabs-wrapper .jub-carousel {
  position: relative;
  padding: 0 44px;
}

.homepage-tabs-wrapper .products.products-block.jub-carousel__track {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 !important;
  padding: 4px 2px 14px;
}
.homepage-tabs-wrapper .products.products-block.jub-carousel__track::-webkit-scrollbar {
  display: none;
}

/* počet viditeľných kariet – desktop: 5 */
.homepage-tabs-wrapper .jub-carousel__track > .product {
  flex: 0 0 calc((100% - 4 * 20px) / 5);
  max-width: calc((100% - 4 * 20px) / 5);
  scroll-snap-align: start;
}

@media (max-width: 1200px) {
  .homepage-tabs-wrapper .jub-carousel__track > .product {
    flex-basis: calc((100% - 3 * 16px) / 4);
    max-width: calc((100% - 3 * 16px) / 4);
  }
}
@media (max-width: 991px) {
  .homepage-tabs-wrapper .jub-carousel__track > .product {
    flex-basis: calc((100% - 2 * 16px) / 3);
    max-width: calc((100% - 2 * 16px) / 3);
  }
}
@media (max-width: 767px) {
  .homepage-tabs-wrapper .jub-carousel { padding: 0; }
  .homepage-tabs-wrapper .jub-carousel__track { gap: 12px; }
  .homepage-tabs-wrapper .jub-carousel__track > .product {
    /* mobil: 2 cele karty + kúsok tretej ako naznak, ze sa da posuvat do strán */
    flex-basis: 42%;
    max-width: 42%;
  }
}

/* sipky */
.homepage-tabs-wrapper .jub-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  background: #fff;
  color: var(--color-primary, #102F5E);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  z-index: 2;
  transition: opacity .2s, box-shadow .2s;
}
.homepage-tabs-wrapper .jub-carousel__arrow:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.homepage-tabs-wrapper .jub-carousel__arrow--prev { left: 0; }
.homepage-tabs-wrapper .jub-carousel__arrow--next { right: 0; }
.homepage-tabs-wrapper .jub-carousel__arrow.is-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 767px) {
  .homepage-tabs-wrapper .jub-carousel__arrow { display: none; }
}


/* ------------------------------------------------------------
   2) Homepage - vsetky kategorie zobrazene pod sebou
      (rusime preklikavanie tabov, kazda kategoria je vlastna
      sekcia s vycentrovanym nadpisom nad carouselom)
   ------------------------------------------------------------ */

/* skryje lištu s klikatelnymi nazvami kategorii (Vnutorne farby / Fasadne farby / ...) */
.homepage-tabs-wrapper .shp-tabs-row {
  display: none !important;
}

/* zrusi bootstrap-tab spravanie "len jedna sekcia naraz" - zobrazi vsetky */
.homepage-tabs-wrapper #tab-content.tab-content > .tab-pane {
  display: block !important;
  opacity: 1 !important;
  padding-top: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e2e2;
}
.homepage-tabs-wrapper #tab-content.tab-content > .tab-pane:first-child {
  padding-top: 0;
}
.homepage-tabs-wrapper #tab-content.tab-content > .tab-pane:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* nazov kategorie - odkryty (Shoptet ho ma predvolene schovany), text votkany priamo
   do delitiacej ciary v tvare "── Fasadne farby ──" */
.homepage-tabs-wrapper .homepage-group-title {
  display: flex !important;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--color-primary, #102F5E);
  margin: 0 0 16px !important;
}
.homepage-tabs-wrapper .homepage-group-title::before,
.homepage-tabs-wrapper .homepage-group-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e2e2e2;
}

@media (max-width: 767px) {
  .homepage-tabs-wrapper #tab-content.tab-content > .tab-pane {
    padding-top: 32px;
    padding-bottom: 8px;
  }
  .homepage-tabs-wrapper .homepage-group-title {
    font-size: 21px;
    gap: 10px;
    margin-bottom: 12px !important;
  }
}