/* Public menu typography roles. Component CSS owns layout and color; this file owns type hierarchy. */
:root {
    --heading-font: var(--menu-font);
    --type-body-size: 14px;
    --type-body-weight: 400;
    --type-heading-size: 24px;
    --type-heading-weight: 700;
    --type-section-size: 18px;
    --type-section-weight: 600;
    --type-navigation-size: 14px;
    --type-navigation-weight: 600;
}

body,
button,
input,
select,
textarea {
    font-family: var(--menu-font), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
}

.header-banner-name,
.header-title,
.product-modal-name,
.wifi-modal-title {
    font-family: var(--heading-font), var(--menu-font), sans-serif;
    font-size: var(--type-heading-size);
    font-weight: var(--type-heading-weight);
    line-height: 1.2;
}

.panel-title,
.promo-slide-title,
.recommended-title,
.product-details-title,
.footer-info-brand,
.product-name,
.search-result-name {
    font-family: var(--heading-font), var(--menu-font), sans-serif;
    font-weight: var(--type-section-weight);
    line-height: 1.3;
}

.panel-title,
.recommended-title,
.product-details-title,
.footer-info-brand {
    font-size: var(--type-section-size);
}

.product-name {
    font-size: var(--product-name-font-size);
}

.category-name {
    font-family: var(--heading-font), var(--menu-font), sans-serif;
}

.category-tab,
.footer-social-title,
.wifi-info-label,
.product-detail-label,
.pm-detail-label {
    font-size: var(--type-navigation-size);
    font-weight: var(--type-navigation-weight);
}

.product-desc,
.product-modal-desc,
.wifi-modal-subtitle,
.search-result-category,
.product-detail-value,
.pm-detail-value,
.footer-info-description {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: 1.55;
}