/**
 * Foundational, page-independent components and interaction states.
 */

:where(
	.boopi-button,
	.button,
	.wp-element-button,
	button[type="submit"],
	input[type="submit"]
) {
	align-items: center;
	background: var(--boopi-color-action);
	border: var(--boopi-border-width-strong) solid var(--boopi-color-action);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-action-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: var(--boopi-font-weight-semibold);
	gap: var(--boopi-space-2);
	justify-content: center;
	line-height: var(--boopi-line-height-control);
	min-block-size: var(--boopi-size-control-min);
	padding: var(--boopi-space-3) var(--boopi-space-5);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--boopi-motion-fast) var(--boopi-ease-standard),
		border-color var(--boopi-motion-fast) var(--boopi-ease-standard),
		box-shadow var(--boopi-motion-fast) var(--boopi-ease-standard),
		transform var(--boopi-motion-fast) var(--boopi-ease-standard);
	white-space: normal;
}

/* Desktop configurator journey: the side rail explains progress instead of duplicating a cart. */
@media (min-width: 64rem) {
	.boopi-configurator__steps > .boopi-configurator__progress {
		display: none;
	}

	.boopi-configurator__cart-title-desktop,
	.boopi-configurator__journey-action,
	.boopi-configurator__journey-marker,
	.boopi-configurator__journey-media,
	.boopi-configurator__journey-step-target {
		display: block;
	}

	.boopi-configurator__cart-title-mobile,
	.boopi-configurator__cart-card .boopi-configurator__selection-icon,
	.boopi-configurator__cart-card .boopi-configurator__selection-check,
	.boopi-configurator__step-actions [data-boopi-step-next] {
		display: none;
	}

	.boopi-configurator__cart-card {
		padding: var(--boopi-space-5);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		gap: 0;
		margin-block: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		align-items: center;
		border: 0;
		column-gap: var(--boopi-space-3);
		display: grid;
		grid-template-columns: 2rem 3.25rem minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		min-block-size: 4.75rem;
		padding: var(--boopi-space-2) 0;
		position: relative;
		row-gap: 0.15rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 28%, var(--boopi-color-border));
		content: "";
		inline-size: var(--boopi-border-width-strong);
		inset-block: calc(50% + 1rem) calc(-50% + 1rem);
		inset-inline-start: calc(1rem - var(--boopi-border-width));
		position: absolute;
	}

	.boopi-configurator__journey-marker {
		align-items: center;
		background: var(--boopi-color-surface);
		border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 42%, var(--boopi-color-border));
		border-radius: 50%;
		color: var(--boopi-color-text-muted);
		display: flex;
		font-size: var(--boopi-font-size-sm);
		font-weight: var(--boopi-font-weight-semibold);
		grid-column: 1;
		grid-row: 1 / 3;
		block-size: 2rem;
		inline-size: 2rem;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.boopi-configurator__selection-row.is-active .boopi-configurator__journey-marker {
		background: var(--boopi-config-active-accent);
		border-color: var(--boopi-config-active-accent);
		color: var(--boopi-color-surface);
	}

	.boopi-configurator__journey-media {
		align-items: center;
		background: var(--boopi-color-surface);
		border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 18%, var(--boopi-color-border));
		border-radius: var(--boopi-radius-md);
		color: var(--boopi-config-active-accent);
		display: flex;
		font-size: var(--boopi-font-size-xl);
		font-weight: var(--boopi-font-weight-medium);
		grid-column: 2;
		grid-row: 1 / 3;
		block-size: 3.25rem;
		inline-size: 3.25rem;
		justify-content: center;
		overflow: hidden;
	}

	.boopi-configurator__journey-media img {
		block-size: 100%;
		inline-size: 100%;
		object-fit: contain;
		padding: 0.2rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-category {
		color: var(--boopi-config-active-accent);
		grid-column: 3;
		grid-row: 1;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-value {
		font-size: var(--boopi-font-size-sm);
		grid-column: 3;
		grid-row: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-price {
		align-self: end;
		color: var(--boopi-color-text);
		font-weight: var(--boopi-font-weight-semibold);
		grid-column: 4;
		grid-row: 2;
		white-space: nowrap;
	}

	.boopi-configurator__journey-step-target {
		background: transparent;
		border: 0;
		cursor: pointer;
		inset: 0;
		padding: 0;
		position: absolute;
		z-index: 2;
	}

	.boopi-configurator__selection-row:has(.boopi-configurator__journey-step-target:is(:hover, :focus-visible)) .boopi-configurator__journey-media {
		border-color: var(--boopi-config-active-accent);
		box-shadow: var(--boopi-shadow-sm);
	}

	.boopi-configurator__journey-step-target:focus-visible {
		border-radius: var(--boopi-radius-md);
		outline: var(--boopi-border-width-strong) solid var(--boopi-config-active-accent);
		outline-offset: var(--boopi-space-1);
	}

	.boopi-configurator__journey-action {
		inline-size: 100%;
		margin-block-start: var(--boopi-space-2);
	}

	.boopi-configurator__cart-card > .boopi-configurator__total {
		border-block-start: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 20%, var(--boopi-color-border));
		margin-block: auto var(--boopi-space-2);
		padding-block-start: var(--boopi-space-3);
	}
}

@media (min-width: 64rem) and (max-height: 50rem) {
	.boopi-configurator__cart-card .boopi-configurator__summary-eyebrow {
		display: none;
	}

	.boopi-configurator__cart-card {
		padding: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card h2 {
		font-size: var(--boopi-font-size-xl);
		margin-block-end: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		margin-block: 0;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		grid-template-columns: 1.5rem 2.15rem minmax(0, 1fr) auto;
		min-block-size: 3.1rem;
		padding-block: 0.15rem;
	}

	.boopi-configurator__journey-marker {
		block-size: 1.5rem;
		font-size: var(--boopi-font-size-xs);
		inline-size: 1.5rem;
	}

	.boopi-configurator__journey-media {
		block-size: 2.15rem;
		inline-size: 2.15rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after,
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::before {
		inset-block-start: calc(50% + 0.75rem);
		inset-inline-start: calc(0.75rem - var(--boopi-border-width));
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-category,
	.boopi-configurator__cart-card .boopi-configurator__selection-value,
	.boopi-configurator__cart-card .boopi-configurator__selection-price {
		font-size: var(--boopi-font-size-xs);
	}

	.boopi-configurator__journey-action {
		min-block-size: 2.5rem;
		padding-block: var(--boopi-space-2);
	}

	.boopi-configurator__cart-card > .boopi-configurator__total,
	.boopi-configurator__cart-card .boopi-configurator__shipping-summary {
		margin-block: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card .boopi-configurator__payment-methods {
		margin-block-start: var(--boopi-space-1);
		padding-block-start: var(--boopi-space-2);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		min-block-size: 3.1rem;
	}
}

/* Local configurator composition prototype (EPIC-010 / STORY-005). */
.site-main.boopi-configurator-preview {
	max-inline-size: var(--boopi-container-wide);
	padding-block-end: 0;
	padding-block-start: calc(var(--boopi-space-6) + var(--boopi-space-2));
}

.boopi-configurator {
	--boopi-config-active-accent: var(--boopi-color-action-pink);
	--boopi-config-active-border: var(--boopi-color-home-card-pink-border);
	--boopi-config-active-contrast: var(--boopi-color-action-pink-hover);
	--boopi-config-active-surface: var(--boopi-color-home-card-pink-surface);
	padding-block-end: var(--boopi-space-6);
	background: color-mix(in srgb, var(--boopi-config-active-surface) 28%, var(--boopi-color-canvas));
	margin-block-end: 0;
	transition: background-color var(--boopi-motion-normal) var(--boopi-ease-standard);
}

.boopi-configurator[data-boopi-active-step="patch"] {
	--boopi-config-active-accent: var(--boopi-color-action-lilac);
	--boopi-config-active-border: var(--boopi-color-home-card-lilac-border);
	--boopi-config-active-contrast: var(--boopi-color-action-lilac-hover);
	--boopi-config-active-surface: var(--boopi-color-home-card-lilac-surface);
}

.boopi-configurator[data-boopi-active-step="world"] {
	--boopi-config-active-accent: var(--boopi-color-info);
	--boopi-config-active-border: color-mix(in srgb, var(--boopi-color-info) 28%, transparent);
	--boopi-config-active-contrast: var(--boopi-color-info);
	--boopi-config-active-surface: var(--boopi-color-surface-accent);
}

.boopi-configurator[data-boopi-active-step="toy"] {
	--boopi-config-active-accent: var(--boopi-color-action-sage);
	--boopi-config-active-border: color-mix(in srgb, var(--boopi-color-action-sage) 24%, transparent);
	--boopi-config-active-contrast: var(--boopi-color-action-sage-hover);
	--boopi-config-active-surface: var(--boopi-color-home-card-sage-surface);
}

.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] {
	--boopi-config-active-accent: var(--boopi-color-info);
	--boopi-config-active-border: color-mix(in srgb, var(--boopi-color-info) 28%, transparent);
	--boopi-config-active-contrast: var(--boopi-color-info);
	--boopi-config-active-surface: var(--boopi-color-surface-accent);
}

.boopi-configurator__intro {
	margin-inline: auto;
	max-inline-size: var(--boopi-container-narrow);
	padding-block: var(--boopi-space-6);
	text-align: center;
}

.boopi-configurator__eyebrow,
.boopi-configurator__summary-eyebrow {
	color: var(--boopi-color-brand-primary);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin: 0;
	text-transform: uppercase;
}

.boopi-configurator__intro h1 {
	color: var(--boopi-color-home-hero-heading);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-3xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: var(--boopi-space-2) var(--boopi-space-3);
}

.boopi-configurator__intro > p:not(.boopi-configurator__eyebrow, .boopi-configurator__prototype-note) {
	color: var(--boopi-color-text-muted);
	margin-inline: auto;
	max-inline-size: var(--boopi-text-measure-narrow);
}

.boopi-configurator__prototype-note {
	background: var(--boopi-color-info-surface);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-info);
	display: inline-flex;
	font-size: var(--boopi-font-size-sm);
	margin-block: var(--boopi-space-3) 0;
	padding: var(--boopi-space-2) var(--boopi-space-4);
}

.boopi-configurator__progress {
	display: grid;
	gap: var(--boopi-space-2);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-end: var(--boopi-space-6);
}

.boopi-configurator__progress button {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--boopi-color-text-muted);
	display: flex;
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-medium);
	gap: var(--boopi-space-2);
	justify-content: center;
	min-block-size: var(--boopi-size-control-min);
	padding-inline: var(--boopi-space-3);
	position: relative;
	text-decoration: none;
}

.boopi-configurator__progress button:is(:hover, :focus-visible) {
	color: var(--boopi-color-brand-primary);
}

.boopi-configurator__progress button:not(:last-child)::after {
	background: var(--boopi-color-border);
	block-size: var(--boopi-border-width-strong);
	content: "";
	inline-size: calc(100% - 2.25rem);
	inset-block-start: 50%;
	inset-inline-start: calc(50% + 1.125rem);
	position: absolute;
	transform: translateY(-50%);
	z-index: 0;
}

.boopi-configurator__progress-index,
.boopi-configurator__step-number {
	align-items: center;
	background: var(--boopi-color-surface-brand);
	border-radius: 50%;
	color: var(--boopi-color-brand-primary);
	display: inline-flex;
	font-weight: var(--boopi-font-weight-semibold);
	justify-content: center;
}

.boopi-configurator__progress-index {
	background: var(--boopi-palette-neutral-200);
	color: var(--boopi-color-text-muted);
}

.boopi-configurator__progress button:nth-child(1)[aria-current="step"] { color: var(--boopi-color-action-pink); }
.boopi-configurator__progress button:nth-child(2)[aria-current="step"] { color: var(--boopi-color-action-lilac); }
.boopi-configurator__progress button:nth-child(3)[aria-current="step"] { color: var(--boopi-color-info); }
.boopi-configurator__progress button:nth-child(4)[aria-current="step"] { color: var(--boopi-color-action-sage); }
.boopi-configurator__progress button:nth-child(1)[aria-current="step"] .boopi-configurator__progress-index { background: var(--boopi-color-action-pink); }
.boopi-configurator__progress button:nth-child(2)[aria-current="step"] .boopi-configurator__progress-index { background: var(--boopi-color-action-lilac); }
.boopi-configurator__progress button:nth-child(3)[aria-current="step"] .boopi-configurator__progress-index { background: var(--boopi-color-info); }
.boopi-configurator__progress button:nth-child(4)[aria-current="step"] .boopi-configurator__progress-index { background: var(--boopi-color-action-sage); }

.boopi-configurator__progress button[aria-current="step"] {
	font-size: var(--boopi-font-size-xl);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
	block-size: 2.25rem;
	color: var(--boopi-color-surface);
	inline-size: 2.25rem;
}

.boopi-configurator__progress-index {
	block-size: 1.75rem;
	inline-size: 1.75rem;
	position: relative;
	z-index: 1;
}

.boopi-configurator__progress-label-mobile {
	display: none;
}

.boopi-configurator__workspace {
	display: grid;
	gap: var(--boopi-space-6);
}

.boopi-configurator__steps {
	display: grid;
	gap: var(--boopi-space-6);
}

.boopi-configurator.is-stepper-enhanced .boopi-configurator__step:not(.is-active-step),
.boopi-configurator.is-stepper-enhanced .boopi-configurator__general-information:not(.is-active-information) {
	display: none;
}

.boopi-configurator__step-actions {
	display: flex;
	flex-direction: column;
	gap: var(--boopi-space-3);
	margin-block-start: var(--boopi-space-5);
}

.boopi-configurator__step-actions .boopi-button {
	inline-size: 100%;
}

.boopi-configurator__step-actions .boopi-configurator__step-previous {
	align-self: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--boopi-config-active-accent);
	font-size: 0.875rem;
	inline-size: auto;
	min-block-size: auto;
	order: 2;
	padding: 0;
	text-decoration: none;
}

.boopi-configurator__step-actions .boopi-configurator__step-previous:not([hidden]) {
	margin-block-start: var(--boopi-space-1);
}

.boopi-configurator__step-actions .boopi-configurator__step-previous:is(:hover, :focus-visible, :active) {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--boopi-config-active-contrast);
	transform: none;
}

.boopi-configurator__step-actions [data-boopi-step-next] {
	order: 1;
}

.boopi-configurator__validation-hint {
	align-items: center;
	color: var(--boopi-color-disabled-text);
	display: inline-flex;
	font-size: var(--boopi-font-size-sm);
	gap: var(--boopi-space-2);
	justify-content: center;
	margin: 0;
	order: 0;
	text-align: center;
}

.boopi-configurator__validation-hint[hidden] {
	display: none;
}

.boopi-configurator__validation-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
}

.boopi-configurator__validation-icon .boopi-icon {
	block-size: 1rem;
	inline-size: 1rem;
}

.boopi-configurator__validation-hint.is-emphasized {
	color: var(--boopi-config-active-accent);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-configurator__step,
.boopi-configurator__general-information,
.boopi-configurator__summary-card,
.boopi-configurator__cart-card,
.boopi-configurator__information-card {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-home-card-border);
	border-radius: var(--boopi-home-card-radius);
	box-shadow: none;
}

.boopi-configurator__information-card {
	padding: clamp(var(--boopi-space-4), 3vw, var(--boopi-space-6));
}

.boopi-configurator__information-card .boopi-configurator__article-summary {
	border-block-start: 0;
	padding-block-start: 0;
}

.boopi-configurator__step {
	box-shadow: none;
	padding: clamp(var(--boopi-space-4), 3vw, var(--boopi-space-6));
}

.boopi-configurator__general-information {
	--boopi-config-step-accent: var(--boopi-color-action-sage);
	background: var(--boopi-color-home-card-sage-surface);
	padding: clamp(var(--boopi-space-4), 3vw, var(--boopi-space-6));
}

.boopi-configurator__general-information > h2 {
	color: var(--boopi-config-step-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin: 0;
}

.boopi-configurator__general-information > p {
	color: var(--boopi-color-text-muted);
	margin-block: var(--boopi-space-1) 0;
}

.boopi-configurator__step--backpack { --boopi-config-step-accent: var(--boopi-color-action-pink); background: var(--boopi-color-home-card-pink-surface); }
.boopi-configurator__step--patch { --boopi-config-step-accent: var(--boopi-color-action-lilac); background: var(--boopi-color-home-card-lilac-surface); }
.boopi-configurator__step--world { --boopi-config-step-accent: var(--boopi-color-info); background: var(--boopi-color-surface-accent); }
.boopi-configurator__step--toy { --boopi-config-step-accent: var(--boopi-color-action-sage); background: var(--boopi-color-home-card-sage-surface); }

.boopi-configurator__step--backpack .boopi-config-option { --boopi-config-option-cutout: var(--boopi-color-home-card-pink-surface); }
.boopi-configurator__step--patch .boopi-config-option { --boopi-config-option-cutout: var(--boopi-color-home-card-lilac-surface); }
.boopi-configurator__step--world .boopi-config-option { --boopi-config-option-cutout: var(--boopi-color-surface-accent); }
.boopi-configurator__step--toy .boopi-config-option { --boopi-config-option-cutout: var(--boopi-color-home-card-sage-surface); }

.boopi-configurator__step-header {
	align-items: flex-start;
	display: flex;
	gap: var(--boopi-space-3);
	margin-block-end: var(--boopi-space-5);
}

.boopi-configurator__step-number {
	background: var(--boopi-config-step-accent);
	block-size: 2.25rem;
	color: var(--boopi-color-surface);
	flex: 0 0 2.25rem;
	inline-size: 2.25rem;
}

.boopi-configurator__step-header h2 {
	color: var(--boopi-config-step-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin: 0;
}

.boopi-configurator__step-header p {
	color: var(--boopi-color-text-muted);
	margin-block: var(--boopi-space-1) 0;
}

.boopi-configurator__step-header .boopi-configurator__step-instruction {
	font-size: 0.625rem;
}

.boopi-configurator__step-price {
	color: var(--boopi-color-text);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-bold);
	margin-block-start: var(--boopi-space-2);
}

.boopi-configurator__step-price p {
	margin: 0;
}

.boopi-configurator__step-price small {
	color: var(--boopi-color-text-muted);
	display: block;
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-regular);
	line-height: var(--boopi-line-height-tight);
	margin-block-start: var(--boopi-space-1);
}

.boopi-configurator__step-price :is(.amount, bdi) {
	font-weight: inherit;
}

.boopi-configurator__active-price {
	margin-block: var(--boopi-space-2);
}

.boopi-configurator__active-price p {
	font-size: 1.125rem;
	font-weight: var(--boopi-font-weight-bold);
	margin: 0;
}

.boopi-configurator__active-price small {
	color: var(--boopi-color-text-muted);
	display: block;
	font-size: var(--boopi-font-size-xs);
	line-height: var(--boopi-line-height-tight);
	margin-block-start: var(--boopi-space-1);
}

.boopi-configurator__options {
	display: grid;
	gap: var(--boopi-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.boopi-config-option {
	border: var(--boopi-border-width-strong) solid transparent;
	border-radius: var(--boopi-radius-lg);
	min-inline-size: 0;
	position: relative;
	transition: border-color var(--boopi-motion-fast) var(--boopi-ease-standard), transform var(--boopi-motion-fast) var(--boopi-ease-standard);
}

.boopi-config-option.is-previewed {
	border-color: transparent;
}

.boopi-config-option.is-previewed .boopi-config-option__preview {
	--boopi-config-option-frame: var(--boopi-config-step-accent);
}

.boopi-configurator__step--backpack .boopi-config-option.is-selected .boopi-config-option__preview {
	--boopi-config-option-frame: var(--boopi-config-step-accent);
}

.boopi-configurator__step--patch .boopi-config-option__preview:is(:hover, :focus-visible),
.boopi-configurator__step--world .boopi-config-option__preview:is(:hover, :focus-visible),
.boopi-configurator__step--toy .boopi-config-option__preview:is(:hover, :focus-visible) {
	--boopi-config-option-frame: var(--boopi-config-step-accent);
}

.boopi-config-option__media {
	position: relative;
}

.boopi-config-option__preview {
	background: transparent;
	border: 0;
	border-radius: var(--boopi-radius-lg);
	color: var(--boopi-color-text);
	cursor: pointer;
	display: grid;
	inline-size: 100%;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: start;
}

.boopi-configurator__step--backpack .boopi-config-option__preview,
.boopi-configurator__step--world .boopi-config-option__preview {
	box-shadow: var(--boopi-shadow-sm);
}

.boopi-config-option__preview img {
	aspect-ratio: 1;
	background: var(--boopi-config-option-media-background, var(--boopi-color-surface));
	border-radius: var(--boopi-radius-lg);
	inline-size: 100%;
	object-fit: contain;
	padding: var(--boopi-space-3);
	transition: transform var(--boopi-motion-fast) var(--boopi-ease-standard);
}

.boopi-configurator__step--backpack .boopi-config-option[data-tone="pink"] {
	--boopi-config-option-media-background: var(--boopi-color-home-card-pink-surface);
}

.boopi-configurator__step--backpack .boopi-config-option[data-tone="teal"] {
	--boopi-config-option-media-background: var(--boopi-color-home-card-sage-surface);
}

.boopi-configurator__step--patch .boopi-config-option {
	--boopi-config-option-media-background: color-mix(in srgb, var(--boopi-color-action-lilac) 12%, var(--boopi-color-surface));
}

.boopi-configurator__step--world .boopi-config-option {
	--boopi-config-option-media-background: color-mix(in srgb, var(--boopi-color-info) 10%, var(--boopi-color-surface));
}

.boopi-configurator__step--toy .boopi-config-option {
	--boopi-config-option-media-background: color-mix(in srgb, var(--boopi-color-action-sage) 12%, var(--boopi-color-surface));
}

.boopi-config-option__preview:is(:hover, :focus-visible) img {
	transform: scale(1.025);
}

.boopi-configurator__step--patch .boopi-config-option__preview img {
	object-fit: contain;
	object-position: center 48%;
	padding: 0;
	transform: scale(0.8);
}

.boopi-configurator__step--patch .boopi-config-option__preview:is(:hover, :focus-visible) img {
	transform: scale(0.84);
}

.boopi-configurator[data-boopi-backpack-tone="pink"] .boopi-configurator__preview-base {
	transform: translateY(-2.5%) scale(1.055);
}

.boopi-config-option__notch {
	block-size: 5.25rem;
	color: var(--boopi-config-option-cutout, var(--boopi-color-canvas));
	inline-size: 5.25rem;
	inset-block-end: 0;
	inset-inline-end: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.boopi-configurator__step--patch .boopi-config-option__toggle:not([aria-pressed="true"]),
.boopi-configurator__step--world .boopi-config-option__toggle:not([aria-pressed="true"]),
.boopi-configurator__step--toy .boopi-config-option__toggle:not([aria-pressed="true"]) {
	background: color-mix(in srgb, var(--boopi-config-step-accent) 18%, var(--boopi-color-surface));
	color: var(--boopi-config-step-accent);
}

.boopi-configurator__step--patch .boopi-config-option__toggle:not([aria-pressed="true"]) {
	background: color-mix(in srgb, var(--boopi-config-step-accent) 24%, var(--boopi-color-surface));
}

.boopi-configurator__step--patch .boopi-config-option__toggle:not([aria-pressed="true"]):is(:hover, :focus-visible),
.boopi-configurator__step--world .boopi-config-option__toggle:not([aria-pressed="true"]):is(:hover, :focus-visible),
.boopi-configurator__step--toy .boopi-config-option__toggle:not([aria-pressed="true"]):is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--boopi-config-step-accent) 28%, var(--boopi-color-surface));
}

.boopi-configurator__step--patch .boopi-config-option__toggle:not([aria-pressed="true"]):is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--boopi-config-step-accent) 34%, var(--boopi-color-surface));
}

.boopi-configurator__product-information {
	display: grid;
	gap: var(--boopi-space-4);
	margin-block-start: var(--boopi-space-5);
}

.boopi-configurator__post-details > h2 {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-2);
}

.boopi-configurator__detail-title-icon {
	color: var(--boopi-config-active-accent);
	display: inline-grid;
	flex: 0 0 auto;
	transform: rotate(-12deg) translateY(-0.08rem);
}

.boopi-configurator__detail-title-icon .boopi-icon {
	block-size: 1.35rem;
	inline-size: 1.35rem;
}

.boopi-configurator__product-information h3 {
	color: var(--boopi-config-active-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: 1.2rem;
	font-weight: var(--boopi-font-weight-semibold);
	margin: 0;
	padding-block: var(--boopi-space-2) var(--boopi-space-3);
}

.boopi-configurator__product-information details {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-config-active-border);
	border-radius: var(--boopi-radius-lg);
	box-shadow: var(--boopi-shadow-sm);
	overflow: clip;
	padding-inline: var(--boopi-space-4);
}

.boopi-configurator__product-information summary {
	align-items: center;
	color: var(--boopi-config-active-accent);
	cursor: pointer;
	display: flex;
	font-family: var(--boopi-font-family-playful);
	font-size: 1.2rem;
	font-weight: var(--boopi-font-weight-semibold);
	gap: var(--boopi-space-3);
	list-style: none;
	padding: var(--boopi-space-4) calc(var(--boopi-size-control-min) + var(--boopi-space-2)) var(--boopi-space-4) 0;
	position: relative;
}

.boopi-configurator__detail-icon {
	align-items: center;
	background: color-mix(in srgb, var(--boopi-config-active-accent) 14%, var(--boopi-color-surface));
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 2.75rem;
	justify-content: center;
	block-size: 2.75rem;
	inline-size: 2.75rem;
}

.boopi-configurator__detail-icon .boopi-icon {
	block-size: 1.4rem;
	inline-size: 1.4rem;
}

.boopi-config-option__preview::after {
	border: var(--boopi-border-width-strong) solid var(--boopi-config-option-frame, transparent);
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.boopi-configurator__product-information summary::-webkit-details-marker {
	display: none;
}

.boopi-configurator__product-information summary::after {
	border-block-end: var(--boopi-border-width-strong) solid currentcolor;
	border-inline-end: var(--boopi-border-width-strong) solid currentcolor;
	block-size: 0.55rem;
	content: "";
	inline-size: 0.55rem;
	inset-block-start: 50%;
	inset-inline-end: calc((var(--boopi-size-control-min) - 0.55rem) / 2);
	position: absolute;
	transform: translateY(-65%) rotate(45deg);
	transition: transform var(--boopi-motion-fast) var(--boopi-ease-standard);
}

.boopi-configurator__product-information details[open] summary::after {
	transform: translateY(-35%) rotate(225deg);
}

.boopi-configurator__detail-content {
	color: var(--boopi-color-text-muted);
	padding-block-end: var(--boopi-space-4);
	padding-inline-start: calc(2.75rem + var(--boopi-space-3));
}

.boopi-configurator__detail-content p {
	margin-block: 0 var(--boopi-space-3);
}

.boopi-configurator__detail-content ul {
	display: grid;
	gap: var(--boopi-space-2);
	margin: 0;
	padding-inline-start: 1.25rem;
}

.boopi-configurator__facts {
	display: grid;
	gap: var(--boopi-space-3);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

.boopi-configurator__fact {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
}

.boopi-configurator__fact-icon {
	align-items: center;
	color: var(--boopi-config-active-accent);
	display: inline-flex;
	grid-row: 1 / 3;
	margin-inline-end: var(--boopi-space-3);
}

.boopi-configurator__fact dt {
	color: var(--boopi-config-active-accent);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-configurator__fact dd {
	margin: 0;
}

.boopi-configurator__care-grid {
	display: grid;
	gap: var(--boopi-space-5);
	grid-template-columns: minmax(0, 1fr);
}

.boopi-configurator__care-grid h3 {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-2);
	padding-block: 0 var(--boopi-space-3);
}

.boopi-configurator__legal-facts {
	display: grid;
	gap: var(--boopi-space-3);
	margin: 0;
}

.boopi-configurator__legal-facts div {
	display: grid;
	gap: var(--boopi-space-1);
}

.boopi-configurator__legal-facts dt {
	color: var(--boopi-config-active-accent);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-configurator__legal-facts dd {
	margin: 0;
}

.boopi-configurator__detail-content .boopi-configurator__draft-notice {
	background: color-mix(in srgb, var(--boopi-color-warning-surface) 72%, transparent);
	border-inline-start: var(--boopi-border-width-strong) solid var(--boopi-color-warning);
	color: var(--boopi-color-text);
	font-size: var(--boopi-font-size-sm);
	margin-block: var(--boopi-space-4) 0;
	padding: var(--boopi-space-3);
}

.boopi-config-option__toggle {
	align-items: center;
	background: var(--boopi-palette-neutral-200);
	border: 0;
	border-radius: 50%;
	block-size: var(--boopi-size-control-min);
	box-shadow: var(--boopi-shadow-md);
	color: var(--boopi-color-text-muted);
	cursor: pointer;
	display: flex;
	inline-size: var(--boopi-size-control-min);
	justify-content: center;
	position: absolute;
	inset-inline-end: var(--boopi-border-width-strong);
	inset-block-end: var(--boopi-border-width-strong);
	transition: background-color var(--boopi-motion-fast) var(--boopi-ease-standard), box-shadow var(--boopi-motion-fast) var(--boopi-ease-standard), transform var(--boopi-motion-fast) var(--boopi-ease-standard);
	z-index: 2;
}

.boopi-config-option__toggle:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--boopi-palette-neutral-200) 65%, var(--boopi-palette-neutral-500));
	box-shadow: var(--boopi-shadow-lg);
	transform: translateY(calc(-1 * var(--boopi-border-width)));
}

