/**
 * WooCommerce and extension state mapping.
 *
 * Presentation only: calculations, validation, availability, and announcements
 * remain owned by WooCommerce and the relevant extensions.
 */

:where(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-warning,
	.boopi-notice,
	.wc-block-components-notice-banner
) {
	--boopi-notice-color: var(--boopi-color-info);
	--boopi-notice-surface: var(--boopi-color-info-surface);
	--boopi-notice-symbol: "i";

	background: var(--boopi-notice-surface);
	border: var(--boopi-border-width-strong) solid var(--boopi-notice-color);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-text);
	display: flow-root;
	list-style: none;
	margin-block: 0 var(--boopi-space-5);
	padding: var(--boopi-space-4);
	padding-inline-start: calc(var(--boopi-space-4) + var(--boopi-size-icon-lg) + var(--boopi-space-3));
	position: relative;
}

:where(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-warning,
	.boopi-notice,
	.wc-block-components-notice-banner
)::before {
	align-items: center;
	align-self: start;
	background: var(--boopi-notice-color);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-shop-card-action);
	content: var(--boopi-notice-symbol);
	display: inline-flex;
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-bold);
	inline-size: var(--boopi-size-icon-lg);
	inset-block-start: var(--boopi-space-4);
	inset-inline-start: var(--boopi-space-4);
	justify-content: center;
	line-height: 1;
	min-block-size: var(--boopi-size-icon-lg);
	position: absolute;
}

:where(.woocommerce-message, .boopi-notice--success, .wc-block-components-notice-banner.is-success) {
	--boopi-notice-color: var(--boopi-color-success);
	--boopi-notice-surface: var(--boopi-color-success-surface);
	--boopi-notice-symbol: "✓";
}

:where(.woocommerce-error, .boopi-notice--error, .wc-block-components-notice-banner.is-error) {
	--boopi-notice-color: var(--boopi-color-error);
	--boopi-notice-surface: var(--boopi-color-error-surface);
	--boopi-notice-symbol: "!";
}

:where(.woocommerce-warning, .boopi-notice--warning, .wc-block-components-notice-banner.is-warning) {
	--boopi-notice-color: var(--boopi-color-warning);
	--boopi-notice-surface: var(--boopi-color-warning-surface);
	--boopi-notice-symbol: "!";
}

:where(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-warning,
	.boopi-notice,
	.wc-block-components-notice-banner
) > * {
	margin-block: 0;
	max-inline-size: var(--boopi-text-measure);
	min-inline-size: 0;
}

:where(.woocommerce-error) li + li {
	margin-block-start: var(--boopi-space-2);
}

:where(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-warning,
	.boopi-notice,
	.wc-block-components-notice-banner
) :where(a, .button) {
	margin-inline-end: var(--boopi-space-3);
}

.wc-block-components-notice-banner__dismiss {
	inset-block-start: var(--boopi-space-2);
	inset-inline-end: var(--boopi-space-2);
	min-block-size: var(--boopi-size-control-min);
	min-inline-size: var(--boopi-size-control-min);
	position: absolute;
}

:where(.price, .product-price, .woocommerce-Price-amount) {
	font-variant-numeric: tabular-nums;
}

:where(.price) del {
	color: var(--boopi-color-text-muted);
	text-decoration-thickness: var(--boopi-border-width-strong);
}

:where(.price) ins {
	color: var(--boopi-color-error);
	font-weight: var(--boopi-font-weight-bold);
	text-decoration: none;
}

:where(.onsale) {
	background: var(--boopi-color-error-surface);
	border: var(--boopi-border-width) solid var(--boopi-color-error);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-color-error);
	display: inline-flex;
	font-size: var(--boopi-font-size-sm);
	font-weight: var(--boopi-font-weight-bold);
	padding: var(--boopi-space-1) var(--boopi-space-2);
}

:where(
	.wc-gzd-additional-info,
	.wc-gzd-legal-price-info,
	.wc-gzd-cart-info,
	.legal-price-info,
	.tax-info,
	.shipping-costs-info,
	.delivery-time-info,
	.includes_tax,
	.woocommerce-shipping-destination,
	.woocommerce-privacy-policy-text,
	.payment_box
) {
	color: var(--boopi-color-text);
	font-size: var(--boopi-font-size-sm);
	line-height: var(--boopi-line-height-body);
	max-inline-size: var(--boopi-text-measure);
}

