/*
Theme Name: Kokkeriet Svensson
Theme URI: https://kokkerietsvensson.dk
Description: Svensson-skin child theme — cream + forest green + Playfair/Roboto. Demonstrates the Caterflow blocks inheriting a tenant's brand purely via theme.json.
Author: Caterflow
Template: ollie
Version: 0.2.4
Text Domain: svensson
*/

/* ============================================================
   Svensson theme chrome — styling for the custom markup in
   parts/header.html and parts/footer.html that core blocks
   cannot express on their own (leaf mark, logo wordmark,
   delivery hint, footer payment chips, footer link lists).
   ============================================================ */

/* ============================================================
   BRAND TOKENS — single source of truth
   ------------------------------------------------------------
   theme.json owns the values; this block only gives them short
   local names. It grew three separate alias sets over time
   (--ks-*, --brand-green/--cream/..., --forest/--wine/...), each
   with its own stale hex fallbacks, so the same colour could be
   spelled three ways and drift. They are unified here: the names
   are all kept so no selector below has to change, but every one
   resolves to exactly one theme.json token.

   No fallbacks. A fallback that silently disagrees with
   theme.json is worse than nothing — that is how #0C432E, a
   green that is in no palette anywhere, survived in nine rules.
   If a token is missing the value should break loudly, not
   render last season's brand.

   Designguide (Anita, v2, 2026-08-06):
     skovgrøn #003C26 · fløde #FBF3E7 · salvie #92A186
     smør #EED38B · jord #CFAE8B · vinrød #71192A · kul #2F2E2E
   ============================================================ */
:root {
	/* header/footer chrome */
	--ks-green: var(--wp--preset--color--primary);
	--ks-green-hover: var(--wp--custom--brand--green-hover);
	--ks-cream: var(--wp--preset--color--tertiary);
	--ks-line: var(--wp--custom--brand--line);
	--ks-ink-2: var(--wp--custom--brand--ink-2);

	/* design-system aliases */
	--brand-green: var(--wp--preset--color--primary);
	--cream: var(--wp--preset--color--tertiary);
	--cream-deep: var(--wp--preset--color--secondary);
	--page-bg: var(--wp--preset--color--page-bg);
	--surface: var(--wp--preset--color--base);
	--ink: var(--wp--custom--brand--ink);
	--ink-2: var(--wp--custom--brand--ink-2);
	--line: var(--wp--custom--brand--line);
	--serif: var(--wp--preset--font-family--heading);
	--sans: var(--wp--preset--font-family--body);
	--radius: var(--wp--custom--radius--button);
	--radius-lg: var(--wp--custom--radius--card);
	--shadow-card: var(--wp--custom--brand--shadow-card);
	--shadow-pop: var(--wp--custom--brand--shadow-pop);

	/* accents. --forest was mørkegrøn #36683E, withdrawn by Anita on
	   2026-08-06 ("den grønne 69 40 64 32 er udgået"). She asked for the
	   primary green on the USP band, so the alias now points there rather
	   than being deleted and breaking every rule that uses it. */
	--forest: var(--wp--preset--color--primary);
	--salvie: var(--wp--preset--color--salvie);
	--smoer: var(--wp--preset--color--smoer);
	--jord: var(--wp--preset--color--jord);
	--wine: var(--wp--preset--color--accent);
	--wine-hover: var(--wp--custom--brand--wine-hover);

	/* dark footer */
	--footer-bg: var(--wp--custom--brand--footer-bg);
	--footer-ink: var(--wp--custom--brand--footer-ink);

	--usp-h: 44px;
}

/* ---------- header logo + leaf mark ---------- */
.svensson-header .ks-logo {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.svensson-header .ks-mark {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--ks-green);
	color: var(--ks-green);
	display: grid;
	place-items: center;
	flex: none;
	text-decoration: none;
}
.svensson-header .ks-mark svg {
	width: 24px;
	height: 24px;
}
.svensson-header .ks-word .wp-block-site-title {
	margin: 0;
	line-height: 1;
}
.svensson-header .ks-word .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}
.svensson-header .ks-word .wp-block-site-tagline {
	margin: 3px 0 0;
	color: var(--ks-ink-2);
}

/* ---------- header navigation ---------- */
.svensson-header .svensson-nav a {
	text-decoration: none;
	white-space: nowrap;
}
.svensson-header .svensson-nav a:hover {
	color: var(--ks-green);
}

/* ---------- header utility (delivery hint + cart) ---------- */
.svensson-header .svensson-delivery {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--body, Roboto, sans-serif);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
.svensson-header .svensson-delivery svg {
	flex: none;
}

/* ---------- footer link lists ---------- */
.svensson-footer .svensson-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.svensson-footer .svensson-foot-list a {
	text-decoration: none;
	opacity: 0.92;
}
.svensson-footer .svensson-foot-list a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ---------- footer payment chips ---------- */
.svensson-footer .svensson-pay {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.svensson-footer .svensson-pay span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 27px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--body, Roboto, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
}

/* ---------- mobile ---------- */
@media (max-width: 800px) {
	.svensson-header .svensson-delivery {
		display: none;
	}
}

/* ============================================================
   Design-fidelity v2
   ------------------------------------------------------------
   Composition-first restyle implementing the full shared
   class/token contract: image-led split hero, editorial split
   band, photo-led occasion cards, marketing reading-measure +
   section rhythm, cream V1 footer pills, and the header cart
   icon + count badge. Uses the theme's CSS custom properties
   (--wp--preset--color--primary, --wp--custom--brand--line,
   --wp--custom--brand--ink-2, --wp--custom--radius--card) with
   the literal fallbacks from the contract. Fully responsive.
   ============================================================ */

/* ---------- reusable: eyebrow ---------- */
.svensson-eyebrow {
	font-family: var(--wp--preset--font-family--body, Roboto, sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 14px;
}

/* ---------- reusable: figure (food image wrapper) ---------- */
.svensson-figure {
	margin: 0;
}
.svensson-figure img {
	width: 100%;
	display: block;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 10px);
}

