/* PRARAM2TOOLS Global Typography System V4.5.3
   ChatGPT-inspired pairing: Inter for Latin/numerals, Sarabun for Thai. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

:root {
    --p2-font-sans: "Inter", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    --p2-text-xs: 0.875rem;
    --p2-text-sm: 0.9375rem;
    --p2-text-base: 1rem;
    --p2-text-reading: 1.0625rem;
    --p2-text-lg: 1.125rem;
    --p2-h6: 1rem;
    --p2-h5: 1.125rem;
    --p2-h4: 1.25rem;
    --p2-h3: clamp(1.25rem, 1.7vw, 1.5rem);
    --p2-h2: clamp(1.625rem, 2.8vw, 2.125rem);
    --p2-h1: clamp(2rem, 4.2vw, 3rem);
    --p2-leading-tight: 1.3;
    --p2-leading-body: 1.72;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
optgroup {
    font-family: var(--p2-font-sans) !important;
}

body {
    font-size: var(--p2-text-base);
    line-height: var(--p2-leading-body);
    font-weight: 400;
}

p,
li,
dd,
blockquote,
.product-description,
.blog-content,
.article-content,
.hero-lead {
    font-family: var(--p2-font-sans) !important;
    line-height: var(--p2-leading-body);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.product-title,
.brand-name,
.price,
.product-price,
.price-sale,
.price-normal,
.btn,
.cta,
.nav-link,
.fw-bold,
strong,
b {
    font-family: var(--p2-font-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title {
    line-height: var(--p2-leading-tight);
    letter-spacing: 0;
    text-wrap: balance;
}

h1, .page-title { font-size: var(--p2-h1); font-weight: 700; }
h2, .section-title { font-size: var(--p2-h2); font-weight: 700; }
h3 { font-size: var(--p2-h3); font-weight: 600; }
h4 { font-size: var(--p2-h4); font-weight: 600; }
h5 { font-size: var(--p2-h5); font-weight: 600; }
h6 { font-size: var(--p2-h6); font-weight: 600; }

button,
.btn,
.cta,
input,
select,
textarea {
    font-size: var(--p2-text-base);
    line-height: 1.5;
}

label,
.form-label,
.nav-link,
.dropdown-item {
    font-size: var(--p2-text-base);
    line-height: 1.55;
}

small,
.small,
.micro,
.caption,
.breadcrumb,
.product-cat {
    font-size: var(--p2-text-sm) !important;
    line-height: 1.55;
}

.price,
.product-price,
.price-sale,
.price-normal {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Preserve icon fonts. */
.fa, .fas, .far, .fal, .fad, .fab,
[class^="fa-"], [class*=" fa-"],
.bi, [class^="bi-"], [class*=" bi-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}
.fab { font-family: "Font Awesome 6 Brands" !important; }

@media (max-width: 767.98px) {
    :root {
        --p2-text-base: 1rem;
        --p2-text-reading: 1rem;
        --p2-h1: clamp(1.875rem, 9vw, 2.25rem);
        --p2-h2: clamp(1.5rem, 7vw, 1.875rem);
    }
}

@media (min-width: 768px) {
    .blog-content,
    .article-content,
    .product-description,
    .hero-lead {
        font-size: var(--p2-text-reading);
    }
}