/* Category controls shared by the disjoint mobile and tablet ranges. */
:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .elementor-widget-woocommerce-products {
	box-sizing: border-box;
	width: min(var(--kv2-container), calc(100vw - var(--kv2-gutter) - var(--kv2-gutter)));
	max-width: none;
	margin-inline: 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* Product-grid spacing is owned by the shared WooCommerce card rhythm tokens.
 * Keep this late responsive layer aligned with that owner instead of inventing a category-only gap. */
@media (min-width: 64rem) {
	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .elementor-products-grid ul.products.elementor-grid {
		column-gap: var(--kv2-product-grid-column-gap);
		row-gap: var(--kv2-product-grid-row-gap);
	}
}

@media (max-width: 47.99rem), (min-width: 48rem) and (max-width: 74.99rem) {
	body.tax-product_cat #page .kiddee-product-category-panel--hero,
	body.post-type-archive-product #page .kiddee-product-category-panel--hero {
		gap: 8px;
		width: 100%;
		padding: 0;
	}

	body.tax-product_cat #page .kiddee-product-category-filter--hero::-webkit-scrollbar,
	body.post-type-archive-product #page .kiddee-product-category-filter--hero::-webkit-scrollbar {
		display: none;
	}
}

/* Mobile product-category archives: keep every category template in one rhythm. */
@media (max-width: 47.99rem) {
	body.tax-product_cat #page,
	body.post-type-archive-product #page {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	/* Catalogue heading owns its Thai-safe mobile line box. */
	:is(body.tax-product_cat, body.post-type-archive-product) #page .woocommerce-products-header__title.page-title {
		line-height: var(--kv2-type-title-md-line);
		padding-top: 4px;
		overflow: visible;
	}

	body.tax-product_cat.term-products #page .woocommerce-products-header__title.page-title {
		line-height: var(--kv2-type-display-sm-line);
	}

	body.tax-product_cat #page :is(
		.elementor-location-archive.elementor > .e-con:first-child,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child
	),
	body.post-type-archive-product #page :is(
		.elementor-location-archive.elementor > .e-con:first-child,
		.elementor[data-elementor-type="product-archive"] > .e-con:first-child
	) {
		width: 100% ;
		max-width: 100%;
		min-height: 0;
		height: clamp(132px, 32vw, 168px);
		aspect-ratio: auto;
		margin: 0 0 126px ;
		overflow: visible;
	}

	body.tax-product_cat #page .kiddee-all-products-return,
	body.post-type-archive-product #page .kiddee-all-products-return {
		bottom: 20px;
		left: 16px;
		min-height: 46px;
		padding: 9px 16px 9px 9px;
		font-size: var(--kv2-type-body-sm-size);
		box-shadow: 0 10px 22px color-mix(in srgb, var(--kv2-color-primary-dark) 24%, transparent);
	}

	body.tax-product_cat #page .kiddee-archive-hero-actions,
	body.post-type-archive-product #page .kiddee-archive-hero-actions {
		top: calc(100% + 14px);
		left: 16px;
		width: calc(100% - 32px);
		gap: 8px;
		padding: 0;
	}

	body.tax-product_cat #page .kiddee-product-category-panel__title,
	body.post-type-archive-product #page .kiddee-product-category-panel__title {
		margin: 0;
		color: var(--kv2-airbnb-ink);
		font-size: var(--kv2-type-title-md-size);
		font-weight: var(--kv2-type-title-md-weight);
		line-height: var(--kv2-type-title-md-line);
	}

	body.tax-product_cat #page .kiddee-product-category-filter--hero,
	body.post-type-archive-product #page .kiddee-product-category-filter--hero {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		margin: 0;
		padding: 2px 0 8px;
		overflow: visible;
	}

	body.tax-product_cat #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item,
	body.post-type-archive-product #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item {
		flex: 0 0 auto;
		max-width: 100%;
		min-height: 40px;
		border: 1px solid rgba(34, 34, 34, 0.28);
		border-radius: 999px;
		padding: 9px 15px;
		color: var(--kv2-airbnb-ink);
		background: var(--kv2-color-surface);
		box-shadow: 0 5px 14px rgba(34, 34, 34, 0.07);
		font-size: var(--kv2-type-body-sm-size);
		font-weight: var(--kv2-type-body-sm-weight);
		line-height: var(--kv2-type-body-sm-line);
		white-space: normal;
		text-align: center;
	}

	body.tax-product_cat #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item.is-active,
	body.post-type-archive-product #page .kiddee-product-category-filter--hero .kiddee-product-category-filter__item.is-active {
		border-color: rgba(34, 34, 34, 0.28);
		color: var(--kv2-color-surface);
		background: var(--kv2-color-primary);
	}

	/* Catalogue intro: no overlap and a readable single-column flow. */
	body.tax-product_cat #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	),
	body.post-type-archive-product #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) {
		width: calc(100% - 28px) ;
		max-width: 520px;
		min-height: 0;
		margin: 18px auto 58px ;
		padding: 34px 18px 30px ;
		border-radius: 28px;
		background: radial-gradient(circle at 50% 45%, var(--kv2-airbnb-surface-soft) 0%, var(--kv2-airbnb-canvas) 38%, rgba(255, 255, 255, 0) 70%) ;
		box-shadow: none;
		text-align: center;
	}

	body.tax-product_cat #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .e-con-inner,
	body.post-type-archive-product #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .e-con-inner {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	body.tax-product_cat #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-heading .elementor-heading-title,
	body.post-type-archive-product #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-heading .elementor-heading-title {
		text-align: center;
	}

	body.tax-product_cat #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-image,
	body.post-type-archive-product #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-image {
		width: 100%;
		margin-top: 22px;
		padding: 7px;
		border-radius: 18px;
		transform: none;
	}

	body.tax-product_cat #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-image img,
	body.post-type-archive-product #page :is(
		:where(.kiddee-catalogue-intro),
		:where(.kiddee-catalogue-intro)
	) > .elementor-widget-image img {
		width: 100%;
		max-height: none;
		border-radius: 12px;
		object-fit: contain;
	}

	/* Product cards: stable two-column layout for every category page. */
	/* Elementor category templates sit inside a padded flex container. Match
	 * the standard archive's content width before laying out the two columns. */
	body.tax-product_cat #page .elementor-widget-woocommerce-products,
	body.post-type-archive-product #page .elementor-widget-woocommerce-products {
		box-sizing: border-box;
		width: calc(100% - (var(--kv2-gutter) - 10px) - (var(--kv2-gutter) - 10px));
		max-width: 1120px;
		margin-inline: auto;
		position: static;
		left: auto;
		transform: none;
	}

	body.tax-product_cat #page .elementor-widget-woocommerce-products .elementor-widget-container,
	body.post-type-archive-product #page .elementor-widget-woocommerce-products .elementor-widget-container {
		width: 100%;
		max-width: none;
	}

	/* A few saved category templates add a second 10px-padded container
	 * around the widget. Cancel only that inner padding so those grids land
	 * on the same site-container edges as the standard product archive. */
	body.tax-product_cat #page .e-con-inner > .e-con-full > .e-con-full > .elementor-widget-woocommerce-products,
	body.post-type-archive-product #page .e-con-inner > .e-con-full > .e-con-full > .elementor-widget-woocommerce-products {
		width: calc(100% + (20px - var(--kv2-gutter)) + (20px - var(--kv2-gutter)));
		margin-inline: calc(var(--kv2-gutter) - 20px);
	}

	/* Other saved templates have one padded full container instead of two.
	 * Keep those known category layouts on the same archive edges as well. */
	:is(
		body.tax-product_cat.term-sea-saw,
		body.tax-product_cat.term-merry-go-round,
		body.tax-product_cat.term-fitness-equipment,
		body.tax-product_cat.term-plastic-play,
		body.tax-product_cat.term-kid-furniture
	) #page .e-con-inner > .e-con-full > .elementor-widget-woocommerce-products {
		width: calc(100% + (20px - var(--kv2-gutter)) + (20px - var(--kv2-gutter)));
		margin-inline: calc(var(--kv2-gutter) - 20px);
	}

	body.tax-product_cat #page ul.products.elementor-grid,
	body.post-type-archive-product #page ul.products.elementor-grid {
		display: grid ;
		grid-template-columns: repeat(2, minmax(0, 1fr)) ;
		column-gap: var(--kv2-product-grid-column-gap);
		row-gap: var(--kv2-product-grid-row-gap);
		width: 100%;
		max-width: 1120px;
		margin: 0 auto ;
		margin-bottom: 0 ;
		padding: 0;
	}

	body.tax-product_cat #page ul.products.elementor-grid > li.product,
	body.post-type-archive-product #page ul.products.elementor-grid > li.product {
		display: block;
		width: 100% ;
		height: auto;
		min-height: 0;
		min-width: 0;
		margin: 0 ;
		padding: 0;
	}

	body.tax-product_cat #page ul.products.elementor-grid > li.product a.woocommerce-LoopProduct-link,
	body.post-type-archive-product #page ul.products.elementor-grid > li.product a.woocommerce-LoopProduct-link {
		display: block;
		height: auto;
		color: var(--kv2-color-text);
		text-decoration: none;
	}

	body.tax-product_cat #page ul.products.elementor-grid > li.product img,
	body.post-type-archive-product #page ul.products.elementor-grid > li.product img {
		box-sizing: border-box;
		width: 100% ;
		height: auto;
		aspect-ratio: 1;
		margin: 0 0 var(--kv2-product-card-media-gap) ;
		border: 0;
		border-radius: 3px;
		padding: 0;
		background: transparent;
		box-shadow: 0 7px 18px rgba(34, 34, 34, 0.12);
		object-fit: contain;
	}

	body.tax-product_cat #page ul.products.elementor-grid > li.product .woocommerce-loop-product__title,
	body.post-type-archive-product #page ul.products.elementor-grid > li.product .woocommerce-loop-product__title {
		min-height: 0;
		margin: 0 0 6px ;
		padding: 0;
		color: var(--kv2-color-text);
		font-family: var(--font-body);
		font-size: var(--kv2-type-title-md-size);
		font-weight: var(--kv2-type-title-md-weight);
		line-height: var(--kv2-type-title-md-line);
		overflow-wrap: anywhere;
	}

	body.tax-product_cat #page ul.products.elementor-grid > li.product .price,
	body.post-type-archive-product #page ul.products.elementor-grid > li.product .price {
		margin: 0 ;
		padding: 0;
		color: var(--kv2-color-primary-dark);
		font-family: var(--font-body);
		font-size: var(--kv2-type-body-md-size);
		font-weight: var(--kv2-type-body-md-weight);
		line-height: var(--kv2-type-body-md-line);
	}

	/* The standard WooCommerce archive uses ul.products.columns-3 rather
	 * than Elementor's elementor-grid class. Keep its mobile cards in the
	 * same natural flow as the actual markup. */
	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products > li.product {
		display: block ;
		height: auto ;
		min-height: 0 ;
		padding: 0 ;
	}

	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products {
		align-items: start ;
		grid-auto-rows: max-content ;
	}

	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products > li.product .woocommerce-loop-product__link {
		display: block ;
		height: auto ;
	}

	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products > li.product a img {
		width: 100% ;
		height: auto ;
		aspect-ratio: auto ;
		margin-bottom: var(--kv2-product-card-media-gap) ;
		object-fit: contain ;
	}

	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products > li.product .woocommerce-loop-product__title {
		min-height: 0 ;
		margin: 0 0 6px ;
		padding: 0 ;
	}

	:is(body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product) #page .site-main--commerce ul.products > li.product .price {
		margin: 0 ;
		padding: 0 ;
	}
}

/* Catalogue mobile order: remove the decorative badge that collides with the title. */
@media (max-width: 47.99rem) {
	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro),
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro) {
		display: grid ;
		grid-template-columns: minmax(0, 1fr) ;
		grid-template-rows: auto auto auto auto ;
		align-items: start;
		margin-bottom: 8px ;
	}

	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro)::before,
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro)::before {
		display: none ;
		content: none ;
	}

	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-heading:first-child,
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-heading:first-child {
		grid-column: 1 ;
		grid-row: 1 ;
		width: 100%;
		margin: 0 ;
		padding: 0;
	}

	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-heading:nth-child(2),
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-heading:nth-child(2) {
		grid-column: 1 ;
		grid-row: 2 ;
		width: 100%;
		margin: 12px 0 0 ;
		padding: 0;
	}

	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-image,
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-image {
		grid-column: 1 ;
		grid-row: 3 ;
		width: 100%;
		margin-top: 22px ;
	}

	body.tax-product_cat #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-button,
	body.post-type-archive-product #page .elementor :where(.kiddee-catalogue-intro) > .elementor-widget-button {
		grid-column: 1 ;
		grid-row: 4 ;
		justify-self: center;
		margin-top: 22px ;
	}
}