/* =========================================================================
   Holiday — component styles
   0  Tokens
   1  Base + block-gap resets
   2  Shell primitives
   3  Buttons, pills, badges
   4  Header
   5  Footer
   6  Cards and grids
   7  Search widget
   8  WooCommerce
   9  Accessibility utilities
   ====================================================================== */

/* ---------- 0. Tokens ------------------------------------------------- */

:root {
	--sv-shell: 1280px;              /* reference measures ~1024px; widened on request */
	--sv-gutter: clamp( 1rem, 4vw, 2rem );
	--sv-gutter-hdr: 1rem;           /* the header bar runs full-bleed, tight gutter */
	--sv-header-bar: 4rem;           /* the pink bar */
	--sv-trustbar-h: 3rem;           /* the grey strip beneath it */
	--sv-header-h: calc( var( --sv-header-bar ) + var( --sv-trustbar-h ) );
	--sv-adminbar: 0px;

	--sv-ink: var( --wp--preset--color--ink, #2d0a3e );
	--sv-navy: var( --wp--preset--color--navy, #4a1772 );
	--sv-accent: var( --wp--preset--color--accent, #e6007e );
	--sv-accent-dark: var( --wp--preset--color--accent-dark, #c10069 );
	--sv-teal: var( --wp--preset--color--teal, #17b3a3 );
	--sv-sun: var( --wp--preset--color--sun, #ff8a00 );
	--sv-offwhite: var( --wp--preset--color--offwhite, #f5f5f5 );
	--sv-surface: var( --wp--preset--color--surface, #ffffff );
	--sv-border: var( --wp--preset--color--border, #e4e4e7 );
	--sv-muted: var( --wp--preset--color--muted, #6e6e73 );

	/* Text and rules that sit on a dark or brand-coloured surface. Kept separate
	   from the palette so a light accent (yellow, lime) can flip its own
	   foreground without dragging the footer with it. */
	--sv-on-accent: #ffffff;
	--sv-on-dark: #ffffff;
	--sv-on-dark-1: #ddd2e4;
	--sv-on-dark-2: #b5a4c1;
	--sv-on-dark-3: #9c8aa9;
	--sv-lede-on-dark: #e0d4e8;
	--sv-rule-on-dark: rgba( 255, 255, 255, .14 );
	--sv-border-on-dark: rgba( 255, 255, 255, .38 );
	--sv-hover-on-dark: rgba( 255, 255, 255, .18 );
	--sv-accent-soft: #fde6f2;
	--sv-accent-soft: color-mix( in srgb, var( --sv-accent ) 12%, #ffffff );
	--sv-header-bg: #cd0071;
	--sv-header-bg: color-mix( in srgb, var( --sv-accent ) 88%, #1a0010 );
	--sv-shadow-rgb: 45, 10, 62;

	--sv-radius: 0.5rem;
	--sv-radius-lg: 0.75rem;
	--sv-radius-btn: 0.5rem;         /* reference buttons are rounded rects, not pills */
	--sv-radius-pill: 999px;         /* still used for badges and tag chips */

	--sv-grad-hero: linear-gradient( 118deg, #240a45 0%, #4d1169 28%, #7d1a83 58%, #a81d84 80%, var( --sv-accent ) 100% );
	/* The closing band. Same family as the hero, cooler and deeper, so a page
	   that opens with one and closes with the other reads as bookended rather
	   than as the same picture twice. */
	--sv-grad-band: linear-gradient( 106deg, #1d0740 0%, #3d0e60 26%, #661679 56%, #961c85 82%, #c01a7e 100% );
	--sv-grad-cta: linear-gradient( 90deg, var( --sv-accent ), var( --sv-sun ) );

	/* Font aliases, so a family swap is one line here plus theme.json. */
	--sv-font-display: var( --wp--preset--font-family--display );
	--sv-font-body: var( --wp--preset--font-family--body );
	--sv-shadow: 0 1px 2px rgba( var( --sv-shadow-rgb ), .05 ), 0 6px 16px rgba( var( --sv-shadow-rgb ), .06 );
	--sv-shadow-lg: 0 2px 6px rgba( var( --sv-shadow-rgb ), .07 ), 0 16px 40px rgba( var( --sv-shadow-rgb ), .14 );
	--sv-tap: 2.75rem; /* 44px minimum box — hold this line */
}

/* Trap 7 — the admin bar. Declared on :root as well as body, because html is
   body's parent and a body-only value never reaches scroll-padding-top. */
:root:has( body.admin-bar ) { --sv-adminbar: 32px; }
body.admin-bar { --sv-adminbar: 32px; }

@media screen and ( max-width: 782px ) {
	:root:has( body.admin-bar ) { --sv-adminbar: 46px; }
	body.admin-bar { --sv-adminbar: 46px; }
}

html {
	scroll-padding-top: calc( var( --sv-header-h ) + var( --sv-adminbar ) + 1rem );
}

/* ---------- 1. Base + block-gap resets -------------------------------- */

body {
	font-family: var( --sv-font-body );
	color: var( --sv-ink );
	background: var( --sv-surface );
	-webkit-font-smoothing: antialiased;
}

/* Trap 4 — .wp-site-blocks > * and flow siblings all get margin-block-start. */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > main { margin-block-start: 0; }
/* Sections live in post-content, whose flow layout gives every child a
   margin-block-start — that is the white gap above and below a full-bleed
   band. Each sv-sec supplies its own padding, so the gap is never wanted. */
.entry-content.wp-block-post-content > *,
.wp-site-blocks .entry-content.wp-block-post-content > * { margin-block-start: 0; }

.sv-main > * { margin-block-start: 0; }
.wp-site-blocks .sv-main > * { margin-block-start: 0; }

/* ---------- 2. Shell primitives --------------------------------------- */

.sv-shell,
.wp-site-blocks .sv-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sv-shell );
	margin-inline: auto;
	padding-inline: var( --sv-gutter );
}

.sv-sec,
.wp-site-blocks .sv-sec {
	box-sizing: border-box;
	padding-block: clamp( 2.5rem, 6vw, 4.5rem );
}

.sv-sec--tight,
.wp-site-blocks .sv-sec--tight { padding-block: clamp( 1.75rem, 4vw, 3rem ); }

.sv-band--offwhite { background: var( --sv-offwhite ); }
.sv-band--navy { background: var( --sv-navy ); color: var( --sv-on-dark ); }
.sv-band--navy h1,
.sv-band--navy h2,
.sv-band--navy h3,
.sv-band--navy h4,
.sv-band--navy p,
.sv-band--navy li,
.wp-site-blocks .sv-band--navy h1,
.wp-site-blocks .sv-band--navy h2,
.wp-site-blocks .sv-band--navy h3,
.wp-site-blocks .sv-band--navy h4,
.wp-site-blocks .sv-band--navy p,
.wp-site-blocks .sv-band--navy li { color: var( --sv-on-dark ); }

.sv-band--navy .sv-lede,
.wp-site-blocks .sv-band--navy .sv-lede { color: var( --sv-lede-on-dark ); }

.sv-sec h2 { font-size: var( --wp--preset--font-size--xxxl ); margin-block: 0 1rem; }
.sv-sec h3 { font-size: var( --wp--preset--font-size--xl ); margin-block: 0 .5rem; }
.sv-sec p { color: var( --sv-muted ); margin-block: 0 1rem; }
.sv-sec p:last-child { margin-block-end: 0; }

.sv-sec .sv-lede { font-size: var( --wp--preset--font-size--lg ); max-width: 62ch; }

/* ---------- 3. Buttons, pills, badges --------------------------------- */
/* Trap 1 — a class plus an element beats a lone class, so every one of these
   names the section class it will sit inside. */

.sv-btn:not( .wp-block-button ),
.sv-sec .sv-btn:not( .wp-block-button ),
.sv-sec a.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var( --sv-tap );
	padding: .625rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var( --sv-radius-btn );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sv-btn--primary:not( .wp-block-button ),
.sv-sec .sv-btn--primary:not( .wp-block-button ),
.sv-sec a.sv-btn--primary {
	background: var( --sv-accent );
	color: var( --sv-on-accent );
}

.sv-btn--primary:not( .wp-block-button ):hover,
.sv-sec .sv-btn--primary:not( .wp-block-button ):hover,
.sv-sec a.sv-btn--primary:hover { background: var( --sv-accent-dark ); color: var( --sv-on-accent ); }

.sv-btn--outline:not( .wp-block-button ),
.sv-sec .sv-btn--outline:not( .wp-block-button ),
.sv-sec a.sv-btn--outline {
	background: transparent;
	border-color: var( --sv-border );
	color: var( --sv-ink );
}

.sv-btn--outline:not( .wp-block-button ):hover,
.sv-sec .sv-btn--outline:not( .wp-block-button ):hover,
.sv-sec a.sv-btn--outline:hover { border-color: var( --sv-ink ); color: var( --sv-ink ); }

.sv-pill,
.sv-sec .sv-pill,
.sv-sec p.sv-pill {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .25rem .75rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-offwhite );
	color: var( --sv-navy );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	margin: 0;
}

.sv-pill--accent,
.sv-sec .sv-pill--accent,
.sv-sec p.sv-pill--accent { background: var( --sv-accent ); color: var( --sv-on-accent ); }

/* ---------- 4. Header -------------------------------------------------- */

.sv-header,
.wp-site-blocks .sv-header {
	position: sticky;
	top: var( --sv-adminbar );
	z-index: 100;
	background: var( --sv-header-bg );
	box-shadow: inset 0 -1px 0 0 rgba( 0, 0, 0, .14 );
	margin-block-start: 0;
}

/* Trap 3 — the blur lives on a pseudo-element. backdrop-filter on the header
   itself would make it the containing block for the fixed mobile panel. */
.sv-header::before { content: none; }

.sv-header__inner,
.wp-site-blocks .sv-header__inner {
	box-sizing: border-box;
	display: grid;
	/* A grid, not flex — the brand and the action cluster are different widths,
	   so margin-inline:auto would leave the nav off-centre by half that gap. */
	/* Reference runs the bar full-bleed with the nav hard left against the
	   logo, so the centre track is gone: brand | nav | actions. */
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: none;
	min-height: var( --sv-header-bar );
	margin-inline: 0;
	padding-inline: var( --sv-gutter-hdr );
}

.sv-header__brand,
.wp-site-blocks .sv-header__brand {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: var( --sv-tap );
	margin: 0;
	font-family: var( --sv-font-display );
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var( --sv-on-dark );
	text-decoration: none;
	white-space: nowrap;
	padding-inline-end: 1.125rem;
	border-inline-end: 1px solid var( --sv-border-on-dark );
}

.sv-header__brand a { color: inherit; text-decoration: none; }
.sv-header__brand .sv-header__dot { color: var( --sv-accent ); }
.sv-header__brand a::after,
.wp-site-blocks .sv-header__brand a::after { content: "."; color: var( --sv-on-dark ); }

/* The nav keeps its natural width. Letting it shrink pushes the centred list
   onto the brand; everything else gives way instead. */
nav.sv-header__nav,
.wp-site-blocks nav.sv-header__nav {
	grid-column: 2;
	justify-self: start;
	flex: 0 0 auto;
}

/* Trap 6 — core copies the block's className onto the <ul> too, so layout
   rules are scoped to nav.sv-header__nav. Inherited properties stay unscoped
   so the list still receives them. */
.sv-header__nav { font-size: var( --wp--preset--font-size--sm ); }

nav.sv-header__nav .wp-block-navigation__container { gap: .125rem; }

.sv-header__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var( --sv-tap );
	padding-inline: .75rem;
	border-radius: var( --sv-radius-btn );
	color: var( --sv-on-dark );
	font-weight: 700;
	letter-spacing: .005em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.sv-header__nav .wp-block-navigation-item__content:hover { background: var( --sv-hover-on-dark ); }

.sv-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var( --sv-on-dark );
	box-shadow: inset 0 -3px 0 0 var( --sv-on-dark );
	border-radius: 0;
}

.sv-header__actions,
.wp-site-blocks .sv-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var( --sv-border-on-dark );
}

.sv-header__action,
.wp-site-blocks .sv-header__action {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: var( --sv-tap );
	min-width: var( --sv-tap );
	justify-content: center;
	padding-inline: .625rem;
	border-radius: var( --sv-radius-btn );
	color: var( --sv-on-dark );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sv-header__action:hover { background: var( --sv-hover-on-dark ); color: var( --sv-on-dark ); }
.sv-header__action svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

.sv-header__basket-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: .25rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-on-dark );
	color: var( --sv-accent );
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}

/* --- 4a. Degradation tiers -------------------------------------------- */
/* Widest tier roomiest, then trim link padding, then collapse the nav, then
   drop the account label. Nothing ellipsises — it renders in full or not at
   all, at its own tier. */

@media ( max-width: 1239.98px ) {
	.sv-header__nav .wp-block-navigation-item__content { padding-inline: .5rem; font-size: 0.9375rem; }
}

/* --- 4b. Moving core's 600px collapse to 1080px ------------------------ */
/* Both directions, and core's :not() chains are copied verbatim so we
   out-specify rather than reach for !important. */

@media ( min-width: 600px ) and ( max-width: 1079.98px ) {
	/* Show the hamburger. Beats
	   .wp-block-navigation__responsive-container-open:not(.always-shown) */
	.wp-site-blocks .sv-header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	/* Hide the inline list. Beats
	   …__responsive-container:not(.hidden-by-default):not(.is-menu-open) */
	.wp-site-blocks .sv-header .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
		width: auto;
		position: static;
	}
}

@media ( max-width: 1079.98px ) {
	/* Nav collapses to a toggle, so the centre track is no longer needed:
	   brand | actions | toggle, with the toggle rightmost. */
	.sv-header__inner,
	.wp-site-blocks .sv-header__inner { grid-template-columns: 1fr auto auto; gap: .25rem; }

	.sv-header__actions,
	.wp-site-blocks .sv-header__actions { grid-column: 2; justify-self: end; }

	nav.sv-header__nav,
	.wp-site-blocks nav.sv-header__nav { grid-column: 3; justify-self: end; }
}

@media ( max-width: 639.98px ) {
	.sv-header__action-label { display: none; }
}

/* --- 4c. The mobile panel: a dropdown, not a full-screen overlay ------- */

.sv-header .wp-block-navigation__responsive-container-open,
.wp-site-blocks .sv-header .wp-block-navigation__responsive-container-open {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: var( --sv-tap );
	min-height: var( --sv-tap );
	padding: 0;
	border-radius: var( --sv-radius-pill );
	background: transparent;
	color: var( --sv-on-dark );
}

.sv-header .wp-block-navigation__responsive-container-open:hover { background: var( --sv-hover-on-dark ); }

/* Core never hides the open toggle — its own overlay is opaque and covers it.
   Ours is transparent, so the hamburger would show through beneath the close
   button. The button carries no state class and precedes the container in the
   DOM, so read the state off the container with :has(). visibility, not
   display, so the row does not reflow. */
.sv-header .wp-block-navigation:has( .wp-block-navigation__responsive-container.is-menu-open ) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

/* Core paints the overlay white through a five-class selector. Matched at
   seven so it cannot silently lose. */
.wp-site-blocks .sv-header .wp-block-navigation.sv-header__nav:not( .has-background ) .wp-block-navigation__responsive-container.is-menu-open {
	background: transparent;
	color: var( --sv-ink );
	pointer-events: none;
	padding: 0;
	/* Kill core's entrance: it slides up from translateY(.5em), and its
	   opacity keyframe leaves the panel invisible if it never runs. */
	animation: none;
}

.wp-site-blocks .sv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	height: auto;
	padding: 0;
}

.wp-site-blocks .sv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	pointer-events: auto;
	margin-block-start: calc( var( --sv-header-h ) + var( --sv-adminbar ) );
	max-height: calc( 100dvh - var( --sv-header-h ) - var( --sv-adminbar ) );
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var( --sv-surface );
	border-block-start: 1px solid var( --sv-border );
	box-shadow: var( --sv-shadow-lg );
	padding: .75rem var( --sv-gutter ) 1.5rem;
	/* No backdrop-filter here either (trap 3). */
}

.wp-site-blocks .sv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .125rem;
	align-items: stretch;
}

.wp-site-blocks .sv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var( --sv-tap );
	padding-inline: .75rem;
	font-size: var( --wp--preset--font-size--lg );
	width: 100%;
}

/* The close button sits in the toggle's exact box at the same gutter, so their
   centres coincide and the icon appears to swap in place. */
.wp-site-blocks .sv-header .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc( var( --sv-adminbar ) + ( var( --sv-header-h ) - var( --sv-tap ) ) / 2 );
	right: var( --sv-gutter );
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var( --sv-tap );
	min-height: var( --sv-tap );
	padding: 0;
	border-radius: var( --sv-radius-pill );
	background: transparent;
	color: var( --sv-on-dark );
	pointer-events: auto;
}

.wp-site-blocks .sv-header .wp-block-navigation__responsive-container-close:hover { background: var( --sv-hover-on-dark ); }

/* ---------- 5. Footer -------------------------------------------------- */

.sv-footer,
.wp-site-blocks .sv-footer {
	background: var( --sv-ink );
	color: var( --sv-on-dark-1 );
	margin-block-start: 0;
}

.sv-footer__grid,
.wp-site-blocks .sv-footer__grid {
	box-sizing: border-box;
	display: grid;
	/* Track count follows column count: a brand column spanning two plus three
	   link columns needs five tracks, not four, or the last column wraps. */
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 2.5rem 2rem;
	width: 100%;
	max-width: var( --sv-shell );
	margin-inline: auto;
	padding: clamp( 2.5rem, 5vw, 4rem ) var( --sv-gutter );
}

.sv-footer__brand,
.wp-site-blocks .sv-footer__brand { grid-column: span 2; }

.sv-footer__col > *,
.wp-site-blocks .sv-footer__col > * { margin-block-start: 0; } /* trap 4 */

.sv-footer h2,
.sv-footer h3,
.sv-footer .sv-footer__heading {
	margin: 0 0 .875rem;
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sv-footer p { color: var( --sv-on-dark-2 ); margin-block: 0 1rem; }

.sv-footer .sv-footer__list,
.wp-site-blocks .sv-footer .sv-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.45;
}

/* Trap 4 — core's :root :where(.wp-block-list li){margin-top:.5rem} stacks on
   top of the list's own gap. */
.sv-footer .sv-footer__list li,
.wp-site-blocks .sv-footer .sv-footer__list li { margin: 0 0 .625rem; }

.sv-footer .sv-footer__list li:last-child { margin-block-end: 0; }

.sv-footer .sv-footer__list a,
.wp-site-blocks .sv-footer .sv-footer__list a {
	display: inline-block;
	padding-block: .125rem;
	color: var( --sv-on-dark-1 );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
}

.sv-footer .sv-footer__list a:hover { color: var( --sv-on-dark ); text-decoration: underline; }
.sv-footer .sv-footer__list a[aria-current="page"] { color: var( --sv-on-dark ); font-weight: 600; }

/* The legal strip is a sibling band with its own inner shell, so the hairline
   runs edge to edge while the text stays within the shell. */
.sv-footer__legal,
.wp-site-blocks .sv-footer__legal { border-block-start: 1px solid var( --sv-rule-on-dark ); }

.sv-footer__legal-inner,
.wp-site-blocks .sv-footer__legal-inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	width: 100%;
	max-width: var( --sv-shell );
	margin-inline: auto;
	padding: 1.25rem var( --sv-gutter );
}

.sv-footer__legal-inner p,
.wp-site-blocks .sv-footer__legal-inner p {
	margin: 0;
	color: var( --sv-on-dark-3 );
	font-size: var( --wp--preset--font-size--xs );
}

@media ( max-width: 1023.98px ) {
	.sv-footer__grid,
	.wp-site-blocks .sv-footer__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

	/* The brand takes its own full-width row rather than leaving an orphan. */
	.sv-footer__brand,
	.wp-site-blocks .sv-footer__brand { grid-column: 1 / -1; }
}

@media ( max-width: 599.98px ) {
	.sv-footer__grid,
	.wp-site-blocks .sv-footer__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* ---------- 6. Cards and grids ---------------------------------------- */

.sv-grid,
.wp-site-blocks .sv-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
}

.sv-grid > *,
.wp-site-blocks .sv-grid > * { margin-block-start: 0; } /* trap 4 */

.sv-card,
.wp-site-blocks .sv-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
}