.boopi-config-option__toggle:active {
	box-shadow: var(--boopi-shadow-sm);
	transform: translateY(var(--boopi-border-width));
}

.boopi-config-option__toggle[aria-pressed="true"] {
	background: var(--boopi-color-success);
	border-color: var(--boopi-color-success);
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-color-surface);
}

.boopi-config-option__toggle[aria-pressed="true"]:is(:hover, :focus-visible) {
	background: var(--boopi-color-success);
	box-shadow: var(--boopi-shadow-md);
}

.boopi-config-option__cart-icon {
	display: flex;
}

.boopi-config-option__plus-icon {
	block-size: 1.15rem;
	inline-size: 1.15rem;
	position: relative;
}

.boopi-config-option__plus-icon::before,
.boopi-config-option__plus-icon::after {
	background: currentcolor;
	border-radius: var(--boopi-radius-pill);
	content: "";
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.boopi-config-option__plus-icon::before { block-size: var(--boopi-border-width-strong); inline-size: 100%; }
.boopi-config-option__plus-icon::after { block-size: 100%; inline-size: var(--boopi-border-width-strong); }

.boopi-config-option__cart-icon svg {
	block-size: 1.25rem;
	fill: none;
	inline-size: 1.25rem;
	stroke: currentcolor;
}

.boopi-config-option__toggle[aria-pressed="true"] :is(.boopi-config-option__cart-icon, .boopi-config-option__plus-icon) {
	display: none;
}

.boopi-config-option__toggle[aria-pressed="true"] .boopi-config-option__check-icon {
	border-block-end: var(--boopi-border-width-strong) solid currentcolor;
	border-inline-end: var(--boopi-border-width-strong) solid currentcolor;
	block-size: 0.75rem;
	inline-size: 0.4rem;
	transform: rotate(45deg) translate(-0.05rem, -0.1rem);
}

.boopi-config-option__included {
	background: var(--boopi-color-success-surface);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-success);
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-semibold);
	inset-block-start: var(--boopi-space-2);
	inset-inline-start: var(--boopi-space-2);
	padding: var(--boopi-space-1) var(--boopi-space-2);
	position: absolute;
}

.boopi-configurator__summary-card {
	padding: var(--boopi-space-5);
}

.boopi-configurator__side-rail {
	display: grid;
	gap: var(--boopi-space-4);
}

.boopi-configurator__cart-card {
	border-color: color-mix(in srgb, var(--boopi-config-active-accent) 28%, var(--boopi-color-border));
	padding: var(--boopi-space-5);
}

.boopi-configurator__summary-card h1,
.boopi-configurator__cart-card h2 {
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: var(--boopi-space-1) var(--boopi-space-4);
}

.boopi-configurator__cart-card h2 {
	color: var(--boopi-config-active-accent);
}

.boopi-configurator__summary-copy {
	color: var(--boopi-color-text-muted);
	margin: 0;
}

.boopi-configurator__product-copy > p:first-child {
	color: var(--boopi-color-brand-primary);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin: 0;
	text-transform: uppercase;
}

.boopi-configurator__product-copy h1 {
	color: var(--boopi-color-home-hero-heading);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: var(--boopi-space-1) var(--boopi-space-2);
}

.boopi-configurator__product-copy > p:last-child,
.boopi-configurator__article-summary p {
	color: var(--boopi-color-text-muted);
	margin: 0;
}

.boopi-configurator__article-summary {
	border-block-start: var(--boopi-border-width) solid var(--boopi-color-border);
	padding-block-start: var(--boopi-space-4);
}

.boopi-configurator__article-summary h2,
.boopi-configurator__post-details > h2 {
	color: var(--boopi-config-active-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: 1.5rem;
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0 var(--boopi-space-2);
}

.boopi-configurator__post-details {
	border-block-start: var(--boopi-border-width-strong) solid var(--boopi-color-border);
	margin-block-start: var(--boopi-space-6);
	padding-block: var(--boopi-space-6);
}

.boopi-configurator__preview {
	background: var(--boopi-color-surface-subtle);
	border-radius: var(--boopi-radius-lg);
	margin: 0;
	padding: var(--boopi-space-3);
	text-align: center;
}

.boopi-configurator__preview-stage {
	aspect-ratio: 1;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--boopi-config-preview-background, var(--boopi-color-surface-brand)) 22%, var(--boopi-color-surface)) 0%,
		color-mix(in srgb, var(--boopi-config-preview-background, var(--boopi-color-surface-brand)) 38%, var(--boopi-color-surface)) 100%
	);
	border-radius: var(--boopi-radius-lg);
	overflow: hidden;
	position: relative;
}

.boopi-configurator__preview-view {
	inset: 0;
	position: absolute;
}

.boopi-configurator__preview-stage:is(.is-carousel-dragging, .is-carousel-settling) .boopi-configurator__preview-view {
	animation: none;
	opacity: 1;
	will-change: transform;
}

.boopi-configurator__preview-stage:is(.is-carousel-dragging, .is-carousel-settling) .boopi-configurator__preview-view.is-active {
	transform: translate3d(var(--boopi-carousel-offset, 0), 0, 0);
}

.boopi-configurator__preview-stage[data-carousel-direction="next"] .boopi-configurator__preview-view--carousel-neighbor {
	transform: translate3d(calc(100% + var(--boopi-carousel-offset, 0px)), 0, 0);
}

.boopi-configurator__preview-stage[data-carousel-direction="previous"] .boopi-configurator__preview-view--carousel-neighbor {
	transform: translate3d(calc(-100% + var(--boopi-carousel-offset, 0px)), 0, 0);
}

.boopi-configurator__preview-stage.is-carousel-settling .boopi-configurator__preview-view {
	transition: transform var(--boopi-motion-medium) var(--boopi-ease-standard);
}

.boopi-configurator__preview-view img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
}

.boopi-configurator__preview-view--product:not(.boopi-configurator__preview-view--composition) > img {
	object-fit: contain;
	padding: clamp(var(--boopi-space-6), 10%, 4rem);
}

.boopi-configurator__preview-view--product[data-boopi-preview-view^="patch:"] > img {
	padding: 15%;
}

.boopi-configurator[data-boopi-active-step="backpack"] :is(.boopi-configurator__preview-patch, .boopi-configurator__preview-thumbnail-patch),
.boopi-configurator [data-boopi-core-view][hidden],
.boopi-configurator [data-boopi-view-button][hidden],
.boopi-configurator [data-boopi-view-indicator][hidden] {
	display: none;
}

.boopi-configurator__preview-patch {
	block-size: 100% !important;
	inset: 0;
	inline-size: 100% !important;
	object-fit: cover !important;
	position: absolute;
	transform: translateY(var(--boopi-config-preview-patch-offset-y, 4%)) scale(var(--boopi-config-preview-patch-scale, 0.45));
	transform-origin: center;
}

.boopi-configurator__preview-arrow {
	background: rgb(255 255 255 / 88%);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: 50%;
	color: var(--boopi-config-active-accent);
	cursor: pointer;
	inset-block-start: 50%;
	min-block-size: var(--boopi-size-control-min);
	min-inline-size: var(--boopi-size-control-min);
	padding: 0;
	position: absolute;
	transform: translateY(-50%);
	transition: background-color var(--boopi-motion-fast) var(--boopi-ease-standard), border-color var(--boopi-motion-fast) var(--boopi-ease-standard), color var(--boopi-motion-fast) var(--boopi-ease-standard), transform var(--boopi-motion-fast) var(--boopi-ease-standard);
	z-index: 2;
}

.boopi-configurator__preview-arrow--previous { inset-inline-start: var(--boopi-space-2); }
.boopi-configurator__preview-arrow--next { inset-inline-end: var(--boopi-space-2); }

.boopi-configurator__preview-arrow:is(:hover, :focus-visible) {
	background: var(--boopi-config-active-accent);
	border-color: var(--boopi-config-active-accent);
	color: var(--boopi-color-surface);
}

.boopi-configurator__preview-arrow:active {
	background: var(--boopi-config-active-contrast);
	border-color: var(--boopi-config-active-contrast);
	color: var(--boopi-color-surface);
	transform: translateY(-50%) scale(0.94);
}

.boopi-configurator__preview-arrow .boopi-icon {
	block-size: 1.35rem;
	inline-size: 1.35rem;
}

.boopi-configurator__preview-thumbnails {
	display: flex;
	gap: var(--boopi-space-2);
	margin-block-start: var(--boopi-space-3);
	overflow-x: auto;
	padding-block: var(--boopi-space-1);
}

.boopi-configurator__preview-thumbnails button {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-text-muted);
	display: grid;
	flex: 1 0 4.5rem;
	font-size: var(--boopi-font-size-xs);
	gap: var(--boopi-space-1);
	min-block-size: auto;
	padding: var(--boopi-space-2);
}

.boopi-configurator__preview-thumbnails button[aria-current="true"] {
	border-color: var(--boopi-color-brand-primary);
	box-shadow: inset 0 -0.18rem var(--boopi-color-brand-primary);
	color: var(--boopi-color-brand-primary);
}

.boopi-configurator__preview-thumbnails img {
	block-size: 2.5rem;
	inline-size: 100%;
	object-fit: contain;
}

.boopi-configurator__preview figcaption {
	font-family: var(--boopi-font-family-playful);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block-start: var(--boopi-space-2);
}

.boopi-configurator__preview-indicators {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.boopi-configurator__preview-view.is-active {
		animation: boopi-configurator-view-enter var(--boopi-motion-medium) var(--boopi-ease-standard);
	}

	.boopi-configurator__preview-stage[data-transition-direction="next"] .boopi-configurator__preview-view.is-active {
		animation-name: boopi-configurator-view-enter-next;
	}

	.boopi-configurator__preview-stage[data-transition-direction="previous"] .boopi-configurator__preview-view.is-active {
		animation-name: boopi-configurator-view-enter-previous;
	}

	@keyframes boopi-configurator-view-enter {
		from { opacity: 0; transform: scale(0.98); }
		to { opacity: 1; transform: scale(1); }
	}

	@keyframes boopi-configurator-view-enter-next {
		from { opacity: 1; transform: translate3d(100%, 0, 0); }
		to { opacity: 1; transform: translate3d(0, 0, 0); }
	}

	@keyframes boopi-configurator-view-enter-previous {
		from { opacity: 1; transform: translate3d(-100%, 0, 0); }
		to { opacity: 1; transform: translate3d(0, 0, 0); }
	}

}

.boopi-configurator__selection-summary {
	display: grid;
	gap: var(--boopi-space-3);
	margin-block: var(--boopi-space-5);
}

.boopi-configurator__selection-row {
	align-items: center;
	border-block-end: var(--boopi-border-width) solid var(--boopi-color-border);
	display: grid;
	gap: var(--boopi-space-2);
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-rows: auto auto;
	margin: 0;
	padding-block-end: var(--boopi-space-3);
}

.boopi-configurator__selection-value {
	color: var(--boopi-color-text);
	grid-column: 2;
	grid-row: 2;
}

.boopi-configurator__selection-row.is-empty .boopi-configurator__selection-value {
	color: color-mix(in srgb, var(--boopi-color-text-muted) 58%, var(--boopi-color-surface));
}

.boopi-configurator__selection-category {
	align-self: center;
	color: var(--boopi-config-active-accent);
	font-size: var(--boopi-font-size-md);
	font-weight: var(--boopi-font-weight-bold);
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	line-height: 1.25;
	margin: 0;
	text-align: start;
}

.boopi-configurator__cart-title {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-2);
}

.boopi-configurator__cart-title > span {
	color: var(--boopi-config-active-accent);
	display: inline-grid;
}

.boopi-configurator__cart-title .boopi-icon {
	block-size: 1.5rem;
	inline-size: 1.5rem;
}

.boopi-configurator__selection-price {
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-medium);
	justify-self: end;
	grid-column: 3;
	grid-row: 2;
	text-align: end;
	white-space: nowrap;
}

.boopi-configurator__selection-icon {
	align-self: center;
	color: var(--boopi-config-active-accent);
	display: inline-grid;
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	place-items: center;
}

.boopi-configurator__selection-icon .boopi-icon {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.boopi-configurator__selection-check {
	border: 0.125rem solid var(--boopi-color-border-strong);
	border-radius: 50%;
	display: inline-grid;
	grid-column: 4;
	grid-row: 2;
	block-size: 1.25rem;
	inline-size: 1.25rem;
	place-items: center;
}

.boopi-configurator__selection-check.is-complete {
	background: var(--boopi-color-success);
	border-color: var(--boopi-color-success);
}

.boopi-configurator__selection-check.is-complete::after {
	border-block-end: 0.125rem solid white;
	border-inline-end: 0.125rem solid white;
	content: "";
	block-size: 0.45rem;
	inline-size: 0.25rem;
	transform: translateY(-0.08rem) rotate(45deg);
}

.boopi-configurator__total {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-3);
	justify-content: space-between;
	margin-block: var(--boopi-space-4);
}

.boopi-configurator__total strong {
	color: var(--boopi-config-active-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-xl);
}

.boopi-configurator__total > span {
	font-size: var(--boopi-font-size-lg);
	font-weight: var(--boopi-font-weight-bold);
}

.boopi-configurator__shipping-summary {
	align-items: center;
	display: flex;
	font-size: var(--boopi-font-size-sm);
	gap: var(--boopi-space-3);
	justify-content: space-between;
	margin-block: calc(-1 * var(--boopi-space-2)) var(--boopi-space-4);
}

.boopi-configurator__shipping-summary strong {
	color: var(--boopi-color-text-muted);
	font-weight: var(--boopi-font-weight-medium);
}

.boopi-configurator__shipping-label {
	align-items: center;
	display: inline-flex;
	gap: var(--boopi-space-2);
}

.boopi-configurator__shipping-icon {
	display: none;
}

.boopi-configurator__summary-action {
	inline-size: 100%;
}

.boopi-configurator :is(
	.boopi-configurator__step-actions [data-boopi-step-next],
	.boopi-configurator__summary-action
):not(:disabled, [aria-disabled="true"]) {
	box-shadow: var(--boopi-shadow-sm);
	transition: background-color var(--boopi-motion-fast) var(--boopi-ease-standard), border-color var(--boopi-motion-fast) var(--boopi-ease-standard), box-shadow var(--boopi-motion-fast) var(--boopi-ease-standard), transform var(--boopi-motion-fast) var(--boopi-ease-standard);
}

.boopi-configurator :is(
	.boopi-configurator__step-actions [data-boopi-step-next],
	.boopi-configurator__summary-action
):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
	box-shadow: var(--boopi-shadow-md);
	transform: translateY(calc(-1 * var(--boopi-border-width)));
}

.boopi-configurator :is(
	.boopi-configurator__step-actions [data-boopi-step-next],
	.boopi-configurator__summary-action
):not(:disabled, [aria-disabled="true"]):active {
	box-shadow: var(--boopi-shadow-none);
	transform: translateY(var(--boopi-border-width));
}

.boopi-configurator__payment-methods {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--boopi-space-2);
	justify-content: center;
	margin-block-start: var(--boopi-space-3);
	border-block-start: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 18%, var(--boopi-color-border));
	padding-block-start: var(--boopi-space-3);
}

.boopi-configurator__payment-methods img {
	block-size: 1.75rem;
	inline-size: auto;
	max-inline-size: 3rem;
}

.boopi-configurator__cart-card small:not(.boopi-configurator__selection-category) {
	color: var(--boopi-color-text-muted);
	display: block;
	margin-block-start: var(--boopi-space-3);
	text-align: center;
}

.boopi-configurator__cart-toggle {
	display: none;
}

.boopi-configurator__cart-title-mobile,
.boopi-configurator__journey-action,
.boopi-configurator__journey-marker,
.boopi-configurator__journey-media,
.boopi-configurator__journey-step-target {
	display: none;
}

.boopi-configurator__description-toggle {
	display: none;
}

.boopi-configurator__cart-backdrop {
	display: none;
}

