/* Product page visual controls */
.product-page {
  --product-page-ivory: #f4f0e9;
  /* PRODUCT IMAGE SCALE — lower percentage makes every gallery image smaller. */
  --product-gallery-scale: 75%;
  min-height: 100vh;
  background: var(--product-page-ivory);
}

.product-header { background: var(--product-page-ivory); }
.product-gallery { background: var(--product-page-ivory); }

/* INDIVIDUAL IMAGE SCALE — change only the number you need.
   100% = the normal gallery size; lower = smaller; higher = larger. */
.product-page {
  /* BEIGE IMAGE 1 — gambar pertama pada halaman produk Beige.
     Nilai negatif untuk -y gerakkan gambar ke atas; positif gerakkan ke bawah. */
  --beige-image-1-scale: 100%;
  --beige-image-1-y: -55px;
  --beige-image-2-scale: 100%;
  --beige-image-3-scale: 100%;
  --beige-image-4-scale: 100%;
  --beige-image-5-scale: 100%;
  --beige-image-6-scale: 100%;
  /* BLACK IMAGE 1 — negatif untuk naik, positif untuk turun. */
  --black-image-1-scale: 70%;
  --black-image-1-y: 70px;
  --black-image-2-scale: 100%;
  --black-image-3-scale: 100%;
  --black-image-4-scale: 100%;
  --black-image-5-scale: 100%;
  --black-image-6-scale: 100%;
  --white-image-1-scale: 100%;
  --white-image-2-scale: 100%;
  --white-image-3-scale: 100%;
  --white-image-4-scale: 100%;
  --white-image-5-scale: 100%;
  --white-image-6-scale: 100%;
  --coffee-image-1-scale: 100%;
  --coffee-image-2-scale: 100%;
  --coffee-image-3-scale: 100%;
  --coffee-image-4-scale: 100%;
  --coffee-image-5-scale: 100%;
  --espresso-image-1-scale: 100%;
  --espresso-image-2-scale: 100%;
  --espresso-image-3-scale: 100%;
  --espresso-image-4-scale: 100%;
  --espresso-image-5-scale: 100%;
}

.product-page[data-product-colour="beige"] .product-gallery img:nth-child(1) { transform: translateY(var(--beige-image-1-y)) scale(var(--beige-image-1-scale)); }
.product-page[data-product-colour="beige"] .product-gallery img:nth-child(2) { transform: scale(var(--beige-image-2-scale)); }
.product-page[data-product-colour="beige"] .product-gallery img:nth-child(3) { transform: scale(var(--beige-image-3-scale)); }
.product-page[data-product-colour="beige"] .product-gallery img:nth-child(4) { transform: scale(var(--beige-image-4-scale)); }
.product-page[data-product-colour="beige"] .product-gallery img:nth-child(5) { transform: scale(var(--beige-image-5-scale)); }
.product-page[data-product-colour="beige"] .product-gallery img:nth-child(6) { transform: scale(var(--beige-image-6-scale)); }

.product-page[data-product-colour="black"] .product-gallery img:nth-child(1) { transform: translateY(var(--black-image-1-y)) scale(var(--black-image-1-scale)); }
.product-page[data-product-colour="black"] .product-gallery img:nth-child(2) { transform: scale(var(--black-image-2-scale)); }
.product-page[data-product-colour="black"] .product-gallery img:nth-child(3) { transform: scale(var(--black-image-3-scale)); }
.product-page[data-product-colour="black"] .product-gallery img:nth-child(4) { transform: scale(var(--black-image-4-scale)); }
.product-page[data-product-colour="black"] .product-gallery img:nth-child(5) { transform: scale(var(--black-image-5-scale)); }
.product-page[data-product-colour="black"] .product-gallery img:nth-child(6) { transform: scale(var(--black-image-6-scale)); }

.product-page[data-product-colour="white"] .product-gallery img:nth-child(1) { transform: scale(var(--white-image-1-scale)); }
.product-page[data-product-colour="white"] .product-gallery img:nth-child(2) { transform: scale(var(--white-image-2-scale)); }
.product-page[data-product-colour="white"] .product-gallery img:nth-child(3) { transform: scale(var(--white-image-3-scale)); }
.product-page[data-product-colour="white"] .product-gallery img:nth-child(4) { transform: scale(var(--white-image-4-scale)); }
.product-page[data-product-colour="white"] .product-gallery img:nth-child(5) { transform: scale(var(--white-image-5-scale)); }
.product-page[data-product-colour="white"] .product-gallery img:nth-child(6) { transform: scale(var(--white-image-6-scale)); }

.product-page[data-product-colour="coffee"] .product-gallery img:nth-child(1) { transform: scale(var(--coffee-image-1-scale)); }
.product-page[data-product-colour="coffee"] .product-gallery img:nth-child(2) { transform: scale(var(--coffee-image-2-scale)); }
.product-page[data-product-colour="coffee"] .product-gallery img:nth-child(3) { transform: scale(var(--coffee-image-3-scale)); }
.product-page[data-product-colour="coffee"] .product-gallery img:nth-child(4) { transform: scale(var(--coffee-image-4-scale)); }
.product-page[data-product-colour="coffee"] .product-gallery img:nth-child(5) { transform: scale(var(--coffee-image-5-scale)); }

.product-page[data-product-colour="espresso"] .product-gallery img:nth-child(1) { transform: scale(var(--espresso-image-1-scale)); }
.product-page[data-product-colour="espresso"] .product-gallery img:nth-child(2) { transform: scale(var(--espresso-image-2-scale)); }
.product-page[data-product-colour="espresso"] .product-gallery img:nth-child(3) { transform: scale(var(--espresso-image-3-scale)); }
.product-page[data-product-colour="espresso"] .product-gallery img:nth-child(4) { transform: scale(var(--espresso-image-4-scale)); }
.product-page[data-product-colour="espresso"] .product-gallery img:nth-child(5) { transform: scale(var(--espresso-image-5-scale)); }

@media (max-width: 760px) {
  .product-page { --product-gallery-scale: 86%; }
}