.sv-card__media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.sv-card__body { padding: 1.125rem 1.25rem 1.375rem; }
.sv-sec .sv-card__body h3 { font-size: var( --wp--preset--font-size--lg ); margin-block: 0 .25rem; }
.sv-sec .sv-card__body p { font-size: var( --wp--preset--font-size--sm ); margin-block: 0 .75rem; }
.sv-card__price { font-family: var( --sv-font-display ); font-size: var( --wp--preset--font-size--xl ); font-weight: 800; color: var( --sv-ink ); }
.sv-card__price small { display: block; font-size: var( --wp--preset--font-size--xs ); font-weight: 500; color: var( --sv-muted ); }

/* ---------- 7. Search widget ------------------------------------------ */

.sv-searchbox,
.wp-site-blocks .sv-searchbox {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) auto;
	gap: .5rem;
	padding: .75rem;
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow-lg );
}

.sv-searchbox label { display: block; font-size: var( --wp--preset--font-size--xs ); font-weight: 600; color: var( --sv-muted ); margin-block-end: .25rem; }

.sv-searchbox input,
.sv-searchbox select {
	box-sizing: border-box;
	width: 100%;
	min-height: var( --sv-tap );
	padding: .5rem .75rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	font: inherit;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-ink );
	background: var( --sv-surface );
}

.sv-searchbox__field { padding: .375rem .5rem; }
.sv-searchbox__submit { align-self: end; }

@media ( max-width: 899.98px ) {
	.sv-searchbox,
	.wp-site-blocks .sv-searchbox { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.sv-searchbox__submit { grid-column: 1 / -1; }
	.sv-searchbox__submit .sv-btn { width: 100%; }
}

@media ( max-width: 519.98px ) {
	.sv-searchbox,
	.wp-site-blocks .sv-searchbox { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---------- 8. WooCommerce -------------------------------------------- */

.woocommerce-products-header,
.wp-site-blocks .woocommerce-products-header { max-width: var( --sv-shell ); margin-inline: auto; padding-inline: var( --sv-gutter ); }

.sv-woo,
.wp-site-blocks .sv-woo { max-width: var( --sv-shell ); margin-inline: auto; padding-inline: var( --sv-gutter ); }

.woocommerce ul.products li.product a img { border-radius: var( --sv-radius ); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --sv-ink );
	font-family: var( --sv-font-display );
	font-weight: 800;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .wc-block-components-button {
	min-height: var( --sv-tap );
	padding: .625rem 1.25rem;
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-weight: 700;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var( --sv-accent-dark ); color: var( --sv-on-accent ); }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var( --sv-teal ); }

.woocommerce .woocommerce-error { border-top-color: var( --sv-accent-dark ); }

/* ---------- 9. Accessibility utilities -------------------------------- */

/* Live's sr-only content maps here — never to display:none. */
.screen-reader-text,
.sv-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.sv-sr-only:focus {
	position: fixed !important;
	top: calc( var( --sv-adminbar ) + .5rem );
	left: .5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: .75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var( --sv-surface );
	color: var( --sv-ink );
	border-radius: var( --sv-radius );
	box-shadow: var( --sv-shadow-lg );
}

/* Keyboard focus stays. Only pointer interaction clears the ring. */
:where( a, button, input, select, textarea, summary ):focus-visible {
	outline: 2px solid var( --sv-accent );
	outline-offset: 2px;
	border-radius: 4px;
}

:where( a, button, input, select, textarea, summary ):focus:not( :focus-visible ) { outline: none; }
:where( a, button ):active { outline: none; }

/* ---------- 10. Block-gap resets on containers we own (trap 4) ---------- */

.sv-header__inner > *,
.wp-site-blocks .sv-header__inner > *,
.sv-header__actions > *,
.wp-site-blocks .sv-header__actions > *,
.sv-footer__grid > *,
.wp-site-blocks .sv-footer__grid > *,
.sv-footer__legal-inner > *,
.wp-site-blocks .sv-footer__legal-inner > *,
.sv-shell > :first-child,
.wp-site-blocks .sv-shell > :first-child { margin-block-start: 0; }

/* The footer wordmark is a site-title block, so it inherits the column-heading
   rule; give it back its own scale. */
.sv-footer__brand .wp-block-site-title,
.wp-site-blocks .sv-footer__brand .wp-block-site-title {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: none;
	margin-block-end: .75rem;
}

.sv-footer__brand .wp-block-site-title a { color: var( --sv-on-dark ); text-decoration: none; }
.sv-footer__brand .wp-block-site-title a::after { content: "."; color: var( --sv-accent ); }

.sv-footer .sv-footer__note,
.wp-site-blocks .sv-footer .sv-footer__note {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --sv-on-dark-3 );
}

/* Legal strip links run inline. */
.sv-footer .sv-footer__list--inline,
.wp-site-blocks .sv-footer .sv-footer__list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
}

.sv-footer .sv-footer__list--inline li,
.wp-site-blocks .sv-footer .sv-footer__list--inline li { margin: 0; }

.sv-footer .sv-footer__list--inline a,
.wp-site-blocks .sv-footer .sv-footer__list--inline a { font-size: var( --wp--preset--font-size--xs ); }

/* ---------- 11. Fixes found by measuring ------------------------------- */

/* Full-bleed bands: nothing between .wp-site-blocks and a band may pad. */
.wp-site-blocks { padding-inline: 0; }

/* The header row is an explicit single row. Without grid-row the collapsed
   tier auto-places the actions on a second row, because the cursor has
   already advanced past the toggle's column. */
.sv-header__brand,
.wp-site-blocks .sv-header__brand,
nav.sv-header__nav,
.wp-site-blocks nav.sv-header__nav,
.sv-header__actions,
.wp-site-blocks .sv-header__actions { grid-row: 1; }

/* Bare blocks sitting straight in post-content get the shell, so stub pages
   and simple editorial pages are readable before Phase 4 wraps them in
   sections. Anything already inside an .sv-sec is untouched. */
.sv-main > :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, table, pre, hr ),
.sv-main > .wp-block-post-content > :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, table, pre, hr ),
.wp-site-blocks .sv-main > :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, table, pre, hr ),
.wp-site-blocks .sv-main > .wp-block-post-content > :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, table, pre, hr ) {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sv-shell );
	margin-inline: auto;
	padding-inline: var( --sv-gutter );
}

.sv-main,
.wp-site-blocks .sv-main { padding-block: clamp( 2rem, 5vw, 3.5rem ); }

/* …but a page whose first child is a full-bleed band supplies its own top
   padding, so drop the main padding in that case. */
.sv-main:has( > .sv-band--navy:first-child ),
.sv-main:has( > .sv-sec:first-child ),
.sv-main:has( > .wp-block-post-content > .sv-band--navy:first-child ),
.sv-main:has( > .wp-block-post-content > .sv-sec:first-child ),
.wp-site-blocks .sv-main:has( > .sv-band--navy:first-child ),
.wp-site-blocks .sv-main:has( > .sv-sec:first-child ),
.wp-site-blocks .sv-main:has( > .wp-block-post-content > .sv-band--navy:first-child ),
.wp-site-blocks .sv-main:has( > .wp-block-post-content > .sv-sec:first-child ) { padding-block-start: 0; }

