/**
 * Cartavera — global components.
 *
 * Tokens come from theme.json (var(--wp--preset--*) and var(--wp--custom--*)).
 * Breakpoints: 600px (phone), 782px (tablet, matches core), 1100px (desktop).
 */

/* ---------- Base ---------- */

html {
	scroll-padding-top: 16px;

	/* "dark" in the Midnight variation, so form controls and scrollbars match. */
	color-scheme: var(--wp--custom--color-scheme, light);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

/*
 * Focus ring colour. Dark regions (header, footer) set --cv-focus-color to
 * their text colour so the ring keeps 3:1 against the background around it.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cv-focus-color, var(--wp--preset--color--hyperlink));
	outline-offset: 2px;
}

.cv-header,
.cv-footer {
	--cv-focus-color: var(--wp--preset--color--on-header);
}

/* Light pop-ups inside the header go back to the link colour. */
.cv-header .wp-block-navigation__submenu-container,
.cv-header .cv-account__panel,
.cv-header .cv-search__panel {
	--cv-focus-color: var(--wp--preset--color--hyperlink);
}

/*
 * Links inside running text are underlined, so they are not told apart by
 * colour alone (WCAG 1.4.1). Stand-alone link paragraphs in the theme's own
 * patterns (cv-* classes) and button-styled links keep their design.
 */
:where(p:not([class*="cv-"]), .wp-block-post-content li, .woocommerce-Tabs-panel li, .woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs) > a:where(:not(.button, .wp-element-button, .wp-block-button__link)) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	overflow-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	height: auto;
	inset-inline-start: 8px;
	padding: 12px 20px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

::selection {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {

	.cv-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 782px) {

	.cv-hide-desktop {
		display: none !important;
	}
}

.cv-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hyperlink-hover);
}

.cv-surface {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--60);
}

/* ---------- Header ---------- */

.cv-header {
	position: relative;
	z-index: 100;

	/* Store Search: a white bar needs no outline on the dark header (a dark
	 * variation sets custom.header.searchBorder), and the accent focus ring has
	 * 3:1 against every variation's header. */
	--cv-search-border: var(--wp--custom--header--search-border, transparent);
	--cv-search-focus: var(--wp--preset--color--accent);
}

.cv-header__main {
	min-height: var(--wp--custom--header--height);
}

.cv-header__brand {
	flex: 0 0 auto;
	min-width: 0;
}

.cv-header__logo img {
	display: block;
	max-height: 44px;
	width: auto;
}

.cv-header__title {
	margin: 0;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cv-header--centered .cv-header__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.cv-header__brand:has(.wp-block-site-logo img) .cv-header__title {
	display: none;
}

.cv-header__title a {
	display: inline-block;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--sm);
	text-decoration: none;
}

.cv-header .cv-header__search {
	flex: 1 1 320px;
	max-width: none;
	margin: 0;
}

.cv-header__tools {
	flex: 0 0 auto;
}

/* Mini cart in the header. */
.cv-header .wc-block-mini-cart {
	display: flex;
}

.cv-header .wc-block-mini-cart__button {
	color: var(--wp--preset--color--on-header);
	padding: 6px 8px;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--sm);
}

.cv-header--light .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
}

.cv-header .wc-block-mini-cart__button:hover:not([disabled]) {
	opacity: 1;
	border-color: currentcolor;
}

.cv-header .wc-block-mini-cart__icon {
	width: 30px;
	height: 30px;
}

.cv-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border-color: var(--wp--preset--color--header);
	font-weight: 800;
}

/* Navigation row. Positioned, so Mega Menu panels can span its width. */
.cv-header__nav {
	position: relative;
	min-height: 40px;
}

.cv-header__menu {
	flex: 1 1 auto;
	min-width: 0;
}

.cv-header .cv-header__menu .wp-block-navigation-item__content {
	display: inline-block;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--sm);
	white-space: nowrap;
	color: var(--wp--preset--color--on-header);
	text-decoration: none;
}

.cv-header .cv-header__menu .wp-block-navigation-item {
	color: var(--wp--preset--color--on-header);
}

.cv-header__menu .wp-block-navigation__submenu-container {
	min-width: 220px !important;
	padding: 8px 0;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--lg);
}

.cv-header .cv-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
}

.cv-header--light .cv-header__menu .wp-block-navigation-item,
.cv-header.cv-header--light .cv-header__menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.cv-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.cv-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--hyperlink-hover);
}

