/*
 * Responsive safety layer.
 *
 * This file is loaded after the page-specific styles so the original desktop
 * compositions remain unchanged. Rules below only address viewport constraints
 * and narrow-screen stacking/wrapping.
 */

/* Keep an empty horizontal edge gesture from rubber-banding the root viewport
 * on touchscreens and trackpads. This changes scroll physics only; it does not
 * create a scroll container or alter any element dimensions. */
html,
body {
	overscroll-behavior-x: none;
}

@media (max-width: 63.99rem) {
	/* Remove webkit blue tap highlight flash on mobile and iPad/tablet touch interactions. */
	html,
	body,
	:is(a, button, input, select, textarea, label, [role="button"], img, svg, div, span, p) {
		-webkit-tap-highlight-color: transparent ;
	}

	/* Do not put an overflow mode on the root scroll chain. iPad Safari can
	 * repaint a sticky child on every scroll tick when an ancestor clips it. */
	html,
	body {
		max-width: 100%;
		overflow-x: visible;
		/* Stop the root viewport from rubber-banding sideways when a touch or
		 * trackpad gesture has no horizontal content to consume. This does not
		 * create a scroll container or change the page's layout width. */
		overscroll-behavior-x: none;
		margin-top: 0 ;
	}

	body {
		/* 76px inner row + 1px bottom border. */
		--kiddee-touch-header-height: 77px;
	}

	/* Keep accidental horizontal overflow inside page-content siblings rather
	 * than making the header's ancestors into scroll containers. */
	:is(
		#page,
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	) {
		max-width: 100%;
		overflow-x: clip;
	}

	/* Keep the compact header in normal document flow. A fixed header had to be
	 * repainted as a separate viewport layer on every touch-scroll tick, which
	 * caused the header to visibly shiver on mobile browsers. Sticky keeps the
	 * same pinned-at-the-top behavior while letting the page own one stable
	 * scroll layer. */
	.site-header {
		position: sticky ;
		inset: 0 0 auto 0 ;
		top: 0 ;
		margin: 0 ;
		width: 100%;
		height: var(--kiddee-touch-header-height);
		min-height: var(--kiddee-touch-header-height);
		--kiddee-mobile-header-height: var(--kiddee-touch-header-height);
		-webkit-transform: none;
		transform: none ;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		will-change: auto;
		transition: none ;
		animation: none ;
	}

	.site-header + :is(
		#page,
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	) {
		margin-top: 0 ;
	}

	/* Sticky headers already occupy their own 77px flow row. Clear the old
	 * fixed-header reservation so the first content pixel does not move down. */
	body.tax-product_cat #page,
	body.post-type-archive-product #page {
		margin-top: 0 ;
	}

	/* The front-end mobile layout does not reserve space for the WordPress
	 * admin bar. This keeps the site header at the actual viewport top. */
	body.admin-bar #wpadminbar {
		display: none ;
	}

	.site-header,
	body.admin-bar .site-header {
		top: 0 ;
		margin-top: 0 ;
	}

	body.admin-bar .site-header + :is(
		#page,
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	) {
		margin-top: 0 ;
	}

	body.admin-bar.tax-product_cat #page,
	body.admin-bar.post-type-archive-product #page {
		margin-top: 0 ;
	}

	:where(
		.kiddee-v2-builder-layout .elementor,
		.kiddee-v2-builder-layout .elementor .e-con,
		.kiddee-v2-builder-layout .elementor .e-con-inner,
		.kiddee-v2-builder-layout .elementor-widget,
		.kiddee-v2-builder-layout .elementor-widget-container
	) {
		min-width: 0;
		max-width: 100%;
	}

	:where(
		.kiddee-v2-builder-layout .elementor img,
		.kiddee-v2-builder-layout .elementor svg,
		.kiddee-v2-builder-layout .elementor video,
		.kiddee-v2-builder-layout .elementor iframe,
		.kiddee-v2-builder-layout .elementor canvas
	) {
		max-width: 100%;
	}

	:where(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-button) {
		min-width: 0;
	}

	/* Keep the tablet menu usable when labels contain long Thai text. */
	.primary-menu,
	.primary-menu li,
	.primary-menu a {
		min-width: 0;
	}

	.primary-menu a {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Give cover content a safe minimum at tablet widths without changing its art direction. */
	:is(
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	) {
		min-height: 360px;
	}

	/* The original two-column product summary uses fixed 220px tracks. */
	.single-product.woocommerce div.product .kiddee-single-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.single-product.woocommerce div.product .kiddee-single-product__media,
	.single-product.woocommerce div.product .kiddee-single-product > .summary {
		grid-column: 1;
		grid-row: auto;
	}

	/* iPad Mini & iPad Air: keep Request Quote button right beside LINE button on the left. */
	@media (min-width: 48rem) and (max-width: 63.99rem) {
		body.single-product.woocommerce #page .kiddee-single-product > .summary {
		}

		body.single-product.woocommerce #page .kiddee-single-product > .summary > .product_title,
		body.single-product.woocommerce #page .kiddee-single-product > .summary > .price,
		body.single-product.woocommerce #page .kiddee-single-product > .summary > .clear,
		body.single-product.woocommerce #page .kiddee-single-product > .summary > .product_meta {
			grid-column: 1 / -1 ;
			width: 100% ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > ul,
		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > p:not(.kiddee-line-cta-wrap):not(:has(a[href*="line.me"])):not(:has(a[href*="lin.ee"])),
		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > div:not(.kiddee-line-cta-wrap) {
			grid-column: 1 / -1 ;
			width: 100% ;
			max-width: 56ch ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > :is(p.kiddee-line-cta-wrap, p:has(a[href*="line.me"]), p:has(a[href*="lin.ee"])),
		body.single-product.woocommerce #page .kiddee-single-product > .summary > .kiddee-line-cta-wrap {
			grid-column: 1 ;
			width: var(--kv2-product-action-max-width) ;
			margin-top: 16px ;
			margin-right: 0 ;
			margin-left: 0 ;
			align-self: start ;
		}

		body.single-product.woocommerce #page .kiddee-single-product > .summary > .yith-ywraq-add-to-quote {
			margin-right: 0 ;
			margin-left: 0 ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"],
		body.single-product.woocommerce #page .kiddee-single-product .kiddee-line-cta-wrap .kiddee-line-cta,
		body.single-product.woocommerce #page .kiddee-single-product .add-request-quote-button.button,
		body.single-product.woocommerce #page .kiddee-single-product .yith_ywraq_add_item_browse_message a {
			display: inline-flex ;
			min-height: var(--kv2-product-action-min-height) ;
			padding: var(--kv2-product-action-padding) ;
			white-space: nowrap ;
			text-align: center ;
			justify-content: center ;
			align-items: center ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"] {
			font-size: 0 ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"]::after {
			content: "ทักแชททาง LINE" ;
			font-size: var(--kv2-product-action-font-size) ;
			font-weight: var(--font-weight-bold);
			line-height: 1.2;
		}

		body.single-product.woocommerce #page .kiddee-single-product .add-request-quote-button.button,
		body.single-product.woocommerce #page .kiddee-single-product .yith_ywraq_add_item_browse_message a,
		body.single-product.woocommerce #page .kiddee-single-product .kiddee-line-cta-wrap .kiddee-line-cta {
			font-size: var(--kv2-type-button-size);
		}
	}

	/* Keep product copy full-width and align both CTAs in one row on iPad. */
	@media (min-width: 48rem) and (max-width: 63.99rem) {
		body.single-product.woocommerce #page .kiddee-single-product > .summary {
			display: grid ;
			grid-template-columns: var(--kv2-product-action-max-width) var(--kv2-product-action-max-width) minmax(0, 1fr) ;
			column-gap: 16px ;
			row-gap: 0 ;
			width: 100% ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .kiddee-product-summary-copy,
		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > ul,
		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > p:not(.kiddee-line-cta-wrap) {
			grid-column: 1 / -1 ;
			width: 100% ;
			max-width: none ;
		}

		body.single-product.woocommerce #page div.product .kiddee-single-product .woocommerce-product-details__short-description .kiddee-product-summary-copy {
			grid-column: 1 / -1 ;
			width: 100% ;
			max-width: none ;
		}

		body.single-product.woocommerce #page div.product .kiddee-single-product .woocommerce-product-details__short-description > p:not(.kiddee-line-cta-wrap):not(:has(a[href*="line.me"])):not(:has(a[href*="lin.ee"])) {
			grid-column: 1 / -1 ;
			width: 100% ;
			max-width: none ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .kiddee-product-summary-actions,
		body.single-product.woocommerce #page .kiddee-single-product > .summary > .kiddee-line-cta-wrap {
			grid-column: 1 ;
			width: 100% ;
			margin-top: 16px ;
		}

		body.single-product.woocommerce #page div.product .kiddee-single-product .woocommerce-product-details__short-description .kiddee-product-summary-actions {
			grid-column: 1 ;
			width: 100% ;
			max-width: none ;
			margin-top: 16px ;
		}

		body.single-product.woocommerce #page .kiddee-single-product > .summary > .yith-ywraq-add-to-quote {
			grid-column: 2 ;
			width: 100% ;
			margin-top: 16px ;
			align-self: start ;
			justify-self: stretch ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"],
		body.single-product.woocommerce #page .kiddee-single-product .kiddee-line-cta-wrap .kiddee-line-cta,
		body.single-product.woocommerce #page .kiddee-single-product .add-request-quote-button.button,
		body.single-product.woocommerce #page .kiddee-single-product .yith_ywraq_add_item_browse_message a {
			width: 100% ;
			max-width: var(--kv2-product-action-max-width) ;
			min-width: 0 ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"]:has(.product-feature-icon--chat) {
			font-size: var(--kv2-product-action-font-size) ;
		}

		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"]:has(.product-feature-icon--chat)::before,
		body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description a[href*="line.me"]:has(.product-feature-icon--chat)::after {
			display: none ;
			content: none ;
		}
	}

	/* Single-product mobile & iPad: hide magnifying glass icon and allow direct image tap for full-screen view. */
	.single-product.woocommerce div.product .kiddee-single-product__media .woocommerce-product-gallery__trigger,
	body.single-product.woocommerce #page .woocommerce-product-gallery__trigger {
		display: none ;
		visibility: hidden ;
		opacity: 0 ;
		pointer-events: none ;
	}

	.single-product.woocommerce div.product .kiddee-single-product__media .woocommerce-product-gallery .zoomImg {
		display: none ;
		pointer-events: none ;
	}

	.single-product.woocommerce div.product .kiddee-single-product__media .woocommerce-product-gallery__image,
	.single-product.woocommerce div.product .kiddee-single-product__media .woocommerce-product-gallery__image a,
	.single-product.woocommerce div.product .kiddee-single-product__media .woocommerce-product-gallery__image img {
		cursor: pointer ;
	}

	body.single-product.woocommerce .site-main--commerce {
		min-width: 0;
	}

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