/* ---------- reusable: arrow list ---------- */
.svensson-arrow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}
.svensson-arrow-list li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 15px;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
}
.svensson-arrow-list li::before {
	content: "→";
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---------- hero: split card on #FAFAFA page bg ---------- */
.svensson-hero {
	/* no background — inherits body #FAFAFA */
	padding-top: var(--wp--preset--spacing--70, 80px);
	padding-bottom: var(--wp--preset--spacing--70, 80px);
}
.svensson-hero__card {
	background: #fff;
	border: 1px solid var(--wp--custom--brand--line);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: clamp(24px, 3vw, 40px);
	box-shadow:
		0 1px 2px rgba(12, 67, 46, 0.04),
		0 8px 24px rgba(12, 67, 46, 0.05);
}
/* The inner core wp:columns (51/49, vertically centered) provides the split;
   the card is just the white framed surface. */
.svensson-hero__card .svensson-figure img {
	aspect-ratio: 4 / 3.4;
	height: 100%;
}
.svensson-hero__card h1 {
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	color: var(--wp--preset--color--contrast);
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.04;
	margin: 0 0 16px;
}
.svensson-hero__card p {
	font-size: 17px;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	max-width: 56ch;
	margin: 0 0 20px;
	line-height: 1.6;
}
.svensson-hero__card p strong {
	color: var(--wp--preset--color--contrast);
}
.svensson-hero__card p strong {
	display: inline-block;
	margin-top: 6px;
}

/* ---------- editorial band: split (image + copy) ---------- */
.svensson-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.svensson-split h2,
.svensson-split h3 {
	text-align: left;
}
.svensson-split p {
	font-size: 17px;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	max-width: 56ch;
	line-height: 1.6;
}
@media (max-width: 781px) {
	.svensson-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ---------- occasion cards (photo-led) ---------- */
/* Standalone responsive grid helper (4-up → 2-up → 1-up). */
.svensson-occasions-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1024px) {
	.svensson-occasions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.svensson-occasions-grid {
		grid-template-columns: 1fr;
	}
}
/* Also lay out cleanly when emitted inside core wp:columns. */
.wp-block-columns:has(> .wp-block-column > .svensson-occasion-card) {
	gap: 24px;
}

.svensson-occasion-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--custom--brand--line);
	border-radius: var(--wp--custom--radius--card, 10px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: 0.15s;
}
.svensson-occasion-card:hover {
	box-shadow: 0 12px 30px rgba(12, 67, 46, 0.10);
	transform: translateY(-2px);
}
.svensson-occasion-card__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
}
.svensson-occasion-card__body {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.svensson-occasion-card__body h3 {
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.svensson-occasion-card__cta {
	font-family: var(--wp--preset--font-family--body, Roboto, sans-serif);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ---------- section head (eyebrow + heading + lead) ---------- */
.sec-head {
	max-width: 64ch;
}
.sec-head h2 {
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	color: var(--wp--preset--color--contrast);
	line-height: 1.08;
}

/* ---------- occasion tiles (photo cover + overlay copy, .ocard/.tile) ---------- */
.svensson-occasion-tile {
	border-radius: var(--wp--custom--radius--card, 10px);
	overflow: hidden;
	transition: 0.15s;
}
.svensson-occasion-tile:hover {
	box-shadow: 0 12px 30px rgba(12, 67, 46, 0.18);
	transform: translateY(-2px);
}
/* keep the copy pinned to the bottom of the photo, like the design .tile */
.svensson-occasion-tile.wp-block-cover {
	justify-content: flex-end;
}
.svensson-occasion-tile > .wp-block-cover__inner-container {
	width: 100%;
	margin-top: auto;
}
.svensson-occasion-tile h3 {
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	color: #fff;
}
.svensson-occasion-tile a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---------- season cards (photo-top + body, .scard/.season) ---------- */
.svensson-seasons-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.svensson-seasons-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.svensson-seasons-grid {
		grid-template-columns: 1fr;
	}
}
.svensson-season-card {
	background: #fff;
	border: 1px solid var(--wp--custom--brand--line);
	border-radius: var(--wp--custom--radius--card, 10px);
	overflow: hidden;
	transition: 0.15s;
}
.svensson-season-card:hover {
	box-shadow: 0 12px 30px rgba(12, 67, 46, 0.10);
	transform: translateY(-2px);
}
.svensson-season-card__img {
	margin: 0;
}
.svensson-season-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.svensson-season-card__body h3 {
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.svensson-season-card__body h3 a {
	text-decoration: none;
	color: inherit;
}
.svensson-season-card__body p {
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	margin: 0;
}

/* ---------- footer (cream V1) ---------- */
.svensson-footer {
	border-top: 1px solid var(--wp--custom--brand--line);
}
.svensson-footer .svensson-foot-list a {
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	opacity: 1;
}
.svensson-footer .svensson-foot-list a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	opacity: 1;
}
/* light payment pills (override V3 translucent-on-green) */
.svensson-footer .svensson-pay span {
	background: #fff;
	border: 1px solid var(--wp--custom--brand--line);
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	width: 40px;
	min-width: 0;
	height: 26px;
	padding: 0;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0;
}

/* ---------- header cart icon + count badge ---------- */
.svensson-cart {
	position: relative;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.svensson-cart .count {
	position: absolute;
	right: -8px;
	top: -7px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: 700 11px/1 Roboto, sans-serif;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

/* ---------- marketing reading-measure + section rhythm ---------- */
.svensson-main .wp-block-post-content > p,
.svensson-main .wp-block-post-content > h2,
.svensson-main .wp-block-post-content > h3,
.svensson-main .wp-block-post-content > h4,
.svensson-main .wp-block-post-content > ul,
.svensson-main .wp-block-post-content > ol,
.svensson-main .wp-block-post-content > .wp-block-list {
	max-width: 65ch;
}
/* let the package gallery break out of the reading measure */
.svensson-main .wp-block-post-content > .wp-block-caterflow-package-list {
	max-width: none;
}
.svensson-main .wp-block-post-content > h2 {
	margin-top: 2.5rem;
}
.svensson-main .wp-block-post-content > h3 {
	margin-top: 1.75rem;
}

/* ============================================================
   Testimonials (.svensson-quotes / .svensson-quote)
   Mirrors site.css .quotes/.quote: white cards on a 3-up grid,
   green stars, serif italic quote, name footer pinned to bottom.
   ============================================================ */
.svensson-quotes.wp-block-columns {
	gap: 24px;
}
.svensson-quote {
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--brand--line);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
}
.svensson-stars {
	color: var(--wp--preset--color--primary);
	letter-spacing: 2px;
	font-size: 15px;
	margin: 0 0 14px;
}
.svensson-quote .svensson-quote-text {
	margin: 0;
	border: 0;
	padding: 0;
}
.svensson-quote .svensson-quote-text p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--wp--custom--brand--ink, rgba(0, 0, 0, 0.87));
	font-style: italic;
}
.svensson-quote-who {
	margin: 0;
	margin-top: auto;
	padding-top: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
}
.svensson-quote-who strong {
	color: var(--wp--custom--brand--ink, rgba(0, 0, 0, 0.87));
	font-style: normal;
}
@media (max-width: 781px) {
	.svensson-quotes.wp-block-columns {
		flex-wrap: wrap;
	}
}

/* ============================================================
   CTA band (.svensson-cta-band)
   Mirrors site.css .cta-band: green full-bleed, copy left /
   actions right, stacks on mobile.
   ============================================================ */
.svensson-cta-band__inner {
	gap: 40px;
}
@media (max-width: 781px) {
	.svensson-cta-band__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   Page hero (.svensson-page-hero / .svensson-breadcrumb)
   Mirrors site.css .page-hero/.breadcrumb: cream inner-page band
   with a small breadcrumb above the serif title and lead.
   ============================================================ */
.svensson-breadcrumb {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
}
.svensson-breadcrumb a {
	text-decoration: none;
	color: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
}
.svensson-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}
.svensson-breadcrumb .sep {
	opacity: 0.5;
}
.svensson-page-hero__lead {
	max-width: 62ch;
}

/* ============================================================
   === v2 design ===
   ------------------------------------------------------------
   Ports the Kokkeriet Svensson v2 marketing design
   (svensson-design-v2/site/site.css) onto the live theme.

   PART 1 — ALIAS MAP: the design's variable names
   (--brand-green, --cream, --serif, …) are resolved to the
   theme's design tokens (theme.json --wp--preset / --wp--custom),
   so the ported component rules can use them verbatim.

   PART 2 — COMPONENT RULES adapted to CORE-BLOCK output:
   agents put the design class (.hero, .props, .ocard, .scard, …)
   on the block wrapper, which ALSO carries .wp-block-group /
   .wp-block-columns; core wp:column children get .wp-block-column.
   Selectors use descendant combinators to match that markup.
   Fully responsive (mobile / tablet / desktop).
   ============================================================ */

/* ---------- PART 1: alias map ----------
   Moved to the single BRAND TOKENS block at the top of this file. */

/* ============================================================
   PART 2 — COMPONENT RULES
   ============================================================ */

/* ---------- shared section helpers ---------- */
.eyebrow {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-green);
	margin: 0 0 16px;
}
.has-primary-background-color .eyebrow,
.section.green .eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.sec-head {
	max-width: 64ch;
}
.sec-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sec-head h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.08;
}
.sec-head .lead {
	font-size: 17px;
	color: var(--ink-2);
	margin-top: 16px;
	line-height: 1.6;
}
.has-primary-background-color .sec-head .lead {
	color: rgba(255, 255, 255, 0.8);
}
.lead {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
}
/* on a green (primary) full-bleed band, headings + lead invert */
.has-primary-background-color h1,
.has-primary-background-color h2,
.has-primary-background-color h3 {
	color: #fff;
}

