/* Pagination Wrapper */
#products-pagination .page-btn {
    display: inline-block;
    margin: 0 5px;
    padding: 6px 12px;
    border: 1px solid #000; /* Hitam */
    color: #000; /* Hitam */
    text-decoration: none;
    border-radius: 4px;
    background-color: #fff; /* Putih */
    transition: all 0.2s ease;
}

/* Hover efek hitam-putih */
#products-pagination .page-btn:hover {
    background-color: #000; /* Hitam */
    color: #fff; /* Putih */
    border-color: #000; /* Hitam */
}

/* Halaman aktif */
#products-pagination .page-btn.active {
    background-color: #000; /* Hitam */
    color: #fff; /* Putih */
    border-color: #000; /* Hitam */
}

/* Bootstrap default override */
.pagination .page-link {
    color: #000 !important; /* Hitam */
    background-color: #fff !important; /* Putih */
    border: 1px solid #000 !important; /* Hitam */
    transition: all 0.2s ease;
}

/* Hover Bootstrap */
.pagination .page-link:hover {
    color: #fff !important; /* Putih */
    background-color: #000 !important; /* Hitam */
    border-color: #000 !important;
}

/* Halaman aktif Bootstrap */
.pagination .page-item.active .page-link {
    color: #fff !important; /* Putih */
    background-color: #000 !important; /* Hitam */
    border-color: #000 !important;
}

.product-img-main {
  transition: opacity .3s ease;
}

.product-img-hover {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .3s ease;
}

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

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

/* Wrapper */
.product-img-wrapper {
    position: relative;
    overflow: hidden;
}

/* Gambar pertama */
.product-img-wrapper .img-main {
    transition: opacity 0.35s ease-in-out;
    display: block;
}

/* Gambar kedua (hidden default) */
.product-img-wrapper .img-second {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    display: block;
}

/* Hover → gambar kedua muncul */
.product-card-hover:hover .img-main {
    opacity: 0;
}

.product-card-hover:hover .img-second {
    opacity: 1;
}

/* Square container */
.product-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* FIX: BIKIN SQUARE */
}

/* Semua gambar */
.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gambar pertama */
.product-img-wrapper .img-main {
    transition: opacity 0.35s ease-in-out;
}

/* Gambar kedua */
.product-img-wrapper .img-second {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

/* Hover */
.product-card-hover:hover .img-main {
    opacity: 0;
}

.product-card-hover:hover .img-second {
    opacity: 1;
}

.product-img-wrapper img.is-default {
    opacity: 1 !important;
}

/* Jadikan default image contain dan benar-benar center */
.img-main.is-default,
.img-second.is-default {
  object-fit: contain !important;
  background-color: #000; /* optional: agar logo terlihat rapi */
  padding: 20%; /* opsional: biar tidak terlalu mepet */
}

/* Saat hover, jangan zoom default logo */
.products-lineup a:hover .img-main.is-default,
.products-lineup a:hover .img-second.is-default {
  transform: none !important;
}