/* Penyesuaian halaman detail produk. Dimuat paling akhir pada product.php agar
   menang atas product-page.css dan product-beauty.css. */
/* Halaman produk: kolom gambar tidak ikut memanjang, spesifikasi tampil sebagai
   baris label-nilai, dan bagian produk terkait diberi jarak yang lega. */
.product-page .detail{align-items:start}
.product-page .detail [data-product-part="media"]{align-self:start}
/* Kolom teks lebih pendek daripada gambar, jadi diletakkan di tengah agar ruang
   kosongnya seimbang atas-bawah. */
@media(min-width:851px){.product-page .detail .product-info{align-self:center}}
.product-page .description.has-spec ul{display:grid;gap:0;margin:14px 0 18px;padding:0;list-style:none;border-top:1px solid #2f3336}
.product-page .description.has-spec li{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:14px;margin:0;padding:10px 0;border-bottom:1px solid #2f3336}
.product-page .description.has-spec .spec-label{color:#9aa29d;font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.product-page .description.has-spec .spec-value{color:#e4e8e6;font-size:14px}
.product-page .description h3{margin:22px 0 4px;color:#fff;font-size:15px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.product-related{margin-top:30px;padding:26px 30px;border:1px solid #343434;background:#18191b}
.product-related[hidden]{display:none}
.product-related-head{margin-bottom:18px}
.product-related-head small{display:block;color:#ffc13b;font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}
.product-related-head h2{margin:6px 0 0;color:#fff;font-size:22px;letter-spacing:.4px}
.product-related .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1000px){.product-related .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.product-related .product-grid{grid-template-columns:1fr}}
@media(max-width:600px){.product-related{padding:18px 16px}}
/* Deskripsi produk tampil sebagai bagian sendiri di bawah gambar, sejajar dengan
   panel produk terkait. */
.product-description-section{margin-top:30px;padding:26px 30px;border:1px solid #343434;background:#18191b}
.product-description-section[hidden]{display:none}
.product-description-section>h2{margin:0 0 14px;color:#fff;font-size:22px;letter-spacing:.4px}
.product-description-section .description{max-width:900px;margin:0;color:#c4c4c4;font-size:15px;line-height:1.85}
.product-description-section .description p{margin:0 0 12px}
.product-description-section .description.has-spec ul{max-width:760px}
@media(max-width:600px){.product-description-section{padding:18px 16px}.product-description-section>h2{font-size:19px}}

/* Kartu produk: gambar tidak terlalu dominan, kolom teks lebih lapang, dan meta
   tampil sebagai grid label-nilai agar ruang kosongnya berkurang. */
.product-page .detail{grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);gap:44px;padding:26px}
.product-page .main-image{height:min(470px,34vw)}
.product-page .product-info>.sku{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;padding-top:14px;border-top:1px solid #2f3336}
.product-page .product-info .meta-row{display:grid;gap:2px}
.product-page .product-info .meta-row b{color:#8d938f;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.product-page .product-info .meta-row i{color:#e4e8e6;font-size:13px;font-style:normal}
.product-page .detail [data-product-part="media"]{box-shadow:0 14px 34px #00000059}
@media(max-width:850px){
  .product-page .detail{grid-template-columns:1fr;gap:24px;padding:16px}
  .product-page .main-image{height:min(520px,86vw)}
  .product-page .product-info>.sku{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){.product-page .product-info>.sku{grid-template-columns:1fr}}

/* Anak kolom kanan meregang penuh; hanya badge stok dan tombol yang menyesuaikan isi. */
.product-page .detail .product-info{align-items:stretch}
.product-page .detail .product-info>.stock,
.product-page .detail .product-info>.product-page-cta{align-self:flex-start}

/* Pilihan tata letak halaman produk (diatur pada editor produk). */
.product-page .detail[data-layout="reverse"]{grid-template-columns:minmax(320px,1.08fr) minmax(0,.92fr)}
.product-page .detail[data-layout="reverse"] [data-product-part="media"]{order:2}
.product-page .detail[data-layout="reverse"] .product-info{order:1}
.product-page .detail[data-layout="stacked"]{grid-template-columns:minmax(0,1fr)}
.product-page .detail[data-layout="stacked"] .main-image{height:min(560px,44vw)}
.product-page .detail[data-layout="stacked"] .product-info{align-self:start;max-width:900px}
.product-page .detail[data-layout="compact"]{grid-template-columns:minmax(0,.62fr) minmax(320px,1.38fr)}
.product-page .detail[data-layout="compact"] .main-image{height:min(380px,26vw)}
@media(max-width:850px){
  .product-page .detail[data-layout="reverse"],
  .product-page .detail[data-layout="compact"]{grid-template-columns:1fr}
  .product-page .detail[data-layout="reverse"] [data-product-part="media"]{order:0}
  .product-page .detail[data-layout="reverse"] .product-info{order:0}
  .product-page .detail[data-layout="compact"] .main-image,
  .product-page .detail[data-layout="stacked"] .main-image{height:min(520px,86vw)}
}

/* Posisi galeri terhadap gambar utama (diatur pada editor produk).
   Bawaan tetap di bawah; pilihan lain menaruhnya di kanan, kiri, atau atas. */
.product-page [data-product-part="media"][data-gallery="top"]{display:flex;flex-direction:column-reverse}
.product-page [data-product-part="media"][data-gallery="top"] .gallery{margin:0 0 12px}
.product-page [data-product-part="media"][data-gallery="right"],
.product-page [data-product-part="media"][data-gallery="left"]{display:grid;gap:12px;align-items:start}
.product-page [data-product-part="media"][data-gallery="right"]{grid-template-columns:minmax(0,1fr) 92px}
.product-page [data-product-part="media"][data-gallery="left"]{grid-template-columns:92px minmax(0,1fr)}
.product-page [data-product-part="media"][data-gallery="left"] .main-image{order:2}
.product-page [data-product-part="media"][data-gallery="right"] .gallery,
.product-page [data-product-part="media"][data-gallery="left"] .gallery{grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
.product-page [data-product-part="media"][data-gallery="right"] .gallery img,
.product-page [data-product-part="media"][data-gallery="left"] .gallery img{height:70px}
@media(max-width:560px){
  .product-page [data-product-part="media"][data-gallery="right"],
  .product-page [data-product-part="media"][data-gallery="left"]{grid-template-columns:minmax(0,1fr)}
  .product-page [data-product-part="media"][data-gallery="left"] .main-image{order:0}
  .product-page [data-product-part="media"][data-gallery="right"] .gallery,
  .product-page [data-product-part="media"][data-gallery="left"] .gallery{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
  .product-page [data-product-part="media"][data-gallery="right"] .gallery img,
  .product-page [data-product-part="media"][data-gallery="left"] .gallery img{height:70px}
}