/* ============================================================
   HEADER
   ------------------------------------------------------------
   Design class .site-header lives on the wp:group header wrapper
   (which also carries .wp-block-group). The nav, util cluster
   and cart live in nested groups carrying the design classes.
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}
/* navigation links (core wp:navigation gets .nav-list as className).
   Weight is 500 to agree with theme.json's core/navigation. It was 600 here
   and 500 there; this selector won on specificity, so the theme.json value
   had been silently dead. 500 is Poppins Medium, the weight the designguide
   names for everything that is neither a heading nor body copy. */
.nav-list a,
.nav-list .wp-block-navigation-item__content {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	color: var(--ink);
	white-space: nowrap;
}
.nav-list a:hover,
.nav-list .wp-block-navigation-item__content:hover {
	color: var(--brand-green);
}
.nav-list .current-menu-item > a,
.nav-list .current > a {
	color: var(--brand-green);
}
/* dropdown submenu surface (design .nav-drop card). High specificity +
   !important to beat core's 3-class .has-child rules and theme.json block styles.
   Desktop only — :not(.is-menu-open), like the hover rules below. Without that guard
   the mobile overlay inherited this whole card (white surface, shadow, and a
   min-width:248px that shoved the submenu off the side of the screen). */
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container,
.nav-drop {
	background: var(--surface) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-pop) !important;
	padding: 8px !important;
	min-width: 248px;
	top: calc(100% + 6px);
	gap: 2px;
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a,
.nav-drop a {
	display: block;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 400;
	padding: 9px 12px !important;
	border-radius: var(--radius);
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:hover,
.nav-drop a:hover {
	background: var(--cream) !important;
	color: var(--brand-green) !important;
}

/* Keep the dropdown open while crossing the 6px gap between the nav item and
   the card. (1) A transparent bridge over the gap so the cursor never leaves a
   hoverable area; (2) a pure-CSS hover reveal so it stays open regardless of the
   block's JS aria-expanded timing. Scoped to the desktop nav (not the mobile overlay). */
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > .wp-block-navigation__submenu-container {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	width: auto !important;
	min-width: 248px !important;
	overflow: visible !important;
	transform: none !important;
}

/* header utility cluster (delivery hint + cart) */
.header-util {
	display: flex;
	align-items: center;
	gap: 18px;
}
.header-util .delivery,
.header-util .svensson-delivery {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.header-util .delivery:hover {
	color: var(--brand-green);
}
.header-util .delivery svg,
.header-util .svensson-delivery svg {
	color: var(--brand-green);
}

/* cart icon + count badge (.cart wraps an inline-SVG wp:html) */
.cart {
	position: relative;
	display: grid;
	place-items: center;
	color: var(--ink);
	text-decoration: none;
}
.cart:hover {
	color: var(--brand-green);
}
.cart .count {
	position: absolute;
	right: -8px;
	top: -7px;
	background: var(--brand-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--sans);
	width: 19px;
	height: 19px;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

/* ============================================================
   HERO
   ------------------------------------------------------------
   .hero = align:full wp:group on --page-bg. Inside it a
   constrained wp:columns (.hero-inner) splits copy / media.
   Columns get .hero-copy and .hero-card (the framed media).
   ============================================================ */
.hero {
	background: var(--page-bg);
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--70, 80px);
	padding-bottom: var(--wp--preset--spacing--70, 80px);
}
.hero .hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px;
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	gap: 56px;
	align-items: center;
}
.hero .eyebrow {
	margin-bottom: 18px;
}
.hero .hero-copy h1,
.hero h1 {
	font-family: var(--serif);
	font-size: clamp(38px, 5vw, 62px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0;
}
.hero .hero-lead,
.hero .hero-copy p {
	font-size: 19px;
	color: var(--ink-2);
	margin-top: 22px;
	max-width: 50ch;
	line-height: 1.55;
}
.hero .hero-copy p strong {
	color: var(--ink);
}
.hero .hero-cta,
.hero .hero-copy .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* hero media card — framed white surface around the photo */
.hero-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: visible;
	padding: clamp(16px, 2vw, 24px);
}
.hero-card img,
.hero-card .wp-block-image img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3.5;
	border-radius: var(--radius);
}
/* floating badge anchored to the hero card */
.hero-badge {
	position: absolute;
	left: -26px;
	bottom: 28px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 290px;
}
.hero-badge .mk {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: none;
	background: var(--brand-green);
	color: #fff;
	display: grid;
	place-items: center;
}
.hero-badge .mk svg {
	width: 24px;
	height: 24px;
}
.hero-badge b {
	font-family: var(--serif);
	font-size: 16px;
	display: block;
}
.hero-badge span {
	font-size: 13px;
	color: var(--ink-2);
}

/* ============================================================
   VALUE PROPS
   ------------------------------------------------------------
   .props = wp:columns; each .prop = a wp:column (which also
   carries .wp-block-column).
   ============================================================ */