:where(
	.wc-gzd-additional-info,
	.wc-gzd-legal-price-info,
	.wc-gzd-cart-info,
	.legal-price-info,
	.tax-info,
	.shipping-costs-info,
	.delivery-time-info,
	.includes_tax,
	.woocommerce-shipping-destination,
	.woocommerce-privacy-policy-text,
	.payment_box
) a {
	text-decoration: underline;
}

:where(.stock, .backorder_notification, .variation-availability) {
	border-inline-start: var(--boopi-border-width-strong) solid currentcolor;
	font-weight: var(--boopi-font-weight-semibold);
	padding-inline-start: var(--boopi-space-3);
}

:where(.stock.in-stock, .available-on-backorder) {
	color: var(--boopi-color-success);
}

:where(.backorder_notification, .stock.available-on-backorder) {
	color: var(--boopi-color-warning);
}

:where(.stock.out-of-stock, .woocommerce-variation-unavailable) {
	color: var(--boopi-color-error);
}

:where(.cart-discount, .coupon) {
	font-variant-numeric: tabular-nums;
}

:where(.order-status, .woocommerce-orders-table__cell-order-status) {
	font-weight: var(--boopi-font-weight-semibold);
}

:where(
	.woocommerce-orders-table__row--status-completed,
	.woocommerce-orders-table__row--status-processing
) {
	--boopi-order-state: var(--boopi-color-success);
}

:where(
	.woocommerce-orders-table__row--status-pending,
	.woocommerce-orders-table__row--status-on-hold
) {
	--boopi-order-state: var(--boopi-color-warning);
}

:where(
	.woocommerce-orders-table__row--status-failed,
	.woocommerce-orders-table__row--status-cancelled
) {
	--boopi-order-state: var(--boopi-color-error);
}

:where(.woocommerce-orders-table__row--status-refunded) {
	--boopi-order-state: var(--boopi-color-info);
}

:where(.woocommerce-orders-table__row[class*="--status-"]) {
	box-shadow: inset var(--boopi-border-width-strong) 0 0 var(--boopi-order-state, var(--boopi-color-border-strong));
}

:where(.payment_box) {
	background: var(--boopi-color-surface-subtle);
	border: var(--boopi-border-width) solid var(--boopi-color-border);
	border-radius: var(--boopi-radius-md);
	padding: var(--boopi-space-4);
}

:where(.processing, [aria-busy="true"], .blockUI.blockOverlay) {
	cursor: progress;
}

:where(.woocommerce, .wc-block-components-main)[aria-busy="true"] {
	opacity: 0.75;
}

@media (max-width: 30rem) {
	.wc-block-components-notice-banner__dismiss {
		margin-block-start: var(--boopi-space-2);
		position: static;
	}
}

@media (forced-colors: active) {
	:where(
		.woocommerce-message,
		.woocommerce-info,
		.woocommerce-error,
		.woocommerce-warning,
		.boopi-notice,
		.wc-block-components-notice-banner
	) {
		border-color: CanvasText;
	}
}

/* Grouped main Shop ------------------------------------------------------- */

.site-main.boopi-shop {
	inline-size: min(100% - (2 * var(--boopi-gutter)), var(--boopi-container-storefront));
	margin-inline: auto;
	padding-block: clamp(var(--boopi-space-3), 1.125vw, var(--boopi-space-4)) var(--boopi-space-section);
}

.site-main.boopi-shop:not(.boopi-shop--category) {
	padding-block-start: calc(clamp(var(--boopi-space-3), 1.125vw, var(--boopi-space-4)) + var(--boopi-space-section));
}

.boopi-shop-hero {
	align-items: center;
	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);
	column-gap: var(--boopi-space-6);
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
	overflow: hidden;
	padding: var(--boopi-home-card-padding);
	position: relative;
}

.boopi-shop-hero__copy {
	display: flex;
	flex-direction: column;
}

.boopi-shop-hero__copy > * {
	grid-column: 1;
}

.boopi-shop-hero__copy > p {
	max-inline-size: var(--boopi-text-measure);
}

.boopi-shop-hero__eyebrow {
	color: var(--boopi-color-action-pink);
	font-weight: var(--boopi-font-weight-semibold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin-block: 0 var(--boopi-space-2);
	text-transform: uppercase;
}

.boopi-shop-hero h1 {
	color: var(--boopi-color-action-pink);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-3xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0 var(--boopi-space-4);
}

.boopi-shop-hero__copy > p:not(.boopi-shop-hero__eyebrow) {
	margin-block: 0 var(--boopi-space-3);
}

.boopi-shop-hero__copy > p.boopi-shop-hero__configurator-copy {
	font-weight: inherit;
	margin-block: var(--boopi-space-4) var(--boopi-space-3);
}

.boopi-shop-hero__action {
	align-self: flex-start;
	background: var(--boopi-color-action-pink);
	border-color: var(--boopi-color-action-pink);
	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);
	text-decoration: none;
}

