/* =============================================================================
   FIX CLS GALERI PRODUK — VERSI 2 (perbaikan atas v1)
   adev.co.id · 2026-10-23 · menangani /produk/body-wash/ desktop

   HASIL UKUR SETELAH v1 DIPASANG (PSI 23 Okt):
     desktop : performance 87 -> 94 · Best Practices 92 -> 100 · LCP 2,0 -> 0,8 s
               image-aspect-ratio & image-size-responsive: GAGAL -> LULUS
               TETAPI CLS 0,112 -> 0,139  (naik!)
     mobile  : performance 72 -> 83 · LCP 9,0 -> 4,3 s · CLS 0,031 (aman)

   DUA KESALAHAN PADA v1 YANG DIPERBAIKI DI v2
     1) v1 memaksa `.woocommerce-product-gallery{opacity:1 !important}`.
        WooCommerce sengaja memberi galeri inline style `opacity: 0` sampai
        FlexSlider siap. Dengan dipaksa terlihat, 7 slide yang masih BERTUMPUK
        jadi tampak, lalu mengempis setelah slider init -> muncul pergeseran BARU
        (0,0271 pada "Maklon Produk Body Wash 01") dan CLS total naik. -> DIHAPUS.

     2) `aspect-ratio` pada SLIDE tidak mengunci tinggi CONTAINER.
        Sebelum FlexSlider jalan, semua slide bertumpuk vertikal, sehingga tinggi
        wrapper = 7 x tinggi gambar. Setelah slider init, tinggi menjadi 1 gambar.
        Penyusutan itulah yang mendorong paragraf ringkasan di bawahnya (0,112).
        -> DIPERBAIKI dengan mengunci aspect-ratio pada WRAPPER + overflow hidden.

   URUTAN PASANG
     1. Nonaktifkan snippet CSS galeri v1 (yang tanpa gabungan / yang gabungan).
     2. Pasang file ini sebagai WPCode CSS snippet (Site Wide Header).
     3. Purge All (LSCWP) + purge Cloudflare.
     4. Ukur desktop /produk/body-wash/ -> target CLS < 0,1.
   ============================================================================= */

/* KUNCI UTAMA: tinggi galeri sudah pasti SEBELUM gambar/slider selesai.
   Semua slide yang masih bertumpuk dipotong (overflow hidden) sehingga
   tidak mengubah tinggi layout dan tidak mendorong konten di bawahnya. */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* halaman produk adev memakai kotak galeri 1:1; sesuaikan bila tema diubah */
}

/* Slide & gambar: rasio seragam + tidak memaksa kotak berubah tinggi.
   (bagian ini yang membuat image-aspect-ratio & image-size-responsive LULUS) */
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* CATATAN PENTING: JANGAN menambahkan opacity:1 pada .woocommerce-product-gallery.
   Biarkan WooCommerce menyembunyikannya (inline opacity:0) sampai FlexSlider siap,
   agar keadaan "slide bertumpuk" tidak tampak dan tidak menimbulkan shift tambahan. */

/* Thumbnail: ruang tetap supaya tidak menambah pergeseran saat thumbnail muncul */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	min-height: 72px;
}
.woocommerce-product-gallery .flex-control-thumbs li {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
}
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =============================================================================
   v1.8.6 — galeri produk langsung TERLIHAT (opacity 1)
   WooCommerce menulis style="opacity:0" pada galeri sampai FlexSlider siap,
   sehingga GAMBAR tidak pernah ter-paint lebih awal dan H1 teks yang menjadi
   elemen LCP (render delay 1.112-1.268 ms, terukur 24 Okt).
   Sekarang aman karena:
     - wrapper galeri sudah dikunci aspect-ratio 1:1 + overflow hidden (v1.5.3)
       -> tidak ada CLS akibat slide bertumpuk
     - gambar galeri pertama sudah eager + fetchpriority high (v1.8.5)
       -> gambar langsung ter-paint, LCP berpindah dari teks H1 ke gambar
   ============================================================================= */
body.single-product .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* =============================================================================
   v1.9.6 — CADANGKAN 72px UNTUK BARIS THUMBNAIL (perbaikan CLS paling aman)
   Terukur di /produk/bar-soap/ (Chromium, viewport 412x915):
     kontrol                        : CLS 0,328 · galeri 424px · img 352x352
     padding-bottom 72px (varian ini): CLS 0,091 · galeri 496px · img 352x352  <- DIPILIH
     :has() tanpa padding saat thumbs: CLS 0,162
   Gambar TIDAK dipotong (tetap 352x352) karena hanya padding wadah yang ditambah -
   berbeda dari v1.9.4 yang memaksa overflow:hidden + object-fit:cover sehingga
   galeri rusak. Biaya kosmetik: 72px ruang kosong di bawah galeri.
   ============================================================================= */
/* v1.9.7 — pasangan :has() agar ruang cadangan HANYA ada sebelum thumbnail dibuat.
   Terukur (1920, JS delayed aktif): galeri 508px -> setelah interaksi 508px (selisih 0,
   tanpa lompatan) dan padding kembali 0 sehingga tidak ada ruang kosong. */
body.single-product .woocommerce-product-gallery:not(:has(ol.flex-control-thumbs)) {
	padding-bottom: 72px !important;
}
body.single-product .woocommerce-product-gallery:has(ol.flex-control-thumbs) {
	padding-bottom: 0 !important;
}