/* And the mirror image, which was missing: a page whose LAST child is a
   full-bleed band supplies its own bottom padding too, so the main padding
   was showing as a white strip between that band and the footer. */
.sv-main:has( > .sv-band--navy:last-child ),
.sv-main:has( > .sv-sec:last-child ),
.sv-main:has( > .wp-block-post-content > .sv-band--navy:last-child ),
.sv-main:has( > .wp-block-post-content > .sv-sec:last-child ),
.wp-site-blocks .sv-main:has( > .sv-band--navy:last-child ),
.wp-site-blocks .sv-main:has( > .sv-sec:last-child ),
.wp-site-blocks .sv-main:has( > .wp-block-post-content > .sv-band--navy:last-child ),
.wp-site-blocks .sv-main:has( > .wp-block-post-content > .sv-sec:last-child ) { padding-block-end: 0; }

/* ---------- 12. Page components (Phase 4) ------------------------------ */

/* --- Hero --- */

.sv-hero,
.wp-site-blocks .sv-hero { padding-block: clamp( 3rem, 8vw, 5.5rem ); }

.sv-hero__title,
.wp-site-blocks .sv-hero__title { max-width: 20ch; margin-block: 0 1rem; }

.sv-sec .sv-hero__title { font-size: var( --wp--preset--font-size--mega ); }

.sv-hero .sv-lede,
.wp-site-blocks .sv-hero .sv-lede { max-width: 56ch; margin-block-end: 2rem; }

.sv-hero--lite,
.wp-site-blocks .sv-hero--lite { padding-block: clamp( 2.5rem, 5vw, 3.75rem ); }

.sv-sec .sv-hero--lite .sv-hero__title { font-size: var( --wp--preset--font-size--xxxl ); }

.sv-eyebrow,
.sv-sec .sv-eyebrow,
.sv-sec p.sv-eyebrow {
	margin: 0 0 .75rem;
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --sv-accent );
}

.sv-band--navy .sv-eyebrow,
.wp-site-blocks .sv-band--navy .sv-eyebrow { color: var( --sv-on-dark ); }

/* --- Buttons rendered through core/buttons, so the anchor is the target and
       .sv-actions out-specifies :root :where(.wp-block-button__link). --- */

.sv-actions,
.wp-site-blocks .sv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block-start: 1.5rem;
}

.sv-actions .wp-block-button__link,
.wp-site-blocks .sv-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --sv-tap );
	padding: .625rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --sv-radius-btn );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.sv-actions .sv-btn--primary > .wp-block-button__link,
.wp-site-blocks .sv-actions .sv-btn--primary > .wp-block-button__link {
	background: var( --sv-accent );
	color: var( --sv-on-accent );
}

.sv-actions .sv-btn--primary > .wp-block-button__link:hover { background: var( --sv-accent-dark ); color: var( --sv-on-accent ); }

.sv-actions .sv-btn--outline > .wp-block-button__link,
.wp-site-blocks .sv-actions .sv-btn--outline > .wp-block-button__link {
	background: transparent;
	border-color: var( --sv-border );
	color: var( --sv-ink );
}

.sv-actions .sv-btn--outline > .wp-block-button__link:hover { border-color: var( --sv-ink ); }

.sv-band--navy .sv-actions .sv-btn--outline > .wp-block-button__link,
.wp-site-blocks .sv-band--navy .sv-actions .sv-btn--outline > .wp-block-button__link {
	border-color: var( --sv-border-on-dark );
	color: var( --sv-on-dark );
}

.sv-band--navy .sv-actions .sv-btn--outline > .wp-block-button__link:hover { border-color: var( --sv-on-dark ); }

/* --- Section headers --- */

.sv-sechead,
.wp-site-blocks .sv-sechead { max-width: 62ch; margin-block-end: 2rem; }

.sv-sechead > *,
.wp-site-blocks .sv-sechead > * { margin-block-start: 0; }

/* --- Cards --- */

.sv-card__title,
.sv-sec .sv-card__title { margin-block: 0 .25rem; }

.sv-card__body > *,
.wp-site-blocks .sv-card__body > * { margin-block-start: 0; }

.sv-card__meta,
.sv-sec .sv-card__meta {
	font-size: var( --wp--preset--font-size--xs );
	color: var( --sv-muted );
	margin-block: 0 .75rem;
}

.sv-card__foot,
.wp-site-blocks .sv-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: auto;
	padding-block-start: .75rem;
}

.sv-card__foot > *,
.wp-site-blocks .sv-card__foot > * { margin-block-start: 0; }

.sv-sec .sv-card__price { margin: 0; color: var( --sv-ink ); }

.sv-card__link,
.sv-sec .sv-card__link,
.sv-sec a.sv-card__link {
	display: inline-flex;
	align-items: center;
	min-height: var( --sv-tap );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	color: var( --sv-accent-dark );
	text-decoration: none;
	white-space: nowrap;
}

.sv-sec a.sv-card__link:hover { text-decoration: underline; }

/* No photography is shipped with this build — the reference site could not be
   scraped — so card media is an explicit placeholder, not a stock image. */
.sv-card__media--ph,
.wp-site-blocks .sv-card__media--ph {
	display: flex;
	align-items: flex-end;
	height: 160px;
	padding: 1rem 1.25rem;
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	letter-spacing: .04em;
}

.sv-card__media--ph > *,
.wp-site-blocks .sv-card__media--ph > * { margin-block-start: 0; color: var( --sv-on-dark ); }

.sv-ph--a { background: linear-gradient( 135deg, var( --sv-navy ), var( --sv-teal ) ); }
.sv-ph--b { background: linear-gradient( 135deg, var( --sv-teal ), var( --sv-sun ) ); }
.sv-ph--c { background: linear-gradient( 135deg, var( --sv-accent ), var( --sv-sun ) ); }
.sv-ph--d { background: linear-gradient( 135deg, var( --sv-ink ), var( --sv-accent ) ); }
.sv-ph--e { background: linear-gradient( 135deg, var( --sv-navy ), var( --sv-accent ) ); }
.sv-ph--f { background: linear-gradient( 135deg, var( --sv-teal ), var( --sv-navy ) ); }

/* --- Feature / step / stat rows --- */

.sv-features,
.wp-site-blocks .sv-features {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 1.5rem 2rem;
}

.sv-features > *,
.wp-site-blocks .sv-features > * { margin-block-start: 0; }

.sv-feature > *,
.wp-site-blocks .sv-feature > * { margin-block-start: 0; }

.sv-sec .sv-feature h3 { font-size: var( --wp--preset--font-size--lg ); margin-block: 0 .375rem; }
.sv-sec .sv-feature p { font-size: var( --wp--preset--font-size--sm ); margin: 0; }

.sv-steps,
.wp-site-blocks .sv-steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.5rem 2rem;
	counter-reset: sv-step;
}

.sv-steps > *,
.wp-site-blocks .sv-steps > * { margin-block-start: 0; }

.sv-step,
.wp-site-blocks .sv-step { counter-increment: sv-step; }

.sv-step > *,
.wp-site-blocks .sv-step > * { margin-block-start: 0; }

.sv-step::before {
	content: counter( sv-step );
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-block-end: .75rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-weight: 800;
}

.sv-sec .sv-step h3 { font-size: var( --wp--preset--font-size--lg ); margin-block: 0 .375rem; }
.sv-sec .sv-step p { font-size: var( --wp--preset--font-size--sm ); margin: 0; }

/* A reassurance strip, not a headline block: no section heading competes
   with the hero above it, so the structure has to come from the hairlines
   and the icons instead. Explicit four tracks — auto-fit resolved to five
   at the wide shell and orphaned the last figure. */
.sv-stats,
.wp-site-blocks .sv-stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0;
}

/* Hairline between columns, never before the first in a row. */
.sv-stat,
.wp-site-blocks .sv-stat {
	padding-inline: clamp( 1.25rem, 2.5vw, 2.25rem );
	border-inline-start: 1px solid var( --sv-border );
}

.sv-stats > .sv-stat:first-child,
.wp-site-blocks .sv-stats > .sv-stat:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.sv-stat__icon,
.wp-site-blocks .sv-stat__icon {
	display: block;
	margin-block-end: .625rem;
	color: var( --sv-accent );
}

.sv-stat__icon svg { width: 1.5rem; height: 1.5rem; }

.sv-band--navy .sv-stat__icon,
.wp-site-blocks .sv-band--navy .sv-stat__icon { color: var( --sv-on-dark ); }

@media ( max-width: 60rem ) {
	.sv-stats,
	.wp-site-blocks .sv-stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 2rem;
	}

	/* Two per row, so every odd child starts a row. */
	.sv-stats > .sv-stat:nth-child( 2n + 1 ),
	.wp-site-blocks .sv-stats > .sv-stat:nth-child( 2n + 1 ) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

@media ( max-width: 38rem ) {
	.sv-stats,
	.wp-site-blocks .sv-stats {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 1.75rem;
	}

	.sv-stats > .sv-stat,
	.wp-site-blocks .sv-stats > .sv-stat {
		padding-inline: 0;
		border-inline-start: 0;
	}
}

.sv-stats > *,
.wp-site-blocks .sv-stats > * { margin-block-start: 0; }

.sv-stat > *,
.wp-site-blocks .sv-stat > * { margin-block-start: 0; }

.sv-sec .sv-stat__num {
	margin: 0 0 .25rem;
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 800;
	color: var( --sv-ink );
	line-height: 1.05;
}

.sv-band--navy .sv-stat__num,
.wp-site-blocks .sv-band--navy .sv-stat__num { color: var( --sv-on-dark ); }

.sv-sec .sv-stat__label {
	margin: 0;
	max-width: 22ch;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.45;
}

/* --- Link list (help topics, legal index) --- */

.sv-linklist,
.wp-site-blocks .sv-linklist {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-linklist li,
.wp-site-blocks .sv-linklist li { margin: 0; }

.sv-linklist a,
.wp-site-blocks .sv-linklist a {
	display: flex;
	align-items: center;
	min-height: var( --sv-tap );
	padding: 1rem 1.25rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	background: var( --sv-surface );
	color: var( --sv-ink );
	font-family: var( --sv-font-display );
	font-weight: 700;
	text-decoration: none;
}

.sv-linklist a:hover { border-color: var( --sv-ink ); }

/* --- FAQ (core/details) --- */

.sv-faq,
.wp-site-blocks .sv-faq { display: grid; gap: .625rem; }

.sv-faq > *,
.wp-site-blocks .sv-faq > * { margin-block-start: 0; }

.sv-faq details,
.wp-site-blocks .sv-faq details {
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	background: var( --sv-surface );
	padding: 0;
}

.sv-faq summary,
.wp-site-blocks .sv-faq summary {
	display: flex;
	align-items: center;
	min-height: var( --sv-tap );
	padding: .875rem 1.25rem;
	cursor: pointer;
	font-family: var( --sv-font-display );
	font-weight: 700;
	color: var( --sv-ink );
	list-style: none;
}

.sv-faq summary::-webkit-details-marker { display: none; }

.sv-faq summary::after {
	content: "+";
	margin-inline-start: auto;
	padding-inline-start: 1rem;
	font-size: 1.25rem;
	font-weight: 400;
	color: var( --sv-muted );
}

.sv-faq details[open] > summary::after { content: "\2212"; }

.sv-faq details > :not( summary ),
.wp-site-blocks .sv-faq details > :not( summary ) {
	margin: 0;
	padding: 0 1.25rem 1.125rem;
	font-size: var( --wp--preset--font-size--sm );
}

/* --- Tables --- */

.sv-table,
.wp-site-blocks .sv-table { overflow-x: auto; margin: 0; }

.sv-table table,
.wp-site-blocks .sv-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--sm );
}

.sv-table th,
.sv-table td,
.wp-site-blocks .sv-table th,
.wp-site-blocks .sv-table td {
	padding: .75rem 1rem;
	border: 1px solid var( --sv-border );
	text-align: left;
	vertical-align: top;
}

.sv-table th,
.wp-site-blocks .sv-table th {
	background: var( --sv-offwhite );
	font-family: var( --sv-font-display );
	font-weight: 700;
	color: var( --sv-ink );
}

/* --- Legal prose --- */

.sv-legal,
.wp-site-blocks .sv-legal { max-width: 74ch; }

.sv-legal > *,
.wp-site-blocks .sv-legal > * { margin-block-start: 0; }

.sv-sec .sv-legal h2 { font-size: var( --wp--preset--font-size--xxl ); margin-block: 2.25rem .75rem; }
.sv-sec .sv-legal h2:first-child { margin-block-start: 0; }
.sv-sec .sv-legal h3 { font-size: var( --wp--preset--font-size--lg ); margin-block: 1.5rem .5rem; }
.sv-sec .sv-legal p { margin-block: 0 1rem; }
.sv-legal ul, .sv-legal ol { margin-block: 0 1rem; padding-inline-start: 1.25rem; color: var( --sv-muted ); }
.sv-legal li { margin-block: 0 .375rem; }

.sv-updated,
.sv-sec p.sv-updated {
	margin-block: 0 2rem;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --sv-muted );
}

/* --- Contact form --- */

.sv-form,
.wp-site-blocks .sv-form {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
	padding: 1.5rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
}

.sv-form label {
	display: block;
	margin-block-end: .375rem;
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	color: var( --sv-ink );
}

.sv-form input,
.sv-form select,
.sv-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var( --sv-tap );
	padding: .625rem .75rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	font: inherit;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-ink );
	background: var( --sv-surface );
}

