/*
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.1.8
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 come from theme.json; values mirrored here.
   ============================================================ */

:root {
	--ks-green: var(--wp--preset--color--primary, #0C432E);
	--ks-green-hover: var(--wp--custom--brand--green-hover, #0A3826);
	--ks-cream: var(--wp--preset--color--tertiary, #FAF3E6);
	--ks-line: var(--wp--custom--brand--line, #E7E2D7);
	--ks-ink-2: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
}

/* ---------- header logo + leaf mark ---------- */
.svensson-header .ks-logo {
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #161616);
}
.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, #161616);
	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, #0C432E);
	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, #0C432E);
	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, #E7E2D7);
	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, #161616);
	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, #161616);
}
.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, #E7E2D7);
	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, #161616);
	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, #0C432E);
}

/* ---------- 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, #161616);
	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, #E7E2D7);
	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, #161616);
	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, #E7E2D7);
}
.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, #0C432E);
	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, #E7E2D7);
	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: #161616;
	text-decoration: none;
}
.svensson-cart .count {
	position: absolute;
	right: -8px;
	top: -7px;
	background: var(--wp--preset--color--primary, #0C432E);
	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, #fff);
	border: 1px solid var(--wp--custom--brand--line, #E7E2D7);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
}
.svensson-stars {
	color: var(--wp--preset--color--primary, #0C432E);
	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, #0C432E);
}
.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 ---------- */
:root {
	--brand-green: var(--wp--preset--color--primary, #0C432E);
	--cream: var(--wp--preset--color--tertiary, #FAF3E6);
	--cream-deep: var(--wp--preset--color--secondary, #F3E9D5);
	--page-bg: var(--wp--preset--color--page-bg, #FAFAFA);
	--surface: var(--wp--preset--color--base, #fff);
	--ink: var(--wp--custom--brand--ink, rgba(0, 0, 0, 0.87));
	--ink-2: var(--wp--custom--brand--ink-2, rgba(0, 0, 0, 0.64));
	--line: var(--wp--custom--brand--line, #E7E2D7);
	--serif: var(--wp--preset--font-family--heading);
	--sans: var(--wp--preset--font-family--body);
	--radius: var(--wp--custom--radius--button, 4px);
	--radius-lg: var(--wp--custom--radius--card, 10px);
	--shadow-card: var(--wp--custom--brand--shadow-card, 0 1px 2px rgba(12, 67, 46, 0.04), 0 8px 24px rgba(12, 67, 46, 0.05));
	--shadow-pop: var(--wp--custom--brand--shadow-pop, 0 18px 50px rgba(12, 67, 46, 0.18));
}

/* ============================================================
   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) */
.nav-list a,
.nav-list .wp-block-navigation-item__content {
	font-family: var(--serif);
	font-weight: 600;
	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. */
.site-header .wp-block-navigation .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__submenu-container .wp-block-navigation-item__content,
.site-header .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__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.site-header .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: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:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation: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 ---------- */
.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; }

/* === 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; } }