@media (min-width: 48rem) {
	.boopi-configurator__options--patch {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.boopi-configurator__step--patch .boopi-config-option__preview img {
		transform: scale(0.74);
	}

	.boopi-configurator__step--patch .boopi-config-option__preview:is(:hover, :focus-visible) img {
		transform: scale(0.78);
	}

	.boopi-configurator {
		--boopi-config-desktop-edge-clearance: var(--boopi-space-5);
		--boopi-config-desktop-bottom-clearance: var(--boopi-space-3);
		--boopi-config-desktop-card-height: calc(100dvh - var(--boopi-header-offset) - var(--boopi-admin-bar-offset) - var(--boopi-config-desktop-top-space) - var(--boopi-config-desktop-edge-clearance) - var(--boopi-config-desktop-bottom-clearance));
	}

	main.site-main.boopi-configurator-preview {
		--boopi-config-desktop-top-space: 4rem;
		box-sizing: border-box;
		inline-size: 100%;
		margin: 0;
		max-inline-size: none;
		max-width: none;
		padding-block-start: var(--boopi-config-desktop-top-space);
		padding-inline: var(--boopi-space-3);
		width: 100%;
	}

	.boopi-configurator__workspace {
		align-items: stretch;
		gap: var(--boopi-space-4);
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(16rem, 1fr);
	}

	.boopi-configurator__side-rail {
		display: contents;
	}

	.boopi-configurator__summary {
		align-self: start;
		block-size: var(--boopi-config-desktop-card-height);
		grid-column: 1;
		grid-row: 1;
		min-block-size: 0;
		position: sticky;
		top: calc(var(--boopi-header-offset) + var(--boopi-admin-bar-offset) + var(--boopi-config-desktop-top-space) + var(--boopi-config-desktop-edge-clearance));
		transform: translateY(var(--boopi-preview-sticky-offset, 0));
	}

	.boopi-configurator__summary-card {
		background: var(--boopi-config-active-surface);
		block-size: 100%;
		border-color: var(--boopi-config-active-border);
		display: grid;
		gap: 0;
		grid-template-columns: minmax(0, 1fr);
		padding: 0;
	}

	.boopi-configurator__summary-card > :is(.boopi-configurator__summary-eyebrow, h1, .boopi-configurator__summary-copy) {
		display: none;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview {
		block-size: 100%;
		display: grid;
		gap: 0;
		grid-column: 1;
		grid-template-columns: minmax(0, 1fr);
		padding: 0;
		position: relative;
		text-align: start;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-stage {
		aspect-ratio: auto;
		block-size: 100%;
		grid-column: 1;
		grid-row: 1;
		inline-size: 100%;
		max-block-size: none;
		min-block-size: 0;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview figcaption {
		display: none;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails {
		background: transparent;
		border: 0;
		bottom: auto;
		flex-direction: column;
		inset-block-start: 50%;
		inset-inline-start: var(--boopi-space-4);
		justify-content: center;
		margin: 0;
		overflow: visible;
		padding: 0;
		position: absolute;
		transform: translateY(-50%);
		z-index: 3;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails button {
		background: var(--boopi-color-surface);
		border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 24%, var(--boopi-color-border));
		border-radius: var(--boopi-radius-md);
		block-size: 4.5rem;
		box-shadow: var(--boopi-shadow-sm);
		flex: 0 0 auto;
		inline-size: 4.5rem;
		min-block-size: 0;
		overflow: hidden;
		padding: var(--boopi-space-1);
		place-items: center;
		pointer-events: auto;
		position: relative;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails button[aria-current="true"] {
		border-color: var(--boopi-config-active-accent);
		box-shadow: var(--boopi-shadow-sm);
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails button > img,
	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnail-composition {
		display: flex;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails img {
		block-size: 100%;
		border-radius: calc(var(--boopi-radius-md) - var(--boopi-space-1));
		inline-size: 100%;
		max-inline-size: 100%;
		overflow: hidden;
	}

	.boopi-configurator__preview-thumbnail-composition {
		block-size: 100%;
		inline-size: 100%;
		position: relative;
	}

	.boopi-configurator__preview-thumbnail-composition > img {
		inset: 0;
		position: absolute;
	}

	.boopi-configurator__preview-thumbnail-composition .boopi-configurator__preview-thumbnail-patch {
		object-fit: cover;
		transform: translateY(var(--boopi-config-preview-patch-offset-y, 4%)) scale(var(--boopi-config-preview-patch-scale, 0.41));
		transform-origin: center;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnail-label {
		display: none;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-arrow--previous {
		inset-inline-start: 6.5rem;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-view {
		inset-inline-start: 6rem;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-indicators {
		display: flex;
		gap: var(--boopi-space-2);
		inset-block-end: var(--boopi-space-3);
		inset-inline-start: calc(50% + 3rem);
		position: absolute;
		transform: translateX(-50%);
		z-index: 4;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-indicators span {
		background: var(--boopi-color-surface);
		border-radius: 50%;
		block-size: 0.55rem;
		inline-size: 0.55rem;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-indicators span.is-active {
		background: var(--boopi-config-active-accent);
	}

	.boopi-configurator__steps {
		align-content: start;
		background: var(--boopi-config-active-surface);
		block-size: auto;
		border: var(--boopi-border-width) solid var(--boopi-config-active-border);
		border-radius: var(--boopi-home-card-radius);
		box-shadow: none;
		gap: 0;
		grid-column: 2;
		grid-row: 1;
		grid-template-rows: auto auto auto auto auto minmax(min-content, 1fr);
		min-block-size: var(--boopi-config-desktop-card-height);
		overflow: visible;
		padding: var(--boopi-space-4);
	}

	.boopi-configurator[data-boopi-active-step="backpack"] .boopi-configurator__steps:not(:has(.boopi-configurator__category-description-copy.is-expanded)) {
		block-size: var(--boopi-config-desktop-card-height);
	}

	.boopi-configurator__product-copy {
		display: contents;
	}

	.boopi-configurator__product-copy > p:first-child,
	.boopi-configurator__product-copy h1 {
		color: var(--boopi-config-active-accent);
	}

	.boopi-configurator__product-copy > p:first-child {
		grid-row: 1;
	}

	.boopi-configurator__product-copy h1 {
		grid-row: 3;
		margin-block: var(--boopi-space-3) 0;
	}

	.boopi-configurator__category-description {
		grid-row: 4;
		margin-block: var(--boopi-space-2) 0;
	}

	.boopi-configurator__category-description p {
		color: var(--boopi-color-text-muted);
		margin: 0;
	}

	.boopi-configurator__category-description p + p {
		margin-block-start: var(--boopi-space-2);
	}

	.boopi-configurator__category-description-copy:not(.is-expanded) p:nth-child(n + 2) {
		display: none;
	}

	.boopi-configurator__category-description-copy:not(.is-expanded) p:first-child {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		overflow: hidden;
	}

	.boopi-configurator__description-toggle {
		background: transparent;
		border: 0;
		color: var(--boopi-config-active-accent);
		cursor: pointer;
		display: inline-block;
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		margin-block-start: var(--boopi-space-2);
		padding: 0;
		text-decoration: none;
	}

	.boopi-configurator__description-toggle[hidden] {
		display: none;
	}

	.boopi-configurator__description-toggle:hover,
	.boopi-configurator__description-toggle:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.boopi-configurator__active-price {
		color: var(--boopi-color-text);
		grid-row: 5;
		margin: var(--boopi-space-3) 0 0;
	}

	.boopi-configurator__progress {
		align-self: end;
		display: grid;
		grid-row: 2;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-block: var(--boopi-space-1);
	}

	.boopi-configurator__progress button,
	.boopi-configurator__progress button[aria-current="step"] {
		flex: none;
		inline-size: auto;
		min-inline-size: 0;
	}

	.boopi-configurator__active-price :is(.amount, bdi) {
		font-weight: inherit;
	}

	.boopi-configurator__information-card {
		background: var(--boopi-config-active-surface);
		border-color: var(--boopi-config-active-border);
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.boopi-configurator__information-card .boopi-configurator__post-details {
		border-block-start: 0;
		margin-block-start: 0;
		padding-block-start: 0;
	}

	.boopi-configurator__information-card .boopi-configurator__product-information {
		align-items: start;
		display: grid;
		gap: var(--boopi-space-5);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.boopi-configurator__information-card .boopi-configurator__product-information details:first-child {
		grid-column: 1 / -1;
	}

	.boopi-configurator__information-card .boopi-configurator__product-information details:last-child {
		grid-column: 1 / -1;
	}

	.boopi-configurator__step {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	.boopi-configurator__step.is-active-step {
		--boopi-config-step-accent: var(--boopi-config-active-accent);
		align-self: stretch;
		display: flex;
		flex-direction: column;
		grid-row: 6;
		inline-size: 100%;
		justify-self: stretch;
		min-block-size: 0;
	}

	.boopi-configurator__step.is-active-step .boopi-configurator__step-actions {
		flex: 1 0 auto;
		justify-content: flex-end;
		margin-block-start: 0;
		padding-block-start: var(--boopi-space-2);
	}

	.boopi-configurator__step-price {
		font-size: 1.05rem;
	}

	.boopi-configurator__step.is-active-step .boopi-config-option {
		--boopi-config-option-cutout: var(--boopi-config-active-surface);
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-config-option__preview img {
		aspect-ratio: 1;
		block-size: auto;
		box-shadow: var(--boopi-shadow-sm);
		inline-size: 100%;
		padding: var(--boopi-space-2);
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-config-option {
		--boopi-backpack-option-accent: var(--boopi-color-action-pink);
		background: transparent;
		border-color: color-mix(in srgb, var(--boopi-backpack-option-accent) 52%, transparent);
		border-width: var(--boopi-border-width);
		inline-size: 100%;
		max-inline-size: none;
		overflow: visible;
		padding: 0;
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-config-option[data-tone="teal"] {
		--boopi-backpack-option-accent: var(--boopi-color-info);
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-config-option.is-selected {
		border-color: var(--boopi-backpack-option-accent);
		outline: var(--boopi-border-width-strong) solid var(--boopi-backpack-option-accent);
		outline-offset: var(--boopi-space-1);
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-config-option.is-selected .boopi-config-option__preview {
		--boopi-config-option-frame: transparent;
	}

	.boopi-configurator__step--backpack.is-active-step .boopi-configurator__options--backpack {
		inline-size: 94%;
		justify-self: center;
	}

	.boopi-configurator__step-header > .boopi-configurator__step-number {
		display: none;
	}

	.boopi-configurator__cart-summary {
		align-self: start;
		grid-column: 3;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--boopi-header-offset) + var(--boopi-admin-bar-offset) + var(--boopi-config-desktop-top-space) + var(--boopi-config-desktop-edge-clearance));
	}

	.boopi-configurator__cart-card {
		background: var(--boopi-config-active-surface);
		block-size: var(--boopi-config-desktop-card-height);
		border: var(--boopi-border-width) solid var(--boopi-config-active-border);
		border-radius: var(--boopi-home-card-radius);
		box-shadow: none;
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		min-block-size: 0;
		overflow: visible;
		padding: var(--boopi-space-4);
		position: relative;
	}

	.boopi-configurator__cart-card h2 {
		margin-block-end: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		gap: var(--boopi-space-1);
		margin-block: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		row-gap: var(--boopi-space-1);
		padding-block-end: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card > .boopi-configurator__total {
		margin-block-end: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card .boopi-configurator__shipping-summary {
		margin-block-end: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card .boopi-configurator__payment-methods {
		margin-block-start: var(--boopi-space-2);
	}

	.boopi-configurator__cart-card small:not(.boopi-configurator__selection-category) {
		display: none;
	}

	.boopi-configurator__cart-card .boopi-configurator__summary-eyebrow {
		color: var(--boopi-config-active-accent);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-category {
		font-size: var(--boopi-font-size-sm);
		font-weight: var(--boopi-font-weight-medium);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-icon {
		opacity: 0.62;
	}

	.boopi-configurator__cart-card .boopi-configurator__summary-action {
		display: none;
	}


	.boopi-configurator__cart-title > span {
		inset-block-start: var(--boopi-space-4);
		inset-inline-end: var(--boopi-space-4);
		opacity: 0.32;
		position: absolute;
		transform: rotate(18deg);
	}

	.boopi-configurator__cart-title .boopi-icon {
		block-size: 2.75rem;
		inline-size: 2.75rem;
	}

	.boopi-configurator__cart-card > .boopi-configurator__total {
		margin-block-start: auto;
	}

	.boopi-configurator__progress {
		display: flex;
		gap: var(--boopi-space-1);
		inline-size: 100%;
		margin-block-end: var(--boopi-space-2);
		overflow: visible;
		position: relative;
	}

	.boopi-configurator__progress::before {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 48%, transparent);
		block-size: var(--boopi-border-width-strong);
		content: "";
		inset-block-start: 50%;
		inset-inline: 12.5%;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__progress button[aria-current="step"]:not(:last-child)::after {
		background: var(--boopi-config-active-accent);
		block-size: calc(2 * var(--boopi-border-width-strong));
		display: block;
		inline-size: 50%;
		inset-block-start: 1rem;
		inset-inline-start: 50%;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__progress button.is-complete:not(:last-child)::after {
		background: var(--boopi-config-active-accent);
		block-size: calc(2 * var(--boopi-border-width-strong));
		display: block;
		inline-size: 100%;
		inset-block-start: 1rem;
		inset-inline-start: 50%;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__progress button[aria-current="step"] {
		color: var(--boopi-config-active-accent);
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
		background: var(--boopi-config-active-accent);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress::before {
		background: color-mix(in srgb, var(--boopi-color-info) 48%, transparent);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress button[aria-current="step"]:not(:last-child)::after {
		background: var(--boopi-color-info);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress button[aria-current="step"] {
		color: var(--boopi-color-info);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
		background: var(--boopi-color-info);
	}

	.boopi-configurator__progress button {
		flex: 1 1 0;
		font-size: var(--boopi-font-size-sm);
		inline-size: auto;
		min-inline-size: 0;
		padding-inline: var(--boopi-space-1);
		z-index: 1;
	}

	.boopi-configurator__progress button[aria-current="step"] {
		flex: 0 0 auto;
		font-size: var(--boopi-font-size-md);
		justify-content: flex-start;
	}

	.boopi-configurator__progress button:not([aria-current="step"]) .boopi-configurator__progress-index {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 24%, var(--boopi-color-surface));
		border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-active-accent) 55%, transparent);
		color: var(--boopi-config-active-contrast);
	}

	.boopi-configurator__progress-index,
	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
		block-size: 2rem;
		flex-basis: 2rem;
		inline-size: 2rem;
	}

	.boopi-configurator__step-header .boopi-configurator__step-instruction {
		display: none;
	}

	.boopi-configurator__selection-row {
		column-gap: var(--boopi-space-2);
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		row-gap: var(--boopi-space-2);
	}

	.boopi-configurator__selection-icon {
		grid-column: 1;
		grid-row: 1;
	}

	.boopi-configurator__selection-check {
		display: none;
	}

	.boopi-configurator__selection-price {
		grid-column: 3;
		grid-row: 2;
		justify-self: stretch;
		text-align: end;
		white-space: normal;
	}

	.boopi-configurator__progress button:not(:last-child):not([aria-current="step"]):not(.is-complete)::after {
		display: none;
	}

	.boopi-configurator__progress-label,
	.boopi-configurator__progress-label-desktop {
		display: none;
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label,
	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label-mobile {
		display: block;
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label {
		background: var(--boopi-config-active-surface);
		padding-inline: var(--boopi-space-2);
		white-space: normal;
	}

	/* Keep the four desktop nodes fixed while the active label changes. */
	.boopi-configurator__progress {
		display: grid;
		gap: 0;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.boopi-configurator__progress::before {
		inset-block-start: 1rem;
	}

	.boopi-configurator__progress button,
	.boopi-configurator__progress button[aria-current="step"] {
		align-items: center;
		display: flex;
		flex: none;
		flex-direction: column;
		gap: var(--boopi-space-1);
		inline-size: 100%;
		justify-content: flex-start;
		min-inline-size: 0;
		padding-inline: var(--boopi-space-1);
		text-align: center;
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label {
		font-size: var(--boopi-font-size-sm);
		line-height: var(--boopi-line-height-tight);
		max-inline-size: 100%;
		padding-inline: 0;
	}

	.boopi-configurator__step-header {
		margin-block-end: var(--boopi-space-6);
	}

	.boopi-configurator__step-header > .boopi-configurator__step-number,
	.boopi-configurator__step-header h2 {
		display: none;
	}

	.boopi-configurator__step-header > div {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--boopi-space-4);
	}

	.boopi-configurator__post-details {
		background: transparent;
		border-block-start-color: var(--boopi-config-active-border);
		margin-block-start: var(--boopi-space-5);
		padding-block: var(--boopi-space-5) 0;
	}

	.boopi-configurator__step-actions [data-boopi-step-next] {
		background: var(--boopi-config-active-accent);
		border-color: var(--boopi-config-active-accent);
		color: var(--boopi-color-action-text);
	}

	.boopi-configurator__step-actions [data-boopi-step-next]:is(:hover, :focus-visible) {
		background: var(--boopi-config-active-contrast);
		border-color: var(--boopi-config-active-contrast);
	}

	.boopi-configurator__step-previous {
		color: var(--boopi-config-active-accent);
	}

	.boopi-configurator__options--patch {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 63.99rem) {
	.boopi-configurator__workspace {
		grid-template-columns: minmax(0, 1fr);
	}

	.boopi-configurator__side-rail {
		display: contents;
	}

	.boopi-configurator__summary {
		grid-column: 1;
		grid-row: 1;
	}

	.boopi-configurator__steps {
		grid-column: 1;
		grid-row: 2;
	}

	.boopi-configurator__cart-summary {
		grid-column: 1;
		grid-row: 4;
	}

	.boopi-configurator__information-card {
		grid-column: 1;
		grid-row: 3;
	}
}

@media (max-width: 47.99rem) {
	.boopi-how-it-works__eyebrow {
		margin-block-end: 0;
	}

	.boopi-configurator__care-grid {
		grid-template-columns: 1fr;
	}

	main.site-main.boopi-configurator-preview {
		box-sizing: border-box;
		inline-size: 100%;
		margin: 0;
		max-inline-size: none;
		max-width: none;
		overflow-x: clip;
		padding: var(--boopi-space-2) 0 0;
		width: 100%;
	}

	.boopi-configurator {
		--boopi-config-mobile-accent: var(--boopi-color-action-pink);
		--boopi-config-mobile-border: var(--boopi-color-home-card-pink-border);
		--boopi-config-mobile-step-contrast: var(--boopi-color-action-pink-hover);
		--boopi-config-mobile-surface: var(--boopi-color-home-card-pink-surface);
		inline-size: 100%;
		padding-block-end: 0;
	}

	.boopi-configurator[data-boopi-active-step="patch"] {
		--boopi-config-mobile-accent: var(--boopi-color-action-lilac);
		--boopi-config-mobile-border: var(--boopi-color-home-card-lilac-border);
		--boopi-config-mobile-step-contrast: var(--boopi-color-action-lilac-hover);
		--boopi-config-mobile-surface: var(--boopi-color-home-card-lilac-surface);
	}

	.boopi-configurator[data-boopi-active-step="world"] {
		--boopi-config-mobile-accent: var(--boopi-color-info);
		--boopi-config-mobile-border: color-mix(in srgb, var(--boopi-color-info) 28%, transparent);
		--boopi-config-mobile-step-contrast: var(--boopi-color-info);
		--boopi-config-mobile-surface: var(--boopi-color-surface-accent);
	}

	.boopi-configurator[data-boopi-active-step="toy"] {
		--boopi-config-mobile-accent: var(--boopi-color-action-sage);
		--boopi-config-mobile-border: color-mix(in srgb, var(--boopi-color-action-sage) 24%, transparent);
		--boopi-config-mobile-step-contrast: var(--boopi-color-action-sage-hover);
		--boopi-config-mobile-surface: var(--boopi-color-home-card-sage-surface);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] {
		--boopi-config-mobile-accent: var(--boopi-color-info);
		--boopi-config-mobile-border: color-mix(in srgb, var(--boopi-color-info) 28%, transparent);
		--boopi-config-mobile-step-contrast: var(--boopi-color-info);
		--boopi-config-mobile-surface: var(--boopi-color-surface-accent);
	}

	.boopi-configurator__step--backpack {
		--boopi-config-step-accent: var(--boopi-config-mobile-accent);
	}

	.boopi-configurator__step--backpack .boopi-config-option {
		--boopi-config-option-cutout: var(--boopi-config-mobile-surface);
		background: transparent;
		border-width: var(--boopi-border-width);
		overflow: visible;
		padding: 0;
	}

	.boopi-configurator__step--backpack .boopi-config-option.is-selected {
		outline: var(--boopi-border-width-strong) solid var(--boopi-config-mobile-accent);
		outline-offset: var(--boopi-space-1);
	}

	.boopi-configurator__step--backpack .boopi-config-option.is-selected .boopi-config-option__preview {
		--boopi-config-option-frame: transparent;
	}

	.boopi-configurator__progress {
		display: flex;
		gap: var(--boopi-space-1);
		inline-size: 100%;
		margin-block-end: var(--boopi-space-2);
		overflow: visible;
		padding-block-end: 0;
		position: relative;
	}

	.boopi-configurator__progress::before {
		background: color-mix(in srgb, var(--boopi-config-mobile-accent) 48%, transparent);
		block-size: var(--boopi-border-width-strong);
		content: "";
		inset-block-start: 50%;
		inset-inline: 0.875rem;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__progress button[aria-current="step"]:not(:last-child)::after {
		background: var(--boopi-config-mobile-accent);
		block-size: calc(2 * var(--boopi-border-width-strong));
		display: block;
		inline-size: 50%;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__progress button.is-complete:not(:last-child)::after {
		background: var(--boopi-config-mobile-accent);
		block-size: calc(2 * var(--boopi-border-width-strong));
		display: block;
		inline-size: 100%;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		position: absolute;
		transform: translateY(-50%);
		z-index: 0;
	}

	.boopi-configurator__workspace {
		gap: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	.boopi-configurator__side-rail {
		display: contents;
	}

	.boopi-configurator__summary {
		grid-column: 1;
		grid-row: 1;
		position: static;
	}

	.boopi-configurator__steps {
		background: var(--boopi-config-mobile-surface);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		gap: var(--boopi-space-3);
		grid-column: 1;
		grid-row: 2;
		max-block-size: none;
		overflow: visible;
		padding: var(--boopi-space-4);
	}

	.boopi-configurator__step {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.boopi-configurator__step-header > .boopi-configurator__step-number {
		display: none;
	}

	.boopi-configurator__step-header {
		display: contents;
		margin-block-end: 0;
	}

	.boopi-configurator__step-header h2 {
		display: none;
	}

	.boopi-configurator__step-header > div {
		display: contents;
	}

	.boopi-configurator__options {
		order: 1;
	}

	.boopi-configurator__step-header p {
		margin-block: var(--boopi-space-1) 0;
		order: 3;
	}

	.boopi-configurator__step-price {
		margin-block-start: var(--boopi-space-3);
		order: 2;
	}

	.boopi-configurator__step-actions {
		order: 4;
	}

	.boopi-configurator__cart-summary {
		background-color: var(--boopi-color-surface);
		background-image: none;
		display: block;
		grid-column: 1;
		grid-row: 3;
		bottom: 0;
		inset-inline: 0;
		position: fixed;
		z-index: calc(var(--boopi-layer-overlay) + 1);
	}

	.boopi-configurator__cart-card {
		/* The fixed Mobile sheet stays neutral across every product-family colour. */
		background-color: var(--boopi-color-surface);
		background-image: none;
		align-items: center;
		border-end-end-radius: 0;
		border-end-start-radius: 0;
		box-shadow: 0 -0.35rem 1rem rgb(55 45 50 / 10%);
		display: grid;
		gap: var(--boopi-space-2) var(--boopi-space-3);
		grid-template-columns: minmax(0, 1fr) auto auto;
		padding: var(--boopi-space-2) max(var(--boopi-gutter), env(safe-area-inset-right)) max(var(--boopi-space-2), env(safe-area-inset-bottom)) max(var(--boopi-gutter), env(safe-area-inset-left));
	}

	.boopi-configurator__cart-heading {
		background-color: var(--boopi-color-surface);
		display: contents;
	}

	.boopi-configurator__cart-heading > div {
		grid-column: 1;
		grid-row: 1;
	}

	.boopi-configurator__cart-heading h2 {
		font-size: var(--boopi-font-size-lg);
		margin: 0;
	}

	.boopi-configurator__cart-title > span {
		color: var(--boopi-config-mobile-accent);
	}

	.boopi-configurator__cart-heading .boopi-configurator__summary-eyebrow {
		display: none;
	}

	.boopi-configurator__cart-toggle {
		background: transparent;
		border: 0;
		border-radius: 50%;
		color: var(--boopi-color-surface);
		display: inline-grid;
		grid-column: 3;
		grid-row: 1;
		place-items: center;
		min-block-size: var(--boopi-size-control-min);
		min-inline-size: var(--boopi-size-control-min);
		padding: 0;
		position: relative;
	}

	.boopi-configurator__cart-toggle::before {
		background: var(--boopi-config-active-accent);
		border-radius: inherit;
		block-size: 2rem;
		content: "";
		inline-size: 2rem;
		position: absolute;
		transition: background-color var(--boopi-motion-fast) var(--boopi-ease-standard);
	}

	.boopi-configurator__cart-toggle:is(:hover, :focus-visible)::before {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 82%, var(--boopi-color-text));
	}

	.boopi-configurator__cart-toggle .boopi-icon {
		display: block;
		position: relative;
		transform: rotate(180deg);
		transition: transform var(--boopi-motion-fast) var(--boopi-ease-standard);
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__cart-toggle .boopi-icon {
		transform: rotate(0deg);
	}

	.boopi-configurator__cart-backdrop {
		background: rgb(37 31 34 / 58%);
		border: 0;
		display: block;
		inset: 0;
		padding: 0;
		position: fixed;
		z-index: var(--boopi-layer-overlay);
	}

	.boopi-configurator__cart-backdrop[hidden] {
		display: none;
	}

	.boopi-configurator__cart-content {
		display: none;
		grid-column: 1 / -1;
	}

	/* Desktop journey controls must never leak into the compact Mobile cart. */
	.boopi-configurator__journey-validation,
	.boopi-configurator__journey-action,
	.boopi-configurator__journey-previous {
		display: none;
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__cart-content {
		display: block;
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__cart-toggle::before {
		background: var(--boopi-config-active-accent);
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__cart-card .boopi-configurator__total strong {
		color: var(--boopi-config-active-accent);
	}

	.boopi-configurator__cart-card .boopi-configurator__total {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.boopi-configurator__cart-card .boopi-configurator__total > span {
		display: none;
	}

	.boopi-configurator__cart-card .boopi-configurator__total strong {
		font-size: var(--boopi-font-size-lg);
		white-space: nowrap;
	}

	.boopi-configurator__progress button {
		flex: 1 1 0;
		font-size: var(--boopi-font-size-xs);
		inline-size: auto;
		min-inline-size: 0;
		padding-inline: var(--boopi-space-1);
		z-index: 1;
	}

	.boopi-configurator__progress button:first-child {
		padding-inline-start: 0;
	}

	.boopi-configurator__progress button:last-child {
		justify-content: flex-end;
		padding-inline-end: 0;
	}

	.boopi-configurator__progress button[aria-current="step"] {
		flex: 0 0 auto;
		font-size: var(--boopi-font-size-sm);
		justify-content: flex-start;
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress button[aria-current="step"] {
		color: var(--boopi-color-info);
	}

	.boopi-configurator[data-boopi-active-step="backpack"][data-boopi-backpack-tone="teal"] .boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
		background: var(--boopi-color-info);
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-index {
		block-size: 1.75rem;
		flex: 0 0 1.75rem;
		inline-size: 1.75rem;
	}

	.boopi-configurator__progress button:not([aria-current="step"]) .boopi-configurator__progress-index {
		background: color-mix(in srgb, var(--boopi-config-mobile-accent) 24%, var(--boopi-color-surface));
		border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-config-mobile-accent) 55%, transparent);
		color: var(--boopi-config-mobile-step-contrast);
	}

	.boopi-configurator__progress button:not(:last-child)::after {
		background: color-mix(in srgb, var(--boopi-config-mobile-accent) 22%, transparent);
	}

	.boopi-configurator__progress-label {
		display: none;
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label {
		background: var(--boopi-config-mobile-surface);
		display: block;
		font-size: var(--boopi-font-size-sm);
		line-height: var(--boopi-line-height-tight);
		padding-inline: var(--boopi-space-2);
		position: relative;
		text-align: start;
		white-space: normal;
		z-index: 2;
	}

	.boopi-configurator__progress-label-desktop {
		display: none;
	}

	.boopi-configurator__progress button[aria-current="step"] .boopi-configurator__progress-label-mobile {
		display: block;
	}

	.boopi-configurator__progress button:not(:last-child):not([aria-current="step"]):not(.is-complete)::after {
		display: none;
	}

	.boopi-configurator__summary-card {
		background: var(--boopi-config-mobile-surface);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		position: relative;
	}

	.boopi-configurator__summary-card > .boopi-configurator__summary-eyebrow {
		display: none;
	}

	.boopi-configurator__summary-card > h1 {
		color: var(--boopi-color-home-hero-heading);
		font-family: var(--boopi-font-family-playful);
		font-size: clamp(1rem, 4.8vw, var(--boopi-font-size-xl));
		font-weight: var(--boopi-font-weight-semibold);
		margin: 0;
		white-space: nowrap;
	}

	.boopi-configurator__summary-card > .boopi-configurator__summary-copy {
		display: none;
	}

	.boopi-configurator__product-copy {
		display: none;
	}

	.boopi-configurator__steps {
		grid-template-rows: auto auto;
	}

	.boopi-configurator__progress {
		grid-row: 1;
	}

	.boopi-configurator__active-price {
		display: none;
	}

	.boopi-configurator__step.is-active-step {
		grid-row: 2;
	}

	.boopi-configurator__shipping-summary {
		display: none;
		grid-column: 1 / -1;
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__shipping-summary {
		display: flex;
		font-size: 1rem;
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__shipping-icon {
		display: inline-grid;
		place-items: center;
	}

	.boopi-configurator.is-mobile-cart-expanded .boopi-configurator__shipping-icon .boopi-icon {
		block-size: 1.25rem;
		inline-size: 1.25rem;
	}

	.boopi-configurator__preview-stage {
		aspect-ratio: 1;
		block-size: auto;
		inline-size: 100%;
		max-block-size: 50dvh;
		touch-action: pan-y;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview {
		background: transparent;
		border-radius: 0;
		padding: 0;
		position: relative;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-stage {
		border-block-end: var(--boopi-border-width-strong) solid var(--boopi-config-mobile-border);
		border-radius: 0;
	}

	.boopi-configurator__preview figcaption {
		display: none;
	}

	.boopi-configurator__preview-arrow {
		display: inline-grid;
		place-items: center;
	}

	.boopi-configurator__step-previous {
		background: transparent;
		border-color: transparent;
		color: var(--boopi-config-mobile-accent);
		font-weight: var(--boopi-font-weight-medium);
		padding-inline: var(--boopi-space-2);
	}

	.boopi-configurator__step-actions [data-boopi-step-next] {
		background: var(--boopi-config-mobile-accent);
		border-color: var(--boopi-config-mobile-accent);
		color: var(--boopi-color-action-text);
	}

	.boopi-configurator__step-actions [data-boopi-step-next]:is(:hover, :focus-visible) {
		background: var(--boopi-config-mobile-step-contrast);
		border-color: var(--boopi-config-mobile-step-contrast);
	}

	.boopi-configurator__article-summary {
		display: none;
	}

	.boopi-configurator__post-details {
		background: var(--boopi-config-mobile-surface);
		border: 0;
		border-block-start: var(--boopi-border-width-strong) solid var(--boopi-config-mobile-border);
		border-radius: 0;
		margin-block-start: 0;
		padding: var(--boopi-space-5) var(--boopi-space-4);
	}

	.boopi-configurator__information-card {
		background: var(--boopi-config-mobile-surface);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	.boopi-configurator__information-card .boopi-configurator__article-summary {
		display: none;
	}

	.boopi-configurator__preview-thumbnails {
		bottom: var(--boopi-space-2);
		gap: var(--boopi-space-2);
		inset-inline-start: 50%;
		justify-content: center;
		margin: 0;
		overflow-x: auto;
		padding: 0;
		position: absolute;
		scroll-snap-type: x proximity;
		transform: translateX(-50%);
		z-index: 2;
	}

	.boopi-configurator__preview-thumbnails button {
		background: transparent;
		border: 0;
		block-size: 1rem;
		flex: 0 0 1rem;
		inline-size: 1rem;
		min-block-size: 0;
		min-inline-size: 0;
		padding: 0;
		position: relative;
		scroll-snap-align: start;
	}

	.boopi-configurator__summary-card .boopi-configurator__preview-thumbnails button {
		border: 0;
		box-shadow: none;
	}

	.boopi-configurator__preview-thumbnails button::before {
		background: var(--boopi-color-surface);
		border-radius: 50%;
		block-size: 0.55rem;
		content: "";
		inline-size: 0.55rem;
		inset: 50% auto auto 50%;
		position: absolute;
		transform: translate(-50%, -50%);
	}

	.boopi-configurator__preview-thumbnails button[aria-current="true"]::before {
		background: var(--boopi-config-mobile-accent);
	}

	.boopi-configurator__preview-thumbnails button > * {
		display: none;
	}

	.boopi-configurator__total {
		margin-block: var(--boopi-space-4);
	}

	.boopi-configurator__summary-action {
		inline-size: 100%;
	}
}

/* Future Homepage hero. */
.boopi-home-hero {
	margin-block-end: var(--boopi-space-5);
	overflow: clip;
	padding-block: var(--boopi-space-3);
	padding-block-start: clamp(var(--boopi-space-5), 3vw, var(--boopi-space-6));
}

.boopi-home-hero__content {
	max-inline-size: var(--boopi-text-measure-narrow);
}

.boopi-home-hero__eyebrow {
	color: var(--boopi-color-action);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin-block-end: var(--boopi-space-3);
	text-transform: uppercase;
}

.boopi-home-hero__title {
	color: var(--boopi-color-home-hero-heading);
	font-family: var(--boopi-font-family-playful);
	font-size: clamp(2.5rem, 2.1rem + 1.75vw, 3.5rem);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0;
}

.boopi-home-hero__summary {
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-lg);
	margin-block-end: var(--boopi-space-6);
	max-inline-size: var(--boopi-text-measure-narrow);
}

@media (min-width: 60rem) {
	.boopi-home-hero__content {
		max-inline-size: none;
	}
}

.boopi-home-hero__action,
.boopi-starter-set__action,
.boopi-how-it-works__action,
.boopi-home-value__action,
.boopi-home-world__action,
.boopi-home-hero__action:hover,
.boopi-home-hero__action:focus-visible,
.boopi-home-hero__action:visited {
	font-family: var(--boopi-font-family-playful);
	font-weight: var(--boopi-font-weight-medium);
	text-decoration: none;
}

.boopi-home-hero__action,
.boopi-home-hero__action:hover,
.boopi-home-hero__action:focus-visible,
.boopi-home-hero__action:visited {
	background: var(--boopi-color-home-hero-heading);
	border-color: var(--boopi-color-home-hero-heading);
	color: var(--boopi-color-action-text);
}

.boopi-home-hero__action {
	inline-size: 100%;
	justify-content: center;
	position: relative;
}

.boopi-home-hero__action::after {
	background: var(--boopi-color-decoration-yellow);
	block-size: 0.75rem;
	content: "";
	inline-size: 5.75rem;
	inset-block-start: calc(100% + var(--boopi-space-4));
	inset-inline-start: 50%;
	mask: url("../images/decorative/accent-wave-yellow.svg") center / 100% 100% no-repeat;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	-webkit-mask: url("../images/decorative/accent-wave-yellow.svg") center / 100% 100% no-repeat;
}

.boopi-home-hero__action:hover {
	background: var(--boopi-color-action-hover);
	border-color: var(--boopi-color-action-hover);
}

.boopi-home-hero__promises {
	display: grid;
	gap: var(--boopi-space-3) var(--boopi-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: var(--boopi-space-7) 0 0;
	padding: 0;
}

.boopi-home-hero__promises > li + li {
	margin-block-start: 0;
}

.boopi-home-hero__promise {
	align-items: center;
	color: var(--boopi-color-text-muted);
	display: flex;
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-medium);
	gap: var(--boopi-space-2);
	line-height: var(--boopi-line-height-tight);
}

.boopi-home-hero__promise .boopi-icon {
	--boopi-icon-size: var(--boopi-size-icon-lg);
	color: var(--boopi-color-action);
	flex: 0 0 auto;
}

.boopi-home-hero__promise-label > span {
	display: block;
	white-space: nowrap;
}

@media (min-width: 60rem) {
	.boopi-home-hero__promises {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-block-start: var(--boopi-space-8);
	}
}

.boopi-home-hero__media {
	background: transparent;
	border-radius: var(--boopi-radius-lg);
	box-shadow: var(--boopi-shadow-none);
	margin: var(--boopi-space-4) 0 var(--boopi-space-5);
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
	user-select: none;
}

@media (hover: hover) and (pointer: fine) {
	.boopi-home-hero__media {
		cursor: grab;
	}

	.boopi-home-hero__media.is-swiping {
		cursor: grabbing;
	}
}

.boopi-home-hero__slides {
	aspect-ratio: 4 / 5;
	display: grid;
	min-block-size: 0;
	min-inline-size: 0;
	overflow: hidden;
}

.boopi-home-hero__image {
	-webkit-user-drag: none;
	align-self: stretch;
	aspect-ratio: auto;
	display: block;
	grid-area: 1 / 1;
	height: 100%;
	min-block-size: 0;
	min-inline-size: 0;
	object-fit: contain;
	opacity: 0;
	transform: translateX(3%);
	transition: opacity var(--boopi-motion-normal), transform var(--boopi-motion-normal);
	width: 100%;
}

.boopi-home-hero__image.is-active {
	opacity: 1;
	transform: translateX(0);
	z-index: 1;
}

.boopi-home-hero__pagination {
	align-items: center;
	bottom: var(--boopi-space-6);
	display: flex;
	gap: 0;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 2;
}

.boopi-home-hero__dot {
	appearance: none;
	background: transparent;
	block-size: 1.75rem;
	border: 0;
	cursor: pointer;
	display: grid;
	inline-size: 1.75rem;
	min-block-size: 0;
	padding: 0;
	place-items: center;
}

.boopi-home-hero__dot::before {
	background: var(--boopi-color-surface);
	block-size: 0.55rem;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--boopi-color-text-muted) 24%, transparent),
		0 1px 3px color-mix(in srgb, var(--boopi-color-text) 18%, transparent);
	content: "";
	inline-size: 0.55rem;
	transition: background-color var(--boopi-motion-fast), transform var(--boopi-motion-fast);
}

.boopi-home-hero__dot.is-active::before {
	background: var(--boopi-color-home-hero-heading);
}

.boopi-home-hero__dot:hover::before {
	transform: scale(1.12);
}

.boopi-home-hero__dot:focus-visible {
	outline: 2px solid var(--boopi-color-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.boopi-home-hero__image,
	.boopi-home-hero__dot::before {
		transition: none;
	}
}

@media (min-width: 60rem) {
	.boopi-home-hero__action {
		inline-size: auto;
	}

	.boopi-home-hero__title {
		margin-block-end: var(--boopi-space-5);
	}

	.boopi-home-hero__media {
		margin: 0;
	}
}

/* Local-first Starter Set presentation; real data replaces the preview provider. */
.boopi-home-starter-sets {
	background: var(--boopi-color-canvas);
	padding-block: clamp(var(--boopi-space-8), 6vw, calc(var(--boopi-space-8) + var(--boopi-space-5))) clamp(var(--boopi-space-2), 1vw, var(--boopi-space-4));
}

.boopi-home-starter-sets > .boopi-container {
	max-inline-size: var(--boopi-container-default);
}

/* Local-first explanation of Boopi's lasting family value. */
.boopi-home-value {
	background: color-mix(in srgb, var(--boopi-color-home-card-sage-surface) 72%, var(--boopi-color-surface));
	margin-block-start: clamp(var(--boopi-space-7), 5vw, var(--boopi-space-8));
	overflow: clip;
	padding-block: clamp(var(--boopi-space-8), 7vw, calc(var(--boopi-space-8) + var(--boopi-space-6)));
}

.boopi-home-value__decoration {
	block-size: auto;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.boopi-home-value__decoration--cloud-start {
	inset-block-start: clamp(1.5rem, 4vw, 3.5rem);
	inset-inline-start: clamp(0.5rem, 2vw, 2.5rem);
	width: clamp(3rem, 5vw, 4.75rem);
}

.boopi-home-value__decoration--cloud-end {
	inset-block-start: clamp(2.75rem, 5vw, 4.75rem);
	inset-inline-end: clamp(0.5rem, 2vw, 2.5rem);
	width: clamp(3rem, 5vw, 4.75rem);
}

.boopi-home-value__decoration--butterfly {
	inset-block-start: clamp(2rem, 4vw, 3.5rem);
	inset-inline-end: clamp(7rem, 10vw, 11rem);
	width: clamp(4.5rem, 7vw, 6.5rem);
}

.boopi-home-value > .boopi-container {
	max-inline-size: var(--boopi-container-default);
	position: relative;
	z-index: 1;
}

@media (max-width: 47.99rem) {
	.boopi-home-value {
		padding-block-end: var(--boopi-space-1);
	}

	.boopi-home-value__decoration {
		display: none;
	}
}

.boopi-home-value__panel {
	display: grid;
	gap: var(--boopi-space-4);
	position: relative;
}

.boopi-home-value__description {
	color: var(--boopi-color-text-muted);
}

.boopi-home-value__description,
.boopi-home-value__benefit-title {
	margin-block: 0;
}

.boopi-home-value__benefits {
	background: var(--boopi-color-home-card-sage-surface);
	border: var(--boopi-home-card-border-width) solid var(--boopi-color-home-card-border);
	border-radius: var(--boopi-home-card-radius);
	box-shadow: var(--boopi-home-card-shadow);
	display: grid;
	gap: var(--boopi-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 3.5rem;
	list-style: none;
	margin: 0;
	overflow: clip;
	padding: clamp(2.75rem, 6vw, 3.5rem) clamp(var(--boopi-space-4), 2vw, var(--boopi-space-6)) clamp(5.5rem, 8vw, 6.75rem);
	position: relative;
	z-index: 1;
}

.boopi-home-value__garden {
	block-size: clamp(5.5rem, 10vw, 8rem);
	inset-block-end: var(--boopi-home-card-border-width);
	inset-inline: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.boopi-home-value__garden-image {
	block-size: auto;
	display: block;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-inline-size: none;
	position: absolute;
	width: 100%;
}

@media (min-width: 48rem) {
	.boopi-home-value__garden {
		inset-block-end: -0.75rem;
	}
}

.boopi-home-value__benefits > li + li {
	margin-block-start: 0;
}

.boopi-home-value__benefit,
.boopi-home-value__more {
	--boopi-home-value-accent: var(--boopi-color-action-sage);
	background: color-mix(in srgb, var(--boopi-color-surface) 90%, var(--boopi-color-canvas));
	border: var(--boopi-home-card-border-width) solid color-mix(in srgb, var(--boopi-color-surface) 72%, var(--boopi-color-home-card-border));
	border-radius: var(--boopi-home-card-radius);
	box-shadow: var(--boopi-shadow-md);
	display: grid;
	gap: var(--boopi-space-4);
	min-inline-size: 0;
	padding: 3.25rem var(--boopi-space-5) var(--boopi-space-5);
	position: relative;
	z-index: 2;
}

.boopi-home-value__benefit {
	grid-template-rows: auto 1fr;
}

.boopi-home-value__more {
	grid-template-rows: auto 1fr auto;
}

.boopi-home-value__more .boopi-home-value__card-header {
	display: grid;
}

.boopi-home-value__card-header {
	display: block;
	min-block-size: 3.75rem;
	text-align: center;
}

.boopi-home-value__card-header--without-icon {
	display: block;
}

.boopi-home-value__more-title {
	color: var(--boopi-home-value-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: 1.375rem;
	font-weight: var(--boopi-font-weight-semibold);
	margin: 0;
}

.boopi-home-value__more-title,
.boopi-home-value__more > .boopi-home-value__description {
	display: block;
}

.boopi-home-value__motif {
	align-items: center;
	background: var(--boopi-color-home-card-sage-surface);
	border: 0.35rem solid color-mix(in srgb, var(--boopi-color-surface) 86%, transparent);
	border-radius: 50%;
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-home-value-accent);
	display: flex;
	block-size: 4rem;
	inline-size: 4rem;
	inset-block-start: -2rem;
	inset-inline-start: 50%;
	justify-content: center;
	position: absolute;
	transform: translateX(-50%);
}

.boopi-home-value__motif .boopi-icon {
	--boopi-icon-size: 2rem;
	stroke-width: 1.4;
}

.boopi-home-value__benefit-title {
	color: var(--boopi-home-value-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-home-card-title);
	font-weight: var(--boopi-font-weight-medium);
	text-align: center;
}

.boopi-home-value__description {
	font-size: var(--boopi-font-size-md);
	text-align: center;
}

.boopi-home-value__action {
	background: var(--boopi-color-action-sage);
	border-color: transparent;
	color: var(--boopi-color-action-text);
	margin-block-start: auto;
	text-decoration: none;
	white-space: nowrap;
}

.boopi-home-value__action:is(:hover, :focus-visible) {
	background: var(--boopi-color-action-sage-hover);
	border-color: transparent;
	color: var(--boopi-color-action-text);
	text-decoration: none;
}

@media (min-width: 48rem) {
	.boopi-home-value__more-title,
	.boopi-home-value__more > .boopi-home-value__description {
		display: block;
	}

	.boopi-home-value__more .boopi-home-value__card-header {
		display: grid;
	}

	.boopi-home-value__more {
		grid-template-rows: auto 1fr auto;
	}

	.boopi-home-value__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3.5rem;
	}

}

@media (max-width: 29.99rem) {
	.boopi-home-value__benefits {
		column-gap: var(--boopi-space-2);
		padding-inline: var(--boopi-space-2);
		row-gap: 3.5rem;
	}

	.boopi-home-value__benefit,
	.boopi-home-value__more {
		padding: 3rem var(--boopi-space-2) var(--boopi-space-4);
	}

	.boopi-home-value__benefit-title,
	.boopi-home-value__more-title {
		font-size: var(--boopi-font-size-md);
	}

	.boopi-home-value__description {
		font-size: var(--boopi-font-size-sm);
	}

	.boopi-home-value__action {
		font-size: var(--boopi-font-size-sm);
		inline-size: 100%;
		padding-inline: var(--boopi-space-2);
	}
}

@media (max-width: 47.99rem) {
	.boopi-home-value__benefit,
	.boopi-home-value__more {
		gap: var(--boopi-space-2);
	}

	.boopi-home-value__more-title {
		font-size: 1.5rem;
	}
}

/* Four-card family promise composition; illustrations can be supplied by content later. */
.boopi-home-value__panel {
	gap: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-8));
}

.boopi-home-value__section-header {
	align-items: end;
	display: grid;
	gap: var(--boopi-space-4);
	grid-template-columns: 1fr;
	text-align: start;
}

.boopi-home-value__eyebrow,
.boopi-home-value__section-title {
	margin-block: 0;
}

.boopi-home-value__eyebrow {
	color: var(--boopi-color-action-sage);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.boopi-home-value__section-title {
	color: var(--boopi-color-action-sage-hover);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-home-section-title);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-home-value__section-copy {
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-lg);
	line-height: var(--boopi-line-height-body);
	margin: 0;
	max-inline-size: 36rem;
}

.boopi-home-value__benefits {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	gap: clamp(var(--boopi-space-3), 2vw, var(--boopi-space-5));
	grid-template-columns: 1fr;
	overflow: visible;
	padding: 0;
	row-gap: clamp(var(--boopi-space-4), 3vw, var(--boopi-space-6));
}

.boopi-home-value__benefit,
.boopi-home-value__more {
	border-color: color-mix(in srgb, var(--boopi-home-value-accent) 18%, transparent);
	box-shadow: var(--boopi-shadow-sm);
	gap: var(--boopi-space-4);
	grid-template-rows: minmax(11rem, auto) auto 1fr;
	padding: var(--boopi-space-4) var(--boopi-space-5) var(--boopi-space-5);
}

.boopi-home-value__benefit--1 {
	--boopi-home-value-accent: var(--boopi-color-home-value-coral-accent);
	background: var(--boopi-color-home-value-coral-surface);
}

.boopi-home-value__benefit--2 {
	--boopi-home-value-accent: var(--boopi-color-home-value-sage-accent);
	background: var(--boopi-color-home-value-sage-surface);
}

.boopi-home-value__benefit--3 {
	--boopi-home-value-accent: var(--boopi-color-home-value-gold-accent);
	background: var(--boopi-color-home-value-gold-surface);
}

.boopi-home-value__benefit--3 .boopi-home-value__tag {
	color: var(--boopi-color-action-gold-text);
}

.boopi-home-value__more {
	--boopi-home-value-accent: var(--boopi-color-home-value-blue-accent);
	background: var(--boopi-color-home-value-blue-surface);
	grid-template-rows: minmax(11rem, auto) auto 1fr auto;
}

.boopi-home-value__media {
	align-items: center;
	display: flex;
	justify-content: center;
	min-block-size: 11rem;
	overflow: hidden;
}

.boopi-home-value__media > img {
	block-size: 100%;
	inline-size: 100%;
	max-block-size: 14rem;
	object-fit: contain;
}

.boopi-home-value__media-placeholder {
	align-items: center;
	background: color-mix(in srgb, var(--boopi-home-value-accent) 9%, var(--boopi-color-surface));
	border-radius: 50%;
	color: var(--boopi-home-value-accent);
	display: flex;
	inline-size: min(100%, 11rem);
	aspect-ratio: 1;
	justify-content: center;
}

.boopi-home-value__media-placeholder .boopi-icon {
	--boopi-icon-size: clamp(3.5rem, 8vw, 5rem);
	stroke-width: 1.25;
}

.boopi-home-value__card-header {
	min-block-size: 0;
}

.boopi-home-value__benefit-title,
.boopi-home-value__more-title {
	color: var(--boopi-home-value-accent);
	font-size: clamp(var(--boopi-font-size-lg), 1.7vw, var(--boopi-font-size-xl));
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-home-value__more-title,
.boopi-home-value__more > .boopi-home-value__description {
	display: block;
}

.boopi-home-value__action {
	background: var(--boopi-home-value-accent);
	justify-self: stretch;
}

.boopi-home-value__action .boopi-icon {
	--boopi-icon-size: var(--boopi-size-icon-sm);
}

.boopi-home-value__tag {
	align-items: center;
	align-self: end;
	background: var(--boopi-home-value-accent);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-action-text);
	display: inline-flex;
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-semibold);
	justify-content: center;
	letter-spacing: 0.06em;
	min-block-size: 2rem;
	padding: var(--boopi-space-1) var(--boopi-space-3);
	text-align: center;
	text-transform: uppercase;
}

.boopi-home-value__action:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--boopi-home-value-accent) 86%, black);
}

@media (max-width: 39.99rem) {
	.boopi-home-value__benefits {
		gap: var(--boopi-space-3);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.boopi-home-value__benefit,
	.boopi-home-value__more {
		gap: var(--boopi-space-2);
		grid-template-rows: minmax(7rem, auto) auto 1fr;
		padding: var(--boopi-space-3);
	}

	.boopi-home-value__more {
		grid-template-rows: minmax(7rem, auto) auto 1fr auto;
	}

	.boopi-home-value__media {
		min-block-size: 7rem;
	}

	.boopi-home-value__benefit-title,
	.boopi-home-value__more-title {
		font-size: var(--boopi-font-size-md);
	}

	.boopi-home-value__description,
	.boopi-home-value__action {
		font-size: var(--boopi-font-size-sm);
	}

	.boopi-home-value__tag {
		font-size: 0.625rem;
		letter-spacing: 0.03em;
		padding-inline: var(--boopi-space-2);
	}

	.boopi-home-value__action {
		padding-inline: var(--boopi-space-2);
	}
}

@media (min-width: 40rem) {
	.boopi-home-value__section-header {
		gap: clamp(var(--boopi-space-6), 6vw, var(--boopi-space-8));
		grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
	}

	.boopi-home-value__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75rem) {
	.boopi-home-value__section-title {
		font-size: 3rem;
	}
}

@media (min-width: 75rem) {
	.boopi-home-value__benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (forced-colors: active) {
	.boopi-home-value__benefit,
	.boopi-home-value__more {
		border: var(--boopi-border-width) solid CanvasText;
	}
}

.boopi-home-value__paw-trail {
	display: none;
}

/* Local-first Boopi World ending; final editorial ownership belongs to EPIC-012. */
.boopi-home-world {
	background: var(--boopi-color-canvas);
	pointer-events: none;
	position: relative;
}

.boopi-home-world__stage {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: none;
}

.boopi-home-world__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: var(--boopi-space-7) clamp(var(--boopi-space-4), 4vw, var(--boopi-space-7)) var(--boopi-space-5);
	pointer-events: auto;
	text-align: center;
}

.boopi-home-world__eyebrow {
	color: var(--boopi-color-brand-primary);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: 0.08em;
	margin: 0 0 var(--boopi-space-2);
	text-transform: uppercase;
}

.boopi-home-world__title {
	color: var(--boopi-color-action);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin: 0;
}

.boopi-home-world__description {
	color: var(--boopi-color-text-muted);
	margin: var(--boopi-space-3) 0 0;
	max-inline-size: 38rem;
}

.boopi-home-world__action {
	background: var(--boopi-color-action);
	border-color: transparent;
	color: var(--boopi-color-action-text);
	margin-block-start: var(--boopi-space-5);
	text-decoration: none;
}

.boopi-home-world__action:is(:hover, :focus-visible) {
	background: var(--boopi-color-action-hover);
	border-color: transparent;
	color: var(--boopi-color-action-text);
	text-decoration: none;
}

.boopi-home-world__media {
	aspect-ratio: 3344 / 1602;
	order: 2;
	overflow: hidden;
	pointer-events: none;
}

.boopi-home-world__image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: center bottom;
}

@media (min-width: 48rem) {
	.boopi-home-world {
		margin-block-start: var(--boopi-space-6);
	}

	.boopi-home-world__stage {
		aspect-ratio: 3344 / 1602;
		position: relative;
	}

	.boopi-home-world__content {
		inset-block-start: calc(clamp(var(--boopi-space-6), 6vw, var(--boopi-space-8)) + 6.25rem);
		inset-inline: 20%;
		isolation: isolate;
		padding: 0;
		position: absolute;
		z-index: 1;
	}

	.boopi-home-world__media {
		aspect-ratio: auto;
		inset: 0;
		position: absolute;
	}

}

@media (min-width: 64rem) {
	.boopi-home-world {
		margin-block-start: calc((2 * var(--boopi-space-6)) + var(--boopi-space-8));
	}

	.boopi-home-world__stage {
		overflow: visible;
	}

	.boopi-home-world__content {
		transform: translateY(-14.375rem);
	}

	.boopi-home-value__paw-trail {
		display: block;
	}

	.boopi-home-value__paw--first {
		inset-block-end: 4%;
		inset-inline-end: 12%;
		opacity: 0.2;
		transform: rotate(-28deg) scale(0.72);
	}

	.boopi-home-value__paw--second {
		inset-block-end: 1%;
		inset-inline-end: 8%;
		opacity: 0.18;
		transform: rotate(-18deg) scale(0.68);
	}

	.boopi-home-value__paw--third {
		inset-block-end: -2%;
		inset-inline-end: 4%;
		opacity: 0.16;
		transform: rotate(-8deg) scale(0.62);
	}
}

@media (min-width: 75rem) {
	.boopi-home-value__benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--boopi-space-4);
	}
}

@media (forced-colors: active) {
	.boopi-home-value__benefits {
		border-color: CanvasText;
	}
}

/* About Boopi page. */
.site-main.boopi-about { padding-block: clamp(var(--boopi-space-6), 5vw, var(--boopi-space-section)) 0; }
.boopi-about :is(h1, h2, h3) { font-family: var(--boopi-font-family-playful); }
.boopi-about h2 { font-size: var(--boopi-font-size-home-section-title); font-weight: var(--boopi-font-weight-semibold); line-height: 1.12; margin-block: 0 var(--boopi-space-4); }
.boopi-about__eyebrow { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-sm); font-weight: var(--boopi-font-weight-bold); letter-spacing: .14em; margin-block: 0 var(--boopi-space-3); text-transform: uppercase; }
.boopi-about__hero { align-items: center; display: grid; gap: var(--boopi-space-7); grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr); }
.boopi-about__hero h1 { color: var(--boopi-color-brand-primary); font-size: clamp(2.75rem, 5vw, 4.75rem); font-weight: var(--boopi-font-weight-semibold); line-height: 1.04; margin-block: 0 var(--boopi-space-4); }
.boopi-about__hero > div > p:not(.boopi-about__eyebrow) { font-size: var(--boopi-font-size-lg); line-height: 1.6; margin-block: 0 var(--boopi-space-5); max-inline-size: var(--boopi-text-measure); }
.boopi-about__hero img { inline-size: 100%; max-block-size: 34rem; object-fit: contain; }
.boopi-about__action,
.boopi-about__action:visited { background: var(--boopi-color-brand-primary); border-color: var(--boopi-color-brand-primary); box-shadow: var(--boopi-shadow-sm); color: var(--boopi-color-action-text); font-family: var(--boopi-font-family-playful); font-weight: var(--boopi-font-weight-medium); gap: var(--boopi-space-2); text-decoration: none; }
@media (hover: hover) {
	.boopi-about__action:hover { background: var(--boopi-color-action-hover); border-color: var(--boopi-color-action-hover); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-action-text); text-decoration: none; transform: translateY(calc(-1 * var(--boopi-border-width))); }
}
.boopi-about__action:active { box-shadow: var(--boopi-shadow-none); transform: translateY(var(--boopi-border-width)); }
.boopi-about__story,
.boopi-about__values { background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 48%, var(--boopi-color-surface)); margin-block: var(--boopi-space-section); padding-block: var(--boopi-space-section); }
.boopi-about__section-header { align-items: end; display: grid; gap: var(--boopi-space-7); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-block-end: var(--boopi-space-7); }
.boopi-about__section-header h2 { color: var(--boopi-color-action-sage); }
.boopi-about__story .boopi-about__eyebrow { color: var(--boopi-color-action-sage); }
.boopi-about__section-header > p { margin: 0; }
.boopi-about__timeline { display: grid; gap: var(--boopi-space-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.boopi-about__timeline article { min-inline-size: 0; }
.boopi-about__timeline img { aspect-ratio: 1; inline-size: 100%; object-fit: contain; }
.boopi-about__timeline h3 { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-xl); font-weight: var(--boopi-font-weight-semibold); margin-block: var(--boopi-space-3) var(--boopi-space-2); }
.boopi-about__timeline p { line-height: 1.55; margin: 0; }
.boopi-about__founders { align-items: center; display: grid; gap: clamp(var(--boopi-space-6), 6vw, var(--boopi-space-8)); grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); }
.boopi-about__founders h2 { color: var(--boopi-color-brand-primary); }
.boopi-about__founders p:not(.boopi-about__eyebrow) { line-height: 1.6; }
.boopi-about__founder-image { position: relative; }
.boopi-about__founder-image img { inline-size: 100%; max-block-size: 34rem; object-fit: contain; }
.boopi-about__founder-image span { background: var(--boopi-color-brand-primary); border-radius: var(--boopi-radius-pill); bottom: var(--boopi-space-5); color: var(--boopi-color-surface); font-size: var(--boopi-font-size-sm); inset-inline-start: 50%; padding: var(--boopi-space-2) var(--boopi-space-3); position: absolute; transform: translateX(-50%); white-space: nowrap; }
.boopi-about__values { background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 62%, var(--boopi-color-surface)); margin-block-end: 0; }
.boopi-about__value-grid { display: grid; gap: var(--boopi-space-3); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.boopi-about__value-card { --boopi-about-value-accent: var(--boopi-color-action-pink); --boopi-about-value-surface: var(--boopi-color-home-card-pink-surface); align-items: center; background: color-mix(in srgb, var(--boopi-about-value-surface) 76%, var(--boopi-color-surface)); border: var(--boopi-home-card-border-width) solid color-mix(in srgb, var(--boopi-about-value-accent) 22%, var(--boopi-color-surface)); border-radius: var(--boopi-home-card-radius); box-shadow: var(--boopi-shadow-sm); display: flex; flex-direction: column; padding: var(--boopi-space-5) var(--boopi-space-4) var(--boopi-space-4); text-align: center; }
.boopi-about__value-card--2 { --boopi-about-value-accent: var(--boopi-color-action-sage); --boopi-about-value-surface: var(--boopi-color-home-card-sage-surface); }
.boopi-about__value-card--3 { --boopi-about-value-accent: var(--boopi-color-action-gold); --boopi-about-value-surface: var(--boopi-color-action-gold-surface); }
.boopi-about__value-card--4 { --boopi-about-value-accent: var(--boopi-color-info); --boopi-about-value-surface: var(--boopi-color-info-surface); }
.boopi-about__value-card--5 { --boopi-about-value-accent: var(--boopi-color-action-apricot); --boopi-about-value-surface: var(--boopi-color-action-apricot-surface); }
.boopi-about__values .boopi-about__section-header h2 { color: var(--boopi-color-brand-primary); }
.boopi-about__value-grid h3 { color: var(--boopi-about-value-accent); font-size: var(--boopi-font-size-xl); font-weight: var(--boopi-font-weight-bold); margin-block: var(--boopi-space-2); }
.boopi-about__value-grid p { line-height: 1.5; margin: 0; }
.boopi-about__value-illustration { block-size: 10rem; inline-size: min(100%, 10.5rem); margin-block-start: auto; object-fit: contain; padding-block-start: var(--boopi-space-2); }
.boopi-about__value-card:is(.boopi-about__value-card--1, .boopi-about__value-card--3, .boopi-about__value-card--4) .boopi-about__value-illustration { inline-size: min(100%, 14rem); padding-block-start: 0; transform: scale(1.12); }
.boopi-about__value-card:is(.boopi-about__value-card--2, .boopi-about__value-card--5) .boopi-about__value-illustration { inline-size: min(100%, 8.75rem); }
.boopi-about__value-label { background: var(--boopi-about-value-accent); border-radius: var(--boopi-radius-pill); color: var(--boopi-color-action-text); font-size: var(--boopi-font-size-sm); letter-spacing: .035em; margin-block-start: var(--boopi-space-2); padding: var(--boopi-space-1) var(--boopi-space-4); text-transform: uppercase; width: 100%; }
.boopi-about__value-card--3 .boopi-about__value-label { color: var(--boopi-color-action-gold-text); }
.boopi-about__closing { background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 62%, var(--boopi-color-surface)); display: grid; isolation: isolate; min-block-size: clamp(25rem, 34vw, 39rem); overflow: hidden; position: relative; }
.boopi-about__closing > * { grid-area: 1 / 1; }
.boopi-about__closing > img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: center; z-index: 0; }
.boopi-about__closing > .boopi-container { align-items: center; display: flex; inline-size: 100%; position: relative; z-index: 1; }
.boopi-about__closing-copy { inset-block-start: calc(-1 * var(--boopi-space-4)); margin-inline-start: clamp(var(--boopi-space-7), 7vw, 7.5rem); max-inline-size: 44%; padding-block: var(--boopi-space-7); position: relative; }
.boopi-about__closing h2 { color: var(--boopi-color-action-sage); }

@media (max-width: 64rem) {
	.boopi-about__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.boopi-about__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.boopi-about__value-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
	.site-main.boopi-about { padding-block-start: var(--boopi-space-5); }
	.boopi-about__hero,
	.boopi-about__section-header,
	.boopi-about__founders { grid-template-columns: 1fr; }
	.boopi-about__hero { gap: var(--boopi-space-5); }
	.boopi-about__hero img { grid-row: 1; }
	.boopi-about__hero > div { grid-row: 2; }
	.boopi-about__section-header { gap: var(--boopi-space-3); }
	.boopi-about__timeline { grid-template-columns: 1fr; }
	.boopi-about__timeline article { text-align: center; }
	.boopi-about__timeline img { max-block-size: 17rem; }
	.boopi-about__founders { gap: var(--boopi-space-5); }
	.boopi-about__value-grid { grid-template-columns: 1fr; }
	.boopi-about__value-grid article:last-child { grid-column: auto; }
	.boopi-about__value-grid p { min-block-size: 0; }
	.boopi-about__closing { min-block-size: 38rem; }
	.boopi-about__closing > img { object-position: 72% center; }
	.boopi-about__closing > .boopi-container { align-items: flex-start; padding-block-start: var(--boopi-space-5); }
	.boopi-about__closing-copy { inset-block-start: 0; margin-inline-start: 0; max-inline-size: 100%; padding-block: 0; }
	.boopi-about__closing .boopi-button { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.boopi-about__action:is(:hover, :active) { transform: none; }
}

/* Contact page (EPIC-020). */
.site-main.boopi-contact { background: linear-gradient(180deg, var(--boopi-color-canvas), color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 28%, var(--boopi-color-canvas))); max-width: none; padding-block: clamp(var(--boopi-space-6), 5vw, var(--boopi-space-section)) var(--boopi-space-section); }
.boopi-contact :is(h1, h2, h3) { font-family: var(--boopi-font-family-playful); }
.boopi-contact__eyebrow { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-sm); font-weight: var(--boopi-font-weight-bold); letter-spacing: .14em; margin: 0 0 var(--boopi-space-3); text-transform: uppercase; }
.boopi-contact__hero { align-items: center; display: grid; gap: var(--boopi-space-7); grid-template-columns: minmax(0, .88fr) minmax(22rem, 1.12fr); padding-block-end: var(--boopi-space-section); }
.boopi-contact__hero h1 { color: var(--boopi-color-brand-primary); font-size: clamp(3rem, 5vw, 4.75rem); font-weight: var(--boopi-font-weight-semibold); line-height: 1.04; margin: 0 0 var(--boopi-space-3); }
.boopi-contact__hero div > p:not(.boopi-contact__eyebrow) { font-size: var(--boopi-font-size-lg); line-height: 1.6; margin: 0 0 var(--boopi-space-5); max-inline-size: var(--boopi-text-measure-narrow); }
.boopi-contact__hero img { inline-size: 100%; max-block-size: 29rem; object-fit: contain; }
.boopi-contact__action,
.boopi-contact__action:visited { background: var(--boopi-color-brand-primary); border-color: var(--boopi-color-brand-primary); box-shadow: var(--boopi-shadow-sm); color: var(--boopi-color-action-text); font-family: var(--boopi-font-family-playful); font-weight: var(--boopi-font-weight-medium); gap: var(--boopi-space-2); text-decoration: none; }
@media (hover: hover) {
	.boopi-contact__action:hover { background: var(--boopi-color-action-hover); border-color: var(--boopi-color-action-hover); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-action-text); text-decoration: none; transform: translateY(calc(-1 * var(--boopi-border-width))); }
}
.boopi-contact__content { display: grid; gap: var(--boopi-space-6); }
.boopi-contact__primary { align-items: stretch; display: grid; gap: var(--boopi-space-5); grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
.boopi-contact__form-card,
.boopi-contact__details,
.boopi-contact__closing { border: var(--boopi-home-card-border-width) solid var(--boopi-color-home-card-border); border-radius: var(--boopi-home-card-radius); box-shadow: var(--boopi-shadow-sm); }
.boopi-contact__form-card { background: var(--boopi-color-home-card-lilac-surface); padding: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-7)); }
.boopi-contact__form-card h2,
.boopi-contact__details h2,
.boopi-contact__quick > h2 { font-size: var(--boopi-font-size-home-section-title); font-weight: var(--boopi-font-weight-semibold); margin: 0 0 var(--boopi-space-5); text-align: center; }
.boopi-contact__form-card h2 { color: var(--boopi-color-action-lilac); }
.boopi-contact__form-card form { background: color-mix(in srgb, var(--boopi-color-surface) 86%, transparent); border-radius: var(--boopi-radius-lg); display: grid; gap: var(--boopi-space-2); padding: var(--boopi-space-5); }
.boopi-contact__form-card label { font-size: var(--boopi-font-size-sm); font-weight: var(--boopi-font-weight-semibold); margin-block-start: var(--boopi-space-2); }
.boopi-contact__form-card :is(input, select, textarea) { background: var(--boopi-color-surface); border: var(--boopi-border-width) solid var(--boopi-color-border); border-radius: var(--boopi-radius-sm); inline-size: 100%; }
.boopi-contact__form-card textarea { min-block-size: 10rem; resize: vertical; }
.boopi-contact__field-error { color: var(--boopi-color-error); display: none; font-size: var(--boopi-font-size-xs); line-height: 1.4; }
.boopi-contact__email:user-invalid { border-color: var(--boopi-color-error); }
.boopi-contact__email:user-invalid + .boopi-contact__field-error { display: block; }
.boopi-contact__submit { inline-size: 100%; justify-content: center; margin-block-start: var(--boopi-space-3); }
.boopi-contact__submit:disabled { background: var(--boopi-color-disabled-surface); border-color: var(--boopi-color-disabled-surface); box-shadow: none; color: var(--boopi-color-disabled-text); cursor: not-allowed; text-decoration: none; }
.boopi-contact__preview-notice { align-items: flex-start; color: var(--boopi-color-text-muted); display: flex; font-size: var(--boopi-font-size-xs); gap: var(--boopi-space-2); justify-content: center; line-height: 1.45; margin: var(--boopi-space-3) 0 0; }
.boopi-contact__preview-notice .boopi-icon { flex: 0 0 auto; }
.boopi-contact__details { background: var(--boopi-color-home-card-pink-surface); padding: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-7)); }
.boopi-contact__details h2 { color: var(--boopi-color-brand-primary); }
.boopi-contact__detail-list { display: grid; gap: var(--boopi-space-4); list-style: none; margin: 0 0 var(--boopi-space-5); padding: 0; }
.boopi-contact__detail-list li { align-items: flex-start; display: grid; gap: var(--boopi-space-3); grid-template-columns: auto 1fr; }
.boopi-contact__detail-list li > span { align-items: center; background: var(--boopi-color-brand-primary); border-radius: 50%; color: var(--boopi-color-surface); display: inline-flex; flex: 0 0 auto; height: 2.75rem; justify-content: center; width: 2.75rem; }
.boopi-contact__details strong { color: var(--boopi-color-brand-primary); display: block; font-size: var(--boopi-font-size-base); margin-block-end: var(--boopi-space-1); }
.boopi-contact__detail-list li p,
.boopi-contact__details > p { line-height: 1.5; margin: 0; }
.boopi-contact__details h3 { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-lg); margin: 0 0 var(--boopi-space-2); }
.boopi-contact__details > h3 { font-weight: var(--boopi-font-weight-medium); }
.boopi-contact__details > .boopi-contact__social { align-items: center; display: flex; gap: var(--boopi-space-5); grid-template-columns: none; justify-content: center; list-style: none; margin: var(--boopi-space-7) 0 0; padding: 0; width: 100%; }
.boopi-contact__social li { align-items: center; display: flex; justify-content: center; }
.boopi-contact__social > li + li { margin-block-start: 0; }
.boopi-contact__social :is(a, span) { align-items: center; background: var(--boopi-color-brand-primary); border-radius: 50%; box-shadow: var(--boopi-shadow-sm); color: var(--boopi-color-surface); cursor: pointer; display: inline-flex; height: 2.75rem; justify-content: center; line-height: 0; transition: background-color var(--boopi-motion-fast), box-shadow var(--boopi-motion-fast), transform var(--boopi-motion-fast); width: 2.75rem; }
.boopi-contact__social .boopi-icon { display: block; height: 1.35rem; width: 1.35rem; }
@media (hover: hover) {
	.boopi-contact__social :is(a, span):hover { background: var(--boopi-color-action-hover); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-surface); transform: translateY(-.125rem); }
}
.boopi-contact__quick { padding-block: var(--boopi-space-4); }
.boopi-contact__quick > h2 { color: var(--boopi-color-brand-primary); }
.boopi-contact__quick > .boopi-faq__quick-links { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 4rem; }
.boopi-contact__closing { align-items: center; background: var(--boopi-color-home-card-pink-surface); display: grid; gap: var(--boopi-space-6); grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); overflow: hidden; padding: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-7)); }
.boopi-contact__closing img { inline-size: 100%; max-block-size: 18rem; object-fit: contain; }
.boopi-contact__closing h2 { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-home-section-title); font-weight: var(--boopi-font-weight-semibold); margin: 0 0 var(--boopi-space-3); }
.boopi-contact__closing p { line-height: 1.55; margin: 0 0 var(--boopi-space-4); }
.boopi-contact__closing ul { display: grid; gap: var(--boopi-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.boopi-contact__closing li { align-items: center; color: var(--boopi-color-text-muted); display: flex; font-size: var(--boopi-font-size-sm); gap: var(--boopi-space-2); }
.boopi-contact__closing li .boopi-icon { color: var(--boopi-color-brand-primary); flex: 0 0 auto; }

@media (max-width: 48rem) {
	.site-main.boopi-contact { padding-block-start: var(--boopi-space-5); }
	.boopi-contact__hero,
	.boopi-contact__primary,
	.boopi-contact__closing { grid-template-columns: 1fr; }
	.boopi-contact__hero { gap: var(--boopi-space-4); padding-block-end: var(--boopi-space-7); }
	.boopi-contact__hero img { grid-row: 1; max-block-size: 20rem; }
	.boopi-contact__hero > div { grid-row: 2; }
	.boopi-contact__action { inline-size: 100%; justify-content: center; }
	.boopi-contact__form-card,
	.boopi-contact__details,
	.boopi-contact__closing { padding: var(--boopi-space-4); }
	.boopi-contact__form-card form { padding: var(--boopi-space-4); }
	.boopi-contact__closing ul { grid-template-columns: 1fr; }
	.boopi-contact__quick > .boopi-faq__quick-links { grid-template-columns: 1fr; }
	.boopi-contact__closing img { max-block-size: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
	.boopi-contact__action,
	.boopi-contact__quick .boopi-faq__quick-link,
	.boopi-contact__social :is(a, span) { transition: none; }
	.boopi-contact__action:is(:hover, :active),
	.boopi-contact__quick .boopi-faq__quick-link:hover,
	.boopi-contact__social :is(a, span):hover { transform: none; }
}

/* FAQ page (EPIC-013). */
.site-main.boopi-faq {
	background: linear-gradient(180deg, var(--boopi-color-canvas), color-mix(in srgb, var(--boopi-color-home-card-lilac-surface) 22%, var(--boopi-color-canvas)));
	max-width: none;
	padding-block-end: var(--boopi-space-8);
}

.boopi-faq__hero { background: var(--boopi-color-canvas); padding-block: clamp(3rem, 7vw, 6rem) var(--boopi-space-7); }
.boopi-faq__hero-inner { align-items: center; column-gap: var(--boopi-space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); grid-template-rows: auto auto; row-gap: 0; }
.boopi-faq__hero-copy { align-self: end; grid-column: 1; grid-row: 1; max-inline-size: 34rem; }
.boopi-faq__eyebrow,
.boopi-faq__section-label { color: var(--boopi-color-brand-primary); font-size: var(--boopi-font-size-sm); font-weight: var(--boopi-font-weight-bold); letter-spacing: 0.04em; margin: 0 0 var(--boopi-space-3); text-transform: uppercase; }
.boopi-faq__eyebrow { display: block; }
.boopi-faq__hero h1,
.boopi-faq__contact h2 { color: var(--boopi-color-brand-primary); font-family: var(--boopi-font-family-playful); font-weight: var(--boopi-font-weight-semibold); }
.boopi-faq__hero h1 { font-size: clamp(2.8rem, 5vw, 4.6rem); letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 var(--boopi-space-4); }
.boopi-faq__hero-copy > p:not(.boopi-faq__eyebrow, .screen-reader-text) { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6; margin: 0 0 var(--boopi-space-5); }
.boopi-faq__hero-image { grid-column: 2; grid-row: 1 / span 2; inline-size: 100%; justify-self: center; max-block-size: 23rem; object-fit: contain; }
.boopi-faq__search-wrap { align-self: start; grid-column: 1; grid-row: 2; inline-size: 100%; }
.boopi-faq__search { align-items: center; background: var(--boopi-color-surface); border: var(--boopi-border-width) solid var(--boopi-color-border); border-radius: var(--boopi-radius-md); display: flex; max-inline-size: 31rem; padding: 0; position: relative; }
.boopi-faq__search:focus-within { border-color: var(--boopi-color-brand-primary); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--boopi-color-brand-primary) 18%, transparent); }
.boopi-faq__search label { display: block; inline-size: 100%; margin: 0; position: relative; }
.boopi-faq__search-icon { align-items: center; block-size: 3.25rem; color: var(--boopi-color-text-muted); display: flex; inset-block-start: 0; inset-inline-start: 0; justify-content: center; pointer-events: none; position: absolute; width: 3.25rem; }
.boopi-faq__search input { background: transparent; border: 0; box-shadow: none; inline-size: 100%; min-block-size: 3.25rem; outline: 0; padding: 0 6.5rem 0 3.25rem; }
.boopi-faq__search input::-webkit-search-cancel-button { appearance: none; display: none; }
.boopi-faq__search input:focus-visible { box-shadow: none; outline: 0; }
.boopi-faq__search-clear,
.boopi-faq__search-submit { align-items: center; background: transparent; border: 0; block-size: calc(3.25rem - (2 * var(--boopi-border-width))); color: var(--boopi-color-action); cursor: pointer; display: inline-flex; inset-block-start: var(--boopi-border-width); inline-size: calc(3.25rem - (2 * var(--boopi-border-width))); justify-content: center; min-block-size: 0; padding: var(--boopi-space-2); position: absolute; z-index: 1; }
.boopi-faq__search-clear { color: var(--boopi-color-disabled-text); inset-inline-end: 3.25rem; }
.boopi-faq__search-submit { inset-inline-end: var(--boopi-border-width); }
.boopi-faq__search-clear:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--boopi-color-border) 28%, transparent); border-radius: 50%; }
.boopi-faq__search-clear:active { background: color-mix(in srgb, var(--boopi-color-border) 44%, transparent); }
.boopi-faq__search :is(button[hidden], .boopi-faq__search-suggestions[hidden]) { display: none; }
.boopi-faq__search-suggestions { background: var(--boopi-color-surface); border: var(--boopi-border-width) solid var(--boopi-color-border); border-radius: var(--boopi-radius-md); box-shadow: var(--boopi-shadow-md); inset-block-start: calc(100% + var(--boopi-space-1)); inset-inline: 0; list-style: none; margin: 0; max-block-size: 16rem; overflow-y: auto; padding: var(--boopi-space-1); position: absolute; text-align: start; z-index: var(--boopi-layer-dropdown); }
.boopi-faq__search-suggestions li + li { margin-block-start: 0; }
.boopi-faq__search-suggestions button { background: transparent; border: 0; border-radius: var(--boopi-radius-sm); color: var(--boopi-color-text); cursor: pointer; display: block; font: inherit; inline-size: 100%; padding: var(--boopi-space-2) var(--boopi-space-3); text-align: start; }
.boopi-faq__search-suggestions button:is(:hover, :focus-visible) { background: var(--boopi-color-surface-brand); color: var(--boopi-color-action); }

.boopi-faq__content { display: grid; gap: var(--boopi-space-6); }
.boopi-faq__quick-links { display: grid; gap: var(--boopi-space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--boopi-space-7); }
.boopi-faq__quick-links a { --boopi-faq-card-surface: var(--boopi-color-home-card-sage-surface); --boopi-faq-card-accent: var(--boopi-color-action-sage); align-items: center; background: var(--boopi-faq-card-surface); border: var(--boopi-home-card-border-width) solid color-mix(in srgb, var(--boopi-faq-card-accent) 22%, var(--boopi-color-surface)); border-radius: var(--boopi-home-card-radius); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-text); display: flex; flex-direction: column; gap: var(--boopi-space-3); min-block-size: 12.5rem; padding: 3.25rem var(--boopi-space-5) var(--boopi-space-5); position: relative; text-align: center; text-decoration: none; }
.boopi-faq__quick-links .boopi-faq__quick-link--2 { --boopi-faq-card-surface: var(--boopi-color-home-card-lilac-surface); --boopi-faq-card-accent: var(--boopi-color-action-lilac); }
.boopi-faq__quick-links .boopi-faq__quick-link--3 { --boopi-faq-card-surface: var(--boopi-color-home-card-pink-surface); --boopi-faq-card-accent: var(--boopi-color-action-pink); }
.boopi-faq__quick-links .boopi-faq__quick-link--4 { --boopi-faq-card-surface: var(--boopi-color-info-surface); --boopi-faq-card-accent: var(--boopi-color-info); }
.boopi-faq__quick-links a > span { align-items: center; background: var(--boopi-faq-card-surface); border: 0.35rem solid color-mix(in srgb, var(--boopi-color-surface) 86%, transparent); border-radius: 50%; box-shadow: var(--boopi-shadow-sm); color: var(--boopi-faq-card-accent); display: inline-flex; height: 4rem; inset-block-start: -2rem; inset-inline-start: 50%; justify-content: center; position: absolute; transform: translateX(-50%); width: 4rem; }
.boopi-faq__quick-links a > span .boopi-icon { height: 1.8rem; width: 1.8rem; }
.boopi-faq__quick-links strong { color: var(--boopi-faq-card-accent); font-family: var(--boopi-font-family-playful); font-size: var(--boopi-font-size-home-card-title); font-weight: var(--boopi-font-weight-medium); }
.boopi-faq__quick-links small { line-height: 1.5; }
.boopi-faq__quick-links a > .boopi-icon { color: var(--boopi-faq-card-accent); margin-block-start: auto; }
.boopi-faq__quick-links a > .boopi-icon { border-radius: 50%; box-sizing: content-box; padding: var(--boopi-space-2); transition: background-color var(--boopi-motion-fast), color var(--boopi-motion-fast); }
@media (hover: hover) {
	.boopi-faq__quick-links a:hover { box-shadow: var(--boopi-shadow-md); transform: translateY(-0.125rem); }
	.boopi-faq__quick-links a:hover > .boopi-icon { background: var(--boopi-faq-card-accent); color: var(--boopi-color-surface); }
}
.boopi-faq__quick-links a:active > .boopi-icon { background: color-mix(in srgb, var(--boopi-faq-card-accent) 84%, var(--boopi-color-text)); color: var(--boopi-color-surface); }

.boopi-faq__answers { border-radius: var(--boopi-home-card-radius); padding: clamp(1.25rem, 3vw, 2rem); }
.boopi-faq__answers { background: color-mix(in srgb, var(--boopi-color-home-card-lilac-surface) 62%, var(--boopi-color-surface)); }
.boopi-faq__answers > .boopi-faq__section-label { color: var(--boopi-color-action-lilac); font-family: var(--boopi-font-family-playful); font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: var(--boopi-font-weight-semibold); letter-spacing: normal; margin-block-end: var(--boopi-space-5); text-transform: none; }
.boopi-faq__question-list { display: grid; gap: var(--boopi-space-5); }
.boopi-faq__question-group { display: grid; gap: var(--boopi-space-3); scroll-margin-block-start: 8rem; }
.boopi-faq__question-group h3 { color: var(--boopi-color-action-lilac); font-family: var(--boopi-font-family-playful); font-size: 1.25rem; font-weight: var(--boopi-font-weight-semibold); margin: 0 0 var(--boopi-space-1); }
.boopi-faq__question-list details { background: var(--boopi-color-surface); border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-color-home-card-lilac-border) 60%, var(--boopi-color-border)); border-radius: var(--boopi-radius-md); overflow: hidden; }
.boopi-faq__question-list summary { align-items: center; color: var(--boopi-color-action-lilac); cursor: pointer; display: flex; font-weight: var(--boopi-font-weight-semibold); gap: var(--boopi-space-4); justify-content: space-between; list-style: none; padding: var(--boopi-space-4); }
.boopi-faq__question-list summary::-webkit-details-marker { display: none; }
.boopi-faq__question-list summary > .boopi-icon { flex: 0 0 1.4rem; height: 1.4rem; transition: transform var(--boopi-motion-fast); width: 1.4rem; }
.boopi-faq__question-list details[open] summary > .boopi-icon { transform: rotate(180deg); }
.boopi-faq__question-list details > div { padding: 0 var(--boopi-space-4) var(--boopi-space-4); }
.boopi-faq__question-list details p { margin: 0; }
.boopi-faq__empty { background: var(--boopi-color-surface); border-radius: var(--boopi-radius-md); margin: 0; padding: var(--boopi-space-5); }

.boopi-faq__contact { align-items: center; background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 58%, var(--boopi-color-surface)); border: var(--boopi-border-width) solid var(--boopi-color-home-card-pink-border); border-radius: var(--boopi-home-card-radius); display: grid; gap: var(--boopi-space-5); grid-template-columns: minmax(10rem, 0.6fr) minmax(0, 1.4fr) auto; overflow: hidden; padding: clamp(1.25rem, 3vw, 2rem); }
.boopi-faq__contact img { inline-size: 100%; max-block-size: 12rem; object-fit: contain; }
.boopi-faq__contact h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin: 0 0 var(--boopi-space-3); }
.boopi-faq__contact p:not(.boopi-faq__section-label) { margin: 0; max-inline-size: 38rem; }
.boopi-faq__contact-action,
.boopi-faq__contact-action:visited { background: var(--boopi-color-brand-primary); border-color: var(--boopi-color-brand-primary); box-shadow: var(--boopi-shadow-sm); color: var(--boopi-color-surface); text-decoration: none; }
@media (hover: hover) { .boopi-faq__contact-action:hover { background: var(--boopi-color-action-hover); border-color: var(--boopi-color-action-hover); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-surface); text-decoration: none; transform: translateY(-0.125rem); } }
.boopi-faq__missing { margin-block: var(--boopi-space-8); }

@media (max-width: 63.99rem) {
	.boopi-faq__quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
	.boopi-faq__contact { grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr); }
	.boopi-faq__contact-action { grid-column: 2; justify-self: start; }
}

@media (max-width: 47.99rem) {
	.site-main.boopi-faq { padding-block-end: var(--boopi-space-6); }
	.boopi-faq__hero { padding-block: var(--boopi-space-7) var(--boopi-space-5); }
	.boopi-faq__hero-inner { gap: var(--boopi-space-4); grid-template-columns: 1fr; grid-template-rows: auto auto auto; text-align: center; }
	.boopi-faq__hero-copy { align-self: center; grid-column: 1; grid-row: 1; max-inline-size: none; }
	.boopi-faq__eyebrow { justify-content: center; }
	.boopi-faq__hero h1 { font-size: clamp(2.5rem, 13vw, 3.4rem); }
	.boopi-faq__hero-image { grid-column: 1; grid-row: 2; max-block-size: 17rem; }
	.boopi-faq__search-wrap { align-self: center; grid-column: 1; grid-row: 3; }
	.boopi-faq__search { margin-inline: auto; text-align: start; }
	.boopi-faq__quick-links { column-gap: var(--boopi-space-3); row-gap: 3.5rem; }
	.boopi-faq__quick-links a { min-block-size: 11.5rem; padding: 3.25rem var(--boopi-space-4) var(--boopi-space-4); }
	.boopi-faq__answers { padding: var(--boopi-space-4); }
	.boopi-faq__contact { grid-template-columns: 1fr; text-align: center; }
	.boopi-faq__contact img { margin-inline: auto; max-block-size: 11rem; }
	.boopi-faq__contact-action { grid-column: 1; inline-size: 100%; justify-self: stretch; }
}

/* EPIC-018 legal and store information hub. */
.site-main.boopi-legal {
	max-width: none;
	padding: 0 0 var(--boopi-space-8);
}

/* Shipping, returns, and payment information (EPIC-014). */
.site-main.boopi-service-info {
	background: linear-gradient(180deg, var(--boopi-color-canvas), color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 24%, var(--boopi-color-canvas)));
	max-width: none;
	padding-block-end: var(--boopi-space-8);
}

.boopi-service-info__hero {
	background: var(--boopi-color-canvas);
	padding-block: clamp(3rem, 7vw, 6rem) var(--boopi-space-7);
}

.boopi-service-info__hero-inner {
	align-items: center;
	display: grid;
	gap: var(--boopi-space-7);
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
}

.boopi-service-info__hero h1,
.boopi-service-info__card h2 {
	color: var(--boopi-color-brand-primary);
	font-family: var(--boopi-font-family-playful);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-service-info__hero h1 {
	font-size: clamp(2.7rem, 5vw, 4.6rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 var(--boopi-space-4);
}

.boopi-service-info__hero p {
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	margin: 0;
	max-inline-size: 34rem;
}

.boopi-service-info__hero img {
	inline-size: 100%;
	max-block-size: 23rem;
	object-fit: contain;
}

.boopi-service-info__sections {
	display: grid;
	gap: var(--boopi-space-5);
	margin-block-start: var(--boopi-space-5);
}

.boopi-service-info__missing {
	background: var(--boopi-color-warning-surface);
	border-inline-start: 0.25rem solid var(--boopi-color-warning);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-sm);
	padding: var(--boopi-space-4);
}

.boopi-service-info__missing { margin-block: var(--boopi-space-8); }
.boopi-service-info__missing h1 { color: var(--boopi-color-brand-primary); }

.boopi-service-info__card {
	background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 42%, var(--boopi-color-surface));
	border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-color-home-card-pink-border) 52%, var(--boopi-color-border));
	border-radius: var(--boopi-home-card-radius);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.boopi-service-info__card,
.boopi-service-info__methods {
	scroll-margin-block-start: calc(var(--boopi-header-height, 6rem) + var(--boopi-space-4));
}

.boopi-service-info__payments,
.boopi-service-info__returns {
	background: color-mix(in srgb, var(--boopi-color-home-card-pink-surface) 42%, var(--boopi-color-surface));
}

.boopi-service-info__card h2 {
	font-size: clamp(1.45rem, 2.5vw, 2rem);
	margin: 0 0 var(--boopi-space-5);
}

.boopi-service-info__card ul {
	display: grid;
	gap: var(--boopi-space-3);
	margin: 0;
	padding-inline-start: 1.25rem;
}

.boopi-service-info__card li::marker { color: var(--boopi-color-brand-primary); }

.boopi-service-info__shipping,
.boopi-service-info__returns {
	align-items: center;
	display: grid;
	gap: var(--boopi-space-6);
	grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
}

.boopi-service-info__shipping img,
.boopi-service-info__returns img {
	inline-size: 100%;
	max-block-size: 17rem;
	object-fit: contain;
}

.boopi-service-info__shipping > img { grid-column: 2; grid-row: 1; }
.boopi-service-info__methods { border-block-start: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-color-home-card-pink-border) 55%, transparent); grid-column: 1 / -1; padding-block-start: var(--boopi-space-5); }
.boopi-service-info__methods > h2 { margin-block-end: var(--boopi-space-5); }
.boopi-service-info__method-list { display: grid; gap: var(--boopi-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boopi-service-info__method { align-items: center; display: flex; gap: var(--boopi-space-4); }
.boopi-service-info__method-mark { align-items: stretch; background: var(--boopi-color-surface); border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-color-border) 65%, transparent); border-radius: var(--boopi-radius-sm); display: flex; flex: 0 0 8.5rem; flex-direction: column; justify-content: center; overflow: hidden; }
.boopi-service-info__method-mark img { display: block; height: auto; inline-size: 100%; }
.boopi-service-info__method-mark small { font-size: 0.72rem; font-weight: var(--boopi-font-weight-bold); letter-spacing: 0.04em; line-height: 1; padding: 0.3rem 0.45rem; text-align: center; text-transform: uppercase; }
.boopi-service-info__method-mark--gogreen small { color: var(--boopi-color-success); }
.boopi-service-info__method-mark--express small { color: var(--boopi-color-brand-primary); font-style: italic; }
.boopi-service-info__method .boopi-icon { height: 1.5rem; width: 1.5rem; }
.boopi-service-info__method h3 { font-size: 1rem; margin: 0 0 var(--boopi-space-1); }
.boopi-service-info__method p { color: var(--boopi-color-text-muted); margin: 0; }

.boopi-service-info__payment-list { align-items: center; display: flex; flex-wrap: wrap; gap: var(--boopi-space-5); }
.boopi-service-info__payment { align-items: center; display: inline-flex; min-block-size: 3.75rem; }
.boopi-service-info__payment img { display: block; height: 3.75rem; max-width: 5.5rem; width: auto; }
.boopi-service-info__payment strong { color: var(--boopi-color-text); font-size: 1.05rem; white-space: nowrap; }
.boopi-service-info__payments > p { color: var(--boopi-color-text-muted); font-size: var(--boopi-font-size-sm); margin: var(--boopi-space-5) 0 0; }

.boopi-service-info__return-action,
.boopi-service-info__return-action:visited { background: var(--boopi-color-brand-primary); border-color: var(--boopi-color-brand-primary); box-shadow: var(--boopi-shadow-sm); color: var(--boopi-color-surface); font-family: var(--boopi-font-family-body); margin-block-start: var(--boopi-space-5); text-decoration: none; }

@media (hover: hover) {
	.boopi-service-info__return-action:hover { background: var(--boopi-color-action-hover); border-color: var(--boopi-color-action-hover); box-shadow: var(--boopi-shadow-md); color: var(--boopi-color-surface); text-decoration: none; transform: translateY(calc(-1 * var(--boopi-border-width))); }
}

@media (max-width: 47.99rem) {
	.boopi-service-info { padding-block-end: var(--boopi-space-6); }
	.boopi-service-info__hero { padding-block: var(--boopi-space-7) var(--boopi-space-5); }
	.boopi-service-info__hero-inner { gap: var(--boopi-space-3); grid-template-columns: 1fr; text-align: center; }
	.boopi-service-info__hero h1 { font-size: clamp(2.35rem, 12vw, 3.2rem); }
	.boopi-service-info__hero p { margin-inline: auto; }
	.boopi-service-info__hero img { max-block-size: 14rem; }
	.boopi-service-info__sections { gap: var(--boopi-space-4); }
	.boopi-service-info__shipping,
	.boopi-service-info__returns { grid-template-columns: 1fr; }
	.boopi-service-info__shipping > img { grid-column: 1; grid-row: 2; }
	.boopi-service-info__methods { grid-column: 1; }
	.boopi-service-info__shipping img { max-block-size: 11rem; }
	.boopi-service-info__returns img { grid-row: 1; max-block-size: 14rem; }
	.boopi-service-info__method-list { grid-template-columns: 1fr; }
	.boopi-service-info__payment-list { gap: var(--boopi-space-3) var(--boopi-space-4); }
	.boopi-service-info__return-action { inline-size: 100%; }
}

.boopi-legal {
	--boopi-legal-lilac: var(--boopi-color-action-lilac);
	--boopi-legal-sage: var(--boopi-color-action-sage);
	--boopi-legal-coral: var(--boopi-color-brand-primary);
	--boopi-legal-blue: var(--boopi-color-info);
	--boopi-legal-picker-accent: var(--boopi-legal-lilac);
	--boopi-legal-picker-surface: var(--boopi-color-home-card-lilac-surface);
	background: linear-gradient(180deg, var(--boopi-color-canvas), color-mix(in srgb, var(--boopi-color-home-card-lilac-surface) 22%, var(--boopi-color-canvas)));
}

.boopi-legal[data-boopi-legal-active="datenschutz"] { --boopi-legal-picker-accent: var(--boopi-legal-sage); --boopi-legal-picker-surface: var(--boopi-color-home-card-sage-surface); }
.boopi-legal[data-boopi-legal-active="agb"] { --boopi-legal-picker-accent: var(--boopi-legal-coral); --boopi-legal-picker-surface: var(--boopi-color-home-card-pink-surface); }
.boopi-legal[data-boopi-legal-active="widerruf"] { --boopi-legal-picker-accent: var(--boopi-legal-blue); --boopi-legal-picker-surface: var(--boopi-color-info-surface); }

.boopi-legal__hero {
	background: var(--boopi-color-canvas);
	overflow: hidden;
	padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem);
	position: relative;
}

.boopi-legal__hero-inner {
	align-items: center;
	display: grid;
	gap: var(--boopi-space-7);
	grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
	position: relative;
	z-index: 1;
}

.boopi-legal__hero-copy {
	max-inline-size: 36rem;
}

.boopi-legal__hero h1 {
	color: var(--boopi-color-brand-primary);
	font-family: var(--boopi-font-family-playful);
	font-size: clamp(2.7rem, 5vw, 4.8rem);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: -0.035em;
	line-height: 1.04;
	margin: 0 0 var(--boopi-space-5);
}

.boopi-legal__hero-copy p {
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	margin: 0;
	max-inline-size: 34rem;
}

.boopi-legal__hero-media {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-block-size: 19rem;
}

.boopi-legal__hero-image {
	max-block-size: 30rem;
	object-fit: contain;
}

.boopi-legal__hero-placeholder {
	align-items: end;
	background: radial-gradient(ellipse at 50% 85%, var(--boopi-color-home-card-sage-surface) 0 38%, transparent 39%);
	display: flex;
	justify-content: center;
	min-block-size: 20rem;
	position: relative;
	width: min(100%, 40rem);
}

.boopi-legal__hero-placeholder > .boopi-icon {
	block-size: 10rem;
	color: var(--boopi-color-brand-primary);
	inline-size: 10rem;
	margin-block-end: var(--boopi-space-5);
}

.boopi-legal__sign {
	background: color-mix(in srgb, var(--boopi-color-warning) 64%, var(--boopi-color-surface));
	border-radius: var(--boopi-radius-sm);
	color: var(--boopi-color-surface);
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-semibold);
	padding: var(--boopi-space-2) var(--boopi-space-4);
	position: absolute;
	right: 8%;
}

.boopi-legal__sign--one { top: 18%; }
.boopi-legal__sign--two { top: 36%; transform: translateX(8%); }
.boopi-legal__sign--three { top: 54%; }

.boopi-legal__hero-cloud {
	background: var(--boopi-color-home-card-pink-surface);
	border-radius: 45% 55% 52% 48%;
	filter: blur(0.2px);
	height: clamp(12rem, 26vw, 25rem);
	opacity: 0.7;
	position: absolute;
	top: 18%;
	width: clamp(5rem, 11vw, 10rem);
}

.boopi-legal__hero-cloud--start { left: -5rem; }
.boopi-legal__hero-cloud--end { background: var(--boopi-color-surface-accent); right: -5rem; }

.boopi-legal__overview {
	display: grid;
	gap: var(--boopi-space-4);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: calc(-1 * var(--boopi-space-6));
	position: relative;
	z-index: 2;
}

.boopi-legal__document-card {
	--boopi-legal-card-accent: var(--boopi-legal-lilac);
	--boopi-legal-card-surface: var(--boopi-color-home-card-lilac-surface);
	background: color-mix(in srgb, var(--boopi-legal-card-surface) 62%, var(--boopi-color-surface));
	border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-legal-card-accent) 25%, transparent);
	border-radius: var(--boopi-home-card-radius);
	display: flex;
	flex-direction: column;
	min-block-size: 18.5rem;
	padding: var(--boopi-space-5);
}

.boopi-legal__document-card--sage { --boopi-legal-card-accent: var(--boopi-legal-sage); --boopi-legal-card-surface: var(--boopi-color-home-card-sage-surface); }
.boopi-legal__document-card--coral { --boopi-legal-card-accent: var(--boopi-legal-coral); --boopi-legal-card-surface: var(--boopi-color-home-card-pink-surface); }
.boopi-legal__document-card--blue { --boopi-legal-card-accent: var(--boopi-legal-blue); --boopi-legal-card-surface: var(--boopi-color-info-surface); }

.boopi-legal__document-icon,
.boopi-legal__tab > span,
.boopi-legal__contact-icon {
	align-items: center;
	background: color-mix(in srgb, currentcolor 12%, var(--boopi-color-surface));
	border-radius: 50%;
	color: var(--boopi-legal-card-accent);
	display: inline-flex;
	height: 3.2rem;
	justify-content: center;
	width: 3.2rem;
}

.boopi-legal__document-icon .boopi-icon { height: 1.6rem; width: 1.6rem; }

.boopi-legal__document-icon {
	background: var(--boopi-legal-card-accent);
	color: var(--boopi-color-surface);
}

.boopi-legal__document-card h2 {
	color: var(--boopi-legal-card-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: 1.35rem;
	font-weight: var(--boopi-font-weight-semibold);
	margin: var(--boopi-space-4) 0 var(--boopi-space-2);
}

.boopi-legal__document-card > p { margin: 0; }

.boopi-legal__document-actions {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-2);
	justify-content: space-between;
	margin-block-start: auto;
	padding-block-start: var(--boopi-space-4);
}

.boopi-legal__document-actions :is(a, button) {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--boopi-legal-card-accent);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: var(--boopi-font-weight-semibold);
	gap: var(--boopi-space-1);
	padding: var(--boopi-space-2);
	text-decoration: none;
}