.sv-form textarea { min-height: 8rem; resize: vertical; }

.sv-form button {
	justify-self: start;
	min-height: var( --sv-tap );
	padding: .625rem 1.5rem;
	border: 0;
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	cursor: pointer;
}

.sv-form button:hover { background: var( --sv-accent-dark ); }

.sv-form__note { margin: 0; font-size: var( --wp--preset--font-size--xs ); color: var( --sv-muted ); }

/* --- Prose columns --- */

.sv-cols,
.wp-site-blocks .sv-cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 1.5rem 2.5rem;
}

.sv-cols > *,
.wp-site-blocks .sv-cols > * { margin-block-start: 0; }

/* --- Notice callout (placeholder-legal banner) --- */

.sv-notice,
.sv-sec .sv-notice,
.sv-sec p.sv-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --sv-border );
	border-left: 4px solid var( --sv-accent );
	border-radius: var( --sv-radius );
	background: var( --sv-offwhite );
	color: var( --sv-ink );
	font-size: var( --wp--preset--font-size--sm );
}

.sv-form__opt { font-weight: 400; color: var( --sv-muted ); }

/* Card bodies are columns so the price/link foot can sit at the bottom
   regardless of how long the description runs. */
.sv-card__body,
.wp-site-blocks .sv-card__body { flex: 1; display: flex; flex-direction: column; }

/* core/buttons carries its own layout classes, so .sv-actions has to be
   named alongside .wp-block-buttons to out-specify them (trap 1). */
.wp-block-buttons.sv-actions,
.wp-site-blocks .wp-block-buttons.sv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block-start: 1.5rem;
}

.wp-block-buttons.sv-actions > .wp-block-button,
.wp-site-blocks .wp-block-buttons.sv-actions > .wp-block-button { margin: 0; }

/* ---------- 13. WooCommerce templates ---------------------------------- */

/* --- Breadcrumbs --- */

.sv-crumbs,
.wp-site-blocks .sv-crumbs { margin-block-end: 1rem; }

.sv-crumbs .woocommerce-breadcrumb,
.wp-site-blocks .sv-crumbs .woocommerce-breadcrumb {
	margin: 0;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --sv-muted );
}

.sv-crumbs a { color: var( --sv-muted ); text-decoration: none; }
.sv-crumbs a:hover { color: var( --sv-ink ); text-decoration: underline; }

/* --- Shop toolbar --- */

.sv-shoptools,
.wp-site-blocks .sv-shoptools {
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.sv-shoptools .woocommerce-result-count,
.wp-site-blocks .sv-shoptools .woocommerce-result-count {
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
}

.sv-shoptools select.orderby {
	min-height: var( --sv-tap );
	padding: .5rem .75rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	font: inherit;
	font-size: var( --wp--preset--font-size--sm );
	background: var( --sv-surface );
	color: var( --sv-ink );
}

/* --- Product grid. Woo's own columns-N rule is two classes deep, so these
       name the list element as well to out-specify it. --- */

.sv-shopgrid ul.wc-block-product-template,
.wp-site-blocks .sv-shopgrid ul.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-shopgrid li.wc-block-product,
.wp-site-blocks .sv-shopgrid li.wc-block-product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.25rem 1.375rem 1.375rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
	text-align: left;
}

.sv-shopgrid li.wc-block-product > *,
.wp-site-blocks .sv-shopgrid li.wc-block-product > * { margin-block-start: 0; }

.sv-shopgrid .sv-card__title,
.wp-site-blocks .sv-shopgrid .sv-card__title {
	margin: 0 0 .5rem;
	font-size: var( --wp--preset--font-size--lg );
}

.sv-shopgrid .sv-card__title a { color: var( --sv-ink ); text-decoration: none; }
.sv-shopgrid .sv-card__title a:hover { color: var( --sv-accent-dark ); }

.sv-shopgrid .wp-block-post-excerpt,
.wp-site-blocks .sv-shopgrid .wp-block-post-excerpt { margin: 0 0 1rem; }

.sv-shopgrid .wp-block-post-excerpt__excerpt,
.wp-site-blocks .sv-shopgrid .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
	line-height: 1.5;
}

.sv-shopgrid .sv-card__price,
.wp-site-blocks .sv-shopgrid .sv-card__price {
	margin-block-start: auto;
	padding-block-start: .5rem;
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 800;
	color: var( --sv-ink );
}

.sv-shopgrid .sv-card__cta,
.wp-site-blocks .sv-shopgrid .sv-card__cta { margin-block-start: .875rem; }

.sv-shopgrid .sv-card__cta .wp-block-button__link,
.wp-site-blocks .sv-shopgrid .sv-card__cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var( --sv-tap );
	padding: .625rem 1.25rem;
	border: 0;
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
}

.sv-shopgrid .sv-card__cta .wp-block-button__link:hover { background: var( --sv-accent-dark ); }

.sv-shopgrid .added_to_cart,
.wp-site-blocks .sv-shopgrid .added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: var( --sv-tap );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	color: var( --sv-accent-dark );
}

.sv-pagination,
.wp-site-blocks .sv-pagination { margin-block-start: 2.5rem; gap: .5rem; }

.sv-pagination a,
.sv-pagination span,
.wp-site-blocks .sv-pagination a,
.wp-site-blocks .sv-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --sv-tap );
	min-height: var( --sv-tap );
	padding-inline: .5rem;
	border-radius: var( --sv-radius-pill );
	color: var( --sv-ink );
	text-decoration: none;
	font-weight: 600;
}

.sv-pagination a:hover { background: var( --sv-offwhite ); }

/* --- Single product --- */

.sv-product__head .sv-hero__title,
.wp-site-blocks .sv-product__head .sv-hero__title {
	margin-block: 0 .75rem;
	font-size: var( --wp--preset--font-size--xxxl );
	max-width: 22ch;
}

.sv-product__head .sv-lede,
.wp-site-blocks .sv-product__head .sv-lede { margin-block-end: 1.5rem; }

.sv-product__head .sv-lede .wp-block-post-excerpt__excerpt,
.wp-site-blocks .sv-product__head .sv-lede .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var( --wp--preset--font-size--lg );
	color: var( --sv-muted );
}

.sv-product__price,
.wp-site-blocks .sv-product__price { margin-block-end: .375rem; }

.sv-product__price .woocommerce-Price-amount,
.wp-site-blocks .sv-product__price .woocommerce-Price-amount {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 800;
	color: var( --sv-ink );
	line-height: 1.1;
}

.sv-sec p.sv-product__pricenote {
	margin-block: 0 1.5rem;
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--sm );
}

.wc-block-add-to-cart-form form.cart,
.wp-site-blocks .wc-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
}

.wc-block-add-to-cart-form .quantity input.qty,
.wp-site-blocks .wc-block-add-to-cart-form .quantity input.qty {
	width: 5rem;
	min-height: var( --sv-tap );
	padding: .5rem .625rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	font: inherit;
	text-align: center;
	background: var( --sv-surface );
	color: var( --sv-ink );
}

.woocommerce .sv-product__head button.single_add_to_cart_button,
.wp-site-blocks .sv-product__head button.single_add_to_cart_button {
	min-height: var( --sv-tap );
	padding: .625rem 2rem;
	border: 0;
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
}

.wp-site-blocks .sv-product__head button.single_add_to_cart_button:hover { background: var( --sv-accent-dark ); }

/* Woo still emits the tab list under is-style-minimal. Stack the panels and
   drop the tab strip — a holiday package has two short panels, not tabs. */
.sv-product__details .wc-tabs,
.wp-site-blocks .sv-product__details .wc-tabs { display: none; }

.sv-product__details .woocommerce-Tabs-panel,
.wp-site-blocks .sv-product__details .woocommerce-Tabs-panel {
	display: block !important; /* Woo hides inactive panels inline via JS */
	margin-block-end: 2rem;
	max-width: 74ch;
}

.sv-product__details .woocommerce-Tabs-panel > h2,
.wp-site-blocks .sv-product__details .woocommerce-Tabs-panel > h2 {
	font-size: var( --wp--preset--font-size--xl );
	margin-block: 0 .75rem;
}

.sv-product__details .woocommerce-Tabs-panel p { margin-block: 0 1rem; color: var( --sv-muted ); }

.sv-product__details table.shop_attributes,
.wp-site-blocks .sv-product__details table.shop_attributes {
	width: 100%;
	max-width: 34rem;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--sm );
}

.sv-product__details table.shop_attributes th,
.sv-product__details table.shop_attributes td,
.wp-site-blocks .sv-product__details table.shop_attributes th,
.wp-site-blocks .sv-product__details table.shop_attributes td {
	padding: .75rem 1rem;
	border: 1px solid var( --sv-border );
	text-align: left;
	vertical-align: top;
}

.sv-product__details table.shop_attributes th {
	width: 40%;
	background: var( --sv-offwhite );
	font-family: var( --sv-font-display );
	font-weight: 700;
	color: var( --sv-ink );
}

.sv-product__details table.shop_attributes td p { margin: 0; }

/* ---------- 14. Fixes found by screenshotting Phase 4 ------------------ */

/* Card titles are links, so theme.json's link colour and core's underline
   both reach them. Name the card class to out-specify. */
.sv-card__title a,
.sv-sec .sv-card__title a,
.wp-site-blocks .sv-sec .sv-card__title a {
	color: var( --sv-ink );
	text-decoration: none;
}

.sv-sec .sv-card__title a:hover,
.wp-site-blocks .sv-sec .sv-card__title a:hover { color: var( --sv-accent-dark ); }

/* Woo's product list was not stretching its rows, so the price and button
   landed at different heights across a row. */
.sv-shopgrid ul.wc-block-product-template,
.wp-site-blocks .sv-shopgrid ul.wc-block-product-template { align-items: stretch; }

.sv-shopgrid li.wc-block-product,
.wp-site-blocks .sv-shopgrid li.wc-block-product { height: 100%; box-sizing: border-box; }

/* Line the search button up with the inputs rather than the grid row edge. */
.sv-searchbox__submit,
.wp-site-blocks .sv-searchbox__submit { padding: .375rem .5rem; }

.sv-searchbox__submit .sv-btn,
.wp-site-blocks .sv-searchbox__submit .sv-btn { margin-block-start: 1.25rem; }

@media ( max-width: 899.98px ) {
	.sv-searchbox__submit .sv-btn,
	.wp-site-blocks .sv-searchbox__submit .sv-btn { margin-block-start: .25rem; }
}

/* Woo italicises attribute values by default. */
.sv-product__details table.shop_attributes td p,
.wp-site-blocks .sv-product__details table.shop_attributes td p { font-style: normal; }

/* The block-gap reset above is `.sv-shopgrid li.wc-block-product > *`, which is
   a class-class-element and therefore beats the two-class price rule. Name the
   li here too so the auto margin survives and the price bottom-aligns. */
.sv-shopgrid li.wc-block-product > .sv-card__price,
.wp-site-blocks .sv-shopgrid li.wc-block-product > .sv-card__price {
	margin-block-start: auto;
	padding-block-start: .5rem;
}

.sv-shopgrid li.wc-block-product > .sv-card__cta,
.wp-site-blocks .sv-shopgrid li.wc-block-product > .sv-card__cta { margin-block-start: .875rem; }

/* ---------- 15. Reference match ---------------------------------------- */

/* --- Trust strip: the grey band under the pink bar --- */

.sv-trustbar,
.wp-site-blocks .sv-trustbar {
	background: var( --sv-offwhite );
	border-block-end: 1px solid var( --sv-border );
}

.sv-trustbar__inner,
.wp-site-blocks .sv-trustbar__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: var( --sv-trustbar-h );
	max-width: var( --sv-shell );
	margin-inline: auto;
	padding-inline: var( --sv-gutter );
}

.sv-trustbar__inner > *,
.wp-site-blocks .sv-trustbar__inner > * { margin-block-start: 0; }

.sv-trustbar__inner p,
.wp-site-blocks .sv-trustbar__inner p {
	margin: 0;
	padding-inline: 1.5rem;
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	color: var( --sv-ink );
	line-height: 1.3;
}

.sv-trustbar__inner p + p,
.wp-site-blocks .sv-trustbar__inner p + p { border-inline-start: 1px solid var( --sv-border ); }

/* The strip is part of --sv-header-h, so zeroing the token keeps the sticky
   offset, the mobile panel offset and scroll-padding all consistent. */
@media ( max-width: 899.98px ) {
	:root { --sv-trustbar-h: 0px; }
	.sv-trustbar, .wp-site-blocks .sv-trustbar { display: none; }
}

/* --- The brand divider only exists while the nav sits beside the logo --- */

@media ( max-width: 1079.98px ) {
	.sv-header__brand,
	.wp-site-blocks .sv-header__brand {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}

/* --- Hero: purple-to-magenta, as on the reference --- */

.sv-hero.sv-band--navy,
.wp-site-blocks .sv-hero.sv-band--navy { background: var( --sv-grad-hero ); }

/* --- The closing CTA band ------------------------------------------------
   Built the same way as the hero — a deep purple-to-magenta ramp, soft
   colour fields over it and one organic highlight — but mirrored. The warm
   field sits low-left here and the cool one high-right, and the highlight
   is bottom-right rather than top-right, so the two bands rhyme instead of
   repeating. The text side stays dark in both, which is what keeps the
   white heading and the outline button legible. */

.sv-cta.sv-band--navy,
.wp-site-blocks .sv-cta.sv-band--navy {
	position: relative;
	overflow: hidden;
	background: var( --sv-grad-band );
}

.sv-cta.sv-band--navy::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( 40rem 26rem at 8% 112%, rgba( 255, 138, 0, .24 ), transparent 62% ),
		radial-gradient( 34rem 22rem at 94% -12%, rgba( 23, 179, 163, .26 ), transparent 62% ),
		radial-gradient( 34rem 22rem at 78% 104%, rgba( 230, 0, 126, .30 ), transparent 66% ),
		radial-gradient( 128% 96% at 40% 50%, transparent 56%, rgba( 8, 2, 18, .30 ) 100% );
}

