/* Single-product breadcrumbs display 1 normal breadcrumb across all devices with mobile header offset. */

/* Single-product mobile title and summary layout. */
@media (max-width: 47.99rem) {
	body.single-product.woocommerce #page .kiddee-single-product {
		--kv2-product-action-max-width: 100%;
		--kv2-product-action-min-height: 51px;
		--kv2-product-action-padding: 10px 6px;
		--kv2-product-action-font-size: var(--kv2-type-button-size);
		--kv2-product-action-font-weight: var(--kv2-type-button-weight);
		--kv2-product-action-line-height: var(--kv2-type-button-line);
	}

	/* The sticky touch header is in normal flow; keep only the intentional
	 * 24px breathing room before the product details. */
	body.single-product.woocommerce #page {
		margin-top: 24px ;
	}

	body.single-product.woocommerce .site-main--commerce {
		padding-top: 0 ;
	}

	/* Single-product breadcrumbs display cleanly on mobile with proper padding and font size. */
	body.single-product.woocommerce #page :where(.woocommerce-breadcrumb, .breadcrumbs, #breadcrumbs, .yoast-breadcrumb, .rank-math-breadcrumb, nav[aria-label*="breadcrumb" i], nav[aria-label*="Breadcrumb"]) {
		display: block ;
		visibility: visible ;
		opacity: 1 ;
		width: 100% ;
		max-width: 100% ;
		margin: 4px 0 16px ;
		padding: 6px 0 8px ;
		font-family: var(--font-body);
		font-size: var(--kv2-type-body-sm-size);
		font-weight: var(--kv2-type-body-sm-weight);
		line-height: var(--kv2-type-body-sm-line);
		color: var(--kv2-airbnb-ink) ;
		overflow-wrap: break-word ;
		word-break: normal ;
	}

	body.single-product.woocommerce #page :where(.woocommerce-breadcrumb, .breadcrumbs, #breadcrumbs, .yoast-breadcrumb, .rank-math-breadcrumb, nav[aria-label*="breadcrumb" i], nav[aria-label*="Breadcrumb"]) a {
		color: var(--kv2-airbnb-ink) ;
		text-decoration: none ;
		transition: color var(--kv2-transition);
	}

	body.single-product.woocommerce #page :where(.woocommerce-breadcrumb, .breadcrumbs, #breadcrumbs, .yoast-breadcrumb, .rank-math-breadcrumb, nav[aria-label*="breadcrumb" i], nav[aria-label*="Breadcrumb"]) a:hover {
		color: var(--kv2-airbnb-ink) ;
		text-decoration: underline ;
	}

	body.single-product.woocommerce #page .site-main--commerce > .site-container {
		width: min(100% - 32px, var(--kv2-container));
		max-width: 100%;
		margin-inline: auto;
	}

	/* The desktop single-product composition is a two-column grid. Reset it
	 * before laying out the mobile summary so the gallery and details each use
	 * the full content width instead of being squeezed into half-columns. */
	body.single-product.woocommerce #page .kiddee-single-product {
		grid-template-columns: minmax(0, 1fr) ;
		row-gap: 24px ;
		column-gap: 0 ;
	}

	body.single-product.woocommerce #page .kiddee-single-product__media,
	body.single-product.woocommerce #page .kiddee-single-product > .summary {
		grid-column: 1 ;
		grid-row: auto ;
		width: 100% ;
		max-width: 100% ;
	}

	body.single-product.woocommerce #page .kiddee-single-product > .summary {
		display: grid ;
		grid-template-columns: repeat(2, minmax(0, 1fr)) ;
		column-gap: 10px;
		row-gap: 0;
		width: 100% ;
		margin: 0 ;
		padding: 0;
	}

	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% ;
		max-width: none ;
	}

	body.single-product.woocommerce #page .kiddee-single-product .product_title {
		display: block;
		margin: 0 0 12px ;
		padding: 0;
		font-size: var(--kv2-type-display-lg-size);
		font-weight: var(--kv2-type-display-lg-weight);
		line-height: var(--kv2-type-display-lg-line);
		letter-spacing: normal;
		white-space: normal ;
		word-break: normal;
		overflow-wrap: break-word;
		text-wrap: wrap;
	}

	body.single-product.woocommerce #page .kiddee-single-product .summary > .price {
		margin: 0 0 18px ;
		font-size: var(--kv2-type-display-xl-size);
		line-height: var(--kv2-type-display-xl-line);
	}

	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):not(.kiddee-product-summary-actions) {
		grid-column: 1 / -1 ;
		width: 100% ;
		max-width: 100% ;
		margin-top: 0 ;
		margin-bottom: 14px ;
	}

	body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > ul {
		padding-left: 14px;
	}

	body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description li {
		width: 100%;
		margin-bottom: 10px;
		line-height: 1.58;
	}

	/* Side-by-side CTA buttons on mobile. */
	body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description > .kiddee-product-summary-actions,
	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: 100% ;
		margin: 12px 0 0 ;
		align-self: start;
	}

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

	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 {
		box-sizing: border-box ;
		display: inline-flex ;
		width: 100% ;
		min-width: 0 ;
		max-width: var(--kv2-product-action-max-width) ;
		min-height: var(--kv2-product-action-min-height) ;
		padding: var(--kv2-product-action-padding) ;
		font-size: var(--kv2-type-button-size);
		line-height: var(--kv2-type-button-line);
		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"]:not(:has(.product-feature-icon--chat)) {
		font-size: 0 ;
		white-space: nowrap;
	}

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

