/*
 * product-pages.css
 *
 * Styles for the three product pages: /enkeltbillet, /klippekort, /medlemskab.
 * Pattern groups: D card, ink 3-step process, italic-serif benefits,
 * photo-led compare, mini cross-promo.
 *
 * Color tokens come from theme.json (var(--wp--preset--color--*)).
 * Font tokens come from theme.json (var(--wp--preset--font-family--*)).
 * Square corners enforced — never add border-radius here.
 *
 * Spec: docs/superpowers/specs/2026-05-27-hotncold-3-page-product-redesign-design.md
 */

/* ============================================================
   D CARD — shared across all 3 pages
   ============================================================ */

.hncn-product-card {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

/* Homepage "Tre måder" 3-up tile grid — three .hncn-tiles in a row at
   desktop, single column below 920px. Matches the cross-promo tile style
   from product pages but at a wider scale since this is the primary
   commitment section, not a secondary cross-promo.

   Cap overall grid width so each square tile sits ~320px instead of
   ~430px (used to fill the full 1336px content frame). Aspect (1/1)
   unchanged. */
.hncn-tile-grid--products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 919px) {
	.hncn-tile-grid--products {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Flat FAQ — simple <dl> / <dt> / <dd> list with hairline dividers.
   Used on /gavekort for gift-specific Q&A (the shared .hncn-faq
   accordion pattern is saunagus-centric and overkill for 5 short
   gavekort questions). */
.hncn-faq-flat {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--inter);
	border-top: 1px solid rgba(36, 29, 22, 0.15);
}
.hncn-faq-flat dt {
	padding: 1.4rem 0 0.4rem;
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ink);
}
.hncn-faq-flat dd {
	margin: 0 0 1.4rem;
	padding: 0 0 1.4rem;
	font-size: 13px;
	line-height: 23px;
	color: var(--wp--preset--color--ink-soft);
	border-bottom: 1px solid rgba(36, 29, 22, 0.15);
}
.hncn-faq-flat dd:last-of-type {
	margin-bottom: 0;
}

/* Wrapper that pairs a .hncn-tile with a small italic caption below.
   Used in the homepage "Tre måder" section to frame the choice
   ("For dig der ...") without bloating the tile itself. */
.hncn-tile-with-caption {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hncn-tile__caption {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	line-height: 1.5;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	max-width: 38ch;
}

/* Single-card variant: enkeltbillet + medlemskab.
   HORIZONTAL layout — photo on left, copy on right, fills container width
   so there's no dead right-hand whitespace.

   Markup wraps text children in .hncn-product-card__text so the grid has
   exactly 2 items (photo + text-container) that align center vertically.
   This avoids the bug where each text paragraph became a separate grid
   row and got spread out across the photo's height. */
.alignfull.is-layout-constrained > .hncn-product-card.hncn-product-card--single {
	max-width: 960px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 2.5rem;
	align-items: center;
}

.hncn-product-card--single .hncn-product-card__photo {
	aspect-ratio: 1 / 1;
	margin: 0;
}

.hncn-product-card__text {
	/* Standard block flow — paragraphs stack naturally */
}

@media (max-width: 781px) {
	.alignfull.is-layout-constrained > .hncn-product-card.hncn-product-card--single {
		grid-template-columns: 1fr !important;
		max-width: 480px !important;
	}
	.hncn-product-card--single .hncn-product-card__photo {
		margin: 0 0 1.5rem 0;
	}
}

/* ============================================================
   STEPS — sticky scroll-scrub: anchor tile on left, step text on
   right swaps in place as you scroll through the section.
   Section is 3× viewport tall so 3 step phases get equal scroll budget.
   ============================================================ */

.hncn-steps {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
	/* border-box so the mobile full-bleed (width:100vw + calc(50% - 50vw) margins)
	   keeps its 1.5rem side padding INSIDE the 100vw box. Without this the section
	   renders 100vw + 48px = 48px wider than the viewport and the page scrolls
	   horizontally on phones. Desktop is unaffected (padding lives on __sticky). */
	box-sizing: border-box;
}

/* Class name kept for backwards-compatibility; no longer sticky.
   Steps are now click-driven via prev/next arrows below the stage. */
.hncn-steps__sticky {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 1336px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) 4rem;
}

/* Section header: eyebrow + heading describing what's below */
.hncn-steps__header {
	max-width: 720px;
}

.hncn-steps__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.6rem 0;
}