.cv-header__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	border-color: currentcolor;
}

.cv-header__promo {
	flex: 0 0 auto;
	margin: 0;
	margin-inline-start: auto;
	white-space: nowrap;
	font-weight: 700;
}

@media (min-width: 782px) {

	.cv-header__menu .wp-block-navigation__container {
		flex-wrap: wrap !important;
		row-gap: 0;
	}
}

@media (max-width: 1279px) {

	.cv-header__promo {
		display: none;
	}
}

/* Header text colour with an accent underline: accent text alone falls below
 * 4.5:1 on some variations' headers (Harbor). */
.cv-header__promo a {
	color: var(--wp--preset--color--on-header) !important;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.cv-header--checkout .cv-header__secure {
	margin: 0;
	color: var(--wp--preset--color--on-header);
	font-weight: 750;
}

@media (max-width: 781px) {

	.cv-header__main {
		row-gap: 8px !important;
		padding-top: 6px !important;
		padding-inline-start: var(--wp--preset--spacing--30) !important;
		padding-inline-end: var(--wp--preset--spacing--30) !important;
	}

	.cv-header__brand {
		flex: 1 1 auto;
	}

	.cv-header__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.cv-header .cv-header__search {
		order: 10;
		flex: 1 1 100%;
	}

	.cv-header__nav {
		padding-inline-start: var(--wp--preset--spacing--20) !important;
		padding-inline-end: 0 !important;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.cv-header__nav::-webkit-scrollbar {
		display: none;
	}

	/* Submenus would be clipped by the scrolling row; the drawer lists every category. */
	.cv-header__menu .wp-block-navigation__submenu-icon,
	.cv-header__menu .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.cv-header__menu .wp-block-navigation-item__content {
		padding: 8px 6px;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Mega Menu (Cartavera Blocks) in the navigation row: panels span the whole row. */
.cv-header .cv-header__mega {
	position: static;
	flex: 0 1 auto;
}

.cv-header--centered .cv-header__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.cv-header--light .cv-header__nav {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- Sticky compact header (block style on the header group) ---------- */

.wp-block-template-part:has(> .is-style-cv-sticky-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

@media (min-width: 601px) {

	.admin-bar .wp-block-template-part:has(> .is-style-cv-sticky-header) {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

/* Focused elements and anchor targets stop below the header (WCAG 2.4.11). */
html:has(.is-style-cv-sticky-header) {
	scroll-padding-top: calc(var(--cv-sticky-offset, 0px) + 8px);
}

.is-style-cv-sticky-header > .cv-header__nav {
	transition: opacity 150ms ease, visibility 150ms;
}

/*
 * Compact: the navigation row is hidden and the header behind it made
 * transparent, so the page shows through. The header keeps its height in the
 * layout, so nothing moves.
 */
.is-style-cv-sticky-header.is-cv-compact {
	background-color: transparent !important;
	pointer-events: none;
}

.is-style-cv-sticky-header.is-cv-compact > .cv-header__main {
	background-color: var(--wp--preset--color--header);
	box-shadow: var(--wp--preset--shadow--md);
	pointer-events: auto;
}

.is-style-cv-sticky-header.cv-header--light.is-cv-compact > .cv-header__main {
	background-color: var(--wp--preset--color--base);
}

.is-style-cv-sticky-header.is-cv-compact > .cv-header__nav {
	visibility: hidden;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

	.is-style-cv-sticky-header > .cv-header__nav {
		transition: none;
	}
}

/* ---------- Sections and cards ---------- */

.cv-section,
.is-style-cv-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

.cv-section > * + *,
.is-style-cv-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cv-section-head {
	margin-bottom: var(--wp--preset--spacing--30);
	gap: 4px 16px !important;
	align-items: baseline !important;
}

.is-style-cv-section-title,
.cv-section-head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
}

.cv-section-head__link {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.is-style-cv-card-grid {
	gap: var(--wp--preset--spacing--40) !important;
	flex-wrap: wrap !important;
}

.is-style-cv-card-grid > .wp-block-column {
	flex: 1 1 calc(25% - var(--wp--preset--spacing--40)) !important;
	min-width: 0;
}

.is-style-cv-card-grid > .wp-block-column:not(:has(*)) {
	display: none;
}

.cv-showcase__col > .cv-section {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cv-showcase__col .cv-card-link {
	margin: auto 0 0;
	padding-top: 12px;
	font-weight: 600;
}

@media (max-width: 1100px) {

	.is-style-cv-card-grid > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
	}
}

@media (max-width: 600px) {

	.is-style-cv-card-grid {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 4px;
	}

	.is-style-cv-card-grid > .wp-block-column {
		flex: 0 0 82% !important;
		scroll-snap-align: start;
	}
}

.is-style-cv-strip {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.is-style-cv-strip h3 {
	margin: 0 0 4px;
}

.is-style-cv-strip p {
	margin: 0;
}

.is-style-cv-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-cv-checklist li {
	position: relative;
	padding-inline-start: 1.6em;
}

.is-style-cv-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2em;
	top: 0.35em;
	width: 0.45em;
	height: 0.8em;
	border: solid var(--wp--preset--color--success);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- Hero slider ---------- */

.is-style-cv-slider {
	display: flex !important;
	gap: 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.is-style-cv-slider::-webkit-scrollbar {
	display: none;
}

.is-style-cv-slider > * {
	flex: 0 0 100%;
	margin: 0 !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.cv-hero .wp-block-cover {
	min-height: clamp(300px, 36vw, 500px) !important;
}

.cv-hero .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: var(--wp--preset--gradient--hero-fade);
	pointer-events: none;

	/* Over the image (z-index 0, earlier in the DOM), under the content, which
	 * core puts at z-index 1 with a selector the theme should not outbid. */
	z-index: 0;
}

.cv-hero h1,
.cv-hero h2 {
	margin: 0.25em 0 0.3em;
	max-width: 15ch;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.cv-carousel-wrap {
	position: relative;
}

.cv-home > .cv-hero,
.cv-home > .cv-carousel-wrap:first-child {
	margin-block-start: 0;
}

.cv-overlap {
	position: relative;
	z-index: 2;
}

@media (min-width: 782px) {

	.cv-hero .wp-block-cover {
		align-items: flex-start;
		padding-top: clamp(2rem, 5vw, 4rem) !important;
	}

	.cv-home > .cv-overlap {
		margin-top: clamp(-150px, -8.5vw, -80px) !important;
	}
}

/* ---------- Carousel controls ---------- */

.cv-carousel {
	position: relative;
}

.cv-carousel__btn {
	position: absolute;
	z-index: 5;
	top: 50%;
	display: none;
	place-items: center;
	width: 44px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--sm);
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--md);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity var(--wp--custom--transition), background var(--wp--custom--transition);
}

.cv-carousel__btn:hover {
	background: var(--wp--preset--color--base);
}

.cv-carousel__btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

.cv-carousel__btn--prev {
	inset-inline-start: 4px;
}

.cv-carousel__btn--next {
	inset-inline-end: 4px;
}

.cv-carousel-wrap > .cv-carousel__btn {
	top: clamp(140px, 17vw, 210px);
	height: 96px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	border-color: transparent;
	box-shadow: none;
}

.cv-carousel.has-overflow > .cv-carousel__btn {
	display: grid;
}

.cv-carousel-wrap > .cv-carousel__btn--prev {
	inset-inline-start: 12px;
}

.cv-carousel-wrap > .cv-carousel__btn--next {
	inset-inline-end: 12px;
}

.cv-carousel__dots {
	position: absolute;
	z-index: 5;
	left: 50%; /* stylelint-disable-line property-disallowed-list -- Centred with translateX(-50%), the same in both directions. */
	top: clamp(240px, 30vw, 410px);
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.cv-carousel__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}

/* Inactive dots are rings and the current one is filled, so the state does
 * not rely on a pale tint (non-text contrast, WCAG 1.4.11). */
.cv-carousel__dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast);
}

.cv-carousel__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--contrast);
	inset: 6px;
}

@media (min-width: 782px) {

	.cv-carousel__dots {
		display: none;
	}
}

@media (max-width: 781px) {

	.cv-carousel__dots {
		top: auto;
		bottom: 4px;
	}

	.cv-hero .wp-block-cover__image-background {
		object-position: 80% 50%;
		opacity: 0.4;
	}

	.cv-hero .wp-block-cover {
		padding-inline-start: var(--wp--preset--spacing--50) !important;
		padding-inline-end: var(--wp--preset--spacing--50) !important;
	}
}

@media (max-width: 781px) {

	.cv-carousel__btn {
		display: none !important;
	}
}

/* ---------- Promotions ---------- */

/* Dark variations dim light Cover images, so the light text over them keeps 4.5:1. */
.wp-block-cover.is-light .wp-block-cover__image-background {
	filter: var(--wp--custom--cover-image-filter, none);
}

/*
 * Theme banners (cv-promo) without an overlay of their own get a gradient on
 * the text side: the header colour behind white text, the surface colour
 * behind ink. Text stays readable over any image a merchant puts in, and an
 * overlay set in the editor (dim above 0) replaces it.
 */
.wp-block-cover.cv-promo > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background: linear-gradient(90deg, color-mix(in srgb, var(--cv-promo-scrim) 85%, transparent) 0%, color-mix(in srgb, var(--cv-promo-scrim) 60%, transparent) 45%, transparent 78%);
}

.rtl .wp-block-cover.cv-promo > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background: linear-gradient(270deg, color-mix(in srgb, var(--cv-promo-scrim) 85%, transparent) 0%, color-mix(in srgb, var(--cv-promo-scrim) 60%, transparent) 45%, transparent 78%);
}

.wp-block-cover.cv-promo.cv-promo--center > .wp-block-cover__background.has-background-dim.has-background-dim-0,
.rtl .wp-block-cover.cv-promo.cv-promo--center > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background: color-mix(in srgb, var(--cv-promo-scrim) 72%, transparent);
}

.wp-block-cover.cv-promo {
	--cv-promo-scrim: var(--wp--preset--color--header);

	/* Narrow banners (columns, phones) switch to an even scrim below. */
	container-type: inline-size;
}

.wp-block-cover.cv-promo.is-light {
	--cv-promo-scrim: var(--wp--preset--color--base);
}

@container (max-width: 620px) {

	/* In a narrow banner the text runs over most of the image: an even scrim. */
	.wp-block-cover.cv-promo > .wp-block-cover__background.has-background-dim.has-background-dim-0,
	.rtl .wp-block-cover.cv-promo > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
		background: color-mix(in srgb, var(--cv-promo-scrim) 72%, transparent);
	}
}

.cv-promo {
	overflow: hidden;
}

.cv-promo h2 {
	margin: 0.2em 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cv-showcase__col > .cv-section h2 {
	margin: 0 0 12px;
}

/* Eyebrows over Cover images sit on a solid label, so they keep 4.5:1 whatever
 * the image (or a merchant's replacement image) looks like behind them. */
.wp-block-cover .cv-eyebrow {
	display: inline-block;
	padding: 0.2em 0.65em;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--hyperlink-hover);
}

.cv-promo__link {
	margin: 0;
	font-weight: 700;
}

.cv-promo__link a {
	color: var(--wp--preset--color--contrast);
}

.cv-promo-duo {
	gap: var(--wp--preset--spacing--40) !important;
}

/* ---------- Footer ---------- */

.cv-footer.has-background {
	padding: 0;
}

.cv-footer :where(h1, h2, h3, h4, h5, h6),
.cv-footer a:where(:not(.wp-element-button)) {
	color: inherit;
}

.cv-footer__top {
	margin: 0;

	/* 88 %: white text keeps 4.5:1 on every variation's header-alt. */
	background: color-mix(in srgb, var(--wp--preset--color--header-alt) 88%, #fff 12%);
}

.cv-footer__top a {
	display: block;
	padding: 14px;
	font-weight: 600;
}

.cv-footer__heading {
	margin: 0 0 10px;
	font-weight: 750;
}

.cv-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.cv-footer__list li {
	margin: 0 0 8px;
}

.cv-footer__list a {
	opacity: 0.85;
}

.cv-footer__bottom p {
	margin: 0;
	opacity: 0.75;
}

.cv-footer__bottom .wp-block-site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.cv-footer--checkout p {
	margin: 0;
}

/* ---------- Header variants ---------- */

@media (max-width: 1099px) {

	.cv-show-wide {
		display: none !important;
	}
}

@media (min-width: 1100px) {

	.cv-hide-wide {
		display: none !important;
	}
}

/* Utility bar (Two-row header with utility bar). */
.cv-header__utility p {
	margin: 0;
}

.cv-header__utility-links {
	margin-inline-start: auto;
}

@media (max-width: 781px) {

	.cv-header__tagline {
		display: none;
	}
}

/* Light header (Centered header): ink on the surface colour, with the light-page
 * focus colours, so rings and field boundaries keep 3:1 on white. */
.cv-header--light {
	--cv-focus-color: var(--wp--preset--color--hyperlink);
	--cv-accent-focus: var(--wp--preset--color--hyperlink);
	--cv-search-border: var(--wp--custom--control--border);
	--cv-search-focus: var(--wp--preset--color--hyperlink);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cv-header--light .wc-block-mini-cart__badge {
	border-color: var(--wp--preset--color--base);
}

.cv-header--centered .cv-header__start {
	justify-self: start;
	width: 100%;
	max-width: 440px;
}

.cv-header--centered .cv-header__brand {
	justify-self: center;
}

.cv-header--centered .cv-header__tools {
	justify-self: end;
}

@media (max-width: 781px) {

	.cv-header--centered .cv-header__main {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: 8px;
	}

	.cv-header--centered .cv-header__start {
		display: contents;
	}

	.cv-header--centered .cv-header__brand {
		grid-column: 2;
		grid-row: 1;
	}

	.cv-header--centered .cv-header__tools {
		grid-column: 3;
		grid-row: 1;
	}

	.cv-header.cv-header--centered .cv-header__search {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.cv-header--centered .cv-header__title {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* Minimal header: categories inline, a compact search. */
.cv-header__inline-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.cv-header.cv-header--minimal .cv-header__search--compact {
	flex: 0 1 300px;
}

@media (max-width: 781px) {

	.cv-header.cv-header--minimal .cv-header__search--compact {
		flex: 1 1 100%;
	}
}

/* ---------- Footer variants ---------- */

.cv-footer--minimal p,
.cv-footer--light p,
.cv-footer__inline p {
	margin: 0;
}

.cv-footer--minimal .wp-block-site-title {
	margin: 0;
}

.cv-footer--light {
	--cv-focus-color: var(--wp--preset--color--hyperlink);
}

/* Buttons in the dark footer (newsletter): the ring takes the footer's text colour. */
.cv-footer .wp-element-button:focus-visible {
	outline-color: var(--cv-focus-color);
}

/* ---------- Section patterns ---------- */

.cv-hero--starter .wp-block-cover::after {
	content: none;
}

.cv-hero__note {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-weight: 700;
}

@media (max-width: 781px) {

	/* Phones fade hero images to 40 % (above); a dark hero fades into the
	 * header colour instead of the light page, so its white text keeps 4.5:1. */
	.cv-hero .wp-block-cover:not(.is-light) {
		background-color: var(--wp--preset--color--header);
	}
}

.cv-hero-split__image img,
.cv-spotlight__image img {
	width: 100%;
	border-radius: var(--wp--custom--radius--card);
}

.cv-spotlight__image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cv-hero-mosaic__stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.cv-hero-mosaic__stack > .wp-block-cover {
	flex: 1 1 auto;
	margin: 0;
}

.cv-promo-row > .wp-block-column > .wp-block-cover {
	height: 100%;
}

.cv-ribbon {
	--cv-focus-color: var(--wp--preset--color--on-accent);
}

.cv-ribbon p {
	margin: 0;
}

.cv-ribbon a {
	color: currentcolor;
	font-weight: 700;
}

.cv-pills__list {
	gap: var(--wp--preset--spacing--20);
}

.cv-pills__list .wp-block-button__link {
	padding: 0.45rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.cv-department-card {
	height: 100%;
	padding: 0 0 var(--wp--preset--spacing--40);
	overflow: hidden;
}

.cv-department-card > :not(.cv-department-card__image) {
	padding-inline: var(--wp--preset--spacing--40);
}

.cv-department-card .wp-block-heading {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.cv-department-card p {
	margin-block: 4px 0;
}

.cv-department-card__image {
	margin: 0;
}

/* Trust and store information. */
.cv-trust h3 {
	margin: 0 0 4px;
}

.cv-payments p {
	margin: 0;
}

.cv-payments__label {
	color: var(--wp--preset--color--muted);
}

.cv-payments__method {
	padding: 2px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base);
	font-weight: 600;
}

.cv-rating-summary p {
	margin: 0;
}

.cv-rating-summary__value {
	font-weight: 800;
	line-height: 1;
}

.cv-rating-summary__stars,
.cv-review__stars {
	color: var(--wp--preset--color--rating);
	letter-spacing: 0.08em;
}

.cv-review {
	height: 100%;
	box-sizing: border-box;
	margin: 0;
}

.cv-review p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cv-review cite {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.cv-store-info__links {
	padding-inline-start: 1.1em;
}

/* Newsletter (core blocks only). */
.cv-newsletter__text > * {
	margin-block: 0;
}

.cv-newsletter__text > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.cv-newsletter__actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cv-newsletter--banner .cv-newsletter__actions {
	justify-content: center;
}

.cv-newsletter__body.is-layout-flex .cv-newsletter__actions {
	margin-block-start: 0;
}

.cv-newsletter--banner {
	text-align: center;
}

.cv-newsletter__image img {
	width: 100%;
}

/* FAQ (core Details block). */
.cv-faq__item {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cv-faq__item summary {
	cursor: pointer;
	font-weight: 700;
}

.cv-faq__item[open] summary {
	margin-block-end: var(--wp--preset--spacing--20);
}

.cv-faq__item p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.cv-columns-text h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.cv-hero p:not(.cv-eyebrow) {
	max-width: 40ch;
	margin: 0 0 1.25rem;
}

@media (max-width: 781px) {

	.cv-footer__columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Pages, posts, blog ---------- */

.cv-page__surface,
.cv-article__body {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.cv-page__surface > .wp-block-post-title,
.cv-article__body > .wp-block-post-title {
	margin-top: 0;
}

.cv-post-card {
	height: 100%;
	box-sizing: border-box;
	padding: 0 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.cv-post-card > :not(.cv-post-card__image) {
	padding-inline: var(--wp--preset--spacing--40);
}

.cv-post-card .wp-block-post-title {
	margin: 0;
}

.cv-post-card__image {
	margin: 0;
}

.cv-post-card__cat,
.cv-article__cat {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
}

.cv-blog__title {
	margin-bottom: var(--wp--preset--spacing--40);
}

.cv-pagination {
	margin-top: var(--wp--preset--spacing--60);
	gap: 6px;
}

.cv-pagination a,
.cv-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--contrast);
}

.cv-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	font-weight: 800;
}

/* Link hover states sit after every base link rule above (stylelint no-descending-specificity). */
.cv-pagination a:hover {
	border-color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.cv-footer__top a:hover {
	background: var(--wp--preset--color--header-alt);
	text-decoration: none;
}

.cv-footer__list a:hover {
	opacity: 1;
}

.cv-header a:where(:not(.wp-element-button)):hover {
	text-decoration: none;
}

.cv-header__title a:hover {
	border-color: currentcolor;
}

.cv-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.cv-department-card .wp-block-heading a {
	color: var(--wp--preset--color--contrast);
}

.cv-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--hyperlink-hover);
}

.wp-block-search__inside-wrapper {
	border-radius: var(--wp--custom--radius--control);
}

.wp-block-search__input {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--custom--control--border);
	border-radius: var(--wp--custom--radius--control);
	font: inherit;
}

.wp-block-search__button {
	margin-inline-start: 8px;
}

/* Inset ring in the button's text colour: an outside ring would fall on the
 * white search field or the dark header, depending on where it is placed. */
.wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--on-accent);
	outline-offset: -4px;
}

.cv-404__box {
	text-align: center;
}

.cv-404__box .cv-search {
	margin: var(--wp--preset--spacing--40) auto;
	max-width: 560px;
	text-align: start;
}

/* Comments and forms. */
.cv-comments {
	margin-top: var(--wp--preset--spacing--70);
}

:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select):not([class*="wc-block"]):not(.cv-search__input):not(.cv-search__select) {
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--custom--control--border);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	box-sizing: border-box;
	max-width: 100%;
}

textarea:not([class*="wc-block"]) {
	min-height: 120px;
}

/* A solid 2 px ring (3:1 against the page), also on native checkboxes and radios. */
:where(input, textarea, select):not([class*="wc-block"]):focus {
	border-color: var(--wp--preset--color--hyperlink);
	box-shadow: 0 0 0 2px var(--cv-focus-color, var(--wp--preset--color--hyperlink));
	outline: none;
}

/* Text links on dark banners take the header text colour (after every other link rule). */
.cv-promo:not(.is-light) .cv-promo__link a {
	color: var(--wp--preset--color--on-header);
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}