/* =========================================================
030BBQ / FOOD NARCO - FINAL CUSTOM.CSS
Full Width + Produkt Grid + Slider Fix + UI Upgrade
Version: Mobile slider transition bug fixed
========================================================= */

html,
body {
  overflow-x: hidden !important;
}

/* =========================
   LAYOUT BREITER MACHEN
   ========================= */
.container {
  width: 100%;
  max-width: 100% !important;
}

#wrapper .container,
#main .container,
#content-wrapper .container {
  width: 100%;
  max-width: 1720px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   PRODUKT GRID
   ========================= */
.products.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -14px;
  margin-right: -14px;
}

.products.row > .js-product {
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom: 32px;
}

@media (min-width: 1400px) {
  .products.row > .js-product {
    width: 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .products.row > .js-product {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .products.row > .js-product {
    width: 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@media (max-width: 767px) {
  .products.row > .js-product {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* =========================
   PRODUKTKARTE UI
   ========================= */
.product-miniature,
.thumbnail-container {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}

.product-miniature:hover,
.thumbnail-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

.product-description,
.thumbnail-description {
  padding: 16px;
  text-align: center;
}

.product-title,
.product-title a {
  font-size: 18px;
  font-weight: 700;
}

.price,
.current-price {
  font-size: 26px;
  font-weight: 800;
}

/* =========================
   SLIDER FIX
   ========================= */
#carousel,
#carousel .carousel-inner,
#carousel .carousel-item,
#carousel .carousel-item.active,
#carousel .carousel-item-next,
#carousel .carousel-item-prev,
#carousel a,
#carousel figure {
  box-sizing: border-box !important;
}

/* Desktop / allgemein */
#carousel {
  width: 100% !important;
  max-width: 1100px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

#carousel .carousel-inner {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative !important;
}

#carousel .carousel-item,
#carousel .carousel-item.active,
#carousel .carousel-item-next,
#carousel .carousel-item-prev {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#carousel a,
#carousel figure {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#carousel img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#carousel .carousel-control {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .page-home #wrapper .container,
  .page-home #content-wrapper,
  .page-home #main,
  .page-home #content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #carousel {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    overflow: hidden !important;
  }

  #carousel .carousel-inner {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    position: relative !important;
  }

  /* WICHTIGER BUGFIX:
     Nur das aktive Slide anzeigen, alle Übergangs-Slides ausblenden */
  #carousel .carousel-item,
  #carousel .carousel-item-next,
  #carousel .carousel-item-prev,
  #carousel .carousel-item-left,
  #carousel .carousel-item-right {
    display: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
    position: relative !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #carousel .carousel-item.active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
  }

  #carousel a,
  #carousel figure,
  #carousel img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  #carousel img {
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* mobile controls optional sichtbar lassen */
  #carousel .carousel-control {
    z-index: 3 !important;
  }
}

/* =========================
   UI UPGRADE
   ========================= */
.products-section-title,
h2.products-section-title,
.featured-products .products-section-title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 28px;
  color: #1a1a1a;
  text-transform: uppercase;
  text-align: center;
}

.wishlist-button-add,
.addToWishlist,
.iqitwishlist-product-btn,
.iqit-wishlist-btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

@media (max-width: 767px) {
  .products.row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .products.row > .js-product {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 18px;
  }

  .product-description,
  .thumbnail-description {
    padding: 12px;
  }

  .product-title,
  .product-title a {
    font-size: 15px;
  }

  .price,
  .current-price {
    font-size: 22px;
  }

  .products-section-title,
  h2.products-section-title,
  .featured-products .products-section-title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .wishlist-button-add,
  .addToWishlist,
  .iqitwishlist-product-btn,
  .iqit-wishlist-btn {
    width: 44px !important;
    height: 44px !important;
  }
}