/*
 * Bathroom guide — page-scoped, ADDITIVE styles for the patterns that the
 * shared portal-category.css does not already cover. Enqueued only on /bathroom/
 * (after portal-category.css), so the shared stylesheet and every sibling guide
 * stay byte-identical. Tokens (--pine, --pine-soft, --line, --serif, etc.) are
 * inherited from the .rnf-guide scope defined in portal-category.css.
 */

/* 1. Section headers grouping categories (Soft goods, Water quality, etc.). */
.rnf-guide .bathroom-section-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 30px;
	color: var(--pine);
	letter-spacing: -.3px;
	margin: 40px 0 6px;
}

.rnf-guide .bathroom-section-title:first-of-type {
	margin-top: 24px;
}

/* 2. Single non-tiered pick (Squeegee): one card, not a 3-up grid. */
.rnf-guide .tiers.is-single {
	grid-template-columns: 1fr;
	max-width: 360px;
}

/* 3. Pair-with companion square, rendered once in the top-right of a section
 *    header (balances the .thumb on the left). Reuses the card's own
 *    .brand / .origin / .detail line styles + existing tokens; no new colors or
 *    fonts. Only the header flagged with .swap__head--pair gets the square. */
.rnf-guide .swap__head--pair {
	align-items: flex-start;
	flex-wrap: wrap;
}

.rnf-guide .swap__pair {
	margin-left: auto;
	flex: 0 0 300px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 15px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 13px;
}

.rnf-guide .swap__pair-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--pine-soft);
}

/* .detail is scoped to .tier in portal-category.css; re-declare for the square. */
.rnf-guide .swap__pair .detail {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

/* Narrow viewports: the square drops full-width below the intro note instead of
 * overflowing the header row. */
@media (max-width: 760px) {
	.rnf-guide .swap__head--pair .swap__pair {
		flex-basis: 100%;
		max-width: none;
		margin-left: 0;
		margin-top: 4px;
	}
}

/* Retired 2026-07-06: title now shown in title case from stored text ("Non-Slip Tub Mat"), not CSS caps.
   Scoped rule preserved (commented) rather than deleted; removing it affects only this section.
   #swap-non-slip-tub-mat .swap__intro h2{text-transform:uppercase;} */