/* ------------------------------------------------------------------------- 
   PRODUCT-CAROUSEL.CSS  –  dedicated carousel & loan-card polish
   Loads only when the loan-carousel partial is rendered
   ------------------------------------------------------------------------- */

/* =========================================================================
   A.   CARD-PEEK SCROLL-SNAP CAROUSEL  (#cardCarousel)
   ========================================================================= */
@media(max-width:600px){
  #cardCarousel .carousel-item{flex:0 0 85%;}
}
#cardCarousel{
  overflow:visible;position:relative;
}
/* horizontal track */
#cardCarousel .carousel-inner{
  display:flex;gap:1rem;padding:0 1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
}
#cardCarousel .carousel-item{
  display:block !important;
  flex:0 0 360px;scroll-snap-align:start;
  transition:transform .5s ease,opacity .5s ease;
  padding:1.5rem 0;              /* var(--spacer-lg) */
}
#cardCarousel .carousel-item:not(.active){
  opacity:.4;pointer-events:none;
}
#cardCarousel .carousel-item.active .product-card{
  transform:translateY(-4px);
  box-shadow:0 .75rem 1.5rem rgba(0,0,0,.1);
}
/* pretty controls */
#cardCarousel .carousel-control-prev,
#cardCarousel .carousel-control-next{
  background:none;border:none;top:50%;transform:translateY(-50%);
}
#cardCarousel .carousel-control-prev i,
#cardCarousel .carousel-control-next i{color:var(--ol-primary);}

/* =========================================================================
   B.   BOOTSTRAP MULTI-ITEM CAROUSEL  (#productCarousel)
   ========================================================================= */
#productCarousel .carousel-inner{
  display:block !important;scroll-snap-type:none !important;
}
#productCarousel .carousel-item .row{
  display:flex;gap:1rem;justify-content:center;
}
#productCarousel .carousel-item .col-12.col-md-4{display:flex;}
#productCarousel .product-card{flex:1;margin-bottom:1.5rem;}   /* var(--spacer-lg) */

#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next{
  background:none;border:none;top:50%;transform:translateY(-50%);
}
#productCarousel .carousel-control-prev i,
#productCarousel .carousel-control-next i{color:var(--ol-primary);}

@media(min-width:768px){
  #productCarousel .carousel-item .col-md-4{
    flex:0 0 33.333%;max-width:33.333%;
  }
}

/* =========================================================================
   C.   LOAN-PRODUCT CARD POLISH  (shared by both carousels)
   ========================================================================= */
.product-card{min-width:260px;max-width:260px;}
@media(min-width:992px){.product-card{min-width:240px;}}

@keyframes jiggle{0%,100%{transform:scale(1.02);}50%{transform:scale(1.04);}}
.loan-illus{
  height:160px;object-fit:contain;padding:1rem;
  transition:transform var(--transition-fast);
}
.loan-illus:hover{animation:jiggle .10s ease-out forwards;}

.product-card{display:flex;flex-direction:column;}
.product-card .card-body{flex:1 1 auto;display:flex;flex-direction:column;}

/* clamp long descriptions */
.line-clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* =========================================================================
   D.   SOFTEN INACTIVE SLIDES & CENTRE TRACK
   ========================================================================= */
#productCarousel .carousel-item{
  transition:transform .5s ease,opacity .5s ease;
}
#productCarousel .carousel-item:not(.active){
  opacity:.25;transform:scale(.96);
}
#productCarousel .carousel-inner{padding:0 .5rem;}
@media(min-width:992px){
  #productCarousel .carousel-inner{padding:0 2.5rem;}
}