.jumbotron-bottoms {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.jumbotron-bottoms .carousel-item {
  position: relative;
}

.jumbotron-bottoms .carousel-item img {
  object-fit: cover;
  height: 100vh;
}

.jumbotron-bottoms .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 1;
}

.jumbotron-bottoms .carousel-caption {
  bottom: 3rem;
  left: 5%;
  right: auto;
  z-index: 2;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
}

.jumbotron-caption h1 {
  font-size: 3rem;
}

.jumbotron-caption p.small {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.jumbotron-caption p.lead {
  font-size: 1.25rem;
}

@media (max-width: 576px) {
  .jumbotron-caption {
    left: 50% !important;
    transform: translateX(-50%);
    text-align: center !important;
    width: 90%;
  }

  .jumbotron-caption h1 {
    font-size: 2.2rem;
  }

  .jumbotron-caption p.lead {
    font-size: 1.1rem;
  }
}

/* ============================
   PRODUCT IMAGE (SQUARE + HOVER)
   ============================ */

/* Wrapper square 1:1 */
.product-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Square ratio */
    overflow: hidden;
}

/* Semua gambar */
.product-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.35s ease-in-out;
}

/* Default hidden hover image */
.product-img-wrapper .img-second {
    opacity: 0;
}

/* Hover: main fade out, second fade in */
.product-card-hover:hover .img-main {
    opacity: 0;
}
.product-card-hover:hover .img-second {
    opacity: 1;
}

/* Jika gambar default ingin contain */
.product-img-wrapper img.is-default {
    object-fit: contain;
    background: #000;
}

.products-lineup-item-title {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

#products-load-more-btn {
  transition: all 0.3s ease;
}

#products-load-more-btn:hover {
  background-color: #fff;
  color: #000;
}

.spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* =========================================================
   PRODUCT IMAGE HOVER (MAIN → SECOND IMAGE)
   ========================================================= */

.aspect-ratio-box {
  position: relative;
  width: 100%;
  /* padding-top: 125%;  */
  /* 4:5 ratio — bisa sesuaikan kalau mau */
  overflow: hidden;
}

.product-img-main,
.product-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Default state */
.product-img-main {
  opacity: 1;
}

.product-img-hover {
  opacity: 0;
}

/* Hover effect */
.aspect-ratio-box:hover .product-img-main {
  opacity: 0;
}

.aspect-ratio-box:hover .product-img-hover {
  opacity: 1;
}

/* Default image styling – center image nicely */
.product-img-main.is-default,
.product-img-hover.is-default {
  object-fit: contain;
  background: #111;
  padding: 15%;
}