.props {
	gap: 24px;
}
.prop {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.prop .ic {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid var(--brand-green);
	color: var(--brand-green);
	display: grid;
	place-items: center;
}
.prop .ic svg {
	width: 26px;
	height: 26px;
}
.prop h3 {
	font-family: var(--serif);
	font-size: 19px;
	margin: 0;
}
.prop p {
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
   OCCASION CARDS (.ocard — photo overlay tiles)
   ------------------------------------------------------------
   Each .ocard is a link or wp:column with an image + overlay
   copy. Overlay gradient + caption sit on top of the photo.
   ============================================================ */
.ocard {
	position: relative;
	display: block;
	text-decoration: none;
	color: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 280px;
	border: 1px solid var(--line);
}
.ocard img,
.ocard .wp-block-image,
.ocard .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.ocard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 38, 26, 0) 38%, rgba(8, 38, 26, 0.78) 100%);
	transition: background 0.25s;
	z-index: 1;
}
.ocard:hover::after {
	background: linear-gradient(180deg, rgba(8, 38, 26, 0.1) 20%, rgba(8, 38, 26, 0.85) 100%);
}
.ocard .o-copy,
.ocard > .wp-block-group {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
}
.ocard h3 {
	color: #fff;
	font-family: var(--serif);
	font-size: 23px;
	margin: 0;
}
.ocard .go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.22s, transform 0.22s;
}
.ocard:hover .go {
	opacity: 1;
	transform: translateY(0);
}
.ocard .go svg {
	width: 15px;
	height: 15px;
}

/* ============================================================
   SEASON CARDS (.scard — photo + body)
   ============================================================ */
.scard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow 0.18s, transform 0.12s;
}
.scard:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}
.scard img,
.scard .wp-block-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
	margin: 0;
	border-radius: 0;
}
.scard .s-body,
.scard > .wp-block-group {
	padding: 16px 18px;
}
.scard h3 {
	font-family: var(--serif);
	font-size: 20px;
	margin: 0;
}
.scard p {
	font-size: 13.5px;
	color: var(--ink-2);
	margin: 5px 0 0;
}

/* ============================================================
   STEPS ("Sådan foregår det")
   ------------------------------------------------------------
   .steps = wp:columns; each .step = a wp:column.
   ============================================================ */
.steps {
	gap: 28px;
}
.step .n {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--brand-green);
	color: #fff;
	font-family: var(--serif);
	font-weight: 800;
	font-size: 20px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}
.has-primary-background-color .step .n {
	background: #fff;
	color: var(--brand-green);
}
.step h3 {
	font-family: var(--serif);
	font-size: 19px;
	margin: 0;
}
.step p {
	font-size: 14.5px;
	color: var(--ink-2);
	margin-top: 8px;
	line-height: 1.55;
}
.has-primary-background-color .step p {
	color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   STORY (editorial split — image + copy)
   ------------------------------------------------------------
   .story = wp:columns (media + copy). Image column may carry
   .story-media; copy column .story-copy.
   ============================================================ */
.story {
	gap: 56px;
	align-items: center;
}
.story img,
.story .wp-block-image img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3.2;
	border-radius: var(--radius-lg);
}
.story h2 {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	margin: 0;
}
.story .lead {
	margin-top: 18px;
}
.story p {
	color: var(--ink-2);
	line-height: 1.7;
	font-size: 15.5px;
}
.story .wp-block-buttons {
	margin-top: 26px;
}

/* ============================================================
   TESTIMONIALS
   ------------------------------------------------------------
   .testimonials = wp:columns; each quote card is a wp:column
   or wp:group carrying .quote.
   ============================================================ */
.testimonials {
	gap: 24px;
}
.testimonials .quote,
.testimonials > .wp-block-column {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.testimonials .stars {
	color: var(--brand-green);
	letter-spacing: 2px;
	font-size: 15px;
	margin-bottom: 14px;
}
.testimonials blockquote,
.testimonials .wp-block-quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink);
	font-style: italic;
}
.testimonials .who {
	margin-top: auto;
	padding-top: 18px;
	font-size: 14px;
	color: var(--ink-2);
}
.testimonials .who b {
	color: var(--ink);
	font-style: normal;
}

/* ============================================================
   CTA BAND
   ------------------------------------------------------------
   .cta-band = align:full wp:group on green (primary). Inner
   constrained group holds heading/lead + button cluster.
   ============================================================ */
.cta-band {
	background: var(--brand-green);
	color: #fff;
}
.cta-band h2 {
	color: #fff;
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 38px);
	max-width: 22ch;
	line-height: 1.1;
	margin: 0;
}
.cta-band .lead {
	color: rgba(255, 255, 255, 0.8);
	margin-top: 12px;
	max-width: 52ch;
}
.cta-band .cta-actions,
.cta-band .wp-block-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ------------------------------------------------------------
   .site-footer = wp:group footer on --cream. Columns hold the
   brand block + link lists; payment chips in a wp:html.
   ============================================================ */