.boopi-legal__document-actions .boopi-icon { height: 1.15rem; width: 1.15rem; }

.boopi-legal__reader {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-home-card-radius);
	display: grid;
	grid-template-columns: minmax(13rem, 0.28fr) minmax(0, 0.72fr);
	margin-block-start: var(--boopi-space-6);
	min-block-size: 38rem;
	overflow: hidden;
	padding: 0;
}

.boopi-legal__mobile-picker { display: none; }

.boopi-legal__tabs {
	border-inline-end: var(--boopi-border-width) solid var(--boopi-color-border);
	display: flex;
	flex-direction: column;
	padding-block: var(--boopi-space-3);
}

.boopi-legal__tab {
	--boopi-legal-tab-accent: var(--boopi-legal-lilac);
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--boopi-color-text);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: var(--boopi-font-weight-medium);
	gap: var(--boopi-space-3);
	min-block-size: 5.5rem;
	padding: var(--boopi-space-3) var(--boopi-space-5);
	text-align: start;
}

.boopi-legal__tab--sage { --boopi-legal-tab-accent: var(--boopi-legal-sage); }
.boopi-legal__tab--coral { --boopi-legal-tab-accent: var(--boopi-legal-coral); }
.boopi-legal__tab--blue { --boopi-legal-tab-accent: var(--boopi-legal-blue); }
.boopi-legal__tab > span { --boopi-legal-card-accent: var(--boopi-legal-tab-accent); background: var(--boopi-legal-tab-accent); color: var(--boopi-color-surface); flex: 0 0 2.8rem; height: 2.8rem; width: 2.8rem; }
.boopi-legal__tab .boopi-icon { height: 1.35rem; width: 1.35rem; }