.boopi-shop-hero__action:visited {
	color: var(--boopi-color-action-text);
}

.boopi-shop-hero__action:is(:hover, :focus-visible) {
	background: var(--boopi-color-action-pink-hover);
	border-color: var(--boopi-color-action-pink-hover);
	box-shadow: var(--boopi-shadow-md);
	color: var(--boopi-color-action-text);
	transform: translateY(calc(-1 * var(--boopi-border-width)));
}

.boopi-shop-hero__system {
	align-items: center;
	color: var(--boopi-color-action-pink);
	display: flex;
	grid-column: 2;
	grid-row: 1;
	justify-content: center;
	min-inline-size: 0;
}

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

.boopi-shop-hero__system-fallback {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-3);
	justify-content: center;
}

.boopi-shop-hero__system-fallback .boopi-icon {
	background: color-mix(in srgb, var(--boopi-color-surface) 78%, transparent);
	border-radius: var(--boopi-radius-pill);
	box-sizing: content-box;
	inline-size: clamp(2.5rem, 4vw, 4rem);
	block-size: clamp(2.5rem, 4vw, 4rem);
	padding: var(--boopi-space-3);
}

.boopi-shop-hero__system-fallback > span:not(.boopi-icon) {
	font-size: var(--boopi-font-size-2xl);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-shop__sections {
	display: grid;
	gap: var(--boopi-space-section);
	margin-block-start: var(--boopi-space-section);
}

.boopi-shop-section {
	--boopi-shop-accent: var(--boopi-color-action-pink);
	--boopi-shop-accent-hover: var(--boopi-color-action-pink-hover);
	--boopi-shop-surface: var(--boopi-color-home-card-pink-surface);
}

.boopi-shop-section--lilac {
	--boopi-shop-accent: var(--boopi-color-action-lilac);
	--boopi-shop-accent-hover: var(--boopi-color-action-lilac-hover);
	--boopi-shop-surface: var(--boopi-color-home-card-lilac-surface);
}

.boopi-shop-section--blue {
	--boopi-shop-accent: var(--boopi-color-info);
	--boopi-shop-accent-hover: var(--boopi-color-link-hover);
	--boopi-shop-surface: var(--boopi-color-info-surface);
}

.boopi-shop-section--sage {
	--boopi-shop-accent: var(--boopi-color-action-sage);
	--boopi-shop-accent-hover: var(--boopi-color-action-sage-hover);
	--boopi-shop-surface: var(--boopi-color-home-card-sage-surface);
}

.boopi-shop-section__header {
	align-items: end;
	display: flex;
	gap: var(--boopi-space-5);
	justify-content: space-between;
	margin-block-end: var(--boopi-space-5);
}

.boopi-shop-section__header h2 {
	color: var(--boopi-shop-accent);
	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 var(--boopi-space-1);
}

.boopi-shop-section__header p {
	margin: 0;
}

.boopi-shop-section__link {
	align-items: center;
	color: var(--boopi-shop-accent);
	display: inline-flex;
	flex: 0 0 auto;
	font-weight: var(--boopi-font-weight-semibold);
	gap: var(--boopi-space-2);
	min-block-size: var(--boopi-size-control-min);
	text-decoration: none;
}

.boopi-shop-section__link:hover,
.boopi-shop-section__link:focus-visible {
	color: var(--boopi-shop-accent-hover);
}

.boopi-shop-section__link .boopi-icon {
	inline-size: var(--boopi-size-icon-md);
}

.boopi-shop-grid {
	display: grid;
	gap: clamp(var(--boopi-space-4), 2vw, var(--boopi-space-6));
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.boopi-shop-card {
	--boopi-shop-card-action: color-mix(in srgb, var(--boopi-shop-media-background, var(--boopi-shop-surface)) 76%, var(--boopi-color-text));
	--boopi-shop-card-action: oklch(from var(--boopi-shop-media-background, var(--boopi-shop-surface)) calc(l * 0.78) calc(c * 1.45) h);

	background: var(--boopi-color-surface);
	border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-color-border) 55%, transparent);
	border-radius: var(--boopi-radius-lg);
	box-shadow: var(--boopi-shadow-sm);
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	position: relative;
	transition: box-shadow var(--boopi-motion-normal) var(--boopi-ease-standard), transform var(--boopi-motion-normal) var(--boopi-ease-standard);
}