.hncn-steps__heading {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* Main row: tiles on left, step stage on right.
   align-items: stretch so the right col matches the tile-row height,
   letting the arrow nav sit at the bottom edge of the tiles. */
.hncn-steps__main {
	display: flex;
	align-items: stretch;
	gap: 3rem;
}

/* --no-tiles variant: used when the section has no left-side product
   tiles (e.g. on /gavekort, where the gift tiles live in their own
   section above). The single col fills the row; we cap content width
   so the body text stays readable instead of stretching to 1336px. */
.hncn-steps__main--no-tiles .hncn-steps__col {
	max-width: 720px;
}
.hncn-steps__main--no-tiles .hncn-steps__stage {
	min-height: 240px;
}

/* --single-tile variant: one wider tile (instead of three small ones)
   on the RIGHT, paired with the step stage on the LEFT. Used on
   /medlemskab "Hvad du får" where the membership is a single product.
   Tile fills the col height (overrides .hncn-tile's 1:1 aspect-ratio)
   so it stays visually balanced against the step stage + nav.

   Desktop: row-reverse puts tile right, steps left.
   Mobile (<=1100px): the existing breakpoint switches main to
   flex-direction: column which overrides row-reverse — tile stacks
   above steps in DOM order, which is the right reading order on small
   screens (buy moment visible first). */
.hncn-steps__main--single-tile {
	flex-direction: row-reverse;
}
.hncn-steps__main--single-tile .hncn-steps__tiles {
	width: 360px;
}
.hncn-steps__main--single-tile .hncn-steps__tiles .hncn-tile {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* --mosaic variant: a 5-tile square mosaic sits on the RIGHT paired
   with the step stage on the LEFT. Used on /gavekort. Every tile is a
   different size (6 + 4 + 3 + 2 + 1 = 16 cells of a 4×4 grid), packed
   so the whole mosaic forms a perfect 1:1 square that aligns flush to
   the right edge of the section's 1336px content frame.

   Tile size hierarchy (cells):
     1. Årsmedlemskab — 6 cells (3×2, top-left, biggest)
     2. 10-klip       — 4 cells (1×4, tall right column)
     3. 5-klip        — 3 cells (3×1, wide strip below Årsmedlemskab)
     4. "I tvivl?"    — 2 cells (2×1, wide-ish bottom-left)
     5. Enkelt gus    — 1 cell  (1×1, smallest)

   Grid layout:
     [ 1  1  1  2 ]   row 1
     [ 1  1  1  2 ]   row 2
     [ 3  3  3  2 ]   row 3
     [ 4  4  5  2 ]   row 4

   38% of the steps row goes to the mosaic so its right edge naturally
   aligns with the section's right content edge, not a hardcoded px.   */
.hncn-steps__main--mosaic {
	flex-direction: row-reverse;
	align-items: start;
}
.hncn-steps__main--mosaic .hncn-steps__tiles {
	/* Mosaic anchors the right side of the section. Aspect 4:3 lets it
	   take a larger footprint than a square would without dominating
	   the row vertically. */
	flex: 0 0 45%;
	max-width: 560px;
	display: block;
}

/* ASYMMETRIC EDITORIAL GRID — 4 columns × 3 rows, 7 tiles with varied
   cell spans inspired by editorial mosaic layouts (eOne hero, etc.).

   Årsmedlemskab anchors the top-left as a 2×2 hero block; 10-klip is
   a vertical 1×2 to its right; 5-klip a horizontal 2×1 below.
   Two brick decorative blocks act as visual rests in the right column,
   echoing the logo motif. Enkelt gus and "I tvivl?" sit as 1×1 corners.

        col1   col2   col3   col4
   r1 [ A      A      B      DEC ]
   r2 [ A      A      B      ENK ]
   r3 [ 5-K    5-K    DEC    I-T ]
                                                                       */
.hncn-tile-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
	width: 100%;
	aspect-ratio: 4 / 3;
}
.hncn-steps__tiles .hncn-tile-mosaic > .hncn-tile {
	aspect-ratio: auto;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	padding: 1.1rem 1.2rem;
	/* Label-top, price-bottom axis: stretch content vertically so
	   eyebrow stays at the top of the cell and price/CTA settle at
	   the bottom — the eOne mosaic axis. */
	justify-content: space-between;
}
.hncn-steps__tiles .hncn-tile-mosaic > .hncn-tile .hncn-tile__price {
	font-size: 1.5rem;
	line-height: 1.05;
}
.hncn-steps__tiles .hncn-tile-mosaic > .hncn-tile .hncn-tile__meta {
	display: none;
}
.hncn-steps__tiles .hncn-tile-mosaic > .hncn-tile .hncn-tile__cta {
	font-size: 12px;
}

/* Explicit grid positions — DOM order:
   1. Årsmedlemskab → 2×2 top-left
   2. 10-klip       → 1×2 vertical, col 3 rows 1-2
   3. brick block   → 1×1 top-right corner
   4. Enkelt gus    → 1×1 middle-right
   5. 5-klip        → 2×1 bottom-left horizontal
   6. brick block   → 1×1 bottom-centre
   7. I tvivl?      → 1×1 bottom-right                                  */
.hncn-tile-mosaic > .hncn-tile:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.hncn-tile-mosaic > .hncn-tile:nth-child(2) { grid-column: 3;          grid-row: 1 / span 2; }
.hncn-tile-mosaic > .hncn-tile:nth-child(3) { grid-column: 4;          grid-row: 1; }
.hncn-tile-mosaic > .hncn-tile:nth-child(4) { grid-column: 4;          grid-row: 2; }
.hncn-tile-mosaic > .hncn-tile:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
.hncn-tile-mosaic > .hncn-tile:nth-child(6) { grid-column: 3;          grid-row: 3; }
.hncn-tile-mosaic > .hncn-tile:nth-child(7) { grid-column: 4;          grid-row: 3; }

/* Decorative (label-less) tiles — single brick colour, no content. */
.hncn-tile-mosaic > .hncn-tile--blank {
	display: block;
	padding: 0;
	pointer-events: none;
	background: var(--wp--preset--color--brick);
}

@media (max-width: 919px) {
	.hncn-steps__main--mosaic .hncn-steps__tiles {
		flex: 1;
		width: 100%;
	}
	/* On narrow screens the 3×3 keeps its shape — same logo motif,
	   just at fluid full-row width. No restructure needed. */
}

/* LEFT: 3 tiles at their original 260px size, side-by-side, no stretch */
.hncn-steps__tiles {
	display: flex;
	gap: 1rem;
	flex-shrink: 0;
}

.hncn-steps__tiles .hncn-tile {
	width: 260px;
	flex-shrink: 0;
}

/* RIGHT: stage at top, arrow nav pushed to bottom via space-between.
   Col stretches to match tile-row height so arrows align with tile bottom. */
.hncn-steps__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-width: 0;
}

