/* Pengaturan teks halaman produk (diatur pada editor produk, berlaku global).
   Nilainya datang sebagai variabel CSS dari JFC.applyProductText, jadi setiap
   aturan tetap punya nilai cadangan bila pengaturan belum pernah disimpan. */
.product-page[data-text-font]:not([data-text-font="default"]){font-family:var(--product-text-font,inherit)}
.product-page[data-text-font]:not([data-text-font="default"]) h2,
.product-page[data-text-font]:not([data-text-font="default"]) h3{font-family:var(--product-text-font,inherit)}
/* Tiap bagian boleh memakai hurufnya sendiri; bila kosong ikut huruf utama. */
.product-page .product-info h1{font-family:var(--product-title-font,inherit)}
.product-page .product-info .price,
.product-page .detail .price{font-family:var(--product-price-font,inherit)}
.product-page .product-info .short,
.product-page .product-description-section .description{font-family:var(--product-body-font,inherit)}

.product-page .product-info h1{font-size:var(--product-title-size,clamp(34px,4vw,56px));color:var(--product-title-color,#fff)}
.product-page .product-info .price,
.product-page .detail .price{font-size:var(--product-price-size,30px);color:var(--product-price-color,#ffc13b)}
.product-page .product-info .price s{font-size:calc(var(--product-price-size,30px) * .55)}
.product-page .product-info .short,
.product-page .product-description-section .description{font-size:var(--product-body-size,15px);color:var(--product-body-color,#c4c4c4)}
.product-page .description.has-spec .spec-value{font-size:var(--product-body-size,15px)}

/* Perataan: teks dan elemen sebaris ikut bergeser agar hasilnya rapi. */
.product-page .product-info,
.product-page .product-description-section{text-align:var(--product-text-align,left)}
.product-page[data-text-align="center"] .detail .product-info>.stock,
.product-page[data-text-align="center"] .detail .product-info>.product-page-cta{align-self:center}
.product-page[data-text-align="right"] .detail .product-info>.stock,
.product-page[data-text-align="right"] .detail .product-info>.product-page-cta{align-self:flex-end}
.product-page[data-text-align="center"] .product-info>.sku .meta-row{justify-items:center}
.product-page[data-text-align="right"] .product-info>.sku .meta-row{justify-items:end}
.product-page[data-text-align="center"] .description li,
.product-page[data-text-align="right"] .description li{text-align:left}
.product-page[data-text-align="center"] .description ul,
.product-page[data-text-align="center"] .description ol{display:inline-block;text-align:left}
@media(max-width:850px){
  .product-page .product-info h1{font-size:min(var(--product-title-size,40px),40px)}
}