/* =============================================================================
   PM Adev Child — Stabilitas tata letak halaman PRODUK (CLS)
   v1.5.3 · 24 Oktober 2026

   MASALAH TERUKUR (PSI mobile /produk/sabun-herbal/, 24 Okt 07:21-07:22):
     run #1 : CLS 0,000  (tidak ada shift)
     run #2 : CLS 0,123  (1 shift)
   -> CLS INTERMITEN. Elemen yang bergeser: section.elementor-element-7d941ff
      yaitu kolom yang memuat ringkasan produk ("Wujudkan Visi Brand Anda ..."),
      yang juga menjadi elemen LCP halaman ini.
   Penyebab paling mungkin: elemen di ATASNYA (media / CTA / iframe yang dibuat
   oleh JavaScript) berubah tinggi setelah halaman tampil. Di HTML statis tidak
   ada <iframe>, tetapi Lighthouse mencatat 3 iframe -> iframe dibuat oleh JS
   (mis. embed video / widget). iframe tanpa rasio tetap akan mendorong konten
   di bawahnya ketika selesai dimuat.

   YANG DILAKUKAN BERKAS INI (semua hanya untuk halaman detail produk)
   1) iframe diberi rasio tetap 16:9 + lebar 100% -> tinggi tidak berubah saat
      iframe selesai dimuat.
   2) galeri produk: kunci rasio wrapper 1:1 di SEMUA breakpoint (mencegah
      pergeseran saat slider init).
   3) gambar di dalam widget HTML Elementor: tinggi otomatis, tidak memaksa
      layout berubah.
   4) thumbnail galeri: tinggi minimum tetap.

   CATATAN: tidak ada perubahan HTML/konten. Bila setelah ini CLS masih muncul,
   berarti penyebabnya elemen lain dan perlu 1 kali pengukuran tambahan dengan
   DevTools (Performance -> Layout Shift) untuk menunjuk elemen pastinya.
   ============================================================================= */

/* 1) iframe dengan rasio tetap */
body.single-product iframe,
body.single-product .elementor-widget-html iframe,
body.single-product .elementor-widget-video iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto !important;
	border: 0;
}

/* 2) galeri produk: kunci rasio wrapper di semua breakpoint */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* 3) gambar di widget HTML Elementor: jangan memaksa tinggi */
body.single-product .elementor-widget-html img {
	height: auto;
	max-width: 100%;
}

/* 4) thumbnail galeri: ruang tetap */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	min-height: 72px;
}