.site-footer {
	background: var(--cream);
	border-top: 1px solid var(--line);
}
.site-footer h4 {
	font-family: var(--serif);
	font-size: 17px;
	margin: 0 0 16px;
}
.site-footer .meta {
	color: var(--ink-2);
	line-height: 1.8;
	font-size: 14px;
}
.site-footer .meta b {
	color: var(--ink);
	font-weight: 600;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.site-footer ul a {
	text-decoration: none;
	color: var(--ink-2);
	font-size: 14.5px;
}
.site-footer ul a:hover {
	color: var(--brand-green);
}
.site-footer .socials {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.site-footer .socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--brand-green);
	background: var(--surface);
}
.site-footer .socials a:hover {
	background: var(--brand-green);
	color: #fff;
	border-color: var(--brand-green);
}
.site-footer .pay {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.site-footer .pay span {
	width: 42px;
	height: 27px;
	border-radius: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	font-size: 9px;
	font-weight: 700;
	color: var(--ink-2);
}

/* ============================================================
   RESPONSIVE (mobile / tablet per the design)
   ============================================================ */
@media (max-width: 1080px) {
	.steps {
		row-gap: 34px;
	}
}
@media (max-width: 960px) {
	.hero .hero-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.hero .hero-media {
		order: -1;
	}
	.hero-card img,
	.hero-card .wp-block-image img {
		aspect-ratio: 16 / 10;
	}
	.hero-badge {
		left: 16px;
		bottom: 16px;
	}
}
@media (max-width: 781px) {
	.story {
		gap: 32px;
	}
}
@media (max-width: 600px) {
	/* The hero-inner provides the padding; don't double it on the .hero wrapper. */
	.hero {
		padding-top: 0;
		padding-bottom: 0;
	}
	.hero .hero-inner {
		padding: 28px 20px 36px;
		gap: 28px;
	}
	.ocard {
		min-height: 240px;
	}
}

/* Footer columns: render as a real grid (the markup's flex-basis:Nfr is invalid
   for flexbox and collapses the columns). Grid makes fr valid + matches design. */
.site-footer .f-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.site-footer .f-top > .wp-block-column { flex-basis: auto; width: auto; }
@media (max-width: 900px) {
	.site-footer .f-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.site-footer .f-top { grid-template-columns: 1fr; }
}

/* Header wordmark: stack name + tagline (tagline was running into SVENSSON). */
.ks-word { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.ks-word b { font-family: var(--wp--preset--font-family--heading, "Playfair Display", serif); font-weight: 800; font-size: 18px; letter-spacing: .02em; line-height: 1.02; }
.ks-word > span { font-family: var(--wp--preset--font-family--heading, serif); font-style: italic; font-size: 11px; letter-spacing: .06em; color: var(--wp--custom--brand--ink-2, rgba(0,0,0,.64)); margin-top: 3px; }

/* ============================================================
   === v2 inner pages ===
   ------------------------------------------------------------
   Ports the inner-page components from svensson-design-v2/site/site.css
   onto CORE-BLOCK output. The design class (.land-hero, .split,
   .sec-head, .props, .team, .contact-grid, .faq, .info-grid,
   .cta-band, .page-hero, .section, …) is placed on the block
   wrapper, which ALSO carries .wp-block-group / .wp-block-columns;
   core wp:column children get .wp-block-column. Selectors use
   descendant combinators to match that markup. Reuses the existing
   :root alias map (--brand-green, --cream, --serif, …). Responsive
   at the design's breakpoints (~1080 / 960 / 781 / 600).
   ============================================================ */

/* ---------- band rhythm + bg variants ---------- */

/* A single unbreakable string must never widen the document. Editors paste bare URLs
   into copy (se-hele-udvalget carries several, ~70 chars with no break opportunity):
   at phone widths those overflow their paragraph and make the whole page scroll
   sideways, which drags fixed elements like the open menu overlay out of position. */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* Full-bleed bands stack flush against each other — each one brings its own vertical
   padding, so the global block gap has nothing to do between them. Most band patterns
   encode margin:0 in their block attributes, but any that omits it (the cream band
   under the front-page hero) opens a 24px seam. Assert it once here rather than
   relying on every pattern, and on the page content, to remember. */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.section { padding: 78px 0; }
.section.tight { padding: 56px 0; }
.section.cream { background: var(--cream); }
.section.cream-deep { background: var(--cream-deep); }
.section.green { background: var(--brand-green); color: #fff; }
.section.green h1,
.section.green h2,
.section.green h3 { color: #fff; }
.section.green .eyebrow { color: rgba(255, 255, 255, 0.72); }
.section.green .lead,
.section.green .sec-head .lead { color: rgba(255, 255, 255, 0.8); }

/* constrained inner used by full-bleed bands */
.svb-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* ---------- editorial landing hero (.land-hero) ---------- */
.land-hero { position: relative; }
.land-hero .band {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}
.land-hero .band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 38, 26, 0.32) 0%, rgba(8, 38, 26, 0.4) 42%, rgba(8, 38, 26, 0.82) 100%);
	z-index: 1;
}
.land-hero .band .copy,
.land-hero .band > .wp-block-group {
	position: relative;
	z-index: 2;
	color: #fff;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px 50px;
}
.land-hero .band .eyebrow { color: rgba(255, 255, 255, 0.85); }
.land-hero .band h1 {
	color: #fff;
	font-family: var(--serif);
	font-size: clamp(36px, 4.6vw, 58px);
	line-height: 1.03;
	max-width: 18ch;
	margin: 0;
}
.land-hero .band .lead {
	color: rgba(255, 255, 255, 0.9);
	max-width: 56ch;
	margin-top: 16px;
}
.land-hero .band .hero-cta,
.land-hero .band .wp-block-buttons {
	margin-top: 26px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
/* white breadcrumb over the dark hero */
.land-hero .breadcrumb,
.land-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.land-hero .breadcrumb a:hover { color: #fff; }

/* ---------- compact page hero (.page-hero) ---------- */
.page-hero {
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}
.page-hero .inner,
.page-hero > .wp-block-group {
	max-width: 1280px;
	margin: 0 auto;
	padding: 46px 32px 50px;
}
.page-hero h1 {
	font-family: var(--serif);
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.04;
	margin: 0;
}
.page-hero .lead {
	margin-top: 16px;
	max-width: 62ch;
}

/* ---------- breadcrumb ---------- */
.breadcrumb {
	font-size: 13px;
	color: var(--ink-2);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.breadcrumb a {
	text-decoration: none;
	color: var(--ink-2);
}
.breadcrumb a:hover { color: var(--brand-green); }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- editorial split (.split / .split.media-right) ---------- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
/* core wp:columns variant collapses its flex children into the grid */
.split.wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.split.media-right .media { order: 2; }
.split .media img,
.split .media .wp-block-image img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3.2;
	min-height: 360px;
	border-radius: var(--radius-lg);
}
.split .copy h2 {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	margin: 0;
}
.split .copy .lead { margin-top: 18px; }
.split .copy .body-p {
	margin-top: 14px;
	color: var(--ink-2);
	line-height: 1.7;
	font-size: 15.5px;
}
.split .copy .btn,
.split .copy .wp-block-buttons { margin-top: 26px; }

/* ---------- section head (.sec-head / .center) ---------- */
.sec-head { max-width: 64ch; }
.sec-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sec-head h2 {
	font-family: var(--serif);
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.08;
	margin: 0;
}
.sec-head .lead {
	font-size: 17px;
	color: var(--ink-2);
	margin-top: 16px;
	line-height: 1.6;
}

/* ---------- value props (.props / .prop) ---------- */
.props {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.props.wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.prop {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.prop .ic {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid var(--brand-green);
	color: var(--brand-green);
	display: grid;
	place-items: center;
}
.prop .ic svg { width: 26px; height: 26px; }
.prop h3 { font-family: var(--serif); font-size: 19px; margin: 0; }
.prop p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* ---------- occasion tiles (.ocard — photo cover + overlay) ---------- */
/* (.ocard already defined above in === v2 design ===; add fallback grid here) */
.tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tiles.wp-block-columns > .wp-block-column { flex-basis: auto !important; }

/* ---------- season cards (.scard — photo + body) ---------- */
/* (.scard already defined above in === v2 design ===; grids below) */
.seasons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.seasons.wp-block-columns > .wp-block-column { flex-basis: auto !important; }

/* ---------- team (.team / .member) ---------- */
.team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.team.wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.member img,
.member .wp-block-image img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 4.4;
	border-radius: var(--radius-lg);
	margin: 0;
}
.member h3 { font-family: var(--serif); font-size: 21px; margin-top: 16px; margin-bottom: 0; }
.member .role {
	font-size: 13px;
	color: var(--brand-green);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 4px;
}
.member p { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }

/* ---------- contact (.contact-grid / .contact-card / .row) ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}
.contact-grid.wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.contact-card {
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 32px;
}
.contact-card .row {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.contact-card .row:last-child { border-bottom: 0; }
.contact-card .row .ic {
	color: var(--brand-green);
	flex: none;
	margin-top: 2px;
}
.contact-card .row .ic svg { width: 22px; height: 22px; }
.contact-card .row .k {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-2);
	font-weight: 600;
}
.contact-card .row .v { font-size: 16px; margin-top: 3px; }
.contact-card .row .v a { color: var(--brand-green); text-decoration: none; }
.map-ph,
.map-ph img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--radius-lg);
	display: block;
}

/* ---------- FAQ accordion (.faq — native <details>) ---------- */
.faq { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 4px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 19px;
	color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
	content: "+";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--brand-green);
	color: var(--brand-green);
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	transition: background 0.18s, color 0.18s, transform 0.25s;
}
.faq-item[open] > summary::after {
	background: var(--brand-green);
	color: #fff;
	transform: rotate(45deg);
}
.faq-a-inner {
	padding: 0 4px 24px;
	color: var(--ink-2);
	line-height: 1.7;
	font-size: 15.5px;
	max-width: 70ch;
}

/* ---------- info / pricing grid (.info-grid + cards) ---------- */
.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
.info-grid.wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.info-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px;
}
.info-card h3 {
	font-family: var(--serif);
	font-size: 21px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.info-card h3 .ic { color: var(--brand-green); display: grid; place-items: center; }
.info-card h3 .ic svg { width: 24px; height: 24px; }
.info-card p { margin-top: 12px; color: var(--ink-2); line-height: 1.65; font-size: 15px; }

/* ---------- chips / quick nav (.chips-row / .chip-link) ---------- */
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14.5px;
	font-weight: 500;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.chip-link:hover {
	border-color: var(--brand-green);
	color: var(--brand-green);
	background: rgba(12, 67, 46, 0.04);
}

/* ---------- CTA band inner (full-bleed green) ---------- */
.cta-band .inner,
.cta-band > .wp-block-group {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.cta-band .cta-actions,
.cta-band .wp-block-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ---------- responsive (design breakpoints) ---------- */
@media (max-width: 1080px) {
	.props { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.tiles, .tiles.cols-3 { grid-template-columns: repeat(2, 1fr); }
	.seasons { grid-template-columns: repeat(2, 1fr); }
	.team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.split { grid-template-columns: 1fr; gap: 32px; }
	.split.media-right .media { order: -1; }
	.contact-grid { grid-template-columns: 1fr; gap: 32px; }
	.cta-band .inner,
	.cta-band > .wp-block-group { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 781px) {
	.info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.section { padding: 56px 0; }
	.props, .tiles, .tiles.cols-3, .seasons, .team, .info-grid { grid-template-columns: 1fr; }
	.svb-wrap,
	.page-hero .inner, .page-hero > .wp-block-group,
	.land-hero .band .copy, .land-hero .band > .wp-block-group,
	.cta-band .inner, .cta-band > .wp-block-group { padding-left: 20px; padding-right: 20px; }
}

/* Brand logo image (replaces the SVG-mark + wordmark lockup) */
.site-header .ks-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .ks-logo-img { height: 56px; width: auto; display: block; }
@media (max-width: 600px) { .site-header .ks-logo-img { height: 46px; } }

/* Remove the default site block-gap around <main> so the first full-bleed band
   sits flush under the header, and the last band meets the footer with no gap. */
.wp-site-blocks > main.svensson-main { margin-top: 0; }
.wp-site-blocks > footer { margin-top: 0; }

/* ...but a page whose content is NOT a full-bleed band (the shop pages: /kurv,
   /tak, /min-konto) then starts and ends hard against the header and footer.
   Give those room, and take it back on whichever edge does carry a band. */
.wp-site-blocks > main.svensson-main:not(.svensson-front) {
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
}
.wp-site-blocks > main.svensson-main:has(.wp-block-post-content > .alignfull:first-child) {
	padding-top: 0;
}
.wp-site-blocks > main.svensson-main:has(.wp-block-post-content > .alignfull:last-child) {
	padding-bottom: 0;
}

/* === v2 footer (structural rules were ported empty; restore from design) === */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); }
.site-footer .f-inner { max-width: 1280px; margin: 0 auto; padding: 56px 32px 28px; }
.site-footer .f-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.site-footer .f-top > .wp-block-column { flex-basis: auto; width: auto; }
.site-footer h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 16px; }
.site-footer .f-brand .meta { color: var(--ink-2); line-height: 1.8; font-size: 14px; }
.site-footer .f-brand .meta b { color: var(--ink); font-weight: 600; }
.site-footer .socials { display: flex; gap: 10px; margin-top: 18px; }
.site-footer .socials a {
	width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
	display: grid; place-items: center; color: var(--ink-2); text-decoration: none;
}
.site-footer .socials a:hover { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer ul a { text-decoration: none; color: var(--ink-2); font-size: 14.5px; }
.site-footer ul a:hover { color: var(--brand-green); }
.site-footer .f-bottom {
	max-width: 1280px; margin: 0 auto; padding: 20px 32px;
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.site-footer .f-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .f-bottom a, .site-footer .f-bottom span { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.site-footer .f-bottom a:hover { color: var(--brand-green); }
.site-footer .pay { display: flex; gap: 8px; }
.site-footer .pay span {
	min-width: 40px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--line); border-radius: 4px;
	font-size: 11px; font-weight: 700; color: var(--ink-2);
}
@media (max-width: 900px) { .site-footer .f-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .site-footer .f-top { grid-template-columns: 1fr; } }

/* ============================================================
   === Front-end revision (Anita / marketing, 2026-07) ===
   ------------------------------------------------------------
   Implements the marketing change requests:
   - USP top band above a sticky nav that pins while the USP
     scrolls away
   - Poppins + Shafarik for menukort/menu headings
   - Wine-red purchase CTAs (Køb / Bestil)
   - Dark footer with the fløde, pay-off-free logo
   - Redrawn green logo (no pay-off) in the header
   - Tighter reading measure (~660px) + consistent section rhythm

   Revised against the designguide (Anita, v2, 2026-08-06): the USP
   band moved from mørkegrøn to skovgrøn at her request, headings
   went Medium -> Bold, and the footer went logogrøn -> kul with
   fløde text. Colour aliases live in the BRAND TOKENS block at the
   top of this file.
   ============================================================ */

/* ---------- USP band + sticky header ---------- */
/* The header template-part is double-wrapped: WP emits an outer
   <header class="wp-block-template-part"> around our <header class="site-header-outer">.
   A sticky element only stays pinned while its OWN parent box is in view, so the
   sticky must sit on the outer wrapper (a direct child of the tall .wp-site-blocks) —
   not on the inner group, whose parent is only header-height tall. top is offset by
   the USP height so the band scrolls away and the nav row pins at the top. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--usp-h));
	z-index: 90;
}
.site-header-outer,
.site-header-outer .site-header {
	position: static;
}
/* kill the flow block-gap that WP injects between the USP band and the nav row */
.site-header-outer > .svensson-usp,
.site-header-outer > .site-header {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.svensson-usp {
	background: var(--forest);
	color: #fff;
}
.svensson-usp__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 11px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 40px;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
}
.svensson-usp__inner .usp-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.95);
}
.svensson-usp__inner .usp-item svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- header logo (redrawn green, no pay-off) ---------- */
/* vertical breathing room so the logo doesn't touch the top/bottom of the bar */
.site-header {
	padding-top: 6px;
	padding-bottom: 6px;
}
.site-header .ks-logo-img {
	height: 52px;
	width: auto;
	display: block;
}
@media (max-width: 600px) {
	.site-header .ks-logo-img { height: 42px; }
}

/* ---------- menukort / menu headings in Shafarik ---------- */
.cf-package-card__title,
.menu-heading,
.has-menu-font-family {
	font-family: var(--wp--preset--font-family--menu, Georgia, serif) !important;
	letter-spacing: 0.01em;
}

/* ---------- sticky-header clearance for the package sidebar ----------
   Our header is sticky at top:-44px with a height of 109px, so the announcement bar
   scrolls away and the nav bar comes to rest with its bottom edge at 65px. The plugin's
   sticky sidebar defaults to 2rem, which parked it 21px UNDER that bar and clipped the
   top of the price badge. 68px here, plus the card's own 12px margin, leaves the sidebar
   sitting 15px clear of the header. */
.cf-package {
	--cf-sticky-top: 68px;
}

/* The same token positions the top of the plugin's expanded bottom-bar sheet on mobile,
   so it has to track what the header actually leaves visible at each width:
   641–767px  the desktop header (109px, offset by the 44px USP) rests at 65px
   =<640px    the phone header (96px, offset by the 41px USP) rests at 55px */
@media (max-width: 767px) {
	.cf-package {
		--cf-sticky-top: 73px;
	}
}
@media (max-width: 640px) {
	.cf-package {
		--cf-sticky-top: 63px;
	}
}

/* ---------- wine-red purchase CTAs (Køb / Bestil) ---------- */
.cf-package-card__cta,
.cf-package__cta,
.wp-block-button.is-style-buy .wp-block-button__link,
.btn-buy .wp-block-button__link,
a.btn-buy {
	background: var(--wine) !important;
	border-color: var(--wine) !important;
	color: #fff !important;
	transition: background 0.15s, box-shadow 0.15s;
}
.cf-package-card__cta:hover,
.cf-package__cta:not([disabled]):hover,
.wp-block-button.is-style-buy .wp-block-button__link:hover,
.btn-buy .wp-block-button__link:hover,
a.btn-buy:hover {
	background: var(--wine-hover) !important;
	border-color: var(--wine-hover) !important;
	color: #fff !important;
}
/* the disabled "Læg i kurv (kommer snart)" button stays muted */
.cf-package__cta[disabled] {
	background: var(--wine) !important;
	opacity: 0.45;
}

/* ---------- reading measure (Anita: ~600–700px body) ---------- */
.svensson-main .wp-block-post-content > p,
.svensson-main .wp-block-post-content > h2,
.svensson-main .wp-block-post-content > h3,
.svensson-main .wp-block-post-content > h4,
.svensson-main .wp-block-post-content > ul,
.svensson-main .wp-block-post-content > ol,
.svensson-main .wp-block-post-content > .wp-block-list {
	max-width: 660px;
}

/* ---------- type tuning for Poppins ---------- */
/* This used to bump display h1s to 600, because headings were Medium (500)
   and that read too light at hero sizes. Headings are Bold (700) since the
   designguide, so the bump had inverted into a *reduction* on exactly the
   largest type on the site. Weight now inherits; only the optical
   letter-spacing tightening, which still applies at display sizes, is kept. */
.hero h1,
.hero .hero-copy h1,
.land-hero .band h1,
.page-hero h1,
.svensson-hero__card h1 {
	letter-spacing: -0.015em;
}
/* body copy is Poppins Light (300); keep small UI text at 400 so it stays
   legible at small sizes. */
.eyebrow,
.nav-list a,
.header-util .delivery,
.member .role,
.contact-card .row .k,
.site-footer .f-bottom a,
.site-footer .f-bottom span {
	font-weight: 500;
}

/* ============================================================
   DARK FOOTER — overrides the cream footer.
   Kul ground with fløde type, per Anita 2026-08-06: "footer skal
   have farven kul og fonten her fløde". Fløde rather than white
   throughout, so the warm cast carries into the muted tiers too;
   plain white against kul reads colder than the rest of the site.
   ============================================================ */
.site-footer {
	background: var(--footer-bg);
	color: color-mix(in srgb, var(--footer-ink) 82%, transparent);
	border-top: 0;
}
.site-footer .ks-foot-logo {
	display: inline-block;
	margin-bottom: 20px;
}
.site-footer .ks-foot-logo img {
	height: 54px;
	width: auto;
	display: block;
}
.site-footer h4 {
	color: var(--footer-ink);
}
.site-footer .meta,
.site-footer .f-brand .meta {
	color: color-mix(in srgb, var(--footer-ink) 72%, transparent);
}
.site-footer .meta b,
.site-footer .f-brand .meta b {
	color: var(--footer-ink);
}
.site-footer ul a {
	color: color-mix(in srgb, var(--footer-ink) 78%, transparent);
}
.site-footer ul a:hover {
	color: var(--footer-ink);
}
.site-footer .socials a {
	border-color: color-mix(in srgb, var(--footer-ink) 28%, transparent);
	color: var(--footer-ink);
	background: color-mix(in srgb, var(--footer-ink) 8%, transparent);
}
.site-footer .socials a:hover {
	background: var(--footer-ink);
	color: var(--footer-bg);
	border-color: var(--footer-ink);
}
.site-footer .f-bottom {
	border-top: 1px solid color-mix(in srgb, var(--footer-ink) 18%, transparent);
}
.site-footer .f-bottom a,
.site-footer .f-bottom span {
	color: color-mix(in srgb, var(--footer-ink) 70%, transparent);
}
.site-footer .f-bottom a:hover {
	color: var(--footer-ink);
}
.site-footer .pay span {
	background: color-mix(in srgb, var(--footer-ink) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--footer-ink) 28%, transparent);
	color: color-mix(in srgb, var(--footer-ink) 90%, transparent);
}

/* ---------- responsive: USP band ---------- */
@media (max-width: 900px) {
	.svensson-usp__inner { gap: 8px 24px; font-size: 12.5px; padding: 10px 20px; }
}
@media (max-width: 640px) {
	/* The USP band scrolls away here exactly as it does on desktop, leaving the nav row
	   pinned. It used to be pinned along with the nav, which cost 41px of a phone screen
	   permanently to a message the visitor had already read, and made the header tall
	   enough to crowd anything anchored beneath it.
	   The band is shorter on a phone than the 44px the desktop value assumes, so the
	   offset is corrected here — too large and part of the nav row scrolls off with it. */
	:root { --usp-h: 41px; }

	/* One message at a time. Three nowrap items never fit a phone: the previous
	   treatment scrolled them horizontally behind a hidden scrollbar, so two of the
	   three were effectively invisible. Cycle them instead — each gets ~4s of a 12s
	   loop, cross-fading with a small vertical drift. */
	.svensson-usp__inner {
		display: block;
		position: relative;
		overflow: hidden;
		padding: 10px 20px;
	}
	/* The first item stays in flow so it sets the band's height (a fixed height here
	   would be swallowed by border-box padding and clip the text); the rest stack on
	   top of it. */
	.svensson-usp__inner .usp-item {
		display: flex;
		justify-content: center;
		opacity: 0;
		animation: svensson-usp-cycle 12s infinite;
	}
	.svensson-usp__inner .usp-item + .usp-item {
		position: absolute;
		top: 10px;
		left: 20px;
		right: 20px;
	}
	.svensson-usp__inner .usp-item:nth-child(2) { animation-delay: 4s; }
	.svensson-usp__inner .usp-item:nth-child(3) { animation-delay: 8s; }
}

@keyframes svensson-usp-cycle {
	0%   { opacity: 0; transform: translateY(5px); }
	2%   { opacity: 1; transform: translateY(0); }
	31%  { opacity: 1; transform: translateY(0); }
	34%  { opacity: 0; transform: translateY(-5px); }
	100% { opacity: 0; transform: translateY(-5px); }
}

/* Rotating text is motion the visitor did not ask for: hold the first message. */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.svensson-usp__inner .usp-item { animation: none; opacity: 0; transform: none; }
	.svensson-usp__inner .usp-item:first-child { opacity: 1; }
}

/* ---------- responsive: header utility cluster ---------- */
@media (max-width: 781px) {
	/* The util cluster (delivery CTA + Min konto + cart) measured 382px inside a 342px
	   row. As a nowrap flex in a nowrap row it could not wrap, so it squeezed the logo
	   to zero width — the logo was missing on mobile, not merely small — and pushed the
	   document ~100px wider than the viewport, which is what threw off every section
	   below. Drop the long delivery CTA (it only links to /kontakt, which the menu
	   already carries) and reduce Min konto to its icon; its aria-label keeps it
	   announced to screen readers. */
	.header-util { gap: 14px; }
	.header-util .delivery:not(.account) { display: none; }
	.header-util .delivery.account {
		gap: 0;
		font-size: 0; /* the label is a bare text node beside the icon */
	}
	.header-util .delivery.account svg { width: 22px; height: 22px; }
	.site-header .ks-logo { flex: none; }

	/* Menu toggle belongs on the left edge, not floating between the logo and the
	   cart — space-between had been spreading three unequal items and parking it
	   mid-row. Pull it first, then let the two flanks share the leftover width
	   equally so the logo sits genuinely centred between them. */
	.header-inner .site-nav { order: -1; }
	.header-inner .site-nav,
	.header-inner .header-util { flex: 1 1 0; }
	.header-inner .site-nav .wp-block-navigation__responsive-container-open { margin-right: auto; }
	.header-inner .header-util { justify-content: flex-end; }
}

/* ---------- mobile menu overlay ----------
   Core renders the overlay completely unstyled (white sheet, black 14px links, no
   padding) — the theme had never dressed it. It also stacks the submenu chevron on top
   of a full-width parent link, so a tap anywhere on the row followed the link and the
   submenu could not be opened at all. Below: brand surface, real row rhythm, and the
   chevron split off as its own tap target beside the link. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* !important: core paints the open overlay white from its own block stylesheet and
	   wins on specificity — the same reason the nav rules just above use it. */
	background: var(--cream) !important;
	color: var(--ink);
}
.site-nav .is-menu-open .wp-block-navigation-item,
.site-nav .is-menu-open .wp-block-navigation__container {
	background: transparent;
}
.site-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 76px 20px 48px;
	align-items: stretch;
}
.site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 18px;
	right: 16px;
	padding: 10px;
	color: var(--brand-green);
}
.site-nav .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}
/* Top-level rows only — the border would double up on submenu entries. */
.site-nav .is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.site-nav .is-menu-open .wp-block-navigation-item__content {
	flex: 1;
	padding: 15px 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
}
/* Parent row: link takes the space it needs, chevron owns a 56px target beside it.
   flex-direction must be stated explicitly: core sets `column` on this row inside the
   overlay, and in a column container the submenu's `flex-basis: 100%` sizes its HEIGHT,
   so flex-wrap wrapped it into a second column off the side of the screen rather than
   onto the next line. */