.sv-cta.sv-band--navy::after {
	content: "";
	position: absolute;
	right: -7rem;
	bottom: -8rem;
	width: 26rem;
	height: 26rem;
	pointer-events: none;
	border-radius: 62% 38% 44% 56% / 36% 62% 38% 64%;
	background: linear-gradient( 312deg, rgba( 255, 255, 255, .16 ), rgba( 255, 255, 255, 0 ) );
	transform: rotate( 10deg );
	filter: blur( 8px );
}

/* The shell has to clear both pseudo-elements. */
.sv-cta .sv-shell,
.wp-site-blocks .sv-cta .sv-shell { position: relative; z-index: 1; }

/* --- Gradient CTA, the reference's "View more deals" treatment --- */

.sv-actions .sv-btn--gradient > .wp-block-button__link,
.wp-site-blocks .sv-actions .sv-btn--gradient > .wp-block-button__link {
	background: var( --sv-grad-cta );
	color: var( --sv-on-accent );
	border: 0;
}

.sv-actions .sv-btn--gradient > .wp-block-button__link:hover { filter: brightness( .94 ); }

/* --- Section headings sit tighter and heavier than the previous scale --- */

.sv-sec h2,
.wp-site-blocks .sv-sec h2 { letter-spacing: -0.015em; }

.sv-sec .sv-lede,
.wp-site-blocks .sv-sec .sv-lede { color: var( --sv-muted ); }

/* --- Search widget: reference submit is a compact square, not a wide pill - */

.sv-searchbox,
.wp-site-blocks .sv-searchbox { border-radius: var( --sv-radius-lg ); }

.sv-searchbox__submit .sv-btn,
.wp-site-blocks .sv-searchbox__submit .sv-btn {
	border-radius: var( --sv-radius-btn );
	padding-inline: 1.75rem;
}

/* The muted-lede rule above is two classes deep and lands later in the file
   than the band rule, so it was winning on a dark band and leaving the hero
   subtitle almost unreadable. Re-state it one class higher. */
.sv-sec.sv-band--navy .sv-lede,
.wp-site-blocks .sv-sec.sv-band--navy .sv-lede { color: var( --sv-lede-on-dark ); }

/* Card grids step down explicitly rather than by auto-fill arithmetic. */
@media ( max-width: 1023.98px ) {
	.sv-grid, .wp-site-blocks .sv-grid,
	.sv-shopgrid ul.wc-block-product-template,
	.wp-site-blocks .sv-shopgrid ul.wc-block-product-template {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767.98px ) {
	.sv-grid, .wp-site-blocks .sv-grid,
	.sv-shopgrid ul.wc-block-product-template,
	.wp-site-blocks .sv-shopgrid ul.wc-block-product-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 479.98px ) {
	.sv-grid, .wp-site-blocks .sv-grid,
	.sv-shopgrid ul.wc-block-product-template,
	.wp-site-blocks .sv-shopgrid ul.wc-block-product-template {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* The action cluster's divider has no nav to separate from once collapsed. */
@media ( max-width: 1079.98px ) {
	.sv-header__actions,
	.wp-site-blocks .sv-header__actions { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---------- 16. Nav label colour, stated unambiguously ------------------ */

/* Three ways this could go dark, all closed off here:
   1. a :visited rule reaching the anchor before the base rule does;
   2. the inner label span picking up an inherited colour of its own;
   3. --sv-on-dark failing to resolve, which makes `color` compute to
      `unset` — and because colour is inherited, that means `inherit`, i.e.
      the dark body colour. The literal inside var() removes that path.
      It is the only colour literal below :root, and it is a safety net
      rather than a value. */
.sv-header nav.sv-header__nav .wp-block-navigation-item__content,
.sv-header nav.sv-header__nav .wp-block-navigation-item__content:link,
.sv-header nav.sv-header__nav .wp-block-navigation-item__content:visited,
.sv-header nav.sv-header__nav .wp-block-navigation-item__content:hover,
.sv-header nav.sv-header__nav .wp-block-navigation-item__content:focus,
.sv-header nav.sv-header__nav .wp-block-navigation-item__label,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__content,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__content:link,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__content:visited,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__content:hover,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__content:focus,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation-item__label {
	color: var( --sv-on-dark, #ffffff );
}

/* Same treatment for the action links and the menu buttons on the bar. */
.sv-header .sv-header__action,
.sv-header .sv-header__action:link,
.sv-header .sv-header__action:visited,
.sv-header .sv-header__action:hover,
.sv-header .sv-header__action:focus,
.wp-site-blocks .sv-header .sv-header__action,
.wp-site-blocks .sv-header .sv-header__action:link,
.wp-site-blocks .sv-header .sv-header__action:visited,
.wp-site-blocks .sv-header .sv-header__action:hover,
.wp-site-blocks .sv-header .sv-header__action:focus {
	color: var( --sv-on-dark, #ffffff );
}

/* The wordmark is a site-title block, so it is a link too. */
.sv-header .sv-header__brand a,
.sv-header .sv-header__brand a:link,
.sv-header .sv-header__brand a:visited,
.sv-header .sv-header__brand a:hover,
.wp-site-blocks .sv-header .sv-header__brand a,
.wp-site-blocks .sv-header .sv-header__brand a:visited {
	color: var( --sv-on-dark, #ffffff );
}

/* Inside the open mobile panel the ground is white again, so labels flip back.
   The rules above carry :link/:visited/:hover/:focus, and a pseudo-class scores
   in the class column — …__content:link is (0,5,1). A plain descendant override
   at (0,5,0) therefore loses, which left the anchor white on a white panel.
   Match the pseudo-classes here and add a class so these win outright. */
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:link,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	color: var( --sv-ink, #2d0a3e );
}

.wp-site-blocks .sv-header nav.sv-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: var( --sv-offwhite );
}

/* ---------- 17. Depth and detail --------------------------------------- */

/* --- Icons --- */

.sv-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.sv-icon--sm { width: 0.9375rem; height: 0.9375rem; }

/* --- Marker stroke under a highlighted phrase --- */

.sv-mark {
	white-space: nowrap;
	padding-inline: .06em;
	background-image: linear-gradient( 90deg, var( --sv-sun ), var( --sv-accent ) );
	background-repeat: no-repeat;
	background-size: 100% .16em;
	background-position: 0 94%;
}

/* --- Hero decoration. The reference fills its hero with collage art; with no
       imagery to hand, soft colour fields keep it from reading as a flat slab. */

.sv-hero.sv-band--navy,
.wp-site-blocks .sv-hero.sv-band--navy { position: relative; overflow: hidden; }

.sv-hero.sv-band--navy::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( 44rem 28rem at 88% 8%, rgba( 255, 150, 30, .34 ), transparent 60% ),
		radial-gradient( 34rem 22rem at 2% 96%, rgba( 23, 179, 163, .26 ), transparent 62% ),
		radial-gradient( 32rem 20rem at 58% 116%, rgba( 255, 60, 150, .26 ), transparent 66% ),
		/* Mild vignette so the headline holds its edge over the bright corner. */
		radial-gradient( 128% 96% at 46% 44%, transparent 54%, rgba( 10, 3, 20, .30 ) 100% );
}

.sv-hero.sv-band--navy::after {
	content: "";
	position: absolute;
	right: -5rem;
	top: 8%;
	width: 24rem;
	height: 24rem;
	pointer-events: none;
	border-radius: 32% 68% 62% 38% / 44% 36% 64% 56%;
	background: linear-gradient( 140deg, rgba( 255, 255, 255, .20 ), rgba( 255, 255, 255, 0 ) );
	transform: rotate( -12deg );
	filter: blur( 6px );
}

.sv-hero .sv-shell,
.wp-site-blocks .sv-hero .sv-shell { position: relative; z-index: 1; }

/* --- Trust row in the hero --- */

.sv-trust,
.wp-site-blocks .sv-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.75rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
}

.sv-trust__item,
.wp-site-blocks .sv-trust__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
}

.sv-trust__item .sv-icon { color: var( --sv-sun ); }

/* --- Search: segmented control above the form --- */

.sv-search,
.wp-site-blocks .sv-search {
	margin-block-start: 2rem;
	overflow: hidden;
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow-lg );
}

.sv-search__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .5rem .75rem 0;
	border-block-end: 1px solid var( --sv-border );
}

.sv-search__tab {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var( --sv-tap );
	padding: .5rem .875rem;
	border-block-end: 3px solid transparent;
	color: var( --sv-muted );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sv-search__tab:hover { color: var( --sv-ink ); }

.sv-search__tab.is-active {
	color: var( --sv-accent );
	border-block-end-color: var( --sv-accent );
}

/* The form now sits inside .sv-search, so it drops its own frame. */
.sv-search .sv-searchbox,
.wp-site-blocks .sv-search .sv-searchbox {
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* --- Cards: badge, facts, price, and a lift on hover --- */

.sv-card,
.wp-site-blocks .sv-card { transition: transform .18s ease, box-shadow .18s ease; }

.sv-card:hover,
.wp-site-blocks .sv-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --sv-shadow-lg );
}

.sv-card__media--ph,
.wp-site-blocks .sv-card__media--ph {
	position: relative;
	display: block;
	height: 170px;
	padding: 0;
}

.sv-card__badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .625rem;
	border-radius: var( --sv-radius-pill );
	background: rgba( 255, 255, 255, .94 );
	color: var( --sv-ink );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 1px 3px rgba( var( --sv-shadow-rgb ), .18 );
}

.sv-card__badge .sv-icon { color: var( --sv-accent ); }

.sv-sec .sv-card__meta,
.wp-site-blocks .sv-sec .sv-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .875rem;
	margin-block: 0 .625rem;
}

.sv-card__fact {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var( --sv-muted );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
}

.sv-card__fact .sv-icon { color: var( --sv-accent ); }

.sv-sec .sv-card__price,
.wp-site-blocks .sv-sec .sv-card__price {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
}

.sv-card__from { color: var( --sv-muted ); font-size: var( --wp--preset--font-size--xs ); font-weight: 600; }
.sv-card__pp { color: var( --sv-muted ); font-size: var( --wp--preset--font-size--xs ); font-weight: 600; }

.sv-sec .sv-card__price strong,
.wp-site-blocks .sv-sec .sv-card__price strong {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 800;
	color: var( --sv-ink );
	line-height: 1;
}

.sv-sec a.sv-card__link::after { content: " \2192"; }

/* --- Feature cards --- */

.sv-feature,
.wp-site-blocks .sv-feature {
	padding: 1.375rem 1.25rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sv-feature:hover,
.wp-site-blocks .sv-feature:hover {
	border-color: transparent;
	box-shadow: var( --sv-shadow );
}

.sv-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: .875rem;
	border-radius: var( --sv-radius );
	background: var( --sv-accent-soft );
	color: var( --sv-accent );
}

.sv-band--navy .sv-feature,
.wp-site-blocks .sv-band--navy .sv-feature {
	border-color: var( --sv-border-on-dark );
	background: transparent;
}

.sv-band--navy .sv-feature__icon,
.wp-site-blocks .sv-band--navy .sv-feature__icon {
	background: rgba( 255, 255, 255, .14 );
	color: var( --sv-on-dark );
}

/* --- Steps read as cards too, for consistency --- */

.sv-step,
.wp-site-blocks .sv-step {
	padding: 1.375rem 1.25rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
}

/* The media placeholder whitens its children (it used to hold a caption on a
   coloured ground). The badge now lives there and is white-on-white without
   this — .sv-card__media--ph > * is class-class-element and beats the badge's
   own single class. */
.sv-card .sv-card__media--ph > .sv-card__badge,
.wp-site-blocks .sv-card .sv-card__media--ph > .sv-card__badge { color: var( --sv-ink ); }

.sv-card .sv-card__media--ph > .sv-card__badge .sv-icon,
.wp-site-blocks .sv-card .sv-card__media--ph > .sv-card__badge .sv-icon { color: var( --sv-accent ); }

/* Price and link should sit on one line. */
.sv-card__foot,
.wp-site-blocks .sv-card__foot { align-items: center; }

/* Trim the hero blob back a little — it was reading as a bubble rather than
   as depth. */
.sv-hero.sv-band--navy::after {
	right: -8rem;
	width: 26rem;
	height: 26rem;
	background: linear-gradient( 140deg, rgba( 255, 255, 255, .12 ), rgba( 255, 255, 255, 0 ) );
}

/* Woo's own product cards get the same lift, so /holidays/ does not feel
   flatter than the generated grids beside it. */
.sv-shopgrid li.wc-block-product,
.wp-site-blocks .sv-shopgrid li.wc-block-product {
	transition: transform .18s ease, box-shadow .18s ease;
}

.sv-shopgrid li.wc-block-product:hover,
.wp-site-blocks .sv-shopgrid li.wc-block-product:hover {
	transform: translateY( -3px );
	box-shadow: var( --sv-shadow-lg );
}

/* The segmented control wraps rather than scrolls on narrow screens. */
@media ( max-width: 519.98px ) {
	.sv-search__tab { padding-inline: .625rem; font-size: var( --wp--preset--font-size--xs ); }
	.sv-trust, .wp-site-blocks .sv-trust { gap: .5rem 1rem; }
}

/* ---------- 18. Tiles, promo band, chips -------------------------------- */