.boopi-legal__tab[aria-selected="true"] {
	background: color-mix(in srgb, var(--boopi-legal-tab-accent) 8%, var(--boopi-color-surface));
	color: var(--boopi-legal-tab-accent);
}

.boopi-legal__panels { min-width: 0; }
.boopi-legal__panel { --boopi-legal-panel-accent: var(--boopi-legal-lilac); padding: clamp(2rem, 5vw, 4.5rem); }
.boopi-legal__panel--sage { --boopi-legal-panel-accent: var(--boopi-legal-sage); }
.boopi-legal__panel--coral { --boopi-legal-panel-accent: var(--boopi-legal-coral); }
.boopi-legal__panel--blue { --boopi-legal-panel-accent: var(--boopi-legal-blue); }
.boopi-legal__panel[hidden] { display: none; }

.boopi-legal__panel-heading {
	align-items: start;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--boopi-space-6);
}

.boopi-legal__panel-heading p { color: var(--boopi-color-text-muted); font-size: var(--boopi-font-size-sm); margin: 0; }
.boopi-legal__panel-heading h2 { color: var(--boopi-legal-panel-accent); font-family: var(--boopi-font-family-playful); font-size: clamp(2rem, 3vw, 3rem); font-weight: var(--boopi-font-weight-semibold); margin: var(--boopi-space-1) 0 0; }
.boopi-legal__panel-heading > span { color: color-mix(in srgb, var(--boopi-legal-panel-accent) 35%, transparent); }
.boopi-legal__panel-heading .boopi-icon { height: 2.5rem; width: 2.5rem; }