.hncn-steps__stage {
	position: relative;
	min-height: 200px;
}

/* Small elegant prev/next arrows + counter below the step body */
.hncn-steps__nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.hncn-steps__nav-btn {
	background: transparent;
	border: none;
	/* ≥44pt tap target — was 0.5rem 0 (16px tall) which fails iOS HIG */
	padding: 0.85rem 0.5rem;
	margin: -0.85rem -0.5rem;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	transition: color var(--hncn-ease-fast);
}

.hncn-steps__nav-btn:hover {
	color: var(--wp--preset--color--brick);
}

.hncn-steps__nav-btn:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: 2px;
	color: var(--wp--preset--color--brick);
}

.hncn-steps__nav-btn svg {
	transition: transform 0.18s ease;
}

.hncn-steps__nav-btn[data-action="next"]:hover svg {
	transform: translateX(3px);
}

.hncn-steps__nav-btn[data-action="prev"]:hover svg {
	transform: translateX(-3px);
}

.hncn-steps__nav-counter {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	min-width: 4.5em;
	text-align: center;
}

.hncn-steps__item {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	pointer-events: none;
}

/* Incoming item waits for outgoing to fade out (200ms delay) so the two
   items don't overlap visually mid-cross-fade. */
.hncn-steps__item.is-active {
	opacity: 1;
	transition: opacity 0.25s ease-in 0.2s;
	pointer-events: auto;
}

.hncn-steps__numeral {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 4rem;
	line-height: 0.9;
	color: var(--wp--preset--color--brick);
	margin: 0 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid rgba(36, 29, 22, 0.25);
	display: inline-block;
}

.hncn-steps__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.75rem;
}

.hncn-steps__body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	max-width: 460px;
}

/* Tablet: stack tiles ABOVE the step stage in the main row, keep sticky */
@media (max-width: 1100px) {
	.hncn-steps__sticky {
		padding: 3rem 2rem;
		gap: 2rem;
	}
	.hncn-steps__main {
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
	}
	.hncn-steps__tiles {
		justify-content: center;
	}
	.hncn-steps__stage {
		min-height: 280px;
	}
	.hncn-steps__heading {
		font-size: 1.875rem;
	}
}

/* Small tablet / large phone: tiles wrap to 2-col grid, steps all visible */
@media (max-width: 780px) {
	.hncn-steps {
		padding: var(--wp--preset--spacing--50) 1.5rem;
	}
	.hncn-steps__sticky {
		padding: 0;
	}
	.hncn-steps__tiles {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}
	.hncn-steps__tiles .hncn-tile {
		width: calc(50% - 0.5rem);
		max-width: 260px;
	}
	/* Single-tile variant (medlemskab): the container is a fixed 360px with
	   flex-shrink:0, so without this it overflows any phone narrower than ~408px
	   (iPhone 12–15 at 390px, SE at 375px). Cap it to the available column width,
	   centered, so the card never pushes past the viewport. */
	.hncn-steps__main--single-tile .hncn-steps__tiles {
		width: 100%;
		max-width: 360px;
		align-self: center;
	}
	.hncn-steps__stage {
		min-height: auto;
	}
	/* Mobile: stack all steps vertically, hide arrow nav */
	.hncn-steps__item {
		position: static;
		opacity: 1;
		pointer-events: auto;
		margin-bottom: 2.5rem;
		transition: none;
	}
	.hncn-steps__nav {
		display: none;
	}
}