/* --- Overlay tiles: image area, name bottom-left, price chip top-right --- */

.sv-tiles,
.wp-site-blocks .sv-tiles {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.25rem;
}

.sv-tiles > *,
.wp-site-blocks .sv-tiles > * { margin-block-start: 0; }

.sv-tile,
.wp-site-blocks .sv-tile {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var( --sv-radius-lg );
	box-shadow: var( --sv-shadow );
	transition: transform .2s ease, box-shadow .2s ease;
}

.sv-tile:hover,
.wp-site-blocks .sv-tile:hover {
	transform: translateY( -3px );
	box-shadow: var( --sv-shadow-lg );
}

/* Scrim so the name stays legible whatever the placeholder gradient does. */
.sv-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 13, 5, 20, .68 ), rgba( 13, 5, 20, .12 ) 52%, transparent 78% );
	pointer-events: none;
}

.sv-tile__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding: 1.125rem 1.25rem;
	text-decoration: none;
}

.sv-tile__name {
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 800;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 8px rgba( 13, 5, 20, .35 );
}

.sv-tiles--3,
.wp-site-blocks .sv-tiles--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

@media ( max-width: 60rem ) {
	.sv-tiles--3,
	.wp-site-blocks .sv-tiles--3 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 38rem ) {
	.sv-tiles--3,
	.wp-site-blocks .sv-tiles--3 { grid-template-columns: minmax( 0, 1fr ); }
}

/* --- Photo tiles ------------------------------------------------------
   The tile is already position:relative, overflow:hidden and carries a
   scrim, so the photo only has to fill it underneath both. Sideloaded
   attachments, so the <img> arrives with srcset. */

.sv-tile__img,
.wp-site-blocks .sv-tile__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	border-radius: 0;
}

.sv-tile__img img,
.wp-site-blocks .sv-tile__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The scrim sits above the photo but below the label, which is z-index 2. */
.sv-tile::after { z-index: 1; }

/* A tile with no link must not lift on hover — it would promise a click
   that does not exist. */
.sv-tile--static:hover,
.wp-site-blocks .sv-tile--static:hover {
	transform: none;
	box-shadow: var( --sv-shadow );
}

/* --- Photo band, under a destination hero ---------------------------- */

/* Tight against the hero above it, normal spacing below. */
.sv-photoband,
.wp-site-blocks .sv-photoband { padding-block: clamp( 1.5rem, 3vw, 2.25rem ); }

.sv-photoband__img,
.wp-site-blocks .sv-photoband__img {
	margin: 0;
	overflow: hidden;
	border-radius: var( --sv-radius-lg );
	box-shadow: var( --sv-shadow );
}

.sv-photoband__img img,
.wp-site-blocks .sv-photoband__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
}

@media ( max-width: 38rem ) {
	.sv-photoband__img img,
	.wp-site-blocks .sv-photoband__img img { aspect-ratio: 3 / 2; }
}

.sv-tile__chip {
	position: absolute;
	top: .875rem;
	right: .875rem;
	z-index: 3;
	padding: .35rem .7rem;
	border-radius: var( --sv-radius );
	background: var( --sv-surface );
	color: var( --sv-ink );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	box-shadow: 0 1px 4px rgba( var( --sv-shadow-rgb ), .22 );
}

@media ( max-width: 1023.98px ) {
	.sv-tiles, .wp-site-blocks .sv-tiles { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 519.98px ) {
	.sv-tiles, .wp-site-blocks .sv-tiles { grid-template-columns: minmax( 0, 1fr ); }
}

/* --- Promo band --- */

.sv-promo,
.wp-site-blocks .sv-promo { background: var( --sv-offwhite ); }

.sv-promo__inner,
.wp-site-blocks .sv-promo__inner {
	display: grid;
	grid-template-columns: minmax( 0, 22rem ) minmax( 0, 1fr );
	gap: 0;
	overflow: hidden;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
}

.sv-promo__inner > *,
.wp-site-blocks .sv-promo__inner > * { margin-block-start: 0; }

.sv-promo__art,
.wp-site-blocks .sv-promo__art {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	min-height: 15rem;
	padding: 2rem 1.5rem;
	background: var( --sv-ink );
}

.sv-promo__art::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 18rem 14rem at 18% 22%, rgba( 230, 0, 126, .55 ), transparent 62% ),
		radial-gradient( 16rem 12rem at 86% 84%, rgba( 23, 179, 163, .45 ), transparent 62% ),
		radial-gradient( 14rem 12rem at 76% 12%, rgba( 255, 138, 0, .38 ), transparent 62% );
}

.sv-promo__word,
.sv-promo__sub { position: relative; z-index: 1; text-align: center; }

.sv-promo__word {
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.sv-promo__sub {
	color: var( --sv-on-dark-1 );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
}

.sv-promo__body,
.wp-site-blocks .sv-promo__body { padding: clamp( 1.5rem, 3vw, 2.5rem ); }

.sv-promo__body > *,
.wp-site-blocks .sv-promo__body > * { margin-block-start: 0; }

.sv-sec .sv-promo__body h2 { font-size: var( --wp--preset--font-size--xxl ); margin-block: 0 .5rem; }
.sv-sec .sv-promo__body .sv-lede { font-size: var( --wp--preset--font-size--base ); margin-block-end: 1.25rem; }

.sv-promo__list,
.wp-site-blocks .sv-promo__list {
	display: grid;
	gap: .875rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-promo__item,
.wp-site-blocks .sv-promo__item {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
	line-height: 1.5;
}

.sv-promo__item .sv-icon { color: var( --sv-accent ); margin-block-start: .1rem; }
.sv-promo__item strong { color: var( --sv-ink ); font-weight: 700; }

@media ( max-width: 767.98px ) {
	.sv-promo__inner,
	.wp-site-blocks .sv-promo__inner { grid-template-columns: minmax( 0, 1fr ); }
	.sv-promo__art, .wp-site-blocks .sv-promo__art { min-height: 10rem; }
}

/* --- Chip row --- */

.sv-chips,
.wp-site-blocks .sv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-chips li,
.wp-site-blocks .sv-chips li { margin: 0; }

.sv-chips a,
.wp-site-blocks .sv-chips a {
	display: inline-flex;
	align-items: center;
	min-height: var( --sv-tap );
	padding: .5rem 1rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-pill );
	background: var( --sv-surface );
	color: var( --sv-ink );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.sv-chips a:hover,
.wp-site-blocks .sv-chips a:hover {
	border-color: var( --sv-accent );
	color: var( --sv-accent-dark );
}

/* ---------- 19. Subscription plans ------------------------------------- */

.sv-plans,
.wp-site-blocks .sv-plans {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.5rem;
	align-items: stretch;
}

.sv-plans > *,
.wp-site-blocks .sv-plans > * { margin-block-start: 0; }

.sv-plan,
.wp-site-blocks .sv-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem 1.5rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
}

.sv-plan--featured,
.wp-site-blocks .sv-plan--featured {
	border-color: var( --sv-accent );
	box-shadow: var( --sv-shadow-lg );
}

.sv-plan__flag {
	position: absolute;
	top: -0.75rem;
	left: 1.5rem;
	padding: .25rem .75rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
}

.sv-sec .sv-plan__name,
.wp-site-blocks .sv-sec .sv-plan__name {
	margin: 0 0 .5rem;
	font-size: var( --wp--preset--font-size--lg );
}

.sv-sec .sv-plan__price,
.wp-site-blocks .sv-sec .sv-plan__price {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin: 0 0 .75rem;
}

.sv-plan__price strong {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--mega );
	font-weight: 800;
	color: var( --sv-ink );
	line-height: 1;
}

.sv-plan__per { color: var( --sv-muted ); font-size: var( --wp--preset--font-size--sm ); font-weight: 600; }

.sv-sec .sv-plan__blurb,
.wp-site-blocks .sv-sec .sv-plan__blurb {
	margin: 0 0 1.125rem;
	font-size: var( --wp--preset--font-size--sm );
}

.sv-plan__list,
.wp-site-blocks .sv-plan__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.sv-plan__list li,
.wp-site-blocks .sv-plan__list li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.5rem;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
	line-height: 1.45;
}

.sv-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .5rem;
	height: .5rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent );
}

.sv-plan__form { margin-block-start: auto; }

/* The pricing shortcode anchors its card bottoms with a form; the editorial
   copy on /what-you-get/ has no form, so its link does the same job. Two
   classes, because `.sv-sec p` would otherwise win on the margins. */
.sv-sec .sv-plan__foot,
.wp-site-blocks .sv-sec .sv-plan__foot { margin-block: auto 0; }

/* sv-plan__cta is styled for a <button>; as a link it needs the underline
   removed and the box re-stated, since `.sv-sec a` reaches it. */
.sv-sec a.sv-plan__cta,
.wp-site-blocks .sv-sec a.sv-plan__cta {
	display: flex;
	/* The rule was written for a <button>, which the UA already sizes as
	   border-box. An <a> does not, so width:100% plus the padding and border
	   overflowed the card. */
	box-sizing: border-box;
	text-decoration: none;
}

/* Ghost variant: the real "Choose <plan>" button on /plans/ is the primary
   action, so this must not compete with it. */
.sv-sec a.sv-plan__cta--ghost,
.wp-site-blocks .sv-sec a.sv-plan__cta--ghost {
	background: transparent;
	color: var( --sv-accent );
}

.sv-sec a.sv-plan__cta--ghost:hover,
.wp-site-blocks .sv-sec a.sv-plan__cta--ghost:hover {
	background: var( --sv-accent-soft );
	color: var( --sv-accent );
}

.sv-plan__cta,
.wp-site-blocks .sv-plan__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var( --sv-tap );
	padding: .625rem 1.25rem;
	border: 1px solid var( --sv-accent );
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}

.sv-plan__cta:hover { background: var( --sv-accent-dark ); border-color: var( --sv-accent-dark ); }

.sv-plan:not( .sv-plan--featured ) .sv-plan__cta {
	background: transparent;
	color: var( --sv-accent-dark );
}

.sv-plan:not( .sv-plan--featured ) .sv-plan__cta:hover {
	background: var( --sv-accent );
	color: var( --sv-on-accent );
}

.sv-sec .sv-plan__current,
.wp-site-blocks .sv-sec .sv-plan__current {
	margin: auto 0 0;
	padding-block-start: .5rem;
	font-weight: 700;
	color: var( --sv-teal );
	font-size: var( --wp--preset--font-size--sm );
}

.sv-sec .sv-plans__note,
.wp-site-blocks .sv-sec .sv-plans__note {
	margin-block-start: 1.5rem;
	font-size: var( --wp--preset--font-size--xs );
}

.sv-notice--ok { border-left-color: var( --sv-teal ); }
.sv-notice--bad { border-left-color: var( --sv-accent-dark ); }

@media ( max-width: 899.98px ) {
	.sv-plans, .wp-site-blocks .sv-plans { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---------- 20. Fare search results ------------------------------------ */

.sv-sec .sv-search__heading,
.wp-site-blocks .sv-sec .sv-search__heading {
	margin-block: 2rem 0;
	font-size: var( --wp--preset--font-size--xxl );
}

.sv-sec .sv-search__alt,
.wp-site-blocks .sv-sec .sv-search__alt {
	margin-block: .375rem 1.25rem;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
}

.sv-searchbox--fare,
.wp-site-blocks .sv-searchbox--fare {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) auto;
	padding: 1.25rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
}

@media ( max-width: 899.98px ) {
	.sv-searchbox--fare,
	.wp-site-blocks .sv-searchbox--fare { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* ---------- 21. Destination photography --------------------------------- */

.sv-card__media--photo,
.wp-site-blocks .sv-card__media--photo {
	position: relative;
	overflow: hidden;
	height: 170px;
	background: var( --sv-offwhite );
}

.sv-card__media--photo img,
.wp-site-blocks .sv-card__media--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.sv-card:hover .sv-card__media--photo img,
.wp-site-blocks .sv-card:hover .sv-card__media--photo img { transform: scale( 1.04 ); }

/* A scrim only under the badge, so the pill stays legible on a bright sky
   without dimming the whole photo. */
.sv-card__media--photo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: linear-gradient( to bottom, rgba( 13, 5, 20, .28 ), transparent );
	pointer-events: none;
	z-index: 1;
}

.sv-card__media--photo .sv-card__badge { z-index: 2; }

/* ---------- 22. Price-by-date strip ------------------------------------- */

.sv-dates,
.wp-site-blocks .sv-dates {
	display: grid;
	grid-template-columns: minmax( 0, 20rem ) minmax( 0, 1fr );
	gap: 1.5rem;
	align-items: start;
}

.sv-dates__hero,
.wp-site-blocks .sv-dates__hero {
	position: relative;
	overflow: hidden;
	border-radius: var( --sv-radius-lg );
	box-shadow: var( --sv-shadow );
}

.sv-dates__hero .sv-card__media--photo,
.sv-dates__hero .sv-card__media--ph { height: 200px; }

.sv-dates__caption {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	padding: .875rem 1.125rem 1.125rem;
	background: var( --sv-surface );
}

.sv-dates__caption strong {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--lg );
	color: var( --sv-ink );
}

.sv-dates__caption span { font-size: var( --wp--preset--font-size--sm ); color: var( --sv-muted ); }

.sv-dates__list,
.wp-site-blocks .sv-dates__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 116px, 1fr ) );
	gap: .625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-date,
.wp-site-blocks .sv-date {
	display: flex;
	flex-direction: column;
	gap: .0625rem;
	margin: 0;
	padding: .75rem .875rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	background: var( --sv-surface );
	text-align: left;
}