.boopi-shop-card__visual {
	position: relative;
}

.boopi-shop-card:hover,
.boopi-shop-card:focus-within {
	box-shadow: var(--boopi-shadow-md);
	transform: translateY(-0.2rem);
}

.boopi-shop-card__media {
	aspect-ratio: 3 / 4;
	background: var(--boopi-shop-media-background, var(--boopi-shop-surface));
	border-radius: var(--boopi-radius-lg);
	color: inherit;
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.boopi-shop-card__images,
.boopi-shop-card__image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.boopi-shop-card__image {
	object-fit: contain;
	padding: clamp(var(--boopi-space-3), 2vw, var(--boopi-space-5));
	transition: opacity var(--boopi-motion-slow) var(--boopi-ease-standard), transform var(--boopi-motion-slow) var(--boopi-ease-standard);
}

.boopi-shop-card--patches .boopi-shop-card__image {
	transform: scale(0.9);
}

.boopi-shop-card--worlds .boopi-shop-card__image {
	padding: 0;
}

.boopi-shop-section--blue .boopi-shop-card:nth-child(4n + 1),
.boopi-shop-section--sage .boopi-shop-card:nth-child(4n + 3) {
	--boopi-shop-media-background: var(--boopi-color-info-surface);
}

.boopi-shop-section--blue .boopi-shop-card:nth-child(4n + 2),
.boopi-shop-section--sage .boopi-shop-card:nth-child(4n + 4) {
	--boopi-shop-media-background: var(--boopi-color-home-card-pink-surface);
}

.boopi-shop-section--blue .boopi-shop-card:nth-child(4n + 3),
.boopi-shop-section--sage .boopi-shop-card:nth-child(4n + 1) {
	--boopi-shop-media-background: var(--boopi-color-home-card-sage-surface);
}

.boopi-shop-section--blue .boopi-shop-card:nth-child(4n + 4),
.boopi-shop-section--sage .boopi-shop-card:nth-child(4n + 2) {
	--boopi-shop-media-background: var(--boopi-color-home-card-lilac-surface);
}

.boopi-shop-card__image--alternate {
	inset: 0;
	opacity: 0;
	position: absolute;
}

.boopi-shop-card--image-swap:hover .boopi-shop-card__image--primary,
.boopi-shop-card--image-swap:focus-within .boopi-shop-card__image--primary {
	opacity: 0;
}

.boopi-shop-card--image-swap:hover .boopi-shop-card__image--alternate,
.boopi-shop-card--image-swap:focus-within .boopi-shop-card__image--alternate {
	opacity: 1;
}

.boopi-shop-card:not(.boopi-shop-card--image-swap):hover .boopi-shop-card__image,
.boopi-shop-card:not(.boopi-shop-card--image-swap):focus-within .boopi-shop-card__image {
	transform: scale(1.04);
}

.boopi-shop-card--patches:not(.boopi-shop-card--image-swap):hover .boopi-shop-card__image,
.boopi-shop-card--patches:not(.boopi-shop-card--image-swap):focus-within .boopi-shop-card__image {
	transform: scale(0.95);
}

.boopi-shop-card__notch {
	block-size: 5.25rem;
	color: var(--boopi-color-surface);
	inline-size: 5.25rem;
	inset-block-end: 0;
	inset-inline-end: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.boopi-shop-card__fab {
	align-items: center;
	background: var(--boopi-shop-media-background, var(--boopi-shop-surface));
	border: 0;
	border-radius: var(--boopi-radius-pill);
	box-shadow: var(--boopi-shadow-md);
	color: var(--boopi-color-surface);
	display: inline-flex;
	inset-block-end: var(--boopi-border-width-strong);
	inset-inline-end: var(--boopi-border-width-strong);
	justify-content: center;
	min-block-size: var(--boopi-size-control-min);
	min-inline-size: var(--boopi-size-control-min);
	position: absolute;
	text-decoration: none;
	transition: background 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: 1;
}

.boopi-shop-card__fab:hover,
.boopi-shop-card__fab:focus-visible {
	background: var(--boopi-shop-card-action);
	color: var(--boopi-color-surface);
	transform: translateY(-0.15rem);
}

.boopi-shop-card__content {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-3);
	justify-content: space-between;
	min-block-size: 5rem;
	padding: var(--boopi-space-4);
}

.boopi-shop-card__title {
	font-size: var(--boopi-font-size-md);
	font-weight: var(--boopi-font-weight-bold);
	line-height: var(--boopi-line-height-tight);
	margin: 0;
}

.boopi-shop-card__title a {
	color: var(--boopi-color-text);
	text-decoration: none;
}

.boopi-shop-card__price {
	color: var(--boopi-shop-card-action);
	flex: 0 0 auto;
	font-weight: var(--boopi-font-weight-bold);
}

.boopi-shop-card__price :where(del, ins) {
	display: block;
}

.boopi-shop-section__empty {
	background: var(--boopi-shop-surface);
	border: var(--boopi-border-width) dashed var(--boopi-shop-accent);
	border-radius: var(--boopi-radius-lg);
	margin: 0;
	padding: var(--boopi-space-6);
	text-align: center;
}

/* Boopi product-category archives ---------------------------------------- */

.boopi-shop--category {
	--boopi-shop-category-surface: var(--boopi-shop-surface);
	--boopi-shop-category-accent: var(--boopi-shop-accent);
	display: grid;
	gap: var(--boopi-space-section);
}

.boopi-shop-category-hero {
	align-items: center;
	background: var(--boopi-shop-category-surface);
	border: var(--boopi-home-card-border-width) solid color-mix(in srgb, var(--boopi-shop-category-accent) 28%, transparent);
	border-radius: var(--boopi-home-card-radius);
	display: grid;
	gap: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-8));
	grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
	overflow: hidden;
	padding: var(--boopi-home-card-padding);
}