.site-nav .is-menu-open .wp-block-navigation-submenu {
	display: flex;
	flex-direction: row !important; /* ties core's own is-menu-open rule; it wins on order */
	flex-wrap: wrap;
	align-items: center;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	align-self: stretch;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
	background: none;
	color: var(--brand-green);
}
.site-nav .is-menu-open .wp-block-navigation__submenu-icon svg {
	transition: transform 0.18s ease;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
/* Collapse submenus by default and drive them from the chevron's aria-expanded, which
   the block's own JS already maintains. Core's overlay leaves every submenu expanded and
   hides/shows with visibility+position, which is awkward to reuse here: display:none is
   decisive, and the toggle button is the <ul>'s immediate previous sibling, so no JS of
   our own is needed. */
.site-nav .is-menu-open .wp-block-navigation__submenu-container {
	display: none;
	padding-left: 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
}
/* Expanded: drop into the flow as a full-width column under its row. The desktop card
   styling that used to fight this is now scoped to :not(.is-menu-open) at its source. */
.site-nav .is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	position: static;
	flex-basis: 100%;
	width: 100%;
	min-width: 0;
	opacity: 1;
	visibility: visible;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 11px 0;
	font-size: 15px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
}

/* ---------- full-bleed hero (cover) + subpage image hero card ---------- */
.svensson-hero-cover {
	align-items: flex-end;
}
.svensson-hero-cover .wp-block-cover__inner-container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px 56px;
}
/* Core ships, for every custom content position:
     .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left
       .wp-block-cover__inner-container { margin: 0; width: auto }
   The class is doubled deliberately so a custom position beats theme centring, and with
   the position class that is five classes (0,5,0). This hero uses a custom position
   (bottom-left), so the rule shrink-wrapped the text against the far left edge instead of
   the site's content column. Our own class is repeated to clear 0,5,0 without an
   !important and without hardcoding which position the hero happens to use. */