/* Phone: tiles to single column */
@media (max-width: 480px) {
	.hncn-steps__tiles .hncn-tile {
		width: 100%;
		max-width: 100%;
	}
	.hncn-steps__heading {
		font-size: 1.625rem;
	}
	.hncn-steps__numeral {
		font-size: 4rem;
	}
	.hncn-steps__title {
		font-size: 1.625rem;
	}
}

/* ============================================================
   TILES — small blue 1:1 product/cross-promo squares
   Used on: klippekort (3 tiles), cross-promo (2 per page),
   gavekort (4 tiles above fold).
   ============================================================ */

.hncn-tile {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--baltic);
	color: var(--wp--preset--color--creme);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	transition: background-color var(--hncn-ease-fast);
}

a.hncn-tile:hover {
	background: #4d6770; /* slightly darker baltic */
}

a.hncn-tile:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	background: #4d6770;
}

.hncn-tile__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--creme);
	opacity: 0.75;
	margin: 0;
}

.hncn-tile__price {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.875rem;
	line-height: 1;
	color: var(--wp--preset--color--creme);
	margin: 0;
}

.hncn-tile__meta {
	font-size: 12px;
	font-style: italic;
	color: var(--wp--preset--color--creme);
	opacity: 0.7;
	margin: 0.25rem 0 0 0;
}

.hncn-tile__cta {
	font-size: 13px;
	color: var(--wp--preset--color--creme);
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(251, 247, 238, 0.45);
	align-self: flex-start;
	margin: 0;
}

a.hncn-tile:hover .hncn-tile__cta {
	border-bottom-color: var(--wp--preset--color--creme);
}

.hncn-tile-grid {
	display: grid;
	gap: 1rem;
}

.hncn-tile-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 260px));
}

/* Cross-promo: 2 pairs side-by-side, each pair = [copy | tile] horizontal */
.hncn-cross-promo__pairs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
}

.hncn-cross-promo__pair {
	display: grid;
	grid-template-columns: 220px 260px;
	gap: 1.5rem;
	align-items: center;
}

.hncn-cross-promo__pair .hncn-tile {
	width: 260px;
	height: 260px;
	max-width: 100%;
	align-self: center;
}

.hncn-cross-promo__pair-copy {
	color: var(--wp--preset--color--ink);
	max-width: 220px;
}

.hncn-cross-promo__pair-title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5rem 0;
	max-width: 220px;
}

.hncn-cross-promo__pair-body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	max-width: 220px;
}

/* ============================================================
   CROSS-PROMO inverted scheme — baltic section with creme tiles.
   Used at the bottom of /enkeltbillet, /klippekort, /medlemskab
   so the close of each product page is a calm-but-distinct moment
   before the footer. Scoped to .hncn-cross-promo-pairs so the base
   .hncn-tile (baltic on creme) used elsewhere on the site stays
   unaffected.
   ============================================================ */

.hncn-cross-promo-pairs .hncn-cross-promo__pair-title {
	color: var(--wp--preset--color--creme);
}
.hncn-cross-promo-pairs .hncn-cross-promo__pair-body {
	color: rgba(251, 247, 238, 0.82);
}

/* Tiles flip from baltic-on-creme to creme-on-baltic */
.hncn-cross-promo-pairs .hncn-tile {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
}
.hncn-cross-promo-pairs a.hncn-tile:hover {
	background: #DDD2BB; /* slightly deeper creme */
}
.hncn-cross-promo-pairs a.hncn-tile:focus-visible {
	background: #DDD2BB;
}

.hncn-cross-promo-pairs .hncn-tile__eyebrow {
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
}
.hncn-cross-promo-pairs .hncn-tile__price {
	color: var(--wp--preset--color--ink);
}
.hncn-cross-promo-pairs .hncn-tile__meta {
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
}
.hncn-cross-promo-pairs .hncn-tile__cta {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--brick);
}
.hncn-cross-promo-pairs a.hncn-tile:hover .hncn-tile__cta {
	border-bottom-color: var(--wp--preset--color--brick);
}

@media (max-width: 980px) {
	.hncn-cross-promo__pairs {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.hncn-cross-promo__pair {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 1.5rem;
	}
}

@media (max-width: 600px) {
	.hncn-cross-promo__pair {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.hncn-tile-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 260px));
}

