/* ========================================================================== 
   WATZADU — LoopWear-style system typography

   Reference: shoploopwear.com. LoopWear does not ship a webfont; it relies on
   the operating system's native UI font, including Sukhumvit Set and Thonburi
   as Thai fallbacks on Apple devices. No third-party font files are required.
   ========================================================================== */

:root {
	--font-system-text: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Sukhumvit Set", "Helvetica Neue", "Thonburi", Arial, sans-serif;
	--font-system-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Sukhumvit Set", "Helvetica Neue", "Thonburi", Arial, sans-serif;
	--font-display: var(--font-system-display);
	--font-thai: var(--font-system-text);
	--font-en: var(--font-system-text);

	/* LoopWear character with a more readable, search/mobile-friendly scale. */
	--fs-display: clamp(30px, 3.35vw, 48px);
	--fs-h1: clamp(30px, 3.35vw, 48px);
	--fs-h2: clamp(28px, 2.15vw, 34px);
	--fs-h3: 20px;
	--fs-h4: 18px;
	--fs-lead: 18px;
	--fs-body: 17px;
	--fs-sm: 14px;
	--fs-xs: 13px;
	--fs-micro: 12px;
}

/* A non-scrolling horizontal clip preserves the global sticky navigation on
   the comparison page while still preventing carousel content from widening
   the viewport. */
body.page-template-page-compare {
	overflow-x: clip !important;
}