.boopi-legal__document-content { max-inline-size: 52rem; }
.boopi-legal__document-content :is(h2, h3, h4) { color: var(--boopi-legal-panel-accent); font-family: var(--boopi-font-family-playful); font-weight: var(--boopi-font-weight-semibold); }
.boopi-legal__document-content h2 { font-size: 1.55rem; margin-block: var(--boopi-space-7) var(--boopi-space-3); }
.boopi-legal__document-content h3 { font-size: 1.2rem; margin-block: var(--boopi-space-5) var(--boopi-space-2); }
.boopi-legal__document-content :is(p, li) { line-height: 1.72; }
.boopi-legal__document-content a { overflow-wrap: anywhere; }

.boopi-legal__preview-grid {
	display: grid;
	gap: var(--boopi-space-5) var(--boopi-space-7);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: var(--boopi-space-6);
}

.boopi-legal__preview-grid section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.boopi-legal__preview-grid h3 { margin-block-start: 0; }

.boopi-legal__draft,
.boopi-legal__review-note {
	background: var(--boopi-color-warning-surface);
	border-inline-start: 0.25rem solid var(--boopi-color-warning);
	border-radius: var(--boopi-radius-sm);
	padding: var(--boopi-space-4);
}
.boopi-legal__draft p { margin-block-end: 0; }
.boopi-legal__review-note { color: var(--boopi-color-text-muted); font-size: var(--boopi-font-size-sm); margin-block-start: var(--boopi-space-7); }

.boopi-legal__contact {
	align-items: center;
	background: var(--boopi-color-home-card-lilac-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-home-card-lilac-border);
	border-radius: var(--boopi-home-card-radius);
	display: grid;
	gap: var(--boopi-space-5);
	grid-template-columns: auto 1fr auto;
	margin-block-start: var(--boopi-space-6);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.boopi-legal__contact-icon { --boopi-legal-card-accent: var(--boopi-legal-lilac); height: 4rem; width: 4rem; }
.boopi-legal__contact h2 { color: var(--boopi-legal-lilac); font-family: var(--boopi-font-family-playful); font-size: 1.65rem; font-weight: var(--boopi-font-weight-semibold); margin: 0 0 var(--boopi-space-1); }
.boopi-legal__contact p { margin: 0; }
.boopi-legal__contact .boopi-button,
.boopi-legal__contact .boopi-button:visited {
	background: var(--boopi-legal-lilac);
	border-color: var(--boopi-legal-lilac);
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-color-surface);
	text-decoration: none;
}

@media (hover: hover) {
	.boopi-legal__contact .boopi-button:hover {
		background: var(--boopi-color-action-lilac-hover);
		border-color: var(--boopi-color-action-lilac-hover);
		box-shadow: var(--boopi-shadow-md);
		color: var(--boopi-color-surface);
		transform: translateY(calc(-1 * var(--boopi-border-width)));
	}
}

.boopi-legal__contact .boopi-button:active {
	background: var(--boopi-color-action-lilac-hover);
	border-color: var(--boopi-color-action-lilac-hover);
	box-shadow: var(--boopi-shadow-none);
	color: var(--boopi-color-surface);
	transform: translateY(var(--boopi-border-width));
}

@media (prefers-reduced-motion: reduce) {
	.boopi-legal__contact .boopi-button:is(:hover, :active) { transform: none; }
}

@media (max-width: 64rem) {
	.boopi-legal__hero-inner { grid-template-columns: 1fr 1fr; }
	.boopi-legal__overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
	.boopi-legal__hero { padding-block: var(--boopi-space-6) var(--boopi-space-7); }
	.boopi-legal__hero-inner { gap: var(--boopi-space-4); grid-template-columns: 1fr; text-align: center; }
	.boopi-legal__hero-copy { margin-inline: auto; }
	.boopi-legal__hero h1 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
	.boopi-legal__hero-media { min-block-size: 12rem; }
	.boopi-legal__hero-image { max-block-size: 20rem; }
	.boopi-legal__hero-placeholder { min-block-size: 15rem; }
	.boopi-legal__overview { gap: var(--boopi-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: calc(-1 * var(--boopi-space-4)); padding-inline: max(calc(var(--boopi-gutter) + var(--boopi-space-2)), env(safe-area-inset-left)) max(calc(var(--boopi-gutter) + var(--boopi-space-2)), env(safe-area-inset-right)); }
	.boopi-legal__document-card { min-block-size: 9.5rem; padding: var(--boopi-space-4); }
	.boopi-legal__document-icon { height: 2.5rem; width: 2.5rem; }
	.boopi-legal__document-icon .boopi-icon { height: 1.25rem; width: 1.25rem; }
	.boopi-legal__document-card h2 { font-size: 1rem; margin-block: var(--boopi-space-4) 0; overflow-wrap: anywhere; }
	.boopi-legal__document-card > p { display: none; }
	.boopi-legal__document-actions { padding-block-start: var(--boopi-space-2); }
	.boopi-legal__document-actions :is(a, button) { font-size: var(--boopi-font-size-sm); padding: var(--boopi-space-1) 0; }
	.boopi-legal__document-actions button span { display: none; }
	.boopi-legal__reader { display: block; margin-block-start: var(--boopi-space-5); min-block-size: 0; }
	.boopi-legal__reader,
	.boopi-legal__contact { inline-size: auto; margin-inline: max(var(--boopi-gutter), env(safe-area-inset-left)) max(var(--boopi-gutter), env(safe-area-inset-right)); }
	.boopi-legal__mobile-picker { background: color-mix(in srgb, var(--boopi-legal-picker-surface) 62%, var(--boopi-color-surface)); border-block-end: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-legal-picker-accent) 22%, var(--boopi-color-border)); max-inline-size: 100%; min-inline-size: 0; padding: var(--boopi-space-4); transition: background-color var(--boopi-motion-fast), border-color var(--boopi-motion-fast); }
	.boopi-legal.is-enhanced .boopi-legal__mobile-picker { display: block; }
	.boopi-legal__mobile-picker > span { color: var(--boopi-color-text-muted); display: block; font-size: var(--boopi-font-size-sm); font-weight: var(--boopi-font-weight-medium); margin-block-end: var(--boopi-space-2); }
	.boopi-legal__mobile-select-wrap { max-inline-size: 100%; min-inline-size: 0; position: relative; }
	.boopi-legal__mobile-select-wrap > button { align-items: center; appearance: none; background: var(--boopi-color-surface); border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-legal-picker-accent) 32%, var(--boopi-color-border)); border-radius: var(--boopi-radius-md); box-sizing: border-box; color: var(--boopi-legal-picker-accent); cursor: pointer; display: flex; font: inherit; font-weight: var(--boopi-font-weight-semibold); inline-size: 100%; justify-content: space-between; max-inline-size: 100%; min-block-size: var(--boopi-size-control-min); min-inline-size: 0; padding: var(--boopi-space-3) var(--boopi-space-4); text-align: start; transition: border-color var(--boopi-motion-fast), color var(--boopi-motion-fast); }
	.boopi-legal__mobile-select-wrap > button .boopi-icon { color: var(--boopi-legal-picker-accent); flex: 0 0 auto; height: 1.25rem; margin-inline-start: var(--boopi-space-3); transition: color var(--boopi-motion-fast), transform var(--boopi-motion-fast); width: 1.25rem; }
	.boopi-legal__mobile-select-wrap > button[aria-expanded="true"] .boopi-icon { transform: rotate(180deg); }
	.boopi-legal__mobile-options { background: var(--boopi-color-surface); border: var(--boopi-border-width) solid var(--boopi-color-border); border-radius: var(--boopi-radius-md); box-shadow: var(--boopi-shadow-md); box-sizing: border-box; display: grid; inline-size: 100%; inset-block-start: calc(100% + var(--boopi-space-2)); inset-inline: 0; max-inline-size: 100%; overflow: hidden; position: absolute; z-index: 6; }
	.boopi-legal__mobile-options[hidden] { display: none; }
	.boopi-legal__mobile-options button { background: var(--boopi-color-surface); border: 0; border-block-end: var(--boopi-border-width) solid var(--boopi-color-border); color: var(--boopi-color-text); cursor: pointer; font: inherit; inline-size: 100%; min-block-size: var(--boopi-size-control-min); padding: var(--boopi-space-3) var(--boopi-space-4); text-align: start; }
	.boopi-legal__mobile-options button:last-child { border-block-end: 0; }
	.boopi-legal__mobile-options button:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--boopi-legal-picker-accent) 9%, var(--boopi-color-surface)); color: var(--boopi-legal-picker-accent); }
	.boopi-legal__mobile-options button[aria-selected="true"] { background: color-mix(in srgb, var(--boopi-legal-picker-accent) 13%, var(--boopi-color-surface)); color: var(--boopi-legal-picker-accent); font-weight: var(--boopi-font-weight-semibold); }
	.boopi-legal.is-enhanced .boopi-legal__tabs { display: none; }
	.boopi-legal__tabs { border-block-end: var(--boopi-border-width) solid var(--boopi-color-border); border-inline-end: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--boopi-space-2); }
	.boopi-legal__tab { min-block-size: var(--boopi-size-control-min); padding: var(--boopi-space-2); }
	.boopi-legal__tab > span { height: 2.25rem; width: 2.25rem; }
	.boopi-legal__panel { padding: var(--boopi-space-5) var(--boopi-space-4); }
	.boopi-legal__panel-heading { margin-block-end: var(--boopi-space-4); }
	.boopi-legal__panel-heading h2 { font-size: 2rem; }
	.boopi-legal__panel-heading > span { display: none; }
	.boopi-legal__document-content h2 { font-size: 1.35rem; margin-block-start: var(--boopi-space-6); }
	.boopi-legal__document-content :is(p, li) { line-height: 1.65; }
	.boopi-legal__preview-grid { grid-template-columns: 1fr; }
	.boopi-legal__preview-grid section:last-child:nth-child(odd) { grid-column: auto; }
	.boopi-legal__contact { grid-template-columns: auto 1fr; }
	.boopi-legal__contact .boopi-button { grid-column: 1 / -1; text-align: center; }
}

@media print {
	.site-header,
	.site-footer,
	.boopi-legal__hero,
	.boopi-legal__overview,
	.boopi-legal__tabs,
	.boopi-legal__contact,
	.boopi-legal__review-note { display: none !important; }
	.site-main.boopi-legal { padding: 0; }
	.boopi-legal__reader { border: 0; display: block; min-block-size: 0; }
	.boopi-legal__panel { padding: 0; }
}

.boopi-starter-set__preview-label {
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin-block-end: var(--boopi-space-2);
	text-transform: uppercase;
}

.boopi-starter-set__title {
	color: var(--boopi-color-action-pink);
	font-family: var(--boopi-font-family-playful);
}

.boopi-home-starter-sets__list {
	display: grid;
	gap: var(--boopi-space-6);
}

.boopi-starter-set {
	background: var(--boopi-color-home-card-pink-surface);
	border: var(--boopi-home-card-border-width) solid var(--boopi-color-home-card-pink-border);
	border-radius: var(--boopi-home-card-radius);
	display: grid;
	gap: var(--boopi-space-6);
	overflow: clip;
	padding: var(--boopi-home-card-padding);
	position: relative;
}

.boopi-starter-set__content,
.boopi-starter-set__media {
	position: relative;
	z-index: 1;
}

.boopi-starter-set__garden {
	block-size: auto;
	display: none;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-inline-size: none;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.boopi-starter-set__content {
	align-self: center;
}

.boopi-starter-set__preview-label {
	color: var(--boopi-color-action-pink-hover);
}

.boopi-starter-set__title {
	font-size: clamp(1.75rem, 1.5rem + 0.75vw, 2.25rem);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0 var(--boopi-space-3);
}

.boopi-starter-set__description {
	color: var(--boopi-color-text-muted);
	margin-block: 0 var(--boopi-space-5);
	max-inline-size: 36rem;
}

.boopi-starter-set__action,
.boopi-starter-set__action:hover,
.boopi-starter-set__action:focus-visible,
.boopi-starter-set__action:visited {
	background: var(--boopi-color-action-pink);
	border-color: transparent;
	color: var(--boopi-color-action-text);
	text-decoration: none;
}

.boopi-starter-set__action:hover {
	background: var(--boopi-color-action-pink-hover);
	border-color: transparent;
	color: var(--boopi-color-action-text);
}

.boopi-starter-set__action .boopi-icon {
	block-size: var(--boopi-size-icon-sm);
	inline-size: var(--boopi-size-icon-sm);
}

.boopi-starter-set__promotion {
	align-items: center;
	background: var(--boopi-color-surface);
	border-radius: 50%;
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-color-text);
	display: flex;
	flex-direction: column;
	height: clamp(4.25rem, 12vw, 5.25rem);
	inset-block-start: var(--boopi-space-4);
	inset-inline-end: var(--boopi-space-4);
	justify-content: center;
	line-height: 1.05;
	margin: 0;
	position: absolute;
	width: clamp(4.25rem, 12vw, 5.25rem);
	z-index: 2;
}

.boopi-starter-set__promotion strong {
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-xl);
}

.boopi-starter-set__promotion span {
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-starter-set__media {
	align-self: center;
	margin: 0;
	min-inline-size: 0;
	order: -1;
}

.boopi-starter-set__image {
	display: block;
	height: auto;
	max-block-size: 30rem;
	object-fit: contain;
	width: 100%;
}

@media (min-width: 48rem) {
	.boopi-starter-set {
		grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
	}

	.boopi-starter-set__media {
		order: initial;
	}
}

/* Local-first explanation of the Boopi product system. */
.boopi-home-how-it-works {
	background: var(--boopi-color-canvas);
	padding-block: clamp(var(--boopi-space-4), 2vw, var(--boopi-space-6));
}

.boopi-home-how-it-works > .boopi-container {
	max-inline-size: var(--boopi-container-default);
}

.boopi-how-it-works {
	background: var(--boopi-color-home-card-lilac-surface);
	border: var(--boopi-home-card-border-width) solid var(--boopi-color-home-card-lilac-border);
	border-radius: var(--boopi-home-card-radius);
	margin-block-start: clamp(var(--boopi-space-5), 3vw, var(--boopi-space-7));
	overflow: visible;
	padding: var(--boopi-space-4);
	position: relative;
}

.boopi-how-it-works__garden {
	block-size: auto;
	display: none;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-inline-size: none;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

@media (max-width: 47.99rem) {
	.boopi-home-value__benefits {
		padding-block-end: clamp(3.25rem, 14vw, 4.25rem);
	}
}

.boopi-how-it-works__lion {
	block-size: auto;
	inset-block-start: clamp(-8rem, -9vw, -5rem);
	inset-inline-start: clamp(var(--boopi-space-3), 4vw, var(--boopi-space-7));
	pointer-events: none;
	position: absolute;
	width: clamp(7rem, 11vw, 10rem);
	z-index: 2;
}

@media (max-width: 47.99rem) {
	.boopi-how-it-works {
		padding-block-start: 0;
	}

	.boopi-how-it-works__lion {
		inset-block-start: -3.75rem;
		width: clamp(3.75rem, 17vw, 4.5rem);
	}

	.boopi-how-it-works__steps {
		margin-block-start: var(--boopi-space-3);
	}
}

.boopi-how-it-works__rabbit {
	block-size: auto;
	inset-block-end: var(--boopi-space-2);
	inset-inline-end: -0.75rem;
	pointer-events: none;
	position: absolute;
	width: clamp(8rem, 11vw, 10.5rem);
	z-index: 2;
}

.boopi-how-it-works > :not(.boopi-how-it-works__lion, .boopi-how-it-works__rabbit, .boopi-how-it-works__garden) {
	position: relative;
	z-index: 1;
}

.boopi-how-it-works__header {
	margin-inline: auto;
	max-inline-size: 58rem;
	padding-block-start: var(--boopi-space-3);
	padding-inline: clamp(var(--boopi-space-7), 10vw, 7rem);
	position: relative;
	text-align: center;
	z-index: 1;
}

.boopi-how-it-works__header > * {
	margin-inline: auto;
}

.boopi-how-it-works__eyebrow {
	color: var(--boopi-color-action-lilac-hover);
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin-block: 0 var(--boopi-space-1);
	text-transform: uppercase;
}

.boopi-how-it-works__title {
	color: var(--boopi-color-action-lilac);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-home-section-title);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0;
}

.boopi-how-it-works__title-art {
	display: block;
	inline-size: 100%;
	overflow: visible;
}

.boopi-how-it-works__title-art text {
	fill: currentColor;
	font-family: var(--boopi-font-family-playful);
	font-size: 52px;
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-how-it-works__title-art--mobile {
	display: none;
}

.boopi-how-it-works__introduction {
	align-items: center;
	color: color-mix(in srgb, var(--boopi-color-action-lilac) 58%, var(--boopi-color-text-muted));
	display: flex;
	flex-wrap: wrap;
	font-family: var(--boopi-font-family-playful);
	font-weight: var(--boopi-font-weight-medium);
	gap: var(--boopi-space-2);
	justify-content: center;
	line-height: var(--boopi-line-height-heading);
	margin-block: 0;
}

.boopi-how-it-works__introduction-part {
	display: inline-block;
}

.boopi-how-it-works__introduction-part--first {
	transform: translateY(0.16rem) rotate(-1.5deg);
}

.boopi-how-it-works__introduction-part--second {
	transform: translateY(0.16rem) rotate(1.5deg);
}

.boopi-how-it-works__introduction-separator {
	display: inline-flex;
	transform: translateY(-0.08rem);
}

@media (max-width: 47.99rem) {
	.boopi-how-it-works__title-art--desktop {
		display: none;
	}

	.boopi-how-it-works__title-art--mobile {
		display: block;
	}

	.boopi-how-it-works__title-art text {
		font-size: 45px;
	}

	.boopi-how-it-works__introduction {
		display: none;
	}

}

.boopi-how-it-works__steps {
	display: grid;
	gap: var(--boopi-space-6);
	list-style: none;
	margin-block: var(--boopi-space-6);
	padding: 0;
}

.boopi-how-it-works__steps > li + li {
	margin-block-start: 0;
}

.boopi-how-it-works__step {
	background: var(--boopi-color-surface);
	border: var(--boopi-home-card-border-width) solid var(--boopi-color-home-card-border);
	border-radius: var(--boopi-home-card-radius);
	box-shadow: var(--boopi-home-card-shadow);
	display: grid;
	gap: var(--boopi-space-3);
	grid-template-rows: auto 12.5rem;
	min-inline-size: 0;
	padding: var(--boopi-space-5);
	position: relative;
	text-align: center;
}

.boopi-how-it-works__arrow {
	block-size: auto;
	inset-block-end: -2.25rem;
	inset-inline-start: 50%;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%) rotate(82deg) scale(0.68);
	transform-origin: center;
	width: 5rem;
	z-index: 3;
}


.boopi-how-it-works__step-header {
	align-items: flex-start;
	display: flex;
	gap: var(--boopi-space-3);
	justify-content: flex-start;
	min-block-size: 3.25rem;
	min-inline-size: 0;
	text-align: start;
}

.boopi-how-it-works__step-copy {
	display: grid;
	gap: var(--boopi-space-2);
	min-inline-size: 0;
	padding-block-start: 0.375rem;
}

.boopi-how-it-works__number {
	align-items: center;
	background: var(--boopi-color-home-card-lilac-surface);
	border-radius: 50%;
	color: var(--boopi-color-action-lilac);
	display: inline-flex;
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-xl);
	font-weight: var(--boopi-font-weight-semibold);
	block-size: 3rem;
	flex: 0 0 3rem;
	justify-content: center;
	inline-size: 3rem;
	line-height: var(--boopi-line-height-tight);
	z-index: 1;
}