.hncn-tile-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 260px));
}

.hncn-tile-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 260px));
}

@media (max-width: 1100px) {
	.hncn-tile-grid--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.hncn-tile-grid--2,
	.hncn-tile-grid--3,
	.hncn-tile-grid--4,
	.hncn-tile-grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.hncn-tile-grid--2,
	.hncn-tile-grid--3,
	.hncn-tile-grid--4,
	.hncn-tile-grid--5 {
		grid-template-columns: 1fr;
	}
}

.hncn-product-card__photo {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin: 0 0 1.5rem 0;
	background: var(--wp--preset--color--ink);
}

.hncn-product-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hncn-product-card__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.75rem 0;
}

.hncn-product-card__price {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 3rem;
	line-height: 0.95;
	color: var(--wp--preset--color--ink);
	margin: 0.4rem 0 0.3rem 0;
}

.hncn-product-card__meta {
	font-size: 13px;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.hncn-product-card__body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
	margin: 1rem 0 0 0;
}

.hncn-product-card__cta {
	display: inline-block;
	margin-top: 1.25rem;
	padding-bottom: 2px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 14px;
	border-bottom: 2px solid var(--wp--preset--color--brick);
	transition: color var(--hncn-ease-fast);
}

.hncn-product-card__cta:hover {
	color: var(--wp--preset--color--brick);
}

.hncn-product-card__cta:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
	color: var(--wp--preset--color--brick);
}

/* ============================================================
   PROCESS — Klippekort "Sådan virker det" 3-step on ink bg
   ============================================================ */

.hncn-process {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--creme);
}

.hncn-process__head {
	max-width: 560px;
	margin-bottom: 3rem;
}

.hncn-process__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.75rem 0;
}

.hncn-process__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 2.375rem;
	line-height: 1.05;
	color: var(--wp--preset--color--creme);
	margin: 0;
}

.hncn-process__numeral {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 5rem;
	line-height: 0.9;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.5rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(251, 247, 238, 0.25);
}

.hncn-process__step-title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--wp--preset--color--creme);
	margin: 1rem 0 0.75rem 0;
}

.hncn-process__step-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--creme);
	opacity: 0.85;
	margin: 0;
}

/* ============================================================
   BENEFITS — Medlemskab "Hvad du får" italic-serif leads
   ============================================================ */

.hncn-benefits {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
}

.hncn-benefit {
	padding-top: 1.25rem;
	border-top: 1px solid rgba(36, 29, 22, 0.2);
}

.hncn-benefit__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	margin: 0 0 1.25rem 0;
}

.hncn-benefit__lead {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.25rem 0;
}

.hncn-benefit__body {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* ============================================================
   COMPARE — Medlemskab "Saunaklub vs saunagus" photo-led
   ============================================================ */

.hncn-compare {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.hncn-compare__photo {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0 0 1rem 0;
	background: var(--wp--preset--color--ink);
}

.hncn-compare__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hncn-compare__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 0.45rem 0;
}

.hncn-compare__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.85rem 0;
}

.hncn-compare__body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.65rem 0;
}

.hncn-compare__meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.hncn-compare__meta strong {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ============================================================
   CROSS-PROMO — mini cards at the bottom of all 3 pages
   ============================================================ */

.hncn-cross-promo {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
	border-top: 1px solid rgba(36, 29, 22, 0.15);
}

.hncn-cross-promo__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 2rem 0;
}

/* Mini-card: photo is full-bleed, all text overlays the image with a
   bottom-aligned scrim for legibility. */
.hncn-cross-promo__card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	padding: 1.5rem;
	color: var(--wp--preset--color--creme);
}

.hncn-cross-promo__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(36, 29, 22, 0.92) 0%,
		rgba(36, 29, 22, 0.55) 45%,
		rgba(36, 29, 22, 0.05) 85%
	);
	z-index: 1;
	pointer-events: none;
}

.hncn-cross-promo__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	aspect-ratio: auto;
}

.hncn-cross-promo__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hncn-cross-promo__card > *:not(.hncn-cross-promo__photo) {
	position: relative;
	z-index: 2;
}

.hncn-cross-promo__card-eyebrow {
	color: var(--wp--preset--color--brick);
	margin: 0 0 auto 0;
}

.hncn-cross-promo__card-eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 auto 0;
}

.hncn-cross-promo__price {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 1.625rem;
	line-height: 1.1;
	color: var(--wp--preset--color--creme);
	margin: 0;
}

.hncn-cross-promo__meta {
	font-size: 12px;
	font-style: italic;
	color: var(--wp--preset--color--creme);
	opacity: 0.85;
	margin: 0.25rem 0 0 0;
}

.hncn-cross-promo__body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--creme);
	opacity: 0.9;
	margin: 0.6rem 0 0 0;
}

