/* =========================================================
   GymSupps – HOMEPAGE MOBILNÍ HERO CAROUSEL
   FINÁLNÍ VERZE PODLE REÁLNÉHO MOBILNÍHO SCREENU
   Desktop se nemění.
   ========================================================= */

@media (max-width: 767px) {

  /* celý horní řádek bez bootstrapových okrajů */
  .banners-row {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .banners-row > .col-sm-8 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* pravý desktopový sloupec na mobilu pryč */
  .banners-row > .col-sm-4,
  .banners-row .next-to-carousel-banners {
    display: none !important;
  }

  /* carousel wrapper */
  #carousel.carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* z Bootstrap carouselu uděláme swipe řadu */
  #carousel .carousel-inner {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100% !important;
    height: auto !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 10px 14px 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 14px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    transform: none !important;
  }

  #carousel .carousel-inner::-webkit-scrollbar {
    display: none !important;
  }

  /* každý mobilní banner = vysoká karta */
  #carousel .carousel-inner > .item,
  #carousel .carousel-inner > .item.active,
  #carousel .carousel-inner > .item.next,
  #carousel .carousel-inner > .item.prev,
  #carousel .carousel-inner > .item.left,
  #carousel .carousel-inner > .item.right {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    flex: 0 0 84vw !important;
    width: 84vw !important;
    max-width: 390px !important;

    aspect-ratio: 3 / 4 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #f4f4f5 !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    transition: none !important;

    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  /* celý banner klikací */
  #carousel .carousel-inner > .item > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: inherit !important;
  }

  /* obrázek přesně vyplní 3:4 kartu */
  #carousel .carousel-inner > .item img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: inherit !important;
  }

  /* defaultní Shoptet / Bootstrap šipky pryč */
  #carousel .carousel-control,
  #carousel .carousel-control.left,
  #carousel .carousel-control.right {
    display: none !important;
  }

  /* odstranění bootstrap clearfix vlivů */
  .banners-row::before,
  .banners-row::after {
    display: none !important;
  }
}

/* malé telefony */
@media (max-width: 380px) {
  #carousel .carousel-inner {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    scroll-padding-left: 10px !important;
  }

  #carousel .carousel-inner > .item,
  #carousel .carousel-inner > .item.active,
  #carousel .carousel-inner > .item.next,
  #carousel .carousel-inner > .item.prev,
  #carousel .carousel-inner > .item.left,
  #carousel .carousel-inner > .item.right {
    flex-basis: 86vw !important;
    width: 86vw !important;
    border-radius: 18px !important;
  }
}
@media (max-width: 767px) {

  #carousel .carousel-inner {
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #carousel .carousel-inner > .item,
  #carousel .carousel-inner > .item.active,
  #carousel .carousel-inner > .item.next,
  #carousel .carousel-inner > .item.prev,
  #carousel .carousel-inner > .item.left,
  #carousel .carousel-inner > .item.right {

    flex: 0 0 76vw !important;
    width: 76vw !important;
    max-width: none !important;

    aspect-ratio: 3 / 4 !important;
  }
}
@media (max-width: 767px) {

  /* odstran�n� linek / st�n� kolem homepage banner� */
  .banners-row,
  .banners-row > .col-sm-8,
  #carousel,
  #carousel.carousel,
  #carousel .carousel-inner {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    box-shadow: none !important;

    background-image: none !important;
  }

  /* p��padn� pseudo-elementy Shoptetu */
  .banners-row::before,
  .banners-row::after,
  #carousel::before,
  #carousel::after,
  #carousel .carousel-inner::before,
  #carousel .carousel-inner::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* samotn� galerie bez spodn�ho st�nu */
  #carousel .carousel-inner {
    background: transparent !important;
  }
}