/*
 * Responsive type scale for the product page.
 *
 * Why this file exists rather than edits inside product-page.css and
 * product-page-marketing.css: the rules below are generated from the Figma
 * frames, they touch selectors owned by both of those files, and they must win
 * on source order where specificity ties. A separate sheet enqueued after both
 * keeps that guarantee explicit instead of depending on where a rule happens to
 * sit inside a 2,000-line file, and it keeps generated rules separable from
 * hand-written ones.
 *
 * What it fixes. The sweep on 2026-09-18 measured every text node in the six
 * PDP Figma frames against the deployed page at nine widths. Of 572 strings
 * present at both 428 and 1512, 408 carry a DIFFERENT font size in Figma, and
 * the site was shipping close to the desktop size everywhere: 101 font-size
 * deltas at 428, 59 at 744, 16 at 1512, every one of them Figma smaller and
 * live larger. The responsive type scale was never implemented.
 *
 * The generator and the measurement data are NOT in this repo. They live in
 * the Bonza project workspace, which is where the sweep ran, at
 * projects/bonza/docs/audit-2026-09-18/ (gen-typescale-css.py reads
 * typescale-rules.json, which selector-map.mjs produces from the deployed
 * page). Said explicitly because a path with no repo named in front of it
 * reads like a path in this one, and this file is otherwise self-contained:
 * editing a size here is safe, and only a full regeneration needs those.
 */

/* Responsive type scale, generated from the Figma frames. The band boundaries
 * come from the measured delta populations, described in the header above. */

@media (max-width: 743px) {
	.bpp-checkout-trust-row__item span {
		font-size: 14px;
	}

	.bpp-stock-row span {
		font-size: 12px;
	}

	.bpp-trust-row span {
		font-size: 12px;
	}

	.bppm-info-accordion__detail a {
		font-size: 12px;
	}

	.bppm-info-accordion__detail strong {
		font-size: 12px;
	}

	.bppm-info-accordion__detail td {
		font-size: 12px;
	}

	.bppm-timeline__card h3 {
		font-size: 14px;
	}

	.bppm-timeline__card p {
		font-size: 14px;
	}

	button.bpp-read-more-toggle {
		font-size: 14px;
	}

	h2.bppm-calculator__heading {
		font-size: 24px;
	}

	h2.bppm-faq__heading {
		font-size: 24px;
	}

	h2.bppm-how__heading {
		font-size: 20px;
	}

	h2.bppm-reasons__heading {
		font-size: 20px;
	}

	h2.bppm-routine__heading {
		font-size: 24px;
	}

	h2.bppm-timeline__heading {
		font-size: 24px;
	}

	h2.bpp-subscription-banner__heading {
		font-size: 14px;
	}

	h3.bppm-reason-card__title {
		font-size: 14px;
	}

	p.bpp-features__allergen-body {
		font-size: 12px;
	}

	p.bppm-calculator__lead {
		font-size: 18px;
	}

	p.bppm-eyebrow {
		font-size: 12px;
	}

	p.bppm-eyebrow.bppm-eyebrow--on-amber {
		font-size: 12px;
	}

	p.bppm-eyebrow.bppm-eyebrow--on-dark {
		font-size: 12px;
	}

	p.bppm-how__lead {
		font-size: 18px;
	}

	p.bppm-reason-card__body {
		font-size: 12px;
	}

	p.bppm-reasons__lead {
		font-size: 18px;
	}

	p.bppm-routine__lead {
		font-size: 18px;
	}

	p.bppm-timeline__tip {
		font-size: 14px;
	}

	p.bppm-why__callout-heading {
		font-size: 14px;
	}

	span.bpp-features__allergen-lead {
		font-size: 14px;
	}

	span.bpp-features__card-label {
		font-size: 12px;
	}

	span.bpp-features__card-value {
		font-size: 12px;
	}

	span.bpp-swatch-desc {
		font-size: 12px;
	}

	span.bpp-swatch-size {
		font-size: 12px;
	}

	span.bppm-info-accordion__label {
		font-size: 14px;
	}

	span.bppm-timeline__label {
		font-size: 12px;
	}
}

@media (min-width: 744px) and (max-width: 1439px) {
	.bpp-checkout-trust-row__item span {
		font-size: 14px;
	}

	.bppm-timeline__card h3 {
		font-size: 14px;
	}

	.bppm-timeline__card p {
		font-size: 14px;
	}

	button.bpp-read-more-toggle {
		font-size: 14px;
	}

	h2.bppm-calculator__heading {
		font-size: 30px;
	}

	h2.bppm-faq__heading {
		font-size: 30px;
	}

	h2.bppm-how__heading {
		font-size: 28px;
	}

	h2.bppm-reasons__heading {
		font-size: 28px;
	}

	h2.bppm-routine__heading {
		font-size: 30px;
	}

	h2.bppm-timeline__heading {
		font-size: 30px;
	}

	h2.bpp-subscription-banner__heading {
		font-size: 14px;
	}

	h3.bppm-reason-card__title {
		font-size: 14px;
	}

	p.bppm-calculator__lead {
		font-size: 18px;
	}

	p.bppm-how__lead {
		font-size: 18px;
	}

	p.bppm-reasons__lead {
		font-size: 18px;
	}

	p.bppm-routine__lead {
		font-size: 18px;
	}

	p.bppm-timeline__tip {
		font-size: 14px;
	}

	p.bppm-why__callout-heading {
		font-size: 14px;
	}

	span.bpp-features__allergen-lead {
		font-size: 14px;
	}

	span.bppm-info-accordion__label {
		font-size: 14px;
	}
}

@media (min-width: 1440px) {
	strong.schema-faq-question {
		font-size: 16px;
	}
}

/* Written at the specificity of the rules they override, because source order
 * cannot beat a three-class selector. See gen-typescale-css.py for why. */

@media (max-width: 743px) {
	.single-product .ct-swatch-container .bpp-swatch-size,
	.single-product .ct-swatch-container[aria-pressed="true"] .bpp-swatch-size {
		font-size: 12px;
	}

	.single-product .ct-swatch-container .bpp-swatch-desc,
	.single-product .ct-swatch-container[aria-pressed="true"] .bpp-swatch-desc {
		font-size: 12px;
	}

	.bpp-short-description .bpp-read-more-toggle {
		font-size: 14px;
	}
}

@media (min-width: 744px) and (max-width: 1439px) {
	.bpp-short-description .bpp-read-more-toggle {
		font-size: 14px;
	}
}