.hncn-cross-promo__cta {
	display: inline-block;
	margin-top: 0.85rem;
	padding-bottom: 2px;
	color: var(--wp--preset--color--creme);
	text-decoration: none;
	font-size: 13px;
	border-bottom: 2px solid var(--wp--preset--color--brick);
	transition: color var(--hncn-ease-fast);
}

.hncn-cross-promo__cta:hover,
.hncn-cross-promo__cta:focus-visible {
	color: var(--wp--preset--color--brick);
	outline: none;
}

.hncn-cross-promo__cta:focus-visible {
	outline: var(--hncn-focus-width) solid var(--hncn-focus-color);
	outline-offset: var(--hncn-focus-offset);
}

/* ============================================================
   GAVEKORT — scattered 8-column gift mosaic
   Replaces the previous .hncn-tile-mosaic on /gavekort. Section
   contains: editorial headline + body on top (left/right grid),
   then an 8-col × 3-row sparse grid below where six product /
   navigation tiles float with intentional whitespace gaps. The
   section's creme background reads as the "negative space"
   between tiles. Saunagus tile sits diagonally below-right of
   Årsmedlemskab as a contextual "what is this?" link.
   ============================================================ */

.hncn-gift-hero {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 4rem;
	align-items: end;
	padding-bottom: var(--wp--preset--spacing--40);
}
.hncn-gift-hero__title {
	font-family: var(--wp--preset--font-family--instrument);
	font-weight: 400;
	font-size: 56px;
	line-height: 56px;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.hncn-gift-hero__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	max-width: 36ch;
	margin: 0;
}

.hncn-gift-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-template-rows: repeat(3, 150px);
	gap: 12px;
	width: 100%;
	max-width: 1280px;
	/* Left-aligned with the hero headline (no auto-centring). */
	margin-left: 0;
	margin-right: auto;
}

.hncn-gift-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 28px;
	min-width: 0;
	min-height: 0;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.18s ease;
}
.hncn-gift-tile__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(36, 29, 22, 0.65);
	margin: 0;
}
.hncn-gift-tile__price {
	font-family: var(--wp--preset--font-family--instrument);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.005em;
	margin: 0;
}

/* Colour variants — pale tints for the floating tiles, solid
   brand colours for the two anchor tiles (Årsmedlemskab brick,
   I tvivl? baltic). Pale tokens authored inline here so they
   don't pollute the brand palette in theme.json. */
