/* NoirMusk — responsive typography.
   Headings and larger text were keeping their desktop sizes on tablets and phones. Everything here only applies
   at 900px and below, and scales smoothly (clamp) with the screen width; desktop sizes are not touched.

     page titles   28px (375px screen) → 42px (about 830px+)
     section heads 25px (375px screen) → 36px (about 900px)
     product title 24px → 32px
     lead text     16px → 19px

   Loaded last, so it wins over the page stylesheets without editing them. */

@media (max-width: 900px) {

	/* ---------- page titles (banner) ---------- */
	html body .page-header.page-header--default .entry-title,
	html body .noirmusk-shop-hero__title,
	html body .noirmusk-contact-hero__title,
	html body .noirmusk-about-hero h1,
	html body .noirmusk-404__title {
		font-size: clamp(28px, 4.2vw + 12px, 42px);
		line-height: 1.2;
	}
	/* Elementor breadcrumb banner (My Account, Order Tracking, FAQs) */
	html body .elementor-top-section:has(.lakit-breadcrumbs-page-title-yes) .lakit-breadcrumbs__title {
		font-size: clamp(28px, 4.2vw + 12px, 42px) !important;
		line-height: 1.2 !important;
	}

	/* ---------- home hero ---------- */
	html body .noirmusk-hero__text h1 {
		font-size: clamp(30px, 6.4vw + 8px, 52px);
		line-height: 1.12;
	}

	/* ---------- section headings ---------- */
	html body .noirmusk-section__heading h2,
	html body .noirmusk-split-section__text h2,
	html body .noirmusk-split-section--story .noirmusk-split-section__text h2,
	html body .noirmusk-split-section--gift .noirmusk-split-section__text h2,
	html body .noirmusk-coll__head h2,
	html body .noirmusk-coll__cta h2,
	html body .noirmusk-policy__head h2,
	html body .noirmusk-policy__help h2,
	html body .noirmusk-related__title,
	html body .noirmusk-tm__title {
		font-size: clamp(25px, 3.6vw + 12px, 36px);
		line-height: 1.22;
	}
	html body .noirmusk-contact-info h2 {
		font-size: clamp(22px, 2.4vw + 13px, 26px);
	}

	/* ---------- product page ---------- */
	html body .summary h1.product_title {
		font-size: clamp(24px, 2.8vw + 15px, 32px);
		line-height: 1.2;
	}
	html body .summary .price,
	html body .summary .price .amount,
	html body .summary .price bdi {
		font-size: clamp(19px, 1vw + 15px, 24px);
	}

	/* ---------- lead paragraphs, quotes, prices ---------- */
	html body .noirmusk-coll__lead,
	html body .noirmusk-policy__lead {
		font-size: clamp(16px, 0.9vw + 13px, 19px);
		line-height: 1.65;
	}
	html body .noirmusk-about-quote p {
		font-size: clamp(19px, 2.2vw + 11px, 28px);
		line-height: 1.5;
	}
	html body .noirmusk-policy__price {
		font-size: clamp(24px, 1.2vw + 20px, 30px);
	}
}

@media (max-width: 480px) {
	/* small phones: a touch tighter still */
	html body .noirmusk-footer__heading {
		font-size: 16px;
	}
	html body .noirmusk-split-section__text p,
	html body .noirmusk-split-section--story .noirmusk-split-section__text p {
		font-size: 15px;
		line-height: 1.75;
	}
}