/*
 * Ketabbin Design System typography v27.
 * Final presentation layer: normalizes legacy micro type without owning data or behavior.
 */

:root {
	--kb-font-persian: "B Nazanin", BNazanin, Vazirmatn, Tahoma, sans-serif;
	--kb-font-size-body: clamp(16px, .18vw + 15.4px, 17px);
	--kb-font-size-ui: clamp(14px, .14vw + 13.5px, 15px);
	--kb-font-size-label: clamp(12.5px, .12vw + 12px, 13.5px);
	--kb-line-body: 1.85;
}

html { font-size: 100%; }
body {
	font-family: var(--kb-font-persian);
	font-size: var(--kb-font-size-body);
	line-height: var(--kb-line-body);
}

:is(button, input, select, textarea) { font-family: inherit; }
:is(input, select, textarea) { font-size: 16px; }
:is(.kb-button, .button, button:not(.screen-reader-text)) { font-size: var(--kb-font-size-ui); }

/* Header: labels remain readable after the compact command-header layer. */
.kb-commerce-header[data-kb-command-header] :is(
	.kb-command-account__label,
	.kb-command-search__submit,
	.kb-category-toggle b,
	.kb-command-mega-nav a,
	.kb-category-mega__links strong
) {
	font-family: var(--kb-font-persian);
	font-size: var(--kb-font-size-ui) !important;
	line-height: 1.55 !important;
}
.kb-commerce-header[data-kb-command-header] :is(
	.kb-command-search input[type="search"],
	.kb-category-mega__links small,
	.kb-category-mega__intro small,
	.kb-category-mega__intro a
) {
	font-family: var(--kb-font-persian);
	font-size: var(--kb-font-size-label) !important;
	line-height: 1.65 !important;
}
.kb-commerce-header[data-kb-command-header] .kb-header-count {
	font-size: 10.5px !important;
	line-height: 1 !important;
}

/* Storefront and WooCommerce essentials. */
:is(.kb-store-card, .kb-product-card, .woocommerce ul.products li.product) :is(h2, h3, .woocommerce-loop-product__title) {
	font-family: var(--kb-font-persian);
	font-size: clamp(15px, .18vw + 14.4px, 16px) !important;
	line-height: 1.75 !important;
}
:is(.kb-store-card, .kb-product-card, .woocommerce ul.products li.product) :is(small, .price, .kb-store-card__meta) {
	font-size: var(--kb-font-size-label) !important;
	line-height: 1.65;
}
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, table, address, .order_details) {
	font-family: var(--kb-font-persian);
	font-size: var(--kb-font-size-ui);
	line-height: 1.8;
}

/* Account, chat, groups and cafe use the same readable UI scale. */
:is(.kb-account-nav, .kb-member-dashboard) :is(a, button, label, small, span) {
	font-size: var(--kb-font-size-label) !important;
	line-height: 1.65;
}
:is(.kb-account-nav, .kb-member-dashboard) :is(p, td, dd, input, select, textarea) {
	font-size: var(--kb-font-size-ui) !important;
	line-height: 1.8;
}
:is(.kb-chat, .kb-community, .kb-cafe-hero, .kb-event-list) :is(p, textarea, input) {
	font-size: var(--kb-font-size-ui) !important;
	line-height: 1.8;
}
:is(.kb-chat, .kb-community, .kb-cafe-hero, .kb-event-list) :is(a, button, label, small, time, .kb-chat__notice) {
	font-size: var(--kb-font-size-label) !important;
	line-height: 1.65;
}

/* Footer: navigation and trust copy must not fall back to 9–11px legacy rules. */
.kb-commerce-footer :is(.kb-footer-main, .kb-footer-trust, .kb-footer-bottom) {
	font-family: var(--kb-font-persian);
}
.kb-commerce-footer .kb-footer-main > div > strong,
.kb-commerce-footer .kb-footer-trust strong {
	font-size: 15px !important;
	line-height: 1.6;
}
.kb-commerce-footer :is(.kb-footer-main a, .kb-back-top, .kb-newsletter button) {
	font-size: 14px !important;
	line-height: 1.65;
}
.kb-commerce-footer :is(.kb-footer-main p, .kb-newsletter input) {
	font-size: 15px !important;
	line-height: 1.85;
}
.kb-commerce-footer :is(.kb-footer-trust small, .kb-newsletter small, .kb-newsletter-consent span, .kb-footer-bottom) {
	font-size: 12.5px !important;
	line-height: 1.7;
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	.kb-commerce-header[data-kb-command-header] .kb-command-search input[type="search"] {
		font-size: 16px !important;
	}
	.kb-commerce-header[data-kb-command-header] .kb-category-toggle b,
	.kb-commerce-header[data-kb-command-header] .kb-command-mega-nav a {
		font-size: 12.5px !important;
	}
	.kb-mobile-store-nav a span {
		font-family: var(--kb-font-persian);
		font-size: clamp(10.5px, 2.8vw, 11.5px) !important;
		line-height: 1.3 !important;
	}
	.kb-commerce-footer :is(.kb-footer-main a, .kb-back-top, .kb-newsletter button) {
		font-size: 14px !important;
	}
}

@media (forced-colors: active) {
	.kb-commerce-header[data-kb-command-header] .kb-header-count { border: 1px solid CanvasText; }
}