/* ======================================================
   ⭐ SONIT STORE — PRODUCT CAROUSEL COMPONENT
   Best Reviewed + Best Seller
   Scoped, Modern, Premium Design
====================================================== */


/* ===============================
   PRODUCT CAROUSEL BASE
=============================== */

.carousel{
  position:relative;
  margin-bottom:60px;
}

/* only product carousels */
#topReviewedCarouselDesktop .carousel-item,
#topReviewedCarouselMobile .carousel-item,
#bestSellerCarouselDesktop .carousel-item,
#bestSellerCarouselMobile .carousel-item,
#topReviewedCarouselDesktop .row,
#topReviewedCarouselMobile .row,
#bestSellerCarouselDesktop .row,
#bestSellerCarouselMobile .row,
#topReviewedCarouselDesktop .col,
#topReviewedCarouselMobile .col,
#bestSellerCarouselDesktop .col,
#bestSellerCarouselMobile .col{
  background:transparent !important;
}



/* ======================================================
   ⭐ MODERN PRODUCT CARD (SCOPED ONLY TO CAROUSEL)
====================================================== */

.carousel .product-card{

  /* layout */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  /* design */
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,0.05);
  padding:18px;

  /* modern shadow */
  box-shadow:0 6px 18px rgba(0,0,0,0.06);

  /* animation */
  transition:all .35s cubic-bezier(.2,.8,.2,1);

  /* glass feel */
  backdrop-filter:blur(6px);
}

/* premium hover */
.carousel .product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
  border-color:rgba(227,6,19,0.2);
}


/* ===============================
   PRODUCT IMAGE
=============================== */

.carousel .product-card img{
  width:100%;
  height:160px;
  object-fit:contain;

  padding:12px;
  border-radius:14px;

  background:#fafafa;

  transition:transform .35s ease;
}

.carousel .product-card:hover img{
  transform:scale(1.08);
}


/* ===============================
   PRODUCT TITLE
=============================== */

.carousel .product-card h4{
  font-size:15px;
  font-weight:600;
  margin-top:12px;
  margin-bottom:6px;
  color:#111;

  /* truncate 2 lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* ===============================
   PRICE STYLE (modern)
=============================== */

.carousel .product-card strong{
  font-size:18px;
  font-weight:700;
  color:var(--accent);
}

.carousel .product-card .price{
  font-size:18px;
  font-weight:700;
  color:var(--accent);
}


/* ===============================
   RATING STYLE
=============================== */

.carousel .product-card p{
  font-size:13px;
  color:#666;
  margin-bottom:6px;
}


/* ===============================
   BUTTON STYLE (modern)
=============================== */

.carousel .product-card .btn{
  margin-top:auto;

  border-radius:10px;
  padding:8px 14px;
  font-size:13px;

  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;

  transition:0.25s ease;
}

.carousel .product-card .btn:hover{
  background:var(--accent);
  color:#fff;
}


/* ======================================================
   CLICKABLE CARD LINK
====================================================== */

.product-card-link{
  text-decoration:none;
  color:inherit;
  display:block;
  height:100%;
}


/* ======================================================
   MOBILE OPTIMIZATION
====================================================== */

@media (max-width:576px){

  #topReviewedCarouselMobile .product-card,
  #bestSellerCarouselMobile .product-card{
    width:100%;
    margin:0 10px;
  }

  .carousel .product-card img{
    height:140px;
  }

  .carousel .product-card h4{
    font-size:14px;
  }

}


/* ======================================================
   CAROUSEL INDICATORS (DOTS)
====================================================== */

.carousel-indicators [data-bs-target]{
  background-color:var(--accent);
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:0.6;
}

.carousel-indicators .active{
  background-color:#fff;
  opacity:1;
  transform:scale(1.2);
}

#topReviewedCarouselDesktop .carousel-indicators,
#bestSellerCarouselDesktop .carousel-indicators{
  bottom:10px;
}


/* ======================================================
   CAROUSEL ARROWS
====================================================== */

.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color:var(--accent);
  border-radius:50%;
  padding:18px;
}