.boopi-shop-category-hero__copy {
	max-inline-size: 50rem;
}

.boopi-shop-category-hero__eyebrow {
	color: var(--boopi-shop-category-accent);
	font-weight: var(--boopi-font-weight-bold);
	letter-spacing: var(--boopi-letter-spacing-wide);
	margin-block: 0 var(--boopi-space-2);
	text-transform: uppercase;
}

.boopi-shop-category-hero h1,
.boopi-shop-category-guide h2 {
	color: var(--boopi-shop-category-accent);
	font-family: var(--boopi-font-family-playful);
	font-weight: var(--boopi-font-weight-semibold);
}

.boopi-shop-category-hero h1 {
	font-size: var(--boopi-font-size-3xl);
	margin-block: 0 var(--boopi-space-4);
}

.boopi-shop-category-hero__copy > p:not(.boopi-shop-category-hero__eyebrow) {
	margin-block: 0 var(--boopi-space-3);
}

.boopi-shop-category-hero__media {
	align-items: center;
	display: flex;
	justify-content: center;
	justify-self: center;
	min-inline-size: 0;
	width: 100%;
}

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

.boopi-shop-category-hero__icon {
	align-items: center;
	background: color-mix(in srgb, var(--boopi-color-surface) 76%, transparent);
	border-radius: var(--boopi-radius-pill);
	color: var(--boopi-shop-category-accent);
	display: flex;
	inline-size: clamp(8rem, 14vw, 12rem);
	justify-content: center;
	aspect-ratio: 1;
}

.boopi-shop-category-hero__icon .boopi-icon {
	block-size: 52%;
	inline-size: 52%;
}

.boopi-shop-category-products .woocommerce-result-count,
.boopi-shop-category-products .woocommerce-ordering {
	margin-block: 0 var(--boopi-space-5);
}

.boopi-shop-category-products .woocommerce-ordering {
	float: inline-end;
}

.boopi-shop-category-products .woocommerce-pagination {
	clear: both;
	margin-block-start: var(--boopi-space-7);
}