html,
body,
body *:where(:not(i):not(svg):not([class*="ti-"]):not([class^="ti-"]):not(.dashicons):not([class*="dashicons-"]):not([class*="elementor-icon"]):not([class*="fa-"]):not(.fab):not(.fas):not(.far):not(.fal):not(.fad)) {
	font-family: var(--font-system-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.elementor-heading-title,
.wp-block-heading,
.woocommerce-loop-product__title,
.entry-title, .page-title, .product_title,
.wzd-hero-title, .wzd-page-title, .wzd-section-title {
	font-family: var(--font-system-display) !important;
	font-weight: 600;
	letter-spacing: 0;
}

body {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	font-synthesis: none;
	text-rendering: geometricPrecision;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: var(--fs-h2); line-height: 1.16; letter-spacing: -.035em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
h5 { font-size: 15px; line-height: 1.2; }
h6 { font-size: 13px; line-height: 1.2; }
p { line-height: 1.65; }

/* Main display roles used across the custom theme. */
.wzd-hero-title {
	font-size: clamp(30px, 3.35vw, 48px) !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	letter-spacing: -.045em !important;
}

.wzd-page-title {
	font-size: var(--fs-display) !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	letter-spacing: -.045em !important;
}

.wzd-section-title,
.wzd-sec-title,
.wzd-pdp-sec-h {
	font-size: var(--fs-h2) !important;
	font-weight: 600 !important;
	line-height: 1.16 !important;
	letter-spacing: -.035em !important;
}

/* Apple uses the Text cut for controls and compact UI. */
button, .button, .btn,
input, select, textarea,
.elementor-button,
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.price, .amount, .woocommerce-Price-amount,
code, kbd, samp, pre, tt {
	font-family: var(--font-system-text) !important;
}

.wzd-btn,
.button,
.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
}

.wzd-nav-items > li > a {
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
}

input, select, textarea {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

small,
.small,
.wzd-bread,
.wzd-art-meta,
.wzd-prod-size,
.wzd-prod-price small {
	font-size: 13px;
	line-height: 1.45;
}

/* Readability floor for repeated content modules. Primary content stays at
   16px+, secondary descriptions at 14px+, and only metadata may use 13px. */
.wzd-hero-sub,
.wzd-page-lead,
.wzd-section-sub,
.wzd-section-desc,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
	font-size: 16px !important;
	line-height: 1.65 !important;
}

.wzd-catmini-name,
.wzd-prod-title,
.wzd-art-title,
.wzd-info-t,
.wzd-proj-name,
.wzd-trust-t,
.wzd-step-t,
.wzd-pdp-feat-t,
.wzd-pdp-spec-card-val,
.wzd-pdp-rel-name,
.wzd-accord-btn,
.woocommerce-loop-product__title {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.wzd-catmini-desc,
.wzd-catmini-cta,
.wzd-prod-size,
.wzd-art-excerpt,
.wzd-info-d,
.wzd-proj-desc,
.wzd-trust-d,
.wzd-step-d,
.wzd-pdp-sub,
.wzd-pdp-feat-d,
.wzd-pdp-spec-card-lbl,
.wzd-pdp-rel-dim,
.wzd-accord-panel,
.wzd-foot-about,
.wzd-foot ul,
.wzd-foot-contact,
.woocommerce-result-count,
.woocommerce-ordering {
	font-size: 14px !important;
	line-height: 1.6 !important;
}

.wzd-drawer a,
.wzd-drawer button {
	font-size: 16px !important;
	line-height: 1.5 !important;
}

/* Metadata remains visually secondary, but no meaningful label is rendered
   below 13px. Icon-only glyphs and decorative step numbers are excluded. */
body .wzd-hero-eyebrow,
body .wzd-art-tag,
body .wzd-review-tag,
body .wzd-foot-contact-label,
body .wzd-foot-copy,
body .wzd-lang-opt,
body .wdc-ck-desc,
body .wdc-ck-info,
body .wdc-ck-info span,
body .wdc-ck-always,
body .wdc-ck-link {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

body .wzd-catmini-cta {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* The home/product bundles contain deliberate high-specificity compact rules;
   these selectors keep the readability floor authoritative. */
body .wzd-catmini.wzd-catmini .wzd-catmini-name {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

body .wzd-catmini.wzd-catmini .wzd-catmini-desc,
body .wzd-catmini.wzd-catmini .wzd-catmini-cta {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

body .wzd-art.wzd-art .wzd-art-tag,
body .wzd-review-card .wzd-review-tag,
body .wzd-foot.wzd-foot .wzd-foot-contact-label,
body .wzd-foot.wzd-foot .wzd-foot-copy {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

/* Mobile footer contact — an iOS-style grouped list with one calm surface,
   consistent touch rows and inset separators. */
@media (max-width: 540px) {
	body .wzd-foot.wzd-foot .wzd-foot-contact-card {
		width: calc(100% - 32px) !important;
		max-width: none !important;
		margin: 20px 16px 0 !important;
		padding: 20px 18px 6px !important;
		background: #f5f5f7 !important;
		border: 1px solid rgba(0, 0, 0, .055) !important;
		border-radius: 20px !important;
		box-shadow: 0 8px 28px rgba(0, 0, 0, .045) !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-card > .wzd-foot-heading {
		margin: 0 2px 8px !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
		letter-spacing: -.015em !important;
		text-transform: none !important;
		color: #1d1d1f !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact {
		gap: 0 !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact li {
		position: relative;
		align-items: center !important;
		gap: 12px !important;
		min-height: 62px;
		margin: 0 !important;
		padding: 10px 2px !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact li:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 48px;
		right: 0;
		bottom: 0;
		height: 1px;
		background: rgba(0, 0, 0, .075);
		transform: scaleY(.5);
		transform-origin: bottom;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-ic {
		width: 36px !important;
		height: 36px !important;
		margin: 0 !important;
		border: 1px solid rgba(142, 37, 33, .08) !important;
		border-radius: 11px !important;
		background: rgba(142, 37, 33, .08) !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-ic--line {
		border-color: rgba(6, 167, 72, .09) !important;
		background: rgba(6, 167, 72, .09) !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-ic i {
		font-size: 17px !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-body {
		gap: 1px !important;
		justify-content: center;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-label {
		font-size: 12px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		color: #6e6e73 !important;
	}

	body .wzd-foot.wzd-foot .wzd-foot-contact-value,
	body .wzd-foot.wzd-foot .wzd-foot-contact-value:link {
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
		color: #1d1d1f !important;
		letter-spacing: -.005em !important;
	}

	body .wzd-foot.wzd-foot a.wzd-foot-contact-value:active {
		opacity: .55;
	}
}

:lang(th) p,
:lang(th) li,
:lang(th) label,
:lang(th) input,
:lang(th) select,
:lang(th) textarea,
:lang(th) button {
	line-height: 1.6;
}

@media (max-width: 736px) {
	:root {
		--fs-display: 32px;
		--fs-h1: 32px;
		--fs-h2: 24px;
		--fs-h3: 20px;
		--fs-body: 16px;
		--fs-lead: 17px;
		--fs-sm: 14px;
		--fs-xs: 13px;
	}

	.wzd-hero-title { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
	.wzd-section-title,
	.wzd-sec-title,
	.wzd-pdp-sec-h { font-size: 24px !important; line-height: 1.25 !important; }

	.wzd-hero-sub,
	.wzd-page-lead,
	.wzd-section-sub,
	.wzd-section-desc,
	.entry-content > p,
	.entry-content > ul,
	.entry-content > ol { font-size: 16px !important; line-height: 1.65 !important; }

	.wzd-btn,
	.button,
	.elementor-button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button { font-size: 15px !important; min-height: 44px; }

	input, select, textarea { font-size: 16px !important; }
}

/* Comparison affordances: make the comparison entry point and editable
   calculator controls recognizable without overwhelming the page. */
.wzd-nav-compare .ti-arrows-diff,
.wzd-mega-compare .ti-arrows-diff,
.wzd-drawer-compare .ti-arrows-diff {
	color: var(--c-brick, #8e2521) !important;
}

.wzd-nav-compare:hover .ti-arrows-diff,
.wzd-mega-compare:hover .ti-arrows-diff,
.wzd-drawer-compare:hover .ti-arrows-diff {
	color: var(--c-brick-deep, #6e1c19) !important;
}

body input:is(
	#wcp-area,
	#wcp-area-mini,
	#wcp-destination,
	#wcp-team,
	#wcp-team-mini,
	#wcp-wage,
	#wcp-wage-mini,
	#wcp-cement-price,
	#wcp-cement-price-mini,
	.wcp-prod-price,
	.wcp-swap-search
) {
	border: 1.5px solid rgba(142, 37, 33, .42) !important;
	background: rgba(142, 37, 33, .035) !important;
	box-shadow: inset 0 0 0 1px rgba(142, 37, 33, .025);
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

body input:is(
	#wcp-area,
	#wcp-area-mini,
	#wcp-destination,
	#wcp-team,
	#wcp-team-mini,
	#wcp-wage,
	#wcp-wage-mini,
	#wcp-cement-price,
	#wcp-cement-price-mini,
	.wcp-prod-price,
	.wcp-swap-search
):hover {
	border-color: rgba(142, 37, 33, .72) !important;
	background: rgba(142, 37, 33, .055) !important;
}

body input:is(
	#wcp-area,
	#wcp-area-mini,
	#wcp-destination,
	#wcp-team,
	#wcp-team-mini,
	#wcp-wage,
	#wcp-wage-mini,
	#wcp-cement-price,
	#wcp-cement-price-mini,
	.wcp-prod-price,
	.wcp-swap-search
):focus {
	outline: none !important;
	border-color: var(--wcp-brick, #8e2521) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(142, 37, 33, .14) !important;
}

body .wcp-prod-cost {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 20px;
	font-size: 11px;
	color: var(--wcp-gray, #6e6e73);
}

body .wcp-prod-cost strong {
	color: var(--wcp-ink, #1d1d1f);
	font-size: 12px;
	font-weight: 700;
}

body .wcp-sub-factory-cost {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--wcp-gray, #6e6e73);
}

body .wcp-calc-note a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .wcp-calc-btns {
	border: 1.5px solid rgba(142, 37, 33, .34);
	background: rgba(142, 37, 33, .055);
	padding: 2px;
}

body .wcp-calc-btns button:not(.wcp-btn-on) {
	color: var(--wcp-ink, #1d1d1f);
}

body .wcp-calc-btns button:not(.wcp-btn-on):hover,
body .wcp-calc-btns button:not(.wcp-btn-on):focus-visible {
	background: rgba(142, 37, 33, .1);
	color: var(--wcp-brick, #8e2521);
}

body .wcp-swap-btn {
	border: 1.5px solid rgba(142, 37, 33, .42);
	background: rgba(142, 37, 33, .035);
	color: var(--wcp-brick, #8e2521);
}

body .wcp-swap-btn:hover,
body .wcp-swap-btn:focus-visible {
	border-color: var(--wcp-brick, #8e2521);
	background: rgba(142, 37, 33, .09);
	box-shadow: 0 0 0 3px rgba(142, 37, 33, .12);
	outline: none;
}

/* Desktop comparison grid: each pair of calculator controls occupies the
   same column as the product card below it. */
@media (min-width: 1181px) {
	body .wcp-glass .wcp-calc-inner {
		width: 100%;
		max-width: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"area dest groove"
			"team wage cement";
		column-gap: 0;
		row-gap: 18px;
	}

	body .wcp-glass .wcp-calc-item {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding-inline: 12px;
		justify-self: stretch;
		justify-content: center;
	}

	body .wcp-glass .wcp-calc-item--dest .wcp-dest-wrap {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
		max-width: 100%;
	}

	body .wcp-glass .wcp-dest-wrap input[type="search"] {
		width: 240px;
		max-width: 240px;
	}

	body .wcp-glass .wcp-dest-results {
		left: 0;
		right: 0;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		flex: 0 1 320px;
		width: min(100%, 320px);
		min-width: 0;
		max-width: 320px;
		justify-content: center;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
		flex: 1 1 0;
	}
}

/* Mobile comparison layout: four compact, task-oriented form rows with
   consistent page gutters. Desktop remains governed by the grid above. */
@media (max-width: 640px) {
	body .wcp-page > .wzd-container,
	body .wcp-table > .wzd-container,
	body .wcp-glass-wrap > .wzd-container {
		box-sizing: border-box;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	body .wcp-title-bar {
		padding-top: 12px;
		padding-bottom: 2px;
	}

	body .wcp-howto-bar {
		min-height: 32px;
		padding-top: 5px;
		padding-bottom: 7px;
		gap: 7px;
		flex-wrap: nowrap;
		justify-content: center;
	}

	body .wcp-howto-steps {
		min-width: 0;
		gap: 5px;
		flex-wrap: nowrap;
	}

	body .wcp-howto-steps .wcp-hs {
		gap: 3px;
		font-size: 0;
		line-height: 1.25;
	}

	body .wcp-howto-steps .wcp-hs::after {
		font-size: 12px;
		font-weight: 500;
	}

	body .wcp-howto-steps .wcp-hs:nth-of-type(1)::after { content: "เลือกสินค้า"; }
	body .wcp-howto-steps .wcp-hs:nth-of-type(2)::after { content: "กรอกข้อมูล"; }
	body .wcp-howto-steps .wcp-hs:nth-of-type(3)::after { content: "ดูผลลัพธ์"; }

	body .wcp-howto-steps .wcp-hs-n {
		width: 19px;
		height: 19px;
		font-size: 10px;
	}

	body .wcp-howto-steps .wcp-hs-sep {
		display: none;
	}

	body .wcp-hs-hint {
		gap: 2px;
		font-size: 11px;
		line-height: 1.2;
	}

	body .wcp-back-bar {
		padding-top: 7px;
		padding-bottom: 8px;
	}

	body .wcp-back-bar > div {
		gap: 8px !important;
	}

	body .wcp-glass-wrap {
		padding-top: 6px;
		padding-bottom: 10px;
	}

	body .wcp-glass {
		padding: 12px 10px 10px;
	}

	body .wcp-glass .wcp-calc-bar {
		margin-bottom: 10px;
		padding-bottom: 11px;
	}

	body .wcp-glass .wcp-calc-inner {
		display: grid;
		width: 100%;
		max-width: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"area team"
			"dest dest"
			"groove groove"
			"wage cement";
		gap: 9px 8px;
		align-items: center;
	}

	body .wcp-glass .wcp-calc-item {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding: 0;
		gap: 5px;
		flex-wrap: nowrap;
	}

	body .wcp-glass .wcp-calc-item--area,
	body .wcp-glass .wcp-calc-item--team,
	body .wcp-glass .wcp-calc-item--wage,
	body .wcp-glass .wcp-calc-item--cement {
		display: flex;
		justify-content: center;
	}

	body .wcp-glass .wcp-calc-item--dest,
	body .wcp-glass .wcp-calc-item--groove {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		justify-content: stretch;
		gap: 7px;
	}

	body .wcp-glass .wcp-calc-label,
	body .wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		display: inline-flex;
		align-items: center;
		justify-self: start;
		gap: 2px;
		font-size: 12px;
		line-height: 1.3;
		white-space: nowrap;
	}

	body .wcp-glass .wcp-calc-label i,
	body .wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label i {
		font-size: 14px;
	}

	body .wcp-glass .wcp-calc-area-wrap {
		min-width: 0;
		gap: 3px;
		justify-content: flex-start;
		font-size: 11px;
		white-space: nowrap;
	}

	body .wcp-glass .wcp-calc-item--area .wcp-calc-area-wrap input,
	body .wcp-glass .wcp-calc-item--team .wcp-calc-area-wrap input {
		width: 52px;
	}

	body .wcp-glass .wcp-calc-item--wage .wcp-calc-area-wrap input,
	body .wcp-glass .wcp-calc-item--cement .wcp-calc-area-wrap input {
		width: 60px;
	}

	body .wcp-glass .wcp-calc-item--dest .wcp-dest-wrap {
		width: 100%;
		max-width: none;
		min-width: 0;
		justify-self: stretch;
	}

	body .wcp-glass .wcp-dest-wrap input[type="search"] {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	body .wcp-glass .wcp-dest-results {
		left: 0;
		right: 0;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		width: 100%;
		max-width: none;
		min-width: 0;
		justify-self: stretch;
		overflow: hidden;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
		flex: 1 1 25%;
		min-width: 0;
		padding: 5px 3px;
		font-size: 12px;
	}

	body .wcp-prod-cell {
		padding-left: 7px;
		padding-right: 7px;
	}

	body .wcp-mini-hdr {
		background: rgba(255, 255, 255, .97);
	}

	body .wcp-mini-prod-row {
		padding: 5px 0;
	}

	body .wcp-mini-cell {
		padding: 2px 6px;
	}

	body .wcp-mini-img {
		display: block;
		width: 44px;
		height: 44px;
		margin: 0 auto 4px;
		border-radius: 9px;
	}

	body .wcp-mini-img--icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
	}

	body .wcp-mini-name {
		font-size: 12px;
		line-height: 1.35;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body .wcp-table {
		padding-top: 4px;
		padding-bottom: 24px;
	}

	body .wcp-row-val {
		padding-left: 5px;
		padding-right: 5px;
	}

	/* Three compared products remain available on mobile. Each synchronized
	   rail shows two columns and snaps between products 1–2 and 2–3. */
	body .wcp-page.wcp-mobile-carousel .wcp-prod-row,
	body .wcp-page.wcp-mobile-carousel .wcp-mini-prod-row,
	body .wcp-page.wcp-mobile-carousel .wcp-table .wcp-row-vals {
		display: flex;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	body .wcp-page.wcp-mobile-carousel .wcp-prod-row::-webkit-scrollbar,
	body .wcp-page.wcp-mobile-carousel .wcp-mini-prod-row::-webkit-scrollbar,
	body .wcp-page.wcp-mobile-carousel .wcp-table .wcp-row-vals::-webkit-scrollbar {
		display: none;
	}

	body .wcp-page.wcp-mobile-carousel .wcp-prod-cell,
	body .wcp-page.wcp-mobile-carousel .wcp-mini-cell,
	body .wcp-page.wcp-mobile-carousel .wcp-row-val {
		box-sizing: border-box;
		display: block;
		flex: 0 0 50%;
		width: 50%;
		min-width: 50%;
		scroll-snap-align: start;
	}

	body .wcp-page.wcp-mobile-carousel .wcp-prod-row {
		scroll-padding-inline: 0;
	}

	body .wcp-swap-panel--mobile {
		position: fixed;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		max-width: min(260px, calc(100vw - 28px));
		z-index: 80;
	}

	body .wcp-summary.wzd-container {
		padding-top: 10px;
		padding-bottom: 14px;
	}

	body .wcp-summary-h {
		margin-bottom: 10px;
	}

	body .wcp-cta-row.wzd-container {
		padding-top: 22px;
		padding-bottom: 36px;
		gap: 8px;
	}

	body .wcp-cta-row .wzd-btn {
		min-height: 44px;
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (max-width: 360px) {
	body .wcp-glass .wcp-calc-label,
	body .wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		font-size: 11px;
	}

	body .wcp-back-bar > a {
		font-size: 0;
		white-space: nowrap;
	}

	body .wcp-back-bar > a::after {
		content: "กลับไปสินค้า";
		font-size: 12px;
	}

	body .wcp-hl-toggle > span,
	body .wcp-pdf-btn > span {
		display: none;
	}

	body .wcp-pdf-btn {
		width: 36px;
		height: 34px;
		padding: 0;
		justify-content: center;
	}
}

/* Mobile control sizing: compact Apple-like field geometry with widths based
   on expected content rather than one oversized input size. */
@media (max-width: 640px) {
	body .wcp-page {
		--wcp-mobile-control-fs: 12.5px;
		--wcp-mobile-control-h: 32px;
	}

	body .wcp-glass .wcp-calc-inner {
		row-gap: 10px;
	}

	body .wcp-glass .wcp-calc-item {
		gap: 6px;
	}

	body .wcp-glass .wcp-calc-item--dest,
	body .wcp-glass .wcp-calc-item--groove {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 6px;
	}

	body .wcp-glass .wcp-calc-item--area,
	body .wcp-glass .wcp-calc-item--team,
	body .wcp-glass .wcp-calc-item--wage,
	body .wcp-glass .wcp-calc-item--cement {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
	}

	body .wcp-glass .wcp-calc-label,
	body .wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		gap: 2px;
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1.25;
	}

	body .wcp-glass .wcp-calc-label i,
	body .wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label i {
		font-size: 13px;
	}

	body .wcp-glass .wcp-calc-item--dest .wcp-calc-label,
	body .wcp-glass .wcp-calc-item--groove .wcp-calc-label {
		width: 100%;
		justify-content: flex-start;
		justify-self: start;
		text-align: left;
	}

	body .wcp-glass .wcp-calc-item--area .wcp-calc-label,
	body .wcp-glass .wcp-calc-item--wage .wcp-calc-label {
		flex: 0 0 70px;
		width: 70px;
	}

	body .wcp-glass .wcp-calc-area-wrap {
		gap: 4px;
		font-size: 11px;
		line-height: 1.2;
	}

	body .wcp-glass input:is(
		#wcp-area,
		#wcp-team,
		#wcp-wage,
		#wcp-cement-price,
		#wcp-destination
	) {
		height: var(--wcp-mobile-control-h);
		min-height: var(--wcp-mobile-control-h);
		padding: 5px 8px !important;
		border-radius: 8px;
		font-size: var(--wcp-mobile-control-fs) !important;
		font-weight: 600;
		line-height: 15px !important;
		font-variant-numeric: tabular-nums;
	}

	body .wcp-glass input[type="number"] {
		-moz-appearance: textfield;
	}

	body .wcp-glass input[type="number"]::-webkit-inner-spin-button,
	body .wcp-glass input[type="number"]::-webkit-outer-spin-button {
		margin: 0;
		-webkit-appearance: none;
	}

	body .wcp-glass .wcp-calc-item--area .wcp-calc-area-wrap input {
		width: 58px;
	}

	body .wcp-glass .wcp-calc-item--team .wcp-calc-area-wrap input {
		width: 42px;
	}

	body .wcp-glass .wcp-calc-item--wage .wcp-calc-area-wrap input,
	body .wcp-glass .wcp-calc-item--cement .wcp-calc-area-wrap input {
		width: 54px;
	}

	body .wcp-glass .wcp-calc-item--dest .wcp-dest-wrap {
		width: 100%;
		max-width: none;
		justify-self: start;
	}

	body .wcp-glass .wcp-dest-wrap input[type="search"] {
		width: 100%;
		max-width: none;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		width: 100%;
		max-width: none;
		height: var(--wcp-mobile-control-h);
		justify-self: start;
		border-color: rgba(142, 37, 33, .42);
		border-radius: 8px;
		padding: 2px;
	}

	body .wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
		height: 26px;
		min-height: 26px;
		padding: 3px 2px;
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1;
		border-radius: 6px;
	}

	body .wcp-prod-img-wrap {
		width: 58px;
		height: 58px;
		margin-bottom: 7px;
		border-radius: 12px;
	}

	body .wcp-prod-name {
		margin-bottom: 4px;
		font-size: 13px;
		line-height: 1.35;
	}

	body .wcp-prod-price-group {
		margin-top: 4px;
		margin-bottom: 3px;
	}

	body .wcp-prod-price-wrap {
		gap: 4px;
		font-size: 11.5px;
		line-height: 1.2;
	}

	body input.wcp-prod-price {
		width: 54px;
		height: 32px;
		min-height: 32px;
		padding: 5px 7px !important;
		border-radius: 8px;
		font-size: var(--wcp-mobile-control-fs) !important;
		font-weight: 600;
		line-height: 15px !important;
		font-variant-numeric: tabular-nums;
	}

	body .wcp-swap-wrap {
		margin-top: 7px;
	}

	body .wcp-swap-btn {
		min-height: 32px;
		padding: 6px 13px;
		border-radius: 16px;
		gap: 6px;
		font-size: var(--wcp-mobile-control-fs);
		font-weight: 600;
		line-height: 1.2;
	}

	body .wcp-swap-btn i {
		font-size: 14px;
	}

	body.page-template-page-compare .wzd-fab {
		height: 56px;
	}

	body.page-template-page-compare .wzd-fab-stack {
		position: absolute;
		right: 0;
		bottom: 64px;
	}
}