.boopi-how-it-works__media {
	align-items: end;
	block-size: 12.5rem;
	display: flex;
	justify-content: center;
	margin: 0;
	min-block-size: 0;
	position: relative;
}

.boopi-how-it-works__media::before {
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--boopi-color-home-product-shadow) 82%, transparent) 0%,
		color-mix(in srgb, var(--boopi-color-home-product-shadow) 48%, transparent) 48%,
		transparent 74%
	);
	block-size: clamp(2.25rem, 3.5vw, 3rem);
	inset-block-end: 0.15rem;
	inset-inline-start: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	width: 80%;
}

.boopi-how-it-works__image {
	display: block;
	height: auto;
	max-block-size: 12.5rem;
	object-fit: contain;
	position: relative;
	width: 100%;
	z-index: 1;
}

.boopi-how-it-works__step-title {
	color: var(--boopi-color-action-lilac);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-home-step-title);
	font-weight: var(--boopi-font-weight-semibold);
	line-height: var(--boopi-line-height-tight);
	margin: 0;
}

.boopi-how-it-works__description {
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-sm);
	line-height: var(--boopi-line-height-normal);
	margin-block: 0;
}

.boopi-how-it-works__step-header .boopi-how-it-works__description {
	text-align: start;
}

.boopi-how-it-works__footer {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--boopi-space-2);
	justify-content: center;
	text-align: center;
}

.boopi-how-it-works__action,
.boopi-how-it-works__action:hover,
.boopi-how-it-works__action:focus-visible,
.boopi-how-it-works__action:visited {
	background: var(--boopi-color-action-lilac);
	border-color: transparent;
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-color-action-text);
	text-decoration: none;
}

.boopi-how-it-works__action {
	box-shadow: var(--boopi-shadow-md);
	font-size: var(--boopi-font-size-lg);
	inline-size: min(100%, 20rem);
	justify-content: center;
	min-block-size: calc(var(--boopi-size-control-min) + var(--boopi-space-2));
}

.boopi-how-it-works__action:hover {
	background: var(--boopi-color-action-lilac-hover);
	border-color: transparent;
	color: var(--boopi-color-action-text);
}

@media (min-width: 48rem) {
	.boopi-how-it-works__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.boopi-how-it-works__footer {
		margin-inline: auto;
	}

	.boopi-how-it-works__action {
		inline-size: 20rem;
	}

	.boopi-how-it-works__arrow {
		inset-block-end: auto;
		inset-block-start: 55%;
		inset-inline-start: auto;
		inset-inline-end: calc(-1 * (var(--boopi-space-6) + 2rem));
		transform: translateY(-50%);
		width: 5.5rem;
	}
}

@media (forced-colors: active) {
	.boopi-how-it-works,
	.boopi-how-it-works__step {
		border-color: CanvasText;
	}

}

/* Static modern-playful visual layers (EPIC-016). */
.boopi-visual-section--surface-canvas {
	--boopi-visual-surface: var(--boopi-color-canvas);
}

.boopi-visual-section--surface-brand {
	--boopi-visual-surface: var(--boopi-color-surface-brand);
}

.boopi-visual-section--surface-accent {
	--boopi-visual-surface: var(--boopi-color-surface-accent);
}

:where(.boopi-visual-edge, .boopi-visual-paw) {
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.boopi-visual-edge {
	background: var(--boopi-visual-decoration, var(--boopi-color-decoration-sage));
	block-size: clamp(8rem, 18vw, 18rem);
	border-radius: 42% 58% 64% 36% / 38% 45% 55% 62%;
	inline-size: clamp(6rem, 15vw, 15rem);
	opacity: 0.72;
}

.boopi-visual-edge--cloud {
	background:
		radial-gradient(circle at 32% 28%, var(--boopi-visual-decoration) 0 29%, transparent 30%),
		radial-gradient(circle at 66% 22%, var(--boopi-visual-decoration) 0 34%, transparent 35%),
		radial-gradient(circle at 72% 68%, var(--boopi-visual-decoration) 0 38%, transparent 39%),
		radial-gradient(circle at 28% 70%, var(--boopi-visual-decoration) 0 35%, transparent 36%);
	border-radius: 0;
}

.boopi-visual-edge--puddle {
	block-size: clamp(6rem, 12vw, 12rem);
	border-radius: 64% 36% 58% 42% / 42% 58% 36% 64%;
	inline-size: clamp(9rem, 20vw, 20rem);
}

.boopi-visual-edge--arch {
	block-size: clamp(10rem, 22vw, 22rem);
	border-radius: 50% 50% 28% 28% / 58% 58% 42% 42%;
	inline-size: clamp(7rem, 14vw, 14rem);
}

.boopi-visual-edge--irregular-cloud {
	block-size: clamp(20rem, 48vw, 40rem);
	border-radius: 0;
	inline-size: clamp(7.5rem, 18vw, 15rem);
	-webkit-mask: url("../images/decorative/blob-cloud-irregular.svg") center / 100% 100% no-repeat;
	mask: url("../images/decorative/blob-cloud-irregular.svg") center / 100% 100% no-repeat;
}

.boopi-visual-edge--irregular-puddle {
	block-size: clamp(16rem, 38vw, 32rem);
	border-radius: 0;
	inline-size: clamp(8.5rem, 20vw, 17rem);
	-webkit-mask: url("../images/decorative/blob-puddle-irregular.svg") center / 100% 100% no-repeat;
	mask: url("../images/decorative/blob-puddle-irregular.svg") center / 100% 100% no-repeat;
}

.boopi-visual-edge--round-soft {
	block-size: clamp(14rem, 32vw, 28rem);
	border-radius: 0;
	inline-size: clamp(16rem, 40vw, 34rem);
	-webkit-mask: url("../images/decorative/blob-round-soft.svg") center / 100% 100% no-repeat;
	mask: url("../images/decorative/blob-round-soft.svg") center / 100% 100% no-repeat;
}

.boopi-visual-edge--cloud-soft {
	block-size: clamp(20rem, 46vw, 38rem);
	border-radius: 0;
	inline-size: clamp(14rem, 34vw, 28rem);
	-webkit-mask: url("../images/decorative/blob-cloud-soft.svg") center / 100% 100% no-repeat;
	mask: url("../images/decorative/blob-cloud-soft.svg") center / 100% 100% no-repeat;
}

.boopi-visual-edge--coral { --boopi-visual-decoration: var(--boopi-color-decoration-coral); }
.boopi-visual-edge--sage { --boopi-visual-decoration: var(--boopi-color-decoration-sage); }
.boopi-visual-edge--lilac { --boopi-visual-decoration: var(--boopi-color-decoration-lilac); }
.boopi-visual-edge--blue { --boopi-visual-decoration: var(--boopi-color-decoration-blue); }

.boopi-visual-edge--start-upper {
	inset-block-start: 4%;
	inset-inline-start: 0;
	transform: translateX(-72%) rotate(4deg);
}

.boopi-visual-edge--end-middle {
	inset-block-start: 46%;
	inset-inline-end: 0;
	transform: translateX(74%) scaleX(-1) rotate(-5deg);
}

.boopi-visual-edge--start-lower {
	inset-block-end: 5%;
	inset-inline-start: 0;
	transform: translateX(-76%) rotate(-10deg);
}

.boopi-visual-paw {
	--boopi-visual-paw-color: var(--boopi-color-decoration-coral);
	--boopi-visual-paw-size: clamp(1.75rem, 3vw, 3rem);
	aspect-ratio: 1;
	background: var(--boopi-visual-paw-color);
	block-size: var(--boopi-visual-paw-size);
	-webkit-mask: url("../images/decorative/paw-neutral.svg") center / contain no-repeat;
	mask: url("../images/decorative/paw-neutral.svg") center / contain no-repeat;
	opacity: 0.48;
}

.boopi-visual-paw--neutral {
	-webkit-mask-image: url("../images/decorative/paw-neutral.svg");
	mask-image: url("../images/decorative/paw-neutral.svg");
}

.boopi-visual-paw--dog {
	-webkit-mask-image: url("../images/decorative/paw-dog.svg");
	mask-image: url("../images/decorative/paw-dog.svg");
}

.boopi-visual-paw--rabbit {
	-webkit-mask-image: url("../images/decorative/paw-rabbit.svg");
	mask-image: url("../images/decorative/paw-rabbit.svg");
}

.boopi-visual-paw--lion {
	-webkit-mask-image: url("../images/decorative/paw-lion.svg");
	mask-image: url("../images/decorative/paw-lion.svg");
}

.boopi-visual-paw--horse {
	-webkit-mask-image: url("../images/decorative/paw-horse.svg");
	mask-image: url("../images/decorative/paw-horse.svg");
}

.boopi-visual-paw--coral { --boopi-visual-paw-color: var(--boopi-color-decoration-coral); }
.boopi-visual-paw--sage { --boopi-visual-paw-color: var(--boopi-color-decoration-sage); }
.boopi-visual-paw--lilac { --boopi-visual-paw-color: var(--boopi-color-decoration-lilac); }

.boopi-visual-paw--small { --boopi-visual-paw-size: 1.75rem; }
.boopi-visual-paw--large { --boopi-visual-paw-size: clamp(2.5rem, 4vw, 4rem); }

.boopi-visual-paw--start-middle {
	inset-block-start: 45%;
	inset-inline-start: max(var(--boopi-gutter), 6%);
	transform: rotate(-18deg);
}

.boopi-visual-paw--end-upper {
	inset-block-start: 18%;
	inset-inline-end: max(var(--boopi-gutter), 6%);
	transform: rotate(16deg);
}

.boopi-visual-paw--end-lower {
	inset-block-end: 12%;
	inset-inline-end: max(var(--boopi-gutter), 8%);
	transform: rotate(-10deg);
}

.boopi-visual-paw-trail {
	block-size: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.boopi-visual-paw--trail-start {
	inset-block-start: 18%;
	inset-inline-start: 14%;
	transform: rotate(-20deg);
}

.boopi-visual-paw--trail-middle {
	inset-block-start: 46%;
	inset-inline-start: 22%;
	transform: rotate(14deg);
}

.boopi-visual-paw--trail-end {
	inset-block-start: 72%;
	inset-inline-start: 16%;
	transform: rotate(-12deg);
}

/* Responsive decoration priority: one Mobile, two Tablet, three Desktop. */
:where(.boopi-visual-detail--secondary, .boopi-visual-detail--tertiary) {
	display: none;
}

.boopi-visual-section--density-quiet > :where(
	.boopi-visual-edge,
	.boopi-visual-paw,
	.boopi-visual-paw-trail
) {
	display: none;
}

.boopi-visual-edge--start-upper:dir(rtl),
.boopi-visual-edge--start-lower:dir(rtl) {
	transform: translateX(72%) scaleX(-1) rotate(-4deg);
}

.boopi-visual-edge--end-middle:dir(rtl) {
	transform: translateX(-74%) rotate(5deg);
}

@media (min-width: 48rem) {
	.boopi-visual-detail--secondary {
		display: block;
	}

	.boopi-visual-edge--start-upper {
		inset-block-start: 6%;
		transform: translateX(-64%) rotate(6deg);
	}

	.boopi-visual-edge--end-middle {
		inset-block-start: 42%;
		transform: translateX(67%) scaleX(-1) rotate(-6deg);
	}

	.boopi-visual-edge--start-lower {
		inset-block-end: 7%;
		transform: translateX(-68%) rotate(-14deg);
	}

	.boopi-visual-edge--start-upper:dir(rtl),
	.boopi-visual-edge--start-lower:dir(rtl) {
		transform: translateX(64%) scaleX(-1) rotate(-6deg);
	}

	.boopi-visual-edge--end-middle:dir(rtl) {
		transform: translateX(-67%) rotate(6deg);
	}
}

@media (min-width: 64rem) {
	.boopi-visual-detail--tertiary {
		display: block;
	}

	.boopi-visual-edge--start-upper {
		inset-block-start: 8%;
		transform: translateX(-54%) rotate(8deg);
	}

	.boopi-visual-edge--end-middle {
		inset-block-start: 38%;
		transform: translateX(58%) scaleX(-1) rotate(-8deg);
	}

	.boopi-visual-edge--start-lower {
		inset-block-end: 8%;
		transform: translateX(-60%) rotate(-18deg);
	}

	.boopi-visual-edge--start-upper:dir(rtl),
	.boopi-visual-edge--start-lower:dir(rtl) {
		transform: translateX(54%) scaleX(-1) rotate(-8deg);
	}

	.boopi-visual-edge--end-middle:dir(rtl) {
		transform: translateX(-58%) rotate(8deg);
	}
}

.boopi-visual-section--density-soft .boopi-visual-detail--tertiary {
	display: none;
}

/* Homepage Hero composition, informed by EPIC-006 fast/background mockups. */
.boopi-home-hero__plane-scene {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: block;
	inline-size: 3.5rem;
	inset-block-start: var(--boopi-space-1);
	inset-inline-end: calc(var(--boopi-gutter) + var(--boopi-space-4));
	line-height: 0;
	padding: 0;
	pointer-events: auto;
	position: absolute;
	z-index: 2;
}

.boopi-home-hero__plane {
	display: block;
	height: auto;
	position: relative;
	width: 100%;
	z-index: 1;
}

.boopi-home-hero__plane-puff {
	background: var(--boopi-color-decoration-blue);
	block-size: 0.65rem;
	border-radius: 50%;
	box-shadow:
		0.65rem 0.15rem 0 -0.08rem var(--boopi-color-decoration-blue),
		1.15rem 0.35rem 0 -0.18rem var(--boopi-color-decoration-blue);
	inset-block-end: 46%;
	inset-inline-start: 92%;
	opacity: 0.42;
	position: absolute;
	transform: scaleY(-1);
	width: 0.85rem;
	z-index: 0;
}

@keyframes boopi-plane-hop {
	50% {
		transform: translate(-0.55rem, -0.35rem) rotate(-2deg);
	}
}

@keyframes boopi-plane-puff {
	0% {
		opacity: 0;
		transform: translateX(0) scale(0.65, -0.65);
	}
	35% {
		opacity: 0.72;
	}
	100% {
		opacity: 0;
		transform: translateX(1.1rem) scale(1.15, -1.15);
	}
}

@media (min-width: 48rem) {
	.boopi-home-hero__plane-scene {
		inline-size: clamp(4.75rem, 8vw, 6.5rem);
		inset-block-start: var(--boopi-space-2);
		inset-inline-end: auto;
		inset-inline-start: 34%;
	}
}

@media (min-width: 64rem) {
	.boopi-home-hero__plane-scene {
		inset-inline-start: calc(34% + 12.5rem);
	}
}

.boopi-home-hero__plane-scene.is-animating .boopi-home-hero__plane {
	animation: boopi-plane-hop 620ms var(--boopi-ease-standard) 1;
}

.boopi-home-hero__plane-scene.is-animating .boopi-home-hero__plane-puff {
	animation: boopi-plane-puff 620ms var(--boopi-ease-standard) 1;
}

@media (hover: hover) and (pointer: fine) {
	.boopi-home-hero__plane-scene:hover .boopi-home-hero__plane {
		animation: boopi-plane-hop 620ms var(--boopi-ease-standard) 1;
	}

	.boopi-home-hero__plane-scene:hover .boopi-home-hero__plane-puff {
		animation: boopi-plane-puff 620ms var(--boopi-ease-standard) 1;
	}
}

.boopi-home-hero__blob--start {
	inset-block-start: 2%;
	inset-inline-start: 0;
	transform: translateX(-76%) rotate(5deg);
	opacity: 0.18;
}

/* Quiet decoration around the first below-the-fold Homepage cards. */
.boopi-home-starter-sets__blob {
	block-size: clamp(14rem, 28vw, 23rem);
	inline-size: clamp(12rem, 22vw, 18rem);
	inset-block-end: 2%;
	inset-inline-end: 0;
	opacity: 0.18;
	transform: translateX(58%) rotate(-9deg);
}

.boopi-home-starter-sets__spots {
	--boopi-starter-spot-edge: calc(25vw - 18.625rem);
	display: none;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.boopi-home-starter-sets__spot {
	background: var(--boopi-color-decoration-coral);
	block-size: 1.35rem;
	border-radius: 62% 38% 57% 43% / 41% 59% 44% 56%;
	inline-size: 1.8rem;
	inset-inline-start: var(--boopi-starter-spot-edge);
	opacity: 0.18;
	position: absolute;
}

.boopi-home-starter-sets__spot--first { inset-block-start: 14%; transform: translateX(-0.7rem) rotate(-18deg); }
.boopi-home-starter-sets__spot--second { background: var(--boopi-color-decoration-sage); inset-block-start: 29%; transform: translateX(0.8rem) rotate(14deg) scale(0.82); }
.boopi-home-starter-sets__spot--third { background: var(--boopi-color-decoration-lilac); inset-block-start: 44%; transform: translateX(-0.25rem) rotate(-8deg) scale(0.72); }
.boopi-home-starter-sets__spot--fourth { inset-block-start: 59%; transform: translateX(0.95rem) rotate(22deg) scale(0.88); }
.boopi-home-starter-sets__spot--fifth { background: var(--boopi-color-decoration-sage); inset-block-start: 74%; transform: translateX(-0.55rem) rotate(-15deg) scale(0.68); }

.boopi-home-how-it-works__blob {
	inset-block-start: 22%;
	inset-inline-start: 0;
	opacity: 0.16;
	transform: translateX(-68%) rotate(8deg);
}

.boopi-home-how-it-works__paw-trail {
	--boopi-how-paw-edge: calc(25vw - 18.625rem);
	display: none;
	inset: 0;
	z-index: 0;
}

.boopi-home-how-it-works__trail-spot,
.boopi-home-how-it-works__unicorn-paw {
	display: none;
}

.boopi-home-how-it-works__paw--first {
	inset-block-start: 12%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) - 0.6rem);
	opacity: 0.24;
	transform: rotate(18deg) scale(0.78);
}

.boopi-home-how-it-works__paw--second {
	inset-block-start: 18%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) + 0.6rem);
	opacity: 0.2;
	transform: rotate(-12deg) scale(0.72);
}

.boopi-home-how-it-works__paw--third {
	inset-block-start: 24%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) - 0.6rem);
	opacity: 0.22;
	transform: rotate(16deg) scale(0.76);
}

.boopi-home-how-it-works__paw--fourth {
	inset-block-start: 30%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) + 0.6rem);
	opacity: 0.19;
	transform: rotate(-14deg) scale(0.7);
}

.boopi-home-how-it-works__paw--fifth {
	inset-block-start: 82%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) - 0.6rem);
	opacity: 0.22;
	transform: rotate(16deg) scale(0.76);
}

.boopi-home-how-it-works__paw--sixth {
	inset-block-start: 88%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) + 0.6rem);
	opacity: 0.19;
	transform: rotate(-14deg) scale(0.7);
}

.boopi-home-how-it-works__trail-spot {
	background: var(--boopi-color-decoration-sage);
	block-size: 2.25rem;
	border-radius: 61% 39% 56% 44% / 43% 58% 42% 57%;
	inline-size: 3.25rem;
	inset-block-start: 64%;
	inset-inline-end: var(--boopi-how-paw-edge);
	opacity: 0.2;
	position: absolute;
	transform: rotate(-16deg);
}

.boopi-home-how-it-works__trail-spot--small {
	block-size: 1.25rem;
	inline-size: 1.8rem;
	inset-block-start: 57%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) + 1.25rem);
	opacity: 0.16;
	transform: rotate(19deg);
}

.boopi-home-how-it-works__trail-spot--tiny {
	block-size: 0.8rem;
	inline-size: 1.15rem;
	inset-block-start: 51%;
	inset-inline-end: calc(var(--boopi-how-paw-edge) + 2.1rem);
	opacity: 0.14;
	transform: rotate(-11deg);
}

.boopi-home-how-it-works__unicorn-paw--first {
	inset-block-start: 21%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) + 2.4rem);
	transform: rotate(-8deg) scale(0.72);
}

.boopi-home-how-it-works__unicorn-paw--second {
	inset-block-start: 17.5%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) + 0.2rem);
	transform: rotate(-14deg) scale(0.76);
}

.boopi-home-how-it-works__unicorn-paw--third {
	inset-block-start: 14%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) + 0.6rem);
	transform: rotate(-22deg) scale(0.7);
}

.boopi-home-how-it-works__unicorn-paw--fourth {
	inset-block-start: 10.5%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) - 1.8rem);
	transform: rotate(-30deg) scale(0.74);
}

.boopi-home-how-it-works__unicorn-paw--fifth {
	inset-block-start: 7%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) - 1.2rem);
	transform: rotate(-40deg) scale(0.7);
}

.boopi-home-how-it-works__unicorn-paw--sixth {
	inset-block-start: 3.5%;
	inset-inline-start: calc(var(--boopi-how-paw-edge) - 4.2rem);
	transform: rotate(-52deg) scale(0.74);
}

.boopi-home-how-it-works__unicorn-paw--seventh {
	inset-block-start: 0;
	inset-inline-start: calc(var(--boopi-how-paw-edge) - 3.6rem);
	transform: rotate(-64deg) scale(0.68);
}

@media (min-width: 48rem) {
	.boopi-home-hero {
		margin-block-end: 0;
	}

	.boopi-home-starter-sets__blob {
		transform: translateX(48%) rotate(-9deg);
	}

	.boopi-home-how-it-works__blob {
		transform: translateX(-58%) rotate(8deg);
	}
}

@media (min-width: 64rem) {
	.boopi-home-starter-sets__blob {
		transform: translateX(38%) rotate(-9deg);
	}

	.boopi-home-how-it-works__blob {
		transform: translateX(-46%) rotate(8deg);
	}
}

@media (min-width: 80rem) {
	.boopi-home-how-it-works__paw-trail {
		display: block;
	}

	.boopi-home-how-it-works__trail-spot,
	.boopi-home-how-it-works__unicorn-paw {
		display: block;
	}

	.boopi-home-starter-sets__spots {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boopi-home-hero__plane,
	.boopi-home-hero__plane-puff {
		animation: none !important;
	}
}

.boopi-home-hero__blob--end {
	block-size: clamp(14rem, 34vw, 27rem);
	inline-size: clamp(6rem, 13vw, 11rem);
	inset-block-start: 16%;
	inset-inline-end: 0;
	transform: translateX(66%) scaleX(-1) rotate(-5deg);
	opacity: 0.24;
}

.boopi-home-hero__paw-trail {
	inset: 0;
}

.boopi-home-hero__mobile-paw-trail {
	inset: 0;
}

.boopi-home-hero__paw--mobile-first {
	inset-block-start: 8%;
	inset-inline-end: 12%;
	transform: rotate(-16deg) scale(0.78);
}

.boopi-home-hero__paw--trail-start {
	inset-block-start: 25%;
	inset-inline-start: 43%;
	transform: rotate(-18deg);
}

.boopi-home-hero__paw--trail-middle {
	inset-block-start: 47%;
	inset-inline-start: 46%;
	transform: rotate(10deg);
}

.boopi-home-hero__paw--trail-end {
	inset-block-start: 69%;
	inset-inline-start: 43%;
	transform: rotate(-14deg);
}

.boopi-home-hero__paw--trail-end-right {
	inset-block-start: 76%;
	inset-inline-end: max(var(--boopi-gutter), 4%);
	transform: rotate(16deg);
}

.boopi-home-hero__blob--start:dir(rtl) {
	transform: translateX(76%) scaleX(-1) rotate(-5deg);
}

.boopi-home-hero__blob--end:dir(rtl) {
	transform: translateX(-66%) rotate(5deg);
}

@media (min-width: 48rem) {
	.boopi-home-hero__mobile-paw-trail {
		display: none;
	}

	.boopi-home-hero__blob--start {
		inset-block-start: 4%;
		transform: translateX(-66%) rotate(7deg);
	}

	.boopi-home-hero__blob--end {
		inset-block-start: 10%;
		transform: translateX(58%) scaleX(-1) rotate(-7deg);
	}

	.boopi-home-hero__blob--start:dir(rtl) {
		transform: translateX(66%) scaleX(-1) rotate(-7deg);
	}

	.boopi-home-hero__blob--end:dir(rtl) {
		transform: translateX(-58%) rotate(7deg);
	}
}

@media (min-width: 64rem) {
	.boopi-home-hero__blob--start {
		inset-block-start: 7%;
		transform: translateX(-58%) rotate(9deg);
	}

	.boopi-home-hero__blob--end {
		inset-block-start: 6%;
		transform: translateX(30%) scaleX(-1) rotate(-8deg);
	}

	.boopi-home-hero__blob--start:dir(rtl) {
		transform: translateX(58%) scaleX(-1) rotate(-9deg);
	}

	.boopi-home-hero__blob--end:dir(rtl) {
		transform: translateX(-30%) rotate(8deg);
	}

}

@media (min-width: 80rem) {
	.boopi-home-hero__paw--trail-end-right {
		inset-inline-end: calc(25vw - 18.625rem);
	}

	.boopi-home-hero__blob--end {
		inline-size: clamp(15rem, 20vw, 18rem);
		transform: translateX(44%) scaleX(-1) rotate(-8deg);
	}

	.boopi-home-hero__blob--end:dir(rtl) {
		transform: translateX(-44%) rotate(8deg);
	}
}

@media (forced-colors: active) {
	:where(.boopi-visual-edge, .boopi-visual-paw, .boopi-visual-paw-trail) {
		display: none;
	}
}

/* Card surfaces stay flat; elevation is reserved for interactive controls. */
.boopi-home :is(
	.boopi-how-it-works,
	.boopi-how-it-works__step,
	.boopi-home-value__benefits,
	.boopi-starter-set
) {
	box-shadow: none;
}

/* Global header components. */
.site-branding__home {
	color: var(--boopi-color-heading);
	display: inline-block;
	text-decoration: none;
}

.custom-logo {
	display: block;
	max-block-size: var(--boopi-size-logo-header);
	inline-size: auto;
}

.custom-logo.boopi-brand-logo {
	aspect-ratio: 925 / 696;
	block-size: var(--boopi-size-logo-header);
	inline-size: auto;
	transform-origin: 50% 60%;
}

@keyframes boopi-logo-play {
	0%, 100% {
		transform: translateY(0) rotate(0);
	}
	28% {
		transform: translateY(-0.22rem) rotate(-2deg);
	}
	52% {
		transform: translateY(-0.08rem) rotate(2deg);
	}
	76% {
		transform: translateY(-0.14rem) rotate(-1deg);
	}
}

.site-branding__home:is(:hover, :focus-visible) .boopi-brand-logo {
	animation: boopi-logo-play 620ms var(--boopi-ease-standard) 1;
}

.site-title {
	font-family: var(--boopi-font-family-heading);
	font-size: var(--boopi-font-size-xl);
	font-weight: var(--boopi-font-weight-bold);
}

.menu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--boopi-radius-sm);
	color: var(--boopi-color-text-muted);
	cursor: pointer;
	display: none;
	font: inherit;
	inline-size: var(--boopi-size-control-min);
	justify-content: center;
	min-block-size: var(--boopi-size-control-min);
	padding: var(--boopi-space-2);
}