.sv-date__dow { font-size: var( --wp--preset--font-size--xs ); color: var( --sv-muted ); text-transform: uppercase; letter-spacing: .06em; }
.sv-date__day { font-family: var( --sv-font-display ); font-weight: 700; color: var( --sv-ink ); }

.sv-date__price {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--lg );
	font-weight: 800;
	color: var( --sv-ink );
	margin-block-start: .25rem;
}

.sv-date__note { font-size: var( --wp--preset--font-size--xs ); color: var( --sv-muted ); }

.sv-date.is-cheapest,
.wp-site-blocks .sv-date.is-cheapest {
	border-color: var( --sv-accent );
	box-shadow: inset 0 0 0 1px var( --sv-accent );
}

.sv-date.is-cheapest .sv-date__price { color: var( --sv-accent-dark ); }

.sv-date.is-searched,
.wp-site-blocks .sv-date.is-searched { background: var( --sv-offwhite ); }

@media ( max-width: 899.98px ) {
	.sv-dates, .wp-site-blocks .sv-dates { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---------- 23. Accounts ------------------------------------------------ */

.sv-auth,
.wp-site-blocks .sv-auth {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.5rem;
	align-items: start;
}

.sv-auth__panel,
.wp-site-blocks .sv-auth__panel {
	padding: 1.75rem 1.5rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
}

.sv-auth__panel--accent,
.wp-site-blocks .sv-auth__panel--accent { border-color: var( --sv-accent ); }

.sv-sec .sv-auth__title,
.wp-site-blocks .sv-sec .sv-auth__title {
	margin: 0 0 .375rem;
	font-size: var( --wp--preset--font-size--xxl );
}

.sv-sec .sv-auth__lede,
.wp-site-blocks .sv-sec .sv-auth__lede {
	margin: 0 0 1.25rem;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
}

.sv-auth .sv-form,
.wp-site-blocks .sv-auth .sv-form {
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
}

.sv-auth__check {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
	font-weight: 500;
}

.sv-auth__check input { width: auto; min-height: 0; }

.sv-account,
.wp-site-blocks .sv-account { max-width: 40rem; }

.sv-account__head,
.wp-site-blocks .sv-account__head { margin-block-end: 1.5rem; }

.sv-sec .sv-account__head h2 { margin: 0 0 .25rem; font-size: var( --wp--preset--font-size--xxl ); }
.sv-sec .sv-account__head p { margin: 0; color: var( --sv-muted ); }

.sv-account__card,
.wp-site-blocks .sv-account__card {
	padding: 1.75rem 1.5rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
}

.sv-sec .sv-account__plan,
.wp-site-blocks .sv-sec .sv-account__plan {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 .375rem;
}

.sv-account__plan strong {
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xxl );
	font-weight: 800;
	color: var( --sv-ink );
}

.sv-account__plan span { color: var( --sv-muted ); font-size: var( --wp--preset--font-size--sm ); }

.sv-sec .sv-account__status,
.wp-site-blocks .sv-sec .sv-account__status { margin: 0; font-weight: 600; color: var( --sv-muted ); }

.sv-account__status.is-active { color: var( --sv-teal ); }

.sv-sec .sv-account__hint,
.wp-site-blocks .sv-sec .sv-account__hint {
	margin: .5rem 0 0;
	font-size: var( --wp--preset--font-size--sm );
}

@media ( max-width: 767.98px ) {
	.sv-auth, .wp-site-blocks .sv-auth { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---------- 24. Travel assistant ---------------------------------------- */

.sv-chat,
.wp-site-blocks .sv-chat {
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
	overflow: hidden;
}

.sv-chat--locked,
.wp-site-blocks .sv-chat--locked { padding: 2rem 1.75rem; text-align: left; }

.sv-sec .sv-chat--locked h3 { margin: 0 0 .5rem; font-size: var( --wp--preset--font-size--xxl ); }
.sv-sec .sv-chat--locked p { margin: 0; max-width: 46ch; }

.sv-chat__thread,
.wp-site-blocks .sv-chat__thread {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 34rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem;
}

.sv-chat__msg,
.wp-site-blocks .sv-chat__msg { max-width: 100%; }

.sv-sec .sv-chat__msg p,
.wp-site-blocks .sv-sec .sv-chat__msg p { margin: 0; }

.sv-chat__msg--user,
.wp-site-blocks .sv-chat__msg--user {
	align-self: flex-end;
	max-width: 32rem;
	padding: .75rem 1rem;
	border-radius: var( --sv-radius-lg ) var( --sv-radius-lg ) var( --sv-radius ) var( --sv-radius-lg );
	background: var( --sv-accent );
}

.sv-sec .sv-chat__msg--user p,
.wp-site-blocks .sv-sec .sv-chat__msg--user p { color: var( --sv-on-accent ); font-weight: 600; }

.sv-chat__msg--bot,
.wp-site-blocks .sv-chat__msg--bot { align-self: stretch; }

.sv-sec .sv-chat__msg--bot > p,
.wp-site-blocks .sv-sec .sv-chat__msg--bot > p {
	display: inline-block;
	max-width: 44rem;
	padding: .75rem 1rem;
	border-radius: var( --sv-radius-lg ) var( --sv-radius-lg ) var( --sv-radius-lg ) var( --sv-radius );
	background: var( --sv-offwhite );
	color: var( --sv-ink );
}

/* Cards inside a reply sit tighter than a full page grid. */
.sv-grid--chat,
.wp-site-blocks .sv-grid--chat {
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
	gap: 1rem;
	margin-block-start: 1rem;
}

.sv-card--link,
.wp-site-blocks .sv-card--link { text-decoration: none; color: inherit; display: flex; }

.sv-card--link .sv-card__media--photo,
.sv-card--link .sv-card__media--ph { height: 120px; }

.sv-card--link .sv-card__link { color: var( --sv-accent-dark ); font-weight: 700; }

.sv-chat__form,
.wp-site-blocks .sv-chat__form {
	display: flex;
	gap: .625rem;
	padding: 1rem 1.5rem;
	border-block-start: 1px solid var( --sv-border );
	background: var( --sv-surface );
}

.sv-chat__form input[type="text"] {
	flex: 1;
	min-height: var( --sv-tap );
	padding: .625rem .875rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	font: inherit;
	color: var( --sv-ink );
	background: var( --sv-surface );
}

.sv-chat__form button { flex: 0 0 auto; }
.sv-chat__form input:disabled { opacity: .6; }

.sv-sec .sv-chat__note,
.wp-site-blocks .sv-sec .sv-chat__note {
	margin: 0;
	padding: 0 1.5rem 1.25rem;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --sv-muted );
}

/* Typing indicator */
.sv-chat__typing { display: inline-flex; gap: .3rem; align-items: center; }

.sv-chat__typing span {
	width: .45rem;
	height: .45rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-muted );
	animation: sv-typing 1.2s infinite ease-in-out;
}

.sv-chat__typing span:nth-child( 2 ) { animation-delay: .15s; }
.sv-chat__typing span:nth-child( 3 ) { animation-delay: .3s; }

@keyframes sv-typing {
	0%, 60%, 100% { opacity: .25; transform: translateY( 0 ); }
	30%           { opacity: 1;   transform: translateY( -2px ); }
}

/* On /assistant/ the chat is the entire page, so the panel takes the
   viewport minus the header, the admin bar and its own section padding.
   Header, chat, footer — nothing else competing for the fold. */

.sv-sec--chat,
.wp-site-blocks .sv-sec--chat { padding-block: clamp( 1.25rem, 3vw, 2rem ); }

.sv-sec--chat .sv-chat--app,
.wp-site-blocks .sv-sec--chat .sv-chat--app {
	height: calc(
		100dvh - var( --sv-header-h ) - var( --sv-adminbar )
		- ( 2 * clamp( 1.25rem, 3vw, 2rem ) )
	);
	max-height: 900px;
}

/* ---------- 23b. Payment banner ----------------------------------------
   Shown once, on return from the provider. A banner rather than a floating
   toast: it reports the outcome of something the customer just paid for, so
   it must not time out or be dismissible by accident. */

.sv-toast,
.wp-site-blocks .sv-toast {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow );
	animation: sv-toast-in .32s cubic-bezier( .22, 1, .36, 1 ) both;
}

@media ( prefers-reduced-motion: reduce ) {
	.sv-toast,
	.wp-site-blocks .sv-toast { animation: none; }
}

@keyframes sv-toast-in {
	from { opacity: 0; transform: translateY( -.5rem ); }
	to   { opacity: 1; transform: none; }
}

.sv-toast__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var( --sv-radius-pill );
}

.sv-toast__icon svg { width: 1.5rem; height: 1.5rem; }

.sv-toast__body { flex: 1 1 auto; min-width: 0; }

/* Two classes each, because `.sv-sec p` would otherwise set the margins. */
.sv-sec .sv-toast__title,
.wp-site-blocks .sv-sec .sv-toast__title {
	margin: 0;
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--md );
	font-weight: 700;
	color: var( --sv-ink );
}

.sv-sec .sv-toast__text,
.wp-site-blocks .sv-sec .sv-toast__text {
	margin: .125rem 0 0;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --sv-muted );
}

.sv-sec .sv-toast__cta,
.wp-site-blocks .sv-sec .sv-toast__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var( --sv-tap );
	padding: .5rem 1.125rem;
	border-radius: var( --sv-radius-btn );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	text-decoration: none;
}

.sv-sec .sv-toast__cta:hover,
.wp-site-blocks .sv-sec .sv-toast__cta:hover { background: var( --sv-accent-dark ); color: var( --sv-on-accent ); }

/* Success — green, because accent pink is the buy colour and would read as
   another call to action rather than as confirmation. */
.sv-toast--ok,
.wp-site-blocks .sv-toast--ok { border-color: #1f8a5b; background: #f2fbf6; }
.sv-toast--ok .sv-toast__icon { background: #d8f3e5; color: #14664a; }

.sv-toast--bad,
.wp-site-blocks .sv-toast--bad { border-color: #b3261e; background: #fdf3f2; }
.sv-toast--bad .sv-toast__icon { background: #fadedb; color: #8c1d18; }

.sv-toast--wait,
.wp-site-blocks .sv-toast--wait { border-color: var( --sv-border ); background: var( --sv-offwhite, #f5f4f6 ); }
.sv-toast--wait .sv-toast__icon { background: var( --sv-surface ); color: var( --sv-muted ); }

@media ( max-width: 38rem ) {
	.sv-toast,
	.wp-site-blocks .sv-toast { flex-wrap: wrap; }

	.sv-sec .sv-toast__cta,
	.wp-site-blocks .sv-sec .sv-toast__cta { width: 100%; }
}

/* ---------- 24c. The assistant, locked ---------------------------------
   Signed in but not paying. The real surface is shown greyed out under a
   lock, because seeing the thing you are buying argues for it better than a
   paragraph describing it does.

   Everything under the lock is also disabled in the markup and marked
   aria-hidden, so this is a real gate rather than a visual one — and the
   REST endpoint refuses the same user regardless of any of this. */

.sv-chat--preview,
.wp-site-blocks .sv-chat--preview { position: relative; }

.sv-chat--preview .sv-chat__scroll,
.sv-chat--preview .sv-chat__dock {
	filter: grayscale( 1 ) blur( 1.5px );
	opacity: .5;
	pointer-events: none;
	user-select: none;
}

.sv-chat__lock,
.wp-site-blocks .sv-chat__lock {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	/* A wash rather than a solid panel, so the shape of the thing behind it
	   still reads. */
	background: linear-gradient( to bottom, rgba( 255, 255, 255, .55 ), rgba( 255, 255, 255, .88 ) );
}

.sv-chat__lock-card,
.wp-site-blocks .sv-chat__lock-card {
	max-width: 32rem;
	padding: 1.75rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
	box-shadow: var( --sv-shadow-lg );
	text-align: center;
}

.sv-chat__lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: .875rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent-soft );
	color: var( --sv-accent );
}

.sv-chat__lock-icon svg { width: 1.5rem; height: 1.5rem; }

/* Two classes each: `.sv-sec h2` and `.sv-sec p` would otherwise win. */
.sv-sec .sv-chat__lock-card h2,
.wp-site-blocks .sv-sec .sv-chat__lock-card h2 {
	margin: 0 0 .5rem;
	font-size: var( --wp--preset--font-size--xxl );
	letter-spacing: -0.015em;
}

.sv-sec .sv-chat__lock-card p,
.wp-site-blocks .sv-sec .sv-chat__lock-card p {
	margin: 0 auto;
	max-width: 42ch;
	color: var( --sv-muted );
}

.sv-chat__lock-card .sv-actions,
.wp-site-blocks .sv-chat__lock-card .sv-actions { justify-content: center; }

@media ( max-width: 38rem ) {
	.sv-chat__lock-card,
	.wp-site-blocks .sv-chat__lock-card { padding: 1.25rem; }
}

/* ---------- 24b. Travel assistant — chat surface ------------------------
   The panel is an app, not an article: a fixed-height column whose middle
   scrolls and whose composer stays put. min-height:0 on the scroller is the
   load-bearing line — a flex child defaults to min-height:auto and refuses
   to shrink below its content, so without it the panel grows forever and
   nothing ever scrolls. */

.sv-chat--app,
.wp-site-blocks .sv-chat--app {
	display: flex;
	flex-direction: column;
	height: min( 74dvh, 760px );
	min-height: 26rem;
}

.sv-chat__scroll,
.wp-site-blocks .sv-chat__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem;
}

.sv-chat--app .sv-chat__thread,
.wp-site-blocks .sv-chat--app .sv-chat__thread {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0;
}

.sv-chat--app .sv-chat__thread:empty { display: none; }

/* --- Message rows --- */

.sv-chat__row,
.wp-site-blocks .sv-chat__row {
	display: flex;
	gap: .75rem;
	max-width: 46rem;
}

.sv-chat__row--user,
.wp-site-blocks .sv-chat__row--user { margin-inline-start: auto; justify-content: flex-end; }

.sv-chat__row--bot,
.wp-site-blocks .sv-chat__row--bot { margin-inline-end: auto; }

.sv-chat__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 800;
}

.sv-chat__bubble { min-width: 0; padding: .75rem 1rem; }

.sv-chat__row--user .sv-chat__bubble {
	border-radius: 1.15rem 1.15rem .35rem 1.15rem;
	background: var( --sv-accent );
	color: var( --sv-on-accent );
}

.sv-chat__row--bot .sv-chat__bubble {
	border: 1px solid var( --sv-border );
	border-radius: 1.15rem 1.15rem 1.15rem .35rem;
	background: var( --sv-offwhite, #f5f4f6 );
}

/* Two classes, because `.sv-sec p` is class-plus-element and would otherwise
   put a bottom margin on every line in a bubble. */
.sv-sec .sv-chat__bubble p,
.wp-site-blocks .sv-sec .sv-chat__bubble p { margin: 0; }

.sv-sec .sv-chat__bubble p + p,
.wp-site-blocks .sv-sec .sv-chat__bubble p + p { margin-block-start: .5rem; }

.sv-sec .sv-chat__row--user .sv-chat__bubble p,
.wp-site-blocks .sv-sec .sv-chat__row--user .sv-chat__bubble p { color: var( --sv-on-accent ); }

/* --- Empty state --- */

.sv-chat__empty,
.wp-site-blocks .sv-chat__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 1.5rem .5rem;
	text-align: center;
}

.sv-chat__empty[hidden] { display: none; }

.sv-chat__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: 1rem;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-grad-hero );
	color: var( --sv-on-dark );
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--lg );
	font-weight: 800;
}