.svensson-hero-cover.svensson-hero-cover.svensson-hero-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	margin: 0 auto;
}
.svensson-hero-cover .eyebrow { color: rgba(255, 255, 255, 0.85); }
.svensson-hero-cover h1 {
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(38px, 5vw, 62px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.015em;
	max-width: 18ch;
	margin: 0;
}
.svensson-hero-cover .hero-lead {
	color: rgba(255, 255, 255, 0.92);
	max-width: 54ch;
	margin-top: 16px;
}
.svensson-hero-cover .wp-block-buttons { margin-top: 28px; }

/* subpage image hero: photo band with an overlaid white text card */
.svensson-imghero {
	align-items: center;
	min-height: 420px;
}
.svensson-imghero .wp-block-cover__inner-container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 32px;
}
.svensson-imghero .svensson-imghero__card {
	background: #fff;
	border-radius: var(--radius-lg, 10px);
	box-shadow: var(--shadow-pop, 0 18px 50px rgba(12, 67, 46, 0.18));
	padding: clamp(28px, 3vw, 48px);
	max-width: 560px;
}
.svensson-imghero .svensson-imghero__card .breadcrumb { margin-bottom: 14px; }
.svensson-imghero .svensson-imghero__card h1 {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 700;
	line-height: 1.04;
	margin: 0;
}
.svensson-imghero .svensson-imghero__card p:not(.breadcrumb) {
	color: var(--ink-2, rgba(0, 0, 0, 0.64));
	margin: 14px 0 0;
	max-width: 46ch;
}
@media (max-width: 600px) {
	.svensson-imghero .svensson-imghero__card { max-width: none; padding: 24px; }
	.svensson-hero-cover .wp-block-cover__inner-container,
	.svensson-imghero .wp-block-cover__inner-container { padding-left: 20px; padding-right: 20px; }
}