@media (max-width: 47.99rem) {
	/* Keep the mobile header from shrinking the logo and menu into each other. */
	.site-header {
		width: 100%;
		min-height: var(--kiddee-touch-header-height, 76px);
		--kiddee-mobile-header-height: var(--kiddee-touch-header-height, 76px);
		border-bottom-color: color-mix(in srgb, var(--kv2-color-primary-dark) 12%, var(--kv2-color-border));
		box-shadow: 0 5px 18px rgba(34, 34, 34, 0.07);
	}

	.site-header__inner {
		width: 100vw ;
		max-width: 100vw ;
		box-sizing: border-box;
		margin-inline: 0 ;
		padding-inline: 16px;
		min-height: var(--kiddee-touch-header-height, 76px);
		gap: 14px;
	}

	/* 100vw includes the vertical scrollbar and creates a horizontal scroll
	 * range on the quote page. Size this page's header to the content box. */
	body.yith-request-a-quote-page .site-header__inner {
		width: 100%;
		max-width: 100%;
	}

	.site-branding,
	.site-branding .custom-logo-link {
		display: inline-flex;
		flex: 1 1 auto;
		align-items: center;
		min-width: 0;
		max-width: 100%;
	}

	.site-branding {
		max-width: calc(100% - 108px);
		overflow: hidden;
	}

	.site-branding .custom-logo {
		width: clamp(140px, 40vw, 180px) ;
		max-width: 100%;
		max-height: none;
		height: auto;
	}

	.menu-toggle {
		flex: 0 0 auto;
		display: inline-flex ;
		width: 52px;
		max-width: 100%;
		min-width: 52px;
		min-height: 48px;
		border: 1px solid color-mix(in srgb, var(--kv2-color-primary) 75%, var(--kv2-color-primary-dark));
		border-radius: 13px;
		padding: 10px 13px;
		gap: 0;
		justify-content: center;
		color: var(--kv2-color-surface);
		background: linear-gradient(135deg, var(--kv2-color-primary) 0%, var(--kv2-color-primary-dark) 100%);
		box-shadow: 0 4px 10px color-mix(in srgb, var(--kv2-color-primary-dark) 12%, transparent);
		font-size: var(--kv2-type-body-md-size);
		font-weight: var(--kv2-type-body-md-weight);
		line-height: var(--kv2-type-body-md-line);
		white-space: nowrap;
	}

	/* Keep the fallback header menu full-width on brochure pages too. The
	 * product navigation stylesheet is intentionally not loaded on those pages. */
	.primary-navigation {
		position: fixed;
		top: calc(var(--kiddee-mobile-header-height, 76px) + var(--wp-admin--admin-bar--height, 0px));
		right: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		max-height: calc(100vh - var(--kiddee-mobile-header-height, 76px) - var(--wp-admin--admin-bar--height, 0px) - 20px);
		max-height: calc(100dvh - var(--kiddee-mobile-header-height, 76px) - var(--wp-admin--admin-bar--height, 0px) - 20px);
		margin: 0;
		border: 0;
		border-radius: 0;
		padding: 16px 20px 20px;
		box-shadow: 0 20px 45px rgba(34, 34, 34, 0.16);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.primary-navigation-open {
		overflow: hidden ;
	}

	/* Use the same roomy, icon-led list on brochure pages as on the product
	 * navigation. The SVGs are added by the shared nav-menu filter. */
	.primary-menu {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 0;
	}

	.primary-menu a {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 52px;
		padding: 14px 16px;
		border-radius: 12px;
		color: var(--kv2-color-text);
		font-size: var(--kv2-type-nav-size);
		font-weight: var(--kv2-type-nav-weight);
		line-height: var(--kv2-type-nav-line);
		text-decoration: none;
		white-space: normal;
		transition: background-color var(--kv2-transition), color var(--kv2-transition);
	}

	.primary-menu__icon {
		display: inline-grid;
		place-items: center;
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		color: currentColor;
	}

	.primary-menu__icon svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	:where(html:not([data-kiddee-input="touch"])) /* Preserve the existing menu palette; only stop interaction states from
	 * turning the affected SVGs into solid black shapes. */
	body .primary-navigation .primary-menu > li > a:is(:hover, :focus-visible, :active) .primary-menu__icon svg,
body .primary-navigation .primary-menu > li:is(
		.current-menu-item,
		.current_page_item,
		.current-menu-ancestor,
		.current-menu-parent,
		.current_page_parent,
		.current_page_ancestor
	) > a .primary-menu__icon svg{
		color: var(--kv2-airbnb-ink) ;
		fill: none ;
		stroke: currentColor ;
	}

	.primary-menu__text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
		background: transparent;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.header-social {
		display: none ;
	}

	/* Elementor assigns fixed section heights and negative mobile margins in
	 * generated CSS. Let builder sections follow their content on phones. */
	body.kiddee-v2-builder-layout .site-main--builder .elementor .e-con.e-flex,
	body.kiddee-v2-builder-layout .site-main--builder .elementor .e-con.e-flex > .e-con-inner {
		min-height: 0 ;
	}

	/* About: restore a single, predictable vertical flow for every intro and
	 * follow-up section. Only the phone cascade is changed. */
	body.kiddee-page-about #page .kiddee-bind-6d054a8f {
		--min-height: 0px ;
		--gap: 0px ;
		--row-gap: 0px ;
		--column-gap: 0px ;
		--margin-top: 0px ;
		--margin-right: 0px ;
		--margin-bottom: 0px ;
		--margin-left: 0px ;
		--padding-top: clamp(40px, 8vw, 56px) ;
		--padding-right: var(--kv2-gutter) ;
		--padding-bottom: clamp(48px, 8vw, 64px) ;
		--padding-left: var(--kv2-gutter) ;
		min-height: 0 ;
		margin: 0 ;
		padding: clamp(40px, 8vw, 56px) var(--kv2-gutter) clamp(48px, 8vw, 64px) ;
	}

	body.kiddee-page-about #page .kiddee-bind-3e59a6d {
		--width: 100% ;
		--gap: 0px ;
		--row-gap: 0px ;
		--column-gap: 0px ;
		--margin-top: 0px ;
		--margin-right: 0px ;
		--margin-bottom: 0px ;
		--margin-left: 0px ;
		--padding-top: 0px ;
		--padding-right: 0px ;
		--padding-bottom: 0px ;
		--padding-left: 0px ;
		width: 100% ;
		max-width: 1200px ;
		min-height: 0 ;
		margin: 0 auto ;
		padding: 0 ;
		display: flex ;
		flex-direction: column ;
		flex-wrap: nowrap ;
		align-items: center ;
	}

	body.kiddee-page-about #page .kiddee-bind-28c5c21,
	body.kiddee-page-about #page .kiddee-bind-547dd44 {
		width: fit-content ;
		max-width: 100% ;
		min-height: 0 ;
		height: auto ;
		align-self: center ;
	}

	body.kiddee-page-about #page .kiddee-bind-0bce020,
	body.kiddee-page-about #page .kiddee-bind-da05d3e,
	body.kiddee-page-about #page .kiddee-bind-2ca07da,
	body.kiddee-page-about #page .kiddee-bind-9d19632 {
		width: 100% ;
		max-width: 920px ;
		min-height: 0 ;
		height: auto ;
		margin: 0 auto ;
		padding: 0 ;
		align-self: center ;
	}

	body.kiddee-page-about #page .kiddee-bind-da05d3e,
	body.kiddee-page-about #page .kiddee-bind-9d19632 {
		max-width: 900px ;
		margin-top: 16px ;
	}

	body.kiddee-page-about #page .kiddee-bind-0bce020 .elementor-heading-title,
	body.kiddee-page-about #page .kiddee-bind-2ca07da .elementor-heading-title {
		margin: 0 ;
		line-height: var(--kv2-type-title-md-line);
	}

	body.kiddee-page-about #page .kiddee-bind-da05d3e .elementor-heading-title,
	body.kiddee-page-about #page .kiddee-bind-da05d3e p {
		margin: 0 ;
		line-height: var(--kv2-type-title-md-line);
	}

	body.kiddee-page-about #page .kiddee-bind-576cd73,
	body.kiddee-page-about #page .kiddee-bind-53e8c13c {
		width: 100% ;
		max-width: 1200px ;
		min-height: 0 ;
		height: auto ;
		margin: 32px auto 0 ;
		padding: 0 ;
		grid-template-columns: minmax(0, 1fr) ;
		gap: 16px ;
	}

	body.kiddee-page-about #page :is(
		.kiddee-bind-3e7e80f,
		.kiddee-bind-8c3e9ff,
		.kiddee-bind-dd9dc9e,
		.kiddee-bind-4c05b83
	) {
		width: 100% ;
		max-width: none ;
		min-height: 0 ;
		height: auto ;
		margin: 0 ;
		padding: 0 ;
	}

	body.kiddee-page-about #page .kiddee-bind-ced1c47,
	body.kiddee-page-about #page .kiddee-bind-e51d98a,
	body.kiddee-page-about #page .kiddee-bind-520b766d {
		min-height: 0 ;
		height: auto ;
		margin-top: 0 ;
	}

	body.kiddee-page-about #page .kiddee-bind-ced1c47 {
		padding-top: clamp(48px, 8vw, 72px) ;
		padding-bottom: 24px ;
	}

	body.kiddee-page-about #page .kiddee-bind-e51d98a {
		padding: 24px var(--kv2-gutter) 28px ;
	}

	body.kiddee-page-about #page .kiddee-bind-e51d98a > .e-con-inner {
		display: grid ;
		grid-template-columns: minmax(0, 1fr) ;
		gap: 18px ;
	}

	body.kiddee-page-about #page .kiddee-bind-1cb5ca95 {
		margin: 0 0 20px ;
	}

	body.kiddee-page-about #page .kiddee-bind-5b658cc2,
	body.kiddee-page-about #page .kiddee-bind-f5ffe44 {
		margin: 0 ;
	}

	/* Services cards become independent flow blocks on phones. The desktop
	 * image/text overlap is retained above this breakpoint. */
	body.kiddee-page-services #page .kiddee-bind-143347e,
	body.kiddee-page-services #page .kiddee-bind-27fd0303,
	body.kiddee-page-services #page .kiddee-bind-5bbc573 {
		grid-template-columns: minmax(0, 1fr) ;
		gap: 24px ;
		min-height: 0 ;
		height: auto ;
	}

	body.kiddee-page-services #page :is(
		.kiddee-bind-77f0a662,
		.kiddee-bind-df37829,
		.kiddee-bind-5cdd8aba,
		.kiddee-bind-7aed518,
		.kiddee-bind-613f249,
		.kiddee-bind-aecf0e7
	) {
		min-height: 0 ;
		height: auto ;
	}

	body.kiddee-page-services #page :is(
		.kiddee-bind-87e53e2,
		.kiddee-bind-6d8b8494,
		.kiddee-bind-0186390,
		.kiddee-bind-830da27
	) {
		margin: 0 ;
	}

	/* Let long hero copy define the height instead of clipping it inside 4:3 art. */
	:is(
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	) {
		aspect-ratio: auto;
		min-height: clamp(520px, 135vw, 620px);
	}

	.kiddee-about-cover {
		min-height: 540px;
	}

	:is(
		.kiddee-home-cover__content,
		.kiddee-about-cover__content,
		.kiddee-services-cover__content,
		.kiddee-installation-cover__content,
		.kiddee-promotions-cover__content,
		.kiddee-contact-cover__content
	) {
		width: 100%;
		min-height: 100%;
		padding-block: clamp(28px, 7vw, 40px);
	}

	:is(
		.kiddee-home-cover__title,
		.kiddee-about-cover__title,
		.kiddee-services-cover__title,
		.kiddee-installation-cover__title,
		.kiddee-promotions-cover__title,
		.kiddee-contact-cover__title,
		.kiddee-home-cover__summary,
		.kiddee-about-cover__summary,
		.kiddee-services-cover__summary,
		.kiddee-installation-cover__summary,
		.kiddee-promotions-cover__summary,
		.kiddee-contact-cover__summary
	) {
		width: 100%;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	:is(
		.kiddee-home-cover__title,
		.kiddee-about-cover__title,
		.kiddee-services-cover__title,
		.kiddee-installation-cover__title,
		.kiddee-promotions-cover__title,
		.kiddee-contact-cover__title
	) span {
		display: block;
		max-width: 100%;
		white-space: normal ;
		overflow-wrap: anywhere;
		word-break: break-all;
	}
	/* About uses a no-wrap lead line on desktop; allow it to wrap on phones. */
	.kiddee-about-cover__title-line--lead {
		white-space: normal;
	}
	:is(
		.kiddee-home-cover__link,
		.kiddee-about-cover__link,
		.kiddee-services-cover__link,
		.kiddee-installation-cover__link,
		.kiddee-promotions-cover__link,
		.kiddee-contact-cover__link
	) {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	/* Elementor buttons and widgets must shrink inside narrow cards. */
	.kiddee-v2-builder-layout .elementor .elementor-widget,
	.kiddee-v2-builder-layout .elementor .elementor-widget-container,
	.kiddee-v2-builder-layout .elementor .e-con,
	.kiddee-v2-builder-layout .elementor .e-con-inner {
		max-width: 100%;
		min-width: 0;
	}
	.kiddee-v2-builder-layout .elementor-widget-button .elementor-button,
	.kiddee-v2-builder-layout .elementor-widget-form .elementor-button {
		max-width: 100%;
		white-space: normal;
	}
	.search-form {
		flex-wrap: wrap;
		align-items: stretch;
	}
	.search-form label {
		flex: 1 1 100%;
		min-width: 0;
	}
	.search-form input[type="submit"] {
		flex: 1 1 auto;
	}
	.post-navigation .nav-links > * {
		flex: 1 1 100%;
	}

	.entry-content :where(table, .wp-block-table) {
		max-width: 100%;
		overflow-x: auto;
	}

	.single-product.woocommerce div.product > .woocommerce-tabs > ul.tabs {
		flex-wrap: wrap;
	}

	.single-product.woocommerce div.product > .woocommerce-tabs > ul.tabs > li {
		flex: 1 1 auto;
	}

	.single-product.woocommerce div.product > .woocommerce-tabs > ul.tabs > li > a {
		min-width: 0;
		width: 100%;
	}

	.single-product.woocommerce div.product .kiddee-single-product__quantity {
		flex-wrap: wrap;
		gap: 8px;
	}

	body.kiddee-page-design-3d #page .kiddee-bind-a60165d {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mobile contrast fixes: colors only; geometry remains unchanged. */
	body.home #page .kiddee-document-home .kiddee-bind-573ecc81 .elementor-heading-title,
	body.home #page .kiddee-document-home .kiddee-bind-573ecc81 .elementor-icon-box-title {
		color: var(--kv2-airbnb-primary-active);
	}
}