/* Treat iPad portrait/tablet widths as a compact single-product composition.
 * Landscape tablet widths retain the intentional two-column presentation. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	body.single-product.woocommerce #page .kiddee-single-product {
		--kv2-product-action-padding: 11px 14px;
		--kv2-product-action-font-size: var(--kv2-type-button-sm-size);
		--kv2-product-action-font-weight: var(--kv2-type-button-sm-weight);
		--kv2-product-action-line-height: var(--kv2-type-button-sm-line);
		grid-template-columns: minmax(0, 1fr) ;
		gap: 36px ;
	}

	body.single-product.woocommerce #page .kiddee-single-product__media,
	body.single-product.woocommerce #page .kiddee-single-product > .summary {
		grid-column: 1 ;
		grid-row: auto ;
		width: 100% ;
		max-width: 100% ;
	}
}

/* iPad landscape keeps the two-column composition, but gives the summary a
 * small top inset so its title does not sit flush with the gallery edge. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
	body.single-product.woocommerce #page .kiddee-single-product > .summary {
		padding-top: 12px ;
	}
}

/* Let description text span the summary grid on both supported compact ranges. */
@media (max-width: 47.99rem), (min-width: 48rem) and (max-width: 63.99rem) {
	body.single-product.woocommerce #page .kiddee-single-product .woocommerce-product-details__short-description {
		display: contents ;
	}
}

/* Mobile header refresh: larger brand lockup and a calmer, easier-to-tap menu. */
@media (max-width: 47.99rem) {
	body.tax-product_cat #page,
	body.post-type-archive-product #page,
	body.admin-bar.tax-product_cat #page,
	body.admin-bar.post-type-archive-product #page {
		margin-top: 0 ;
	}

	@media (hover: hover) {
		.menu-toggle:hover {
			border-color: var(--kv2-color-primary-dark);
			color: var(--kv2-color-surface);
			background: var(--kv2-color-primary-dark);
			box-shadow: 0 5px 12px color-mix(in srgb, var(--kv2-color-primary-dark) 14%, transparent);
			transform: none;
		}

		.primary-menu a:hover {
			color: var(--kv2-color-primary-dark);
			background: var(--kv2-color-soft-blue);
		}
	}

	.menu-toggle:focus {
		outline: none;
	}

	.menu-toggle:focus-visible {
		border-color: var(--kv2-color-primary-dark);
		color: var(--kv2-color-surface);
		background: var(--kv2-color-primary-dark);
		box-shadow: 0 5px 12px color-mix(in srgb, var(--kv2-color-primary-dark) 14%, transparent);
		transform: none;
	}

	.primary-menu a:focus-visible {
		color: var(--kv2-color-primary-dark);
		background: var(--kv2-color-soft-blue);
	}

	.primary-menu > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current_page_parent, .current_page_ancestor) > a {
		color: var(--kv2-color-primary-dark);
		background: var(--kv2-color-soft-yellow);
	}

	.primary-menu > li.menu-item-quote-request {
		display: block ;
	}

	/* Full screen mobile navigation menu (fits content height) */


	/* Prevent Thai font tone marks (วรรณยุกต์ / สระบน) from getting clipped at the top of headings on mobile */
	:is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .entry-title, .product_title, .elementor-icon-box-title):not(.woocommerce-products-header__title) {
		line-height: var(--kv2-type-display-lg-line);
		padding-top: 4px ;
		overflow: visible ;
	}
}

/* Tablet/iPad navigation: full screen menu matching mobile language until desktop (fits content height). */
@media (min-width: 48rem) and (max-width: 74.99rem) {
	.menu-toggle {
		min-height: 52px;
		padding: 12px 16px;
		font-size: var(--kv2-type-body-md-size);
	}



}

/* Shared navigation state for the disjoint mobile and tablet ranges. */
@media (max-width: 47.99rem), (min-width: 48rem) and (max-width: 74.99rem) {
	.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);
}
}

/* At exactly 360px the two product CTAs are narrow columns. Let the quote
 * label wrap inside its own pill instead of painting outside the button. */
@media (max-width: 22.5rem) {
	body.single-product.woocommerce #page .kiddee-single-product :is(
		.add-request-quote-button.button,
		.yith_ywraq_add_item_browse_message a
	) {
		min-width: 0 ;
		max-width: 100% ;
		box-sizing: border-box ;
		white-space: normal ;
		overflow-wrap: anywhere;
		word-break: break-word;
		font-size: var(--kv2-type-button-size);
		line-height: var(--kv2-type-button-line);
	}
}

/* The post-add quote status has a longer label. Keep that label on one line
 * at 360px by giving it the small amount of width it needs. */
@media (max-width: 22.5rem) {
	body.single-product.woocommerce #page .kiddee-single-product .yith_ywraq_add_item_browse_message a {
		padding-inline: 6px ;
		font-size: var(--kv2-product-action-font-size) ;
		line-height: 1.2 ;
		white-space: nowrap ;
		overflow-wrap: normal;
		word-break: normal;
	}
}