.hncn-gift-tile--sage      { background: var(--wp--preset--color--sage); }
.hncn-gift-tile--brick     { background: var(--wp--preset--color--brick);  color: var(--wp--preset--color--white); }
.hncn-gift-tile--baltic    { background: var(--wp--preset--color--baltic); color: var(--wp--preset--color--white); }
.hncn-gift-tile--cremesoft { background: #DDD2B9; }
.hncn-gift-tile--baltpale  { background: #B6C5C9; }
.hncn-gift-tile--brickpale { background: #D9A296; }
.hncn-gift-tile--brick .hncn-gift-tile__label,
.hncn-gift-tile--baltic .hncn-gift-tile__label { color: rgba(251, 247, 238, 0.78); }

a.hncn-gift-tile:hover {
	filter: brightness(0.95);
}
a.hncn-gift-tile:focus-visible {
	outline: var(--hncn-focus-width, 2px) solid var(--hncn-focus-color, var(--wp--preset--color--brick));
	outline-offset: var(--hncn-focus-offset, 2px);
}

/* Position spec — DOM order matches the tile sequence below:
       1 = Enkelt gus 2×1 top-left, left-aligned with headline
       2 = 5-klip 1×1 row 1
       3 = Årsmedlemskab 2×2 top-right anchor
       4 = 10-klip 2×2 mid-left
       5 = I tvivl? 1×1 bridge between 10-klip and Årsmedlemskab
       6 = Saunagus 1×1 at col 8/row 3 — top-left diagonally
           adjacent to Årsmedlemskab's bottom-right corner

      col:  1 2 3 4 5 6 7 8
      r1:  [E E . 5 . Å Å .]
      r2:  [. . K K I Å Å .]
      r3:  [. . K K . . . S]                                       */
.hncn-gift-grid > .hncn-gift-tile:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.hncn-gift-grid > .hncn-gift-tile:nth-child(2) { grid-column: 4;          grid-row: 1; }
.hncn-gift-grid > .hncn-gift-tile:nth-child(3) { grid-column: 6 / span 2; grid-row: 1 / span 2; }
.hncn-gift-grid > .hncn-gift-tile:nth-child(4) { grid-column: 3 / span 2; grid-row: 2 / span 2; }
.hncn-gift-grid > .hncn-gift-tile:nth-child(5) { grid-column: 5;          grid-row: 2; }
.hncn-gift-grid > .hncn-gift-tile:nth-child(6) { grid-column: 8;          grid-row: 3; }

/* Responsive: at viewport ≤ 900px the 8-column grid would shrink
   cells below readable size, so collapse to a 4-col stack with
   sensible product hierarchy. Anchors first, supplemental tiles
   below — same content, fewer columns. */
@media (max-width: 900px) {
	.hncn-gift-hero {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		align-items: start;
	}
	.hncn-gift-hero__title { font-size: 44px; line-height: 44px; }
	.hncn-gift-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 140px;
		max-width: 100%;
	}
	.hncn-gift-grid > .hncn-gift-tile:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }              /* Enkelt gus */
	.hncn-gift-grid > .hncn-gift-tile:nth-child(2) { grid-column: 3;          grid-row: 1; }              /* 5-klip */
	.hncn-gift-grid > .hncn-gift-tile:nth-child(3) { grid-column: 1 / span 2; grid-row: 2 / span 2; }     /* Årsmedlemskab anchor */
	.hncn-gift-grid > .hncn-gift-tile:nth-child(4) { grid-column: 3 / span 2; grid-row: 2 / span 2; }     /* 10-klip anchor */
	.hncn-gift-grid > .hncn-gift-tile:nth-child(5) { grid-column: 4;          grid-row: 1; }              /* I tvivl? */
	.hncn-gift-grid > .hncn-gift-tile:nth-child(6) { grid-column: 1 / span 4; grid-row: 4; min-height: 100px; }  /* Saunagus full-width strip */
}

/* ============================================================
   HVAD MODTAGEREN FAKTISK FÅR — side-by-side compact staircase.
   Left col: 79px headline + body copy that swaps on tile hover.
   Right col: 4-tile L-shaped staircase in a 3×2 grid where
   col 1/row 2 and col 3/row 1 are intentionally empty.
   Layout (X = empty):
     [Stedet]      [Forløbet]     [   X    ]
     [   X   ]     [Gusmesteren]  [Tiden   ]
   Replaces the previous .hncn-huset side-by-side tour.
   ============================================================ */

.hncn-modtag__layout {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) auto;
	gap: 56px;
	align-items: start;
}
.hncn-modtag__text {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.hncn-modtag__title {
	font-family: var(--wp--preset--font-family--instrument), Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 79px;
	line-height: 79px;
	letter-spacing: 0.005em;
	margin: 0;
	color: var(--wp--preset--color--ink);
}
.hncn-modtag__body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	max-width: 38ch;
	margin: 0;
	transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}
.hncn-modtag__body.is-swapping {
	opacity: 0;
	transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
	.hncn-modtag__body { transition: opacity 120ms linear; }
	.hncn-modtag__body.is-swapping { transform: none; }
}

.hncn-stair {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	gap: 16px;
	width: 600px;
	max-width: 100%;
}
.hncn-stair__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 18px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	border-radius: 0;
}
.hncn-stair__tile--1 { grid-column: 1; grid-row: 1; }
.hncn-stair__tile--2 { grid-column: 2; grid-row: 1; }
.hncn-stair__tile--3 { grid-column: 2; grid-row: 2; }
.hncn-stair__tile--4 { grid-column: 3; grid-row: 2; }

.hncn-stair__tile--photo {
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--white);
}
.hncn-stair__tile--photo::before {
	content: "";
	position: absolute; inset: 0;
	background: rgba(36, 29, 22, 0.5);
	z-index: 0;
	transition: background-color 0.2s ease;
}
.hncn-stair__tile--photo:hover::before { background: rgba(36, 29, 22, 0.35); }
.hncn-stair__tile--photo > * { position: relative; z-index: 1; }
.hncn-stair__tile--brick  { background: var(--wp--preset--color--brick); color: var(--wp--preset--color--white); }
.hncn-stair__tile--sand   { background: var(--wp--preset--color--sand);  color: var(--wp--preset--color--white); }

.hncn-stair__tile__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.hncn-stair__tile__arrow {
	width: 32px; height: 32px;
	border: 1.2px solid currentColor;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.hncn-stair__tile:hover .hncn-stair__tile__arrow { background: currentColor; }
.hncn-stair__tile:hover .hncn-stair__tile__arrow::after {
	content: "→";
	color: var(--wp--preset--color--ink);
}
.hncn-stair__tile:hover .hncn-stair__tile__arrow { color: var(--wp--preset--color--white); }
.hncn-stair__tile:hover .hncn-stair__tile__arrow > span { display: none; }

.hncn-stair__tile__desc {
	max-width: 14ch;
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
	text-align: right;
	opacity: 0.95;
}
.hncn-stair__tile__big {
	font-family: var(--wp--preset--font-family--instrument), Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);
	line-height: 1;
	margin: 0;
	letter-spacing: 0.005em;
}

