/**
 * Rosecal global type system.
 *
 * Hollow role          Rosecal open-source equivalent
 * Graphik XX Condensed -> Oswald
 * Neue Haas Grotesk    -> Inter
 * GT America Mono      -> Roboto Mono
 */

:root {
	--rose-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
	--rose-font-body: "Inter", Arial, Helvetica, sans-serif;
	--rose-font-utility: "Roboto Mono", "Courier New", monospace;
}

/* Keep Elementor's global typography controls aligned with the storefront. */
.elementor-kit-12 {
	--e-global-typography-primary-font-family: "Oswald";
	--e-global-typography-secondary-font-family: "Inter";
	--e-global-typography-text-font-family: "Inter";
	--e-global-typography-accent-font-family: "Roboto Mono";
}

body,
body :where(
	p,
	li,
	dt,
	dd,
	blockquote,
	figcaption,
	label,
	input,
	textarea,
	select,
	option,
	table,
	td,
	.elementor-widget-text-editor,
	.woocommerce,
	.woocommerce-page,
	.rose-qv,
	.rose-product-card
) {
	font-family: var(--rose-font-body) !important;
}

body :where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.elementor-heading-title,
	.product_title,
	.woocommerce-products-header__title,
	.woocommerce-loop-product__title,
	.rose-product-card__title,
	.site-title
) {
	font-family: var(--rose-font-display) !important;
	font-style: normal;
}

body :where(
	button,
	.button,
	input[type="button"],
	input[type="submit"],
	.elementor-button,
	.rose-root-link,
	.rose-sub-item a,
	.woocommerce-breadcrumb,
	.onsale,
	.badge,
	[class*="__badge"],
	[class*="-badge"],
	.woocommerce-Price-amount,
	.price,
	.rcpdp-eyebrow,
	.rcpdp-kicker,
	.rpb-offer,
	.rpb-offers__title
) {
	font-family: var(--rose-font-utility) !important;
	font-style: normal;
}

/* Embedded Elementor HTML sections define their own variables. Override only
 * the type roles so their editable content and layout remain untouched. */
body .rose-home {
	font-family: var(--rose-font-body) !important;
}

body .rose-home :where(h1, h2, h3),
body .rc-foot :where(h1, h2, h3, h4),
body .rosecal-hollow-demo :where(h1, h2, h3, h4) {
	font-family: var(--rose-font-display) !important;
}

body .rc-foot {
	--rc-display: var(--rose-font-display);
	--rc-body: var(--rose-font-body);
	font-family: var(--rose-font-body) !important;
}

body.rosecal-product-demo-page .rosecal-hollow-demo {
	--rcpdp-font-heading: var(--rose-font-display);
	--rcpdp-font-mono: var(--rose-font-utility);
	--rcpdp-font-body: var(--rose-font-body);
	font-family: var(--rose-font-body) !important;
}

body.rosecal-product-demo-page .rcpdp-size-drawer {
	font-family: var(--rose-font-body) !important;
}

body.rosecal-product-demo-page .rcpdp-size-drawer :is(.md-modal-title, .md-size-chart-subtitle, th) {
	font-family: var(--rose-font-utility) !important;
}

/* Icon, rating and symbol fonts are semantic assets, not text typography. */
.woocommerce .star-rating,
.woocommerce .star-rating span,
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before,
.star-rating,
.star-rating span,
.star-rating::before,
.star-rating span::before {
	font-family: star !important;
}

.dashicons,
.dashicons-before::before {
	font-family: dashicons !important;
}

@media (max-width: 767px) {
	body :where(button, .button, .elementor-button, input[type="button"], input[type="submit"]) {
		letter-spacing: 0;
	}

	/* Hello Elementor gives the page title width:100% plus inline padding in
	 * content-box mode, which creates a 20px horizontal overflow on mobile. */
	.page-header .entry-title {
		box-sizing: border-box;
	}
}