/* Homepage popular products section desktop grid: enforce 3 items per row (3 columns, centered leftovers). */
@media (min-width: 48rem) {
	:is(body.home, .home) #page :is(.kiddee-bind-e65e09a, .elementor-widget-woocommerce-products) :is(ul.products, ul.products.elementor-grid, .woocommerce ul.products) {
		display: flex ;
		flex-wrap: wrap ;
		justify-content: center ;
		gap: 32px 20px ;
		width: calc(100% - clamp(20px, 4vw, 32px)) ;
		max-width: 1120px ;
		margin: 26px auto 0 ;
		padding: 0 ;
		list-style: none ;
	}

	:is(body.home, .home) #page :is(.kiddee-bind-e65e09a, .elementor-widget-woocommerce-products) :is(ul.products, .woocommerce ul.products) > li.product {
		display: flex ;
		flex-direction: column ;
		flex: 0 0 calc((100% - 40px) / 3) ;
		width: calc((100% - 40px) / 3) ;
		max-width: calc((100% - 40px) / 3) ;
		height: auto ;
		min-width: 0 ;
		margin: 0 ;
		padding: 0 ;
		float: none ;
	}
}

/* Keep product-archive reading text neutral black and give category pills a
 * clear monochrome selected state. */
:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce :is(
	.woocommerce-breadcrumb,
	.woocommerce-breadcrumb a,
	.woocommerce-products-header__title.page-title,
	.woocommerce-result-count,
	.kiddee-product-category-filter__item,
	.kiddee-ordering-select__trigger,
	.kiddee-ordering-select__option,
	.orderby,
	ul.products li.product :is(.woocommerce-loop-product__title, .price, .price .amount)
) {
	color: var(--kv2-airbnb-ink) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active {
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item:focus-visible{
	border-color: var(--kv2-airbnb-ink) ;
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-ordering-select__option.is-selected {
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
}

/* Keep the custom ordering control consistent on Elementor category archives. */
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__trigger {
	border-color: var(--kv2-airbnb-ink) ;
	color: var(--kv2-airbnb-ink) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__trigger:hover,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__trigger:focus-visible,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__trigger[aria-expanded="true"]{
	border-color: var(--kv2-airbnb-ink) ;
	color: var(--kv2-airbnb-ink) ;
	box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.12), 0 10px 24px rgba(34, 34, 34, 0.10) ;
}

:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__option {
	color: var(--kv2-airbnb-ink) ;
}

:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__option.is-selected {
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__option:hover,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .kiddee-ordering-select__option:focus-visible{
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active {
	border-color: rgba(34, 34, 34, 0.28) ;
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active:focus-visible{
	border-color: rgba(34, 34, 34, 0.28) ;
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary) ;
}

/* Keep the active category label visibly white even when a browser applies
 * text-fill rules from a generated WooCommerce/Elementor stylesheet. */
:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active,
:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page .site-main--commerce .kiddee-product-category-filter__item.is-active:focus-visible{
	color: var(--kv2-airbnb-canvas) ;
	-webkit-text-fill-color: var(--kv2-airbnb-canvas) ;
}

/* Copy the product-page pagination treatment to every product archive. */
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex ;
	min-width: 44px ;
	min-height: 44px ;
	align-items: center ;
	justify-content: center ;
	border: 1px solid var(--kv2-airbnb-ink) ;
	border-radius: var(--kv2-radius-sm) ;
	padding: var(--kv2-space-2) ;
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-color-surface) ;
	line-height: 1 ;
	text-decoration: none ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page nav.woocommerce-pagination ul li a.page-numbers:hover,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page nav.woocommerce-pagination ul li a.page-numbers:focus,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page nav.woocommerce-pagination ul li a.page-numbers:focus-visible{
	border-color: var(--kv2-airbnb-ink) ;
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
}

:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page nav.woocommerce-pagination ul li .page-numbers.current {
	border-color: var(--kv2-airbnb-primary) ;
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary) ;
	font-weight: var(--font-weight-bold) ;
}

/* Product-category archive hero: use a neutral black fade on every cover
 * size so the artwork remains visible while the floating controls stay easy
 * to read on phones, tablets and desktop. */
:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor > .e-con:first-child,
	.elementor[data-elementor-type="archive"] > .e-con:first-child,
	.elementor[data-elementor-type="product-archive"] > .e-con:first-child
) {
	position: relative ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor > .e-con:first-child,
	.elementor[data-elementor-type="archive"] > .e-con:first-child,
	.elementor[data-elementor-type="product-archive"] > .e-con:first-child
)::after {
	content: "" ;
	position: absolute ;
	inset: 0 ;
	z-index: 0 ;
	display: block ;
	pointer-events: none ;
	background: linear-gradient(90deg, rgba(34, 34, 34, 0.48) 0%, rgba(34, 34, 34, 0.10) 43%, rgba(34, 34, 34, 0.18) 60%, rgba(34, 34, 34, 0.52) 100%),
		linear-gradient(180deg, rgba(34, 34, 34, 0.04) 0%, rgba(34, 34, 34, 0.10) 68%, rgba(34, 34, 34, 0.32) 100%) ;
	-webkit-mask-image: none ;
	mask-image: none ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor > .e-con:first-child > .elementor-shape-bottom,
	.elementor[data-elementor-type="archive"] > .e-con:first-child > .elementor-shape-bottom,
	.elementor[data-elementor-type="product-archive"] > .e-con:first-child > .elementor-shape-bottom
) {
	position: absolute ;
	right: 0 ;
	bottom: 0 ;
	left: 0 ;
	width: 100% ;
	z-index: 2 ;
	pointer-events: none ;
}

/* Keep the controls above the neighbouring archive section. The archive
 * hero is intentionally not isolated so these positive z-index layers can
 * remain clickable when the controls sit just below the cover. */
:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-archive-hero-actions {
	z-index: 20 ;
	pointer-events: auto ;
}

:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) .kiddee-all-products-return,
:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item {
	pointer-events: auto ;
}

/* Image 2: the return button is black with white lettering. */
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) .kiddee-all-products-return {
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-ink) ;
	border-color: var(--kv2-airbnb-ink) ;
	box-shadow: 0 12px 28px rgba(34, 34, 34, 0.28) ;
}

:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) .kiddee-all-products-return__icon {
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-canvas) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) .kiddee-all-products-return:hover,
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) .kiddee-all-products-return:focus-visible{
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-ink) ;
	border-color: var(--kv2-airbnb-ink) ;
	box-shadow: 0 16px 34px rgba(34, 34, 34, 0.34) ;
}

/* Image 3: the catalogue download CTA is yellow with high-contrast black
 * text; its white arrow badge remains readable at every breakpoint. */
:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor,
	.elementor[data-elementor-type="archive"],
	.elementor[data-elementor-type="product-archive"]
) .elementor-widget-button .elementor-button {
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary) ;
	border-color: var(--kv2-airbnb-primary) ;
	box-shadow: 0 13px 26px rgba(224, 11, 65, 0.22) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor,
	.elementor[data-elementor-type="archive"],
	.elementor[data-elementor-type="product-archive"]
) .elementor-widget-button .elementor-button .elementor-button-text::after {
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-canvas) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor,
	.elementor[data-elementor-type="archive"],
	.elementor[data-elementor-type="product-archive"]
) .elementor-widget-button .elementor-button:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor,
	.elementor[data-elementor-type="archive"],
	.elementor[data-elementor-type="product-archive"]
) .elementor-widget-button .elementor-button:focus-visible{
	color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary-active) ;
	border-color: var(--kv2-airbnb-primary-active) ;
	box-shadow: 0 17px 34px rgba(224, 11, 65, 0.28) ;
}

/* Image 4: keep the secondary category heading and pills monochrome. */
:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-panel__title {
	color: var(--kv2-airbnb-ink) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item {
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-canvas) ;
	border-color: rgba(34, 34, 34, 0.28) ;
}

:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item:focus-visible{
	color: var(--kv2-airbnb-ink) ;
	background: var(--kv2-airbnb-surface-soft) ;
	border-color: var(--kv2-airbnb-ink) ;
}

:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item.is-active,
:where(html:not([data-kiddee-input="touch"])) :is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item.is-active:hover,
:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-panel--hero .kiddee-product-category-filter--hero .kiddee-product-category-filter__item.is-active:focus-visible{
	color: var(--kv2-airbnb-canvas) ;
	-webkit-text-fill-color: var(--kv2-airbnb-canvas) ;
	background: var(--kv2-airbnb-primary) ;
	border-color: rgba(34, 34, 34, 0.28) ;
}

/* Standardize the product-category cover itself. Elementor templates can
 * store different height settings, so use one cover ratio for every archive
 * hero while keeping the mobile height compact enough for the controls below. */
:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
	.elementor-location-archive.elementor > .e-con:first-child,
	.elementor[data-elementor-type="archive"] > .e-con:first-child,
	.elementor[data-elementor-type="product-archive"] > .e-con:first-child
) {
	width: 100% ;
	max-width: none ;
	min-width: 0 ;
	min-height: 0 ;
	max-height: none ;
	height: auto ;
	aspect-ratio: 16 / 5 ;
	margin-top: 0 ;
	margin-right: 0 ;
	margin-left: 0 ;
	padding: 0 ;
	background-position: var(--kiddee-product-archive-hero-position, center) ;
	background-repeat: no-repeat ;
	background-size: cover ;
	overflow: visible ;
}

/* Keep the same usable cover height across phones while leaving the existing
 * reserved space for the return link and category shortcuts. */