/* ------------------------------------------------------------------
   Huset variant (om-os): six tiles instead of gavekort's four —
   five facility photos plus a "Tag med" bottle photo. Fills the 3×2
   grid completely (no empty notch) so the tiles stay full size;
   "Tag med" anchors the bottom-right corner.
     [Saunaen]      [Plungebadet]   [Brusebadene]
     [Omklaedningen][Saebe+shampoo] [Tag med]
   Scoped to .hncn-stair--six so the gavekort 4-tile L-shape sharing
   .hncn-stair__tile--1..4 is untouched.
   ------------------------------------------------------------------ */
.hncn-stair--six .hncn-stair__tile--1 { grid-column: 1; grid-row: 1; }
.hncn-stair--six .hncn-stair__tile--2 { grid-column: 2; grid-row: 1; }
.hncn-stair--six .hncn-stair__tile--3 { grid-column: 3; grid-row: 1; }
.hncn-stair--six .hncn-stair__tile--4 { grid-column: 1; grid-row: 2; }
.hncn-stair--six .hncn-stair__tile--5 { grid-column: 2; grid-row: 2; }
.hncn-stair--six .hncn-stair__tile--6 { grid-column: 3; grid-row: 2; }

/* om-os keeps the project's 13px editorial body even though the shared
   gavekort modtag body runs at 14px. This section sits on a dark brown
   (ink) band, so the title and body are recoloured to creme — the base
   ink / ink-soft colours would be unreadable on it. */
.hncn-modtag__layout--huset .hncn-modtag__title {
	color: var(--wp--preset--color--creme);
}
.hncn-modtag__layout--huset .hncn-modtag__body {
	font-size: 13px;
	line-height: 23px;
	color: var(--wp--preset--color--creme);
}

@media (max-width: 900px) {
	.hncn-modtag__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.hncn-modtag__title { font-size: 56px; line-height: 56px; }
	.hncn-stair {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		width: 100%;
	}
	.hncn-stair__tile--1, .hncn-stair__tile--2, .hncn-stair__tile--3, .hncn-stair__tile--4 {
		grid-column: 1; grid-row: auto;
	}
	/* Collapse the six-tile variant too; its higher-specificity desktop
	   placement above would otherwise win over the base collapse. */
	.hncn-stair--six .hncn-stair__tile--1,
	.hncn-stair--six .hncn-stair__tile--2,
	.hncn-stair--six .hncn-stair__tile--3,
	.hncn-stair--six .hncn-stair__tile--4,
	.hncn-stair--six .hncn-stair__tile--5,
	.hncn-stair--six .hncn-stair__tile--6 {
		grid-column: 1; grid-row: auto;
	}
	.hncn-stair__tile { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Square-corner safety net — defensive, in case any class above
   inherits a global rounded radius from elsewhere in the theme.
   ============================================================ */

.hncn-product-card,
.hncn-product-card__photo,
.hncn-process,
.hncn-process__numeral,
.hncn-benefit,
.hncn-compare,
.hncn-compare__photo,
.hncn-cross-promo,
.hncn-cross-promo__card,
.hncn-cross-promo__photo,
.hncn-stair,
.hncn-stair__tile {
	border-radius: 0;
}

/* ============================================================
   Schema-clean utility classes — introduced in v6 to replace
   hand-tuned inline styles that Gutenberg block schema couldn't
   represent. Used via className attr on the relevant blocks so
   the editor's block-validation pipeline passes cleanly.
   ============================================================ */

/* Hero subtitle: narrow column + slight transparency. Replaces
   inline max-width:40ch;opacity:0.85 on the forside hero. */
.hncn-hero-subtitle {
	max-width: 40ch;
	opacity: 0.85;
}

/* Narrow-content containers: left-aligned column with a hard
   max-width. Replaces inline max-width:NNNpx;margin-left:0
   !important;margin-right:auto !important on legal/intro blocks.
   The !important previously fought a global rule; cleaner to
   target the class directly. */
.hncn-content-narrow-560 {
	max-width: 560px;
	margin-left: 0;
	margin-right: auto;
}
.hncn-content-narrow-720 {
	max-width: 720px;
	margin-left: 0;
	margin-right: auto;
}
.hncn-content-narrow-780 {
	max-width: 780px;
	margin-left: 0;
	margin-right: auto;
}

/* ============================================================
   Mobile full-bleed + padding — see navigation.css
   ============================================================
   The mobile section-width fix (full-bleed via calc(50% - 50vw))
   and the 4rem→1.25rem gutter reduction live in ONE place:
   navigation.css → "Mobile full-bleed sections (THE fix)".
   Nothing to do here. ============================================ */