.boopi-shop--category .boopi-shop-grid {
	clear: both;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boopi-shop-category-guide {
	background: color-mix(in srgb, var(--boopi-shop-category-surface) 64%, var(--boopi-color-surface));
	border: var(--boopi-border-width) solid color-mix(in srgb, var(--boopi-shop-category-accent) 22%, transparent);
	border-radius: var(--boopi-home-card-radius);
	padding: var(--boopi-home-card-padding);
}

.boopi-shop-category-guide__header {
	max-inline-size: var(--boopi-text-measure);
}

.boopi-shop-category-guide h2 {
	font-size: var(--boopi-font-size-home-section-title);
	margin-block: 0 var(--boopi-space-3);
}

.boopi-shop-category-guide__header > p:last-child {
	margin-block: 0;
}

.boopi-shop-category-guide__grid {
	display: grid;
	gap: var(--boopi-space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: calc(var(--boopi-space-7) + var(--boopi-space-4));
}

.boopi-shop-category-guide__card {
	align-items: center;
	background: var(--boopi-color-surface);
	border: var(--boopi-home-card-border-width) solid color-mix(in srgb, var(--boopi-shop-category-accent) 22%, var(--boopi-color-surface));
	border-radius: var(--boopi-home-card-radius);
	box-shadow: var(--boopi-shadow-md);
	display: flex;
	flex-direction: column;
	padding: 3.25rem var(--boopi-space-5) var(--boopi-space-5);
	position: relative;
	text-align: center;
}

.boopi-shop-category-guide__icon {
	align-items: center;
	background: var(--boopi-color-surface);
	border: 0.35rem solid color-mix(in srgb, var(--boopi-shop-category-accent) 22%, var(--boopi-color-surface));
	border-radius: 50%;
	box-shadow: var(--boopi-shadow-sm);
	color: var(--boopi-shop-category-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-shop-category-guide__icon .boopi-icon {
	block-size: 1.8rem;
	inline-size: 1.8rem;
}

.boopi-shop-category-guide__card h3 {
	color: var(--boopi-shop-category-accent);
	font-family: var(--boopi-font-family-playful);
	font-size: var(--boopi-font-size-xl);
	font-weight: var(--boopi-font-weight-semibold);
	margin-block: 0 var(--boopi-space-3);
}

.boopi-shop-category-guide__card p {
	margin: 0;
}

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

	.boopi-shop-category-guide__grid {
		row-gap: 3.5rem;
		grid-template-columns: 1fr;
	}

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

@media (max-width: 48rem) {
	.site-main.boopi-shop {
		padding-block-start: var(--boopi-space-3);
	}

	.site-main.boopi-shop:not(.boopi-shop--category) {
		padding-block-start: calc(var(--boopi-space-3) + var(--boopi-space-section));
	}

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

	.boopi-shop-hero__copy {
		display: contents;
	}

	.boopi-shop-hero__eyebrow {
		order: 1;
	}

	.boopi-shop-hero h1 {
		order: 2;
	}

	.boopi-shop-hero__copy > p:not(.boopi-shop-hero__eyebrow, .boopi-shop-hero__configurator-copy) {
		order: 3;
	}

	.boopi-shop-hero__system {
		grid-column: 1;
		grid-row: auto;
		order: 4;
	}

	.boopi-shop-hero__copy > p.boopi-shop-hero__configurator-copy {
		margin-block: var(--boopi-space-3);
		order: 5;
	}

	.boopi-shop-hero__action {
		align-self: auto;
		justify-self: stretch;
		order: 6;
		width: 100%;
	}

	.boopi-shop-category-hero {
		grid-template-columns: 1fr;
	}

	.boopi-shop-category-hero__media {
		max-inline-size: none;
		justify-self: start;
	}

	.boopi-shop-category-hero__icon {
		inline-size: 7rem;
	}

	.boopi-shop-hero__system {
		justify-content: flex-start;
	}

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

@media (max-width: 30rem) {
	.boopi-shop-section__header {
		align-items: center;
		display: grid;
		gap: var(--boopi-space-2) var(--boopi-space-3);
		grid-template-columns: minmax(0, 1fr) auto;
		margin-block-end: var(--boopi-space-3);
	}

	.boopi-shop-section__header > div {
		display: contents;
	}

	.boopi-shop-section__header h2 {
		grid-column: 1;
		grid-row: 1;
	}

	.boopi-shop-section__header p {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.boopi-shop-section__link {
		align-self: center;
		grid-column: 2;
		grid-row: 1;
		min-block-size: auto;
		text-align: end;
	}

	.boopi-shop-grid {
		gap: var(--boopi-space-3);
	}

	.boopi-shop-card__content {
		align-items: start;
		flex-direction: column;
		gap: var(--boopi-space-1);
	}

	.boopi-shop-card__fab {
		inset-block-end: var(--boopi-border-width-strong);
		inset-inline-end: var(--boopi-border-width-strong);
	}
}

@media (max-width: 22rem) {
	.boopi-shop-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boopi-shop-card,
	.boopi-shop-card__image,
	.boopi-shop-card__fab {
		transition: none;
	}
}