/* product-gallery: gaya aktif sesuai tanggung jawab modul. */
.detail-gallery { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 16px; position: relative; min-width: 0; margin-top: 26px; }
.detail-preview .detail-gallery { margin-top: 0; }
.carousel-viewport { display: flex; align-items: flex-start; grid-column: 1 / -1; grid-row: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; min-width: 0; }
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; width: 100%; scroll-snap-align: start; margin: 0; }
.product-showcase .detail-gallery { margin-top: 0; }
.carousel-slide figcaption { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 12px; }
.carousel-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; font-size: 25px; }
.carousel-button:hover { color: var(--purple); border-color: var(--purple); }
.carousel-button-prev { grid-column: 1; grid-row: 2; }
.carousel-button-next { grid-column: 3; grid-row: 2; }
.carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; grid-column: 2; grid-row: 2; }
.carousel-dot { position: relative; width: 28px; height: 44px; border: 0; background: transparent; }
.carousel-dot::before { content: ''; position: absolute; left: 10px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #c4b9a9; }
.carousel-dot[aria-current="true"]::before { background: var(--purple); }
.image-zoom-open { overflow: hidden; }
.image-zoom-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 64px 70px 35px; background: #211c1af5; color: var(--paper); }
.image-zoom-content { width: 100%; max-width: 1500px; }
.image-zoom-image { display: block; margin-inline: auto; max-height: calc(100dvh - 145px); width: auto; max-width: 100%; object-fit: contain; }
.image-zoom-caption { margin-top: 18px; font-size: 12px; text-align: center; }
.image-zoom-close, .image-zoom-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: #fbf6ed; color: var(--ink); border: 0; font-size: 30px; }
.image-zoom-close { right: 20px; top: 16px; }
.image-zoom-nav { top: calc(50% - 22px); }
.image-zoom-nav-prev { left: 14px; }
.image-zoom-nav-next { right: 14px; }
.carousel-slide img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; margin-inline: auto; cursor: zoom-in; }
.carousel-slide .detail-frame { width: fit-content; max-width: 100%; margin-inline: auto; }
.carousel-slide .detail-frame > img { width: auto; height: auto; }
.carousel-slide { display: flex; flex-direction: column; align-items: center; }
.carousel-slide figcaption { align-self: stretch; }
.carousel-button .icon { width: 19px; height: 19px; }
.carousel-button-prev .icon { transform: rotate(90deg); }
.carousel-button-next .icon { transform: rotate(-90deg); }

@media (max-width: 760px) {
.carousel-dot { width: 26px; }
.carousel-dot::before { left: 9px; }
.image-zoom-overlay { padding: 76px 12px 80px; }
.image-zoom-nav { top: auto; bottom: 14px; }
.image-zoom-nav-prev { left: 20px; }
.image-zoom-nav-next { right: 20px; }
.image-zoom-caption { padding-inline: 10px; }
.image-zoom-image { max-height: calc(100dvh - 210px); }
.carousel-slide img { max-height: 540px; }
}
@media print {
.carousel-viewport { display: block; overflow: visible; }
.carousel-slide { break-inside: avoid; }
}