@media (max-width: 47.99rem) {
	:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
		.elementor-location-archive.elementor > .e-con:first-child,
		.elementor[data-elementor-type="archive"] > .e-con:first-child,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child
	) {
		height: clamp(132px, 32vw, 168px) ;
		aspect-ratio: auto ;
		/* Reserve room for the wrapped category shortcuts below the cover. */
		margin-bottom: clamp(360px, calc(880px - 125vw), 500px) ;
	}

	:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-filter--hero {
		display: flex ;
		flex-wrap: wrap ;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100% ;
		max-width: 100%;
		overflow: visible ;
		row-gap: 8px;
	}

	:is(body.tax-product_cat, body.post-type-archive-product) #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item {
		flex: 0 0 auto ;
		white-space: nowrap ;
	}

	/* Use black ink for the catalogue title and description on phones. */
	:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) .elementor-widget-heading .elementor-heading-title {
		color: var(--kv2-airbnb-ink) ;
		-webkit-text-fill-color: var(--kv2-airbnb-ink) ;
		text-shadow: none ;
	}

	/* The same divider becomes a stray hairline on narrow screens. */
	:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
		.elementor-location-archive.elementor > .e-con:first-child > .elementor-shape-bottom,
		.elementor[data-elementor-type="archive"] > .e-con:first-child > .elementor-shape-bottom,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child > .elementor-shape-bottom
	) {
		display: none ;
	}
}

/* The brush wave collapses into stray hairline strokes at iPad widths. Keep
 * the cover-to-content seam clean on tablet without changing desktop/mobile. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
	/* Keep the tablet menu control consistent with the black catalogue actions. */
	.menu-toggle,
	.menu-toggle:hover,
	.menu-toggle:active,
	.menu-toggle:focus-visible {
		color: var(--kv2-airbnb-canvas) ;
		background: var(--kv2-airbnb-ink) ;
		border-color: var(--kv2-airbnb-ink) ;
	}

	:is(body.tax-product_cat, body.post-type-archive-product) #page :is(
		.elementor-location-archive.elementor > .e-con:first-child > .elementor-shape-bottom,
		.elementor[data-elementor-type="archive"] > .e-con:first-child > .elementor-shape-bottom,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child > .elementor-shape-bottom
	) {
		display: none ;
	}
}

@media (max-width: 74.99rem) {
	/* Keep archive-card prices black on phones and tablets. */
	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page ul.products > li.product .price,
	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page ul.products > li.product .price :is(.amount, bdi, ins, .woocommerce-Price-currencySymbol) {
		color: var(--kv2-airbnb-ink) ;
		-webkit-text-fill-color: var(--kv2-airbnb-ink) ;
	}
}

/* Desktop archive templates keep the product widget in slightly different
 * vertical positions after their catalogue overlay. Match the soft-play
 * archive's spacing without changing the saved Elementor documents. */
@media (min-width: 75rem) {
	:is(body.tax-product_cat.term-net-climbing-swing, body.tax-product_cat.term-new-item, body.tax-product_cat.term-water-park) #page .elementor-widget-woocommerce-products {
		margin-top: -54px ;
	}

	:is(body.tax-product_cat.term-fitness-equipment, body.tax-product_cat.term-kid-furniture) #page .elementor-widget-woocommerce-products {
		margin-top: -114px ;
	}

	:is(body.tax-product_cat.term-merry-go-round, body.tax-product_cat.term-spring-rider) #page .elementor-widget-woocommerce-products {
		margin-top: -135px ;
	}

	body.tax-product_cat.term-ball-pool #page .elementor-widget-woocommerce-products {
		margin-top: -52px ;
	}

	body.tax-product_cat.term-outdoor-playground #page .elementor-widget-woocommerce-products {
		margin-top: -26px ;
	}

	body.tax-product_cat.term-plastic-play #page .elementor-widget-woocommerce-products {
		margin-top: -61px ;
	}

	body.tax-product_cat.term-sea-saw #page .elementor-widget-woocommerce-products {
		margin-top: -156px ;
	}

	body.tax-product_cat.term-wooden-playground #page .elementor-widget-woocommerce-products {
		margin-top: -88px ;
	}
}

/* New-item has no catalogue panel between the wrapped category controls and
 * the products. Reserve only the controls' actual mobile height so the
 * product heading starts at the same visual distance on every phone width. */
@media (max-width: 18.9374rem) {
	body.kiddee-v2-new-item #page :is(
		.elementor-location-archive.elementor > .e-con:first-child,
		.elementor[data-elementor-type="archive"] > .e-con:first-child,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child
	) {
		margin-bottom: 606.5px ;
	}
}

@media (min-width: 18.9375rem) and (max-width: 20.124rem) {
	body.kiddee-v2-new-item #page :is(
		.elementor-location-archive.elementor > .e-con:first-child,
		.elementor[data-elementor-type="archive"] > .e-con:first-child,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child
	) {
		margin-bottom: 558.5px ;
	}
}