.site-header__panel-close,
.boopi-submenu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--boopi-radius-sm);
	color: var(--boopi-color-text-muted);
	cursor: pointer;
	font: inherit;
	inline-size: var(--boopi-size-control-min);
	justify-content: center;
	min-block-size: var(--boopi-size-control-min);
	padding: var(--boopi-space-2);
}

.boopi-submenu-toggle {
	display: none;
}

.primary-menu,
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li + li {
	margin-block-start: 0;
}

.primary-menu a {
	color: var(--boopi-color-text-muted);
	cursor: pointer;
	display: flex;
	font-size: var(--boopi-font-size-md);
	font-weight: var(--boopi-font-weight-medium);
	min-block-size: var(--boopi-size-control-min);
	align-items: center;
	padding-inline: var(--boopi-space-2);
	text-decoration: none;
}

.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu .sub-menu .current-menu-item > a {
	color: var(--boopi-color-brand-primary);
	text-decoration: none;
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
	color: var(--boopi-color-brand-primary);
}

.site-header__edge {
	block-size: 1.5rem;
	inline-size: 100%;
	inset-block-end: -1.45rem;
	inset-inline-start: 0;
	pointer-events: none;
	position: absolute;
	overflow: visible;
	z-index: 1;
}

.site-header__edge svg {
	color: var(--boopi-color-brand-primary);
	display: block;
	block-size: 100%;
	inline-size: 100%;
	overflow: visible;
}

.site-header__edge-fill {
	fill: var(--boopi-color-canvas);
}

.site-header__edge-shadow {
	fill: none;
	stroke: var(--boopi-color-brand-primary);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.site-header__edge-shadow--near {
	filter: blur(0.2rem);
	opacity: 0.11;
	stroke-width: 0.2rem;
	transform: translateY(0.24rem);
}

.site-header__edge-shadow--far {
	filter: blur(0.52rem);
	opacity: 0.035;
	stroke-width: 0.34rem;
	transform: translateY(0.58rem);
}

@media (min-width: 80rem) {
	.site-header__edge svg {
		transform: scaleY(2.5);
		transform-origin: center;
	}
}

.site-header__edge-line {
	fill: none;
	stroke: color-mix(in srgb, var(--boopi-color-brand-primary) 8%, transparent);
	stroke-linecap: round;
	stroke-width: 0.5;
	vector-effect: non-scaling-stroke;
}

.site-header :is(
	.menu-toggle,
	.site-header__panel-close,
	.boopi-submenu-toggle,
	.boopi-header-utility
) .boopi-icon {
	stroke-width: 2.3;
}

.boopi-header-utility {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-text-muted);
	cursor: pointer;
	display: inline-flex;
	inline-size: var(--boopi-size-control-min);
	justify-content: center;
	min-block-size: var(--boopi-size-control-min);
	padding: var(--boopi-space-2);
	text-decoration: none;
}

.boopi-header-search {
	position: relative;
}

.boopi-header-search > summary {
	cursor: pointer;
	list-style: none;
}

.boopi-header-search > summary::-webkit-details-marker {
	display: none;
}

.boopi-header-search[open] > summary {
	background: transparent;
	color: var(--boopi-color-text-muted);
}

.boopi-header-search__panel {
	min-inline-size: 0;
}

.boopi-header-search__form,
.boopi-header-search__field {
	display: block;
	margin: 0;
	position: relative;
	width: 100%;
}

.boopi-header-search__form .search-field {
	border-color: var(--boopi-color-border);
	border-width: var(--boopi-border-width);
	box-shadow: none;
	font-size: var(--boopi-font-size-md);
	font-weight: var(--boopi-font-weight-regular);
	min-block-size: var(--boopi-size-control-min);
	min-inline-size: 0;
	outline: 0;
	padding-inline: calc(var(--boopi-size-control-min) + var(--boopi-space-1)) calc((2 * var(--boopi-size-control-min)) + var(--boopi-space-1));
	width: 100%;
}

.boopi-header-search__form .search-field::-webkit-search-cancel-button {
	appearance: none;
	display: none;
}

.boopi-header-search__form .search-field:focus-visible {
	border-color: var(--boopi-color-border);
	box-shadow: none;
	outline: 0;
}

.boopi-header-search__field-icon {
	align-items: center;
	block-size: var(--boopi-size-control-min);
	color: var(--boopi-color-text-muted);
	display: none;
	inset-block-start: 0;
	inset-inline-start: 0;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	width: var(--boopi-size-control-min);
}

.boopi-header-search__clear,
.boopi-header-search__submit {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0 var(--boopi-radius-md) var(--boopi-radius-md) 0;
	color: var(--boopi-color-action);
	cursor: pointer;
	display: inline-flex;
	block-size: calc(var(--boopi-size-control-min) - var(--boopi-border-width) - var(--boopi-border-width));
	inset-block-start: var(--boopi-border-width);
	inset-inline-end: var(--boopi-border-width);
	inline-size: calc(var(--boopi-size-control-min) - var(--boopi-border-width) - var(--boopi-border-width));
	justify-content: center;
	min-block-size: 0;
	padding: var(--boopi-space-2);
	position: absolute;
}

.boopi-header-search__clear {
	color: var(--boopi-color-disabled-text);
	inset-inline-end: var(--boopi-size-control-min);
}

.boopi-header-search__clear:focus-visible,
.boopi-header-search__submit:focus-visible {
	outline-offset: calc(-1 * var(--boopi-space-1));
}

.boopi-header-search__clear[hidden],
.boopi-header-search__submit[hidden] {
	display: none;
}

.boopi-header-search__suggestions {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-radius-md);
	box-shadow: var(--boopi-shadow-md);
	inset-block-start: calc(100% + var(--boopi-space-1));
	inset-inline: 0;
	list-style: none;
	margin: 0;
	max-block-size: 16rem;
	overflow-y: auto;
	padding: var(--boopi-space-1);
	position: absolute;
	z-index: var(--boopi-layer-dropdown);
}

.boopi-header-search__suggestions[hidden] {
	display: none;
}

.boopi-header-search__suggestions li + li {
	margin-block-start: 0;
}

.boopi-header-search__suggestions a {
	border-radius: var(--boopi-radius-sm);
	color: var(--boopi-color-text);
	display: block;
	padding: var(--boopi-space-2) var(--boopi-space-3);
	text-decoration: none;
}

.boopi-header-search__suggestions a:is(:hover, :focus-visible) {
	background: var(--boopi-color-surface-brand);
	color: var(--boopi-color-action);
}

.boopi-cart-link {
	position: relative;
}

.boopi-cart-link__count {
	align-items: center;
	background: var(--boopi-color-action);
	border: var(--boopi-border-width) solid var(--boopi-color-canvas);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-action-text);
	display: inline-flex;
	font-size: var(--boopi-font-size-xs);
	font-weight: var(--boopi-font-weight-semibold);
	inset-block-start: calc(-1 * var(--boopi-space-1));
	inset-inline-end: calc(-1 * var(--boopi-space-1));
	justify-content: center;
	min-block-size: 1.25rem;
	min-inline-size: 1.25rem;
	padding-inline: var(--boopi-space-1);
	position: absolute;
}

/* Header layout contract: wide at or above 80rem. */
@media (min-width: 80rem) {
	.primary-menu > :is(.current-menu-item, .current-menu-ancestor) > a {
		position: relative;
	}

	.primary-menu > :is(.current-menu-item, .current-menu-ancestor) > a::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M5 14c29 2 68-4 110-10' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		background: var(--boopi-color-decoration-yellow);
		block-size: 0.55rem;
		content: "";
		inline-size: 68%;
		inset-block-end: -0.3rem;
		inset-inline-start: 50%;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M5 14c29 2 68-4 110-10' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
		pointer-events: none;
		position: absolute;
		transform: translateX(-50%);
	}

	.boopi-header-search {
		align-items: center;
		display: flex;
		transition: inline-size var(--boopi-motion-fast) var(--boopi-ease-standard);
	}

	.boopi-header-search[open] {
		inline-size: clamp(14rem, 19vw, 19rem);
	}

	.boopi-header-search > summary {
		inset-block-start: 0;
		inset-inline-start: 0;
		position: absolute;
		z-index: 2;
	}

	.boopi-header-search:not([open]) > summary {
		position: static;
	}

	.boopi-header-search__panel {
		inline-size: 100%;
	}

	.primary-menu > .menu-item {
		position: relative;
	}

	.primary-menu .sub-menu {
		background: var(--boopi-color-surface);
		border: var(--boopi-border-width) solid var(--boopi-color-border);
		border-radius: var(--boopi-radius-md);
		box-shadow: var(--boopi-shadow-md);
		inset-inline-start: 0;
		min-inline-size: 13rem;
		opacity: 0;
		padding: var(--boopi-space-2);
		pointer-events: none;
		position: absolute;
		top: 100%;
		transform: translateY(calc(-1 * var(--boopi-space-1)));
		transition:
			opacity var(--boopi-motion-fast) var(--boopi-ease-standard),
			transform var(--boopi-motion-fast) var(--boopi-ease-standard),
			visibility var(--boopi-motion-fast) step-end;
		visibility: hidden;
		z-index: var(--boopi-layer-dropdown);
	}

	.primary-menu > .menu-item-has-children > a::after {
		block-size: 0.4rem;
		border-block-end: 0.1rem solid currentcolor;
		border-inline-end: 0.1rem solid currentcolor;
		content: "";
		display: inline-block;
		inline-size: 0.4rem;
		margin-inline-start: var(--boopi-space-2);
		transform: translateY(-0.12rem) rotate(45deg);
	}

	.primary-menu > .menu-item-has-children:is(:hover, :focus-within) > .sub-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		transition-timing-function:
			var(--boopi-ease-standard),
			var(--boopi-ease-standard),
			step-start;
		visibility: visible;
	}
}

@media (max-width: 79.99rem) {
	.primary-menu > .menu-item {
		border-block-end: var(--boopi-border-width) solid var(--boopi-color-border);
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.primary-menu > .menu-item:first-child {
		border-block-start: var(--boopi-border-width) solid var(--boopi-color-border);
	}

	.primary-menu a {
		padding-block: var(--boopi-space-2);
	}

	.primary-menu .sub-menu {
		grid-column: 1 / -1;
		padding-inline-start: var(--boopi-space-4);
	}

	.primary-menu .sub-menu > .menu-item {
		border-block-start: var(--boopi-border-width) solid var(--boopi-color-border);
	}

	.boopi-submenu-toggle::after {
		block-size: 0.5rem;
		border-block-end: 0.1rem solid currentcolor;
		border-inline-end: 0.1rem solid currentcolor;
		content: "";
		display: block;
		inline-size: 0.5rem;
		transform: translateY(-0.12rem) rotate(45deg);
	}

	.boopi-navigation-enhanced .boopi-submenu-toggle {
		display: inline-flex;
	}

	.boopi-submenu-toggle[aria-expanded="true"]::after {
		transform: translateY(0.12rem) rotate(225deg);
	}

	.site-header__account .boopi-header-utility {
		inline-size: auto;
		justify-content: flex-start;
	}

	.boopi-header-search,
	.boopi-header-search__panel {
		display: block;
		inline-size: 100%;
	}

	.boopi-header-search > summary {
		display: none;
	}

	.boopi-header-search:not([open]) > .boopi-header-search__panel {
		display: block;
	}

	.boopi-header-search__field-icon {
		display: flex;
	}

	.boopi-header-search__suggestions {
		position: static;
	}

	.boopi-account-link {
		background: var(--boopi-color-surface-subtle);
		border-radius: var(--boopi-radius-md);
		color: var(--boopi-color-text);
		gap: var(--boopi-space-3);
		inline-size: 100%;
		max-inline-size: none;
		justify-content: center;
		padding-inline: var(--boopi-space-3);
		position: relative;
	}

	.site-header__account .boopi-account-link {
		justify-content: center;
	}

	.boopi-account-link > .boopi-icon {
		inset-inline-start: var(--boopi-space-3);
		position: absolute;
	}

	.boopi-account-link:is(:hover, :focus-visible) {
		background: var(--boopi-color-surface-brand);
		color: var(--boopi-color-action);
	}

	.boopi-account-link__label.screen-reader-text {
		clip: auto;
		clip-path: none;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static !important;
		white-space: normal;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-branding__home:is(:hover, :focus-visible) .boopi-brand-logo {
		animation: none;
	}

	.boopi-navigation-enhanced .site-header__panel-surface,
	.boopi-submenu-toggle::after {
		transition: none;
	}
}

@media (forced-colors: active) {
	.site-header__edge,
	.primary-menu > :is(.current-menu-item, .current-menu-ancestor) > a::before {
		display: none;
	}

	.site-header,
	.site-header__panel-surface,
	.boopi-header-search__panel,
	.boopi-header-search__suggestions,
	.primary-menu .sub-menu {
		border: 1px solid CanvasText;
	}

	.menu-toggle,
	.site-header__panel-close,
	.boopi-submenu-toggle,
	.boopi-header-utility,
	.primary-menu a {
		forced-color-adjust: auto;
	}

	.primary-menu :where(.current-menu-item, .current-menu-ancestor) > a,
	.boopi-header-search[open] > summary,
	.boopi-submenu-toggle[aria-expanded="true"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

:where(.boopi-button--secondary) {
	background: var(--boopi-color-surface);
	border-color: var(--boopi-color-action);
	color: var(--boopi-color-action);
}

:where(.boopi-button--subtle) {
	background: var(--boopi-color-surface-brand);
	border-color: transparent;
	color: var(--boopi-color-link);
}

:where(.boopi-button--destructive) {
	background: var(--boopi-color-error);
	border-color: var(--boopi-color-error);
	color: var(--boopi-color-action-text);
}

@media (hover: hover) {
	.boopi-header-search:not([open]) > summary:hover {
		color: var(--boopi-color-action);
	}

	.boopi-header-search__clear:not(:disabled):hover,
	.boopi-header-search__submit:not(:disabled):hover {
		background: transparent;
		border-color: transparent;
		color: var(--boopi-color-action-hover);
	}

	:where(
		.boopi-button,
		.button,
		.wp-element-button,
		button[type="submit"],
		input[type="submit"]
	):not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-action-hover);
		border-color: var(--boopi-color-action-hover);
		color: var(--boopi-color-action-text);
	}

	.boopi-starter-set__action:not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-action-pink-hover);
		border-color: transparent;
	}

	.boopi-how-it-works__action:not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-action-lilac-hover);
		border-color: transparent;
	}

	.boopi-home-value__action:not(:disabled, [aria-disabled="true"]):hover {
		background: color-mix(in srgb, var(--boopi-home-value-accent) 86%, black);
		border-color: transparent;
	}

	:where(.boopi-button--secondary):not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-surface-brand);
		color: var(--boopi-color-link-hover);
	}

	:where(.boopi-button--subtle):not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-surface-subtle);
		color: var(--boopi-color-link-hover);
	}

	:where(.boopi-button--destructive):not(:disabled, [aria-disabled="true"]):hover {
		background: var(--boopi-color-heading);
		border-color: var(--boopi-color-heading);
	}
}

:where(
	.boopi-button,
	.button,
	.wp-element-button,
	button[type="submit"],
	input[type="submit"]
):not(:disabled, [aria-disabled="true"]):active {
	box-shadow: var(--boopi-shadow-none);
	transform: translateY(var(--boopi-border-width));
}

:where(
	.boopi-button,
	.button,
	.wp-element-button,
	button[type="submit"],
	input[type="submit"]
):is(:disabled, [aria-disabled="true"]) {
	background: var(--boopi-color-disabled-surface);
	border-color: var(--boopi-color-border);
	color: var(--boopi-color-disabled-text);
	cursor: not-allowed;
	text-decoration: line-through;
}

.boopi-configurator__step-actions [data-boopi-step-next]:disabled {
	background: var(--boopi-color-disabled-surface);
	border-color: var(--boopi-color-border);
	box-shadow: none;
	color: var(--boopi-color-disabled-text);
	cursor: not-allowed;
	text-decoration: none;
	transform: none;
}

.boopi-configurator__summary-action:disabled {
	text-decoration: none;
}

:where(
	.boopi-button,
	.button,
	.wp-element-button,
	button[type="submit"]
)[aria-busy="true"] {
	cursor: progress;
}

:where(
	.boopi-button,
	.button,
	.wp-element-button,
	button[type="submit"]
)[aria-busy="true"]::after,
.boopi-spinner {
	animation: boopi-spin var(--boopi-motion-slow) linear infinite;
	block-size: var(--boopi-size-icon-md);
	border: var(--boopi-border-width-strong) solid currentcolor;
	border-block-start-color: transparent;
	border-radius: var(--boopi-radius-pill);
	box-sizing: border-box;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	inline-size: var(--boopi-size-icon-md);
}

.boopi-divider,
hr {
	border: 0;
	border-block-start: var(--boopi-border-width) solid var(--boopi-color-border);
	margin-block: var(--boopi-space-6);
}

.boopi-badge {
	align-items: center;
	background: var(--boopi-color-surface-subtle);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-text);
	display: inline-flex;
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-semibold);
	gap: var(--boopi-space-1);
	line-height: var(--boopi-line-height-control);
	min-block-size: var(--boopi-size-icon-lg);
	padding: var(--boopi-space-1) var(--boopi-space-2);
}

.boopi-badge--success {
	background: var(--boopi-color-success-surface);
	border-color: var(--boopi-color-success);
	color: var(--boopi-color-success);
}

.boopi-badge--warning {
	background: var(--boopi-color-warning-surface);
	border-color: var(--boopi-color-warning);
	color: var(--boopi-color-warning);
}

.boopi-surface,
.boopi-card {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-radius-lg);
}

.boopi-surface {
	padding: var(--boopi-space-5);
}

.boopi-card {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
}

.boopi-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--boopi-space-3);
	padding: var(--boopi-space-5);
}

.boopi-card--interactive {
	transition:
		border-color var(--boopi-motion-fast) var(--boopi-ease-standard),
		box-shadow var(--boopi-motion-fast) var(--boopi-ease-standard);
}

.boopi-card--interactive:focus-within {
	border-color: var(--boopi-color-focus);
	box-shadow: var(--boopi-shadow-md);
}

.boopi-empty-state {
	align-items: center;
	background: var(--boopi-color-surface-subtle);
	border: var(--boopi-border-width) dashed var(--boopi-color-border-strong);
	border-radius: var(--boopi-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--boopi-space-3);
	padding: var(--boopi-space-7) var(--boopi-space-5);
	text-align: center;
}

.boopi-empty-state > * {
	margin-block: 0;
	max-inline-size: var(--boopi-text-measure-narrow);
}

@keyframes boopi-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(
		.boopi-button,
		.button,
		.wp-element-button,
		button[type="submit"],
		input[type="submit"]
	) {
		transition: none;
	}

	:where(
		.boopi-button,
		.button,
		.wp-element-button,
		button[type="submit"]
	)[aria-busy="true"]::after,
	.boopi-spinner {
		animation-duration: 2s;
	}
}

@media (forced-colors: active) {
	.boopi-badge,
	.boopi-card,
	.boopi-empty-state,
	.boopi-surface {
		border-color: CanvasText;
	}
}

@media (min-width: 64rem) and (max-height: 50rem) {
	.boopi-configurator__cart-card {
		padding: var(--boopi-space-3);
	}

	.boopi-configurator__cart-card .boopi-configurator__summary-eyebrow {
		display: none;
	}

	.boopi-configurator__cart-card h2 {
		font-size: var(--boopi-font-size-xl);
		margin-block-end: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		margin-block: 0;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		grid-template-columns: 1.5rem 2.15rem minmax(0, 1fr) auto;
		min-block-size: 3.2rem;
		padding-block: 0.15rem;
	}

	.boopi-configurator__journey-marker {
		block-size: 1.5rem;
		font-size: var(--boopi-font-size-xs);
		inline-size: 1.5rem;
	}

	.boopi-configurator__journey-media {
		block-size: 2.15rem;
		inline-size: 2.15rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-category,
	.boopi-configurator__cart-card .boopi-configurator__selection-value,
	.boopi-configurator__cart-card .boopi-configurator__selection-price {
		font-size: var(--boopi-font-size-xs);
	}

	.boopi-configurator__journey-action {
		min-block-size: 2.5rem;
		padding-block: var(--boopi-space-2);
	}

	.boopi-configurator__cart-card > .boopi-configurator__total,
	.boopi-configurator__cart-card .boopi-configurator__shipping-summary {
		margin-block: var(--boopi-space-1);
	}

	.boopi-configurator__cart-card .boopi-configurator__payment-methods {
		margin-block-start: var(--boopi-space-1);
		padding-block-start: var(--boopi-space-2);
	}
}

@media (min-width: 64rem) {
	.boopi-configurator__cart-title-desktop,
	.boopi-configurator__journey-action,
	.boopi-configurator__journey-marker,
	.boopi-configurator__journey-media,
	.boopi-configurator__journey-step-target {
		display: block;
	}

	.boopi-configurator__journey-marker,
	.boopi-configurator__journey-media {
		display: flex;
	}

	.boopi-configurator__cart-title-mobile,
	.boopi-configurator__cart-card .boopi-configurator__selection-icon,
	.boopi-configurator__cart-card .boopi-configurator__selection-check,
	.boopi-configurator__step-actions [data-boopi-step-next] {
		display: none;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		border: 0;
		column-gap: var(--boopi-space-3);
		grid-template-columns: 1.75rem 2.6rem minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		min-block-size: 4.2rem;
		padding: var(--boopi-space-1) 0;
		position: relative;
		row-gap: 0.15rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-category {
		grid-column: 3;
		grid-row: 1;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-value {
		grid-column: 2 / -1;
		grid-row: 3;
		justify-self: start;
		margin-block-start: var(--boopi-space-1);
		text-align: start;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-price {
		align-self: start;
		grid-column: 3;
		grid-row: 2;
		justify-self: start;
		text-align: start;
	}

	.boopi-configurator__cart-card > .boopi-configurator__total {
		margin-block: var(--boopi-space-3) var(--boopi-space-2);
	}

	.boopi-configurator__journey-marker {
		block-size: 1.75rem;
		inline-size: 1.75rem;
	}

	.boopi-configurator__journey-media {
		block-size: 2.6rem;
		inline-size: 2.6rem;
		overflow: visible;
		position: relative;
	}

	.boopi-configurator__journey-media img {
		background: var(--boopi-color-surface);
		border-radius: inherit;
	}

	.boopi-configurator__journey-count {
		align-items: center;
		background: var(--boopi-config-active-accent);
		border: var(--boopi-border-width) solid var(--boopi-color-surface);
		border-radius: 50%;
		color: var(--boopi-color-surface);
		display: flex;
		font-size: 0.625rem;
		font-weight: var(--boopi-font-weight-bold);
		inset-block-start: -0.35rem;
		inset-inline-end: -0.35rem;
		block-size: 1.15rem;
		inline-size: 1.15rem;
		justify-content: center;
		position: absolute;
		z-index: 3;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 24%, var(--boopi-color-border));
		block-size: calc(100% - 1.75rem);
		inline-size: var(--boopi-border-width-strong);
		inset-block-start: calc(50% + 0.875rem);
		inset-block-end: auto;
		inset-inline-start: calc(0.875rem - var(--boopi-border-width));
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::before {
		background: var(--boopi-config-active-accent);
		content: "";
		display: none;
		block-size: calc((100% - 1.75rem) / 2);
		inline-size: calc(2 * var(--boopi-border-width-strong));
		inset-block-start: calc(50% + 0.875rem);
		inset-inline-start: calc(0.875rem - var(--boopi-border-width-strong));
		position: absolute;
		z-index: 1;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row.is-active:not(:last-child)::before,
	.boopi-configurator__cart-card .boopi-configurator__selection-row.is-complete:not(:last-child)::before {
		display: block;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row.is-complete:not(:last-child)::before {
		block-size: calc(100% - 1.75rem);
	}

	.boopi-configurator__journey-action {
		margin-block-start: auto;
	}
}

@media (min-width: 64rem) and (max-height: 50rem) {
	.boopi-configurator__cart-card .boopi-configurator__selection-row {
		min-block-size: 3.1rem;
	}

	.boopi-configurator__cart-card .boopi-configurator__payment-methods {
		padding-block-start: var(--boopi-space-1);
	}
}

@media (min-width: 64rem) {
	#boopi-config-cart-content {
		display: flex;
		flex: 1 1 auto;
		min-block-size: 0;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		display: grid;
		flex: 1 1 auto;
		grid-template-rows: repeat(4, minmax(4.2rem, 1fr));
		inline-size: 100%;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-value {
		display: none;
	}

	.boopi-configurator__journey-action {
		background: var(--boopi-config-active-accent);
		border-color: var(--boopi-config-active-accent);
		color: var(--boopi-color-surface);
		justify-content: center;
	}

	.boopi-configurator__journey-action .boopi-icon {
		block-size: 1.1rem;
		inline-size: 1.1rem;
	}

	.boopi-configurator__journey-action:not(:disabled):is(:hover, :focus-visible) {
		background: color-mix(in srgb, var(--boopi-config-active-accent) 84%, var(--boopi-color-text));
		border-color: color-mix(in srgb, var(--boopi-config-active-accent) 84%, var(--boopi-color-text));
	}
}

@media (min-width: 64rem) {
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after,
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::before {
		inset-block-start: 1.75rem;
	}
}

@media (min-width: 64rem) and (max-height: 50rem) {
	.boopi-configurator__cart-card .boopi-configurator__selection-summary {
		grid-template-rows: repeat(4, minmax(3.1rem, 1fr));
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after,
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::before {
		inset-block-start: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::after,
	.boopi-configurator__cart-card .boopi-configurator__selection-row:not(:last-child)::before {
		block-size: 100%;
		inset-block-start: 50%;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-row.is-active:not(:last-child)::before,
	.boopi-configurator__cart-card .boopi-configurator__selection-row.is-complete:not(:last-child)::before {
		block-size: 100%;
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-price[data-empty="true"] {
		color: color-mix(in srgb, var(--boopi-color-text-muted) 58%, var(--boopi-color-surface));
		font-size: 0;
		font-weight: var(--boopi-font-weight-regular);
	}

	.boopi-configurator__cart-card .boopi-configurator__selection-price[data-empty="true"]::after {
		content: "- Noch nicht gewählt -";
		font-size: var(--boopi-font-size-xs);
		white-space: nowrap;
	}

	.boopi-configurator__journey-validation:not([hidden]) {
		align-items: center;
		color: var(--boopi-color-text-muted);
		display: flex;
		font-size: 0.625rem;
		gap: var(--boopi-space-1);
		justify-content: center;
		margin: var(--boopi-space-2) 0;
		text-align: center;
	}

	.boopi-configurator__journey-validation .boopi-configurator__validation-icon {
		flex: 0 0 auto;
	}

	.boopi-configurator__journey-validation .boopi-icon {
		block-size: 0.625rem;
		inline-size: 0.625rem;
	}

	.boopi-configurator__journey-previous:not([hidden]) {
		align-self: center;
		background: transparent;
		border: 0;
		color: var(--boopi-config-active-accent);
		cursor: pointer;
		display: inline-block;
		font: inherit;
		font-size: 0.875rem;
		font-weight: var(--boopi-font-weight-medium);
		margin-block-start: var(--boopi-space-2);
		padding: var(--boopi-space-1);
	}

	.boopi-configurator__journey-previous:is(:hover, :focus-visible) {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.boopi-configurator__journey-action:disabled {
		background: color-mix(in srgb, var(--boopi-color-text-muted) 16%, var(--boopi-color-surface));
		border-color: color-mix(in srgb, var(--boopi-color-text-muted) 22%, var(--boopi-color-surface));
		box-shadow: none;
		color: var(--boopi-color-text-disabled);
		text-decoration: none;
		transform: none;
	}

	.boopi-configurator__journey-action {
		position: relative;
	}

	.boopi-configurator__journey-action .boopi-icon {
		inset-block-start: 50%;
		inset-inline-end: var(--boopi-space-4);
		position: absolute;
		transform: translateY(-50%);
	}
}

.boopi-configurator__step-previous {
	font-weight: var(--boopi-font-weight-medium);
}