.sv-sec .sv-chat__greet,
.wp-site-blocks .sv-sec .sv-chat__greet {
	margin: 0 0 .5rem;
	font-size: var( --wp--preset--font-size--xxl );
	letter-spacing: -0.015em;
}

.sv-sec .sv-chat__sub,
.wp-site-blocks .sv-sec .sv-chat__sub {
	margin: 0;
	max-width: 44ch;
	color: var( --sv-muted );
}

.sv-chat__suggest,
.wp-site-blocks .sv-chat__suggest {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: .75rem;
	width: 100%;
	max-width: 40rem;
	margin-block-start: 1.75rem;
}

.sv-chat__chip {
	box-sizing: border-box;
	width: 100%;
	min-height: var( --sv-tap );
	padding: .75rem 1rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius );
	background: var( --sv-surface );
	color: var( --sv-ink );
	font: inherit;
	font-size: var( --wp--preset--font-size--sm );
	text-align: start;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.sv-chat__chip:hover {
	border-color: var( --sv-accent );
	background: var( --sv-accent-soft );
}

@media ( max-width: 38rem ) {
	.sv-chat__suggest,
	.wp-site-blocks .sv-chat__suggest { grid-template-columns: minmax( 0, 1fr ); }
}

/* --- Composer --- */

.sv-chat__dock,
.wp-site-blocks .sv-chat__dock {
	flex: 0 0 auto;
	padding: .875rem 1.5rem 1rem;
	border-block-start: 1px solid var( --sv-border );
	background: var( --sv-surface );
}

.sv-chat__composer,
.wp-site-blocks .sv-chat__composer {
	display: flex;
	align-items: flex-end;
	gap: .5rem;
	padding: .3125rem .3125rem .3125rem 1rem;
	border: 1px solid var( --sv-border );
	border-radius: 1.5rem;
	background: var( --sv-surface );
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sv-chat__composer:focus-within {
	border-color: var( --sv-accent );
	box-shadow: 0 0 0 3px var( --sv-accent-soft );
}

.sv-chat__composer textarea {
	flex: 1 1 auto;
	min-width: 0;
	/* autogrow() assigns scrollHeight, which already includes the padding.
	   Without border-box the padding is then added again and the composer
	   sits a line taller than its content. */
	box-sizing: border-box;
	max-height: 200px;
	padding: .625rem 0;
	border: 0;
	background: transparent;
	color: var( --sv-ink );
	font: inherit;
	line-height: 1.5;
	resize: none;
	outline: none;
}

.sv-chat__composer.is-busy { opacity: .7; }

.sv-chat__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var( --sv-radius-pill );
	background: var( --sv-accent );
	color: var( --sv-on-accent );
	cursor: pointer;
}

.sv-chat__send svg { width: 1.15rem; height: 1.15rem; }
.sv-chat__send:hover { background: var( --sv-accent-dark ); }
.sv-chat__send:disabled { opacity: .5; cursor: default; }

/* The note moved inside the dock, so it drops the panel-edge padding the
   older layout gave it. Three classes to beat `.sv-sec .sv-chat__note`. */
.sv-sec .sv-chat__dock .sv-chat__note,
.wp-site-blocks .sv-sec .sv-chat__dock .sv-chat__note {
	padding: .75rem .25rem 0;
	text-align: center;
}


@media ( prefers-reduced-motion: reduce ) {
	.sv-chat__typing span { animation: none; opacity: .5; }
}

/* ---------- 25. Kavro landing and auth ---------------------------------- */

/* Explicit column counts, never auto-fill: at the wider shell auto-fill
   resolved to five tracks and orphaned the last card. */
.sv-grid--3,
.wp-site-blocks .sv-grid--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

@media ( max-width: 60rem ) {
	.sv-grid--3,
	.wp-site-blocks .sv-grid--3 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 38rem ) {
	.sv-grid--3,
	.wp-site-blocks .sv-grid--3 { grid-template-columns: minmax( 0, 1fr ); }
}

/* Two-up variant, for cards whose text is long enough that a quarter of the
   shell reads as a column of single words. Same step-down as --3. */
.sv-grid--2,
.wp-site-blocks .sv-grid--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

@media ( max-width: 38rem ) {
	.sv-grid--2,
	.wp-site-blocks .sv-grid--2 { grid-template-columns: minmax( 0, 1fr ); }
}

/* .sv-features had the auto-fill bug the comment above describes: at the
   1280px shell `auto-fit minmax( 220px, 1fr )` resolved to four tracks, so a
   six-item feature list rendered 4 + 2 with an orphan row. Every caller
   passes three or six items, both of which divide by three. */
.sv-features,
.wp-site-blocks .sv-features { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

@media ( max-width: 60rem ) {
	.sv-features,
	.wp-site-blocks .sv-features { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 38rem ) {
	.sv-features,
	.wp-site-blocks .sv-features { grid-template-columns: minmax( 0, 1fr ); }
}

/* Cards here hold text, not media, so they carry their own padding. */
.sv-card--pad,
.wp-site-blocks .sv-card--pad { padding: 1.5rem; }

.sv-card--pad > *,
.wp-site-blocks .sv-card--pad > * { margin-block-start: 0; } /* trap 4 */

/* Class + element, or `.sv-sec h3` and `.sv-sec p` win (trap 1). */
.sv-sec .sv-card--pad h3 { margin-block: 0 .5rem; font-size: var( --wp--preset--font-size--lg ); }
.sv-sec .sv-card--pad p  { margin: 0; font-size: var( --wp--preset--font-size--sm ); color: var( --sv-muted ); }

/* Hero call-to-action row */
.sv-hero__cta,
.wp-site-blocks .sv-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block: 1.75rem .75rem;
}

.sv-sec p.sv-hero__note { margin: 0; font-size: var( --wp--preset--font-size--sm ); color: var( --sv-muted ); }

/* The "what Kavro is not" list: no bullets, generous leading. */
.sv-plain,
.wp-site-blocks .sv-plain { margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: 68ch; }

/* Core ships :root :where(.wp-block-list li){margin-top:.5rem} — reset it and
   set our own rhythm rather than stacking the two. */
.sv-sec .sv-plain li {
	margin-block-start: 0;
	padding-block: .625rem;
	border-block-start: 1px solid var( --sv-border );
	line-height: 1.55;
}

.sv-sec .sv-plain li:first-child { border-block-start: 0; padding-block-start: 0; }

/* Closing band sits on navy, so the ghost button needs the light treatment. */
.sv-cta__inner,
.wp-site-blocks .sv-cta__inner { text-align: center; }

.sv-cta__inner > *,
.wp-site-blocks .sv-cta__inner > * { margin-block-start: 0; }

/* Spacing applies to any CTA lede… */
.sv-cta .sv-lede,
.wp-site-blocks .sv-cta .sv-lede { margin-block: .75rem 1.75rem; max-width: 52ch; }

/* …but the auto side-margins only belong to the centred variant, which marks
   itself with sv-cta__inner. On the left-aligned band they pushed the lede
   into the middle while the heading stayed put. */
.sv-cta__inner .sv-lede,
.wp-site-blocks .sv-cta__inner .sv-lede { margin-inline: auto; }

.sv-band--navy .sv-btn--ghost,
.wp-site-blocks .sv-band--navy .sv-btn--ghost {
	border-color: var( --sv-on-dark );
	color: var( --sv-on-dark );
}

/* Single-column auth pages ------------------------------------------------ */

.sv-auth--single,
.wp-site-blocks .sv-auth--single {
	display: block;
	max-width: 34rem;
	margin-inline: auto;
}

/* A single-column auth card has the shell to itself, so it can afford more
   padding than the two-up /account/ view it shares a class with. */
.sv-auth--single .sv-auth__panel,
.wp-site-blocks .sv-auth--single .sv-auth__panel { padding: 2.25rem 2.25rem 2rem; }

@media ( max-width: 38rem ) {
	.sv-auth--single .sv-auth__panel,
	.wp-site-blocks .sv-auth--single .sv-auth__panel { padding: 1.75rem 1.25rem; }
}

.sv-auth__switch,
.wp-site-blocks .sv-auth__switch {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var( --sv-border );
	font-size: var( --wp--preset--font-size--sm );
	text-align: center;
}

/* Header auth links ------------------------------------------------------- */

.sv-header__link,
.wp-site-blocks .sv-header__link {
	display: inline-flex;
	align-items: center;
	/* 44px minimum touch target, held everywhere. */
	min-height: 2.75rem;
	padding-inline: .5rem;
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sv-header__link--muted,
.wp-site-blocks .sv-header__link--muted { font-weight: 500; opacity: .75; }

/* The header sits on --sv-header-bg, so these must take the on-dark colour.
   :link and :visited score in the class column, so a bare .sv-header__link
   loses to any `a:link` rule — match the nav and name every state. */
.sv-header .sv-header__link,
.sv-header .sv-header__link:link,
.sv-header .sv-header__link:visited,
.sv-header .sv-header__link:hover,
.sv-header .sv-header__link:focus,
.wp-site-blocks .sv-header .sv-header__link,
.wp-site-blocks .sv-header .sv-header__link:link,
.wp-site-blocks .sv-header .sv-header__link:visited { color: var( --sv-on-dark ); }

.sv-header .sv-header__link:hover,
.sv-header .sv-header__link:focus-visible { text-decoration: underline; }

/* ---------- 26. On-site card step (/pay/) ------------------------------- */

.sv-pay,
.wp-site-blocks .sv-pay {
	display: grid;
	grid-template-columns: minmax( 0, 20rem ) minmax( 0, 1fr );
	gap: 2.5rem;
	align-items: start;
	max-width: var( --sv-shell );
	margin-inline: auto;
}

@media ( max-width: 52rem ) {
	.sv-pay,
	.wp-site-blocks .sv-pay { grid-template-columns: minmax( 0, 1fr ); gap: 1.75rem; }
}

.sv-pay > *,
.wp-site-blocks .sv-pay > * { margin-block-start: 0; } /* trap 4 */

.sv-pay__summary,
.wp-site-blocks .sv-pay__summary {
	padding: 1.5rem;
	border: 1px solid var( --sv-border );
	border-radius: var( --sv-radius-lg );
	background: var( --sv-surface );
}

.sv-pay__summary > *,
.wp-site-blocks .sv-pay__summary > * { margin-block-start: 0; }

/* Class + element, or .sv-sec h1/p win (trap 1). */
.sv-sec .sv-pay__title,
.sv-pay__title { margin-block: 0 .75rem; font-size: var( --wp--preset--font-size--xl ); }

.sv-sec p.sv-pay__plan,
.sv-pay__plan { margin: 0; font-size: var( --wp--preset--font-size--sm ); color: var( --sv-muted ); }

.sv-sec p.sv-pay__amount,
.sv-pay__amount {
	margin-block: .5rem .75rem;
	font-family: var( --sv-font-display );
	font-size: var( --wp--preset--font-size--xxl );
	font-weight: 800;
	line-height: 1.1;
}

.sv-sec p.sv-pay__note,
.sv-pay__note { margin: 0; font-size: var( --wp--preset--font-size--xs ); color: var( --sv-muted ); line-height: 1.5; }

/* The card fields are the provider's iframes; only the frame around them is
   ours to style. Reserve height so the layout does not jump when they land. */
.rpayz-form,
.wp-site-blocks .rpayz-form { max-width: 34rem; }

#holiday-rpayz-element { min-height: 15rem; margin-block-end: 1.25rem; }

.rpayz-form__error:empty { display: none; }

.rpayz-form__error {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-radius: var( --sv-radius-md, 10px );
	background: var( --sv-bad-bg, #fdeceb );
	color: var( --sv-bad-fg, #7a1b14 );
	font-size: var( --wp--preset--font-size--sm );
}

.rpayz-form button,
.wp-site-blocks .rpayz-form button { width: 100%; min-height: 2.75rem; }

.rpayz-form button[disabled] { cursor: progress; opacity: .6; }