/* iPad landscape is 1024px wide, just beyond the 63.99rem tablet range
 * above. Keep the same sticky-header contract through the desktop breakpoint. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
	html,
	body {
		/* Match compact/mobile viewport edge behaviour on iPad landscape so a
		 * sideways gesture cannot rubber-band the root page when no x-overflow
		 * exists. */
		overscroll-behavior-x: none;
	}

	body {
		--kiddee-touch-header-height: 77px;
	}

	body.admin-bar #wpadminbar {
		display: none ;
	}

	.site-header,
	body.admin-bar .site-header {
		position: sticky ;
		inset: 0 0 auto 0 ;
		top: 0 ;
		width: 100%;
		height: var(--kiddee-touch-header-height);
		min-height: var(--kiddee-touch-header-height);
		margin: 0 ;
		-webkit-transform: none;
		transform: none ;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		will-change: auto;
		transition: none ;
		animation: none ;
	}

	.site-header + :is(
		#page,
		.kiddee-home-cover,
		.kiddee-about-cover,
		.kiddee-services-cover,
		.kiddee-installation-cover,
		.kiddee-promotions-cover,
		.kiddee-contact-cover
	),
	body.tax-product_cat #page,
	body.post-type-archive-product #page {
		margin-top: 0 ;
	}
}