/* ============================================================================
   WATZADU 2026 — Master Stylesheet
   Visual reference: Design new website.pdf (20 pages)
   Container 1280px · Burgundy footer · White header · Red CTA · Premium card system
   ============================================================================ */

:root {
	/* ===== CI Brand Palette — Brandbook v10 (Primary 60% · Neutral 25% · Accent 15%) ===== */
	--c-brick:        #8E2521;   /* CI Brick Red — Primary (buttons, nav, headings) */
	--c-brick-deep:   #6E1C19;   /* Brick Red darker — hover/active depth */
	--c-burgundy:     #4A1815;   /* Burgundy — footer + dark sections */
	--c-burgundy-dk:  #3A0F0E;   /* Burgundy deeper */
	--c-clay:         #A63B2C;   /* CI Deep Clay — secondary depth */
	--c-terra:        #C86B44;   /* CI Terracotta — accent */
	--c-orange:       #D98949;   /* CI Warm Orange — accent (15%) */
	--c-orange-dk:    #C0723A;   /* Warm Orange darker */
	--c-line-green:   #06C755;   /* LINE brand (external) */

	--c-ink:          #2E2E31;   /* CI Charcoal — body text */
	--c-ink-soft:     #5C5C61;   /* Secondary text */
	--c-ink-mute:     #9C9CA0;   /* Tertiary text */

	--c-bg:           #FFFFFF;   /* Pure white */
	--c-bg-soft:      #F8F5EF;   /* CI Ivory White — Neutral 25% */
	--c-bg-warm:      #E7D9C8;   /* CI Stone Beige */
	--c-bg-cream:     #FDF8EB;   /* Cream highlight */
	--c-bg-pink:      #F3E0DD;   /* Soft brick tint */

	--c-line:         #E7D9C8;   /* Stone Beige divider */
	--c-line-soft:    #F0E6D9;   /* Very soft divider */
	--c-line-strong:  #B7ACA3;   /* CI Warm Gray strong */
	--c-gray:         #B7ACA3;   /* CI Warm Gray neutral */

	/* ===== Layout Tokens ===== */
	--container:      1280px;
	--container-wide: 1440px;
	--pad-x:          clamp(16px, 4vw, 32px);
	--pad-section:    clamp(48px, 7vw, 80px);
	--nav-h:          84px;
	--utility-h:      36px;

	/* ===== Radius (Premium feel) ===== */
	--r-sm:  6px;
	--r-md:  10px;
	--r-lg:  14px;
	--r-xl:  18px;
	--r-2xl: 24px;
	--r-pill: 999px;

	/* ===== Shadow (subtle premium) ===== */
	--sh-flat:  0 1px 2px rgba(60, 30, 25, 0.04);
	--sh-soft:  0 2px 8px rgba(60, 30, 25, 0.06), 0 1px 2px rgba(60, 30, 25, 0.04);
	--sh-card:  0 4px 18px rgba(60, 30, 25, 0.08), 0 2px 6px rgba(60, 30, 25, 0.05);
	--sh-pop:   0 12px 36px rgba(60, 30, 25, 0.14), 0 4px 12px rgba(60, 30, 25, 0.08);
	--sh-float: 0 24px 60px rgba(60, 30, 25, 0.18);
	--sh-cta-red: 0 6px 20px rgba(142, 37, 33, 0.32);

	/* ===== CI Typography — Brandbook v10 ===== */
	/* H1/H2/H3 → Montserrat (EN) + Noto Sans Thai (TH glyphs fallback) */
	--font-display: "Montserrat", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Body / general → Noto Sans Thai */
	--font-thai:    "Noto Sans Thai", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* UI / numbers / labels → Inter */
	--font-en:      "Inter", "Noto Sans Thai", system-ui, sans-serif;

	--fs-display: clamp(34px, 4.5vw, 52px);
	--fs-h1:      clamp(28px, 3.6vw, 42px);
	--fs-h2:      clamp(22px, 2.6vw, 30px);
	--fs-h3:      clamp(18px, 2vw, 22px);
	--fs-h4:      17px;
	--fs-lead:    clamp(15px, 1.4vw, 17px);
	--fs-body:    15px;
	--fs-sm:      13.5px;
	--fs-xs:      12px;
	--fs-micro:   11px;

	/* ===== Motion ===== */
	--ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   1. RESET / BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-thai);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--c-ink);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-brick); text-decoration: none; transition: color 0.18s var(--ease-smooth); }
a:hover { color: var(--c-brick-deep); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.2; color: var(--c-ink); font-weight: 700; letter-spacing: -0.015em; font-family: var(--font-display); }
h1 { line-height: 1.15; }
h2 { line-height: 1.25; }
h3 { line-height: 1.30; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
:focus-visible { outline: 2.5px solid var(--c-orange); outline-offset: 2px; border-radius: 4px; }
input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================================
   2. CONTAINER / LAYOUT
   ============================================================================ */
.wzd-container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wzd-container--wide { max-width: var(--container-wide); }
.wzd-section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.wzd-section--ivory  { background: var(--c-bg-soft); }
.wzd-section--warm   { background: var(--c-bg-warm); }
.wzd-section--cream  { background: var(--c-bg-cream); }
.wzd-section--white  { background: var(--c-bg); }

/* ============================================================================
   3. BUTTONS (Premium CTA)
   ============================================================================ */
.wzd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px;
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s var(--ease-spring), background 0.18s var(--ease-smooth), box-shadow 0.18s, border-color 0.18s;
	white-space: nowrap;
	min-height: 44px;
}
.wzd-btn--lg { padding: 15px 28px; font-size: 15px; min-height: 50px; }
.wzd-btn--sm { padding: 9px 16px; font-size: 13px; min-height: 38px; }
.wzd-btn:hover { transform: translateY(-1px); }
.wzd-btn:active { transform: translateY(0) scale(0.98); }

.wzd-btn--primary  { background: var(--c-brick); color: #fff !important; box-shadow: var(--sh-cta-red); }
.wzd-btn--primary:hover { background: var(--c-brick-deep); color: #fff !important; box-shadow: 0 8px 26px rgba(142, 37, 33, 0.4); }

.wzd-btn--outline  { background: transparent; color: var(--c-brick); border-color: var(--c-brick); }
.wzd-btn--outline:hover { background: var(--c-brick); color: #fff !important; }

.wzd-btn--orange   { background: var(--c-orange); color: #fff !important; box-shadow: 0 6px 20px rgba(224, 122, 58, 0.32); }
.wzd-btn--orange:hover { background: var(--c-orange-dk); color: #fff !important; }

.wzd-btn--ghost    { background: #fff; color: var(--c-ink); border-color: var(--c-line-strong); }
.wzd-btn--ghost:hover { border-color: var(--c-brick); color: var(--c-brick); }

.wzd-btn--line     { background: var(--c-line-green); color: #fff !important; }
.wzd-btn--line:hover { background: #05A848; color: #fff !important; }

.wzd-btn--dark     { background: var(--c-burgundy); color: #fff !important; }
.wzd-btn--dark:hover { background: var(--c-burgundy-dk); color: #fff !important; }

.wzd-btn--white    { background: #fff; color: var(--c-brick) !important; }
.wzd-btn--white:hover { background: var(--c-bg-soft); color: var(--c-brick-deep) !important; }

/* ============================================================================
   4. HEADER (white sticky, WDC branding) — PDF p.11-20
   ============================================================================ */
.wzd-nav {
	position: -webkit-sticky;
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--c-line-soft);
	transition: box-shadow 0.3s var(--ease-smooth);
}
.wzd-nav-scrolled { box-shadow: 0 2px 14px rgba(60, 30, 25, 0.07); }
/* WordPress admin bar compensation */
.admin-bar .wzd-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .wzd-nav { top: 46px; } }
.wzd-nav-inner {
	display: flex; align-items: center; gap: 28px;
	min-height: var(--nav-h);
	padding-top: 12px; padding-bottom: 12px;
}
.wzd-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--c-ink); }
.wzd-brand-text { font-weight: 800; line-height: 1; color: var(--c-ink); font-family: var(--font-en); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.wzd-brand-watzadu { font-size: 22px; letter-spacing: 0.04em; color: var(--c-ink); font-weight: 800; }
.wzd-brand-dot { font-size: 18px; color: var(--c-brick); font-weight: 700; }
.wzd-brand-wdc { font-size: 22px; letter-spacing: 0.04em; color: var(--c-ink); font-weight: 800; }
.wzd-brand-text small {
	display: block;
	width: 100%;
	font-size: 11px;
	color: var(--c-ink-soft);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-top: 4px;
	font-family: var(--font-thai);
}
.wzd-nav-menu { flex: 1; min-width: 0; }
.wzd-nav-items {
	display: flex; gap: 22px; list-style: none; margin: 0; padding: 0;
	justify-content: center; flex-wrap: nowrap;
	font-size: 14px; font-weight: 500;
}
.wzd-nav-items > li { position: relative; }
.wzd-nav-items > li > a {
	color: var(--c-ink);
	display: inline-block;
	padding: 8px 2px;
	position: relative;
	letter-spacing: 0.005em;
	transition: color 0.15s;
}
.wzd-nav-items > li > a:hover { color: var(--c-brick); }
.wzd-nav-items > li > a.on { color: var(--c-brick); font-weight: 600; }
.wzd-nav-items > li > a.on::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
	height: 3px; background: var(--c-brick); border-radius: 2px;
}
.wzd-arrow { font-size: 10px; opacity: 0.65; margin-left: 3px; }
.wzd-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wzd-nav-icon {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: transparent;
	color: var(--c-ink);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 19px;
	transition: background 0.15s, color 0.15s;
	position: relative;
}
.wzd-nav-icon:hover { background: var(--c-bg-soft); color: var(--c-brick); }
.wzd-nav-icon-badge {
	position: absolute;
	top: 4px; right: 4px;
	min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--c-brick); color: #fff;
	border-radius: 9px;
	font-size: 10px; font-weight: 700; font-family: var(--font-en);
	display: inline-flex; align-items: center; justify-content: center;
	letter-spacing: 0;
}

/* Hamburger toggle */
.wzd-menu-toggle-input { display: none; }
.wzd-menu-toggle {
	display: none; width: 42px; height: 42px; border-radius: var(--r-md);
	background: var(--c-bg-soft); cursor: pointer;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	transition: background 0.15s;
}
.wzd-menu-toggle:hover { background: var(--c-bg-warm); }
.wzd-menu-toggle span { width: 20px; height: 2.5px; background: var(--c-ink); border-radius: 2px; transition: transform 0.28s var(--ease-smooth), opacity 0.2s; }
.wzd-menu-toggle-input:checked ~ .wzd-nav .wzd-menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.wzd-menu-toggle-input:checked ~ .wzd-nav .wzd-menu-toggle span:nth-child(2) { opacity: 0; }
.wzd-menu-toggle-input:checked ~ .wzd-nav .wzd-menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer */
.wzd-menu-overlay {
	position: fixed; inset: 0; background: rgba(42, 31, 27, 0.5);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	z-index: 60; opacity: 0; visibility: hidden;
	transition: opacity 0.3s var(--ease-smooth), visibility 0.3s; cursor: pointer;
}
.wzd-drawer {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: min(86vw, 380px); background: #fff;
	z-index: 61; box-shadow: var(--sh-float);
	transform: translateX(100%); transition: transform 0.36s var(--ease-smooth);
	display: flex; flex-direction: column; overflow-y: auto;
}
.wzd-menu-toggle-input:checked ~ .wzd-menu-overlay { opacity: 1; visibility: visible; }
.wzd-menu-toggle-input:checked ~ .wzd-drawer { transform: translateX(0); }
.wzd-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-line); }
.wzd-drawer-close { width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-ink); font-size: 18px; transition: background 0.15s; }
.wzd-drawer-close:hover { background: var(--c-bg-warm); }
.wzd-drawer-nav { padding: 14px 0; flex: 1; }
.wzd-drawer-items { list-style: none; padding: 0; margin: 0; }
.wzd-drawer-items > li > a {
	display: flex; align-items: center; padding: 15px 22px;
	font-size: 15px; font-weight: 500; color: var(--c-ink);
	border-bottom: 1px solid var(--c-line-soft);
}
.wzd-drawer-items > li > a:hover { background: var(--c-bg-soft); color: var(--c-brick); }
.wzd-drawer-items > li > a.on { color: var(--c-brick); background: rgba(142, 37, 33, 0.06); }
.wzd-drawer-cta { padding: 18px 22px; display: grid; gap: 8px; border-top: 1px solid var(--c-line); }

/* ============================================================================
   5. HERO — Two variants:
      (a) .wzd-hero-split = HOMEPAGE per PDF p.1 (cream bg + product collage right)
      (b) .wzd-hero / .wzd-phero = inner pages with villa bg
   ============================================================================ */

/* ----- (a) SPLIT HERO (Homepage PDF p.1) ----- */
.wzd-hero-split {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, #F5EDDE 0%, #FAF1E1 55%, #F0E5D0 100%);
	min-height: 680px;
}
.wzd-hero-split-grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0;
	min-height: 680px; align-items: center;
}
.wzd-hero-split-left {
	padding-top: clamp(48px, 7vw, 72px);
	padding-bottom: clamp(48px, 7vw, 72px);
	padding-right: 32px;
	z-index: 3;
	position: relative;
}
.wzd-hero-split-title {
	font-size: clamp(44px, 5.6vw, 70px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--c-brick);
	margin: 0 0 14px;
}
.wzd-hero-split-title em {
	font-style: normal; color: var(--c-brick);
	display: block; font-weight: 800;
}
.wzd-hero-split-title-sub {
	display: block;
	font-size: 0.64em;
	font-weight: 700;
	color: var(--c-ink);
	margin-top: 16px;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.wzd-hero-split-sub {
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.75;
	color: var(--c-ink-soft);
	max-width: 480px;
	margin: 22px 0 32px;
}
.wzd-hero-split-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Product composite — SINGLE TRANSPARENT IMAGE */
.wzd-hero-collage {
	position: relative;
	height: 100%;
	min-height: 600px;
	display: flex; align-items: center; justify-content: center;
	overflow: visible;
}
.wzd-hero-collage img {
	width: 115%;
	max-width: none;
	margin-right: -15%;
	margin-bottom: -20px;
	height: auto;
	display: block;
}

/* ----- (b) INNER-PAGE HERO (villa background) ----- */
.wzd-hero {
	position: relative; overflow: hidden;
	background: var(--c-bg-warm);
	min-height: 460px;
}
.wzd-hero-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center right;
}
.wzd-hero-bg::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(245, 237, 222, 0.94) 0%, rgba(245, 237, 222, 0.75) 35%, rgba(245, 237, 222, 0.15) 60%, transparent 80%);
}
.wzd-hero-inner {
	position: relative; z-index: 2;
	padding-top: clamp(40px, 7vw, 80px);
	padding-bottom: clamp(80px, 10vw, 110px);
	max-width: 600px;
}
.wzd-bread {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	margin-bottom: 22px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.wzd-bread a { color: var(--c-ink-soft); }
.wzd-bread a:hover { color: var(--c-brick); }
.wzd-bread .sep { color: var(--c-ink-mute); }
.wzd-bread .current { color: var(--c-brick); font-weight: 500; }

.wzd-hero-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-brick);
	font-weight: 700;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: rgba(142, 37, 33, 0.08);
}
.wzd-hero-title {
	font-size: var(--fs-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--c-brick);
	margin: 0 0 16px;
}
.wzd-hero-title-ink { color: var(--c-ink); }
.wzd-hero-sub {
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--c-ink-soft);
	max-width: 520px;
	margin: 0 0 26px;
}
.wzd-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Trust Strip Floating Card (under hero) */
.wzd-trust-strip {
	position: relative; z-index: 5;
	margin: -52px auto 0;
	max-width: calc(var(--container) - var(--pad-x) * 2);
	background: #fff;
	border-radius: var(--r-xl);
	padding: 22px 28px;
	box-shadow: var(--sh-card);
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.wzd-trust-strip > * { padding: 6px 14px; border-right: 1px solid var(--c-line-soft); display: flex; align-items: center; gap: 14px; }
.wzd-trust-strip > *:last-child { border-right: none; }
.wzd-trust-ic {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: rgba(142, 37, 33, 0.08);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-brick); font-size: 22px;
	flex-shrink: 0;
}
.wzd-trust-t { font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.wzd-trust-d { font-size: 12px; color: var(--c-ink-soft); margin-top: 2px; line-height: 1.4; }
.wzd-trust-strip--5col { grid-template-columns: repeat(5, 1fr); }
.wzd-trust-strip--inline { background: #fff; padding: 18px 24px; gap: 6px; }
.wzd-trust-strip--inline > * { padding: 4px 12px; }
.wzd-trust-strip--inline .wzd-trust-ic { width: 36px; height: 36px; font-size: 18px; }

/* Page hero (smaller, for inner pages) */
.wzd-phero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--c-bg-warm) 0%, var(--c-bg-soft) 100%);
	padding: clamp(40px, 5vw, 56px) 0 clamp(70px, 9vw, 100px);
}
.wzd-phero-bg {
	position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
	background-size: cover; background-position: center; opacity: 0.96;
}
.wzd-phero-bg::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--c-bg-warm) 0%, transparent 25%);
}
.wzd-phero-inner { position: relative; z-index: 2; max-width: 560px; }

/* ============================================================================
   6. SECTION HEADER
   ============================================================================ */
.wzd-section-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 26px; gap: 16px; flex-wrap: wrap;
}
.wzd-section-title {
	font-size: var(--fs-h2); font-weight: 700; color: var(--c-ink); margin: 0;
}
.wzd-section-title em { font-style: normal; color: var(--c-brick); }
.wzd-section-link {
	font-size: var(--fs-sm); color: var(--c-brick); font-weight: 600;
	display: inline-flex; align-items: center; gap: 6px;
	transition: gap 0.2s var(--ease-spring);
}
.wzd-section-link:hover { color: var(--c-brick-deep); gap: 10px; }

/* ============================================================================
   7. CARD SYSTEM
   ============================================================================ */
.wzd-card {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform 0.28s var(--ease-spring), box-shadow 0.28s, border-color 0.2s;
	box-shadow: var(--sh-flat);
}
.wzd-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--c-line); }

/* Category Card — Homepage (large image cards, 5-col × 2-row grid for 10 categories) */
.wzd-catmini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wzd-catmini {
	background: #fff; border-radius: var(--r-lg);
	overflow: hidden;
	display: flex; flex-direction: column;
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--sh-soft);
	transition: transform 0.22s var(--ease-spring), box-shadow 0.22s;
	color: var(--c-ink);
	text-decoration: none;
}
.wzd-catmini:hover { transform: translateY(-3px); box-shadow: var(--sh-card); color: var(--c-brick); }
.wzd-catmini-img { width: 100%; aspect-ratio: 4/3; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--c-bg-warm); }
.wzd-catmini-body { padding: 14px 16px 16px; display: flex; flex-direction: column; }
.wzd-catmini-name { font-size: 14px; font-weight: 700; color: var(--c-ink); line-height: 1.3; margin: 0 0 3px; }
.wzd-catmini-desc { font-size: 11.5px; color: var(--c-ink-soft); }
.wzd-catmini-cta { font-size: 12px; color: var(--c-brick); margin-top: 10px; display: flex; align-items: center; gap: 3px; font-weight: 600; }

/* Product Card (PDF p.1, p.2, p.12) */
.wzd-prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.wzd-prod-grid--6 { grid-template-columns: repeat(6, 1fr); }
.wzd-prod-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wzd-prod-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wzd-prod {
	background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--sh-soft); position: relative;
	transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, border-color 0.2s;
}
.wzd-prod:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--c-brick); }
.wzd-prod-img { aspect-ratio: 4/3; background: #f8f7f6; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10px; }
.wzd-prod-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease-smooth); }
.wzd-prod:hover .wzd-prod-img img { transform: scale(1.04); }
.wzd-prod-badge {
	position: absolute; top: 8px; left: 8px;
	background: var(--c-brick); color: #fff;
	font-size: 10px; font-weight: 600; padding: 3px 8px;
	border-radius: var(--r-sm);
	letter-spacing: 0.02em; z-index: 2;
}
.wzd-prod-badge--orange { background: var(--c-orange); }
.wzd-prod-usage {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	background: rgba(0,0,0,.72); color: #fff;
	font-size: 10.5px; font-weight: 600; padding: 3px 8px;
	border-radius: var(--r-sm); line-height: 1.3;
	pointer-events: none; backdrop-filter: blur(4px);
}
.wzd-prod-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wzd-prod-cat-tag {
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--c-bg-pink); color: var(--c-brick);
	font-size: 11.5px; font-weight: 500;
	padding: 4px 11px; border-radius: var(--r-pill);
	margin-bottom: 8px;
}
.wzd-prod-cat-tag i { font-size: 13px; }
.wzd-prod-name {
	font-size: 13.5px; font-weight: 600; color: var(--c-ink);
	margin: 0; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 0; flex: 1;
}
.wzd-prod-size { font-size: 12.5px; color: var(--c-ink-soft); margin-bottom: 6px; }
.wzd-prod-price { font-size: 18px; font-weight: 700; color: var(--c-brick); margin-bottom: 12px; }
.wzd-prod-price small { font-size: 12px; color: var(--c-ink-soft); font-weight: 400; margin-left: 4px; }
.wzd-prod-actions { display: flex; gap: 6px; }
.wzd-prod-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	padding: 7px 10px; width: 100%;
	border: 1.5px solid var(--c-brick);
	border-radius: var(--r-md);
	color: var(--c-brick); font-size: 12px; font-weight: 600;
	transition: background 0.18s, color 0.18s;
}
.wzd-prod-link:hover { background: var(--c-brick); color: #fff; }
.wzd-prod-cart {
	width: 40px; height: 40px;
	background: var(--c-brick); color: #fff;
	border-radius: var(--r-md);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px; transition: background 0.18s;
}
.wzd-prod-cart:hover { background: var(--c-brick-deep); color: #fff; }

/* Article Card (PDF p.1, p.19) */
.wzd-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px)  { .wzd-art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .wzd-art-grid { grid-template-columns: 1fr; } }
.wzd-art {
	background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--sh-soft);
	transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.wzd-art:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.wzd-art-img { aspect-ratio: 4/3; background: var(--c-bg-warm); position: relative; overflow: hidden; background-size: cover; background-position: center; }
/* Dim burned-in infographic text in thumbnail images */
.wzd-art-img::before {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(20,8,6,0.38) 0%,
		rgba(20,8,6,0.08) 35%,
		rgba(20,8,6,0.04) 60%,
		rgba(20,8,6,0.28) 100%
	);
}
.wzd-art-tag {
	position: absolute; left: 12px; bottom: 12px; z-index: 2;
	background: rgba(255,255,255,0.95); color: var(--c-brick);
	font-size: 11px; font-weight: 600;
	padding: 5px 11px; border-radius: var(--r-sm);
	letter-spacing: 0.02em;
}
.wzd-art-body { padding: 16px 18px 18px; }
.wzd-art-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: var(--c-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.wzd-art-excerpt { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.55; margin: 0 0 12px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wzd-art-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--c-ink-mute); padding-top: 12px; border-top: 1px solid var(--c-line-soft); }
.wzd-art-meta i { font-size: 13px; }

/* Info Card (generic icon card) */
.wzd-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.wzd-info {
	background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
	padding: 26px;
	transition: transform 0.22s var(--ease-spring), box-shadow 0.22s;
	box-shadow: var(--sh-soft);
}
.wzd-info:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.wzd-info-ic {
	width: 52px; height: 52px; border-radius: 14px;
	background: rgba(142, 37, 33, 0.08);
	color: var(--c-brick); font-size: 25px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
}
.wzd-info-t { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--c-ink); }
.wzd-info-d { font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.7; margin: 0; }

/* Project Card (PDF p.15) */
.wzd-proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.wzd-proj-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wzd-proj {
	background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
	overflow: hidden; box-shadow: var(--sh-soft);
	transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.wzd-proj:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.wzd-proj-img { aspect-ratio: 4/3; background: var(--c-bg-warm); position: relative; background-size: cover; background-position: center; }
.wzd-proj-body { padding: 16px 18px 18px; }
.wzd-proj-cat {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; font-weight: 600; color: var(--c-brick);
	margin-bottom: 6px;
}
.wzd-proj-name { font-size: 16px; font-weight: 700; color: var(--c-ink); margin: 0 0 6px; line-height: 1.3; }
.wzd-proj-desc { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.6; margin: 0 0 14px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================================
   8. QUOTE FORM (Sticky right sidebar — PDF p.2, p.3, p.4, p.14, p.20)
   ============================================================================ */
.wzd-qbox {
	background: linear-gradient(160deg, var(--c-brick) 0%, var(--c-burgundy) 100%);
	color: #fff;
	border-radius: var(--r-xl);
	padding: 24px;
	box-shadow: var(--sh-card);
	position: relative; overflow: hidden;
}
.wzd-qbox::before {
	content: ''; position: absolute; bottom: -60px; right: -60px;
	width: 180px; height: 180px; border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 137, 73, 0.15), transparent 70%);
	pointer-events: none;
}
.wzd-qbox-t {
	font-size: 18px; font-weight: 800;
	color: #fff !important;
	font-family: var(--font-thai);
	margin: 0 0 6px; position: relative;
	line-height: 1.3;
	letter-spacing: 0.005em;
}
.wzd-qbox-s {
	font-size: 13px; color: rgba(255,255,255,0.92);
	line-height: 1.55; margin: 0 0 18px; position: relative;
	font-weight: 400;
}
.wzd-qbox-features { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; position: relative; }
.wzd-qbox-features li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.wzd-qbox-features li i { color: var(--c-orange); font-size: 14px; }
.wzd-qbox-form { display: grid; gap: 8px; position: relative; }
.wzd-qbox-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wzd-qbox-form input, .wzd-qbox-form select, .wzd-qbox-form textarea {
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--r-md);
	padding: 12px 14px;
	font-size: 13px; color: #fff;
	font-family: inherit; width: 100%;
	transition: background 0.18s, border-color 0.18s;
}
.wzd-qbox-form textarea { resize: vertical; min-height: 84px; grid-column: 1 / -1; }
.wzd-qbox-form input::placeholder, .wzd-qbox-form textarea::placeholder { color: rgba(255, 255, 255, 0.7); }
.wzd-qbox-form select option { color: var(--c-ink); }
.wzd-qbox-form input:focus, .wzd-qbox-form select:focus, .wzd-qbox-form textarea:focus {
	outline: none; background: rgba(255,255,255,0.2); border-color: var(--c-orange);
}
.wzd-qbox-btn {
	background: #fff; color: var(--c-brick); border: none;
	padding: 14px; font-size: 14px; font-weight: 700;
	border-radius: var(--r-md); margin-top: 6px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; transition: transform 0.2s var(--ease-spring), background 0.18s;
}
.wzd-qbox-btn:hover { background: var(--c-bg-soft); transform: translateY(-1px); }

/* ----- Sidebar flat block (สินค้าแนะนำ / บทความที่เกี่ยวข้อง) — no border, no shadow ----- */
.wzd-side-block {
	padding: 8px 4px 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--c-line-soft);
}
.wzd-side-block:last-child { border-bottom: none; margin-bottom: 0; }
.wzd-side-block-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 12px;
}
.wzd-side-block-t {
	font-size: 14.5px; font-weight: 700;
	color: var(--c-ink); margin: 0;
	font-family: var(--font-thai);
}
.wzd-side-block-link {
	font-size: 11.5px; font-weight: 600;
	color: var(--c-brick);
}
.wzd-side-block-list { display: grid; gap: 14px; }
.wzd-side-item {
	display: flex; gap: 12px;
	transition: opacity 0.15s;
}
.wzd-side-item:hover { opacity: 0.75; }
.wzd-side-item-img {
	width: 96px;
	aspect-ratio: 4/3;
	border-radius: var(--r-md);
	background-color: var(--c-bg-warm);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.wzd-side-item-body { flex: 1; min-width: 0; }
.wzd-side-item-t {
	font-size: 13px; font-weight: 600;
	color: var(--c-ink); line-height: 1.4;
	margin-bottom: 4px;
}
.wzd-side-item-t--clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wzd-side-item-link {
	font-size: 11.5px; color: var(--c-brick);
	font-weight: 600;
}
.wzd-side-item-meta {
	font-size: 11px;
	color: var(--c-ink-mute);
	font-family: var(--font-en);
}

/* ============================================================================
   9. PROCESS STEPS (Numbered — PDF p.1, p.5, p.10, p.15, p.17)
   ============================================================================ */
.wzd-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	position: relative;
}
.wzd-step { text-align: center; position: relative; padding: 18px 12px; }
.wzd-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--c-brick); color: #fff;
	font-weight: 700; font-size: 16px; font-family: var(--font-en);
	margin-bottom: 14px;
	box-shadow: 0 4px 12px rgba(142, 37, 33, 0.25);
}
.wzd-step-ic {
	width: 64px; height: 64px;
	border-radius: 50%; background: var(--c-bg-pink);
	color: var(--c-brick); font-size: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0 auto 12px; transition: transform 0.2s var(--ease-spring);
}
.wzd-step:hover .wzd-step-ic { transform: scale(1.05); }
.wzd-step-t { font-size: 14.5px; font-weight: 700; color: var(--c-ink); margin: 0 0 4px; }
.wzd-step-d { font-size: 12px; color: var(--c-ink-soft); line-height: 1.5; margin: 0; }

/* Process with connecting arrows */
.wzd-steps-flow {
	display: flex; align-items: flex-start; gap: 0;
	overflow-x: auto;
	padding: 8px 0;
}
.wzd-steps-flow > .wzd-step { flex: 1; min-width: 140px; }
.wzd-steps-flow > .wzd-step:not(:last-child)::after {
	content: ''; position: absolute; top: 36px; right: -8px;
	width: 16px; height: 2px; background: var(--c-brick); opacity: 0.5;
}

/* ============================================================================
   10. BOTTOM CTA BAR
   ============================================================================ */
.wzd-cta-bar {
	background: linear-gradient(135deg, var(--c-brick) 0%, var(--c-brick-deep) 60%, var(--c-burgundy) 100%);
	color: #fff;
	border-radius: var(--r-2xl);
	padding: 32px 36px;
	display: flex; justify-content: space-between; align-items: center;
	gap: 24px; flex-wrap: wrap;
	box-shadow: var(--sh-pop);
	position: relative; overflow: hidden;
}
.wzd-cta-bar::after {
	content: ''; position: absolute; top: -80px; right: -80px;
	width: 280px; height: 280px; border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 122, 58, 0.22), transparent 70%);
}
.wzd-cta-bar-t { font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; color: #fff; margin: 0 0 4px; position: relative; }
.wzd-cta-bar-s { font-size: 14px; opacity: 0.9; margin: 0; position: relative; }
.wzd-cta-bar-actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; flex-wrap: wrap; }

/* Light bottom CTA card (cream bg, PDF p.12, p.13, p.17) */
.wzd-cta-light {
	background: var(--c-bg-cream);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	padding: 26px 32px;
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.wzd-cta-light-ic {
	width: 56px; height: 56px;
	border-radius: 50%; background: rgba(142, 37, 33, 0.08);
	color: var(--c-brick); font-size: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.wzd-cta-light-text { flex: 1; min-width: 220px; }
.wzd-cta-light-t { font-size: 17px; font-weight: 700; color: var(--c-ink); margin: 0 0 4px; }
.wzd-cta-light-s { font-size: 13px; color: var(--c-ink-soft); margin: 0; }
.wzd-cta-light-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================================
   11. COMPARISON TABLE
   ============================================================================ */
.wzd-table {
	width: 100%;
	border-collapse: separate; border-spacing: 0;
	background: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-soft);
	border: 1px solid var(--c-line-soft);
	font-size: 13.5px;
}
.wzd-table th, .wzd-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--c-line-soft); }
.wzd-table th { background: var(--c-bg-pink); color: var(--c-brick-deep); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.wzd-table tr:last-child td { border-bottom: none; }
.wzd-table tbody tr:hover { background: var(--c-bg-soft); }
.wzd-table-stars { color: var(--c-orange); letter-spacing: 2px; }
.wzd-table-stars .off { opacity: 0.2; }

/* ============================================================================
   12. FAQ ACCORDION
   ============================================================================ */
.wzd-faq { display: grid; gap: 10px; }
.wzd-faq details {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color 0.2s;
}
.wzd-faq details[open] { border-color: var(--c-brick); }
.wzd-faq summary {
	padding: 16px 20px;
	font-size: 14px; font-weight: 600; color: var(--c-ink);
	cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.wzd-faq summary::-webkit-details-marker { display: none; }
.wzd-faq summary::after {
	content: '+'; font-size: 22px; color: var(--c-brick); font-weight: 400;
	transition: transform 0.2s;
}
.wzd-faq details[open] summary::after { transform: rotate(45deg); }
.wzd-faq details > div, .wzd-faq details > p {
	padding: 0 20px 18px; font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.75;
}

/* ============================================================================
   13. FILTER SIDEBAR (PDF p.2, p.12)
   ============================================================================ */
.wzd-filter {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: 22px;
	box-shadow: var(--sh-soft);
}
.wzd-filter-h { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-soft); }
.wzd-filter-group { margin-bottom: 18px; }
.wzd-filter-group-h {
	font-size: 13px; font-weight: 600; color: var(--c-ink); margin: 0 0 10px;
	display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.wzd-filter-group-h::after { content: '⌃'; font-size: 16px; color: var(--c-ink-mute); }
.wzd-filter-options { display: grid; gap: 8px; font-size: 12.5px; }
.wzd-filter-options label { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.wzd-filter-options input { accent-color: var(--c-brick); }
.wzd-filter-options .count { color: var(--c-ink-mute); font-size: 11.5px; }
.wzd-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); }

/* Category tabs */
.wzd-cat-tabs {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin-bottom: 24px;
}
.wzd-cat-tab {
	padding: 9px 18px; border-radius: var(--r-pill);
	background: #fff; border: 1px solid var(--c-line);
	font-size: 13px; font-weight: 500; color: var(--c-ink);
	display: inline-flex; align-items: center; gap: 6px;
	transition: all 0.18s;
	cursor: pointer;
}
.wzd-cat-tab:hover { border-color: var(--c-brick); color: var(--c-brick); }
.wzd-cat-tab.on { background: var(--c-brick); color: #fff; border-color: var(--c-brick); }

/* ============================================================================
   14. PILLARS BAND (5 message pillars)
   ============================================================================ */
.wzd-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.wzd-pillar {
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg); padding: 22px 18px;
	text-align: center;
	transition: transform 0.22s var(--ease-spring), box-shadow 0.22s;
}
.wzd-pillar:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.wzd-pillar-ic {
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--c-bg-pink); color: var(--c-brick);
	font-size: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 12px;
}
.wzd-pillar-num { font-size: 10px; color: var(--c-ink-mute); font-weight: 700; letter-spacing: 0.16em; font-family: var(--font-en); margin-bottom: 4px; }
.wzd-pillar-t { font-size: 13.5px; font-weight: 700; color: var(--c-ink); line-height: 1.4; }

/* ============================================================================
   15. STATS METRICS
   ============================================================================ */
.wzd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.wzd-stat { text-align: center; padding: 22px 14px; background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); }
.wzd-stat-ic { color: var(--c-brick); font-size: 28px; margin-bottom: 10px; }
.wzd-stat-num { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--c-brick); margin: 0; line-height: 1; font-family: var(--font-en); letter-spacing: -0.02em; }
.wzd-stat-num small { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-left: 4px; font-family: var(--font-thai); }
.wzd-stat-lbl { font-size: 12.5px; color: var(--c-ink-soft); margin-top: 6px; line-height: 1.4; }

/* ============================================================================
   16. FOOTER (Deep Burgundy) — PDF p.11-20
   ============================================================================ */
.wzd-foot {
	background: var(--c-burgundy);
	color: rgba(255, 255, 255, 0.85);
	padding-top: 56px;
	margin-top: var(--pad-section);
}
.wzd-foot-grid {
	display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
	gap: 36px; padding-bottom: 42px;
}
.wzd-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wzd-foot-brand-t {
	font-weight: 800; font-size: 22px; color: #fff;
	line-height: 1; font-family: var(--font-en);
}
.wzd-foot-brand-t small {
	display: block; font-size: 11.5px; color: rgba(255,255,255,0.7);
	font-weight: 400; margin-top: 4px; font-family: var(--font-thai);
}
.wzd-foot-about { font-size: 13px; line-height: 1.75; opacity: 0.85; margin: 0 0 12px; max-width: 320px; }
.wzd-foot-why-price {
	display: inline-flex; align-items: center; gap: 6px;
	margin-bottom: 18px;
	padding: 7px 16px;
	background: rgba(142,37,33,.08);
	border: 1.5px solid rgba(142,37,33,.30);
	border-radius: 999px;
	font-size: 13px; font-weight: 700;
	color: var(--c-brick,#8E2521);
	text-decoration: none;
	transition: background .18s, border-color .18s, color .18s;
}
.wzd-foot-why-price:hover { background: var(--c-brick,#8E2521) !important; color: #fff !important; border-color: var(--c-brick,#8E2521) !important; }
.wzd-foot-social { display: flex; gap: 10px; }
.wzd-foot-social a {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.85);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 17px;
	transition: background 0.18s, color 0.18s, transform 0.2s var(--ease-spring);
}
.wzd-foot-social a:hover { background: var(--c-orange); color: #fff; transform: translateY(-2px); }
.wzd-foot h4 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 16px; letter-spacing: 0.02em; }
.wzd-foot ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; }
.wzd-foot ul a { color: rgba(255,255,255,0.78); transition: color 0.15s; }
.wzd-foot ul a:hover { color: var(--c-orange); }
.wzd-foot-contact li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; line-height: 1.5; }
.wzd-foot-contact i { color: var(--c-orange); margin-top: 4px; flex-shrink: 0; font-size: 15px; }
.wzd-foot-bottom {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 20px; padding-bottom: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 12px; opacity: 0.7; letter-spacing: 0.01em;
	flex-wrap: wrap; gap: 10px;
}
.wzd-foot-bottom a { color: rgba(255,255,255,0.78); margin-left: 18px; }
.wzd-foot-bottom a:hover { color: var(--c-orange); }

/* ============================================================================
   16b. LANGUAGE SWITCHER (Premium iOS26 style)
   ============================================================================ */
.wzd-lang-switch { position: relative; }
.wzd-lang-trigger {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 10px;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-size: 12.5px; font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.wzd-lang-trigger:hover { background: var(--c-bg-soft); border-color: var(--c-line-strong); }
.wzd-lang-flag { font-size: 16px; line-height: 1; }
.wzd-lang-code { letter-spacing: 0.04em; font-family: var(--font-en); }
.wzd-lang-trigger i { font-size: 13px; opacity: 0.6; transition: transform 0.2s; }
.wzd-lang-menu {
	position: absolute; top: calc(100% + 8px); right: 0;
	min-width: 160px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-card);
	padding: 6px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 0.18s var(--ease-smooth), transform 0.18s, visibility 0.18s;
	z-index: 60;
}
.wzd-lang-switch:hover .wzd-lang-menu,
.wzd-lang-switch:focus-within .wzd-lang-menu,
.wzd-lang-trigger[aria-expanded="true"] + .wzd-lang-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.wzd-lang-switch:hover .wzd-lang-trigger i { transform: rotate(180deg); }
.wzd-lang-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	font-size: 13px; font-weight: 500;
	color: var(--c-ink);
	border-radius: var(--r-sm);
	transition: background 0.15s;
}
.wzd-lang-item:hover { background: var(--c-bg-soft); color: var(--c-brick); }
.wzd-lang-item--on { background: rgba(142, 37, 33, 0.07); color: var(--c-brick); font-weight: 700; }
.wzd-lang-item span:first-child { font-size: 16px; }

@media (max-width: 1024px) { .wzd-lang-switch { display: none; } }

/* ============================================================================
   16c. FLOATING CONTACT DOCK (iOS26 glass — compact, never blocks content)
   ============================================================================ */
.wzd-fab-toggle-input { display: none; }
.wzd-fab {
	position: fixed; right: 18px; bottom: 18px;
	z-index: 45;
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

/* The main "dock" — compact pill, glass effect */
.wzd-fab-main {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	color: var(--c-brick);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	border: 0.5px solid rgba(46, 17, 15, 0.10);
	box-shadow: 0 6px 18px rgba(40, 20, 15, 0.12), 0 2px 6px rgba(40, 20, 15, 0.08);
	cursor: pointer;
	transition: transform 0.22s var(--ease-spring), background 0.2s, box-shadow 0.2s;
	position: relative;
}
.wzd-fab-main:hover {
	background: rgba(255, 255, 255, 0.92);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(40, 20, 15, 0.16), 0 4px 8px rgba(40, 20, 15, 0.10);
}
.wzd-fab-main .wzd-fab-icon-close { display: none; }
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-main .wzd-fab-icon-open { display: none; }
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-main .wzd-fab-icon-close { display: inline; }
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-main {
	background: var(--c-brick);
	color: #fff;
}

/* Expanded stack */
.wzd-fab-stack {
	display: flex; flex-direction: column; gap: 8px;
	opacity: 0; visibility: hidden;
	transform: translateY(8px) scale(0.94);
	transform-origin: bottom right;
	transition: opacity 0.22s var(--ease-smooth), transform 0.22s var(--ease-spring), visibility 0.22s;
	pointer-events: none;
}
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-stack {
	opacity: 1; visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* iOS26 glass item buttons */
.wzd-fab-item {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 0.5px solid rgba(46, 17, 15, 0.10);
	font-size: 19px;
	box-shadow: 0 4px 14px rgba(40, 20, 15, 0.10), 0 1px 4px rgba(40, 20, 15, 0.06);
	position: relative;
	transition: transform 0.18s var(--ease-spring), box-shadow 0.2s, background 0.18s;
}
.wzd-fab-item:hover {
	background: #fff;
	transform: translateX(-2px);
	box-shadow: 0 8px 20px rgba(40, 20, 15, 0.14), 0 2px 6px rgba(40, 20, 15, 0.08);
}

/* Brand-accent colors via subtle icon tint (not big block colors) */
.wzd-fab-line  { color: #06A648; }
.wzd-fab-phone { color: var(--c-ink); }
.wzd-fab-quote { color: var(--c-brick); }
.wzd-fab-line:hover  { color: #058238; }
.wzd-fab-phone:hover { color: var(--c-brick); }
.wzd-fab-quote:hover { color: var(--c-brick-deep); }

/* Tooltip label */
.wzd-fab-item::before {
	content: attr(data-label);
	position: absolute; right: calc(100% + 10px); top: 50%;
	transform: translateY(-50%) translateX(6px);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 0.5px solid rgba(46, 17, 15, 0.10);
	color: var(--c-ink) !important;
	font-size: 12px; font-weight: 600;
	padding: 6px 11px;
	border-radius: var(--r-md);
	white-space: nowrap;
	opacity: 0; visibility: hidden;
	transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
	box-shadow: 0 3px 10px rgba(40, 20, 15, 0.08);
}
.wzd-fab-item:hover::before { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (max-width: 700px) {
	.wzd-fab { display: none; }  /* mobile uses sticky bottom dock instead */
}

/* ============================================================================
   17. STICKY MOBILE BOTTOM DOCK (iOS26 glass — 3 actions)
   ============================================================================ */
.wzd-sticky-mobile {
	display: none;
	position: fixed; bottom: 12px; left: 12px; right: 12px;
	z-index: 40;
	background: rgba(255,255,255,0.85);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border: 0.5px solid rgba(46,17,15,0.08);
	border-radius: 22px;
	padding: 6px; gap: 4px;
	box-shadow: 0 8px 28px rgba(40,20,15,0.12), 0 2px 8px rgba(40,20,15,0.06);
}
.wzd-sticky-mobile a {
	flex: 1; padding: 12px 6px; text-align: center;
	border-radius: 18px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	color: var(--c-ink) !important; font-size: 13.5px; font-weight: 600;
	transition: transform 0.15s var(--ease-spring), background 0.18s;
}
.wzd-sticky-mobile a:active { transform: scale(0.97); }
.wzd-sticky-mobile .wzd-sticky-l { color: #06A648 !important; }
.wzd-sticky-mobile .wzd-sticky-l:active { background: rgba(6,199,85,0.10); }
.wzd-sticky-mobile .wzd-sticky-p { color: var(--c-ink) !important; }
.wzd-sticky-mobile .wzd-sticky-p:active { background: rgba(40,20,15,0.06); }
.wzd-sticky-mobile .wzd-sticky-q { color: #fff !important; background: var(--c-brick); }
.wzd-sticky-mobile .wzd-sticky-q:active { background: var(--c-brick-deep); }

/* ============================================================================
   18. WOOCOMMERCE / PDP DETAIL
   ============================================================================ */
.wzd-pdp { padding-top: 28px; padding-bottom: var(--pad-section); }
/* Mobile-only CTA — shown only on small screens */
.wzd-pdp-mobile-cta {
	display: none;
}
@media (max-width: 980px) {
	.wzd-pdp-mobile-cta {
		display: flex;
		margin-bottom: 16px;
	}
	.wzd-pdp-mobile-cta a {
		width: 100%;
		justify-content: center;
	}
}
.wzd-pdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 430px;
	gap: 28px;
	align-items: start;
}
.wzd-pdp-gallery {
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg); padding: 20px;
	display: flex; flex-direction: column; gap: 14px;
}
.wzd-pdp-mainimg { aspect-ratio: 1; background: var(--c-bg-warm); border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wzd-pdp-mainimg img { width: 100%; height: 100%; object-fit: cover; }
.wzd-pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wzd-pdp-thumb { aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--c-bg-warm); padding: 0; display: block; transition: border-color 0.18s, transform 0.18s var(--ease-spring); }
.wzd-pdp-thumb:hover { border-color: rgba(142, 37, 33,0.4); transform: translateY(-1px); }
.wzd-pdp-thumb.on { border-color: var(--c-brick); }
.wzd-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wzd-pdp-mainimg img { transition: opacity 0.18s; }
.wzd-pdp-info { padding: 4px 0; }
.wzd-pdp-cat-badge { display: inline-block; background: var(--c-brick); color: #fff; padding: 5px 13px; font-size: 12px; font-weight: 600; border-radius: var(--r-sm); margin-bottom: 12px; }
.wzd-pdp-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--c-ink); margin: 0 0 8px; line-height: 1.18; letter-spacing: -0.015em; }
.wzd-pdp-sub { font-size: 14px; color: var(--c-ink-soft); margin: 0 0 18px; line-height: 1.55; }
.wzd-pdp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: 18px; }
.wzd-pdp-feat { display: flex; align-items: flex-start; gap: 10px; }
.wzd-pdp-feat-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--c-bg-pink); color: var(--c-brick); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wzd-pdp-feat-t { font-size: 13px; font-weight: 600; color: var(--c-ink); margin: 0 0 2px; }
.wzd-pdp-feat-d { font-size: 11.5px; color: var(--c-ink-soft); line-height: 1.4; margin: 0; }
.wzd-pdp-block-h { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 20px 0 12px; }
.wzd-pdp-specs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wzd-pdp-spec-card { background: var(--c-bg-soft); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); padding: 14px; display: flex; align-items: center; gap: 10px; }
.wzd-pdp-spec-card-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--c-bg-pink); color: var(--c-brick); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.wzd-pdp-spec-card-lbl { font-size: 11px; color: var(--c-ink-soft); }
.wzd-pdp-spec-card-val { font-size: 13px; font-weight: 700; color: var(--c-ink); }

.wzd-pdp-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wzd-pdp-bullets ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; color: var(--c-ink); line-height: 1.9; }
.wzd-pdp-bullets li { padding-left: 18px; position: relative; }
.wzd-pdp-bullets li::before { content: '•'; position: absolute; left: 0; color: var(--c-brick); font-weight: 700; }

/* Single product bottom cards */
.wzd-pdp-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.wzd-pdp-bottom .wzd-info { padding: 22px; }
.wzd-pdp-bottom h3 { font-size: 15px; }

/* ============================================================================
   18d. PDP v3 — Section blocks (Install / Before-Shipping / Delivery / Inspection / FAQ)
   ============================================================================ */
.wzd-spec-table {
	width: 100%; border-collapse: collapse;
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md); overflow: hidden;
	margin: 0 0 24px; font-size: 14px;
}
.wzd-spec-table th, .wzd-spec-table td {
	padding: 11px 16px; text-align: left;
	border-bottom: 1px solid var(--c-line-soft);
	vertical-align: top;
}
.wzd-spec-table tr:last-child th, .wzd-spec-table tr:last-child td { border-bottom: none; }
.wzd-spec-table th {
	background: var(--c-bg-soft); color: var(--c-ink-soft);
	font-weight: 600; font-size: 13px; width: 30%;
}
.wzd-spec-table td { color: var(--c-ink); font-weight: 500; }

.wzd-pdp-sec { margin-top: 56px; }
.wzd-pdp-sec-h {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700; color: var(--c-ink);
	margin: 0 0 22px; display: flex; align-items: center; gap: 10px;
	letter-spacing: -0.01em;
}
.wzd-pdp-sec-h i {
	width: 38px; height: 38px;
	background: rgba(142, 37, 33,0.10); color: var(--c-brick);
	border-radius: var(--r-md);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px;
}
.wzd-pdp-sec-h-aux {
	font-size: 13.5px; font-weight: 500; color: var(--c-ink-soft);
	letter-spacing: 0; margin-left: 4px;
}

.wzd-pdp-steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wzd-pdp-steps .wzd-step {
	position: relative;
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md); padding: 22px 16px 16px;
	transition: border-color 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.wzd-pdp-steps .wzd-step:hover {
	border-color: var(--c-brick); transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(142, 37, 33, 0.10);
}
.wzd-pdp-steps .wzd-step-n {
	position: absolute;
	top: -11px; left: 16px;
	width: 24px; height: 24px;
	background: var(--c-brick); color: #fff;
	border: 2px solid #fff; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-family: var(--font-en); font-size: 11.5px;
	box-shadow: 0 2px 6px rgba(142, 37, 33, 0.22);
	z-index: 1;
}
.wzd-pdp-steps .wzd-step-ic {
	width: 46px; height: 46px; flex-shrink: 0;
	background: linear-gradient(135deg, rgba(142,37,33,0.08), rgba(217,137,73,0.08));
	color: var(--c-brick);
	border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 22px;
	transition: background 0.22s, color 0.22s, transform 0.22s var(--ease-spring);
}
.wzd-pdp-steps .wzd-step:hover .wzd-step-ic {
	background: var(--c-brick); color: #fff; transform: scale(1.06);
}
.wzd-step-t { font-size: 14.5px; font-weight: 700; margin: 4px 0 4px; color: var(--c-ink); }
.wzd-step-d { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.55; margin: 0; }

.wzd-pdp-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wzd-pdp-mini {
	position: relative;
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md); padding: 24px 20px 22px;
	transition: border-color 0.22s, transform 0.22s var(--ease-spring), box-shadow 0.22s;
	overflow: hidden;
}
.wzd-pdp-mini::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-brick), var(--c-orange, #D98949));
	opacity: 0; transition: opacity 0.22s;
}
.wzd-pdp-mini:hover {
	border-color: var(--c-brick); transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(142, 37, 33, 0.10);
}
.wzd-pdp-mini:hover::before { opacity: 1; }
.wzd-pdp-mini > i {
	font-size: 28px; color: var(--c-brick);
	background: linear-gradient(135deg, rgba(142,37,33,0.10), rgba(217,137,73,0.08));
	width: 52px; height: 52px; border-radius: 13px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
	transition: background 0.22s, color 0.22s, transform 0.22s var(--ease-spring);
}
.wzd-pdp-mini:hover > i { background: var(--c-brick); color: #fff; transform: scale(1.06); }
.wzd-pdp-mini h3, .wzd-pdp-mini h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--c-ink); letter-spacing: -0.01em; }
.wzd-pdp-mini p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.65; margin: 0; }

.wzd-pdp-checklist {
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md); padding: 20px 24px;
	display: grid; gap: 12px;
}
.wzd-pdp-checklist label {
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 14px; color: var(--c-ink); line-height: 1.55;
	cursor: pointer;
}
.wzd-pdp-checklist input[type="checkbox"] {
	width: 18px; height: 18px; margin-top: 2px;
	accent-color: var(--c-brick); flex-shrink: 0;
}

.wzd-pdp-faq { display: grid; gap: 10px; }
.wzd-pdp-faq details {
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	transition: border-color 0.2s;
}
.wzd-pdp-faq details[open] { border-color: var(--c-brick); }
.wzd-pdp-faq summary {
	padding: 16px 20px 16px 20px;
	font-size: 14.5px; font-weight: 600;
	cursor: pointer; color: var(--c-ink);
	list-style: none; position: relative;
	padding-right: 44px;
}
.wzd-pdp-faq summary::-webkit-details-marker { display: none; }
.wzd-pdp-faq summary::after {
	content: '+'; position: absolute; right: 20px; top: 50%;
	transform: translateY(-50%); font-size: 22px;
	color: var(--c-brick); font-weight: 300;
}
.wzd-pdp-faq details[open] summary::after { content: '−'; }
.wzd-pdp-faq details p {
	margin: 0; padding: 0 20px 18px;
	font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.7;
}

/* ============================================================================
   18b2. PRODUCT INSIGHTS — จุดเด่น + ข้อสังเกต
   ============================================================================ */
.wzd-insights-label {
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700; color: var(--c-ink);
	margin-bottom: 12px; letter-spacing: 0.01em;
}
.wzd-insights-label i { font-size: 16px; color: var(--c-teal, #1a8a6f); }
.wzd-insights-label--obs i { color: var(--c-orange, #d97706); }
.wzd-insights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.wzd-insight {
	display: flex; gap: 11px; align-items: flex-start;
	padding: 12px 14px; border-radius: 10px;
	border: 0.5px solid transparent;
}
.wzd-insight--pro {
	background: rgba(26,138,111,0.07);
	border-color: rgba(26,138,111,0.18);
}
.wzd-insight--obs {
	background: rgba(217,119,6,0.07);
	border-color: rgba(217,119,6,0.18);
}
.wzd-insight-ic {
	font-size: 18px; flex-shrink: 0; margin-top: 1px;
}
.wzd-insight--pro .wzd-insight-ic { color: var(--c-teal, #1a8a6f); }
.wzd-insight--obs .wzd-insight-ic { color: var(--c-orange, #d97706); }
.wzd-insight-text {
	margin: 0; font-size: 13px; color: var(--c-ink); line-height: 1.6;
}
.wzd-insights-use-list {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.wzd-insight-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 500; color: var(--c-ink);
	background: var(--c-bg-soft, rgba(0,0,0,0.04));
	border: 0.5px solid rgba(0,0,0,0.09);
	border-radius: 20px; padding: 5px 12px;
}
.wzd-insight-tag i { font-size: 14px; color: var(--c-brick); }

/* ============================================================================
   18c. UNIFIED CALCULATOR + QUOTE BOX (PDP — "คำนวณ & ขอใบเสนอราคา")
   Type-specific (5 groups: brick/tile/roof/structure/stone) merged with quote
   ============================================================================ */
.wzd-cq {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
}
.wzd-cq-head {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 16px 18px 14px;
	background: linear-gradient(135deg, #FAF1E1 0%, #FDF8EB 100%);
	border-bottom: 1px solid var(--c-line-soft);
}
.wzd-cq-head-body { flex: 1; min-width: 0; }
.wzd-cq-ic {
	width: 38px; height: 38px; border-radius: 11px;
	background: rgba(142, 37, 33,0.10); color: var(--c-brick);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; flex-shrink: 0;
}
.wzd-cq-t {
	font-size: 15.5px; font-weight: 700; margin: 0;
	line-height: 1.25; letter-spacing: -0.01em;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.wzd-cq-t-badge {
	display: inline-block;
	font-size: 10.5px; font-weight: 700;
	color: #fff; background: var(--c-brick);
	padding: 2px 8px; border-radius: 999px;
	letter-spacing: 0.02em; line-height: 1.4;
	font-family: var(--font-thai);
}
.wzd-cq-s {
	font-size: 11.5px; color: var(--c-ink-soft);
	margin: 5px 0 0; line-height: 1.45;
}

.wzd-cq-form { padding: 0; }
.wzd-cq-step { padding: 14px 18px; border-bottom: 1px solid var(--c-line-soft); }
.wzd-cq-step:last-of-type { border-bottom: none; }
.wzd-cq-step-label {
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--c-ink-mute); font-weight: 700; font-family: var(--font-en);
	margin-bottom: 12px;
}

.wzd-cq-mode {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--c-bg-soft);
	border-radius: var(--r-md);
	padding: 4px;
}
.wzd-cq-mode-btn {
	background: transparent; border: none;
	padding: 8px 8px;
	font-size: 12.5px; font-weight: 600;
	color: var(--c-ink-soft);
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 0;
	line-height: 1.15;
}
.wzd-cq-mode-btn.on {
	background: #fff; color: var(--c-brick);
	box-shadow: 0 1px 4px rgba(46,17,15,0.1);
}
.wzd-cq-mode-btn-t { font-size: 12.5px; font-weight: 700; }
.wzd-cq-mode-btn-s {
	font-size: 10px; font-weight: 600;
	font-family: var(--font-en);
	color: var(--c-ink-mute);
	letter-spacing: 0.02em;
	margin-top: 1px;
}
.wzd-cq-mode-btn.on .wzd-cq-mode-btn-s { color: var(--c-brick); opacity: 0.7; }

/* Face-dimension hint under orientation toggle — single-line text, no flex split */
.wzd-cq-face-hint {
	margin-top: 8px;
	padding: 9px 12px;
	background: var(--c-bg-warm);
	border-radius: var(--r-md);
	font-size: 11.5px;
	color: var(--c-ink-soft);
	line-height: 1.55;
}
.wzd-cq-face-hint i {
	color: var(--c-brick);
	font-size: 13px;
	margin-right: 5px;
	vertical-align: -1px;
}
.wzd-cq-face-hint-txt { display: inline; }
.wzd-cq-face-hint strong {
	color: var(--c-brick);
	font-weight: 700;
	font-family: var(--font-en);
	margin: 0 1px;
	white-space: nowrap;
}
.wzd-cq-label-aux {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--c-ink-mute);
	margin-left: 4px;
}

.wzd-cq-row { margin-bottom: 9px; }
.wzd-cq-row:last-child { margin-bottom: 0; }
.wzd-cq-label {
	display: block; font-size: 11.5px; font-weight: 600;
	color: var(--c-ink); margin-bottom: 5px;
}
.wzd-cq-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.wzd-cq-row-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.wzd-cq-or {
	text-align: center; font-size: 10.5px;
	color: var(--c-ink-mute);
	margin: 3px 0; text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wzd-cq-input-group { position: relative; }
.wzd-cq-input, .wzd-cq-text {
	width: 100%;
	padding: 9.5px 52px 9.5px 13px;
	font-size: 14px; font-weight: 500;
	font-family: inherit;
	color: var(--c-ink);
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	transition: border-color 0.18s, background 0.18s;
	-moz-appearance: textfield;
	line-height: 1.35;
}
.wzd-cq-text { padding: 9.5px 13px; font-size: 13px; }
textarea.wzd-cq-text { resize: vertical; min-height: 48px; line-height: 1.45; }
.wzd-cq-input::-webkit-outer-spin-button,
.wzd-cq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wzd-cq-input:focus, .wzd-cq-text:focus { outline: none; border-color: var(--c-brick); background: #fff; }

.wzd-cq-suffix {
	position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
	font-size: 12px; font-weight: 500; color: var(--c-ink-soft);
	pointer-events: none;
}
.wzd-cq-hint {
	font-size: 11.5px; color: var(--c-ink-soft);
	margin-top: 6px; line-height: 1.5;
}
.wzd-cq-hint strong { color: var(--c-brick); }

.wzd-cq-waste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wzd-cq-waste label { display: block; cursor: pointer; position: relative; }
.wzd-cq-waste input { position: absolute; opacity: 0; pointer-events: none; }
.wzd-cq-waste span {
	display: block; padding: 9px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-size: 12.5px; font-weight: 700; text-align: center;
	color: var(--c-ink-soft);
	font-family: var(--font-en);
	transition: all 0.18s;
}
.wzd-cq-waste label:hover span { border-color: var(--c-brick); color: var(--c-brick); }
.wzd-cq-waste input:checked + span {
	background: var(--c-brick); border-color: var(--c-brick);
	color: #fff;
	box-shadow: 0 3px 8px rgba(142, 37, 33,0.28);
}

.wzd-cq-result {
	background: linear-gradient(135deg, #FAF1E1 0%, #FDF8EB 100%);
	border: 1px solid rgba(142, 37, 33,0.15);
	border-radius: var(--r-md);
	padding: 14px 16px;
	margin-top: 12px;
	text-align: center;
}
.wzd-cq-result-label {
	font-size: 11px; color: var(--c-ink-soft);
	letter-spacing: 0.05em; margin-bottom: 4px;
}
.wzd-cq-result-num {
	font-size: 28px; font-weight: 800;
	color: var(--c-brick); font-family: var(--font-en);
	letter-spacing: -0.02em; line-height: 1;
}
.wzd-cq-result-num small {
	font-size: 13px; font-weight: 600;
	color: var(--c-ink-soft);
	font-family: var(--font-thai); margin-left: 4px;
}
.wzd-cq-result-extra {
	font-size: 12.5px; color: var(--c-ink-soft);
	margin-top: 6px;
}
.wzd-cq-result-extra span { font-weight: 700; color: var(--c-brick); font-family: var(--font-en); }
.wzd-cq-result-note {
	font-size: 10.5px; color: var(--c-ink-soft);
	margin-top: 8px; line-height: 1.5;
	display: flex; align-items: flex-start; gap: 5px; justify-content: center;
}
.wzd-cq-result-note i { color: var(--c-orange); font-size: 13px; flex-shrink: 0; }

/* Weight + truck — vertical rows, each ONE line, label-left/value-right */
.wzd-cq-result-rows {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 0.5px dashed rgba(142, 37, 33,0.25);
	display: grid; gap: 6px;
}
.wzd-cq-result-row {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px;
	padding: 4px 2px;
	font-size: 13px;
}
.wzd-cq-result-row-lbl {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--c-ink-soft); font-weight: 500;
	font-size: 12.5px; flex-shrink: 0;
}
.wzd-cq-result-row-lbl i { color: var(--c-brick); font-size: 15px; }
.wzd-cq-result-row-val {
	text-align: right; min-width: 0;
	color: var(--c-ink); line-height: 1.3;
}
.wzd-cq-result-row-val strong {
	font-weight: 800; color: var(--c-brick);
	font-family: var(--font-en); font-size: 15px;
	letter-spacing: -0.01em;
}
.wzd-cq-result-row-val--text {
	font-family: var(--font-thai) !important;
	font-size: 13.5px !important;
}
.wzd-cq-result-unit {
	font-size: 12px; font-weight: 600; color: var(--c-ink-soft);
	margin-left: 1px;
}
.wzd-cq-result-aux {
	font-style: normal;
	font-size: 11px; color: var(--c-ink-mute);
	margin-left: 4px; font-weight: 500;
	white-space: nowrap;
}

/* sqm field — when derived from W×H, dim it slightly */
.wzd-cq-input.is-derived {
	color: var(--c-ink-soft);
	background: var(--c-bg-warm);
}
.wzd-cq-input.is-derived::placeholder { color: var(--c-ink-mute); }

.wzd-cq-loc-search { position: relative; margin-bottom: 7px; }
/* Pin icon inside location-search input — center vertically + proper left padding */
.wzd-cq-loc-search .wzd-cq-loc-ic {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-brick);
	font-size: 15px;
	pointer-events: none;
	z-index: 2;
}
/* Bullet-proof padding — multiple selectors to beat any inherited shorthand */
.wzd-cq-loc-search input.wzd-cq-text,
.wzd-cq-loc-search .wzd-cq-text--loc,
input.wzd-cq-text--loc,
.wzd-cq-text--loc {
	padding-left: 38px !important;
}
.wzd-cq-loc-results {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0;
	background: #fff; border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-card);
	max-height: 240px; overflow-y: auto;
	z-index: 10;
}
.wzd-cq-loc-results > a {
	display: block; padding: 9px 14px;
	font-size: 13px; color: var(--c-ink);
	border-bottom: 0.5px solid var(--c-line-soft);
	cursor: pointer;
}
.wzd-cq-loc-results > a:last-child { border-bottom: none; }
.wzd-cq-loc-results > a:hover { background: var(--c-bg-soft); color: var(--c-brick); }
.wzd-cq-loc-results > a small { color: var(--c-ink-soft); font-size: 11px; margin-left: 6px; }

.wzd-cq-submit {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: fit-content;
	margin: 16px auto;
	padding: 14px 32px;
	background: var(--c-brick); color: #fff;
	border: none; border-radius: var(--r-pill);
	font-size: 15px; font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(142, 37, 33,0.3);
	transition: background 0.18s, transform 0.18s var(--ease-spring);
}
.wzd-cq-submit:hover { background: var(--c-brick-deep); transform: translateY(-1px); }
.wzd-cq-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.wzd-cq-submit > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wzd-cq-submit > [hidden] { display: none !important; }
.wzd-cq-submit i { font-size: 17px; }
.wzd-cq-submit [data-submit-loading] i { animation: wzdspin 1s linear infinite; display: inline-block; }
@keyframes wzdspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.wzd-cq-trust {
	padding: 0 20px 18px;
	font-size: 11px; color: var(--c-ink-soft);
	text-align: center;
	display: flex; align-items: center; justify-content: center; gap: 5px;
	line-height: 1.5;
}
.wzd-cq-trust i { color: var(--c-orange); font-size: 13px; flex-shrink: 0; }

/* ============================================================================
   18b. (Legacy) PRODUCT CALCULATOR — kept for backwards compat
   ============================================================================ */
.wzd-calc {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	padding: 22px;
	box-shadow: var(--sh-card);
}
.wzd-calc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wzd-calc-ic {
	width: 42px; height: 42px; border-radius: 12px;
	background: rgba(142, 37, 33, 0.08);
	color: var(--c-brick); font-size: 22px;
	display: inline-flex; align-items: center; justify-content: center;
}
.wzd-calc-t { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.2; }
.wzd-calc-s { font-size: 11.5px; color: var(--c-ink-soft); margin: 2px 0 0; }

.wzd-calc-mode {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--c-bg-soft);
	border-radius: var(--r-md);
	padding: 4px;
	margin-bottom: 18px;
}
.wzd-calc-mode-btn {
	background: transparent;
	border: none;
	padding: 9px 8px;
	font-size: 12.5px; font-weight: 600;
	color: var(--c-ink-soft);
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.wzd-calc-mode-btn.on {
	background: #fff;
	color: var(--c-brick);
	box-shadow: 0 1px 4px rgba(46,17,15,0.1);
}

.wzd-calc-row { margin-bottom: 14px; }
.wzd-calc-label {
	display: block;
	font-size: 12px; font-weight: 600;
	color: var(--c-ink); margin-bottom: 6px;
}
.wzd-calc-input-group { position: relative; }
.wzd-calc-input {
	width: 100%;
	padding: 12px 60px 12px 14px;
	font-size: 16px; font-weight: 600; color: var(--c-ink);
	font-family: var(--font-en);
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	transition: border-color 0.18s, background 0.18s;
	-moz-appearance: textfield;
}
.wzd-calc-input::-webkit-outer-spin-button,
.wzd-calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wzd-calc-input:focus { outline: none; border-color: var(--c-brick); background: #fff; }
.wzd-calc-suffix {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font-size: 13px; font-weight: 500; color: var(--c-ink-soft);
}
.wzd-calc-hint {
	font-size: 11.5px; color: var(--c-ink-soft);
	margin-top: 6px; line-height: 1.5;
}
.wzd-calc-hint strong { color: var(--c-brick); }

.wzd-calc-waste {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.wzd-calc-waste label {
	display: block; cursor: pointer; position: relative;
}
.wzd-calc-waste input { position: absolute; opacity: 0; pointer-events: none; }
.wzd-calc-waste span {
	display: block; padding: 10px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-size: 13px; font-weight: 700; text-align: center;
	color: var(--c-ink-soft);
	font-family: var(--font-en);
	transition: all 0.18s;
}
.wzd-calc-waste label:hover span { border-color: var(--c-brick); color: var(--c-brick); }
.wzd-calc-waste input:checked + span {
	background: var(--c-brick); border-color: var(--c-brick);
	color: #fff;
	box-shadow: 0 3px 10px rgba(142, 37, 33,0.3);
}

.wzd-calc-result {
	background: linear-gradient(135deg, #FAF1E1 0%, #FDF8EB 100%);
	border: 1px solid rgba(142, 37, 33, 0.15);
	border-radius: var(--r-md);
	padding: 16px;
	margin-top: 6px;
	margin-bottom: 16px;
	text-align: center;
}
.wzd-calc-result-label { font-size: 11.5px; color: var(--c-ink-soft); margin-bottom: 4px; font-weight: 500; letter-spacing: 0.04em; }
.wzd-calc-result-num {
	font-size: 32px; font-weight: 800;
	color: var(--c-brick); font-family: var(--font-en);
	letter-spacing: -0.02em; line-height: 1;
}
.wzd-calc-result-num small {
	font-size: 14px; font-weight: 600; color: var(--c-ink-soft);
	font-family: var(--font-thai); margin-left: 4px;
}
.wzd-calc-disclaimer {
	font-size: 11px; color: var(--c-ink-soft);
	margin-top: 8px; line-height: 1.55;
	display: flex; align-items: flex-start; gap: 5px; justify-content: center;
	text-align: left;
}
.wzd-calc-disclaimer i { color: var(--c-orange); font-size: 14px; flex-shrink: 0; margin-top: 1px; }

.wzd-calc-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	padding: 13px;
	background: var(--c-brick); color: #fff !important;
	border-radius: var(--r-md);
	font-size: 13.5px; font-weight: 700;
	box-shadow: 0 4px 14px rgba(142, 37, 33,0.3);
	transition: background 0.18s, transform 0.18s var(--ease-spring);
}
.wzd-calc-cta:hover { background: var(--c-brick-deep); transform: translateY(-1px); color: #fff !important; }

/* ============================================================================
   19. ARTICLE / SINGLE POST (long-form)
   ============================================================================ */
.wzd-art-single {
	display: grid; grid-template-columns: 1fr 320px; gap: 36px;
	padding-top: 0;
	padding-bottom: var(--pad-section);
}
.wzd-art-body-wrap { min-width: 0; }
.wzd-art-body-wrap .wzd-art-body { font-size: 16px; line-height: 1.9; color: var(--c-ink); }
.wzd-art-body-wrap .wzd-art-body h2 { font-size: 22px; margin: 1.8em 0 0.6em; }
.wzd-art-body-wrap .wzd-art-body h3 { font-size: 18px; margin: 1.5em 0 0.5em; }
.wzd-art-body-wrap .wzd-art-body p { margin: 0 0 1.2em; }
.wzd-art-body-wrap .wzd-art-body img { border-radius: var(--r-md); margin: 1.5em 0; }
.wzd-art-body-wrap .wzd-art-body a { color: var(--c-brick); border-bottom: 1px solid rgba(142, 37, 33, 0.35); }
.wzd-art-body-wrap .wzd-art-body a:hover { color: var(--c-brick-deep); border-color: var(--c-brick-deep); }

.wzd-art-toc { background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-soft); margin-bottom: 18px; }
.wzd-art-toc-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; }
.wzd-art-toc ul { list-style: none; padding: 0; margin: 0; }
.wzd-art-toc li a { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13px; color: var(--c-ink); border-bottom: 1px solid var(--c-line-soft); transition: color 0.15s; }
.wzd-art-toc li:last-child a { border-bottom: none; }
.wzd-art-toc li a:hover { color: var(--c-brick); }
.wzd-art-toc li a::after { content: '›'; opacity: 0.5; }

/* ============================================================================
   20. PAGINATION
   ============================================================================ */
.wzd-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.wzd-pagination a, .wzd-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 14px;
	border-radius: var(--r-md);
	font-size: 14px; font-weight: 600;
	background: #fff; border: 1px solid var(--c-line);
	color: var(--c-ink);
	transition: all 0.18s;
}
.wzd-pagination .current { background: var(--c-brick); color: #fff; border-color: var(--c-brick); }
.wzd-pagination a:hover { background: var(--c-brick); color: #fff; border-color: var(--c-brick); }

/* ============================================================================
   21. BANNER MSG (form success/error notification)
   ============================================================================ */
.wzd-banner-msg {
	max-width: var(--container); margin: 18px auto;
	padding: 16px 22px; border-radius: var(--r-lg);
	display: flex; align-items: center; gap: 14px;
	font-size: 14px;
	animation: bannerSlide 0.4s var(--ease-out);
}
.wzd-banner-msg.wzd-banner-success { background: rgba(6,199,85,0.1); border: 1px solid rgba(6,199,85,0.35); color: #06673A; }
.wzd-banner-msg.wzd-banner-error { background: rgba(142, 37, 33,0.08); border: 1px solid rgba(142, 37, 33,0.35); color: var(--c-brick); }
.wzd-banner-msg i { font-size: 22px; flex-shrink: 0; }
.wzd-banner-msg span { font-size: 12px; opacity: 0.85; }

@keyframes bannerSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   22. RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
	.wzd-catmini-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
	.wzd-prod-grid--6 { grid-template-columns: repeat(4, 1fr); }
	.wzd-pdp-grid { grid-template-columns: 1fr 1fr; }
	.wzd-pdp-grid > *:nth-child(3) { grid-column: 1 / -1; }
	.wzd-art-single { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
	.wzd-nav-items { gap: 16px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
	.wzd-nav-menu { display: none; }
	.wzd-menu-toggle { display: flex; }
	.wzd-nav-icon { display: none; }
	.wzd-cta-quote span { display: none; }
	.wzd-cta-quote { padding: 10px 14px; }
	.wzd-cta-quote::before { content: none; }
}
@media (max-width: 900px) {
	.wzd-trust-strip { grid-template-columns: repeat(2, 1fr); padding: 18px; gap: 12px; }
	.wzd-trust-strip > * { border-right: none; border-bottom: 1px solid var(--c-line-soft); padding-bottom: 14px; }
	.wzd-trust-strip > *:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
	.wzd-trust-strip--5col { grid-template-columns: repeat(2, 1fr); }
	.wzd-trust-strip--5col > *:nth-last-child(-n+2):not(:last-child) { border-bottom: 1px solid var(--c-line-soft); padding-bottom: 14px; }
	.wzd-pillars { grid-template-columns: repeat(3, 1fr); }
	.wzd-pillars > .wzd-pillar:nth-child(4),
	.wzd-pillars > .wzd-pillar:nth-child(5) { grid-column: span 1; }
	.wzd-prod-grid--6 { grid-template-columns: repeat(3, 1fr); }
	.wzd-prod-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.wzd-foot-grid { grid-template-columns: 1fr 1fr; }
	.wzd-pdp-grid { grid-template-columns: 1fr; }
	.wzd-pdp-features { grid-template-columns: 1fr; }
	.wzd-pdp-bullets { grid-template-columns: 1fr; }
	.wzd-pdp-bottom { grid-template-columns: 1fr; }
	.wzd-pdp-specs-cards { grid-template-columns: 1fr; }
	.wzd-cta-bar { padding: 24px 22px; }
	.wzd-cta-light { padding: 22px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
	.wzd-sticky-mobile { display: flex; }
	body { padding-bottom: 78px; }
	.wzd-catmini-grid { grid-template-columns: repeat(2, 1fr); }
	.wzd-prod-grid--6 { grid-template-columns: repeat(2, 1fr); }
	.wzd-prod-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.wzd-trust-strip { grid-template-columns: 1fr; }
	.wzd-trust-strip > * { border-right: none !important; border-bottom: 1px solid var(--c-line-soft); padding-bottom: 12px; }
	.wzd-trust-strip > *:last-child { border-bottom: none; padding-bottom: 0; }
	.wzd-pillars { grid-template-columns: repeat(2, 1fr); }
	.wzd-pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
	.wzd-foot-grid { grid-template-columns: 1fr; gap: 28px; }
	.wzd-phero-bg { width: 100%; opacity: 0.4; }
	.wzd-cta-bar-t { font-size: 18px; }
}

/* ============================================================================
   22a. BANNER (Real PDF V2 banner images — auto category mapping)
   ============================================================================ */
.wzd-banner {
	position: relative;
	background: transparent;
	padding: 0;
	overflow: visible;
}
.wzd-banner-bread {
	padding-top: 14px; padding-bottom: 10px;
}
.wzd-banner-frame {
	width: 100%;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
	overflow: hidden;
	border-radius: 0;
}
.wzd-banner-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-2xl);
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center;
	box-shadow: 0 8px 28px rgba(60,30,25,0.10);
}
@media (max-width: 700px) {
	.wzd-banner-image {
		aspect-ratio: 4/3;       /* less aggressive crop on mobile so titles/logos stay visible */
		object-position: left center; /* keep left side (logo+text) visible */
		border-radius: var(--r-xl);
	}
}

/* Legacy placeholder styles (kept for OLD code paths) */
.wzd-banner-placeholder {
	width: 100%; min-height: 240px;
	background:
		repeating-linear-gradient(45deg, rgba(142, 37, 33,0.04), rgba(142, 37, 33,0.04) 12px, transparent 12px, transparent 24px),
		linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(245,237,222,0.85) 100%);
	border: 2px dashed rgba(142, 37, 33, 0.25);
	border-radius: var(--r-xl);
	display: flex; align-items: center; justify-content: center;
}
.wzd-banner-placeholder-inner { text-align: center; padding: 28px 20px; color: var(--c-ink-soft); }
.wzd-banner-placeholder-inner > i { font-size: 44px; color: rgba(142, 37, 33,0.55); margin-bottom: 10px; display: inline-block; }
.wzd-banner-placeholder-t { font-size: 15px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; }
.wzd-banner-placeholder-d { font-size: 12px; color: var(--c-ink-soft); line-height: 1.6; }
.wzd-banner-placeholder-d code { background: rgba(142, 37, 33,0.08); color: var(--c-brick); padding: 1px 6px; border-radius: 4px; font-size: 11px; font-family: var(--font-en); }

/* ========================================================================
   Legacy banner-OLD-UNUSED-DELETEME (was full-width hero with internal title)
   — KEPT only to avoid breakage; real banner above handles all cases
   ======================================================================== */
.wzd-banner-OLD-UNUSED {
	background: linear-gradient(135deg, #FAF3E5 0%, #FDF8EB 60%, #F5EBD8 100%);
	padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 72px);
	position: relative;
	overflow: hidden;
}
.wzd-banner::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 60px;
	background: linear-gradient(180deg, transparent 0%, #8E2521 75%, #8E2521 100%);
	clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 1;
}
.wzd-banner-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: center;
	min-height: 480px;
	position: relative;
	z-index: 2;
}
.wzd-banner-left {
	padding-right: 8px;
}
.wzd-banner-brand {
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 26px;
}
.wzd-banner-brand-text {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
	font-family: var(--font-en);
	color: var(--c-ink);
}
.wzd-banner-brand-text .wzd-brand-watzadu { font-size: 24px; font-weight: 800; }
.wzd-banner-brand-text .wzd-brand-dot { font-size: 20px; color: var(--c-brick); }
.wzd-banner-brand-text .wzd-brand-wdc { font-size: 24px; font-weight: 800; }
.wzd-banner-brand-text small {
	display: block; width: 100%;
	font-size: 12.5px; color: var(--c-ink-soft);
	font-weight: 400; letter-spacing: 0.01em; margin-top: 4px;
	font-family: var(--font-thai);
}
.wzd-banner-title {
	font-size: clamp(40px, 5.4vw, 68px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--c-brick);
	margin: 0 0 18px;
}
.wzd-banner-title em {
	font-style: normal;
	display: block;
	color: var(--c-brick);
}
.wzd-banner-sub {
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.75;
	color: var(--c-ink-soft);
	max-width: 480px;
	margin: 0 0 30px;
}
.wzd-banner-ctas {
	display: flex; gap: 14px; flex-wrap: wrap;
}

/* Banner placeholder — clean professional skeleton */
.wzd-banner-right {
	position: relative;
	height: 100%;
	min-height: 380px;
	display: flex; align-items: center; justify-content: center;
}
.wzd-banner-img {
	width: 100%; height: auto;
	max-height: 540px;
	object-fit: contain;
	display: block;
}
.wzd-banner-placeholder {
	width: 100%; height: 100%;
	min-height: 360px;
	background:
		repeating-linear-gradient(45deg, rgba(142, 37, 33,0.04), rgba(142, 37, 33,0.04) 12px, transparent 12px, transparent 24px),
		linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(245,237,222,0.85) 100%);
	border: 2px dashed rgba(142, 37, 33, 0.25);
	border-radius: var(--r-xl);
	display: flex; align-items: center; justify-content: center;
	transition: border-color 0.2s, background 0.2s;
}
.wzd-banner-placeholder:hover { border-color: rgba(142, 37, 33, 0.4); }
.wzd-banner-placeholder-inner {
	text-align: center;
	padding: 32px 22px;
	color: var(--c-ink-soft);
}
.wzd-banner-placeholder-inner > i {
	font-size: 48px;
	color: rgba(142, 37, 33, 0.55);
	margin-bottom: 12px;
	display: inline-block;
}
.wzd-banner-placeholder-t {
	font-size: 16px; font-weight: 700; color: var(--c-ink);
	margin-bottom: 6px;
}
.wzd-banner-placeholder-d {
	font-size: 12.5px; color: var(--c-ink-soft);
	line-height: 1.6;
}
.wzd-banner-placeholder-d code {
	background: rgba(142, 37, 33, 0.08);
	color: var(--c-brick);
	padding: 1px 6px; border-radius: 4px;
	font-size: 11.5px; font-family: var(--font-en);
}
.wzd-banner-placeholder-cta {
	display: inline-block;
	margin-top: 16px; padding: 9px 18px;
	background: var(--c-brick); color: #fff !important;
	border-radius: var(--r-md);
	font-size: 12.5px; font-weight: 600;
}
.wzd-banner-placeholder-cta:hover { background: var(--c-brick-deep); color: #fff !important; }

/* Banner trust strip below */
.wzd-banner-trust {
	position: relative; z-index: 3;
	margin-top: 26px;
	background: #fff;
	border-radius: var(--r-xl);
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--sh-card);
	padding: 22px 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.wzd-banner-trust > * { display: flex; gap: 12px; align-items: center; padding: 4px 14px; border-right: 1px solid var(--c-line-soft); }
.wzd-banner-trust > *:last-child { border-right: none; }
.wzd-banner-trust-ic {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(142, 37, 33, 0.08);
	color: var(--c-brick); font-size: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.wzd-banner-trust-t { font-size: 13.5px; font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.wzd-banner-trust-d { font-size: 11.5px; color: var(--c-ink-soft); margin-top: 2px; }

@media (max-width: 1024px) {
	.wzd-banner-grid { grid-template-columns: 1fr; gap: 24px; }
	.wzd-banner-trust { grid-template-columns: repeat(2, 1fr); }
	.wzd-banner-trust > * { border-right: none; border-bottom: 1px solid var(--c-line-soft); padding: 10px; }
	.wzd-banner-trust > *:nth-last-child(-n+2) { border-bottom: none; }
	.wzd-banner-right { min-height: 280px; }
}
@media (max-width: 600px) {
	.wzd-banner-trust { grid-template-columns: 1fr; }
	.wzd-banner-trust > * { border-right: none !important; border-bottom: 1px solid var(--c-line-soft); }
	.wzd-banner-trust > *:last-child { border-bottom: none; }
	.wzd-banner-brand-text .wzd-brand-watzadu,
	.wzd-banner-brand-text .wzd-brand-wdc { font-size: 19px; }
	.wzd-banner-title { font-size: 32px; }
}

/* ============================================================================
   22b. HOMEPAGE-SPECIFIC RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
	.wzd-hero-split-grid { grid-template-columns: 1fr 1.1fr; }
}
@media (max-width: 900px) {
	.wzd-hero-split { min-height: 0; }
	.wzd-hero-split-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
	.wzd-hero-split-left { padding-bottom: 24px; padding-right: 0; }
	.wzd-hero-collage { min-height: 360px; }
	.wzd-hero-collage-grid { min-height: 360px; }
}
@media (max-width: 600px) {
	.wzd-hero-collage { min-height: 280px; }
	.wzd-hero-collage-grid { min-height: 280px; }
}

/* ============================================================================
   22c. PREMIUM REFINEMENTS (PDF p.1 match)
   ============================================================================ */
/* Category card hover CTA transition */
.wzd-catmini-cta { transition: color 0.15s; }
.wzd-catmini:hover .wzd-catmini-cta { color: var(--c-brick); }

/* Trust strip line-style PDF p.1 — no card background */
.wzd-trust-strip--clean {
	background: transparent; box-shadow: none; border: none;
	padding: 30px 0; gap: 16px;
	margin-top: 0; max-width: 100%;
}
.wzd-trust-strip--clean > * { border-right: 1px solid var(--c-line-soft); padding: 4px 24px; gap: 16px; }
.wzd-trust-strip--clean > *:last-child { border-right: none; }
.wzd-trust-strip--clean .wzd-trust-ic {
	width: 44px; height: 44px;
	background: transparent; color: var(--c-ink);
	border: 1.5px solid var(--c-line); border-radius: 50%;
	font-size: 22px;
}
.wzd-trust-strip--clean .wzd-trust-t { font-size: 15px; font-weight: 700; }
.wzd-trust-strip--clean .wzd-trust-d { font-size: 12.5px; }

/* Product card per PDF p.1 — square photo + price highlight */
.wzd-prod-pdf .wzd-prod-img { aspect-ratio: 4/3 !important; background: #fff !important; padding: 10px !important; }
.wzd-prod-pdf .wzd-prod-img img { object-fit: contain; padding: 0; }
.wzd-prod-pdf .wzd-prod-body { padding: 8px 12px 10px; gap: 3px; }
.wzd-prod-pdf .wzd-prod-name { font-size: 13.5px !important; line-height: 1.35 !important; min-height: 2.7em !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.wzd-prod-pdf .wzd-prod-size { color: var(--c-ink-soft); margin: 0; font-size: 11.5px; }
.wzd-prod-pdf .wzd-prod-link { display: inline-block; padding: 0; border: none; color: var(--c-brick); font-size: 12px; font-weight: 500; background: transparent; margin-top: 5px; }
.wzd-prod-pdf .wzd-prod-link:hover { background: transparent; color: var(--c-brick-deep); text-decoration: underline; }

/* Bottom Red CTA Bar — PDF p.1 (compact bar style) */
.wzd-cta-bar--pdf {
	background: linear-gradient(135deg, #8E2521 0%, #6B1815 100%);
	padding: 22px 32px;
	display: flex; align-items: center; gap: 22px;
	border-radius: var(--r-lg);
}
.wzd-cta-bar--pdf .wzd-cta-bar-t { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.3; }
.wzd-cta-bar--pdf .wzd-cta-bar-s { font-size: 13px; opacity: 0.88; margin: 2px 0 0; }
.wzd-cta-bar--pdf::after { display: none; }

/* Steps card on right of articles (PDF p.1) — softer ivory bg */
.wzd-steps-card {
	background: var(--c-bg-cream);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	padding: 22px 22px 26px;
}
.wzd-steps-card-h { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.wzd-steps-card-s { font-size: 12.5px; color: var(--c-ink-soft); margin: 0 0 22px; }
.wzd-steps-card-list { display: grid; gap: 18px; position: relative; }
.wzd-steps-card-item { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.wzd-steps-card-num {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--c-brick); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; font-family: var(--font-en);
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(142, 37, 33,0.3);
}
.wzd-steps-card-t { font-size: 13.5px; font-weight: 600; color: var(--c-ink); margin: 0; line-height: 1.3; }
.wzd-steps-card-d { font-size: 11.5px; color: var(--c-ink-soft); margin: 4px 0 0; line-height: 1.5; }

/* Consult dark-red side card (PDF p.1) — match precisely */
.wzd-consult-card {
	background: linear-gradient(160deg, #8E2521 0%, #5C1815 100%);
	color: #fff;
	border-radius: var(--r-xl);
	padding: 26px 22px;
	box-shadow: 0 10px 30px rgba(60, 18, 16, 0.25);
}
.wzd-consult-card-ic {
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,0.12);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 22px; margin-bottom: 14px;
}
.wzd-consult-card-t { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.wzd-consult-card-s { font-size: 12.5px; opacity: 0.9; line-height: 1.65; margin: 0 0 18px; }
.wzd-consult-card-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 12px 16px;
	background: #fff; color: var(--c-brick) !important;
	border-radius: var(--r-md); font-weight: 700; font-size: 13.5px;
	transition: transform 0.18s var(--ease-spring), background 0.15s;
}
.wzd-consult-card-btn:hover { background: var(--c-bg-soft); transform: translateY(-1px); color: var(--c-brick-deep) !important; }

/* ============================================================================
   22b. CATEGORY ARCHIVE v3 — 4-col grid + toolbar + drawer filter + compare bar
   ============================================================================ */
.wzd-vh-input { position: absolute; left: -9999px; opacity: 0; }

.wzd-cat-intro {
	background: var(--c-bg-soft);
	border-radius: var(--r-md);
	padding: 18px 22px;
	font-size: 14.5px; line-height: 1.7; color: var(--c-ink-soft);
	margin: 0 0 26px;
}
.wzd-cat-intro p { margin: 0; }

.wzd-cat-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 28px; align-items: start;
}
.wzd-cat-main { min-width: 0; }

/* ----- Filter sidebar (desktop) ----- */
.wzd-cat-filter {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	padding: 20px;
	position: sticky; top: 96px;
}
.wzd-cat-filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wzd-cat-filter-head .wzd-filter-h { margin: 0; padding: 0; border: none; }
.wzd-cat-filter-close { display: none; cursor: pointer; padding: 4px; color: var(--c-ink-soft); }

.wzd-filter-acc {
	border-bottom: 1px solid var(--c-line-soft);
	padding: 6px 0;
}
.wzd-filter-acc:last-of-type { border-bottom: none; }
.wzd-filter-acc summary {
	font-size: 13.5px; font-weight: 700; color: var(--c-ink);
	padding: 8px 0; cursor: pointer; list-style: none;
	position: relative; padding-right: 22px;
}
.wzd-filter-acc summary::-webkit-details-marker { display: none; }
.wzd-filter-acc summary::after {
	content: '+'; position: absolute; right: 0; top: 50%;
	transform: translateY(-50%); font-size: 18px; font-weight: 400;
	color: var(--c-ink-mute);
}
.wzd-filter-acc[open] summary::after { content: '−'; }
.wzd-filter-acc .wzd-filter-options { padding: 6px 0 10px; }

/* ----- Toolbar ----- */
.wzd-cat-toolbar {
	display: grid; align-items: center; gap: 10px;
	grid-template-columns: auto 1fr auto auto;
	background: #fff; border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	padding: 10px 14px; margin-bottom: 18px;
}
.wzd-cat-count { font-size: 13px; color: var(--c-ink-soft); }
.wzd-cat-count strong { color: var(--c-ink); }
.wzd-cat-toolbar-filter {
	display: none; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; color: var(--c-brick);
	padding: 7px 12px; border: 1px solid var(--c-brick);
	border-radius: var(--r-md); cursor: pointer;
}
.wzd-cat-toolbar-search { position: relative; }
.wzd-cat-toolbar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-ink-mute); font-size: 16px; }
.wzd-cat-toolbar-search input {
	width: 100%; padding: 8px 12px 8px 36px;
	font-size: 13.5px; font-family: inherit;
	background: var(--c-bg-soft); border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
.wzd-cat-toolbar-search input:focus { outline: none; border-color: var(--c-brick); background: #fff; }
.wzd-cat-toolbar-sort {
	padding: 8px 12px;
	font-size: 13px;
	background: #fff; border: 1px solid var(--c-line);
	border-radius: var(--r-md); cursor: pointer;
}
.wzd-cat-toolbar-view { display: flex; gap: 4px; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 3px; background: var(--c-bg-soft); }
.wzd-cat-toolbar-view button {
	background: transparent; border: none; padding: 6px 10px;
	color: var(--c-ink-soft); cursor: pointer;
	border-radius: 5px; transition: background 0.2s, color 0.2s;
}
.wzd-cat-toolbar-view button.on { background: #fff; color: var(--c-brick); box-shadow: 0 1px 3px rgba(46,17,15,0.08); }
.wzd-cat-toolbar-view button i { font-size: 17px; display: block; }

/* ----- 4-col grid ----- */
.wzd-cat-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .wzd-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .wzd-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ----- Select checkbox on product card ----- */
.wzd-prod-select {
	position: absolute; top: 8px; left: 8px; z-index: 3;
	width: 24px; height: 24px;
	cursor: pointer;
}
.wzd-prod-select input { position: absolute; opacity: 0; pointer-events: none; }
.wzd-prod-select span {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: rgba(255,255,255,0.92);
	border: 1.5px solid rgba(0,0,0,0.12);
	border-radius: 6px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.18s, border-color 0.18s;
}
.wzd-prod-select span i { font-size: 12px; color: #fff; opacity: 0; transition: opacity 0.15s; }
.wzd-prod-select input:checked + span { background: var(--c-brick); border-color: var(--c-brick); }
.wzd-prod-select input:checked + span i { opacity: 1; }

.wzd-prod-meta { list-style: none; padding: 0; margin: 0 0 12px; font-size: 11.5px; color: var(--c-ink-soft); line-height: 1.6; }
.wzd-prod-meta li { display: flex; align-items: center; gap: 6px; }
.wzd-prod-meta i { color: var(--c-brick); font-size: 13px; flex-shrink: 0; }

/* ----- List view (toggled by toolbar) ----- */
.wzd-cat-grid.is-list { grid-template-columns: 1fr; }
.wzd-cat-grid.is-list .wzd-prod { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 0; }
.wzd-cat-grid.is-list .wzd-prod-img { aspect-ratio: 4/3; }
.wzd-cat-grid.is-list .wzd-prod-body { padding: 12px 14px; flex-direction: row; align-items: center; }
.wzd-cat-grid.is-list .wzd-prod-name { flex: 1; min-height: 0; }
.wzd-cat-grid.is-list .wzd-prod-link { width: auto; }

/* ----- Empty state ----- */
.wzd-cat-empty {
	text-align: center; padding: 60px 20px;
	background: var(--c-bg-soft); border-radius: var(--r-lg);
}
.wzd-cat-empty i { font-size: 48px; color: var(--c-ink-mute); margin-bottom: 14px; display: inline-block; }
.wzd-cat-empty h3 { font-size: 18px; margin-bottom: 8px; }
.wzd-cat-empty p { color: var(--c-ink-soft); font-size: 13px; }

/* ----- Mobile: filter becomes a bottom-sheet drawer ----- */
.wzd-filter-overlay { display: none; }

@media (max-width: 880px) {
	.wzd-cat-layout { grid-template-columns: 1fr; }
	.wzd-cat-toolbar { grid-template-columns: auto auto 1fr; }
	.wzd-cat-toolbar-search { grid-column: 1 / -1; order: 5; }
	.wzd-cat-toolbar-filter { display: inline-flex; }
	.wzd-cat-toolbar-view { display: none; }

	.wzd-cat-filter {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto;
		max-height: 85vh; overflow-y: auto;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		z-index: 1000;
		transform: translateY(100%);
		transition: transform 0.3s var(--ease-spring);
		box-shadow: 0 -8px 32px rgba(46,17,15,0.18);
	}
	.wzd-cat-filter-close { display: inline-flex; }
	.wzd-filter-overlay {
		display: block; position: fixed; inset: 0;
		background: rgba(46,17,15,0.45);
		opacity: 0; pointer-events: none;
		transition: opacity 0.3s;
		z-index: 999;
	}
	#wzd-filter-toggle:checked ~ .wzd-cat-filter { transform: translateY(0); }
	#wzd-filter-toggle:checked ~ .wzd-filter-overlay { opacity: 1; pointer-events: auto; }
	body:has(#wzd-filter-toggle:checked) { overflow: hidden; }
}

/* ----- Sticky compare bar ----- */
.wzd-compare-bar {
	position: fixed; left: 0; right: 0; bottom: 0;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 0.5px solid rgba(0,0,0,0.08);
	box-shadow: 0 -8px 24px rgba(46,17,15,0.10);
	z-index: 200; padding: 12px 0;
	transform: translateY(0);
	transition: transform 0.3s var(--ease-spring);
}
.wzd-compare-bar[hidden] { display: block; transform: translateY(110%); pointer-events: none; }
.wzd-compare-bar-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px; align-items: center;
}
.wzd-compare-bar-label { font-size: 13.5px; font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: 6px; }
.wzd-compare-bar-label i { color: var(--c-brick); font-size: 18px; }
.wzd-compare-bar-items { display: flex; gap: 6px; overflow-x: auto; }
.wzd-compare-bar-items > span {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 8px 4px 10px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line);
	border-radius: 999px; font-size: 12px; color: var(--c-ink);
	white-space: nowrap;
}
.wzd-compare-bar-items button {
	background: transparent; border: none; padding: 0; cursor: pointer;
	color: var(--c-ink-mute); font-size: 14px;
}
.wzd-compare-bar-actions { display: flex; gap: 8px; }

@media (max-width: 640px) {
	.wzd-compare-bar-inner { grid-template-columns: 1fr; gap: 8px; }
	.wzd-compare-bar-items { order: 3; }
	.wzd-compare-bar-actions { order: 2; justify-content: flex-end; }
}

/* ============================================================================
   23. REDUCED MOTION / PRINT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}
@media print {
	.wzd-nav, .wzd-sticky-mobile, .wzd-drawer, .wzd-menu-overlay, .wzd-cta-bar, .wzd-cta-light { display: none; }
}

/* ============================================================================
   24. SEO ARTICLE CONTENT — tables, CTA blocks, lists
   ============================================================================ */
.wdc-table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 14px; line-height: 1.5;
}
.wdc-table th, .wdc-table td {
  padding: 10px 14px; text-align: left;
  border: 1px solid var(--c-border, #E5E7EB);
}
.wdc-table th {
  background: var(--c-brand-primary, #E05B1A); color: #fff; font-weight: 600;
}
.wdc-table tr:nth-child(even) td { background: #FFF5EE; }
.wdc-table tr:hover td { background: #FFF0E5; }

.wdc-cta-section {
  background: #FFF5E6; border: 2px solid var(--c-brand-primary, #E05B1A);
  border-radius: 8px; padding: 20px 24px; margin: 32px 0; text-align: center;
}
.wdc-cta-section p { margin: 0 0 12px; }
.wdc-cta-section a {
  display: inline-block;
  background: var(--c-brand-primary, #E05B1A); color: #fff;
  padding: 12px 28px; border-radius: 6px; font-weight: 700;
  text-decoration: none;
}
.wdc-cta-section a:hover { background: #c44a10; }

.wdc-cta-box {
  background: #FFF5E6; border-left: 4px solid var(--c-brand-primary, #E05B1A);
  padding: 16px 20px; margin: 24px 0; border-radius: 0 6px 6px 0;
}
.wdc-cta-box p { margin: 0 0 10px; }
.wdc-cta-box a.wdc-btn {
  display: inline-block;
  background: var(--c-brand-primary, #E05B1A); color: #fff;
  padding: 10px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 14px;
}

/* Article single post layout */
.single .entry-content h2 { font-size: 1.3rem; margin-top: 2rem; }
.single .entry-content h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.single .entry-content ul, .single .entry-content ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.single .entry-content ul li, .single .entry-content ol li { margin-bottom: 0.4rem; }
.single .entry-content p { margin-bottom: 1rem; }

@media (max-width: 640px) {
  .wdc-table { font-size: 12px; }
  .wdc-table th, .wdc-table td { padding: 7px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   DELIVERY / PROJECT SHOWCASE POST
   .wzd-dlv-*  — ใช้เฉพาะโพสต์รีวิวจัดส่งสินค้า
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.wzd-dlv-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}
.wzd-dlv-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.wzd-dlv-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 12, 10, 0.88) 0%,
    rgba(30, 12, 10, 0.55) 45%,
    rgba(30, 12, 10, 0.18) 100%
  );
}
.wzd-dlv-hero-inner {
  position: relative; z-index: 1;
  padding-bottom: 48px;
  padding-top: 24px;
}
.wzd-dlv-bread { margin-bottom: 20px; }
.wzd-dlv-bread .wzd-breadcrumb,
.wzd-dlv-bread .breadcrumbs { color: rgba(255,255,255,0.7); font-size: 13px; }
.wzd-dlv-bread a { color: rgba(255,255,255,0.8); }

.wzd-dlv-badge-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.wzd-dlv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.wzd-dlv-badge .ti-circle-check-filled { color: #4ADE80; }
.wzd-dlv-badge--loc { background: rgba(142, 37, 33, 0.5); }

.wzd-dlv-hero-title {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: 820px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wzd-dlv-hero-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.75);
}
.wzd-dlv-hero-meta .ti { margin-right: 5px; color: var(--c-brick); }
.wzd-dlv-hero-meta a { color: rgba(255,255,255,0.85); text-decoration: none; }
.wzd-dlv-hero-meta a:hover { color: #fff; }

/* ── Info Strip ── */
.wzd-dlv-info-strip {
  background: var(--c-bg-cream, #F8F5EF);
  border-bottom: 1px solid var(--c-line-soft, #E8E0D4);
  padding: 0;
}
.wzd-dlv-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.wzd-dlv-info-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px;
  border-right: 1px solid var(--c-line-soft, #E8E0D4);
}
.wzd-dlv-info-card:last-child { border-right: none; }
.wzd-dlv-info-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--c-brick, #8E2521);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px;
}
.wzd-dlv-info-body { flex: 1; min-width: 0; }
.wzd-dlv-info-label {
  font-size: 11px; font-weight: 600;
  color: var(--c-ink-soft, #6B6661);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.wzd-dlv-info-val {
  font-size: 13.5px; font-weight: 700;
  color: var(--c-ink, #1E0A08);
  line-height: 1.35;
}

/* ── Main Body Grid ── */
.wzd-dlv-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

/* ── Content (main column) ── */
.wzd-dlv-thankyou {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--c-bg-cream, #F8F5EF);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-lg, 16px);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.wzd-dlv-thankyou-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(142, 37, 33, 0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--c-brick, #8E2521);
}
.wzd-dlv-thankyou-text {
  flex: 1;
  font-size: 15px; line-height: 1.7;
  color: var(--c-ink-soft, #6B6661);
}
.wzd-dlv-thankyou-text p { margin: 0; }

.wzd-dlv-photo {
  margin: 0 0 28px;
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--c-line-soft, #E8E0D4);
  box-shadow: 0 4px 24px rgba(30,10,8,0.08);
}
.wzd-dlv-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4/3; object-fit: cover;
}
.wzd-dlv-photo figcaption {
  padding: 12px 16px;
  font-size: 12.5px; color: var(--c-ink-soft, #6B6661);
  background: var(--c-bg-cream, #F8F5EF);
  display: flex; align-items: center; gap: 7px;
}
.wzd-dlv-photo figcaption .ti { color: var(--c-brick, #8E2521); }

.wzd-dlv-trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--c-line-soft, #E8E0D4);
}
.wzd-dlv-trust-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--c-bg-warm, #FAF8F4);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-md, 10px);
  font-size: 13px; font-weight: 600; color: var(--c-ink, #1E0A08);
}
.wzd-dlv-trust-item .ti {
  font-size: 18px; color: var(--c-brick, #8E2521); flex-shrink: 0;
}

/* ── Sidebar ── */
.wzd-dlv-sidebar-inner {
  position: sticky;
  top: 100px;
  display: flex; flex-direction: column; gap: 14px;
}
.wzd-dlv-cta-box {
  background: var(--c-ink, #1E0A08);
  border-radius: var(--r-lg, 16px);
  padding: 24px;
  color: #fff;
}
.wzd-dlv-cta-box-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.wzd-dlv-cta-box-head .ti {
  font-size: 22px; color: var(--c-gold, #C9942A);
}
.wzd-dlv-cta-box-head h3 {
  font-size: 16px; font-weight: 800; margin: 0;
  color: #fff;
}
.wzd-dlv-cta-box-sub {
  font-size: 13px; color: rgba(255,255,255,0.65);
  margin: 0 0 16px; line-height: 1.6;
}

.wzd-dlv-prod-card {
  background: #fff;
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-lg, 16px);
  padding: 18px;
  box-shadow: var(--sh-soft, 0 2px 12px rgba(30,10,8,0.06));
}
.wzd-dlv-prod-label {
  font-size: 11px; font-weight: 700; color: var(--c-ink-soft, #6B6661);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.wzd-dlv-prod-label .ti { color: var(--c-brick, #8E2521); }
.wzd-dlv-prod-link {
  display: flex; gap: 12px; align-items: center;
  text-decoration: none;
  padding: 8px; margin: -8px;
  border-radius: var(--r-md, 10px);
  transition: background 0.15s;
}
.wzd-dlv-prod-link:hover { background: var(--c-bg-cream, #F8F5EF); }
.wzd-dlv-prod-link img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  flex-shrink: 0;
}
.wzd-dlv-prod-name {
  font-size: 13.5px; font-weight: 700; color: var(--c-ink, #1E0A08);
  line-height: 1.4; margin-bottom: 6px;
}
.wzd-dlv-prod-action {
  font-size: 12px; font-weight: 600; color: var(--c-brick, #8E2521);
  display: flex; align-items: center; gap: 4px;
}

.wzd-dlv-cat-link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--c-bg-cream, #F8F5EF);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-md, 10px);
  font-size: 13.5px; font-weight: 600; color: var(--c-brick, #8E2521);
  text-decoration: none; transition: all 0.15s;
}
.wzd-dlv-cat-link .ti-grid-dots { color: var(--c-ink-soft, #6B6661); }
.wzd-dlv-cat-link .ti-chevron-right { margin-left: auto; }
.wzd-dlv-cat-link:hover {
  background: var(--c-brick, #8E2521); color: #fff; border-color: var(--c-brick);
}
.wzd-dlv-cat-link:hover .ti-grid-dots { color: rgba(255,255,255,0.7); }
.wzd-dlv-cat-link:hover .ti-chevron-right { color: #fff; }

/* ── Related Deliveries ── */
.wzd-dlv-related {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.wzd-dlv-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--c-line-soft, #E8E0D4);
  box-shadow: var(--sh-soft, 0 2px 12px rgba(30,10,8,0.06));
  text-decoration: none;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s;
  background: #fff;
}
.wzd-dlv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(30,10,8,0.12);
}
.wzd-dlv-card-img {
  aspect-ratio: 1 / 1;
  background: var(--c-bg-warm, #FAF8F4) center/cover no-repeat;
  position: relative;
}
.wzd-dlv-card-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 100px;
}
.wzd-dlv-card-badge .ti-circle-check-filled { color: #4ADE80; }
.wzd-dlv-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.wzd-dlv-card-title {
  font-size: 14px; font-weight: 700; color: var(--c-ink, #1E0A08);
  line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wzd-dlv-card-meta {
  font-size: 12px; color: var(--c-ink-soft, #6B6661);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.wzd-dlv-card-cta {
  margin-top: auto;
  font-size: 12.5px; font-weight: 700; color: var(--c-brick, #8E2521);
  display: flex; align-items: center; gap: 4px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .wzd-dlv-body {
    grid-template-columns: 1fr;
  }
  .wzd-dlv-sidebar-inner { position: static; }
  .wzd-dlv-info-grid { grid-template-columns: repeat(2, 1fr); }
  .wzd-dlv-info-card:nth-child(even) { border-right: none; }
  .wzd-dlv-info-card { border-bottom: 1px solid var(--c-line-soft, #E8E0D4); }
  .wzd-dlv-info-card:nth-last-child(-n+2) { border-bottom: none; }
  .wzd-dlv-related { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .wzd-dlv-hero { min-height: 400px; }
  .wzd-dlv-hero-title { font-size: 22px; }
  .wzd-dlv-info-grid { grid-template-columns: 1fr; }
  .wzd-dlv-info-card { border-right: none; border-bottom: 1px solid var(--c-line-soft, #E8E0D4); }
  .wzd-dlv-info-card:last-child { border-bottom: none; }
  .wzd-dlv-trust { grid-template-columns: 1fr; }
  .wzd-dlv-related { grid-template-columns: 1fr; }
  /* Mobile timeline: dot-left, text-right layout */
  .wzd-dlv-steps { flex-direction: column; gap: 0; align-items: stretch; padding: 16px 18px; }
  .wzd-dlv-step { flex-direction: row; align-items: flex-start; gap: 12px; text-align: left; min-width: 0; }
  .wzd-dlv-step-dot { width: 36px; height: 36px; font-size: 15px; flex-shrink: 0; }
  .wzd-dlv-step-body { text-align: left; min-width: 0; padding-top: 6px; }
  .wzd-dlv-step-label { font-size: 13px; }
  .wzd-dlv-step-sub { font-size: 11.5px; }
  .wzd-dlv-step-line { width: 2px; height: 16px; margin-left: 17px; flex: none; }
}

/* ── Delivery Intro ── */
.wzd-dlv-intro {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--c-bg-cream, #F8F5EF);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-lg, 16px);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.wzd-dlv-intro-icon {
  font-size: 22px; color: var(--c-brick, #8E2521);
  margin-top: 2px; flex-shrink: 0;
}
.wzd-dlv-intro p {
  margin: 0;
  font-size: 15px; line-height: 1.75;
  color: var(--c-ink-soft, #6B6661);
}

/* ── Delivery Steps / Timeline ── */
.wzd-dlv-steps {
  display: flex; align-items: center;
  gap: 0;
  background: var(--c-bg-cream, #F8F5EF);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-lg, 16px);
  padding: 20px 24px;
  margin-bottom: 24px;
  overflow: hidden;
}
.wzd-dlv-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex: 0 0 auto; min-width: 80px; text-align: center;
}
.wzd-dlv-step-dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  background: var(--c-line-soft, #E8E0D4);
  color: var(--c-ink-soft, #6B6661);
  border: 2px solid var(--c-line-soft, #E8E0D4);
}
.wzd-dlv-step--done .wzd-dlv-step-dot {
  background: var(--c-brick, #8E2521);
  border-color: var(--c-brick, #8E2521);
  color: #fff;
}
.wzd-dlv-step--active .wzd-dlv-step-dot {
  background: #4ADE80;
  border-color: #16A34A;
  color: #14532D;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
}
.wzd-dlv-step-label {
  font-size: 12px; font-weight: 700;
  color: var(--c-ink, #1E0A08); line-height: 1.3;
}
.wzd-dlv-step-sub {
  font-size: 11px; color: var(--c-ink-soft, #6B6661); line-height: 1.3;
  max-width: 100px;
}
.wzd-dlv-step-line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--c-brick, #8E2521) 0%, var(--c-brick, #8E2521) 60%, var(--c-line-soft, #E8E0D4) 60%);
  min-width: 16px; align-self: flex-start; margin-top: 19px;
}

/* ── FAQ Section ── */
.wzd-dlv-faq {
  margin-top: 32px;
  border-top: 1px solid var(--c-line-soft, #E8E0D4);
  padding-top: 28px;
}
.wzd-dlv-faq-title {
  font-size: 17px; font-weight: 700;
  color: var(--c-ink, #1E0A08);
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px;
}
.wzd-dlv-faq-title .ti { color: var(--c-brick, #8E2521); font-size: 20px; }
.wzd-dlv-faq-list { display: flex; flex-direction: column; gap: 8px; }
.wzd-dlv-faq-item {
  background: var(--c-bg-warm, #FAF8F4);
  border: 1px solid var(--c-line-soft, #E8E0D4);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
}
.wzd-dlv-faq-item[open] { border-color: var(--c-brick, #8E2521); }
.wzd-dlv-faq-q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px;
  font-size: 14px; font-weight: 600; color: var(--c-ink, #1E0A08);
  user-select: none;
}
.wzd-dlv-faq-q::-webkit-details-marker { display: none; }
.wzd-dlv-faq-q .ti {
  font-size: 16px; color: var(--c-brick, #8E2521);
  flex-shrink: 0; transition: transform 0.2s;
}
.wzd-dlv-faq-item[open] .wzd-dlv-faq-q .ti { transform: rotate(180deg); }
.wzd-dlv-faq-a {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13.5px; line-height: 1.7; color: var(--c-ink-soft, #6B6661);
  border-top: 1px solid var(--c-line-soft, #E8E0D4);
  padding-top: 12px;
}

/* ============================================================================
   25. SHOP — Icon Category Tabs + Icon Filter Links (2026-06-15)
   Replaces flat pill tabs with image-icon cards (vertical: icon over label).
   Sized for desktop (10-col), tablet (auto), mobile (horizontal scroll-snap).
   ============================================================================ */

/* -------- TABS ROW (icon over label — horizontal scroll single row) -------- */
.wzd-cat-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	gap: 8px;
	margin-bottom: 28px;
	padding: 4px 2px 12px;
}
.wzd-cat-tabs::-webkit-scrollbar { display: none; }
.wzd-cat-tab {
	flex: 0 0 auto;
	width: 82px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px 6px 10px;
	background: #fff;
	border: 1.5px solid var(--c-line-soft);
	border-radius: 14px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--c-ink-soft);
	text-decoration: none;
	min-height: 92px;
	transition: transform 0.18s var(--ease-spring),
				box-shadow 0.18s,
				border-color 0.18s,
				background 0.18s,
				color 0.18s;
}
.wzd-cat-tab:hover {
	transform: translateY(-3px);
	border-color: var(--c-brick);
	color: var(--c-brick);
	background: #fff;
	box-shadow: 0 6px 18px rgba(123, 18, 12, 0.10);
}
.wzd-cat-tab.on {
	background: linear-gradient(180deg, #fff 0%, var(--c-bg-pink) 100%);
	border-color: var(--c-brick);
	color: var(--c-brick);
	box-shadow: 0 4px 14px rgba(123, 18, 12, 0.14);
}
.wzd-cat-tab-ic {
	width: 50px;
	height: 50px;
	border-radius: 0;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s var(--ease-spring);
	overflow: visible;
}
.wzd-cat-tab-ic img { filter: contrast(1.25) saturate(1.12) brightness(0.96); transition: filter 0.18s, transform 0.18s; }
.wzd-cat-tab:hover .wzd-cat-tab-ic { transform: scale(1.08); }
.wzd-cat-tab:hover .wzd-cat-tab-ic img { filter: contrast(1.35) saturate(1.2); }
.wzd-cat-tab.on .wzd-cat-tab-ic img { filter: contrast(1.3) saturate(1.15); }
.wzd-cat-tab-ic img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0;
	display: block;
}
.wzd-cat-tab-t {
	display: block;
	line-height: 1.2;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.005em;
	word-break: break-word;
	max-width: 100%;
}

/* -------- FILTER SIDEBAR — icon next to category label -------- */
.wzd-cat-filter {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: 16px;
	padding: 22px 20px;
	box-shadow: 0 2px 10px rgba(46, 17, 15, 0.04);
}
.wzd-cat-filter .wzd-filter-h {
	font-size: 16px;
	font-weight: 800;
	color: var(--c-ink);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wzd-cat-filter .wzd-filter-h i { color: var(--c-brick); font-size: 18px; }

.wzd-filter-options--links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}
.wzd-filter-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 8px 12px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
	transition: background 0.13s, color 0.13s;
	border-left: 3px solid transparent;
}
.wzd-filter-link:hover {
	background: var(--c-bg-soft);
	color: var(--c-brick);
}
.wzd-filter-link.on {
	background: var(--c-bg-pink);
	color: var(--c-brick);
	font-weight: 700;
	border-left-color: var(--c-brick);
}
.wzd-filter-link-t {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wzd-filter-link .count {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--c-ink-mute);
	padding: 2px 8px;
	background: var(--c-bg-soft);
	border-radius: 999px;
	min-width: 28px;
	text-align: center;
	flex-shrink: 0;
}
.wzd-filter-link.on .count {
	background: var(--c-brick);
	color: #fff;
}

/* Accordion headings + price form polish */
.wzd-cat-filter .wzd-filter-acc {
	border-bottom: 1px solid var(--c-line-soft);
	padding: 8px 0;
}
.wzd-cat-filter .wzd-filter-acc:last-of-type { border-bottom: none; }

/* Subcategory accordion — shown first, visually distinct */
.wzd-filter-acc--sub {
	background: var(--c-bg-pink);
	border-radius: 12px;
	border: 1.5px solid rgba(123,18,12,0.14) !important;
	padding: 6px 10px !important;
	margin-bottom: 8px;
}
.wzd-filter-acc--sub summary {
	font-weight: 700;
	color: var(--c-brick);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.wzd-filter-acc--sub summary i { font-size: 15px; }
.wzd-filter-acc--sub summary::after { color: var(--c-brick); }
.wzd-cat-filter .wzd-filter-acc summary {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-ink);
	padding: 10px 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 26px;
}
.wzd-cat-filter .wzd-filter-acc summary::-webkit-details-marker { display: none; }
.wzd-cat-filter .wzd-filter-acc summary::after {
	content: '+';
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-bg-soft);
	font-size: 15px; font-weight: 500;
	color: var(--c-ink-soft);
	line-height: 1;
	transition: background 0.15s, color 0.15s, transform 0.18s;
}
.wzd-cat-filter .wzd-filter-acc[open] summary::after {
	content: '−';
	background: var(--c-brick); color: #fff;
}
.wzd-filter-price { padding: 8px 0 12px; }
.wzd-filter-price-inputs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 8px;
}
.wzd-filter-price-inputs label {
	display: flex; flex-direction: column; gap: 4px;
	font-size: 11.5px;
	color: var(--c-ink-soft);
	font-weight: 600;
}
.wzd-filter-price-inputs input {
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	transition: background 0.15s, border-color 0.15s;
}
.wzd-filter-price-inputs input:focus {
	outline: none;
	background: #fff;
	border-color: var(--c-brick);
}
.wzd-filter-price-sep {
	font-size: 16px;
	color: var(--c-ink-mute);
	padding-bottom: 8px;
}
.wzd-filter-clear {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--c-ink-soft);
	text-decoration: underline;
}
.wzd-filter-clear:hover { color: var(--c-brick); }

.wzd-cat-filter .wzd-filter-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding-top: 16px;
	margin-top: 8px;
	border-top: 1px solid var(--c-line-soft);
}

/* -------- FILTER TREE — 6 collapsible category groups -------- */
.wzd-filter-tree { display: flex; flex-direction: column; }
.wzd-filter-tree-all {
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-line-soft);
	gap: 8px;
}
.wzd-filter-acc--tree { border-bottom: 1px solid var(--c-line-soft); }
.wzd-cat-filter .wzd-filter-acc--tree:last-of-type { border-bottom: none; }
.wzd-cat-filter .wzd-filter-acc--tree > summary {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wzd-cat-filter .wzd-filter-acc--tree > summary > i {
	font-size: 15px;
	color: var(--c-brick);
	flex-shrink: 0;
}
.wzd-cat-filter .wzd-filter-acc--tree > summary .wzd-filter-acc-label { flex: 1; }
.wzd-filter-tree-subs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 0 10px 4px;
}
.wzd-filter-tree-subs .wzd-filter-link {
	font-size: 13px;
	padding: 5px 10px 5px 10px;
}

/* ============================================================================
   25b. RESPONSIVE — Shop tabs & filter sidebar
   ============================================================================ */

/* Tablet (768-1023) — sidebar gets narrower */
@media (max-width: 1023px) and (min-width: 769px) {
	.wzd-cat-layout { grid-template-columns: 240px 1fr; gap: 22px; }
	.wzd-filter-link-ic { width: 40px; height: 40px; }
	.wzd-filter-link { grid-template-columns: 40px 1fr auto; }
}

/* Mobile (≤768) — tabs extend edge-to-edge with negative margin */
@media (max-width: 768px) {
	.wzd-cat-tabs {
		padding: 4px 12px 14px;
		margin-left: -16px;
		margin-right: -16px;
	}
	.wzd-cat-tab { width: 80px; min-height: 90px; }
	.wzd-cat-tab-ic { width: 46px; height: 46px; }
	.wzd-filter-link { gap: 10px; padding: 8px 8px; }
}

/* Small mobile (≤480) */
@media (max-width: 480px) {
	.wzd-cat-tab { width: 74px; min-height: 86px; }
	.wzd-cat-tab-ic { width: 42px; height: 42px; }
	.wzd-filter-link-ic { width: 36px; height: 36px; }
}

/* ============================================================================
   25. WATZADU iOS26 ARTICLE PREMIUM
   ============================================================================
   ใช้กับ single post (บทความ SEO 100 เรื่อง):
   - card-based layout (border-radius 14–16px, soft shadow)
   - cover figure + mid figure styles
   - responsive table wrapper
   - FAQ styled section
   - mobile sticky CTA bar
   - all uses WATZADU CI palette only
   ============================================================================ */

:root {
  --wdc-bg: #F8F5EF;
  --wdc-card: #FFFFFF;
  --wdc-stone: #E7D9C8;
  --wdc-ink: #2E2E31;
  --wdc-warm-gray: #B7ACA3;
  --wdc-brick: #8E2521;
  --wdc-clay: #A63B2C;
  --wdc-terra: #C86B44;
  --wdc-orange: #D98949;
  --wdc-shadow-sm: 0 1px 2px rgba(46,46,49,0.06), 0 2px 6px rgba(46,46,49,0.04);
  --wdc-shadow-md: 0 2px 4px rgba(46,46,49,0.06), 0 8px 24px rgba(46,46,49,0.07);
  --wdc-shadow-lg: 0 4px 12px rgba(46,46,49,0.08), 0 16px 48px rgba(46,46,49,0.10);
  --wdc-radius-sm: 10px;
  --wdc-radius: 14px;
  --wdc-radius-lg: 18px;
}

/* Article container — give it a card feel */
.single .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 80px;
  color: var(--wdc-ink);
  font-size: 16.5px;
  line-height: 1.78;
}

.single .entry-content > p:first-of-type {
  font-size: 17px;
  line-height: 1.85;
  color: var(--wdc-ink);
}

/* Cover figure (above-the-fold) — hidden on single posts (theme hero shows it) */
.wdc-article-cover {
  margin: 0 0 28px;
  border-radius: var(--wdc-radius-lg);
  overflow: hidden;
  box-shadow: var(--wdc-shadow-md);
  background: var(--wdc-stone);
  aspect-ratio: 16/10;
}
.wdc-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
/* Theme hero (wzd-hero) already renders the featured image on single posts.
   Hide the duplicate inline cover to avoid showing the same image twice. */
.single .entry-content > .wdc-article-cover,
.single .wzd-art-body > .wdc-article-cover {
  display: none;
}

/* Mid figure inside content */
.wdc-article-img,
.wdc-img-mid {
  margin: 28px 0;
  border-radius: var(--wdc-radius);
  overflow: hidden;
  box-shadow: var(--wdc-shadow-sm);
}
.wdc-article-img img,
.wdc-img-mid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Headings — iOS26 styling */
.single .entry-content h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--wdc-brick);
  margin: 2.2rem 0 0.9rem;
  letter-spacing: -0.01em;
  padding-left: 14px;
  border-left: 4px solid var(--wdc-orange);
  line-height: 1.4;
}
.single .entry-content h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--wdc-clay);
  margin: 1.5rem 0 0.5rem;
  letter-spacing: -0.005em;
}

/* Lists */
.single .entry-content ul,
.single .entry-content ol {
  padding-left: 1.6rem;
  margin: 1rem 0 1.4rem;
}
.single .entry-content ul li,
.single .entry-content ol li {
  margin-bottom: 0.55rem;
  line-height: 1.72;
}
.single .entry-content ul li::marker { color: var(--wdc-orange); }

/* Responsive table wrapper — iOS26 style */
.wdc-table-wrapper {
  margin: 1.8rem 0;
  border-radius: var(--wdc-radius);
  overflow: hidden;
  box-shadow: var(--wdc-shadow-sm);
  background: var(--wdc-card);
  /* allow horizontal scroll on small screens without breaking layout */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Override existing .wdc-table with iOS26 look (more refined) */
.wdc-table-wrapper > .wdc-table,
.wdc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--wdc-card);
}
.wdc-table-wrapper > .wdc-table th,
.wdc-table th {
  background: linear-gradient(135deg, var(--wdc-clay) 0%, var(--wdc-brick) 100%);
  color: #fff;
  font-weight: 600;
  padding: 13px 16px;
  text-align: left;
  border: none;
  border-bottom: 2px solid var(--wdc-brick);
  font-size: 14px;
  letter-spacing: 0.005em;
}
.wdc-table-wrapper > .wdc-table td,
.wdc-table td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--wdc-stone);
  vertical-align: top;
  color: var(--wdc-ink);
}
.wdc-table-wrapper > .wdc-table tr:nth-child(even) td,
.wdc-table tr:nth-child(even) td {
  background: var(--wdc-bg);
}
.wdc-table-wrapper > .wdc-table tr:hover td,
.wdc-table tr:hover td {
  background: #FFEFE4;
}
.wdc-table-wrapper > .wdc-table tr:last-child td,
.wdc-table tr:last-child td {
  border-bottom: none;
}

/* FAQ section — iOS26 group style */
.single .entry-content h2 + h3,
.single .entry-content p + h3 {
  /* H3 right after H2 (FAQ Q) — group with following <p> answer */
}

/* Wrap each FAQ Q+A naturally with subtle card */
.single .entry-content h3 {
  padding: 12px 18px 4px;
  background: var(--wdc-bg);
  border-radius: var(--wdc-radius) var(--wdc-radius) 0 0;
  margin-bottom: 0;
  margin-top: 1.4rem;
  border: 1px solid var(--wdc-stone);
  border-bottom: none;
}
.single .entry-content h3 + p {
  padding: 4px 18px 16px;
  background: var(--wdc-bg);
  border-radius: 0 0 var(--wdc-radius) var(--wdc-radius);
  margin-top: 0;
  margin-bottom: 0.8rem;
  border: 1px solid var(--wdc-stone);
  border-top: none;
  color: var(--wdc-ink);
}

/* CTA box — iOS26 glass accent */
.wdc-cta-box {
  background: linear-gradient(135deg, rgba(231,217,200,0.5) 0%, rgba(248,245,239,0.8) 100%);
  border: 1px solid rgba(217,137,73,0.25);
  border-left: 4px solid var(--wdc-orange);
  border-radius: var(--wdc-radius);
  padding: 22px 26px;
  margin: 32px 0;
  box-shadow: var(--wdc-shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wdc-cta-box h3 {
  margin: 0 0 10px !important;
  color: var(--wdc-brick) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 1.18rem !important;
}
.wdc-cta-box p {
  margin: 8px 0;
  color: var(--wdc-ink);
}
.wdc-cta-box a {
  color: var(--wdc-brick);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--wdc-orange);
  transition: color 0.18s ease;
}
.wdc-cta-box a:hover {
  color: var(--wdc-orange);
}
/* CTA box h3+p — reset FAQ card style that bleeds from article.wzd-art-body h3+p */
.wdc-cta-box h3 + p, .wzd-qbox h3 + p {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 8px 0 !important;
}

/* Category link footer */
.wdc-cat-link {
  font-size: 14px;
  color: var(--wdc-warm-gray);
  text-align: center;
  margin: 24px 0 16px;
  padding: 14px;
  background: var(--wdc-bg);
  border-radius: var(--wdc-radius);
}
.wdc-cat-link a {
  color: var(--wdc-brick);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--wdc-orange);
}

/* Strong text in body */
.single .entry-content strong {
  color: var(--wdc-brick);
  font-weight: 700;
}

/* Mobile-first sticky CTA bar (article pages only) */
.wdc-sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--wdc-stone);
  padding: 10px 14px env(safe-area-inset-bottom, 10px);
  display: none;
  gap: 8px;
  z-index: 99;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.wdc-sticky-cta a {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--wdc-radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.15s ease;
}
.wdc-sticky-cta a:active { transform: scale(0.97); }
.wdc-sticky-cta .wdc-sticky-line {
  background: #00B900; color: #fff;
}
.wdc-sticky-cta .wdc-sticky-phone {
  background: var(--wdc-brick); color: #fff;
}

@media (max-width: 768px) {
  .single .entry-content {
    padding: 0 14px 100px;
    font-size: 16px;
  }
  .single .entry-content h2 {
    font-size: 1.28rem;
    margin: 1.8rem 0 0.7rem;
  }
  .single .entry-content h3 {
    font-size: 1.05rem;
  }
  .wdc-article-cover {
    border-radius: var(--wdc-radius);
    margin: 0 -14px 22px;
    aspect-ratio: 16/11;
  }
  .wdc-article-cover img { border-radius: 0; }
  .wdc-table {
    font-size: 13px;
  }
  .wdc-table th,
  .wdc-table td {
    padding: 9px 11px;
  }
  .wdc-cta-box {
    padding: 18px 18px;
    margin: 26px -8px;
  }
  .single.single-post .wdc-sticky-cta {
    display: flex;
  }
}

@media (max-width: 480px) {
  .single .entry-content {
    font-size: 15.5px;
    line-height: 1.74;
  }
  .single .entry-content h2 {
    font-size: 1.18rem;
    padding-left: 10px;
    border-left-width: 3px;
  }
}

/* ========================================================================
   26. ARCHIVE FEATURED CARD — fixes for /บทความ/ archive page
   ====================================================================== */
/* Featured article — full-bleed image with white gradient masking source-image text on the left */
.wzd-feat {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 28px;
  min-height: 360px;
  color: var(--c-ink);
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 8px 24px rgba(40,12,10,0.06);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s;
}
.wzd-feat:hover {
  transform: translateY(-3px);
  border-color: var(--c-brick);
  box-shadow: 0 16px 40px rgba(40,12,10,0.12);
}
.wzd-feat-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  transition: transform 0.6s var(--ease-smooth);
  z-index: 1;
}
.wzd-feat:hover .wzd-feat-bg { transform: scale(1.04); }
.wzd-feat-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255,255,255,0.96) 52%, rgba(255,255,255,0.55) 72%, rgba(255,255,255,0.05) 92%, rgba(255,255,255,0) 100%);
}
.wzd-feat-body {
  position: relative;
  z-index: 3;
  padding: 40px 40px 36px;
  max-width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
}
.wzd-feat-tag {
  display: inline-flex;
  align-self: flex-start;
  background: var(--c-brick);
  color: #fff !important;
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.wzd-feat-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--c-ink) !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.01em;
  text-shadow: none;
}
.wzd-feat:hover .wzd-feat-title { color: var(--c-brick) !important; }
.wzd-feat-excerpt {
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin: 0 0 18px;
  text-shadow: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wzd-feat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--c-ink-mute);
  margin-bottom: 22px;
}
.wzd-feat-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wzd-feat-meta i { font-size: 13px; color: var(--c-brick); opacity: 0.85; }
.wzd-feat-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: var(--c-brick);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(142,37,33,0.25);
  transition: background 0.2s, transform 0.2s var(--ease-smooth), box-shadow 0.2s;
}
.wzd-feat:hover .wzd-feat-cta {
  background: var(--c-brick-deep, #6B1A17);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(142,37,33,0.40);
}
/* Tablet/mobile: white covers most of the image (vertical gradient, image peeks on top) */
@media (max-width: 900px) {
  .wzd-feat { min-height: 460px; margin-bottom: 22px; }
  .wzd-feat-bg { background-position: top center; }
  .wzd-feat-scrim {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 28%, rgba(255,255,255,0.85) 52%, #fff 68%, #fff 100%);
  }
  .wzd-feat-body { max-width: 100%; padding: 28px 24px 26px; justify-content: flex-end; min-height: 460px; }
  .wzd-feat-title { font-size: 22px !important; }
  .wzd-feat-excerpt { font-size: 13.5px; line-height: 1.65; -webkit-line-clamp: 3; }
  .wzd-feat-meta { gap: 8px 12px; font-size: 11.5px; }
}
@media (max-width: 480px) {
  .wzd-feat { min-height: 380px; }
  .wzd-feat-body { min-height: 380px; }
  .wzd-feat-title { font-size: 19px !important; }
}

/* ============================================================================
   27. ARCHIVE — Blog page (/บทความ/) overhaul
   ============================================================================ */

/* The editorial section label is a phone-only affordance. */
.wzd-mobile-articles-heading { display: none; }

/* Layout — sidebar collapses on tablet/mobile */
.wzd-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
}
@media (max-width: 1023px) {
	.wzd-blog-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Category chips — icon + label, horizontal scroll on mobile */
.wzd-blog-chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 28px;
}
.wzd-blog-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px;
	background: #fff;
	border: 1.5px solid var(--c-line-soft);
	border-radius: var(--r-pill);
	font-size: 13px; font-weight: 600;
	color: var(--c-ink-soft);
	text-decoration: none;
	transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--ease-spring);
	white-space: nowrap;
}
.wzd-blog-chip i {
	font-size: 16px; color: var(--c-brick);
	transition: color 0.18s;
}
.wzd-blog-chip:hover {
	border-color: var(--c-brick);
	color: var(--c-brick);
	transform: translateY(-1px);
}
.wzd-blog-chip.on {
	background: var(--c-brick);
	border-color: var(--c-brick);
	color: #fff;
}
.wzd-blog-chip.on i { color: #fff; }
@media (max-width: 640px) {
	.wzd-blog-chips {
		flex-wrap: nowrap; overflow-x: auto;
		margin: 0 calc(var(--pad-x) * -1) 22px; padding: 4px var(--pad-x) 8px;
		scrollbar-width: none;
	}
	.wzd-blog-chips::-webkit-scrollbar { display: none; }
	.wzd-blog-chip { flex-shrink: 0; padding: 8px 12px; font-size: 12.5px; }
}


/* Article card — clean meta line that never wraps mid-text */
.wzd-art-meta {
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	font-size: 11.5px; color: var(--c-ink-mute);
	padding-top: 12px; margin-top: auto;
	border-top: 1px solid var(--c-line-soft);
}
.wzd-art-meta-item {
	display: inline-flex; align-items: center; gap: 5px;
	white-space: nowrap;
}
.wzd-art-meta-item i { font-size: 13px; color: var(--c-brick); opacity: 0.85; }
.wzd-art { display: flex; flex-direction: column; }
.wzd-art-body { display: flex; flex-direction: column; flex: 1; }
.wzd-art-excerpt {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 38px;
}

/* ============================================================================
   26. PDP — 2-COLUMN LAYOUT + CALCULATOR VISUALIZATION (2026-06-15)
   Desktop: LEFT (gallery + info stacked) | RIGHT (sticky calculator)
   Mobile:  single-col stack, calculator at bottom (no sticky)
   ============================================================================ */
.wzd-pdp-grid.wzd-pdp-grid--2col {
	grid-template-columns: minmax(0, 1fr) 430px;
	align-items: start;
	gap: 28px;
}
.wzd-pdp-left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.wzd-pdp-grid.wzd-pdp-grid--2col .wzd-pdp-side {
	position: sticky;
	top: 88px;
	align-self: start;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--c-line-soft) transparent;
}
.wzd-pdp-grid.wzd-pdp-grid--2col .wzd-pdp-side::-webkit-scrollbar { width: 6px; }
.wzd-pdp-grid.wzd-pdp-grid--2col .wzd-pdp-side::-webkit-scrollbar-thumb { background: var(--c-line-soft); border-radius: 3px; }

/* ---------- PDP 3-COLUMN EQUAL LAYOUT (33/33/33) ---------- */
.wzd-pdp-grid.wzd-pdp-grid--3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
/* .wzd-cq wraps mid + form; display:contents makes children direct grid items while keeping data-* attrs */
.wzd-pdp-grid--3col .wzd-cq {
	display: contents;
}
.wzd-pdp-grid--3col .wzd-pdp-mid {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
	min-width: 0;
}
.wzd-pdp-grid--3col .wzd-cq-form {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--sh-card);
	min-width: 0;
}
/* Insights block embedded in middle column card */
.wzd-pdp-mid-insights {
	padding: 14px 16px;
	border-top: 1px solid var(--c-line-soft);
}
.wzd-pdp-mid-insights .wzd-insights-row { margin-bottom: 0; }
.wzd-pdp-mid-insights .wzd-insights-row + .wzd-insights-row { margin-top: 10px; }
.wzd-pdp-mid-insights .wzd-insights-grid {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 6px;
}
.wzd-pdp-mid-insights .wzd-insight { padding: 8px 10px; gap: 7px; }
.wzd-pdp-mid-insights .wzd-insight-ic { font-size: 15px; }
.wzd-pdp-mid-insights .wzd-insight-text { font-size: 12.5px; }
.wzd-pdp-mid-insights .wzd-insights-label { font-size: 12px; margin-bottom: 6px; }
.wzd-pdp-mid-insights .wzd-insights-use { margin-top: 10px; }
.wzd-pdp-mid-insights .wzd-insights-use-list { gap: 5px; margin-top: 5px; }
.wzd-pdp-mid-insights .wzd-insight-tag { font-size: 11.5px; padding: 3px 9px; }
/* Responsive breakpoints for 3-col */
@media (max-width: 1100px) {
	.wzd-pdp-grid.wzd-pdp-grid--3col { grid-template-columns: 1fr 1fr; }
	.wzd-pdp-grid.wzd-pdp-grid--3col .wzd-cq-form { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.wzd-pdp-grid.wzd-pdp-grid--3col { grid-template-columns: 1fr; }
	.wzd-pdp-grid.wzd-pdp-grid--3col .wzd-cq-form { grid-column: auto; }
}

/* ============================================================================
   iOS 26 MINIMAL — Product page: no icon boxes, clean rows, concise insights
   ============================================================================ */

/* Spec cards: flex rows (no icon box) — override double-class specificity rules */
.wzd-pdp.wzd-pdp .wzd-pdp-specs-cards,
.wzd-pdp .wzd-pdp-specs-cards {
	display: flex !important;
	flex-direction: column !important;
	padding: 0 14px !important;
	gap: 0 !important;
	grid-template-columns: unset !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card,
.wzd-pdp .wzd-pdp-spec-card {
	background: none !important;
	border: none !important;
	border-bottom: .5px solid var(--c-line-soft) !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
	gap: 9px !important;
	box-shadow: none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:last-child,
.wzd-pdp .wzd-pdp-spec-card:last-child { border-bottom: none !important; }
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-ic,
.wzd-pdp .wzd-pdp-spec-card-ic {
	width: 16px !important;
	height: 16px !important;
	background: none !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--c-ink-soft) !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
}
.wzd-pdp-spec-card-lbl {
	flex: 1;
	font-size: 12.5px;
	color: var(--c-ink-soft);
}
.wzd-pdp-spec-card-val {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--c-brick);
	text-align: right;
}
.wzd-pdp-specs-cards--tech .wzd-pdp-spec-card-val {
	color: var(--c-ink);
	font-weight: 600;
}

/* Section headings: iOS small-caps label */
.wzd-pdp-block-h {
	font-size: 11px;
	font-weight: 700;
	color: var(--c-ink-soft);
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 18px 0 8px;
}

/* Section icons (วิธีก่อ etc.): no box */
.wzd-pdp-sec-h i {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 20px;
}

/* Calculator icon: no box — override double-class specificity */
.wzd-pdp.wzd-pdp .wzd-cq-ic,
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-head .wzd-cq-ic {
	width: auto !important;
	height: auto !important;
	background: none !important;
	border-radius: 0 !important;
	border: none !important;
	font-size: 22px !important;
}

/* Insights in center column: no tinted bg, left-border color code */
.wzd-pdp-mid-insights .wzd-insights-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--c-ink-soft);
	margin-bottom: 7px;
}
.wzd-pdp-mid-insights .wzd-insights-label i,
.wzd-pdp-mid-insights .wzd-insights-label--obs i {
	color: var(--c-ink-soft);
	font-size: 13px;
}
.wzd-pdp-mid-insights .wzd-insights-grid {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 5px;
}
.wzd-pdp-mid-insights .wzd-insight--pro {
	background: none;
	border: none;
	border-left: 2px solid var(--c-teal, #1a8a6f);
	border-radius: 0;
	padding: 4px 0 4px 9px;
	gap: 6px;
}
.wzd-pdp-mid-insights .wzd-insight--obs {
	background: none;
	border: none;
	border-left: 2px solid var(--c-orange, #d97706);
	border-radius: 0;
	padding: 4px 0 4px 9px;
	gap: 6px;
}
.wzd-pdp-mid-insights .wzd-insight-ic {
	color: var(--c-ink-soft);
	font-size: 13px;
}
.wzd-pdp-mid-insights .wzd-insight-text {
	font-size: 12.5px;
	color: var(--c-ink);
	line-height: 1.4;
	font-weight: 500;
}
.wzd-pdp-mid-insights .wzd-insight-tag {
	background: none;
	border: .5px solid var(--c-line-soft);
	font-size: 11.5px;
}
.wzd-pdp-mid-insights .wzd-insight-tag i { color: var(--c-ink-soft); }
.wzd-pdp-mid-insights .wzd-insights-use-list { margin-top: 6px; }

/* ---------- PRESET CHIPS ---------- */
.wzd-cq-presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}
.wzd-cq-presets-lbl {
	font-size: 11.5px;
	color: var(--c-ink-soft);
	margin-right: 2px;
	font-weight: 500;
}
.wzd-cq-preset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 10px;
	border: 1px solid var(--c-line-soft);
	border-radius: 999px;
	background: #fff;
	color: var(--c-ink-soft);
	cursor: pointer;
	transition: all 0.15s var(--ease-spring);
	font-family: inherit;
}
.wzd-cq-preset i { font-size: 13px; color: var(--c-brick); }
.wzd-cq-preset:hover {
	background: var(--c-bg-pink, #FDF1EE);
	border-color: var(--c-brick);
	color: var(--c-brick);
	transform: translateY(-1px);
}
.wzd-cq-preset:active { transform: translateY(0); }

/* ---------- SVG VISUALIZATION (brick layout) ---------- */
.wzd-cq-viz {
	margin: 14px 18px 4px;
	background: linear-gradient(135deg, #2E2E31 0%, #1f1f22 100%);
	border-radius: var(--r-md);
	padding: 12px 14px 10px;
	color: #fff;
}
.wzd-cq-viz-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 8px;
}
.wzd-cq-viz-head i { color: var(--c-orange, #D98949); font-size: 14px; }
.wzd-cq-viz-stage {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	padding: 10px;
}
.wzd-cq-viz-stage svg {
	width: 100%;
	height: auto;
	display: block;
}
.wzd-cq-viz-legend {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.7);
}
.wzd-cq-viz-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.wzd-cq-viz-legend .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}
.wzd-cq-viz-legend .dot-brick { background: #A63B2C; }
.wzd-cq-viz-legend .dot-mortar { background: #5a5a5e; }
.wzd-cq-viz-aux {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.55);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

/* ---------- STEPS TABLE (transparent calculation) ---------- */
.wzd-cq-steps {
	margin: 12px 18px 16px;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	overflow: hidden;
	background: #fff;
}
.wzd-cq-steps > summary {
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c-brick);
	cursor: pointer;
	list-style: none;
	background: linear-gradient(180deg, #fff 0%, var(--c-bg-warm, #FBF6F1) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s, background 0.18s;
}
.wzd-cq-steps > summary::-webkit-details-marker { display: none; }
.wzd-cq-steps > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.wzd-cq-steps > summary > span > i { font-size: 14px; }
.wzd-cq-steps-chev { font-size: 14px; transition: transform 0.2s var(--ease-spring); opacity: 0.7; }
.wzd-cq-steps[open] > summary { border-bottom-color: var(--c-line-soft); }
.wzd-cq-steps[open] .wzd-cq-steps-chev { transform: rotate(180deg); }
.wzd-cq-steps-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.wzd-cq-steps-table th,
.wzd-cq-steps-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--c-line-soft);
	vertical-align: middle;
}
.wzd-cq-steps-table thead th {
	background: var(--c-bg-soft, #F7F3EE);
	font-size: 10.5px;
	color: var(--c-ink-soft);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.wzd-cq-steps-table th:first-child,
.wzd-cq-steps-table td:first-child {
	width: 36px;
	text-align: center;
	color: var(--c-ink-soft);
	font-weight: 600;
}
.wzd-cq-steps-table .r {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
}
.wzd-cq-steps-table tbody tr:last-child td {
	border-bottom: none;
	background: var(--c-bg-pink, #FDF1EE);
	font-weight: 800;
	color: var(--c-brick);
}
.wzd-cq-steps-table tbody tr:last-child td:first-child {
	color: var(--c-brick);
	font-weight: 800;
}
.wzd-cq-steps-table tbody tr:last-child td.r { color: var(--c-brick); font-size: 13px; }
.wzd-cq-steps-empty {
	text-align: center !important;
	padding: 18px 12px !important;
	color: var(--c-ink-mute, #999) !important;
	font-style: italic;
}

/* ---------- TIGHTER LEFT-COLUMN INFO (more room since we lost a column) ---------- */
.wzd-pdp-left .wzd-pdp-gallery {
	max-width: none;
}

/* ---------- MOBILE: stack everything, kill sticky ---------- */
@media (max-width: 980px) {
	.wzd-pdp-grid.wzd-pdp-grid--2col {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.wzd-pdp-grid.wzd-pdp-grid--2col .wzd-pdp-side {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.wzd-cq-viz { margin: 12px 12px 4px; }
	.wzd-cq-steps { margin: 10px 12px 14px; }
	.wzd-cq-presets-lbl { display: none; }
	.wzd-cq-preset { font-size: 11px; padding: 5px 9px; }
}

/* ---------- DESKTOP-only: gallery side-by-side with info if room ---------- */
@media (min-width: 1240px) {
	.wzd-pdp-left {
		display: grid;
		grid-template-columns: 360px minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}
	.wzd-pdp-left .wzd-pdp-gallery {
		position: sticky;
		top: 88px;
	}
}

/* ========================================================================
   27. SINGLE POST — sticky sidebar, share, hero polish
   ====================================================================== */
.wzd-art-aside { min-width: 0; position: relative; }
.wzd-art-aside-sticky {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wzd-art-aside-sticky > * { flex-shrink: 0; }

/* ── Sidebar close button ── */
.wdc-aside-close {
  display: none; /* show only on desktop */
  position: absolute;
  top: 0; right: 0;
  width: 28px; height: 28px;
  background: var(--c-bone, #f5f1ec);
  border: 1px solid var(--c-line-soft, #e4ddd6);
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-soft, #888);
  font-size: 13px;
  z-index: 10;
  transition: background 0.15s, color 0.15s;
}
.wdc-aside-close:hover { background: var(--c-brick, #8E2521); color: #fff; }
@media (min-width: 1101px) { .wdc-aside-close { display: flex; } }

/* ── Sidebar hidden state ── */
@media (min-width: 1101px) {
  .wzd-art-single.wdc-aside-hidden { grid-template-columns: 1fr; }
  .wzd-art-aside.wdc-aside-hidden { display: none; }
}

/* ── Floating re-open button ── */
.wdc-aside-open {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 56px;
  background: var(--c-brick, #8E2521);
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 90;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transition: background 0.15s, width 0.15s;
}
.wdc-aside-open:hover { background: var(--c-brick-deep, #6b1a17); width: 44px; }
@media (max-width: 1100px) { .wdc-aside-open { display: none !important; } }

/* ── CTA Box enhancements ── */
.wzd-qbox-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.wzd-qbox-t { font-size: 17px !important; }
.wzd-qbox-btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: #06C755;
  color: #fff;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s var(--ease-smooth);
  margin-bottom: 10px;
}
.wzd-qbox-btn-line:hover { background: #05a847; color: #fff; transform: translateY(-1px); }
.wzd-qbox-btn-line i { font-size: 18px; }
.wzd-qbox-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s;
}
.wzd-qbox-tel:hover { color: #fff; }
.wzd-qbox-tel i { font-size: 14px; }

/* ── Share box ── */
.wzd-art-share {
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-soft);
}
.wzd-art-share-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.wzd-art-share-label i { font-size: 14px; }
.wzd-art-share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.wzd-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--c-bg-cream, #FAF6F0);
  color: var(--c-ink);
  border: 1px solid var(--c-line-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s var(--ease-smooth), background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.wzd-share-btn i { font-size: 16px; flex-shrink: 0; }
.wzd-share-btn span { font-size: 12px; }
.wzd-share-btn--fb:hover  { background: #1877F2; color: #fff; border-color: #1877F2; transform: translateY(-1px); }
.wzd-share-btn--line:hover { background: #06C755; color: #fff; border-color: #06C755; transform: translateY(-1px); }
.wzd-share-btn--x:hover   { background: #0f1419; color: #fff; border-color: #0f1419; transform: translateY(-1px); }
.wzd-share-btn--copy:hover { background: var(--c-brick); color: #fff; border-color: var(--c-brick); transform: translateY(-1px); }
.wzd-share-btn.copied, .wzd-share-btn--copy.copied { background: #06C755; color: #fff; border-color: #06C755; }

/* ── Sidebar Related Articles ── */
.wzd-side-related {
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-soft);
}
.wzd-side-related-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.wzd-side-related-head i { font-size: 14px; }
.wzd-side-related-list {
  list-style: none;
  padding: 0; margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wzd-side-related-link {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.wzd-side-related-img {
  width: 58px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--c-bg-cream) center/cover no-repeat;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wzd-side-related-body { flex: 1; min-width: 0; }
.wzd-side-related-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-brick);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.wzd-side-related-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.wzd-side-related-link:hover .wzd-side-related-title { color: var(--c-brick); }
.wzd-side-related-item + .wzd-side-related-item {
  padding-top: 12px;
  border-top: 1px solid var(--c-line-soft);
}
.wzd-side-related-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-brick);
  text-decoration: none;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
  transition: background 0.15s, border-color 0.15s;
}
.wzd-side-related-more:hover { background: var(--c-bg-cream); border-color: var(--c-brick); }

/* Hero polish — keep long titles inside on desktop and wrap nicely on mobile */
.wzd-hero--md .wzd-hero-title {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  max-width: 880px;
  word-break: break-word;
}

/* Article body — readability tune-up */
.wzd-art-body {
  font-size: 16.5px;
  line-height: 1.92;
}
.wzd-art-body > h2:first-child,
.wzd-art-body > h3:first-child { margin-top: 0.3em; }
.wzd-art-body h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--wdc-brick, #8E2521);
  margin: 2.2rem 0 0.9rem;
  letter-spacing: -0.01em;
  padding-left: 14px;
  border-left: 4px solid var(--wdc-orange, #D98949);
  border-bottom: none;
  line-height: 1.4;
}
/* Typography only — applies to article body AND card bodies */
.wzd-art-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--wdc-clay, #A63B2C);
  margin: 1.5rem 0 0;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
/* FAQ card visual treatment — only when H3 is immediately followed by P */
article.wzd-art-body h3:has(+ p) {
  padding: 12px 18px 4px;
  background: var(--wdc-bg, #F8F5EF);
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--wdc-stone, #E7D9C8);
  border-bottom: none;
}
/* Section heading H3 (not followed by P) — clean left-accent style */
article.wzd-art-body h3:not(:has(+ p)) {
  padding: 0 0 0 12px;
  background: transparent;
  border-radius: 0;
  border: none;
  border-left: 3px solid var(--wdc-orange, #D98949);
}
/* H1 inside content (duplicate; hero already has the page H1) — style as section heading */
article.wzd-art-body h1 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--wdc-brick, #8E2521);
  margin: 0 0 1rem;
  line-height: 1.35;
}
.wzd-art-body img,
.wzd-art-body figure {
  max-width: 100%;
  height: auto;
  margin: 1.6em auto;
  display: block;
}
/* Images inside P wrappers — remove double margin, add card styling to P */
.wzd-art-body p:has(> img:only-child) {
  margin: 1.8em 0;
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(46,46,49,0.11);
  line-height: 0;
}
.wzd-art-body p > img {
  margin: 0 !important;
  width: 100%;
  height: auto;
  max-height: 80vw;
  border-radius: 0 !important;
  display: block;
}
.wzd-art-body img,
.wzd-art-body figure img {
  max-height: 80vw;
}
.wzd-art-body .wdc-table-wrapper { margin: 1.6em 0; }
/* FAQ answer card — article element only, not card bodies */
article.wzd-art-body h3:has(+ p) + p {
  padding: 6px 18px 14px;
  background: var(--wdc-bg, #F8F5EF);
  border-radius: 0 0 14px 14px;
  margin-top: 0;
  margin-bottom: 0.9rem;
  border: 1px solid var(--wdc-stone, #E7D9C8);
  border-top: none;
  color: var(--wdc-ink, #2E2E31);
}
/* Body typography */
.wzd-art-body strong { color: var(--wdc-brick, #8E2521); font-weight: 700; }
.wzd-art-body em { color: var(--wdc-clay, #A63B2C); font-style: italic; }
.wzd-art-body ul, .wzd-art-body ol { padding-left: 1.6rem; margin: 1rem 0 1.4rem; }
.wzd-art-body ul li, .wzd-art-body ol li { margin-bottom: 0.55rem; line-height: 1.72; }
.wzd-art-body ul li::marker { color: var(--wdc-orange, #D98949); }
.wzd-art-body a { color: var(--wdc-brick, #8E2521); border-bottom: 1px solid rgba(142,37,33,0.28); transition: color 0.15s, border-color 0.15s; }
.wzd-art-body a:hover { color: var(--wdc-clay, #A63B2C); border-color: rgba(166,59,44,0.4); }
/* Lead paragraph — article element only */
article.wzd-art-body > p:first-of-type {
  font-size: 17px;
  line-height: 1.85;
  color: var(--wdc-ink, #2E2E31);
  border-left: 3px solid var(--wdc-orange, #D98949);
  padding-left: 14px;
  margin-bottom: 1.6rem;
}

/* Aside stops sticking when stacking on mobile */
@media (max-width: 1100px) {
  .wzd-art-aside-sticky { position: static; }
  .wzd-art-aside { margin-top: 32px; }
}

/* ======================================================================
   28. ARTICLE — Related products: contain image, not crop
   ====================================================================== */
.wzd-art-related .wzd-prod-img {
  background: var(--c-ivory, #F8F5EF);
  border-bottom: 1px solid var(--c-line-soft);
}
.wzd-art-related .wzd-prod-img img {
  object-fit: contain;
  padding: 14px;
  transform: none !important; /* disable scale-on-hover for article context */
}
.wzd-art-related .wzd-prod:hover .wzd-prod-img img { transform: none; }
.wzd-art-related .wzd-prod-body { padding: 14px 16px 18px; }

/* ======================================================================
   29. FAQ ACCORDION — <details>/<summary> auto-generated by JS
   ====================================================================== */
.wzd-faq-wrap {
  margin: 1.6em 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wzd-faq-item {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.18s;
}
.wzd-faq-item[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.wzd-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--c-ink, #2E2E31);
  background: var(--c-ivory, #F8F5EF);
  list-style: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.5;
}
.wzd-faq-item summary::-webkit-details-marker { display: none; }
.wzd-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300;
  color: var(--c-brick, #8E2521);
  border: 1.5px solid var(--c-brick, #8E2521);
  border-radius: 50%;
  transition: transform 0.2s, background 0.15s, color 0.15s;
}
.wzd-faq-item[open] > summary {
  background: var(--c-beige, #E7D9C8);
  color: var(--c-brick, #8E2521);
}
.wzd-faq-item[open] > summary::after {
  content: '−';
  background: var(--c-brick, #8E2521);
  color: #fff;
  transform: rotate(0deg);
}
.wzd-faq-item summary:hover { background: var(--c-beige, #E7D9C8); }
.wzd-faq-body {
  padding: 4px 20px 18px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--c-ink-soft, #4A4540);
  border-top: 1px solid var(--c-line-soft);
  background: #fff;
}
.wzd-faq-body p { margin: 10px 0 0; }
.wzd-faq-body p:first-child { margin-top: 12px; }

/* ======================================================================
   30. TABLE OF CONTENTS — auto-generated by JS
   ====================================================================== */
.wzd-toc {
  background: var(--c-ivory, #F8F5EF);
  border: 1px solid var(--c-line-soft);
  border-left: 4px solid var(--c-brick, #8E2521);
  border-radius: var(--r-md, 10px);
  padding: 18px 22px 22px;
  margin: 0 0 2em;
  font-size: 16px;
}
.wzd-toc-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brick, #8E2521);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 7px;
}
.wzd-toc ol {
  margin: 0; padding: 0 0 0 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.wzd-toc li { line-height: 1.7; }
.wzd-toc a {
  color: var(--c-ink, #2E2E31);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.15s;
}
.wzd-toc a:hover { color: var(--c-brick, #8E2521); border-bottom: none; }

/* ── Product grid embedded inside article body ──────────────────────────────
   Override .wzd-art-body a border-bottom and p margin inside product cards  */
.wzd-art-body .wzd-prod-grid { margin: 2em 0; }
.wzd-art-body .wzd-prod a { border-bottom: none; color: inherit; }
.wzd-art-body .wzd-prod p { margin: 0 0 6px; }
.wzd-art-body .wzd-prod-size { font-size: 13.5px; }
.wzd-art-body .wdc-cta-box a { border-bottom: none; }

/* ============================================================================
   30. MOBILE-FIRST ARTICLE BLOCKS — WATZADU 2026
   ============================================================================ */

/* ── Quick-answer callout box ────────────────────────────────────────────── */
.wzd-art-body .article-quick-answer {
  background: linear-gradient(135deg, #FFF8EF 0%, #FFF3E5 100%);
  border-left: 5px solid var(--c-orange, #D98949);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px 18px 22px;
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.75;
  box-shadow: 0 2px 10px rgba(217,137,73,0.12);
  position: relative;
}
.wzd-art-body .article-quick-answer::before {
  content: '💡';
  position: absolute;
  top: -1px;
  left: -18px;
  background: var(--c-orange, #D98949);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}
.wzd-art-body .article-quick-answer strong { color: var(--c-brick, #8E2521); }

/* ── wp-block-image — responsive + soft shadow ───────────────────────────── */
.wzd-art-body .wp-block-image {
  margin: 28px 0;
  border-radius: 12px;
  overflow: hidden;
}
.wzd-art-body .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(46,46,49,0.11);
  margin: 0 !important;
}
.wzd-art-body .wp-block-image figcaption,
.wzd-art-body .wp-block-image .wp-element-caption {
  font-size: 12.5px;
  color: var(--c-ink-soft, #6B6661);
  text-align: center;
  padding: 10px 12px 4px;
  line-height: 1.5;
  background: transparent;
}

/* ── Mobile table scroll wrapper (added by JS) ───────────────────────────── */
.wzd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(46,46,49,0.07);
  background: #fff;
}
.wzd-table-scroll .wp-block-table {
  margin: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* ── wp-block-table — full table styling ─────────────────────────────────── */
.wzd-art-body .wp-block-table {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(46,46,49,0.07);
}
.wzd-art-body .wp-block-table table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
  background: #fff;
}
.wzd-art-body .wp-block-table thead th {
  background: linear-gradient(135deg, #6E1D1A 0%, var(--c-brick, #8E2521) 100%);
  color: #fff;
  padding: 13px 16px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
}
.wzd-art-body .wp-block-table tbody tr:nth-child(even) td {
  background: #FAF6F1;
}
.wzd-art-body .wp-block-table tbody td {
  padding: 11px 16px;
  border: none;
  border-bottom: 1px solid #EDE8E1;
  vertical-align: top;
  font-size: 14px;
}
.wzd-art-body .wp-block-table tbody tr:last-child td { border-bottom: none; }
/* is-style-stripes override — use our gradient header, not WP default */
.wzd-art-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td { background: #fff; }
.wzd-art-body .wp-block-table.is-style-stripes tbody tr:nth-child(even) td { background: #FAF6F1; }
.wzd-art-body .wp-block-table.is-style-stripes { border-color: transparent; }

/* ── wp-block-quote ──────────────────────────────────────────────────────── */
.wzd-art-body .wp-block-quote {
  border: none;
  border-left: 5px solid var(--c-orange, #D98949);
  background: linear-gradient(135deg, #FEFCF8 0%, #FEF8F0 100%);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px 20px 22px;
  margin: 28px 0;
  box-shadow: 0 2px 10px rgba(217,137,73,0.1);
  font-style: italic;
  font-size: 16px;
  color: var(--c-ink, #2E2E31);
  line-height: 1.8;
}
.wzd-art-body .wp-block-quote p { margin: 0; font-size: inherit; }
.wzd-art-body .wp-block-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--c-ink-soft, #6B6661);
}

/* ── wp-block-columns — gap + mobile stack ───────────────────────────────── */
.wzd-art-body .wp-block-columns {
  gap: 14px !important;
  margin: 24px 0;
  align-items: stretch;
}
.wzd-art-body .wp-block-column {
  border-radius: 12px;
  padding: 18px 20px !important;
  font-size: 14.5px;
  line-height: 1.72;
  min-width: 0;
}
.wzd-art-body .wp-block-column p { margin: 0; font-size: inherit; }
/* Pale-pink column → warm red tone */
.wzd-art-body .wp-block-column.has-pale-pink-background-color {
  background: #FFF0F0 !important;
  border: 1.5px solid rgba(224,85,85,0.25);
  border-top: 4px solid #E05555;
}
/* Pale-cyan column → calm blue tone */
.wzd-art-body .wp-block-column.has-pale-cyan-blue-background-color {
  background: #EBF6FF !important;
  border: 1.5px solid rgba(46,134,212,0.2);
  border-top: 4px solid #2E86D4;
}

/* ── wp-block-buttons ────────────────────────────────────────────────────── */
.wzd-art-body .wp-block-buttons {
  margin: 36px 0 !important;
  gap: 12px !important;
  justify-content: center;
  flex-wrap: wrap;
}
.wzd-art-body .wp-block-button__link {
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 13px 28px !important;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s !important;
  display: inline-block;
  border-bottom: none !important;
  text-align: center;
  letter-spacing: 0.01em;
}
.wzd-art-body .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--c-brick, #8E2521) !important;
  color: #fff !important;
}
.wzd-art-body .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: #6E1D1A !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(142,37,33,0.28);
  color: #fff !important;
}
.wzd-art-body .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--c-brick, #8E2521) !important;
  border: 2px solid var(--c-brick, #8E2521) !important;
}
.wzd-art-body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--c-brick, #8E2521) !important;
  color: #fff !important;
}

/* ── wp-block-separator ──────────────────────────────────────────────────── */
.wzd-art-body .wp-block-separator {
  border: none !important;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-line-soft, #EAE5DF) 20%, var(--c-line-soft, #EAE5DF) 80%, transparent);
  margin: 44px 0;
  opacity: 1;
}

/* ── Bottom CTA bar inside article body ─────────────────────────────────── */
.wzd-art-cta-bottom {
  margin-top: 40px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #FFF8EF 0%, #FEFCF8 100%);
  border-radius: 14px;
  border: 1px solid rgba(217,137,73,0.2);
  box-shadow: 0 2px 10px rgba(46,46,49,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── Scroll-margin for anchor targets (sticky nav offset) ─────────────────── */
.wzd-art-body h2, .wzd-art-body h3 { scroll-margin-top: 80px; }

/* ── TOC style for article ───────────────────────────────────────────────── */
.wzd-toc {
  background: #fff;
  border: 1px solid var(--c-line-soft, #EAE5DF);
  border-left: 4px solid var(--c-orange, #D98949);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
  margin: 24px 0 32px;
  box-shadow: 0 2px 10px rgba(46,46,49,0.05);
}
.wzd-toc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-ink, #2E2E31);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.wzd-toc ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wzd-toc ol li a {
  display: block;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--c-ink, #2E2E31);
  border-bottom: 1px solid var(--c-line-soft, #EAE5DF);
  transition: color 0.15s, padding-left 0.15s;
  line-height: 1.45;
  border-bottom-style: dashed;
}
.wzd-toc ol li:last-child a { border-bottom: none; }
.wzd-toc ol li a:hover {
  color: var(--c-brick, #8E2521);
  padding-left: 4px;
  border-bottom: 1px dashed var(--c-line-soft);
}

/* ============================================================================
   30a. MOBILE overrides (≤600px) — mobile-first polish
   ============================================================================ */
@media (max-width: 600px) {
  /* Article body padding reduction */
  .wzd-art-body {
    font-size: 15.5px;
    line-height: 1.85;
  }
  /* H2 smaller on phone */
  .wzd-art-body h2,
  .single .entry-content h2 {
    font-size: 1.2rem;
    padding-left: 12px;
    margin: 1.8rem 0 0.75rem;
  }
  .wzd-art-body h3,
  .single .entry-content h3 {
    font-size: 1.05rem;
  }

  /* Quick-answer: remove absolute pseudo on mobile (avoid clipping) */
  .wzd-art-body .article-quick-answer {
    padding-left: 18px;
    font-size: 14.5px;
  }
  .wzd-art-body .article-quick-answer::before { display: none; }

  /* Images: full-bleed on mobile — break out of container padding */
  .wzd-art-body .wp-block-image {
    margin-left: calc(-1 * var(--pad-x, 16px));
    margin-right: calc(-1 * var(--pad-x, 16px));
    border-radius: 0;
  }
  .wzd-art-body .wp-block-image img {
    border-radius: 0 !important;
    box-shadow: none;
  }

  /* Columns: stack vertically */
  .wzd-art-body .wp-block-columns {
    flex-direction: column !important;
  }
  .wzd-art-body .wp-block-column {
    width: 100% !important;
    flex-basis: auto !important;
  }

  /* Buttons: full-width stack */
  .wzd-art-body .wp-block-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .wzd-art-body .wp-block-button {
    width: 100%;
  }
  .wzd-art-body .wp-block-button__link {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* Quote: tighter on mobile */
  .wzd-art-body .wp-block-quote {
    padding: 16px 18px;
    font-size: 15px;
  }

  /* Bottom CTA: stack vertically */
  .wzd-art-cta-bottom {
    flex-direction: column;
    text-align: center;
    padding: 20px 18px;
  }
  .wzd-art-cta-bottom .wzd-btn {
    width: 100%;
    justify-content: center;
  }

  /* Sticky CTA: taller touch targets */
  .wdc-sticky-cta a {
    padding: 14px 10px !important;
    font-size: 14px !important;
  }

  /* TOC: compact */
  .wzd-toc { padding: 14px 16px; }
  .wzd-toc ol li a { font-size: 13px; padding: 6px 0; }
}

/* ── Tablet (601–900px) ───────────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .wzd-art-body {
    font-size: 16px;
    line-height: 1.88;
  }
  .wzd-art-body .wp-block-image {
    margin: 22px 0;
  }
  .wzd-art-body .wp-block-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ============================================================================
   31. READING PROGRESS BAR (iOS26 thin indicator — article pages only)
   ============================================================================ */
.wdc-reading-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--wdc-brick, #8E2521) 0%, var(--wdc-orange, #D98949) 100%);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* ============================================================================
   32. iOS 26 ARTICLE ENHANCEMENTS — TOC · Glass CTA · Pill Back-to-top
   · Mobile Drawer · Scroll Reveal · Table Scroll · Image Zoom
   ============================================================================ */

/* ── Article section spacing ─────────────────────────────────────────────── */
.wzd-art-section { padding-top: 40px; padding-bottom: 56px; }

/* ── Article Hero meta row ───────────────────────────────────────────────── */
.wzd-art-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  font-size: 13px; color: rgba(255,255,255,0.8);
  margin-top: 12px;
}
.wzd-art-meta-row span { display: flex; align-items: center; gap: 5px; }
.wzd-art-meta-row .ti { font-size: 14px; opacity: 0.85; }

/* ── TOC block ───────────────────────────────────────────────────────────── */
.wzd-toc-block {
  margin: 0 0 32px;
  border: 1px solid var(--c-border, #d8cfc4);
  border-left: 4px solid var(--c-brick, #8E2521);
  border-radius: var(--r-lg, 14px);
  background: var(--c-ivory, #F8F5EF);
  overflow: hidden;
}
.wzd-toc-toggle-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 18px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700;
  color: var(--c-charcoal, #2E2E31);
  text-align: left;
  transition: background 0.15s;
}
.wzd-toc-toggle-btn:hover { background: rgba(0,0,0,0.04); }
.wzd-toc-icon { font-size: 18px; color: var(--c-brick, #8E2521); flex-shrink:0; }
.wzd-toc-label { flex: 1; }
.wzd-toc-label em { font-style: normal; font-weight: 400; color: var(--c-text-muted, #888); font-size: 12px; margin-left: 4px; }
.wzd-toc-chevron { font-size: 16px; transition: transform 0.25s var(--ease-spring, ease); }
.wzd-toc-list {
  margin: 0; padding: 6px 18px 16px 18px;
  list-style: none; border-top: 1px solid var(--c-border, #e0d8ce);
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 600px; opacity: 1;
}
.wzd-toc-list.wzd-toc-list--hidden { max-height: 0; opacity: 0; padding-bottom: 0; border-top: none; }
.wzd-toc-list li { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--c-border-soft, rgba(0,0,0,0.06)); }
.wzd-toc-list li:last-child { border-bottom: none; }
.wzd-toc-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--c-brick, #8E2521); color: #fff;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  margin-right: 8px; flex-shrink: 0;
}
.wzd-toc-link {
  display: flex; align-items: center;
  font-size: 14px; color: var(--c-charcoal, #2E2E31);
  text-decoration: none; padding: 4px 6px;
  border-radius: var(--r-sm, 6px);
  transition: background 0.15s, color 0.15s;
}
.wzd-toc-link:hover { background: rgba(142,37,33,0.08); color: var(--c-brick, #8E2521); text-decoration: none; }
.wzd-toc-link.is-active {
  background: rgba(142,37,33,0.12);
  color: var(--c-brick, #8E2521);
  font-weight: 600;
}
.wzd-toc-link.is-active .wzd-toc-num { background: var(--c-terra, #C86B44); }

/* H3 sub-items in TOC */
.wzd-toc-item--h3 { list-style: none; }
.wzd-toc-link--h3 {
  padding-left: 36px;
  font-size: 13px;
  color: var(--c-ink-soft, #5C5C61);
  gap: 8px;
}
.wzd-toc-link--h3:hover { color: var(--c-brick, #8E2521); }
.wzd-toc-link--h3.is-active { color: var(--c-brick, #8E2521); font-weight: 500; background: rgba(142,37,33,0.07); }
.wzd-toc-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-terra, #C86B44); flex-shrink: 0; margin-top: 1px;
}
.wzd-toc-link--h3.is-active .wzd-toc-dot { background: var(--c-brick, #8E2521); }

/* ── Table horizontal scroll wrapper ────────────────────────────────────── */
.wzd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--c-border, #d8cfc4);
}
.wzd-table-scroll table,
.wzd-table-scroll figure { margin: 0 !important; border-radius: 0 !important; border: none !important; }

/* ── Scroll-reveal animation ─────────────────────────────────────────────── */
.wdc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-spring, ease);
}
.wdc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Back-to-top pill (iOS 26 style) ─────────────────────────────────────── */
.wdc-back-top {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px 10px 14px;
  background: var(--c-charcoal, #2E2E31);
  color: #fff;
  border: none; border-radius: var(--r-pill, 999px);
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  z-index: 8990;
  opacity: 0; transform: translateY(8px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-spring, ease), background 0.15s;
}
.wdc-back-top .ti { font-size: 16px; }
.wdc-back-top:hover { background: var(--c-brick, #8E2521); }
.wdc-back-top.is-visible {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (max-width: 600px) {
  .wdc-back-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); right: 14px; padding: 9px 14px 9px 12px; font-size: 12px; }
  .wdc-back-top span { display: none; }
}

/* ── Mobile sticky CTA — iOS 26 glass ────────────────────────────────────── */
.wdc-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px;
  background: rgba(46,46,49,0.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.wdc-sticky-line,
.wdc-sticky-phone {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 10px;
  border-radius: var(--r-lg, 14px);
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s var(--ease-spring, ease), opacity 0.15s;
}
.wdc-sticky-line:hover, .wdc-sticky-phone:hover { opacity: 0.88; transform: scale(0.97); }
.wdc-sticky-line { background: #06C755; color: #fff; }
.wdc-sticky-phone { background: var(--c-brick, #8E2521); color: #fff; }
.wdc-sticky-line .ti, .wdc-sticky-phone .ti { font-size: 18px; }
@media (min-width: 1101px) { .wdc-sticky-cta { display: none !important; } }
@media (max-width: 1100px) { .wdc-sticky-cta { display: flex; } }
@media (max-width: 380px) {
  .wdc-sticky-line span, .wdc-sticky-phone span { font-size: 12px; }
}

/* ── Mobile TOC pill button ───────────────────────────────────────────────── */
.wdc-toc-pill {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: none;
  flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 12px;
  background: rgba(46,46,49,0.78);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-xl, 18px);
  font-size: 11px; font-weight: 600;
  cursor: pointer; z-index: 8980;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.2s var(--ease-spring, ease);
}
.wdc-toc-pill .ti { font-size: 20px; }
.wdc-toc-pill:hover { background: rgba(142,37,33,0.85); }
@media (max-width: 1100px) { .wdc-toc-pill { display: flex; } }
@media (min-width: 1101px) { .wdc-toc-pill { display: none !important; } }

/* ── Mobile TOC Drawer ────────────────────────────────────────────────────── */
.wdc-toc-overlay {
  position: fixed; inset: 0; z-index: 9010;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.3s ease;
}
.wdc-toc-overlay.is-open {
  background: rgba(0,0,0,0.45);
  pointer-events: auto;
}
.wdc-toc-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9020;
  background: rgba(30,30,33,0.9);
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  max-height: 70vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.wdc-toc-drawer.is-open { transform: translateY(0); }
.wdc-toc-drawer-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  margin: 12px auto 8px;
  flex-shrink: 0;
}
.wdc-toc-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 12px;
  font-size: 15px; font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.wdc-toc-drawer-head .ti { margin-right: 6px; color: var(--c-orange, #D98949); }
.wdc-toc-drawer-close {
  background: rgba(255,255,255,0.1); border: none;
  border-radius: 50%; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; font-size: 16px;
  transition: background 0.15s;
}
.wdc-toc-drawer-close:hover { background: rgba(255,255,255,0.2); }
.wdc-toc-drawer-list {
  margin: 0; padding: 10px 16px 6px;
  list-style: none; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.wdc-toc-drawer-list li { margin: 0; padding: 2px 0; }
.wdc-toc-drawer-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.88);
  text-decoration: none; border-radius: var(--r-md, 10px);
  transition: background 0.15s, color 0.15s;
}
.wdc-toc-drawer-list a:hover,
.wdc-toc-drawer-list a.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.wdc-toc-drawer-list a.is-active .wzd-toc-num { background: var(--c-orange, #D98949); }
.wdc-toc-drawer-list .wzd-toc-num {
  background: rgba(142,37,33,0.7); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
body.wdc-drawer-open { overflow: hidden; }

/* ── Image zoom overlay (mobile tap-to-zoom) ─────────────────────────────── */
.wdc-img-zoom-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: background 0.25s ease;
  cursor: zoom-out;
}
.wdc-img-zoom-overlay.is-visible { background: rgba(0,0,0,0.88); }
.wdc-img-zoom-overlay img {
  max-width: 100%; max-height: 90vh;
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  transform: scale(0.9);
  transition: transform 0.3s var(--ease-spring, ease);
}
.wdc-img-zoom-overlay.is-visible img { transform: scale(1); }

/* ── Responsive / tablet override ────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* hide inline desktop TOC block — use pill+drawer instead */
  .wzd-toc-block { display: none; }
  /* body padding for sticky CTA */
  body.single { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1101px) {
  /* hide mobile pill (already hidden by default, belt+suspenders) */
  .wdc-toc-pill, .wdc-toc-drawer, .wdc-toc-overlay { display: none !important; }
  /* show desktop TOC block */
  .wzd-toc-block { display: block; }
}

/* ── Article body: h2 anchor offset for sticky bar ──────────────────────── */
.wzd-art-body h2[id],
.wzd-art-body h3[id] {
  scroll-margin-top: 80px;
}

/* ── Article CTA bottom ──────────────────────────────────────────────────── */
.wzd-art-cta-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px; padding: 20px 24px;
  background: var(--c-ivory, #F8F5EF);
  border: 1px solid var(--c-border, #d8cfc4);
  border-radius: var(--r-xl, 18px);
}
.wzd-art-cta-bottom-info {
  display: flex; align-items: flex-start; gap: 12px;
}
.wzd-art-cta-bottom-info > .ti { font-size: 28px; color: var(--c-brick, #8E2521); margin-top: 2px; flex-shrink: 0; }
.wzd-art-cta-bottom-t { font-size: 16px; font-weight: 700; color: var(--c-charcoal, #2E2E31); }
.wzd-art-cta-bottom-s { font-size: 13px; color: var(--c-text-muted, #666); margin-top: 3px; }
@media (max-width: 600px) {
  .wzd-art-cta-bottom { flex-direction: column; align-items: flex-start; }
  .wzd-art-cta-bottom .wzd-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   32. BACK-TO-TOP BUTTON (floating, appears after 400px scroll)
   ============================================================================ */
.wdc-back-top {
  position: fixed;
  right: 18px;
  bottom: 96px;
  width: 44px; height: 44px;
  background: var(--wdc-brick, #8E2521);
  color: #fff;
  border-radius: 50%;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s;
  z-index: 89;
  box-shadow: 0 4px 16px rgba(142,37,33,0.28);
}
.wdc-back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wdc-back-top:hover { background: var(--wdc-clay, #A63B2C); }
.wdc-back-top:active { transform: scale(0.93); }
@media (max-width: 768px) {
  .wdc-back-top { bottom: 84px; right: 12px; width: 42px; height: 42px; font-size: 18px; }
}

/* ============================================================================
   33. ARTICLE META ROW — replaces inline styles in single.php hero
   ============================================================================ */
.wzd-art-meta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-ink-soft, #6B6661);
}
.wzd-art-meta-row i { margin-right: 5px; color: var(--c-brick, #8E2521); }
@media (max-width: 480px) { .wzd-art-meta-row { gap: 12px; font-size: 12.5px; } }

/* ============================================================================
   34. STICKY CTA — extend to 820px to cover large-phone landscape
   ============================================================================ */
@media (min-width: 769px) and (max-width: 820px) {
  .single.single-post .wdc-sticky-cta { display: flex; }
  body.single-post { padding-bottom: 80px; }
}

/* ============================================================================
   35. SCROLL REVEAL (added by JS — gracefully degrades without JS)
   ============================================================================ */
.wdc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wdc-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .wdc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================
   36. ARTICLE H2/H3 MOBILE (≤600px) — override from section 30a
   ============================================================================ */
@media (max-width: 600px) {
  .wzd-art-body h2 {
    font-size: 1.2rem;
    padding-left: 12px;
    border-left-width: 3px;
    margin: 1.8rem 0 0.75rem;
  }
  .wzd-art-body h3 { font-size: 1.05rem; }
  article.wzd-art-body h3:has(+ p) { padding: 10px 14px 4px; }
  article.wzd-art-body h3:has(+ p) + p { padding: 4px 14px 12px; }
  article.wzd-art-body > p:first-of-type { font-size: 16px; padding-left: 12px; }
}

/* ============================================================================
   37. PRODUCT CATEGORY — Mobile-First iOS 26 (2026-06-16)
   ============================================================================ */

/* ── 37a. Category tabs → horizontal scroll-snap strip (≤767px) ── */
@media (max-width: 767px) {
  .wzd-cat-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 9px;
    padding: 4px var(--pad-x, 20px) 10px;
    margin-left: calc(-1 * var(--pad-x, 20px));
    margin-right: calc(-1 * var(--pad-x, 20px));
    margin-bottom: 20px;
    scrollbar-width: none;
  }
  .wzd-cat-tabs::-webkit-scrollbar { display: none; }

  .wzd-cat-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 78px;
    min-height: 90px;
    padding: 10px 6px 9px;
    gap: 6px;
    border-radius: 14px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .wzd-cat-tab-ic {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }
  .wzd-cat-tab-t {
    font-size: 10.5px;
    line-height: 1.25;
  }
}

/* ── 37b. Toolbar — sticky glass bar on mobile ── */
@media (max-width: 880px) {
  .wzd-cat-toolbar {
    position: sticky;
    top: 62px;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    margin-left: calc(-1 * var(--pad-x, 20px));
    margin-right: calc(-1 * var(--pad-x, 20px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 8px var(--pad-x, 20px);
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 7px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
    margin-bottom: 14px;
  }
  .wzd-cat-count           { grid-column: 1; grid-row: 1; align-self: center; }
  .wzd-cat-toolbar-filter  { grid-column: 2; grid-row: 1; min-height: 36px; padding: 6px 12px; border-radius: 10px; }
  .wzd-cat-toolbar-sort    { grid-column: 3; grid-row: 1; min-height: 36px; padding: 5px 10px; border-radius: 10px; }
  .wzd-cat-toolbar-search  { grid-column: 1 / -1; grid-row: 2; order: unset; }
  .wzd-cat-toolbar-search input {
    height: 40px;
    font-size: 16px; /* prevent iOS auto-zoom */
    border-radius: 10px;
  }
}

/* ── 37c. Filter bottom sheet — iOS 26 glass + drag handle ── */
@media (max-width: 880px) {
  .wzd-cat-filter {
    border-radius: 22px 22px 0 0;
    padding-top: 6px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: rgba(248, 246, 244, 0.97);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    max-height: 88vh;
  }
  .wzd-cat-filter-head {
    position: relative;
    padding-top: 22px;
    margin-bottom: 12px;
  }
  /* Drag handle */
  .wzd-cat-filter-head::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
  }
  .wzd-filter-link {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .wzd-cat-filter .wzd-filter-acc summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 37d. Filter overlay — subtle blur backdrop ── */
@media (max-width: 880px) {
  .wzd-filter-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

/* ── 37e. Product cards — compact + touch-friendly on mobile ── */
@media (max-width: 640px) {
  .wzd-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wzd-cat-grid .wzd-prod-img {
    padding: 10px;
  }
  .wzd-cat-grid .wzd-prod-body {
    padding: 10px 10px 12px;
  }
  .wzd-cat-grid .wzd-prod-cat-tag {
    font-size: 10.5px;
    padding: 3px 8px;
    margin-bottom: 5px;
  }
  .wzd-cat-grid .wzd-prod-name {
    font-size: 13px;
    min-height: 34px;
    margin-bottom: 4px;
  }
  .wzd-cat-grid .wzd-prod-meta { display: none; }
  .wzd-cat-grid .wzd-prod-link {
    font-size: 12px;
    padding: 9px 8px;
    min-height: 40px;
    border-radius: 10px;
  }
  /* List view → keep 2-col on mobile */
  .wzd-cat-grid.is-list                  { grid-template-columns: repeat(2, 1fr); }
  .wzd-cat-grid.is-list .wzd-prod        { flex-direction: column; }
  .wzd-cat-grid.is-list .wzd-prod-body   { padding: 10px 10px 12px; }
  .wzd-cat-grid.is-list .wzd-prod-img    { aspect-ratio: 4/3; }
}

/* ── 37f. Compare bar — iOS safe-area bottom padding ── */
.wzd-compare-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ── 37g. Cat intro — truncate with expand toggle on mobile ── */
@media (max-width: 640px) {
  .wzd-cat-intro {
    padding: 13px 16px;
    font-size: 13.5px;
    margin-bottom: 14px;
    cursor: pointer;
  }
  .wzd-cat-intro:not(.wzd-cat-intro--exp) p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wzd-cat-intro-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-brick);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .wzd-cat-intro-toggle i {
    font-size: 14px;
    transition: transform 0.22s;
  }
  .wzd-cat-intro--exp .wzd-cat-intro-toggle i { transform: rotate(180deg); }
}
@media (min-width: 641px) {
  .wzd-cat-intro-toggle { display: none !important; }
}

/* ── 37h. How-to-order steps — 2-col grid on mobile ── */
@media (max-width: 640px) {
  .wzd-pdp-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .wzd-pdp-steps .wzd-step {
    flex: none;
    background: #fff;
    border: 1px solid var(--c-line-soft);
    border-radius: 14px;
    padding: 16px 12px 14px;
    text-align: left;
    box-shadow: var(--sh-soft);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 37i. Features 3-col → 1-col on mobile ── */
@media (max-width: 640px) {
  .wzd-pdp-grid-3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wzd-pdp-mini {
    padding: 16px 18px;
    border-radius: 14px;
  }
  .wzd-pdp-sec-h {
    font-size: 17px;
  }
}

/* ── 37j. FAQ — bigger touch targets ── */
@media (max-width: 640px) {
  .wzd-pdp-faq details summary {
    padding: 14px 44px 14px 16px;
    font-size: 14px;
  }
  .wzd-pdp-faq details p {
    font-size: 13.5px;
    padding: 0 16px 14px;
  }
}

/* ── 37k. Sticky mobile CTA bar on category page ── */
.wzd-cat-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 198;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.wzd-cat-sticky.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.wzd-cat-sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s;
}
.wzd-cat-sticky-btn:active { filter: brightness(0.88); }
.wzd-cat-sticky-line  { background: #06C755; color: #fff; }
.wzd-cat-sticky-tel   { background: var(--c-brick, #8E2521); color: #fff; }
.wzd-cat-sticky i     { font-size: 19px; flex-shrink: 0; }
@media (min-width: 768px) { .wzd-cat-sticky { display: none !important; } }

/* ── 37l. Bottom padding on last section so sticky bar doesn't cover content ── */
@media (max-width: 767px) {
  body:has(.wzd-cat-sticky.is-visible) .wzd-section:last-of-type {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* === Internal Product Links block (added 2026-06-17) === */
.wdc-product-links {
  font-size: 13px;
  color: var(--wdc-warm-gray, #6B6661);
  margin: 0 0 4px;
  padding: 10px 14px;
  background: var(--wdc-bg, #F8F5EF);
  border-left: 3px solid var(--wdc-orange, #D98949);
  border-radius: 0 var(--wdc-radius, 8px) var(--wdc-radius, 8px) 0;
}
.wdc-product-links a {
  color: var(--wdc-brick, #8E2521);
  text-decoration: none;
  font-weight: 600;
}
.wdc-product-links a:hover { text-decoration: underline; }

/* วัสดุทนไฟ — ขอราคารวมส่ง label */
.wdc-poa-price {
  display: inline-block;
  font-size: var(--wdc-fs-base, 15px);
  color: var(--wdc-warm-gray, #6B6661);
}
.wdc-poa-price a {
  color: var(--wdc-brick, #8E2521);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wdc-poa-price a:hover { text-decoration: underline; }

/* ============================================================================
   MOBILE FONT SIZE — minimum readable (2026-06-19)
   ============================================================================ */
@media (max-width: 700px) {
	.wzd-art-excerpt  { font-size: 14px; }
	.wzd-art-meta     { font-size: 13px; }
	.wzd-art-tag      { font-size: 12px; }
	.wzd-prod-size    { font-size: 13.5px; }
	.wzd-step-d       { font-size: 13.5px; }
	.wzd-trust-d      { font-size: 13px; }
	.wzd-catmini-desc { font-size: 13px; }
}

/* ============================================================================
   CONTACT PAGE V3 — clean 2-section layout
   ============================================================================ */

/* Section 1: 2-col main grid */
.wdc-ct-main {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 56px;
	align-items: start;
}

/* Left heading */
.wdc-ct-heading { margin-bottom: 28px; }
.wdc-ct-heading h2 {
	font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--c-ink);
}
.wdc-ct-heading p {
	font-size: 14px; color: var(--c-ink-soft); margin: 0; line-height: 1.65;
}

/* Channel list — stacked rows inside a single card */
.wdc-ct-channels {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-xl);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sh-card);
}
.wdc-ct-ch {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	text-decoration: none;
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-line-soft);
	transition: background 0.14s;
}
.wdc-ct-ch:last-child { border-bottom: none; }
a.wdc-ct-ch:hover { background: var(--c-bg-soft); }

.wdc-ct-ch-ic {
	width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
	background: rgba(142,37,33,0.08); color: var(--c-brick);
	font-size: 20px;
	display: flex; align-items: center; justify-content: center;
}
.wdc-ct-ch-ic--line  { background: rgba(6,166,72,0.10);  color: #06A648; }
.wdc-ct-ch-ic--email { background: rgba(46,46,49,0.07);   color: var(--c-charcoal); }
.wdc-ct-ch-ic--hours { background: rgba(217,137,73,0.10); color: var(--c-orange); }

.wdc-ct-ch-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wdc-ct-ch-lbl { font-size: 12px; color: var(--c-ink-soft); font-weight: 500; }
.wdc-ct-ch-val { font-size: 15px; font-weight: 700; color: var(--c-ink); }
a.wdc-ct-ch:hover .wdc-ct-ch-val         { color: var(--c-brick); }
a.wdc-ct-ch--line:hover .wdc-ct-ch-val   { color: #06A648; }
a.wdc-ct-ch--email:hover .wdc-ct-ch-val  { color: var(--c-charcoal); }

.wdc-ct-ch-arr {
	font-size: 18px; color: var(--c-gray); flex-shrink: 0;
	transition: transform 0.14s;
}
a.wdc-ct-ch:hover .wdc-ct-ch-arr { transform: translateX(3px); color: var(--c-brick); }

/* Right CTA card */
.wdc-ct-cta {
	background: var(--c-brick);
	border-radius: var(--r-xl);
	padding: 32px;
	color: #fff;
	box-shadow: 0 10px 32px rgba(142,37,33,0.28);
	position: sticky;
	top: 90px;
}
.wdc-ct-cta-icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: rgba(255,255,255,0.18); font-size: 26px; color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.wdc-ct-cta h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: #fff !important; }
.wdc-ct-cta p  { font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.65; margin: 0 0 18px; }

.wdc-ct-checks {
	list-style: none; padding: 0; margin: 0 0 22px;
	display: flex; flex-direction: column; gap: 9px;
}
.wdc-ct-checks li {
	display: flex; align-items: center; gap: 8px;
	font-size: 13.5px; color: rgba(255,255,255,0.92); font-weight: 500;
}
.wdc-ct-checks li i { color: var(--c-orange); font-size: 16px; flex-shrink: 0; }

.wdc-ct-cta-btn {
	width: 100%; justify-content: center;
	background: #fff !important;
	color: var(--c-brick) !important;
	box-shadow: none;
	font-weight: 700;
}
.wdc-ct-cta-btn:hover { background: var(--c-bg-soft) !important; transform: none; }

.wdc-ct-cta-line {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 12px; padding: 11px 16px;
	font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.88);
	text-decoration: none;
	border: 1.5px solid rgba(255,255,255,0.32);
	border-radius: var(--r-lg);
	transition: background 0.14s, color 0.14s;
}
.wdc-ct-cta-line i { color: #4ade80; font-size: 18px; }
.wdc-ct-cta-line:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Section 2: 2-col FAQ + Why */
.wdc-ct-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.wdc-ct-sub-h {
	font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--c-ink);
}

/* Why WDC list */
.wdc-ct-why-list { display: flex; flex-direction: column; gap: 22px; }
.wdc-ct-why-row { display: flex; gap: 14px; align-items: flex-start; }
.wdc-ct-why-row > i {
	font-size: 22px; color: var(--c-brick); margin-top: 2px; flex-shrink: 0;
}
.wdc-ct-why-row div { display: flex; flex-direction: column; gap: 3px; }
.wdc-ct-why-row strong { font-size: 14px; font-weight: 700; color: var(--c-ink); display: block; }
.wdc-ct-why-row span  { font-size: 13px; color: var(--c-ink-soft); line-height: 1.6; }

/* Responsive: tablet */
@media (max-width: 960px) {
	.wdc-ct-main   { grid-template-columns: 1fr; gap: 32px; }
	.wdc-ct-cta    { position: static; max-width: 480px; }
	.wdc-ct-bottom { grid-template-columns: 1fr; gap: 36px; }
}

/* Responsive: mobile */
@media (max-width: 600px) {
	.wdc-ct-cta    { padding: 24px 20px; }
	.wdc-ct-heading h2 { font-size: 22px; }
	.wdc-ct-ch     { padding: 15px 16px; gap: 12px; }
	.wdc-ct-ch-ic  { width: 40px; height: 40px; font-size: 18px; }
	.wdc-ct-ch-val { font-size: 14px; }
}



/* ================================================================
   WATZADU 2026 — style-v2 merged into style.css (2026-06-22)
   (was: assets/style-v2.css 4516 lines / 204KB)
   ================================================================ */
/* ===========================================================
   WATZADU 2026 — Style v2 overrides
   Loaded AFTER assets/style.css. Adds new components + overrides.
   ----------------------------------------------------------- */

/* ===========================================================
   CI BRANDBOOK 2026 — official palette + typography
   Source: WDC CI Brandbook (Color Palette pp.5/10, Typography pp.6/10)
   Usage ratio: Primary 60% / Neutral 25% / Accent 15%
   ----------------------------------------------------------- */
:root{
	/* === CI Color Palette (exact hex from Brandbook) === */
	--c-brick:        #8E2521 !important;  /* Brick Red — Primary */
	--c-brick-deep:   #6e1e1b !important;  /* Brick darken — hover/depth */
	--c-clay:         #A63B2C !important;  /* Deep Clay — secondary */
	--c-terracotta:   #C86B44 !important;  /* Terracotta — warm secondary */
	--c-orange:       #D98949 !important;  /* Warm Orange — Accent */
	--c-orange-dk:    #C86B44 !important;  /* Orange depth = Terracotta */
	--c-charcoal:     #2E2E31 !important;  /* Charcoal — text/headings */
	--c-ink:          #2E2E31 !important;  /* Body ink */
	--c-ink-soft:     #6B6661 !important;  /* Secondary text */
	--c-ink-mute:     #9C8F86 !important;  /* Tertiary text */
	--c-beige:        #E7D9C8 !important;  /* Stone Beige */
	--c-ivory:        #F8F5EF !important;  /* Ivory White — surface */
	--c-warmgray:     #B7ACA3 !important;  /* Warm Gray */
	--c-bg-soft:      #F8F5EF !important;  /* Soft bg = ivory */
	--c-line:         #E7D9C8 !important;  /* Lines = beige */
	--c-line-strong:  #B7ACA3 !important;  /* Strong lines = warm gray */

	/* === CI Typography — Brandbook v10 === */
	--font-display: "Montserrat", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-thai:    "Noto Sans Thai", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-en:      "Inter", "Noto Sans Thai", system-ui, sans-serif;

	/* === Fluid type scale === */
	--fs-h1: clamp(28px, 4.2vw, 48px);
	--fs-h2: clamp(22px, 3vw, 32px);
	--fs-h3: clamp(17px, 1.7vw, 22px);
	--fs-body: 16px;
	--fs-meta: 14px;
	--fs-small: 13px;

	/* === Surface & glass === */
	--c-glass: rgba(255,255,255,0.78);
	--c-glass-strong: rgba(255,255,255,0.92);
	--c-glass-border: rgba(46,46,49,0.10);

	/* === Elevation (charcoal-tinted, soft) === */
	--shadow-dock: 0 10px 30px -8px rgba(46,46,49,.28), 0 2px 8px rgba(46,46,49,.10);
	--shadow-card: 0 2px 14px -4px rgba(46,46,49,.10), 0 1px 3px rgba(46,46,49,.06);
	--shadow-card-hover: 0 18px 40px -12px rgba(46,46,49,.18), 0 4px 12px rgba(46,46,49,.08);
	--shadow-brick: 0 6px 20px -4px rgba(142,37,33,.30), 0 2px 6px rgba(142,37,33,.18);
	--shadow-brick-hover: 0 10px 30px -6px rgba(142,37,33,.40), 0 4px 10px rgba(142,37,33,.22);

	/* === Radius (CI base 16px / cards) === */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-2xl: 24px;
	--r-pill: 999px;
}

/* Force CI font-family on body and headings */
body,
body.theme-watzadu2026,
body.woocommerce{
	font-family: var(--font-thai) !important;
	color: var(--c-charcoal) !important;
}
h1,h2,h3,h4,h5,h6,
.wzd-h1,.wzd-h2,.wzd-h3{
	font-family: var(--font-thai) !important;
	color: var(--c-charcoal) !important;
}
/* English headings / numerics use Montserrat */
.wzd-hero-eyebrow,
.wzd-brand-watzadu,
.wzd-brand-wdc,
.wzd-pillar-num,
.wzd-stat-num,
.wzd-step-num,
.wzd-cnum,
.wzd-pdp-price,
.wzd-cq-out strong{
	font-family: var(--font-en) !important;
}

/* CI primary button — use Brick + brick shadow */
.wzd-btn.wzd-btn--primary,
.wzd-btn.wzd-btn--primary:link,
.wzd-btn.wzd-btn--primary:visited{
	background: var(--c-brick) !important;
	color:#fff !important;
	box-shadow: var(--shadow-brick) !important;
}
.wzd-btn.wzd-btn--primary:hover,
.wzd-btn.wzd-btn--primary:focus{
	background: var(--c-brick-deep) !important;
	box-shadow: var(--shadow-brick-hover) !important;
}
.wzd-btn.wzd-btn--orange{
	background: var(--c-orange) !important;
	color:#fff !important;
}
.wzd-btn.wzd-btn--orange:hover{
	background: var(--c-terracotta) !important;
}
.wzd-btn.wzd-btn--outline{
	border-color: var(--c-brick) !important;
	color: var(--c-brick) !important;
}
.wzd-btn.wzd-btn--outline:hover{
	background: var(--c-brick) !important;
	color:#fff !important;
}

/* Skip link for a11y */
.wzd-skip{position:absolute;left:-9999px;top:0;background:var(--c-brick,#8E2521);color:#fff;padding:10px 16px;z-index:9999;border-radius:0 0 8px 0}
.wzd-skip:focus{left:0}

/* Hide ALL third-party language switchers (keep ONLY .wzd-lang-pill in header) */
.wpml-ls-statics-shortcode_actions,
.wpml-ls-legacy-list-horizontal,
.gtranslate_wrapper,
#gtranslate_wrapper,
.gt_container,
.gt_float_switcher,
.gt_selector,
.gt_widget,
.gt-current-lang,
.gt-selector-wrapper,
.gtranslate-wrapper,
[class^="gt_"],
[id^="gt_"],
.glink,
.gt_languages,
.qtranxs_widget,
.polylang-switcher,
.weglot-container,
.trp-language-switcher,
#google_translate_element,
.goog-te-banner-frame,
.goog-te-menu-frame{display:none !important;visibility:hidden !important;pointer-events:none !important}
body{top:0 !important}  /* fix Google Translate body offset */

/* ===========================================================
   HEADER — single language pill
   ----------------------------------------------------------- */
.wzd-lang-pill{
	display:inline-flex;align-items:center;gap:0;
	background:var(--c-glass);border:1px solid var(--c-glass-border);
	border-radius:999px;padding:3px;backdrop-filter:saturate(160%) blur(8px);
	-webkit-backdrop-filter:saturate(160%) blur(8px);
}
.wzd-lang-opt{
	font-size:12px;font-weight:600;letter-spacing:.02em;
	padding:6px 12px;border-radius:999px;color:var(--c-charcoal,#2E2E31);
	text-decoration:none;line-height:1;transition:background .15s,color .15s;
}
.wzd-lang-opt:hover{background:rgba(46,46,49,.06)}
.wzd-lang-opt.wzd-lang-opt--on{background:var(--c-brick,#8E2521);color:#fff}
.wzd-lang-pill--drawer{padding:4px}
.wzd-lang-pill--drawer .wzd-lang-opt{padding:8px 14px;font-size:13px}
.wzd-drawer-lang{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid rgba(46,46,49,.06);border-bottom:1px solid rgba(46,46,49,.06);margin:8px 0}
.wzd-drawer-lang-label{font-size:13px;color:var(--c-ink-soft,#6B6661);font-weight:500}
.wzd-drawer-section{padding:14px 20px 6px;font-size:11px;font-weight:600;color:var(--c-ink-soft,#6B6661);text-transform:uppercase;letter-spacing:.06em}
.wzd-drawer-sub a{padding-left:36px !important;font-size:14px !important}

@media (max-width:980px){
	.wzd-lang-pill:not(.wzd-lang-pill--drawer){display:none}
}

/* Mega-menu (desktop only) */
.wzd-nav-menu{position:relative}
.wzd-nav-items > li.wzd-has-mega{position:static}
.wzd-has-mega > a{position:relative}
.wzd-has-mega > a::after{content:'';position:absolute;left:-20px;right:-20px;top:100%;height:12px}
.wzd-has-mega > a .wzd-arrow{margin-left:4px;opacity:.7;font-size:11px}
.wzd-mega{
	position:absolute;top:100%;left:0;
	min-width:480px;max-width:720px;
	background:#fff;border:1px solid var(--c-glass-border);
	border-radius:14px;box-shadow:var(--shadow-card-hover);
	padding:18px;display:none;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;
	z-index:60;margin-top:8px;
}
.wzd-mega--5col{
	width:1020px;max-width:calc(100vw - 32px);
	grid-template-columns:1.4fr 1.1fr 1.2fr 1.1fr 1fr;
	gap:0;padding:0;overflow:hidden;
}
.wzd-mega--5col .wzd-mega-col{
	padding:16px 14px;border-right:1px solid rgba(46,46,49,.06);
}
.wzd-mega--5col .wzd-mega-col:last-child{
	border-right:none;background:var(--c-ivory,#F8F5EF);border-radius:0 14px 14px 0;
}
/* ── 4-col mega (Design ① 2026-07) ── */
.wzd-mega--4col{
	width:820px;max-width:calc(100vw - 32px);
	grid-template-columns:1.1fr 1.35fr 1fr 0.95fr;
	gap:0;padding:0;overflow:hidden;
}
.wzd-mega--4col .wzd-mega-col{
	padding:18px 16px;border-right:1px solid rgba(46,46,49,.06);
}
.wzd-mega--4col .wzd-mega-col:last-child{
	border-right:none;background:var(--c-ivory,#F8F5EF);border-radius:0 14px 14px 0;
}
.wzd-mega-subh{
	display:block;font-size:10.5px;font-weight:700;color:var(--c-ink-soft,#6B6661);
	text-transform:uppercase;letter-spacing:.07em;
	margin:12px 0 6px;padding:10px 0 6px;border-top:1px solid rgba(46,46,49,.07);
}
.wzd-mega-subh:first-child{margin-top:0;padding-top:0;border-top:none}
/* ── Utility nav zone (sep | คำนวณวัสดุ | sep) ── */
.wzd-nav-util{display:flex;align-items:center;gap:0;margin-left:auto;flex-shrink:0}
.wzd-nav-sep{
	display:inline-block;width:.5px;height:18px;flex-shrink:0;
	background:rgba(46,46,49,.18);margin:0 10px;
}
.wzd-util-link{
	display:inline-flex;align-items:center;gap:5px;
	font-size:14px;font-weight:500;color:var(--c-ink,#1C1C1E);
	text-decoration:none;padding:8px 4px;white-space:nowrap;transition:color .15s;
}
.wzd-util-link .ti{font-size:16px;color:var(--c-brick,#8E2521);flex-shrink:0}
.wzd-util-link:hover{color:var(--c-brick,#8E2521)}
.wzd-mega-shortcut{
	display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;
	font-size:13.5px;color:var(--c-charcoal,#2E2E31);text-decoration:none;
	border:1px solid rgba(46,46,49,.08);margin-bottom:6px;background:#fff;
	transition:background .15s,border-color .15s;
}
.wzd-mega-shortcut:hover{background:var(--c-bg-pink,#FDF2F2);border-color:var(--c-brick,#8E2521);color:var(--c-brick,#8E2521)}
.wzd-mega-shortcut--primary{background:rgba(142,37,33,.07);border-color:rgba(142,37,33,.2);color:var(--c-brick,#8E2521);font-weight:500}
.wzd-mega-shortcut--primary:hover{background:rgba(142,37,33,.12)}
.wzd-has-mega:hover > .wzd-mega,
.wzd-has-mega:focus-within > .wzd-mega{display:grid}
.wzd-mega-col h5{font-size:11px;font-weight:600;color:var(--c-ink-soft,#6B6661);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(46,46,49,.06)}
.wzd-mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wzd-mega-col a{display:block;padding:7px 8px;border-radius:8px;color:var(--c-charcoal,#2E2E31);font-size:13.5px;text-decoration:none;transition:background .15s;white-space:nowrap}
.wzd-mega-col a:hover{background:var(--c-ivory,#F8F5EF);color:var(--c-brick,#8E2521)}

/* ── REFRACTORY mega menu (2-col card + product photos) ── */
.wzd-has-mega:hover > .wzd-mega--refract,
.wzd-has-mega:focus-within > .wzd-mega--refract{display:block}
.wzd-mega--refract{
  width:580px;max-width:calc(100vw - 32px);
  display:none;padding:0;overflow:hidden;
  grid-template-columns:unset;gap:0;
}
.wzd-refract-card{
  background:#fff;padding:0;
  border-radius:14px 14px 0 0;
}
.wzd-refract-cols{
  display:grid;grid-template-columns:1fr 1px 1fr;
  gap:0;padding:20px 20px 0;
}
.wzd-refract-divider{background:rgba(46,46,49,.07);margin:0 6px}
.wzd-refract-group{padding-bottom:4px}
.wzd-refract-group-head{
  font-size:11px;font-weight:700;color:var(--c-brick,#8E2521);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.wzd-refract-item{
  display:block;padding:9px 0;text-decoration:none;
  border-bottom:1px solid rgba(46,46,49,.05);
  transition:padding-left .15s,opacity .15s;
}
.wzd-refract-item:last-child{border-bottom:none}
.wzd-refract-item:hover{padding-left:4px}
.wzd-refract-item:hover .wzd-refract-name{color:var(--c-brick,#8E2521)}
.wzd-refract-name{
  font-size:15px;font-weight:600;color:var(--c-charcoal,#2E2E31);
  display:block;line-height:1.3;transition:color .15s;
}
.wzd-refract-spec{
  font-size:12px;color:var(--c-wgray,#B7ACA3);
  display:block;margin-top:2px;
}
.wzd-refract-cta-bar{
  background:var(--c-ivory,#F8F5EF);
  border-top:1px solid rgba(46,46,49,.06);
  padding:11px 20px;margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;
}
.wzd-refract-cta-bar span{color:var(--c-ink-soft,#6B6661)}
.wzd-refract-cta-bar a{
  color:var(--c-brick,#8E2521);font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.wzd-refract-cta-bar a:hover{text-decoration:underline}
.wzd-refract-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.wzd-refract-photos a{display:block;overflow:hidden}
.wzd-refract-photos img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .25s;filter:brightness(.96);
}
.wzd-refract-photos a:hover img{transform:scale(1.04);filter:brightness(1)}
@media (max-width:980px){ .wzd-mega{display:none !important} }

/* ===========================================================
   HERO BANNER — image scene + HTML overlay
   ----------------------------------------------------------- */
.wzd-hero{
	position:relative;isolation:isolate;overflow:hidden;
	background:var(--c-ivory,#F8F5EF);
}
.wzd-hero--lg{min-height:440px}
.wzd-hero--md{min-height:380px}
.wzd-hero-bg{
	position:absolute;inset:0;z-index:0;
	background-size:cover;background-position:right center;background-repeat:no-repeat;
	transform:translateZ(0);
}
.wzd-hero-scrim{
	position:absolute;inset:0;z-index:1;pointer-events:none;
}
.wzd-hero--light .wzd-hero-scrim{
	background:linear-gradient(90deg, var(--c-ivory,#F8F5EF) 0%, var(--c-ivory,#F8F5EF) 44%, rgba(248,245,239,.6) 57%, rgba(248,245,239,0) 68%);
}
.wzd-hero--dark .wzd-hero-scrim{
	background:linear-gradient(90deg, rgba(46,46,49,.95) 0%, rgba(46,46,49,.78) 40%, rgba(46,46,49,.3) 60%, rgba(46,46,49,0) 80%);
}
.wzd-hero-inner{position:relative;z-index:2;padding:40px 16px 48px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-height:inherit;text-align:left}
.wzd-hero--lg .wzd-hero-inner{padding-top:48px;padding-bottom:56px}
.wzd-hero-bread{margin-bottom:14px;font-size:13px;width:100%;text-align:left}
.wzd-hero-bread .wzd-bread{display:flex;flex-wrap:wrap;gap:6px;color:var(--c-ink-soft,#6B6661);justify-content:flex-start}
.wzd-hero-bread .wzd-bread .sep{opacity:.5}
.wzd-hero-bread .wzd-bread a{color:var(--c-charcoal,#2E2E31);text-decoration:none}
.wzd-hero-bread .wzd-bread .current{color:var(--c-brick,#8E2521);font-weight:500}
.wzd-hero-copy{max-width:600px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.wzd-hero-copy > *{text-align:left}
/* Brand lockup inside hero (W mark + WATZADU + บริษัท วัสดุ ดอทคอม จำกัด) */
.wzd-hero-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;text-decoration:none;align-self:flex-start}
.wzd-hero-brand .wzd-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--c-charcoal,#2E2E31)}
.wzd-hero-brand .wzd-wmark{width:54px !important;height:54px !important;flex-shrink:0}
.wzd-hero-brand .wzd-brand-text{display:flex;flex-direction:column;line-height:1.05;gap:2px}
.wzd-hero-brand .wzd-brand-primary{display:block;font-size:26px;font-weight:800;letter-spacing:.04em;color:var(--c-charcoal,#2E2E31)}
.wzd-hero-brand .wzd-brand small{display:block;font-size:13px;color:var(--c-ink-soft,#6B6661);font-weight:400;margin-top:2px}
.wzd-hero--dark .wzd-hero-brand .wzd-brand-primary{color:#fff}
.wzd-hero--dark .wzd-hero-brand .wzd-brand small{color:rgba(255,255,255,.78)}
.wzd-hero-eyebrow{
	display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
	color:var(--c-brick,#8E2521);background:rgba(142,37,33,.08);padding:6px 12px;border-radius:999px;margin-bottom:14px;
}
.wzd-hero--dark .wzd-hero-eyebrow{color:#fff;background:rgba(255,255,255,.14)}
.wzd-hero-title{
	font-size:var(--fs-h1);line-height:1.15;font-weight:700;
	color:var(--c-charcoal,#2E2E31);margin:0 0 14px;
	letter-spacing:-.01em;
}
.wzd-hero--dark .wzd-hero-title{color:#fff}
.wzd-hero-title em{
	font-style:normal;display:block;color:var(--c-brick,#8E2521);
	font-weight:700;
}
.wzd-hero--dark .wzd-hero-title em{color:var(--c-orange,#D98949)}
.wzd-hero-sub{
	font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:var(--c-ink-soft,#6B6661);
	margin:0 0 22px;max-width:540px;
}
.wzd-hero--dark .wzd-hero-sub{color:rgba(255,255,255,.85)}
.wzd-hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.wzd-hero-ctas .wzd-btn{box-shadow:0 4px 14px -4px rgba(142,37,33,.3)}
.wzd-hero-ctas .wzd-btn--outline{box-shadow:none;border:1.5px solid var(--c-brick,#8E2521);color:var(--c-brick,#8E2521);background:rgba(255,255,255,.7)}
.wzd-hero-ctas .wzd-btn--ghost{background:transparent;color:var(--c-charcoal,#2E2E31);box-shadow:none}
.wzd-hero-ctas .wzd-btn--ghost:hover{background:rgba(46,46,49,.06)}

@media (max-width:768px){
	.wzd-hero--lg{min-height:auto}
	.wzd-hero--md{min-height:auto}
	.wzd-hero-bg{background-position:right 30% center;opacity:.45}
	.wzd-hero-bg-img{object-position:right 30% center;opacity:.45}
	.wzd-hero--light .wzd-hero-scrim{background:linear-gradient(180deg, rgba(248,245,239,.90) 0%, rgba(248,245,239,.94) 45%, rgba(248,245,239,.96) 100%)}
	.wzd-hero--dark .wzd-hero-scrim{background:linear-gradient(180deg, rgba(46,46,49,.78) 0%, rgba(46,46,49,.88) 60%, rgba(46,46,49,.92) 100%)}
	.wzd-hero-inner{padding:28px 16px 36px;align-items:flex-start}
	.wzd-hero-copy{max-width:none;width:100%}
	.wzd-hero-brand{margin-bottom:14px}
	.wzd-hero-brand .wzd-wmark{width:40px !important;height:40px !important}
	.wzd-hero-brand .wzd-brand-wdc-main{font-size:18px}
	.wzd-hero-brand .wzd-brand-watzadu-sub{font-size:10px}
	.wzd-hero-brand .wzd-brand small{font-size:11px}
	.wzd-hero-title{font-size:clamp(22px,6vw,30px) !important}
	.wzd-hero-sub{font-size:14px !important;margin-bottom:18px !important}
	.wzd-hero-ctas{width:100%;gap:8px}
	.wzd-hero-ctas .wzd-btn{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}
	.wzd-hero-ctas .wzd-btn--lg{padding:10px 12px;font-size:13.5px}
	/* Calculator/ghost button drops below on mobile */
	.wzd-hero-ctas .wzd-btn--ghost{flex:1 1 100%}
}
@media (max-width:420px){
	.wzd-hero-bg{opacity:.35}
	.wzd-hero-bg-img{opacity:.35}
	.wzd-hero-ctas .wzd-btn--primary,.wzd-hero-ctas .wzd-btn--outline{flex:1 1 100%}
	.wzd-hero-brand small{display:none}
}

/* ===========================================================
   SECTION HEAD (center variant)
   ----------------------------------------------------------- */
.wzd-section-head--center{text-align:center;margin-bottom:32px}
.wzd-section-head--center .wzd-section-title{justify-content:center}
.wzd-section-sub{font-size:15px;color:var(--c-ink-soft,#6B6661);max-width:640px;margin:8px auto 0;line-height:1.55}

/* ===========================================================
   SERVICE PILLARS — 5 premium cards
   ----------------------------------------------------------- */
.wzd-pillars-section{padding:48px 0}
.wzd-pillars{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:16px;
}
.wzd-pillar{
	background:#fff;border:1px solid rgba(46,46,49,.06);
	border-radius:18px;padding:22px 18px;
	display:flex;flex-direction:column;align-items:flex-start;gap:10px;
	box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.wzd-pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.wzd-pillar-ic{
	width:46px;height:46px;border-radius:12px;
	background:linear-gradient(135deg, var(--c-brick,#8E2521), var(--c-orange,#D98949));
	color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;
}
.wzd-pillar-t{font-size:16px;font-weight:600;margin:0;color:var(--c-charcoal,#2E2E31);line-height:1.3}
.wzd-pillar-d{font-size:13.5px;color:var(--c-ink-soft,#6B6661);margin:0;line-height:1.55}

@media (max-width:1100px){ .wzd-pillars{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){
	.wzd-pillars{
		grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;
		gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
		padding:4px 16px;margin:0 -16px;scrollbar-width:none;
	}
	.wzd-pillars::-webkit-scrollbar{display:none}
	.wzd-pillar{scroll-snap-align:start}
}

/* ===========================================================
   CATMINI — category cards (image-first per PDF p1)
   ----------------------------------------------------------- */
.wzd-catmini-grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.wzd-catmini{
	display:flex;flex-direction:column;background:#fff;border:1px solid rgba(46,46,49,.06);
	border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
	box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.wzd-catmini:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.wzd-catmini-img{
	aspect-ratio:5/4;background-size:cover;background-position:center;
	background-color:var(--c-ivory,#F8F5EF);position:relative;
}
.wzd-catmini-img::after{
	content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.04) 100%);
}
.wzd-catmini-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.wzd-catmini-name{font-size:15.5px;font-weight:700;margin:0;color:var(--c-charcoal,#2E2E31);line-height:1.3}
.wzd-catmini-desc{font-size:12.5px;color:var(--c-ink-soft,#6B6661);line-height:1.45;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.wzd-catmini-cta{font-size:13px;color:var(--c-brick,#8E2521);font-weight:600;display:flex;align-items:center;gap:4px;margin-top:auto}

@media (max-width:980px){ .wzd-catmini-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){
	.wzd-catmini-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.wzd-catmini-body{padding:10px 12px 12px}
	.wzd-catmini-name{font-size:14px}
}

/* ===========================================================
   BESTSELLER GRID + consult card
   ----------------------------------------------------------- */
.wzd-bestseller-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.wzd-bestseller-grid .wzd-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wzd-prod-price--quote{color:var(--c-ink-soft,#6B6661);font-size:13px;font-weight:500}
.wzd-consult-card{
	background:linear-gradient(160deg, var(--c-brick,#8E2521), #6e1e1b);
	color:#fff;border-radius:18px;padding:22px 20px;
	display:flex;flex-direction:column;gap:10px;
	position:sticky;top:96px;
}
.wzd-consult-card-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:22px}
.wzd-consult-card-t{font-size:18px;margin:0;font-weight:600}
.wzd-consult-card-s{font-size:13.5px;color:rgba(255,255,255,.85);margin:0 0 6px;line-height:1.5}
.wzd-consult-card-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	background:#fff;color:var(--c-brick,#8E2521);
	padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px;
	text-decoration:none;transition:transform .15s;
}
.wzd-consult-card-btn:hover{transform:translateY(-1px)}
.wzd-consult-card-btn--alt{background:#06c755;color:#fff}

@media (max-width:980px){
	.wzd-bestseller-grid{grid-template-columns:1fr}
	.wzd-bestseller-grid .wzd-prod-grid{grid-template-columns:repeat(3,1fr)}
	.wzd-consult-card{position:static}
}
@media (max-width:640px){
	.wzd-bestseller-grid .wzd-prod-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================
   REVIEWS PREVIEW GRID (home)
   ----------------------------------------------------------- */
.wzd-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wzd-review{
	background:#fff;border:1px solid rgba(46,46,49,.06);border-radius:16px;
	overflow:hidden;text-decoration:none;color:inherit;
	display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.wzd-review:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.wzd-review-img{aspect-ratio:16/10;background-size:cover;background-position:center}
.wzd-review-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.wzd-review-tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-brick,#8E2521)}
.wzd-review-t{font-size:16px;margin:0;font-weight:600;color:var(--c-charcoal,#2E2E31);line-height:1.3}
.wzd-review-d{font-size:13.5px;color:var(--c-ink-soft,#6B6661);line-height:1.5;margin:0}
@media (max-width:880px){ .wzd-reviews-grid{grid-template-columns:1fr} }

/* ===========================================================
   STEPS GRID
   ----------------------------------------------------------- */
.wzd-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wzd-steps-grid--6{grid-template-columns:repeat(6,1fr)}
.wzd-step{
	background:#fff;border:1px solid rgba(46,46,49,.06);border-radius:14px;
	padding:18px 16px;display:flex;flex-direction:column;gap:6px;
	box-shadow:var(--shadow-card);
}
.wzd-step-num{
	width:32px;height:32px;border-radius:10px;
	background:var(--c-brick,#8E2521);color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.wzd-step-t{font-size:15px;margin:6px 0 0;font-weight:600;color:var(--c-charcoal,#2E2E31);line-height:1.3}
.wzd-step-d{font-size:13px;color:var(--c-ink-soft,#6B6661);margin:0;line-height:1.5}
@media (max-width:980px){
	.wzd-steps-grid{grid-template-columns:repeat(2,1fr)}
	.wzd-steps-grid--6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:540px){
	.wzd-steps-grid,.wzd-steps-grid--6{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================
   WHY GRID (services page)
   ----------------------------------------------------------- */
.wzd-why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.wzd-why{padding:18px 16px;background:var(--c-ivory,#F8F5EF);border-radius:14px;display:flex;flex-direction:column;gap:8px}
.wzd-why-ic{width:38px;height:38px;border-radius:10px;background:#fff;color:var(--c-brick,#8E2521);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-card)}
.wzd-why h4{font-size:15px;margin:0;font-weight:600;color:var(--c-charcoal,#2E2E31)}
.wzd-why p{font-size:13px;color:var(--c-ink-soft,#6B6661);margin:0;line-height:1.5}
@media (max-width:1024px){ .wzd-why-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .wzd-why-grid{grid-template-columns:1fr 1fr} }

/* ===========================================================
   FAQ
   ----------------------------------------------------------- */
.wzd-container--narrow{max-width:820px;margin-left:auto;margin-right:auto}
.wzd-faq{display:flex;flex-direction:column;gap:10px}
.wzd-faq-item{background:#fff;border:1px solid rgba(46,46,49,.08);border-radius:12px;overflow:hidden}
.wzd-faq-item summary{
	list-style:none;cursor:pointer;padding:14px 16px;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	font-weight:600;color:var(--c-charcoal,#2E2E31);font-size:15px;
}
.wzd-faq-item summary::-webkit-details-marker{display:none}
.wzd-faq-item summary i{color:var(--c-brick,#8E2521);transition:transform .2s}
.wzd-faq-item[open] summary i{transform:rotate(45deg)}
.wzd-faq-body{padding:0 16px 16px;color:var(--c-ink-soft,#6B6661);font-size:14.5px;line-height:1.6}

/* ===========================================================
   CTA BAR (large, dark red)
   ----------------------------------------------------------- */
.wzd-cta-bar--pdf{
	background:linear-gradient(135deg, var(--c-brick,#8E2521), #6e1e1b);
	color:#fff;border-radius:18px;padding:22px 26px;
	display:flex;align-items:center;gap:20px;flex-wrap:wrap;
	box-shadow:0 12px 30px -10px rgba(142,37,33,.35);
}
.wzd-cta-bar-ic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.wzd-cta-bar-text{flex:1 1 320px;color:#fff}
.wzd-cta-bar-t{font-size:18px;margin:0 0 4px;font-weight:600;color:#fff}
.wzd-cta-bar-s{font-size:14px;color:rgba(255,255,255,.82);margin:0}

/* ===========================================================
   PROJECTS / REVIEWS PAGE
   ----------------------------------------------------------- */
.wzd-pj-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wzd-pj-pill{
	background:#fff;border:1px solid rgba(46,46,49,.1);
	padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;
	color:var(--c-charcoal,#2E2E31);cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.wzd-pj-pill:hover{background:var(--c-ivory,#F8F5EF)}
.wzd-pj-pill.on{background:var(--c-brick,#8E2521);color:#fff;border-color:var(--c-brick,#8E2521)}
.wzd-pj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wzd-pj{
	background:#fff;border:1px solid rgba(46,46,49,.06);border-radius:16px;
	overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
	transition:transform .2s,box-shadow .2s;
}
.wzd-pj:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.wzd-pj-img{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative}
.wzd-pj-flag{
	position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);
	padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;
	color:var(--c-brick,#8E2521);box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.wzd-pj-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.wzd-pj-tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-brick,#8E2521)}
.wzd-pj-t{font-size:15px;font-weight:600;margin:0;color:var(--c-charcoal,#2E2E31);line-height:1.35}
.wzd-pj-meta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--c-ink-soft,#6B6661);margin-top:auto}
.wzd-pj-meta span{display:flex;align-items:center;gap:5px}
.wzd-pj-link{font-size:13px;font-weight:600;color:var(--c-brick,#8E2521);display:flex;align-items:center;gap:4px;text-decoration:none;margin-top:6px}
.wzd-pj-note{margin:24px auto 0;font-size:13px;color:var(--c-ink-soft,#6B6661);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.wzd-reviews-empty{
	background:#fff;border:1px dashed rgba(46,46,49,.18);border-radius:18px;
	padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.wzd-reviews-empty-ic{width:54px;height:54px;border-radius:14px;background:var(--c-ivory,#F8F5EF);color:var(--c-brick,#8E2521);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:4px}
.wzd-reviews-empty h3{font-size:18px;margin:0;font-weight:600;color:var(--c-charcoal,#2E2E31)}
.wzd-reviews-empty p{font-size:14px;max-width:480px;color:var(--c-ink-soft,#6B6661);margin:0 0 10px;line-height:1.6}

@media (max-width:1024px){ .wzd-pj-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:780px){ .wzd-pj-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .wzd-pj-grid{grid-template-columns:1fr} }

/* ===========================================================
   FOOTER — Design C · CI แดง-ขาว (v4)
   ----------------------------------------------------------- */
.wzd-foot{background:#fff;color:var(--c-ink,#2E2E31);padding-top:0;border-top:3px solid #8E2521;font-size:14px}
.wzd-foot a{color:var(--c-ink-soft,#5a5a60);text-decoration:none;transition:color .15s}
.wzd-foot a:hover{color:#8E2521}
.wzd-foot-cta{background:#8E2521;padding:26px 0}
.wzd-foot-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wzd-foot-cta-text strong{display:block;font-size:17px;font-weight:700;color:#fff;margin-bottom:3px}
.wzd-foot-cta-text span{font-size:13.5px;color:rgba(255,255,255,.78)}
.wzd-foot-cta-btns{display:flex;gap:10px;flex-shrink:0}
.wzd-foot-cta-btn-primary{background:#fff;color:#8E2521;font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:8px;text-decoration:none;transition:opacity .15s;display:inline-flex;align-items:center;gap:6px}
.wzd-foot-cta-btn-primary:hover{opacity:.88;color:#8E2521}
.wzd-foot-cta-btn-line{background:transparent;color:#fff;font-size:13.5px;font-weight:500;padding:10px 20px;border-radius:8px;border:1.5px solid rgba(255,255,255,.4);text-decoration:none;transition:border-color .15s,background .15s;display:inline-flex;align-items:center;gap:6px}
.wzd-foot-cta-btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.wzd-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding:44px 0 40px}
.wzd-foot-col{min-width:0}
details.wzd-foot-col{open:true}
details.wzd-foot-col summary{list-style:none;cursor:default;display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--c-ink,#2E2E31);margin-bottom:14px}
details.wzd-foot-col summary::-webkit-details-marker{display:none}
details.wzd-foot-col h4{font-size:13px;font-weight:700;color:var(--c-ink,#2E2E31);letter-spacing:.05em;text-transform:uppercase;margin:0}
.wzd-foot-col--policy h4{color:#8E2521}
.wzd-foot-chev{display:none;color:var(--c-ink-soft,#888);font-size:20px;transition:transform .2s}
.wzd-foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.wzd-foot-col li{font-size:13.5px;line-height:1.5}
.wzd-foot-brand-col{display:flex;flex-direction:column;gap:14px}
.wzd-foot-brand{display:flex;align-items:center;gap:10px}
.wzd-foot-brand-t{display:flex;flex-direction:column;line-height:1.2}
.wzd-foot-brand-t strong{font-size:15px;font-weight:700;color:var(--c-ink,#2E2E31);letter-spacing:.02em}
.wzd-foot-brand-t small{font-size:12px;color:var(--c-ink-soft,#888);margin-top:2px}
.wzd-foot-about{font-size:13.5px;color:var(--c-ink-soft,#666);line-height:1.7;margin:0;max-width:300px}
.wzd-foot-social{display:flex;gap:8px;margin-top:4px}
.wzd-foot-social a{width:36px;height:36px;border-radius:10px;background:#f2f2f4;color:var(--c-ink-soft,#555);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .15s,color .15s}
.wzd-foot-social a:hover{background:#8E2521;color:#fff}
.wzd-foot-contact{display:flex;flex-direction:column;gap:10px}
.wzd-foot-contact li{display:flex;align-items:flex-start;gap:10px;color:var(--c-ink,#2E2E31)}
.wzd-foot-contact-ic{width:32px;height:32px;border-radius:8px;background:rgba(142,37,33,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.wzd-foot-contact-ic i{font-size:16px;color:#8E2521}
.wzd-foot-contact-ic--line{background:rgba(0,160,0,.08)}
.wzd-foot-contact-ic--line i{color:#0a9a0a}
.wzd-foot-contact-body{display:flex;flex-direction:column;gap:1px}
.wzd-foot-contact-label{font-size:11px;color:var(--c-ink-soft,#888);text-transform:uppercase;letter-spacing:.05em}
.wzd-foot-contact-value{font-size:13.5px;color:var(--c-ink,#2E2E31);font-weight:500}
a.wzd-foot-contact-value{color:#8E2521}
a.wzd-foot-contact-value:hover{text-decoration:underline;color:#8E2521}
.wzd-foot-bottom{border-top:1px solid var(--c-line-soft,#e8e8e8);padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--c-ink-soft,#888)}
.wzd-foot-legal{display:flex;gap:18px}
.wzd-foot-legal a{font-size:12.5px;color:var(--c-ink-soft,#888)}
.wzd-foot-legal a:hover{color:#8E2521}
@media (max-width:1100px){.wzd-foot-grid{grid-template-columns:1fr 1fr}.wzd-foot-brand-col{grid-column:1 / -1}}
@media (max-width:680px){
	.wzd-foot-grid{grid-template-columns:1fr;gap:0;padding:24px 0 16px}
	.wzd-foot-brand-col{padding-bottom:18px;border-bottom:1px solid #eee}
	details.wzd-foot-col{padding:0;border-bottom:1px solid #eee}
	details.wzd-foot-col summary{cursor:pointer;margin-bottom:0}
	details.wzd-foot-col[open] summary{margin-bottom:12px}
	.wzd-foot-chev{display:inline-block}
	details.wzd-foot-col[open] .wzd-foot-chev{transform:rotate(180deg)}
	.wzd-foot-cta{padding:18px 0}
	.wzd-foot-cta-inner{flex-direction:column;align-items:flex-start}
	.wzd-foot-cta-btns{width:100%;flex-direction:column}
	.wzd-foot-cta-btn-primary,.wzd-foot-cta-btn-line{justify-content:center}
	.wzd-foot-bottom{flex-direction:column;text-align:center;gap:8px}
}


/* Hide legacy elements if still present in DOM */
.wzd-sticky-mobile{display:none !important}

/* Mobile sticky bar (bottom) — replaces dock on small screens */
.wzd-stickybar{
	position:fixed;left:0;right:0;bottom:0;z-index:79;
	display:none;align-items:stretch;
	background:var(--c-glass-strong);backdrop-filter:saturate(170%) blur(16px);
	-webkit-backdrop-filter:saturate(170%) blur(16px);
	border-top:1px solid var(--c-glass-border);box-shadow:0 -4px 16px rgba(46,46,49,.08);
	padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 10px;gap:8px;
}
.wzd-stickybar-item{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	padding:8px 4px;border-radius:12px;color:var(--c-charcoal,#2E2E31);text-decoration:none;
	font-size:11px;font-weight:600;
}
.wzd-stickybar-item i{font-size:20px}
.wzd-stickybar-cta{background:linear-gradient(135deg, var(--c-brick,#8E2521), var(--c-clay,#A63B2C));color:#fff;flex:1.6}
.wzd-stickybar-cta i{color:#fff}

@media (max-width:720px){
	.wzd-stickybar{display:flex}
	body{padding-bottom:64px}
}

/* ===========================================================
   PRODUCT card — quote price style
   ----------------------------------------------------------- */
.wzd-prod-price small{font-size:11px;color:var(--c-ink-soft,#6B6661);font-weight:400;margin-left:2px}

/* ===========================================================
   MOBILE — prevent horizontal scroll, base improvements
   ----------------------------------------------------------- */
html,body{overflow-x:hidden;overflow-x:clip}
@media (min-width:1025px){.wzd-drawer,.wzd-menu-overlay{display:none!important}}
@media (max-width:540px){
	.wzd-section{padding-top:36px;padding-bottom:36px}
	.wzd-section-title{font-size:var(--fs-h2)}
	.wzd-section-head{gap:4px;flex-direction:column;align-items:flex-start}
	.wzd-section-link{font-size:13px}
}

/* ===========================================================
   MOBILE-FIRST UX AUDIT — global polish
   touch targets ≥ 44px, form input padding, spacing, contrast
   ----------------------------------------------------------- */
/* Touch targets on mobile */
@media (max-width:768px){
	.wzd-btn,.wzd-prod-link,.wzd-prod-cart,.wzd-nav-icon,.wzd-pj-pill,.wzd-cat-tab,.wzd-lang-opt{
		min-height:40px;
	}
	.wzd-btn--lg{min-height:46px;padding:12px 16px;font-size:14px}
	/* Form inputs: bigger touch area */
	.wzd-cq-text,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],select,textarea{
		min-height:44px;font-size:15px;padding:10px 14px;
	}
	textarea.wzd-cq-text,textarea{min-height:80px}
	/* Section spacing on mobile (don't dwarf content) */
	.wzd-section{padding-top:36px;padding-bottom:36px}
	.wzd-section-head{margin-bottom:18px}
	.wzd-section-title{font-size:clamp(20px,4.8vw,26px)}
	/* CTA bar layout on mobile */
	.wzd-cta-bar--pdf{flex-direction:column;align-items:flex-start;text-align:left;padding:18px 20px;gap:14px}
	.wzd-cta-bar-text{flex-basis:auto}
	.wzd-cta-bar--pdf .wzd-btn{width:100%;justify-content:center}
	/* Container padding */
	.wzd-container{padding-left:16px;padding-right:16px}
	/* Section head not wrapping link below on mobile */
	.wzd-section-head{flex-wrap:wrap;gap:8px}
	.wzd-section-link{font-size:13px;align-self:flex-start}
}
@media (max-width:480px){
	.wzd-section{padding-top:28px;padding-bottom:28px}
	.wzd-section-head{margin-bottom:14px}
	/* Pillar/reviews/steps gap tighter on small */
	.wzd-pillars,.wzd-reviews-grid,.wzd-steps-grid,.wzd-pj-grid,.wzd-art-grid{gap:10px}
	/* Hide non-essential meta on smallest screens */
	.wzd-pj-meta{font-size:12px}
}

/* ===========================================================
   ROUND-6 OVERRIDES (per user feedback)
   - Remove banner brand (duplicate of header)
   - Hide ALL 3rd party floating widgets
   - Pillars iOS26 minimal (flat icons, subtle)
   - Catmini bigger images (aspect 5:3, cover, fill)
   - Consult card: cream not red-on-red
   - Footer: cream/ivory iOS26 minimal (not dark)
   - Sitewide typography caps + CI color enforcement
   ----------------------------------------------------------- */

/* === Banner brand removal === */
.wzd-hero-brand{display:none !important}

/* === Hide consult-card secondary LINE button (removed from HTML but safety) === */
.wzd-consult-card-btn--alt{display:none !important}

/* === Hide ALL floating contact widgets except .wzd-stickybar (mobile only) === */
[class*="floating"][class*="contact"]:not(.wzd-stickybar),
[class*="contact"][class*="floating"]:not(.wzd-stickybar),
[class*="bd-"][class*="contact"],
[class*="bdt-"][class*="contact"],
[class*="bd-"][class*="call"],
[class*="bdt-"][class*="call"],
[class*="floating-button"],
[class*="ele-floating"],
[id*="floating-contact"],
[class*="callback"][class*="float"],
.contact-floating-wrap,
.sticky-contact-buttons,
.fc-buttons,
.fc-popup{
	display:none !important;visibility:hidden !important;pointer-events:none !important
}

/* === Aggressive 3rd-party widget hide === */
.bd-floating-contact,.bd-contact-icon,.bdt-floating-button,.bdt-contact,.bdt-call-now,
.elementor-floating-buttons,.elementor-floating-element,.elementor-sticky-bar,
.eael-contact-form-7,.eael-call-now,.eael-whatsapp,.eael-floating-contact,
.ele-contact-floating,.ele-sticky-buttons,
.fluentform-popup,.wpcf7-popup,.formidable-popup,
.fixed-contact,.sticky-contact,.floating-buttons-wrapper,.floating-contact-wrapper,
[id^="bdt-"][class*="contact"],[id^="bdt-"][class*="float"],
[id*="floating-contact"],[class*="floating-contact"],
[id*="quick-contact"],[class*="quick-contact"],
.elfsight-app-,.elfsight-widget,
#chatbase-bubble-button,.chatbase-bubble,
.crisp-client,#tawk_default,#tawkchat-container,
.wp-chatbot,.fb_dialog,.fb-customerchat,
.tidio-chat,.zopim,.intercom-app,
.headertopbar,.header-top-bar,.astra-header-top-bar,
.ast-builder-button-wrap,.menu-toggle-bar{
	display:none !important;visibility:hidden !important;pointer-events:none !important
}

/* === iOS26 PILLARS (flat icon, EQUAL HEIGHTS) === */
.wzd-pillars{align-items:stretch}
.wzd-pillar{
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	border-radius:18px !important;padding:22px 18px !important;gap:10px !important;
	box-shadow:0 1px 2px rgba(46,46,49,.04) !important;
	display:flex !important;flex-direction:column !important;height:100% !important;
}
.wzd-pillar:hover{transform:translateY(-2px) !important;box-shadow:0 8px 24px -8px rgba(46,46,49,.14) !important}
.wzd-pillar-ic{
	width:46px !important;height:46px !important;border-radius:13px !important;
	background:#faf6ef !important;color:#8E2521 !important;
	display:flex !important;align-items:center;justify-content:center;
	font-size:22px !important;flex-shrink:0;
	border:1px solid rgba(46,46,49,.05);
}
.wzd-pillar-t,h3.wzd-pillar-t{
	font-size:14.5px !important;font-weight:700 !important;line-height:1.35 !important;
	margin:8px 0 4px !important;color:#2E2E31 !important;
	min-height:2.7em;  /* ← reserve 2 lines so all titles align */
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wzd-pillar-d{
	font-size:12.5px !important;color:#6B6661 !important;line-height:1.55 !important;
	margin:0 !important;flex:1;
	min-height:3.5em;  /* ← reserve 3 lines for description */
}
@media (max-width:680px){
	.wzd-pillar-t,h3.wzd-pillar-t{min-height:auto}
	.wzd-pillar-d{min-height:auto}
}

/* === CATMINI (.wzd-catmini.wzd-catmini double-class beats all single-class + style.css width:44px;height:44px) === */
.wzd-catmini.wzd-catmini{
	padding:0 !important;border-radius:18px !important;overflow:hidden !important;
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	display:flex !important;flex-direction:column !important;gap:0 !important;
	text-decoration:none !important;color:inherit !important;
	transition:transform .2s,box-shadow .2s;align-items:stretch !important;
}
.wzd-catmini.wzd-catmini:hover{transform:translateY(-3px);box-shadow:0 12px 30px -10px rgba(46,46,49,.12) !important}
.wzd-catmini.wzd-catmini .wzd-catmini-img{
	width:100% !important;
	height:auto !important;                    /* ← KILL style.css height:44px */
	aspect-ratio:4/3 !important;
	flex-shrink:0 !important;flex-grow:0 !important;
	border-radius:0 !important;
	background-size:contain !important;
	background-position:center center !important;
	background-color:#faf6f0 !important;
	background-repeat:no-repeat !important;
	display:block !important;
	padding:18px !important;box-sizing:border-box !important;
	transition:transform .3s;min-height:180px !important;
}
.wzd-catmini.wzd-catmini:hover .wzd-catmini-img{transform:scale(1.03)}
.wzd-catmini.wzd-catmini .wzd-catmini-body{
	padding:14px 16px 16px !important;gap:4px !important;
	text-align:center !important;display:flex !important;flex-direction:column !important;
	border-top:1px solid rgba(46,46,49,.05) !important;
}
.wzd-catmini.wzd-catmini .wzd-catmini-name{
	font-size:14.5px !important;font-weight:700 !important;
	line-height:1.3 !important;margin:0 !important;color:#2E2E31 !important;
}
.wzd-catmini.wzd-catmini .wzd-catmini-cta{
	font-size:12px !important;color:#8E2521 !important;font-weight:600 !important;
	justify-content:center !important;display:inline-flex !important;
	align-items:center;gap:4px;margin-top:2px !important;
}
@media (max-width:680px){
	.wzd-catmini.wzd-catmini .wzd-catmini-img{
		aspect-ratio:5/4 !important;padding:14px !important;min-height:140px !important;
	}
	.wzd-catmini.wzd-catmini .wzd-catmini-body{padding:10px 10px 12px !important}
	.wzd-catmini.wzd-catmini .wzd-catmini-name{font-size:13px !important}
}

/* === CATMINI SCENE MODE — lifestyle photos full-bleed (ห้ามผิดหมวด: ใช้ภาพ scene ตรงกับสินค้า) === */
.wzd-catmini.wzd-catmini--scene .wzd-catmini-img{
	background-size:cover !important;
	background-position:center center !important;
	background-color:#2E2E31 !important;
	padding:0 !important;
	overflow:hidden !important;
	position:relative;
}
/* The v15 catalogue covers are art-directed square compositions.  Preserve
 * their full framing on the homepage instead of clipping them to the former
 * 4:3 card image area. */
.wzd-home-categories .wzd-catmini.wzd-catmini--scene .wzd-catmini-img{
	aspect-ratio:1 / 1 !important;
}
.wzd-catmini.wzd-catmini--scene .wzd-catmini-img::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(0,0,0,.02) 40%,rgba(0,0,0,.30) 100%);
}
.wzd-catmini.wzd-catmini--scene:hover .wzd-catmini-img{transform:scale(1.07) !important}
.wzd-catmini.wzd-catmini--scene .wzd-catmini-body{
	background:#fff;border-top:none !important;
}
.wzd-catmini.wzd-catmini--scene .wzd-catmini-name{color:#2E2E31 !important}
.wzd-catmini.wzd-catmini--scene .wzd-catmini-desc{color:#6B6661 !important}
.wzd-catmini.wzd-catmini--scene .wzd-catmini-cta{color:#8E2521 !important}
@media (max-width:680px){
	.wzd-catmini.wzd-catmini--scene .wzd-catmini-img{padding:0 !important}
}

/* === CONSULT CARD: cream not red-on-red === */
.wzd-consult-card{
	background:linear-gradient(160deg,#fff8f3,#fef4ec) !important;
	color:var(--c-charcoal,#2E2E31) !important;
	border:1px solid rgba(142,37,33,.10);
	padding:22px 20px;border-radius:18px;
	box-shadow:0 4px 16px -6px rgba(142,37,33,.10);
}
.wzd-consult-card-ic{background:var(--c-brick,#8E2521) !important;color:#fff !important;width:44px;height:44px;border-radius:12px}
.wzd-consult-card-t{color:var(--c-charcoal,#2E2E31) !important;font-size:17px;font-weight:700;margin:0}
.wzd-consult-card-s{color:#595959 !important;font-size:13.5px;line-height:1.55;margin:0 0 8px}
.wzd-consult-card-btn{background:var(--c-brick,#8E2521) !important;color:#fff !important;padding:11px 14px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,background .15s}
.wzd-consult-card-btn:hover{background:#6e1e1b !important;transform:translateY(-1px)}
.wzd-consult-card-btn--alt{background:#06c755 !important}
.wzd-consult-card-btn--alt:hover{background:#04a847 !important}

/* === REVIEWS CARDS: cleaner image + small title (was too big) === */
.wzd-review-img{aspect-ratio:16/10;background-color:#fafafa;background-size:cover;background-position:center}
.wzd-review-body{padding:14px 16px 16px;gap:4px}
.wzd-review-tag{font-size:11px !important;letter-spacing:.06em;text-transform:uppercase;color:var(--c-brick,#8E2521);font-weight:700}
.wzd-review-t,h3.wzd-review-t{font-size:15px !important;font-weight:700 !important;line-height:1.35 !important;margin:0 !important;color:var(--c-charcoal,#2E2E31) !important;letter-spacing:0 !important}
.wzd-review-d{font-size:13px !important;color:var(--c-ink-soft,#6B6661) !important;line-height:1.55 !important;margin:0 !important}
@media (max-width:768px){
	.wzd-review-t,h3.wzd-review-t{font-size:14.5px !important}
}

/* === ARTICLE CARDS: smaller title (was too big) === */
.wzd-art-title,h3.wzd-art-title{
	font-size:13.5px !important;font-weight:600 !important;
	line-height:1.45 !important;margin:0 !important;
	color:#2E2E31 !important;letter-spacing:0 !important;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;min-height:2.9em;
}
@media (max-width:768px){
	.wzd-art-title,h3.wzd-art-title{font-size:13px !important;min-height:2.7em}
}

/* === ARTICLE CARDS: cleaner spacing === */
.wzd-art-img{aspect-ratio:4/3;background-color:#fafafa;position:relative}
/* Fix vertical bar bug: style.css เดิมมี bottom:12px ทำให้ tag ยืดเต็ม height — บังคับ bottom:auto */
.wzd-art-tag{
	position:absolute !important;
	top:10px !important;right:10px !important;left:auto !important;
	bottom:auto !important;
	display:inline-block !important;width:auto !important;height:auto !important;
	background:rgba(142,37,33,.92) !important;color:#fff !important;
	font-size:10.5px !important;font-weight:600 !important;
	letter-spacing:.04em !important;padding:4px 10px !important;
	border-radius:999px !important;line-height:1.2 !important;
	white-space:nowrap !important;writing-mode:horizontal-tb !important;
}
.wzd-art-body{padding:11px 12px 13px;gap:4px}
.wzd-art-title{font-size:13.5px;font-weight:600;line-height:1.4;margin:0;color:var(--c-charcoal,#2E2E31);min-height:2.8em}
.wzd-art-meta{font-size:11.5px;color:var(--c-ink-soft,#6B6661);gap:4px}

/* === STEPS GRID iOS26: icon-centered with corner number badge === */
.wzd-step{
	padding:24px 18px 20px !important;gap:10px !important;border-radius:18px !important;
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	box-shadow:0 1px 3px rgba(46,46,49,.04) !important;
	display:flex !important;flex-direction:column !important;align-items:center !important;
	text-align:center !important;position:relative;
}
.wzd-step-ic{
	width:56px !important;height:56px !important;
	border-radius:16px !important;
	background:linear-gradient(135deg,#fff8f3,#faedde) !important;
	color:#8E2521 !important;
	display:flex !important;align-items:center;justify-content:center;
	font-size:26px !important;flex-shrink:0;
	position:relative;
	border:1px solid rgba(142,37,33,.10);
}
.wzd-step-ic .wzd-step-num{
	position:absolute;top:-8px;right:-8px;
	width:24px !important;height:24px !important;
	border-radius:999px !important;
	background:#8E2521 !important;color:#fff !important;
	font-size:11.5px !important;font-weight:700 !important;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 2px 6px rgba(142,37,33,.3);
	border:2px solid #fff;
}
.wzd-step-t,h3.wzd-step-t{
	font-size:14.5px !important;font-weight:700 !important;
	margin:0 !important;color:#2E2E31 !important;
	line-height:1.3 !important;letter-spacing:0 !important;
}
.wzd-step-d{
	font-size:13px !important;line-height:1.55 !important;
	color:#6B6661 !important;margin:0 !important;
	max-width:240px;
}

/* === CTA BAR: WHITE text on red — force visible === */
.wzd-cta-bar--pdf{padding:22px 26px !important;border-radius:18px !important;background:linear-gradient(135deg,#8E2521,#6e1e1b) !important;color:#fff !important}
.wzd-cta-bar-ic,.wzd-cta-bar--pdf .wzd-cta-bar-ic{background:rgba(255,255,255,.18) !important;color:#fff !important;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.wzd-cta-bar-text{flex:1 1 320px;color:#fff !important}
.wzd-cta-bar-t,h3.wzd-cta-bar-t{font-size:17px !important;font-weight:700 !important;margin:0 0 4px !important;color:#fff !important;line-height:1.3 !important}
.wzd-cta-bar-s,p.wzd-cta-bar-s{font-size:13.5px !important;color:rgba(255,255,255,.88) !important;margin:0 !important;line-height:1.5 !important}
.wzd-cta-bar--pdf .wzd-btn--white,.wzd-cta-bar--pdf .wzd-btn{
	background:#fff !important;color:#8E2521 !important;
	padding:11px 20px !important;font-size:14px !important;font-weight:700 !important;
	border-radius:10px !important;border:0 !important;
}
.wzd-cta-bar--pdf .wzd-btn:hover{background:#fef4ec !important;transform:translateY(-1px)}


/* === FOOTER iOS26 minimal: cream not dark === */
.wzd-foot{
	background:#fbf6ef !important;
	color:var(--c-charcoal,#2E2E31) !important;
	border-top:1px solid rgba(46,46,49,.08);
	padding:56px 0 0 !important;
}
.wzd-foot a{color:var(--c-charcoal,#2E2E31) !important;text-decoration:none}
.wzd-foot a:hover{color:var(--c-brick,#8E2521) !important;text-decoration:underline}
.wzd-foot-col li,.wzd-foot-col li a{color:var(--c-charcoal,#2E2E31) !important;font-size:14px;font-weight:500;line-height:1.7}
.wzd-foot-about{color:var(--c-ink-soft,#6B6661) !important;font-size:13.5px;line-height:1.65;max-width:300px;font-weight:400}
.wzd-foot-contact li{color:var(--c-charcoal,#2E2E31) !important;font-size:14px}
.wzd-foot-contact li i{color:var(--c-brick,#8E2521) !important}
details.wzd-foot-col h4{
	color:var(--c-charcoal,#2E2E31) !important;
	font-size:12px !important;font-weight:700 !important;
	text-transform:uppercase;letter-spacing:.08em !important;
	margin:0 0 12px;
}
.wzd-foot-brand-main{color:var(--c-charcoal,#2E2E31) !important;font-size:22px;font-weight:800;letter-spacing:.04em}
.wzd-foot-brand-t small{color:var(--c-ink-soft,#6B6661) !important;font-size:12.5px;font-weight:400}
.wzd-foot-social a{
	background:rgba(46,46,49,.06) !important;color:var(--c-charcoal,#2E2E31) !important;
	width:36px;height:36px;border-radius:10px;
}
.wzd-foot-social a:hover{background:var(--c-brick,#8E2521) !important;color:#fff !important}
.wzd-foot-bottom{
	border-top:1px solid rgba(46,46,49,.08) !important;
	color:var(--c-ink-soft,#6B6661) !important;
	font-size:12.5px !important;
	padding:18px 0;
}
.wzd-foot-legal a{color:var(--c-ink-soft,#6B6661) !important;font-size:12.5px}
.wzd-foot-legal a:hover{color:var(--c-brick,#8E2521) !important}
/* Footer brand uses dark logo on light bg */
.wzd-foot-brand .wzd-wmark{filter:none !important}

/* === SITEWIDE TYPOGRAPHY CAPS === */
h1,.wzd-hero-title{font-size:clamp(28px,4vw,46px)}
h2,.wzd-section-title{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:clamp(16px,1.5vw,19px)}
.wzd-section-head{margin-bottom:22px}
/* Category archive title — cap so it doesn't dwarf */
body.archive-product .wzd-hero-title,
body.tax-product_cat .wzd-hero-title,
body.archive .wzd-hero-title{font-size:clamp(24px,3vw,34px) !important}

/* === STICKY BAR: hide if dock is visible (mobile only show sticky) === */
@media (min-width:769px){.wzd-stickybar{display:none !important}}

/* === FIX HERO ALIGNMENT — flush left with container === */
.wzd-hero-copy{margin-left:0 !important;padding-left:0 !important;max-width:640px !important}

/* (banner height max-cap + trust-wrap overlap REVERTED — was breaking layout) */

/* === HERO BG: <picture> cover image — LCP element, browser-preloadable === */
.wzd-hero-bg-wrap{
	position:absolute;inset:0;width:100%;height:100%;
	display:block;overflow:hidden;z-index:0;
}
.wzd-hero-bg-img{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;object-position:right bottom;
	border:0;transform:translateZ(0);
}

/* === ACCESSIBILITY: visible focus ring + skip link === */
:focus-visible{outline:2px solid var(--c-brick,#8E2521);outline-offset:2px;border-radius:4px}
.wzd-btn:focus-visible,.wzd-nav-icon:focus-visible{outline-offset:3px}
a:focus-visible img{outline:2px solid var(--c-brick,#8E2521);outline-offset:2px}

/* === MOBILE-FIRST: ป้องกัน iOS zoom on input focus === */
@media (max-width:768px){
	input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],select,textarea{
		font-size:16px !important;
	}
}

/* === CLS prevention: ภาพมี aspect-ratio บังคับ === */
img{max-width:100%;height:auto}
img[width][height]{aspect-ratio:attr(width)/attr(height)}

/* === Print friendly === */
@media print{
	.wzd-nav,.wzd-foot,.wzd-stickybar,.wzd-compare-bar{display:none !important}
	.wzd-hero{min-height:auto}
	a[href]:after{content:" (" attr(href) ")"}
}

/* === Reduce motion preference === */
@media (prefers-reduced-motion:reduce){
	*,::before,::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ===========================================================
   FOOTER · Design C v4 · CI แดง-ขาว
   4-col layout: brand · เมนูหลัก · นโยบาย · ติดต่อ
   .wzd-foot.wzd-foot = higher specificity
   ----------------------------------------------------------- */
.wzd-foot.wzd-foot{
	background:#fff !important;
	color:#2E2E31 !important;
	padding:0 !important;
	border-top:3px solid #8E2521 !important;
	font-size:14px;line-height:1.55;
}
/* CTA banner */
.wzd-foot.wzd-foot .wzd-foot-cta{
	background:#8E2521 !important;
	padding:26px 0 !important;
	margin:0 !important;
}
.wzd-foot.wzd-foot .wzd-foot-cta-inner{
	display:flex !important;align-items:center;justify-content:space-between;
	gap:20px;flex-wrap:wrap;
}
.wzd-foot.wzd-foot .wzd-foot-cta-text strong{
	display:block !important;font-size:17px !important;font-weight:700 !important;
	color:#fff !important;margin-bottom:3px !important;
}
.wzd-foot.wzd-foot .wzd-foot-cta-text span{
	font-size:13.5px !important;color:rgba(255,255,255,.78) !important;
}
.wzd-foot.wzd-foot .wzd-foot-cta-btns{display:flex;gap:10px;flex-shrink:0}
.wzd-foot.wzd-foot .wzd-foot-cta-btn-primary{
	background:#fff !important;color:#8E2521 !important;
	font-size:13.5px !important;font-weight:600 !important;
	padding:10px 20px !important;border-radius:8px !important;
	text-decoration:none !important;display:inline-flex;align-items:center;gap:6px;
	transition:opacity .15s;
}
.wzd-foot.wzd-foot .wzd-foot-cta-btn-primary:hover{opacity:.88 !important;color:#8E2521 !important}
.wzd-foot.wzd-foot .wzd-foot-cta-btn-line{
	background:transparent !important;color:#fff !important;
	font-size:13.5px !important;font-weight:500 !important;
	padding:10px 20px !important;border-radius:8px !important;
	border:1.5px solid rgba(255,255,255,.4) !important;
	text-decoration:none !important;display:inline-flex;align-items:center;gap:6px;
	transition:border-color .15s,background .15s;
}
.wzd-foot.wzd-foot .wzd-foot-cta-btn-line:hover{
	border-color:#fff !important;background:rgba(255,255,255,.08) !important;color:#fff !important;
}
.wzd-foot.wzd-foot a{color:var(--c-ink-soft,#5a5a60) !important;text-decoration:none !important;transition:color .2s ease}
.wzd-foot.wzd-foot a:hover{color:#8E2521 !important}

/* Grid · 4 columns */
.wzd-foot.wzd-foot .wzd-foot-grid{
	display:grid !important;
	grid-template-columns:1.7fr 1fr 1fr 1.5fr !important;
	gap:48px !important;padding:44px 0 40px !important;align-items:start;
}

/* ── Column 1 · Brand ─────────────────────────────── */
.wzd-foot.wzd-foot .wzd-foot-brand-col{display:flex;flex-direction:column;gap:20px;max-width:360px}
.wzd-foot.wzd-foot .wzd-foot-brand{
	display:flex !important;align-items:center;gap:14px;text-decoration:none !important;
	transition:opacity .15s;
}
.wzd-foot.wzd-foot .wzd-foot-brand:hover{opacity:.85}
.wzd-foot.wzd-foot .wzd-foot-brand .wzd-wmark{width:52px !important;height:52px !important;filter:none !important;flex-shrink:0}
.wzd-foot.wzd-foot .wzd-foot-brand-t{display:flex;flex-direction:column;gap:4px;line-height:1.1}
.wzd-foot.wzd-foot .wzd-foot-brand-main{font-size:22px !important;font-weight:800 !important;color:#2E2E31 !important;letter-spacing:.01em !important;line-height:1}
.wzd-foot.wzd-foot .wzd-foot-brand-t small{font-size:12.5px !important;color:#6B6661 !important;font-weight:500 !important;letter-spacing:.01em;margin:0 !important}
.wzd-foot.wzd-foot .wzd-foot-about{
	color:#6B6661 !important;font-size:13.5px !important;
	line-height:1.7 !important;margin:0 !important;
	font-weight:400 !important;
}

/* Social · clean buttons สีแดง CI */
.wzd-foot.wzd-foot .wzd-foot-social{display:flex;gap:8px;margin-top:4px}
.wzd-foot.wzd-foot .wzd-foot-social a{
	width:38px !important;height:38px !important;border-radius:10px !important;
	background:#f2f2f4 !important;
	border:none !important;
	color:#555 !important;
	display:flex !important;align-items:center;justify-content:center;
	font-size:18px;
	transition:background .15s,color .15s;
}
.wzd-foot.wzd-foot .wzd-foot-social a:hover{
	background:#8E2521 !important;color:#fff !important;
	transform:translateY(-2px);
}

/* ── Columns 2-4 · Navigation lists ───────────────── */
.wzd-foot.wzd-foot details.wzd-foot-col summary,
.wzd-foot.wzd-foot .wzd-foot-col h4{
	font-size:13px !important;font-weight:700 !important;
	color:#2E2E31 !important;
	letter-spacing:.05em !important;text-transform:uppercase !important;
	margin:0 0 16px !important;padding:0 !important;
	cursor:default;list-style:none;line-height:1.2;
}
.wzd-foot.wzd-foot .wzd-foot-col--policy h4{color:#8E2521 !important}
.wzd-foot.wzd-foot details.wzd-foot-col summary::-webkit-details-marker{display:none}
.wzd-foot.wzd-foot details.wzd-foot-col summary::marker{display:none}

.wzd-foot.wzd-foot .wzd-foot-col ul{
	list-style:none !important;margin:0 !important;padding:0 !important;
	display:flex;flex-direction:column;gap:11px;
}
.wzd-foot.wzd-foot .wzd-foot-col li{font-size:13.5px;line-height:1.4}
.wzd-foot.wzd-foot .wzd-foot-col li a{
	font-size:13.5px !important;color:#3A3A3F !important;
	font-weight:500 !important;
	display:inline-flex;align-items:center;
	transition:color .15s,transform .2s cubic-bezier(.22,1,.36,1);
}
.wzd-foot.wzd-foot .wzd-foot-col li a:hover{
	color:#8E2521 !important;transform:translateX(3px);
}
.wzd-foot.wzd-foot .wzd-foot-more{
	color:#8E2521 !important;font-weight:600 !important;gap:4px;
	display:inline-flex !important;align-items:center;margin-top:2px;
}
.wzd-foot.wzd-foot .wzd-foot-more i{font-size:14px;transition:transform .2s}
.wzd-foot.wzd-foot .wzd-foot-more:hover i{transform:translateX(2px)}

/* ── Column 4 · Contact ────────────────── */
.wzd-foot.wzd-foot .wzd-foot-contact-card{
	background:#fff !important;
	border:none !important;
	border-radius:0 !important;
	padding:0 !important;
	box-shadow:none !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact-card h4{
	font-size:13px !important;font-weight:700 !important;
	color:#2E2E31 !important;letter-spacing:.05em !important;
	margin:0 0 16px !important;text-transform:uppercase !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact{
	display:flex !important;flex-direction:column;gap:14px !important;
	margin:0 !important;padding:0 !important;list-style:none !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact li{
	display:flex !important;align-items:flex-start;gap:12px;
	font-size:13px;line-height:1.4;color:#2E2E31;
	background:none !important;border:0 !important;padding:0 !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact-ic{
	flex-shrink:0;
	width:34px;height:34px;border-radius:11px;
	background:rgba(142,37,33,.10) !important;
	color:#8E2521 !important;
	display:flex;align-items:center;justify-content:center;
	font-size:15px;
}
.wzd-foot.wzd-foot .wzd-foot-contact-ic--line{
	background:rgba(6,167,72,.10) !important;color:#06A648 !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact-ic i{font-size:15px}
.wzd-foot.wzd-foot .wzd-foot-contact-body{
	display:flex;flex-direction:column;gap:2px;
	min-width:0;line-height:1.3;
}
.wzd-foot.wzd-foot .wzd-foot-contact-label{
	font-size:11.5px !important;font-weight:600 !important;
	color:#9A938B !important;letter-spacing:.02em;text-transform:uppercase;
}
.wzd-foot.wzd-foot .wzd-foot-contact-value,
.wzd-foot.wzd-foot .wzd-foot-contact-value:link{
	font-size:13.5px !important;color:#2E2E31 !important;
	font-weight:500 !important;line-height:1.5;
	word-break:break-word;
}
.wzd-foot.wzd-foot a.wzd-foot-contact-value:hover{color:#8E2521 !important}

/* ── Bottom bar ───────────────────────────────────── */
.wzd-foot.wzd-foot .wzd-foot-bottom{
	border-top:1px solid #eee !important;
	padding:16px 0 !important;margin-top:0 !important;
	display:flex !important;justify-content:space-between;align-items:center;
	gap:16px;flex-wrap:wrap;
	font-size:12.5px !important;color:#888 !important;
	background:#fff !important;
}
.wzd-foot.wzd-foot .wzd-foot-copy{font-size:12.5px;color:#888;font-weight:400}
.wzd-foot.wzd-foot .wzd-foot-legal{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wzd-foot.wzd-foot .wzd-foot-legal a{font-size:12.5px !important;color:#888 !important;font-weight:500 !important}
.wzd-foot.wzd-foot .wzd-foot-legal a:hover{color:#8E2521 !important}
.wzd-foot.wzd-foot .wzd-foot-legal-sep{color:#ccc;font-size:11px}

/* ── Responsive ──────────────────────────────────── */
@media (max-width:1100px){
	.wzd-foot.wzd-foot .wzd-foot-grid{
		grid-template-columns:1.4fr 1fr 1fr 1.4fr !important;
		gap:36px !important;
	}
}
@media (max-width:980px){
	.wzd-foot.wzd-foot{padding-top:56px !important}
	.wzd-foot.wzd-foot .wzd-foot-grid{
		grid-template-columns:1fr 1fr !important;
		gap:32px !important;padding-bottom:36px !important;
	}
	.wzd-foot.wzd-foot .wzd-foot-brand-col{
		grid-column:1 / -1;max-width:none;
		padding-bottom:24px;
		border-bottom:0.5px solid rgba(46,46,49,.08);
	}
	.wzd-foot.wzd-foot .wzd-foot-contact-card{grid-column:1 / -1}
}
@media (max-width:540px){
	.wzd-foot.wzd-foot{padding-top:44px !important}
	.wzd-foot.wzd-foot .wzd-foot-grid{
		grid-template-columns:1fr !important;
		gap:0 !important;padding-bottom:24px !important;
	}
	.wzd-foot.wzd-foot .wzd-foot-brand-col{padding-bottom:20px}
	.wzd-foot.wzd-foot details.wzd-foot-col{
		padding:16px 0 !important;
		border-bottom:0.5px solid rgba(46,46,49,.08) !important;
	}
	.wzd-foot.wzd-foot details.wzd-foot-col summary{
		cursor:pointer !important;
		display:flex !important;align-items:center;justify-content:space-between;
		margin:0 !important;
	}
	.wzd-foot.wzd-foot details.wzd-foot-col[open] summary{margin:0 0 14px !important}
	.wzd-foot.wzd-foot .wzd-foot-chev{
		display:inline-block !important;color:#9A938B;font-size:18px;
		transition:transform .25s cubic-bezier(.22,1,.36,1);
	}
	.wzd-foot.wzd-foot details.wzd-foot-col[open] .wzd-foot-chev{transform:rotate(180deg)}
	.wzd-foot.wzd-foot .wzd-foot-contact-card{
		padding:20px !important;border-radius:18px !important;
		margin-top:8px;
	}
	.wzd-foot.wzd-foot .wzd-foot-bottom{
		flex-direction:column !important;text-align:center;gap:10px;padding:18px 0;
	}
}
@media (min-width:541px){
	/* Desktop · hide chevron, prevent details from collapsing */
	.wzd-foot.wzd-foot .wzd-foot-chev{display:none !important}
	.wzd-foot.wzd-foot details.wzd-foot-col summary{pointer-events:none;cursor:default}
}

/* === COMPARE MODAL (Apple-style v2) === */
.wzd-cmp-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.wzd-cmp-modal[hidden]{display:none}
.wzd-cmp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(12px)}
.wzd-cmp-dialog{
	position:relative;z-index:1;
	background:#fff;border-radius:20px;
	width:min(960px,95vw);max-height:88vh;
	display:flex;flex-direction:column;overflow:hidden;
	box-shadow:0 32px 80px rgba(0,0,0,.22);
}
.wzd-cmp-head{
	display:flex;align-items:center;justify-content:space-between;
	padding:16px 22px;border-bottom:1px solid rgba(0,0,0,.07);flex-shrink:0;
}
.wzd-cmp-head h3{font-size:15px;font-weight:700;margin:0;color:#1d1d1f;letter-spacing:-.01em}
.wzd-cmp-close{
	width:30px;height:30px;border-radius:50%;border:none;
	background:rgba(0,0,0,.06);cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	font-size:15px;color:#3c3c43;transition:background .13s;
}
.wzd-cmp-close:hover{background:rgba(0,0,0,.12)}
.wzd-cmp-body{overflow:auto;flex:1}
/* Table — vars set by JS: --cmp-n (count), --cmp-cw (col width), --cmp-lw (label width) */
.wzd-cmp-table{padding:0 20px 24px;min-width:max-content}
.wzd-cmp-prod-row{
	display:grid;
	grid-template-columns:var(--cmp-lw,80px) repeat(var(--cmp-n,2),var(--cmp-cw,190px));
	gap:0 16px;
	position:sticky;top:0;background:#fff;
	padding:20px 0 16px;border-bottom:1.5px solid rgba(0,0,0,.08);z-index:10;
}
.wzd-cmp-prop-row{
	display:grid;
	grid-template-columns:var(--cmp-lw,80px) repeat(var(--cmp-n,2),var(--cmp-cw,190px));
	gap:0 16px;
	border-bottom:1px solid rgba(0,0,0,.05);
	padding:10px 0;align-items:start;
}
.wzd-cmp-prod-col{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.wzd-cmp-prod-img-wrap{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#f5f5f7;cursor:pointer;transition:opacity .15s}
.wzd-cmp-prod-img-wrap:hover{opacity:.85}
.wzd-cmp-prod-img-wrap img{width:100%;height:100%;object-fit:cover}
.wzd-cmp-prod-cat{font-size:10px;font-weight:700;color:var(--c-brick,#8E2521);text-transform:uppercase;letter-spacing:.06em}
.wzd-cmp-prod-name{font-size:12px;font-weight:700;color:#1d1d1f;line-height:1.3}
.wzd-cmp-section-h{
	font-size:10.5px;font-weight:700;color:#6e6e73;
	text-transform:uppercase;letter-spacing:.07em;
	padding:16px 0 6px;
}
.wzd-cmp-prop-label{font-size:12px;color:#6e6e73;font-weight:600;padding-top:1px;line-height:1.4}
.wzd-cmp-prop-val{font-size:13px;color:#1d1d1f;font-weight:500;text-align:center;line-height:1.4;word-break:break-word}
.wzd-cmp-prop-val strong{font-size:15px;color:var(--c-brick,#8E2521);font-weight:700}
.wzd-cmp-prop-val--empty{color:#c7c7cc}
.wzd-cmp-foot{
	padding:12px 20px;border-top:1px solid rgba(0,0,0,.07);
	display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;
	background:#f5f5f7;border-radius:0 0 20px 20px;
}
/* ── Compare calculator bar ── */
.wzd-cmp-calc-bar{
	display:flex;flex-direction:column;gap:8px;flex-shrink:0;
	padding:10px 22px;background:#faf9f7;border-bottom:1px solid rgba(0,0,0,.07);
}
.wzd-cmp-bar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wzd-cmp-bar-group{display:flex;align-items:center;gap:6px}
.wzd-cmp-bar-label{font-size:12px;font-weight:600;color:#6e6e73;white-space:nowrap}
.wzd-cmp-btn-group{display:flex;gap:4px}
.wzd-cmp-btn-group button{
	padding:4px 10px;border-radius:8px;border:1.5px solid rgba(0,0,0,.14);
	background:#fff;font-size:12px;font-weight:600;color:#3c3c43;
	cursor:pointer;transition:all .13s;white-space:nowrap;
}
.wzd-cmp-btn-group button:hover{border-color:var(--c-brick,#8E2521);color:var(--c-brick,#8E2521)}
.wzd-cmp-btn-group button.wzd-cmp-btn-active{
	background:var(--c-brick,#8E2521);border-color:var(--c-brick,#8E2521);color:#fff;
}
.wzd-cmp-area-label{
	display:inline-flex;align-items:center;gap:6px;
	font-size:13px;font-weight:500;color:#1d1d1f;cursor:default;white-space:nowrap;
}
.wzd-cmp-area-label i{color:var(--c-brick,#8E2521);font-size:15px}
.wzd-cmp-area-label input[type=number]{
	width:64px;border:1.5px solid rgba(0,0,0,.16);border-radius:8px;
	padding:4px 8px;font-size:14px;font-weight:700;color:#1d1d1f;
	background:#fff;text-align:right;outline:none;transition:border-color .13s;
	-moz-appearance:textfield;margin:0 2px;
}
.wzd-cmp-area-label input[type=number]::-webkit-inner-spin-button,
.wzd-cmp-area-label input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
.wzd-cmp-area-label input[type=number]:focus{border-color:var(--c-brick,#8E2521)}
.wzd-cmp-calc-note{
	font-size:11px;color:var(--c-brick,#8E2521);font-weight:600;
	padding:6px 0 0;line-height:1.5;
}
/* ── Product card spec chips ── */
.wzd-prod-specs{display:flex;flex-direction:column;gap:2px;margin:0}
.wzd-prod-spec{
	display:inline-flex;align-items:center;gap:4px;
	font-size:11.5px;color:var(--c-ink-soft,#6B6661);line-height:1.4;
}
.wzd-prod-spec .ti{font-size:12px;color:var(--c-brick,#8E2521);flex-shrink:0}
@media(max-width:600px){
	.wzd-cmp-modal{padding:0;align-items:flex-end}
	.wzd-cmp-dialog{width:100%;border-radius:20px 20px 0 0;max-height:92vh}
}

/* === COMPARE BAR (bottom sticky on category page) === */
.wzd-compare-bar{
	position:fixed;left:0;right:0;bottom:0;z-index:78;
	background:rgba(255,255,255,.96);backdrop-filter:saturate(170%) blur(12px);
	border-top:1px solid rgba(46,46,49,.10);
	box-shadow:0 -8px 24px -8px rgba(0,0,0,.10);
	padding:12px 0;
}
.wzd-compare-bar[hidden]{display:none}
.wzd-compare-bar-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wzd-compare-bar-label{font-size:13.5px;font-weight:600;color:var(--c-charcoal,#2E2E31);display:flex;align-items:center;gap:6px}
.wzd-compare-bar-label i{color:var(--c-brick,#8E2521)}
.wzd-compare-bar-items{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.wzd-compare-bar-items > span{display:inline-flex;align-items:center;gap:4px;background:var(--c-ivory,#F8F5EF);border:1px solid rgba(46,46,49,.08);padding:4px 4px 4px 10px;border-radius:999px;font-size:12px}
.wzd-compare-bar-items button{background:transparent;border:0;color:var(--c-ink-soft,#6B6661);width:22px;height:22px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wzd-compare-bar-items button:hover{background:rgba(46,46,49,.10);color:var(--c-brick,#8E2521)}
.wzd-compare-bar-actions{display:flex;gap:8px}
.wzd-btn--sm{padding:7px 12px;font-size:13px}
.wzd-btn--ghost{background:transparent;color:var(--c-charcoal,#2E2E31);border:1px solid rgba(46,46,49,.10)}
.wzd-btn--ghost:hover{background:var(--c-ivory,#F8F5EF)}
/* On mobile, push body content up so compare-bar doesn't cover sticky-bar */
@media (max-width:768px){ body:has(.wzd-compare-bar:not([hidden])){padding-bottom:140px} }

/* === PRODUCT SELECT CHECKBOX on category cards === */
.wzd-prod-select{position:absolute;top:8px;left:8px;z-index:2;cursor:pointer}
.wzd-prod-select input{position:absolute;opacity:0;pointer-events:none}
.wzd-prod-select span{
	display:flex;align-items:center;justify-content:center;width:26px;height:26px;
	background:rgba(255,255,255,.94);border:1.5px solid rgba(46,46,49,.20);
	border-radius:8px;color:transparent;font-size:14px;
	box-shadow:0 2px 6px rgba(0,0,0,.08);transition:all .15s;
}
.wzd-prod-select input:checked + span{
	background:var(--c-brick,#8E2521);border-color:var(--c-brick,#8E2521);color:#fff;
}

/* === CI COLOR ENFORCEMENT (overrides random colors) === */
:root{
	--c-brick:#8E2521 !important;--c-clay:#A63B2C !important;
	--c-orange:#D98949 !important;--c-charcoal:#2E2E31 !important;
	--c-ivory:#F8F5EF !important;--c-beige:#E7D9C8 !important;
	--c-ink-soft:#6B6661 !important;
}
.wzd-btn--primary{background:var(--c-brick,#8E2521) !important;color:#fff !important;border:0 !important}
.wzd-btn--primary:hover{background:#6e1e1b !important}
.wzd-btn--outline{background:transparent !important;color:var(--c-brick,#8E2521) !important;border:1.5px solid var(--c-brick,#8E2521) !important}
.wzd-btn--outline:hover{background:rgba(142,37,33,.05) !important}
em{color:var(--c-brick,#8E2521) !important}

/* === BROKEN BUTTON SAFEGUARDS === */
a[href=""],a[href="#"]{cursor:default !important;opacity:.5;pointer-events:none}
.wzd-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;text-decoration:none !important;cursor:pointer}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}

/* === Old POST-AUDIT OVERRIDES block continues below === */
/* ===========================================================
   POST-AUDIT OVERRIDES (per user feedback round 5)
   - Hero copy flush LEFT to container edge (same as header logo column)
   - H1 bigger + more prominent
   - Category cards: image LARGER than text, text smaller
   - Category page H1: smaller (was oversized)
   - Floating dock: collapsed by default, single FAB only
   - Footer contrast: brighter text
   ----------------------------------------------------------- */

/* HERO copy: respect .wzd-container (max-width var(--container) + margin auto + padding var(--pad-x))
   so hero text starts at SAME left edge as header logo */
.wzd-hero{contain:paint}
.wzd-hero-inner{
	/* override v2 broken rules: keep container behavior */
	max-width:var(--container) !important;
	margin-left:auto !important;margin-right:auto !important;
	padding-left:var(--pad-x) !important;padding-right:var(--pad-x) !important;
}
.wzd-hero-copy{
	margin-left:0 !important;margin-right:auto !important;
	max-width:620px !important;
	padding-left:0 !important;
}
.wzd-hero-copy,.wzd-hero-copy *{text-align:left !important}

/* HERO title: bigger + more impactful (per user "ตัวหนังสือโดดเด่น") */
.wzd-hero-title{
	font-size:clamp(34px,5vw,52px) !important;
	font-weight:800 !important;
	line-height:1.1 !important;
	letter-spacing:-.015em !important;
	margin:0 0 12px !important;
}
.wzd-hero-title em{font-size:.92em !important}
.wzd-hero-sub{font-size:clamp(15px,1.4vw,17px) !important;line-height:1.55 !important;margin:0 0 22px !important}
@media (max-width:768px){
	.wzd-hero-title{font-size:clamp(26px,7vw,34px) !important}
	.wzd-hero-sub{font-size:14.5px !important;margin-bottom:18px !important}
}


/* CATEGORY MINI CARDS: image LARGER than text */
.wzd-catmini{padding:0;background:#fff}
.wzd-catmini-img{
	aspect-ratio:4/3 !important;
	background-size:cover !important;background-position:center !important;
	background-color:var(--c-ivory,#F8F5EF);
	border-radius:0;
}
.wzd-catmini-body{padding:10px 12px 12px !important;gap:2px !important}
.wzd-catmini-name{font-size:13.5px !important;font-weight:600 !important;line-height:1.3 !important;margin:0 !important}
.wzd-catmini-desc{font-size:11.5px !important;line-height:1.4 !important;margin:0 !important;min-height:auto !important;display:none}
.wzd-catmini-cta{font-size:11.5px !important;margin-top:4px !important;color:var(--c-brick,#8E2521) !important}
@media (max-width:680px){
	.wzd-catmini-body{padding:8px 10px 10px !important}
	.wzd-catmini-name{font-size:12.5px !important}
}

/* PRODUCT CARDS: image larger than text (rule applies sitewide) */
.wzd-prod,.wzd-prod-pdf{padding:0}
.wzd-prod-img{aspect-ratio:1/1 !important;background:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:16px !important}
.wzd-prod-body{padding:10px 12px 12px !important}
.wzd-prod-name{font-size:13px !important;line-height:1.35 !important;min-height:2.6em !important;font-weight:600 !important}
.wzd-prod-size{font-size:11.5px !important}
.wzd-prod-price{font-size:14.5px !important;font-weight:700 !important;padding-top:2px !important}
.wzd-prod-actions{margin-top:6px !important;padding-top:6px !important}
.wzd-prod-link{font-size:12px !important}
.wzd-prod-cart{width:30px !important;height:30px !important;font-size:14px !important}

/* CATEGORY ARCHIVE PAGE: H1 right-sized (not oversized) */
.wzd-archive-product .wzd-hero-title,
.wzd-archive .wzd-hero-title,
.archive-product .wzd-hero-title,
body.archive .wzd-hero-title,
body.tax-product_cat .wzd-hero-title{
	font-size:clamp(26px,3.4vw,36px) !important;
}

/* FOOTER: brighter contrast (per user "มองไม่เห็น") */
.wzd-foot{color:#fff !important}
.wzd-foot a{color:rgba(255,255,255,.94) !important}
.wzd-foot-col li,.wzd-foot-col li a{color:rgba(255,255,255,.92) !important;font-weight:400}
.wzd-foot-col li a:hover{color:#fff !important;text-decoration:underline}
.wzd-foot-about{color:rgba(255,255,255,.88) !important;font-weight:400}
.wzd-foot-contact li{color:rgba(255,255,255,.92) !important}
details.wzd-foot-col h4{color:#fff !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.06em}
.wzd-foot-bottom{color:rgba(255,255,255,.85) !important;border-top-color:rgba(255,255,255,.18) !important}
.wzd-foot-legal a{color:rgba(255,255,255,.88) !important}

/* Article cards — improve mobile readability */
.wzd-art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wzd-art{background:#fff;border:1px solid rgba(46,46,49,.06);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.wzd-art:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.wzd-art-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--c-ivory,#F8F5EF);position:relative}
.wzd-art-tag{position:absolute;right:10px;top:10px;background:rgba(46,17,15,.92);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.wzd-art-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.wzd-art-title{font-size:14px;font-weight:600;line-height:1.4;margin:0;color:var(--c-charcoal,#2E2E31);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.wzd-art-meta{font-size:12px;color:var(--c-ink-soft,#6B6661);display:flex;align-items:center;gap:4px;margin-top:auto}
@media (max-width:680px){ .wzd-art-grid{grid-template-columns:repeat(2,1fr);gap:10px} .wzd-art-body{padding:10px 12px} }
@media (max-width:480px){ .wzd-art-grid{grid-template-columns:1fr} }

/* Section head — visible structure */
.wzd-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.wzd-section-title{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--c-charcoal,#2E2E31);margin:0;letter-spacing:-.01em}
.wzd-section-title em{font-style:normal;color:var(--c-brick,#8E2521)}
.wzd-section-link{font-size:14px;color:var(--c-brick,#8E2521);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.wzd-section-link:hover{text-decoration:underline}

/* Bestseller grid layout fix on mobile */
@media (max-width:980px){
	.wzd-bestseller-grid{grid-template-columns:1fr}
	.wzd-bestseller-grid .wzd-prod-grid{grid-template-columns:repeat(3,1fr)}
	.wzd-consult-card{position:static;max-width:none;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
	.wzd-consult-card-ic{margin-right:0}
	.wzd-consult-card-t,.wzd-consult-card-s{flex-basis:100%}
}
@media (max-width:640px){
	.wzd-bestseller-grid .wzd-prod-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* Skip duplicate styles below — already defined */
.wzd-section-head--center .wzd-section-link{display:none}

/* ===========================================================
   PDP iOS26 FULL OVERHAUL — polished, clean, breathable
   Wrap all rules in .wzd-pdp.wzd-pdp prefix for high specificity
   ----------------------------------------------------------- */

/* ── Page wrapper: more breathing room ── */
.wzd-pdp.wzd-pdp{padding:24px 0 48px !important;background:#fafaf7 !important}
.wzd-pdp.wzd-pdp .wzd-bread{margin:0 0 18px !important;font-size:13px}

/* ── Mobile sticky CTA — subtle floating bar ── */
.wzd-pdp.wzd-pdp .wzd-pdp-mobile-cta{display:none}
@media (max-width:880px){
	.wzd-pdp.wzd-pdp .wzd-pdp-mobile-cta{
		display:block !important;position:fixed !important;top:auto !important;left:12px;right:12px;bottom:12px;z-index:60;
	}
	.wzd-pdp.wzd-pdp .wzd-pdp-mobile-cta .wzd-btn{
		width:100%;justify-content:center;
		background:#8E2521 !important;color:#fff !important;
		padding:14px 18px !important;font-size:15px !important;font-weight:700 !important;
		border-radius:14px !important;border:0 !important;
		box-shadow:0 8px 24px -8px rgba(142,37,33,.45);
	}
	.wzd-main{padding-bottom:90px}
}

/* ── 3-column grid: gallery | info | sticky-side (legacy, only when --2col modifier absent) ── */
.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){
	display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr) !important;
	gap:36px !important;align-items:start !important;
}
@media (max-width:1100px){.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) !important;gap:28px !important}}
@media (max-width:780px){.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){grid-template-columns:1fr !important;gap:20px !important}}

/* ── 2-column grid: product (50%) | calculator (50%) ── */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col{
	display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
	gap:36px !important;align-items:start !important;
}
@media (max-width:1100px){.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:24px !important}}
@media (max-width:780px){
	.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col{grid-template-columns:1fr !important;gap:20px !important}
	.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col .wzd-pdp-side{grid-row:2}
}

/* ── Gallery: in 2-col layout gallery sits inside left col — not sticky ── */
.wzd-pdp.wzd-pdp .wzd-pdp-gallery{position:sticky;top:84px}
@media (max-width:1100px){.wzd-pdp.wzd-pdp .wzd-pdp-gallery{position:static}}

/* ── Left col: force gallery ABOVE info (override style.css @media min-1240px side-by-side rule) ── */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col .wzd-pdp-left{
	display:flex !important;flex-direction:column !important;gap:24px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col .wzd-pdp-left .wzd-pdp-gallery{
	position:static !important;max-width:none !important;width:100% !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--2col .wzd-pdp-mainimg{
	max-height:480px !important;aspect-ratio:auto !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mainimg{
	background:#fff !important;border-radius:24px !important;overflow:hidden !important;
	aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
	padding:20px;box-sizing:border-box;
	border:1px solid rgba(46,46,49,.06);
	box-shadow:0 1px 3px rgba(46,46,49,.04), 0 12px 28px -16px rgba(46,46,49,.10);
	margin-bottom:12px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mainimg img{max-width:100% !important;max-height:100% !important;object-fit:contain !important;width:auto !important;height:auto !important}
.wzd-pdp.wzd-pdp .wzd-pdp-thumbs{
	display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:8px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-thumb{
	aspect-ratio:1/1;border-radius:12px !important;overflow:hidden !important;
	background:#fff !important;border:2px solid transparent !important;
	cursor:pointer;padding:6px;box-sizing:border-box;
	transition:border-color .15s,transform .15s;
}
.wzd-pdp.wzd-pdp .wzd-pdp-thumb.on,.wzd-pdp.wzd-pdp .wzd-pdp-thumb:hover{
	border-color:#8E2521 !important;transform:scale(1.02);
}
.wzd-pdp.wzd-pdp .wzd-pdp-thumb img{width:100%;height:100%;object-fit:contain}

/* ── Info column: clean hierarchy ── */
.wzd-pdp.wzd-pdp .wzd-pdp-info{min-width:0;padding-top:4px}
.wzd-pdp.wzd-pdp .wzd-pdp-cat-badge{
	display:inline-flex;align-items:center;gap:6px;
	font-size:11.5px !important;font-weight:700 !important;
	color:#8E2521 !important;background:rgba(142,37,33,.08) !important;
	padding:5px 12px !important;border-radius:999px !important;
	text-transform:uppercase;letter-spacing:.08em;
	margin-bottom:12px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-title,.wzd-pdp.wzd-pdp h1.wzd-pdp-title{
	font-size:clamp(22px,2.4vw,28px) !important;
	font-weight:800 !important;line-height:1.25 !important;
	color:#2E2E31 !important;margin:0 0 10px !important;letter-spacing:-.015em !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-sub{
	font-size:14.5px !important;color:#6B6661 !important;
	line-height:1.65 !important;margin:6px 0 20px !important;
}

/* ── Spec cards: horizontal row list ── */
.wzd-pdp.wzd-pdp .wzd-pdp-specs-cards{
	display:flex !important;flex-direction:column !important;
	gap:0 !important;margin:0 0 20px !important;
	border:1px solid rgba(46,46,49,.06) !important;border-radius:14px !important;overflow:hidden !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card{
	background:#fff !important;border:none !important;
	border-bottom:1px solid rgba(46,46,49,.06) !important;
	border-radius:0 !important;padding:10px 14px !important;gap:12px !important;
	display:flex !important;flex-direction:row !important;align-items:center !important;text-align:left !important;
	transition:background .15s;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:last-child{border-bottom:none !important}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:nth-child(3){background:#FDF1F0 !important}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:nth-child(3) .wzd-pdp-spec-card-val{color:#8E2521 !important}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:hover{background:#faf6ef !important;border-color:inherit !important;transform:none !important;box-shadow:none !important}

/* ── Section block headers ── */
.wzd-pdp.wzd-pdp .wzd-pdp-block-h,.wzd-pdp.wzd-pdp h3.wzd-pdp-block-h{
	font-size:15px !important;font-weight:700 !important;
	color:#2E2E31 !important;margin:28px 0 14px !important;letter-spacing:0;
	display:flex;align-items:center;gap:6px;
}

/* ── Spec table: iOS26 inline card ── */
.wzd-pdp.wzd-pdp .wzd-spec-table{
	width:100%;background:#fff !important;
	border-radius:16px !important;overflow:hidden !important;
	border:1px solid rgba(46,46,49,.06) !important;
	font-size:13.5px !important;border-collapse:separate !important;border-spacing:0;
	box-shadow:0 1px 2px rgba(46,46,49,.03);
}
.wzd-pdp.wzd-pdp .wzd-spec-table th,.wzd-pdp.wzd-pdp .wzd-spec-table td{
	padding:12px 16px !important;text-align:left !important;
	border-bottom:1px solid rgba(46,46,49,.04) !important;
}
.wzd-pdp.wzd-pdp .wzd-spec-table tr:last-child th,.wzd-pdp.wzd-pdp .wzd-spec-table tr:last-child td{border-bottom:0 !important}
.wzd-pdp.wzd-pdp .wzd-spec-table th{
	width:35%;color:#6B6661 !important;font-weight:500 !important;
	background:#faf6ef !important;font-size:13px !important;
}
.wzd-pdp.wzd-pdp .wzd-spec-table td{color:#2E2E31 !important;font-weight:500}

/* ── Bullets: iOS-style checkmark list, 2-col ── */
.wzd-pdp.wzd-pdp .wzd-pdp-bullets{
	display:grid;grid-template-columns:1fr 1fr;gap:24px;
	background:#fff;border-radius:16px;padding:22px;
	border:1px solid rgba(46,46,49,.06);
	box-shadow:0 1px 2px rgba(46,46,49,.03);
	margin-top:8px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-bullets ul{
	list-style:none;padding:0;margin:8px 0 0;
	display:flex;flex-direction:column;gap:10px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-bullets li{
	font-size:13.5px !important;color:#2E2E31 !important;line-height:1.5;
	padding-left:24px;position:relative;
}
.wzd-pdp.wzd-pdp .wzd-pdp-bullets li::before{
	content:"";position:absolute;left:0;top:6px;
	width:18px;height:18px;border-radius:50%;
	background:rgba(142,37,33,.10);
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%238E2521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;background-size:14px 14px;background-position:center;
}
@media (max-width:680px){
	.wzd-pdp.wzd-pdp .wzd-pdp-bullets{grid-template-columns:1fr;padding:18px;gap:18px}
}

/* ── Sticky calculator/quote side panel ── */
.wzd-pdp.wzd-pdp .wzd-pdp-side{position:sticky;top:84px;align-self:start;min-width:0}
@media (max-width:1100px){.wzd-pdp.wzd-pdp .wzd-pdp-side{position:static;grid-column:1 / -1}}

/* ── Calc+Quote box: white iOS26 elevated card ── */
.wzd-pdp.wzd-pdp .wzd-cq{
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	border-radius:20px !important;padding:22px !important;
	box-shadow:0 1px 3px rgba(46,46,49,.04), 0 18px 40px -22px rgba(46,46,49,.12) !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-head{
	display:flex;align-items:center;gap:12px;
	margin-bottom:18px;padding-bottom:18px;
	border-bottom:1px solid rgba(46,46,49,.06);
}
.wzd-pdp.wzd-pdp .wzd-cq-ic{
	width:44px;height:44px;border-radius:13px;flex-shrink:0;
	background:linear-gradient(135deg,#fff8f3,#faedde) !important;
	color:#8E2521 !important;display:flex;align-items:center;justify-content:center;font-size:22px;
	border:1px solid rgba(142,37,33,.10);
}
.wzd-pdp.wzd-pdp .wzd-cq-t,.wzd-pdp.wzd-pdp h3.wzd-cq-t{
	font-size:16px !important;font-weight:700 !important;
	color:#2E2E31 !important;margin:0 !important;line-height:1.3;
}
.wzd-pdp.wzd-pdp .wzd-cq-s{
	font-size:12.5px !important;color:#6B6661 !important;
	margin:3px 0 0 !important;line-height:1.5;
}

/* ── Calc steps ── */
.wzd-pdp.wzd-pdp .wzd-cq-step{margin-bottom:16px}
.wzd-pdp.wzd-pdp .wzd-cq-step-label{
	font-size:12.5px !important;font-weight:700 !important;
	color:#2E2E31 !important;margin-bottom:8px;
	display:flex;align-items:center;gap:6px;
}

/* ── Mode toggle (ใส่จำนวน / จากพื้นที่) — iOS segmented control ── */
.wzd-pdp.wzd-pdp .wzd-cq-mode{
	display:grid !important;grid-template-columns:1fr 1fr !important;gap:0 !important;
	background:#faf6ef !important;border-radius:11px !important;padding:3px !important;
	border:1px solid rgba(46,46,49,.05);
}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn{
	padding:9px 8px !important;border:0 !important;background:transparent !important;
	font-size:13px !important;font-weight:600 !important;color:#6B6661 !important;
	border-radius:9px !important;cursor:pointer;transition:all .15s;
}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn.on{
	background:#fff !important;color:#8E2521 !important;
	box-shadow:0 1px 3px rgba(46,46,49,.10), 0 0 0 1px rgba(46,46,49,.05);
}

/* ── Form inputs: iOS rounded ── */
.wzd-pdp.wzd-pdp .wzd-cq input[type="text"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="tel"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="number"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="search"],
.wzd-pdp.wzd-pdp .wzd-cq textarea,
.wzd-pdp.wzd-pdp .wzd-cq select{
	width:100%;padding:10px 12px !important;
	background:#faf6ef !important;border:1px solid transparent !important;
	border-radius:10px !important;font-size:14px !important;
	color:#2E2E31 !important;font-family:inherit;
	transition:border-color .15s, background .15s;box-sizing:border-box;
}
.wzd-pdp.wzd-pdp .wzd-cq input:focus,
.wzd-pdp.wzd-pdp .wzd-cq textarea:focus,
.wzd-pdp.wzd-pdp .wzd-cq select:focus{
	background:#fff !important;border-color:#8E2521 !important;outline:none !important;
}

/* ── Submit button — iOS pill ── */
.wzd-pdp.wzd-pdp .wzd-cq button[type="submit"],
.wzd-pdp.wzd-pdp .wzd-cq-submit{
	width:100%;padding:14px 18px !important;
	background:linear-gradient(135deg,#8E2521,#6e1e1b) !important;
	color:#fff !important;border:0 !important;
	font-size:15px !important;font-weight:700 !important;
	border-radius:14px !important;cursor:pointer;
	box-shadow:0 6px 16px -6px rgba(142,37,33,.40);
	transition:transform .15s, box-shadow .15s;
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin-top:8px;
}
.wzd-pdp.wzd-pdp .wzd-cq button[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 10px 24px -6px rgba(142,37,33,.50)}

/* ── Tighter spacing on mobile ── */
@media (max-width:540px){
	.wzd-pdp.wzd-pdp{padding:14px 0 36px !important}
	.wzd-pdp.wzd-pdp .wzd-cq{padding:18px !important;border-radius:16px !important}
	.wzd-pdp.wzd-pdp .wzd-pdp-mainimg{border-radius:18px !important;padding:14px}
}

/* ===========================================================
   PDP iOS26 MINIMAL — clean, no duplicate info
   ----------------------------------------------------------- */

/* Title — single line on desktop, wrap nicely on mobile */
.wzd-pdp-title,h1.wzd-pdp-title{
	font-size:clamp(20px,2.4vw,28px) !important;
	font-weight:700 !important;line-height:1.3 !important;
	color:#2E2E31 !important;margin:0 0 8px !important;letter-spacing:-.01em !important;
}
@media (min-width:1100px){
	.wzd-pdp-title,h1.wzd-pdp-title{font-size:24px !important;white-space:normal;text-wrap:balance}
}

/* Category badge — small subtle */
.wzd-pdp-cat-badge{
	display:inline-block;font-size:11px !important;font-weight:700 !important;
	color:#8E2521 !important;background:rgba(142,37,33,.08);
	padding:4px 10px;border-radius:999px;
	text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;
}

/* SKU + sub text — compact */
.wzd-pdp-sub{
	font-size:14px !important;color:#6B6661 !important;
	line-height:1.6 !important;margin:8px 0 18px !important;
}

/* Spec cards — primary info (the ONLY place ขนาด/น้ำหนัก/ใช้งาน shown) */
.wzd-pdp-specs-cards{
	display:grid !important;grid-template-columns:repeat(3,1fr) !important;
	gap:12px !important;margin:0 0 24px !important;
}
.wzd-pdp-spec-card{
	background:#faf6ef !important;border:1px solid rgba(46,46,49,.06) !important;
	border-radius:14px !important;padding:18px 14px !important;
	display:flex !important;flex-direction:column !important;align-items:center !important;
	gap:10px !important;text-align:center !important;
}
.wzd-pdp-spec-card-ic{
	width:48px !important;height:48px !important;border-radius:12px !important;
	background:#fff !important;color:#8E2521 !important;
	display:flex !important;align-items:center !important;justify-content:center !important;
	font-size:24px !important;border:1px solid rgba(46,46,49,.06);
	box-shadow:0 1px 2px rgba(46,46,49,.04);
}
.wzd-pdp-spec-card-lbl{
	font-size:11.5px !important;color:#6B6661 !important;
	font-weight:500 !important;letter-spacing:.02em;line-height:1.3;
	text-transform:none;
}
.wzd-pdp-spec-card-val{
	font-size:14.5px !important;color:#2E2E31 !important;
	font-weight:700 !important;line-height:1.35;letter-spacing:0;
}
@media (max-width:540px){
	.wzd-pdp-specs-cards{grid-template-columns:1fr 1fr !important}
	.wzd-pdp-spec-card:nth-child(3){grid-column:1 / -1}
	.wzd-pdp-spec-card-ic{width:44px !important;height:44px !important;font-size:22px !important}
}

/* Spec table — iOS26 clean */
.wzd-pdp-block-h,h3.wzd-pdp-block-h{
	font-size:15px !important;font-weight:700 !important;
	color:#2E2E31 !important;margin:24px 0 12px !important;letter-spacing:0;
}
.wzd-spec-table{
	width:100%;border-collapse:separate !important;border-spacing:0 !important;
	background:#fff;border-radius:12px;overflow:hidden;
	border:1px solid rgba(46,46,49,.06) !important;font-size:13.5px !important;
}
.wzd-spec-table th,.wzd-spec-table td{
	padding:11px 14px !important;border-bottom:1px solid rgba(46,46,49,.05) !important;
	text-align:left !important;vertical-align:top;
}
.wzd-spec-table tr:last-child th,.wzd-spec-table tr:last-child td{border-bottom:0 !important}
.wzd-spec-table th{
	background:#faf6ef !important;color:#6B6661 !important;
	font-weight:500 !important;width:38%;font-size:13px !important;
}
.wzd-spec-table td{color:#2E2E31 !important;font-weight:500}

/* Bullets — Used For / Highlights */
.wzd-pdp-bullets{
	display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.wzd-pdp-bullets ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.wzd-pdp-bullets li{
	font-size:13.5px !important;color:#2E2E31 !important;line-height:1.5;
	padding-left:20px;position:relative;
}
.wzd-pdp-bullets li::before{
	content:"✓";position:absolute;left:0;top:0;
	color:#8E2521;font-weight:700;
}
@media (max-width:680px){
	.wzd-pdp-bullets{grid-template-columns:1fr;gap:12px}
}

/* Calc & Quote card — cream + tight */
.wzd-cq{
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	border-radius:18px !important;padding:18px !important;
	box-shadow:0 2px 12px -4px rgba(46,46,49,.08) !important;
}
.wzd-cq-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(46,46,49,.06)}
.wzd-cq-ic{
	width:38px;height:38px;border-radius:10px;
	background:#faf6ef;color:#8E2521;
	display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
	border:1px solid rgba(46,46,49,.06);
}
.wzd-cq-t,h3.wzd-cq-t{font-size:15.5px !important;font-weight:700 !important;color:#2E2E31 !important;margin:0 !important;line-height:1.3}
.wzd-cq-s{font-size:12.5px !important;color:#6B6661 !important;margin:2px 0 0 !important;line-height:1.4}
.wzd-cq-dims-warn-only{
	display:flex !important;align-items:center;gap:8px;
	background:#fff8f0;border:1px solid rgba(217,137,73,.20);border-radius:10px;
	padding:10px 12px;font-size:12.5px;color:#6B6661;margin:0 0 14px;
}
.wzd-cq-dims-warn-only i{color:#D98949;font-size:16px;flex-shrink:0}

/* Section accordion-style spec sections below */
.wzd-pdp-sec{
	background:#fff !important;border:1px solid rgba(46,46,49,.06) !important;
	border-radius:16px !important;padding:22px !important;margin:0 0 16px !important;
}
.wzd-pdp-sec-h,h2.wzd-pdp-sec-h{
	font-size:17px !important;font-weight:700 !important;
	color:#2E2E31 !important;margin:0 0 16px !important;
	display:flex;align-items:center;gap:8px;
}
.wzd-pdp-sec-h i{
	width:32px;height:32px;border-radius:9px;
	background:#faf6ef;color:#8E2521;
	display:flex;align-items:center;justify-content:center;font-size:16px;
}

@media (max-width:540px){
	.wzd-pdp-specs-cards{grid-template-columns:1fr 1fr !important}
	.wzd-pdp-spec-card:nth-child(3){grid-column:1 / -1}
	.wzd-pdp-title,h1.wzd-pdp-title{font-size:20px !important}
}

/* ===========================================================
   SINGLE PRODUCT — mobile-first refinements
   (additive; original styles in style.css)
   ----------------------------------------------------------- */
.wzd-pdp-side{position:sticky;top:84px;display:grid;gap:16px;align-self:start}
.wzd-pdp-mobile-cta{display:none;margin:0 0 16px}
.wzd-pdp-mobile-cta .wzd-btn{width:100%;justify-content:center}

@media (max-width:880px){
	.wzd-pdp-grid:not(.wzd-pdp-grid--2col){grid-template-columns:1fr !important;gap:18px !important;display:flex !important;flex-direction:column !important}
	.wzd-pdp-side{position:static}
	.wzd-pdp-mobile-cta{display:block;position:sticky;top:56px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(170%) blur(10px);padding:8px 0;margin:0 0 12px}
	.wzd-pdp-grid .wzd-pdp-gallery{order:1}
	.wzd-pdp-grid .wzd-pdp-info{order:2}
	.wzd-pdp-grid .wzd-pdp-side{order:3}
	.wzd-pdp-specs-cards{grid-template-columns:1fr 1fr !important;gap:8px !important}
	.wzd-pdp-specs-cards > div:nth-child(3){grid-column:1 / -1}
}

/* ===========================================================
   HEADER — STICKY + tight height
   ----------------------------------------------------------- */
.wzd-nav.wzd-nav{
	position:sticky !important;top:0 !important;z-index:90 !important;
	background:rgba(255,255,255,.94) !important;
	backdrop-filter:saturate(180%) blur(16px) !important;
	-webkit-backdrop-filter:saturate(180%) blur(16px) !important;
	border-bottom:1px solid rgba(46,46,49,.08) !important;
	transition:box-shadow .2s;
}
.wzd-nav.wzd-nav:hover,.wzd-nav.wzd-nav.wzd-nav-scrolled{box-shadow:0 4px 14px -8px rgba(46,46,49,.12)}
html{scroll-padding-top:80px}  /* anchor links land below sticky header */
.wzd-nav-inner{height:84px;display:flex;align-items:center;gap:14px;padding-top:0;padding-bottom:0}
.wzd-nav .wzd-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-charcoal,#2E2E31);flex-shrink:0}
.wzd-nav .wzd-brand .wzd-wmark{width:56px !important;height:56px !important}
.wzd-nav .wzd-brand-text{display:flex;flex-direction:column;line-height:1.05;font-weight:700;gap:1px}
.wzd-nav .wzd-brand-primary{font-size:20px;letter-spacing:.04em;color:var(--c-charcoal,#2E2E31);font-weight:800;display:block}
.wzd-nav .wzd-brand small{display:block;font-size:11.5px;color:var(--c-ink-soft,#6B6661);font-weight:400;letter-spacing:0;margin-top:2px}
/* Hide old legacy class names */
.wzd-brand-watzadu,.wzd-brand-dot,.wzd-brand-wdc,.wzd-brand-wdc-main,.wzd-brand-watzadu-sub{display:none !important}
.wzd-nav-items{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.wzd-nav-items > li > a{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;color:var(--c-charcoal,#2E2E31);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s,color .15s;white-space:nowrap}
.wzd-nav-items > li > a:hover,
.wzd-nav-items > li > a.on{background:var(--c-ivory,#F8F5EF);color:var(--c-brick,#8E2521)}
.wzd-nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.wzd-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--c-charcoal,#2E2E31);text-decoration:none;position:relative;transition:background .15s}
.wzd-nav-icon:hover{background:var(--c-ivory,#F8F5EF)}
.wzd-nav-icon-badge{position:absolute;top:2px;right:2px;background:var(--c-brick,#8E2521);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.wzd-cta-quote{padding:9px 14px !important;font-size:13.5px !important;border-radius:10px !important;font-weight:600 !important}
.wzd-menu-toggle{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;background:var(--c-ivory,#F8F5EF)}
.wzd-menu-toggle span{display:block;width:18px;height:2px;background:var(--c-charcoal,#2E2E31);border-radius:2px}
.wzd-menu-toggle-input{position:absolute;left:-9999px}

@media (max-width:1100px){
	.wzd-nav-items > li > a{padding:7px 10px;font-size:13.5px}
}
@media (max-width:980px){
	.wzd-nav-inner{height:68px;gap:10px}
	.wzd-nav .wzd-brand .wzd-wmark{width:44px !important;height:44px !important}
	.wzd-nav .wzd-brand-watzadu{font-size:14.5px}
	.wzd-nav .wzd-brand-wdc{font-size:10px}
	.wzd-nav-menu{display:none}
	.wzd-menu-toggle{display:flex}
	.wzd-cta-quote span{display:inline}
	.wzd-cta-quote{padding:8px 12px !important;font-size:13px !important}
	.wzd-nav-icon{width:36px;height:36px}
}
@media (max-width:480px){
	.wzd-nav-inner{height:60px}
	.wzd-nav .wzd-brand .wzd-wmark{width:38px !important;height:38px !important}
	.wzd-nav .wzd-brand-text{display:none}
	.wzd-nav-icon[aria-label="ค้นหา"]{display:none}
}

/* Drawer (mobile menu) */
.wzd-drawer{position:fixed;top:0;right:0;width:min(360px,86vw);height:100vh;background:#fff;z-index:91;box-shadow:-8px 0 30px rgba(46,46,49,.15);transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;display:flex;flex-direction:column}
.wzd-menu-toggle-input:checked ~ .wzd-drawer{right:0;transform:translateX(0)}
.wzd-menu-toggle-input:checked ~ .wzd-menu-overlay{opacity:1;pointer-events:auto}
.wzd-menu-overlay{position:fixed;inset:0;background:rgba(46,46,49,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.wzd-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(46,46,49,.08)}
.wzd-drawer-close{width:36px;height:36px;border-radius:10px;background:var(--c-ivory,#F8F5EF);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-charcoal,#2E2E31);font-size:20px}
.wzd-drawer-nav{flex:1;overflow-y:auto;padding:8px 0}
.wzd-drawer-items{list-style:none;margin:0;padding:0}
.wzd-drawer-items > li > a{display:block;padding:13px 20px;color:var(--c-charcoal,#2E2E31);text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid rgba(46,46,49,.04)}
.wzd-drawer-items > li > a:hover{background:var(--c-ivory,#F8F5EF);color:var(--c-brick,#8E2521)}
.wzd-drawer-cta{padding:16px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid rgba(46,46,49,.08);display:flex;flex-direction:column;gap:8px}

/* ===========================================================
   HERO — tighter (480-560 desktop, ≤520 mobile)
   ----------------------------------------------------------- */
.wzd-hero--lg{min-height:520px;max-height:620px}
.wzd-hero--md{min-height:340px;max-height:440px}
.wzd-hero-inner{padding:40px 16px 48px}
.wzd-hero--lg .wzd-hero-inner{padding-top:52px;padding-bottom:64px}
@media (max-width:980px){
	.wzd-hero--lg{min-height:440px;max-height:540px}
	.wzd-hero--md{min-height:300px;max-height:400px}
}
@media (max-width:768px){
	.wzd-hero--lg{min-height:380px;max-height:520px}
	.wzd-hero--md{min-height:260px;max-height:360px}
	.wzd-hero-inner{padding:32px 16px 40px}
	.wzd-hero--lg .wzd-hero-inner{padding-top:36px;padding-bottom:44px}
}
@media (max-width:480px){
	.wzd-hero--lg{min-height:450px}
	.wzd-hero--md{min-height:240px}
}

/* ===========================================================
   PRODUCT CARD — image-first (60-70%), equal-height
   ----------------------------------------------------------- */
.wzd-prod,.wzd-prod-pdf{
	background:#fff;border:1px solid rgba(46,46,49,.06);border-radius:14px;
	overflow:hidden;display:flex;flex-direction:column;height:100%;
	box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.wzd-prod:hover,.wzd-prod-pdf:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.wzd-prod-img,.wzd-prod-pdf .wzd-prod-img{
	display:flex;align-items:center;justify-content:center;background:#fff;
	aspect-ratio:1/1;overflow:hidden;position:relative;padding:16px;
}
.wzd-prod-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s}
.wzd-prod:hover .wzd-prod-img img{transform:scale(1.04)}
.wzd-prod-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.wzd-prod-name{font-size:14px;font-weight:600;line-height:1.35;margin:0;color:var(--c-charcoal,#2E2E31);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.wzd-prod-size{font-size:12px;color:var(--c-ink-soft,#6B6661);line-height:1.4}
.wzd-prod-price{font-size:16px;font-weight:700;color:var(--c-brick,#8E2521);margin-top:auto;padding-top:4px}
.wzd-prod-price--quote,.wzd-prod-price.wzd-prod-price--quote{color:var(--c-ink-soft,#6B6661);font-size:13px;font-weight:500}
.wzd-prod-actions{display:flex;gap:6px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(46,46,49,.05)}
.wzd-prod-link{flex:1;font-size:13px;color:var(--c-charcoal,#2E2E31);text-decoration:none;font-weight:500;padding:6px 0;transition:color .15s}
.wzd-prod-link:hover{color:var(--c-brick,#8E2521)}
.wzd-prod-cart{width:34px;height:34px;border-radius:8px;background:var(--c-brick,#8E2521);color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;transition:background .15s,transform .15s}
.wzd-prod-cart:hover{background:var(--c-clay,#A63B2C);transform:scale(1.05)}

@media (max-width:540px){
	.wzd-prod-body{padding:10px 12px 12px}
	.wzd-prod-name{font-size:13px;min-height:2.6em}
	.wzd-prod-size{font-size:11px}
	.wzd-prod-price{font-size:15px}
	.wzd-prod-link{font-size:12px}
	.wzd-prod-cart{width:30px;height:30px;font-size:14px}
}

/* ===========================================================
   CALC FORM — dims chip + picked-location chip + hide selects
   ----------------------------------------------------------- */
.wzd-vh,.wzd-cq-row-3col.wzd-vh{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.wzd-cq-dims{
	display:flex;align-items:center;gap:8px;
	background:linear-gradient(135deg, var(--c-ivory,#F8F5EF), #fff);
	border:1px solid rgba(46,46,49,.08);border-radius:10px;
	padding:10px 12px;font-size:13.5px;color:var(--c-charcoal,#2E2E31);margin:0 0 12px;
}
.wzd-cq-dims i{color:var(--c-brick,#8E2521);font-size:18px}
.wzd-cq-dims strong{color:var(--c-brick,#8E2521);font-weight:600}
.wzd-cq-dims-warn{color:var(--c-ink-soft,#6B6661);font-style:italic}
.wzd-cq-loc-search{position:relative}
.wzd-cq-loc-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--c-brick,#8E2521);font-size:18px;pointer-events:none;z-index:2}
.wzd-cq-text--loc{padding-left:42px !important}
.wzd-cq-loc-picked{
	display:flex;align-items:center;gap:8px;margin-top:6px;
	background:rgba(6,199,85,.08);border:1px solid rgba(6,199,85,.25);border-radius:10px;
	padding:8px 12px;font-size:13.5px;color:var(--c-charcoal,#2E2E31);
}
.wzd-cq-loc-picked i{color:#06c755;font-size:18px}
.wzd-cq-loc-picked span{flex:1}
.wzd-cq-loc-picked button{
	background:transparent;border:0;color:var(--c-ink-soft,#6B6661);
	width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:18px;line-height:1;
}
.wzd-cq-loc-picked button:hover{background:rgba(46,46,49,.06);color:var(--c-brick,#8E2521)}

/* ===========================================================
   FOOTER — CI แดง-ขาว overrides (Design C v4)
   ----------------------------------------------------------- */
.wzd-foot{background:#fff !important;color:var(--c-ink,#2E2E31);padding:0}
.wzd-foot a{color:var(--c-ink-soft,#5a5a60);text-decoration:none}
.wzd-foot a:hover{color:#8E2521}
.wzd-foot-grid{padding-bottom:40px;gap:36px}
.wzd-foot-brand-col{gap:16px}
.wzd-foot-brand{align-items:center;gap:12px}
.wzd-foot-brand-t{line-height:1.1;color:var(--c-ink,#2E2E31);display:flex;flex-direction:column;gap:1px}
.wzd-foot-brand-main{font-size:24px;font-weight:800;letter-spacing:.04em;color:var(--c-ink,#2E2E31);line-height:1}
.wzd-foot-brand-watzadu{display:none !important}
.wzd-foot-brand-t small{font-size:13.5px;color:var(--c-ink-soft,#888);margin-top:8px;font-weight:400;letter-spacing:.01em}
.wzd-foot-col li,.wzd-foot-col li a{font-size:13.5px;line-height:1.7;color:var(--c-ink-soft,#666)}
.wzd-foot-about{font-size:14px;color:var(--c-ink-soft,#666);line-height:1.7;max-width:300px}
.wzd-foot-contact li{color:var(--c-ink,#2E2E31)}
.wzd-foot-contact li i{color:#8E2521}
details.wzd-foot-col summary h4{font-size:13px;letter-spacing:.05em;font-weight:700;color:var(--c-ink,#2E2E31)}
.wzd-foot-col--policy summary h4{color:#8E2521}
.wzd-foot-social a{background:#f2f2f4;color:var(--c-ink-soft,#555)}
.wzd-foot-social a:hover{background:#8E2521;color:#fff}
.wzd-foot-bottom{border-top:1px solid var(--c-line-soft,#e8e8e8);font-size:13px;color:var(--c-ink-soft,#888)}
.wzd-foot-legal a{font-size:13px;color:var(--c-ink-soft,#888)}
.wzd-foot-legal a:hover{color:#8E2521}
@media (max-width:680px){
	.wzd-foot-col li,.wzd-foot-col li a{font-size:14px}
	.wzd-foot-about{font-size:14px;max-width:none}
	.wzd-foot-contact li{font-size:14px}
	.wzd-foot-brand-main{font-size:20px}
}

/* ===========================================================
   FLOATING CONTACT FAB — single button, click to expand
   =========================================================== */
.wzd-fab-toggle-input{position:absolute;left:-9999px}
.wzd-fab{
	position:fixed;right:20px;bottom:24px;z-index:9000;
	display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;
	pointer-events:none;
}
.wzd-fab-main,.wzd-fab-item{pointer-events:auto}
.wzd-fab-main{
	width:56px;height:56px;border-radius:999px;
	background:linear-gradient(135deg,var(--c-brick,#8E2521),var(--c-clay,#A63B2C));
	color:#fff;display:flex;align-items:center;justify-content:center;
	cursor:pointer;font-size:24px;
	box-shadow:0 6px 20px -4px rgba(142,37,33,.45),0 2px 6px rgba(0,0,0,.10);
	transition:transform .2s;user-select:none;
}
.wzd-fab-main:hover{transform:scale(1.06)}
.wzd-fab-icon-close{display:none}
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-icon-open,
.wzd-fab.is-open .wzd-fab-icon-open{display:none}
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-icon-close,
.wzd-fab.is-open .wzd-fab-icon-close{display:flex}
.wzd-fab-stack{
	display:flex;flex-direction:column;gap:8px;align-items:flex-end;
	opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
	transition:opacity .18s,transform .18s;
}
.wzd-fab-toggle-input:checked ~ .wzd-fab .wzd-fab-stack,
.wzd-fab.is-open .wzd-fab-stack{
	opacity:1;transform:none;pointer-events:auto;
}
.wzd-fab-item{
	display:inline-flex;align-items:center;gap:10px;
	width:auto;height:auto;              /* override style.css 46px circle */
	background:#fff;border:1px solid rgba(46,46,49,.08);
	box-shadow:0 4px 16px -4px rgba(0,0,0,.15);
	padding:8px 16px 8px 8px;border-radius:999px;
	color:var(--c-charcoal,#2E2E31);text-decoration:none;
	font-size:13.5px;font-weight:600;white-space:nowrap;
	transition:transform .15s,box-shadow .15s;
}
.wzd-fab-item:hover{
	transform:translateX(-4px);
	box-shadow:0 6px 20px -4px rgba(0,0,0,.20);
}
.wzd-fab-icon{
	width:34px;height:34px;border-radius:999px;
	display:flex;align-items:center;justify-content:center;
	font-size:17px;flex-shrink:0;
}
.wzd-fab-line .wzd-fab-icon{background:#06c755;color:#fff}
.wzd-fab-phone .wzd-fab-icon{background:var(--c-brick,#8E2521);color:#fff}
.wzd-fab-quote .wzd-fab-icon{background:var(--c-orange,#D98949);color:#fff}
.wzd-fab-label{line-height:1;letter-spacing:.01em}
@media(max-width:720px){
	.wzd-fab{bottom:80px}
	.wzd-fab-item{font-size:13px;padding:7px 14px 7px 7px}
	.wzd-fab-icon{width:30px;height:30px;font-size:15px}
}

/* ===========================================================
   CI BRANDBOOK COMPLIANCE LAYER — applies CI ratio across PDP
   60% Brick · 25% Neutral · 15% Orange/Terracotta accent
   ----------------------------------------------------------- */

/* PDP page surface — official Ivory White (CI #F8F5EF) */
.wzd-pdp.wzd-pdp{background:var(--c-ivory) !important}

/* Category badge — Brick primary */
.wzd-pdp.wzd-pdp .wzd-pdp-cat-badge{
	color:var(--c-brick) !important;
	background:rgba(142,37,33,.08) !important;
}

/* H1 + sub — Charcoal ink */
.wzd-pdp.wzd-pdp .wzd-pdp-title,
.wzd-pdp.wzd-pdp h1.wzd-pdp-title{color:var(--c-charcoal) !important}
.wzd-pdp.wzd-pdp .wzd-pdp-sub{color:var(--c-ink-soft) !important}

/* Spec card icon — subtle Brick → Terracotta gradient (matches W mark fold) */
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-ic,
.wzd-pdp .wzd-pdp-spec-card-ic{
	background:linear-gradient(135deg, #fff 0%, var(--c-beige) 100%) !important;
	color:var(--c-brick) !important;
	border:1px solid rgba(199,107,68,.18) !important;
}

/* Spec card hover — suppressed (row style handles via background) */
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:hover{
	border-color:inherit !important;
	box-shadow:none !important;
}

/* Row layout: icon shrinks, label stretches, value aligns right */
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-ic{
	width:30px !important;height:30px !important;border-radius:8px !important;
	font-size:14px !important;flex-shrink:0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-lbl{
	flex:1 !important;font-size:12px !important;color:var(--c-ink-soft) !important;
	font-weight:400 !important;text-align:left !important;letter-spacing:0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-val{
	font-size:13px !important;font-weight:600 !important;text-align:right !important;
	color:var(--c-charcoal) !important;letter-spacing:0 !important;
}

/* Spec table header bg = Ivory; body = Charcoal */
.wzd-pdp.wzd-pdp .wzd-spec-table th{
	background:var(--c-ivory) !important;color:var(--c-ink-soft) !important;
}
.wzd-pdp.wzd-pdp .wzd-spec-table td{color:var(--c-charcoal) !important}

/* Bullet check icon — Brick on light brick tint */
.wzd-pdp.wzd-pdp .wzd-pdp-bullets li::before{
	background-color:rgba(142,37,33,.10) !important;
}

/* "เหมาะกับการใช้งาน" target icon — Brick (primary use) */
.wzd-pdp .wzd-pdp-bullets h3 .ti-target{color:var(--c-brick) !important}
/* "จุดเด่นสินค้า" star icon — Orange (accent) */
.wzd-pdp .wzd-pdp-bullets h3 .ti-star{color:var(--c-orange) !important}

/* Real product excerpt body — render merchant's actual HTML cleanly */
.wzd-pdp-excerpt-body{
	background:#fff;border:1px solid rgba(46,46,49,.06);
	border-radius:var(--r-lg);padding:20px 22px;
	box-shadow:0 1px 2px rgba(46,46,49,.03);
}
.wzd-pdp-excerpt-body ul,.wzd-pdp-excerpt-body ol{
	list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;
}
.wzd-pdp-excerpt-body li{
	font-size:14px;color:var(--c-charcoal);line-height:1.55;
	padding-left:26px;position:relative;
}
.wzd-pdp-excerpt-body li::before{
	content:"";position:absolute;left:0;top:6px;
	width:18px;height:18px;border-radius:50%;
	background:rgba(142,37,33,.10);
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%238E2521' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;background-size:14px 14px;background-position:center;
}
.wzd-pdp-excerpt-body p{margin:0 0 10px;font-size:14px;color:var(--c-charcoal);line-height:1.6}
.wzd-pdp-excerpt-body p:last-child{margin-bottom:0}
.wzd-pdp-excerpt-body strong{color:var(--c-charcoal);font-weight:700}

/* ===========================================================
   PDP OVERFLOW + CONTRAST FIXES — user reported text spilling
   into fields and faint labels on the brick PDP
   ----------------------------------------------------------- */

/* Grid ratio: side column was too narrow at ~1100px → numbers crashed suffix.
   Make all three columns balanced and add safety min-width. (legacy 3-col only) */
.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){
	grid-template-columns:minmax(280px,1fr) minmax(320px,1.25fr) minmax(300px,1fr) !important;
	gap:28px !important;
}
@media (max-width:1100px){
	.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){
		grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) !important;gap:24px !important;
	}
}
@media (max-width:780px){
	.wzd-pdp.wzd-pdp .wzd-pdp-grid:not(.wzd-pdp-grid--2col){grid-template-columns:1fr !important;gap:20px !important}
}

/* Calc inputs — reserve room on the right for the suffix tag. The base
   style.css uses padding 9.5px 52px 9.5px 13px; our v2 had stripped that to
   10px 12px which crashed the number into "ตร.ม.". Restore right padding
   per input type. */
.wzd-pdp.wzd-pdp .wzd-cq input[type="number"]{
	padding:11px 64px 11px 14px !important;
	font-size:15px !important;
	color:var(--c-charcoal) !important;
	font-weight:600 !important;
	font-family:var(--font-en),var(--font-thai);
	text-overflow:ellipsis;
}
.wzd-pdp.wzd-pdp .wzd-cq input[type="text"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="tel"],
.wzd-pdp.wzd-pdp .wzd-cq textarea{
	padding:11px 14px !important;
	font-size:14.5px !important;
	color:var(--c-charcoal) !important;
	text-overflow:ellipsis;
}
.wzd-pdp.wzd-pdp .wzd-cq input::placeholder,
.wzd-pdp.wzd-pdp .wzd-cq textarea::placeholder{
	color:var(--c-ink-soft) !important;opacity:.85;font-weight:500;
}
.wzd-pdp.wzd-pdp .wzd-cq input[type="text"][data-loc-search],
.wzd-pdp.wzd-pdp .wzd-cq input.wzd-cq-text--loc{
	padding-left:42px !important;
}

/* Suffix — pin to right with safe max-width, never push beyond input box */
.wzd-pdp.wzd-pdp .wzd-cq-suffix{
	position:absolute !important;
	right:14px !important;top:50% !important;transform:translateY(-50%) !important;
	font-size:12.5px !important;font-weight:600 !important;
	color:var(--c-ink-soft) !important;
	max-width:54px;white-space:nowrap;overflow:hidden;text-overflow:clip;
	pointer-events:none;background:transparent;
	padding:0;
	letter-spacing:0;
}
.wzd-pdp.wzd-pdp .wzd-cq-input-group{position:relative;min-width:0}

/* 2-col input rows — must not collapse below readable width */
.wzd-pdp.wzd-pdp .wzd-cq-row-2col{
	display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;
	margin-bottom:8px;
}
@media (max-width:420px){
	.wzd-pdp.wzd-pdp .wzd-cq-row-2col{grid-template-columns:1fr !important}
}
.wzd-pdp.wzd-pdp .wzd-cq-row{margin-bottom:12px}

/* Label contrast — was charcoal at #6B6661 (low) → use #2E2E31 for legibility */
.wzd-pdp.wzd-pdp .wzd-cq-label{
	color:var(--c-charcoal) !important;
	font-size:13.5px !important;font-weight:600 !important;
	margin-bottom:7px;display:flex;align-items:center;gap:6px;
}
.wzd-pdp.wzd-pdp .wzd-cq-label-aux{
	color:var(--c-ink-soft) !important;
	font-size:11.5px !important;font-weight:500 !important;margin-left:4px;
}
.wzd-pdp.wzd-pdp .wzd-cq-step-label{
	color:var(--c-charcoal) !important;
	font-size:13px !important;font-weight:700 !important;
	letter-spacing:.02em;text-transform:uppercase;
	display:flex;align-items:center;gap:6px;margin-bottom:10px;
}

/* Calc head: ensure title text wraps properly inside its tight column */
.wzd-pdp.wzd-pdp .wzd-cq-head{gap:10px !important;align-items:flex-start !important}
.wzd-pdp.wzd-pdp .wzd-cq-head-body,.wzd-pdp.wzd-pdp .wzd-cq-head > div:last-child{min-width:0;flex:1}
.wzd-pdp.wzd-pdp .wzd-cq-t{
	font-size:15.5px !important;line-height:1.3 !important;
	overflow-wrap:break-word;word-break:normal;
}
.wzd-pdp.wzd-pdp .wzd-cq-s{
	font-size:12px !important;line-height:1.5 !important;
	color:var(--c-ink-soft) !important;
}

/* Mode buttons — labels can be 2-line on narrow column; ensure they stack */
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn{
	min-width:0;padding:10px 6px !important;
	display:flex !important;flex-direction:column !important;align-items:center !important;
	gap:1px;line-height:1.25;
}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn-t{font-size:13px;font-weight:600}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn-s{font-size:10.5px;color:var(--c-ink-soft);font-weight:500}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn.on .wzd-cq-mode-btn-s{color:var(--c-brick);opacity:.7}

/* Waste radio chips — 3 columns can crash on narrow side; allow wrap on smallest */
.wzd-pdp.wzd-pdp .wzd-cq-waste{
	display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	gap:4px !important;background:var(--c-ivory) !important;
	padding:4px !important;border-radius:11px !important;
	border:1px solid rgba(46,46,49,.06);
}
.wzd-pdp.wzd-pdp .wzd-cq-waste label{flex:1;cursor:pointer;min-width:0}
.wzd-pdp.wzd-pdp .wzd-cq-waste label span{
	display:flex;align-items:center;justify-content:center;
	padding:9px 4px;border-radius:8px;
	background:transparent;border:1px solid transparent;
	font-size:12.5px;color:var(--c-charcoal);font-weight:600;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	transition:all .15s;font-family:var(--font-en);
}
.wzd-pdp.wzd-pdp .wzd-cq-waste input[type="radio"]:checked + span{
	background:#fff;border-color:var(--c-brick);color:var(--c-brick);
	box-shadow:0 1px 4px rgba(142,37,33,.16);
}

/* Result card — ensure number + unit fit, never wrap mid-value */
.wzd-pdp.wzd-pdp .wzd-cq-result{
	background:linear-gradient(135deg,#FFFCF6 0%, var(--c-ivory) 100%) !important;
	border:1px solid rgba(199,107,68,.18) !important;
	border-radius:var(--r-md) !important;
	padding:16px 18px !important;margin-top:14px;text-align:center;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-label{
	font-size:11px !important;color:var(--c-ink-soft) !important;
	letter-spacing:.06em;font-weight:600;margin-bottom:4px;
	text-transform:uppercase;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num{
	font-size:clamp(22px,3vw,28px) !important;
	font-weight:800 !important;color:var(--c-brick) !important;
	font-family:var(--font-en) !important;letter-spacing:-.02em;
	line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num small{
	font-size:13.5px !important;font-weight:600 !important;
	color:var(--c-ink-soft) !important;
	font-family:var(--font-thai) !important;margin-left:4px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-rows{
	margin-top:10px;padding-top:10px;
	border-top:1px dashed rgba(142,37,33,.22);
	display:grid;gap:6px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-row{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:8px;padding:2px 0;
	font-size:13px;min-width:0;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-lbl{
	display:inline-flex;align-items:center;gap:5px;
	color:var(--c-charcoal);font-weight:600;font-size:12.5px;flex-shrink:0;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-lbl i{color:var(--c-brick);font-size:15px}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-val{
	text-align:right;min-width:0;color:var(--c-charcoal);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-val strong{
	font-weight:800;color:var(--c-brick);
	font-family:var(--font-en);font-size:15px;letter-spacing:-.01em;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-unit{
	font-size:11.5px;font-weight:600;color:var(--c-ink-soft);
	margin-left:2px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-aux{
	font-style:normal;font-size:11px;color:var(--c-ink-mute);
	margin-left:4px;font-weight:500;white-space:nowrap;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-extra{
	font-size:12.5px;color:var(--c-charcoal);margin-top:8px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-extra span{
	font-weight:700;color:var(--c-brick);font-family:var(--font-en);
}
.wzd-pdp.wzd-pdp .wzd-cq-result-note{
	font-size:11.5px;color:var(--c-ink-soft);margin-top:10px;
	line-height:1.5;display:flex;align-items:flex-start;gap:5px;justify-content:center;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-note i{color:var(--c-orange);font-size:13px;flex-shrink:0;margin-top:1px}

/* Submit button row — full width, never overflow text */
.wzd-pdp.wzd-pdp .wzd-cq-submit{
	width:100%;padding:14px 16px !important;
	background:linear-gradient(135deg,var(--c-brick),var(--c-brick-deep)) !important;
	color:#fff !important;border:0 !important;
	font-size:14.5px !important;font-weight:700 !important;
	border-radius:14px !important;cursor:pointer;
	box-shadow:var(--shadow-brick) !important;
	transition:transform .15s,box-shadow .15s;
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin-top:14px;
	white-space:normal;line-height:1.3;text-align:center;
}
.wzd-pdp.wzd-pdp .wzd-cq-submit > span{
	display:inline-flex;align-items:center;gap:7px;
	font-family:var(--font-thai);
}
.wzd-pdp.wzd-pdp .wzd-cq-submit:hover{
	transform:translateY(-1px);box-shadow:var(--shadow-brick-hover) !important;
}

/* Trust line under submit */
.wzd-pdp.wzd-pdp .wzd-cq-trust{
	font-size:11px;color:var(--c-ink-soft);margin-top:10px;
	display:flex;align-items:flex-start;gap:5px;line-height:1.5;
}
.wzd-pdp.wzd-pdp .wzd-cq-trust i{color:var(--c-orange);font-size:13px;flex-shrink:0;margin-top:1px}

/* LINE bridge CTA — between calc result and form */
/* LINE button — main CTA after result */
.wzd-pdp.wzd-pdp .wzd-cq-btn-line{
	display:flex;align-items:center;justify-content:center;gap:8px;
	background:#00B900 !important;color:#fff !important;
	border-radius:14px !important;padding:15px 20px;
	font-size:15px;font-weight:700;text-decoration:none;
	margin-top:14px;border-top:1px solid rgba(46,46,49,.06);
	padding-top:14px;
	transition:opacity .15s;
}
.wzd-pdp.wzd-pdp .wzd-cq-btn-line--main{
	display:flex !important;flex-direction:column !important;gap:4px !important;
	padding:16px 20px !important;border-radius:16px !important;
	box-shadow:0 4px 16px -4px rgba(0,185,0,.35) !important;
	border:none !important;margin-top:16px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-btn-line:hover{opacity:.9;color:#fff !important}
.wzd-pdp.wzd-pdp .wzd-cq-line-note{
	font-size:11px;color:var(--c-ink-soft);
	text-align:center;margin:8px 0 0;
	display:flex;align-items:center;justify-content:center;gap:4px;
}

/* Face hint — was tiny + faint; bump contrast */
.wzd-pdp.wzd-pdp .wzd-cq-face-hint{
	font-size:11.5px !important;color:var(--c-charcoal) !important;
	background:rgba(217,137,73,.06);border:1px solid rgba(217,137,73,.18);
	border-radius:var(--r-sm);padding:7px 10px;margin-top:8px;
	display:flex;align-items:center;gap:6px;
}
.wzd-pdp.wzd-pdp .wzd-cq-face-hint i{color:var(--c-orange);font-size:14px;flex-shrink:0}
.wzd-pdp.wzd-pdp .wzd-cq-face-hint strong{color:var(--c-brick);font-family:var(--font-en);font-weight:700}

/* Location-search result dropdown — make items readable */
.wzd-pdp.wzd-pdp .wzd-cq-loc-results{
	background:#fff !important;border:1px solid rgba(46,46,49,.08) !important;
	border-radius:var(--r-md) !important;
	box-shadow:0 12px 28px -10px rgba(46,46,49,.18) !important;
	max-height:240px;overflow-y:auto;
	position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a{
	display:block;padding:10px 14px;font-size:13.5px;
	color:var(--c-charcoal) !important;text-decoration:none;
	border-bottom:1px solid rgba(46,46,49,.04);
}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a:last-child{border-bottom:0}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a:hover{background:var(--c-ivory)}

/* Picked location chip */
.wzd-pdp.wzd-pdp .wzd-cq-loc-picked{
	display:flex;align-items:center;gap:6px;margin-top:6px;
	font-size:12.5px;color:var(--c-charcoal);
	padding:6px 10px;background:rgba(142,37,33,.06);
	border-radius:999px;border:1px solid rgba(142,37,33,.12);
}

/* Hint under sqm input — was barely visible */
.wzd-pdp.wzd-pdp .wzd-cq-hint{
	font-size:12px !important;color:var(--c-charcoal) !important;
	margin-top:6px;line-height:1.5;
}
.wzd-pdp.wzd-pdp .wzd-cq-hint strong{
	color:var(--c-brick) !important;font-family:var(--font-en);font-weight:700;
}

/* "หรือ" divider */
.wzd-pdp.wzd-pdp .wzd-cq-or{
	text-align:center;font-size:11px;color:var(--c-ink-soft);
	margin:8px 0;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
	position:relative;
}
.wzd-pdp.wzd-pdp .wzd-cq-or::before,
.wzd-pdp.wzd-pdp .wzd-cq-or::after{
	content:"";position:absolute;top:50%;width:calc(50% - 22px);height:1px;
	background:rgba(46,46,49,.08);
}
.wzd-pdp.wzd-pdp .wzd-cq-or::before{left:0}
.wzd-pdp.wzd-pdp .wzd-cq-or::after{right:0}

/* Dims warning chip */
.wzd-pdp.wzd-pdp .wzd-cq-dims-warn-only{
	display:flex;align-items:flex-start;gap:8px;
	background:rgba(217,137,73,.08) !important;
	border:1px solid rgba(217,137,73,.22) !important;
	border-radius:var(--r-sm);padding:10px 12px;margin:0 0 14px;
	font-size:12.5px;color:var(--c-charcoal) !important;line-height:1.5;
}
.wzd-pdp.wzd-pdp .wzd-cq-dims-warn-only i{
	color:var(--c-orange) !important;font-size:16px;flex-shrink:0;margin-top:1px;
}

/* SKU text under title — was inline gray; bump to legible */
.wzd-pdp.wzd-pdp .wzd-pdp-info > div[style*="รหัสสินค้า"],
.wzd-pdp.wzd-pdp .wzd-pdp-info > div:has(> strong){
	font-size:13px !important;color:var(--c-ink-soft) !important;
}

/* SKU inline strong → charcoal not muted */
.wzd-pdp .wzd-pdp-info strong{color:var(--c-charcoal) !important;font-weight:700}

/* Below-the-fold install/use/QC sections — ensure paragraph contrast */
.wzd-pdp-sec p,.wzd-pdp-mini p{color:var(--c-ink-soft) !important;line-height:1.6}
.wzd-pdp-sec h2,.wzd-pdp-sec .wzd-pdp-sec-h{color:var(--c-charcoal) !important}
.wzd-pdp-mini h3,.wzd-pdp-mini h4{color:var(--c-charcoal) !important}

/* Tighter side panel under 1100px → calc inside info column gets full width */
@media (max-width:1100px){
	.wzd-pdp.wzd-pdp .wzd-pdp-side{grid-column:1 / -1 !important;position:static !important}
	.wzd-pdp.wzd-pdp .wzd-cq{max-width:none}
}

/* Mobile (<540px) — input padding-right slightly smaller for short suffixes */
@media (max-width:540px){
	.wzd-pdp.wzd-pdp .wzd-cq input[type="number"]{
		padding-right:58px !important;font-size:14.5px !important;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-suffix{font-size:12px !important;right:12px !important}
	.wzd-pdp.wzd-pdp .wzd-cq{padding:18px !important}
	.wzd-pdp.wzd-pdp .wzd-cq-result-num{font-size:24px !important}
}

/* Calc card icon — Orange tint background (CI accent) */
.wzd-pdp.wzd-pdp .wzd-cq-ic{
	background:linear-gradient(135deg, rgba(217,137,73,.08), rgba(200,107,68,.18)) !important;
	color:var(--c-brick) !important;
	border:1px solid rgba(217,137,73,.20) !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-t{color:var(--c-charcoal) !important}
.wzd-pdp.wzd-pdp .wzd-cq-s{color:var(--c-ink-soft) !important}
.wzd-pdp.wzd-pdp .wzd-cq-step-label{color:var(--c-charcoal) !important}

/* Segmented mode — neutral inactive, Brick active */
.wzd-pdp.wzd-pdp .wzd-cq-mode{background:var(--c-ivory) !important}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn{color:var(--c-ink-soft) !important}
.wzd-pdp.wzd-pdp .wzd-cq-mode-btn.on{color:var(--c-brick) !important}

/* Inputs — Ivory bg, Brick focus */
.wzd-pdp.wzd-pdp .wzd-cq input[type="text"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="tel"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="number"],
.wzd-pdp.wzd-pdp .wzd-cq input[type="search"],
.wzd-pdp.wzd-pdp .wzd-cq textarea,
.wzd-pdp.wzd-pdp .wzd-cq select{
	background:var(--c-ivory) !important;
	color:var(--c-charcoal) !important;
}
.wzd-pdp.wzd-pdp .wzd-cq input:focus,
.wzd-pdp.wzd-pdp .wzd-cq textarea:focus,
.wzd-pdp.wzd-pdp .wzd-cq select:focus{
	border-color:var(--c-brick) !important;
	box-shadow:0 0 0 3px rgba(142,37,33,.08) !important;
}

/* Submit button — official CI Brick gradient */
.wzd-pdp.wzd-pdp .wzd-cq button[type="submit"],
.wzd-pdp.wzd-pdp .wzd-cq-submit{
	background:linear-gradient(135deg, var(--c-brick), var(--c-brick-deep)) !important;
	box-shadow:var(--shadow-brick) !important;
}
.wzd-pdp.wzd-pdp .wzd-cq button[type="submit"]:hover{
	box-shadow:var(--shadow-brick-hover) !important;
}

/* Mobile sticky CTA — same CI Brick treatment */
.wzd-pdp.wzd-pdp .wzd-pdp-mobile-cta .wzd-btn{
	background:linear-gradient(135deg, var(--c-brick), var(--c-brick-deep)) !important;
	box-shadow:var(--shadow-brick) !important;
}

/* PDP result — soft Beige card, Brick number */
.wzd-pdp.wzd-pdp .wzd-cq-result{
	background:var(--c-ivory) !important;
	border:1px solid var(--c-beige) !important;
	border-radius:var(--r-md) !important;
	padding:14px !important;margin-top:14px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-label{
	font-size:12px;color:var(--c-ink-soft) !important;
	text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:4px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num{
	font-size:22px;font-weight:800;color:var(--c-brick) !important;
	font-family:var(--font-en);line-height:1.1;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num small{
	font-size:14px;color:var(--c-ink-soft) !important;font-weight:600;margin-left:4px;
	font-family:var(--font-thai);
}
.wzd-pdp.wzd-pdp .wzd-cq-result-extra{
	font-size:13px;color:var(--c-clay) !important;margin-top:6px;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-note{
	font-size:12px;color:var(--c-ink-soft) !important;
	display:flex;align-items:flex-start;gap:5px;margin-top:8px;line-height:1.4;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-note i{color:var(--c-orange) !important;flex-shrink:0;margin-top:2px}

/* Warning chip — orange */
.wzd-pdp.wzd-pdp .wzd-cq-dims-warn-only{
	display:flex;align-items:center;gap:8px;
	background:rgba(217,137,73,.08) !important;
	border:1px solid rgba(217,137,73,.20) !important;
	border-radius:var(--r-sm) !important;
	padding:10px 12px;margin:0 0 14px;
	font-size:13px;color:var(--c-clay) !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-dims-warn-only i{color:var(--c-orange) !important;font-size:16px;flex-shrink:0}

/* Waste/orientation radio chips — neutral with brick active */
.wzd-pdp.wzd-pdp .wzd-cq-waste label{
	flex:1;cursor:pointer;
}
.wzd-pdp.wzd-pdp .wzd-cq-waste input[type="radio"]{
	position:absolute;opacity:0;pointer-events:none;
}
.wzd-pdp.wzd-pdp .wzd-cq-waste label span{
	display:flex;align-items:center;justify-content:center;
	padding:8px 4px;border-radius:var(--r-sm);
	background:var(--c-ivory);border:1px solid transparent;
	font-size:13px;color:var(--c-ink-soft);font-weight:600;
	transition:all .15s;
}
.wzd-pdp.wzd-pdp .wzd-cq-waste input[type="radio"]:checked + span{
	background:#fff;border-color:var(--c-brick);color:var(--c-brick);
	box-shadow:0 1px 3px rgba(142,37,33,.10);
}
.wzd-pdp.wzd-pdp .wzd-cq-waste{
	display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
	background:var(--c-ivory) !important;padding:4px;border-radius:11px;
	border:1px solid rgba(46,46,49,.05);
}

/* Suffix + labels */
.wzd-pdp.wzd-pdp .wzd-cq-suffix{
	color:var(--c-ink-soft);font-size:13px;
	padding:0 10px;font-weight:500;
}
.wzd-pdp.wzd-pdp .wzd-cq-label{
	font-size:13px;color:var(--c-ink-soft);
	margin-bottom:6px;display:block;font-weight:500;
}

/* Hint/Or dividers */
.wzd-pdp.wzd-pdp .wzd-cq-or{
	text-align:center;font-size:12px;color:var(--c-ink-mute);
	margin:8px 0;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.wzd-pdp.wzd-pdp .wzd-cq-hint{
	font-size:12px;color:var(--c-ink-soft);margin-top:6px;
}
.wzd-pdp.wzd-pdp .wzd-cq-hint strong{color:var(--c-brick);font-family:var(--font-en);font-weight:700}

/* ===================================================================
   CALCULATOR REFACTOR 2026-06-15
   - No sticky side panel (cols scroll together)
   - Area inputs: กว้าง × สูง = ตร.ม. in one row
   - Orientation: 3-part compact row (แนวนอน | แนวตั้ง | pps badge)
   - Waste/mortar: smaller pill chips
   - Result: compact
   - Customer form: name/phone/LINE
   =================================================================== */

/* Side panel: never sticky, no independent scroll — both cols scroll as one */
.wzd-pdp.wzd-pdp .wzd-pdp-side,
.wzd-pdp-grid.wzd-pdp-grid--2col .wzd-pdp-side{
	position:static !important;
	max-height:none !important;
	overflow:visible !important;
	align-self:start;
}

/* ── Area input: กว้าง × สูง = ตร.ม. one-row ── */
.wzd-pdp.wzd-pdp .wzd-cq-col-label{
	display:block;
	text-align:center;
	font-size:11px;font-weight:600;
	color:var(--c-ink-soft);
	margin-bottom:3px;
}
.wzd-pdp.wzd-pdp .wzd-cq-area-3col{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr;
	align-items:end;
	gap:4px;
}
.wzd-pdp.wzd-pdp .wzd-cq-area-sep{
	font-size:16px;font-weight:700;
	color:var(--c-ink-soft);
	padding:0 2px;text-align:center;flex-shrink:0;
}
.wzd-pdp.wzd-pdp .wzd-cq-area-sep--or{
	font-size:11px;font-weight:600;
	color:var(--c-ink-mute);letter-spacing:.04em;
}
/* sqm column: slightly different bg to hint it's derived */
.wzd-pdp.wzd-pdp .wzd-cq-sqm-col input.is-derived{
	background:rgba(142,37,33,.04) !important;
	color:var(--c-brick) !important;
}
/* On mobile: all 3 boxes (กว้าง × สูง = ตรม) stay on ONE row — no wrap */
@media (max-width:480px){
	.wzd-pdp.wzd-pdp .wzd-cq-area-3col{
		display:flex !important;
		flex-wrap:nowrap;
		align-items:center;
		gap:3px;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-area-3col .wzd-cq-input-group{
		flex:1 1 0;
		min-width:0;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-area-3col .wzd-cq-area-sep{
		flex:0 0 auto;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-area-3col .wzd-cq-area-sep--or{
		display:none;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-area-3col .wzd-cq-col-label{
		font-size:9px;
		white-space:nowrap;
	}
}

/* ── Orientation 3-part row ── */
.wzd-pdp.wzd-pdp .wzd-cq-orient-3col{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	gap:6px;
	align-items:stretch;
}
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:2px;padding:8px 6px;
	background:var(--c-ivory);border:1px solid transparent;
	border-radius:10px;cursor:pointer;transition:all .15s;
	font-size:12px;color:var(--c-ink-soft);font-weight:600;
}
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn.on{
	background:#fff;border-color:var(--c-brick);color:var(--c-brick);
	box-shadow:0 1px 3px rgba(142,37,33,.10);
}
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn-t{font-size:12.5px;font-weight:700;line-height:1.2}
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn-s{font-size:13px;opacity:.7;font-family:var(--font-thai)}
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn-pps{font-size:11px;font-weight:700;opacity:.8;font-family:var(--font-en);margin-top:1px;color:var(--c-brick)}
.wzd-pdp.wzd-pdp [data-orient-wall]{font-size:14px !important;opacity:1 !important;font-weight:600;}
.wzd-pdp.wzd-pdp .wzd-wall-num{color:var(--c-brick);font-weight:800;font-family:var(--font-en);}

/* PPS badge — 3rd slot in orient row */
.wzd-pdp.wzd-pdp .wzd-cq-pps-badge{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:1px;padding:8px 10px;
	background:rgba(142,37,33,.06);border-radius:10px;
	border:1px solid rgba(142,37,33,.10);
	min-width:0;
}
.wzd-pdp.wzd-pdp .wzd-cq-pps-badge-num{
	font-size:17px;font-weight:800;color:var(--c-brick);
	font-family:var(--font-en);line-height:1;
}
.wzd-pdp.wzd-pdp .wzd-cq-pps-badge-lbl{
	font-size:13px;color:var(--c-ink-soft);font-weight:600;
	white-space:normal;text-align:center;line-height:1.2;
}

/* ── Waste + mortar: smaller pill chips ── */
.wzd-pdp.wzd-pdp .wzd-cq-waste label span{
	padding:6px 2px !important;
	font-size:13px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-waste{gap:3px !important}

/* ── Result box: compact ── */
.wzd-pdp.wzd-pdp .wzd-cq-result{
	padding:12px !important;
	border-radius:12px !important;
	margin-top:12px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-label{
	font-size:11px !important;margin-bottom:2px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num{
	font-size:26px !important;line-height:1.1 !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-num small{font-size:13px !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-extra{
	font-size:13px !important;margin-top:4px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-meta{
	font-size:13px;color:var(--c-ink-soft);margin-top:6px;
	font-weight:500;letter-spacing:.01em;
}
.wzd-pdp.wzd-pdp .wzd-cq-result-rows{gap:4px !important;margin-top:8px !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-row{padding:5px 0 !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-lbl{font-size:13px !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-row-val strong{font-size:13px !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-aux{font-size:13px !important}
.wzd-pdp.wzd-pdp .wzd-cq-result-note{font-size:13px !important;margin-top:6px !important}

/* ── Customer form ── */
.wzd-pdp.wzd-pdp .wzd-cq-customer{
	margin-bottom:4px;
	display:flex;flex-direction:column;gap:8px;
}
.wzd-pdp.wzd-pdp .wzd-cq-customer-2col{
	display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
@media (max-width:420px){
	.wzd-pdp.wzd-pdp .wzd-cq-customer-2col{grid-template-columns:1fr}
}

/* ── Row spacing: tighter in 2col layout ── */
.wzd-pdp.wzd-pdp .wzd-cq-row{margin-bottom:10px !important}
.wzd-pdp.wzd-pdp .wzd-cq-step{margin-bottom:12px !important}

/* ═══════════════════════════════════════════════════════════════
   3-COLUMN PDP — iOS 26 Minimal  A=product  B=viz  C=form
   ═══════════════════════════════════════════════════════════════ */

/* Grid */
.wzd-pdp.wzd-pdp .wzd-pdp-grid.wzd-pdp-grid--3col{
	display:grid !important;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
	gap:20px !important;
	align-items:stretch !important;
}
.wzd-pdp-grid--3col .wzd-cq{display:contents !important;}

/* ── Col A: left ── */
.wzd-pdp-grid--3col .wzd-pdp-left{display:flex;flex-direction:column;}

/* ── No sticky: all 3 cols scroll together ── */
.wzd-pdp-grid--3col .wzd-pdp-gallery,
.wzd-pdp-grid--3col .wzd-pdp-left,
.wzd-pdp-grid--3col .wzd-pdp-mid,
.wzd-pdp-grid--3col .wzd-pdp-colfm{
	position:static !important;top:auto !important;
	align-self:auto !important;max-height:none !important;overflow:visible !important;
}
.wzd-pdp-grid--3col .wzd-pdp-mid{overflow:hidden !important;}

/* ════════ COL B — Viz card ════════ */
.wzd-pdp.wzd-pdp .wzd-pdp-mid{
	background:#fff;
	border:1px solid var(--c-beige);
	border-radius:20px;
	box-shadow:0 2px 12px rgba(0,0,0,.05);
	overflow:hidden;
	display:flex;flex-direction:column;min-width:0;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz{
	flex:0 0 auto;display:flex;flex-direction:column;
	border-bottom:none;background:transparent;border-radius:0;padding:0;margin:0;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-head{
	padding:11px 16px 9px;background:#fff;
	border-bottom:1px solid var(--c-beige);
	font-size:12px;color:var(--c-ink-soft);
	display:flex;align-items:center;gap:6px;letter-spacing:.02em;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-head i{color:var(--c-clay);}

/* Brick viz stage: fixed 220px height — compact, clearly shows pattern */
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-stage{
	flex:0 0 auto;position:relative;
	width:100%;height:220px !important;padding-bottom:0 !important;
	min-height:0;background:#fff;overflow:hidden;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-stage svg{
	position:absolute;top:0;left:0;width:100%;height:100%;display:block;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-legend{
	padding:6px 16px 8px;background:#fff;
	border-top:1px solid var(--c-beige);
	font-size:14px;color:var(--c-ink-soft);display:flex;align-items:center;gap:14px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-legend .dot{width:8px;height:8px;border-radius:2px;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-legend .wzd-cq-viz-aux{margin-left:auto;font-size:13px;}

/* Result box — flex:1 fills remaining col B height with ivory */
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result{
	flex:1 !important;
	margin:0 !important;border-radius:0 !important;border:none !important;
	border-top:1px solid var(--c-beige) !important;
	background:var(--c-ivory) !important;padding:16px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-label{color:var(--c-ink-soft) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-num{color:var(--c-brick) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-num small{color:var(--c-ink-soft) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-extra{color:var(--c-clay) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-row-lbl{color:var(--c-ink-soft) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-row-val strong{color:var(--c-ink) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-row{border-color:var(--c-beige) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-note{color:var(--c-ink-soft) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-result-note i{color:var(--c-orange) !important;}

/* ════════ COL C — Calculator form ════════ */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm{
	background:#fff;
	border:1px solid var(--c-beige);
	border-radius:20px;
	box-shadow:0 2px 12px rgba(0,0,0,.05);
	padding:20px;
	display:flex;flex-direction:column;gap:0;min-width:0;
}
/* Remove old side panel overflow rule */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm{
	position:static !important;max-height:none !important;overflow:visible !important;
}

/* Header pill */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-head{
	background:var(--c-ivory);
	border-radius:12px;
	padding:12px 14px;
	margin-bottom:16px;
	border-bottom:none;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-head .wzd-cq-ic{
	background:rgba(142,37,33,.08);border-radius:10px;
}

/* Section labels — small caps */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-label{
	display:block;
	font-size:11px !important;font-weight:700 !important;
	letter-spacing:.06em !important;text-transform:uppercase !important;
	color:var(--c-ink-soft) !important;
	margin-bottom:7px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-label-aux{
	font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;opacity:.7;
}

/* Row spacing */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-row{margin-bottom:14px !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-step{flex:0 0 auto;}

/* ── All inputs: uniform 44px, white bg, visible text ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input[type="number"],
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input[type="text"],
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input[type="tel"],
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input.wzd-cq-input,
.wzd-pdp.wzd-pdp .wzd-pdp-colfm select.wzd-cq-input{
	height:44px !important;
	border-radius:10px !important;
	border:1.5px solid var(--c-beige) !important;
	background:#fff !important;
	color:var(--c-ink) !important;
	font-size:15px !important;
	padding:0 38px 0 12px !important;
	width:100%;box-sizing:border-box;
	-webkit-appearance:none;appearance:none;
	transition:border-color .15s,box-shadow .15s;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm [data-loc-search]{padding-left:40px !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input::placeholder,
.wzd-pdp.wzd-pdp .wzd-pdp-colfm select::placeholder{
	color:var(--c-ink-soft) !important;opacity:.55 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm input:focus,
.wzd-pdp.wzd-pdp .wzd-pdp-colfm select:focus{
	outline:none !important;
	border-color:var(--c-clay) !important;
	box-shadow:0 0 0 3px rgba(155,109,72,.12) !important;
}

/* suffix labels (ม. / ตร.ม.) */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-suffix{
	position:absolute;right:12px;top:50%;transform:translateY(-50%);
	font-size:13px !important;color:var(--c-ink-soft);pointer-events:none;font-weight:500;
}

/* ── Orientation: iOS segmented control ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-3col{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	background:var(--c-ivory);border-radius:12px;padding:4px;gap:4px;align-items:stretch;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn{
	min-height:56px;height:auto;border-radius:9px;
	background:transparent;border:none;cursor:pointer;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	color:var(--c-ink-soft);transition:all .15s;padding:6px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn.on{
	background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);color:var(--c-brick);
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn-t{font-size:13px !important;font-weight:700;line-height:1.2;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn-s{font-size:13px !important;opacity:.7;font-family:var(--font-thai) !important;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn-pps{font-size:11px !important;font-weight:700;opacity:.8;color:var(--c-brick);margin-top:1px;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm [data-orient-wall]{font-size:14px !important;opacity:1 !important;font-weight:600;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-wall-num{color:var(--c-brick);font-weight:800;font-family:var(--font-en);}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-pps-badge{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:1px;padding:6px 10px;
	background:#fff;border-radius:9px;
	box-shadow:0 1px 4px rgba(0,0,0,.1);min-width:0;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-pps-badge-num{
	font-size:17px;font-weight:800;color:var(--c-brick);font-family:var(--font-en);line-height:1;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-pps-badge-lbl{font-size:13px;color:var(--c-ink-soft);font-weight:600;white-space:normal;text-align:center;line-height:1.2;}

/* ── Mortar & waste: iOS segmented ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-waste{
	display:flex !important;gap:4px !important;
	background:var(--c-ivory) !important;
	border-radius:12px !important;padding:4px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-waste label{flex:1;cursor:pointer;min-width:0;}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-waste input[type="radio"]{
	position:absolute;opacity:0;width:0;height:0;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-waste label span{
	display:flex !important;align-items:center !important;justify-content:center !important;
	height:40px !important;border-radius:9px !important;
	background:transparent !important;border:none !important;
	font-size:13px !important;font-weight:500 !important;
	color:var(--c-ink-soft) !important;cursor:pointer;
	transition:all .15s;box-shadow:none !important;width:100%;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-waste input[type="radio"]:checked + span{
	background:#fff !important;box-shadow:0 1px 4px rgba(0,0,0,.1) !important;
	color:var(--c-brick) !important;font-weight:700 !important;
}

/* ── Customer info: ivory card ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer{
	background:var(--c-ivory);
	border-radius:14px;
	padding:12px 14px;
	margin-top:6px;
	border-top:none;
	display:flex;flex-direction:column;gap:6px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer-2col{
	display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
/* Customer inputs sit on ivory — keep white bg */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer input[type="text"],
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer input[type="tel"]{
	background:#fff !important;
}

/* ── Location search ── */
/* Fix: .wzd-cq-loc-picked has display:flex which overrides [hidden] browser default */
.wzd-cq-loc-picked[hidden],
.wzd-cq-loc-results[hidden]{display:none !important;}
.wzd-pdp.wzd-pdp .wzd-cq-loc-search{position:relative;}
.wzd-pdp.wzd-pdp .wzd-cq-loc-ic{
	position:absolute;left:12px;top:50%;transform:translateY(-50%);
	color:var(--c-clay);font-size:16px;pointer-events:none;z-index:1;line-height:1;
}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results{
	position:absolute;top:calc(100% + 4px);left:0;right:0;
	background:#fff;border:1.5px solid var(--c-beige);
	border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.12);
	z-index:200;overflow:hidden;max-height:220px;overflow-y:auto;
}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a{
	display:block;padding:11px 14px;font-size:13px;color:var(--c-ink);
	border-bottom:1px solid var(--c-beige);text-decoration:none;cursor:pointer;line-height:1.3;
}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a:last-child{border-bottom:0;}
.wzd-pdp.wzd-pdp .wzd-cq-loc-results > a:hover{background:var(--c-ivory);}
.wzd-pdp.wzd-pdp .wzd-cq-loc-picked{
	font-size:13px;color:var(--c-ink);padding:8px 12px;
	background:#fff;border:1.5px solid var(--c-brick);border-radius:10px;margin-top:4px;
}

/* ── LINE CTA button ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-btn-line--main{
	display:flex !important;flex-direction:row !important;
	align-items:center !important;justify-content:center !important;
	gap:8px !important;width:fit-content !important;max-width:100% !important;
	padding:14px 28px !important;border-radius:14px !important;
	font-size:15px !important;font-weight:700 !important;letter-spacing:.01em;
	margin:4px auto 0 !important;
	box-shadow:0 4px 20px -4px rgba(0,185,0,.45) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-line-note{
	font-size:11px;color:var(--c-ink-soft);text-align:center;margin-top:6px;
}

/* ── Area input header row: label + unit column headers on one line ── */
.wzd-pdp.wzd-pdp .wzd-cq-area-header-row{
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:8px;
	margin-bottom:4px;
}
.wzd-pdp.wzd-pdp .wzd-cq-area-header-row .wzd-cq-label{margin-bottom:0;}
.wzd-pdp.wzd-pdp .wzd-cq-area-col-labels{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr;
	align-items:center;
	gap:4px;
	text-align:center;
	font-size:10px;font-weight:600;
	color:var(--c-ink-soft);
}
.wzd-pdp.wzd-pdp .wzd-cq-area-col-sep{
	font-size:9px;color:var(--c-ink-mute);
}
/* Area inputs: compact padding so 4-digit numbers are fully visible.
   Must use input[type="number"] to beat specificity (0,4,1) of .wzd-pdp-colfm rule at line 2961. */
.wzd-pdp.wzd-pdp .wzd-cq-area-3col input[type="number"].wzd-cq-input{
	padding-left:8px !important;padding-right:8px !important;
	font-size:13px !important;min-width:0 !important;
}

/* ── Customer form: smaller text, no overflow ── */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer input[type="text"],
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer input[type="tel"]{
	background:#fff !important;
	font-size:12px !important;
	padding:8px 13px !important;
	box-sizing:border-box !important;
	width:100% !important;
	min-width:0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer .wzd-cq-loc-search input{
	font-size:12px !important;
	padding-top:8px !important;padding-bottom:8px !important;
	box-sizing:border-box !important;
}

/* ── Tech spec cards: 2-col grid to match ขนาด/น้ำหนัก card style ── */
.wzd-pdp-specs-cards--tech{
	grid-template-columns:repeat(2,1fr) !important;
	margin-bottom:16px;
}
.wzd-pdp-specs-cards--tech .wzd-pdp-spec-card-lbl{flex:1;}
.wzd-pdp-specs-cards--tech .wzd-pdp-spec-card-val{
	text-align:right;white-space:nowrap;
}

/* Responsive: stack on tablet/mobile — must match specificity of 3col base rule (0,4,0) */
@media (max-width:780px){
	.wzd-pdp.wzd-pdp .wzd-pdp-grid.wzd-pdp-grid--3col{
		grid-template-columns:1fr !important;
		gap:16px !important;
	}
	.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-stage{height:180px !important;}
}
@media (max-width:480px){
	.wzd-pdp-specs-cards--tech{grid-template-columns:1fr !important;}
	.wzd-pdp.wzd-pdp .wzd-cq-area-header-row{grid-template-columns:1fr;}
	.wzd-pdp.wzd-pdp .wzd-cq-area-col-labels{display:none;}
	/* customer form: single column on small screens */
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer-2col{
		grid-template-columns:1fr !important;
	}
	/* compact card padding on mobile */
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm{
		padding:16px !important;
	}
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer{
		padding:12px !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   3-COL PDP — Unified iOS 26 Minimal · Pure White · Clean
   ══════════════════════════════════════════════════════════════ */

/* ── 0. Design tokens ── */
.wzd-pdp.wzd-pdp{
	--pdp-r:16px;
	--pdp-r-sm:12px;
	--pdp-ic:32px;
	--pdp-ic-r:50%;
	--pdp-ic-bg:rgba(142,37,33,.06);
	--pdp-ic-c:#8E2521;
	--pdp-border:rgba(0,0,0,.06);
	--pdp-lbl:11px;
	--pdp-val:13px;
	--pdp-heading:11.5px;
	--pdp-card-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
	--pdp-pro:#1D9E75;
	--pdp-pro-bg:rgba(29,158,117,.06);
	--pdp-obs:#BA7517;
	--pdp-obs-bg:rgba(239,159,39,.06);
	--pdp-use:#185FA5;
	--pdp-use-bg:#E6F1FB;
	--pdp-use-border:#B5D4F4;
	--pdp-spec-ic-bg:rgba(142,37,33,.06);
	--pdp-spec-ic-c:#8E2521;
	--pdp-brand:#8E2521;
}

/* ── 0b. Page background → pure white ── */
.wzd-pdp.wzd-pdp{
	background:#fff !important;
}

/* ══ GRID: balanced columns, viewport-fit ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-grid.wzd-pdp-grid--3col{
	gap:16px !important;
	padding:0 !important;
}

/* ══ A. LEFT COLUMN — white card wrapper ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left{
	gap:0;
	background:#fff !important;
	border-radius:var(--pdp-r);
	border:1px solid var(--pdp-border);
	box-shadow:var(--pdp-card-shadow);
	padding:14px;
	align-items:stretch !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-gallery{
	margin-bottom:10px;
	background:transparent !important;border:none !important;box-shadow:none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-mainimg{
	border-radius:var(--pdp-r-sm) !important;margin-bottom:6px !important;
	padding:10px;background:#fafafa !important;border:1px solid var(--pdp-border) !important;
	box-shadow:none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-thumbs{
	gap:6px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-thumb{
	border-radius:var(--pdp-ic-r) !important;border-color:var(--pdp-border) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-cat-badge{
	margin-bottom:4px;font-size:10px !important;padding:2px 9px !important;
	border-radius:6px !important;letter-spacing:.03em;
	align-self:flex-start !important;width:fit-content !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-title,
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left h1.wzd-pdp-title{
	font-size:17px !important;margin:0 0 8px !important;line-height:1.35 !important;
	font-weight:700 !important;letter-spacing:-.01em;color:var(--c-charcoal) !important;
}

/* Spec cards */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-specs-cards{
	margin:0 0 8px !important;border-radius:var(--pdp-r-sm) !important;
	border:1px solid var(--pdp-border) !important;background:#fff !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-spec-card{
	padding:7px 10px !important;gap:8px !important;
	border-bottom:1px solid var(--pdp-border) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-spec-card:last-child{
	border-bottom:none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-spec-card-ic{
	width:var(--pdp-ic) !important;height:var(--pdp-ic) !important;
	font-size:14px !important;border-radius:var(--pdp-ic-r) !important;
	background:var(--pdp-spec-ic-bg) !important;color:var(--pdp-spec-ic-c) !important;
	border:none !important;box-shadow:none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-spec-card-lbl{
	font-size:var(--pdp-lbl) !important;color:var(--c-ink-soft) !important;flex:1;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-spec-card-val{
	font-size:var(--pdp-val) !important;font-weight:600 !important;
	color:var(--c-charcoal) !important;margin-left:auto;
}

/* Block headers: uniform */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-block-h,
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col h3.wzd-pdp-block-h{
	font-size:var(--pdp-heading) !important;font-weight:700 !important;
	margin:8px 0 5px !important;letter-spacing:.04em !important;
	text-transform:uppercase !important;color:var(--c-ink-soft) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-block-h i{
	font-size:13px !important;color:var(--pdp-brand) !important;
}

/* Tech specs */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-specs-cards--tech{
	grid-template-columns:1fr !important;margin-bottom:4px !important;
}

/* Info note */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-info-note{
	font-size:11px !important;padding:8px 10px !important;
	border-radius:var(--pdp-ic-r) !important;background:#fafafa !important;
	border:1px solid var(--pdp-border) !important;
	margin-top:4px !important;
}

/* Title should not stretch */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left .wzd-pdp-title,
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-left h1.wzd-pdp-title{
	align-self:flex-start !important;
}

/* ══ B. MIDDLE COLUMN ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid{
	padding:0;border-radius:var(--pdp-r);
	background:#fff !important;
	border:1px solid var(--pdp-border) !important;
	box-shadow:var(--pdp-card-shadow) !important;
}

/* Viz header */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-viz{
	border-radius:var(--pdp-r) var(--pdp-r) 0 0 !important;
}

/* Details bullets */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-bullets-single{
	padding:0 16px !important;margin-top:12px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-excerpt-body{
	border:none !important;box-shadow:none !important;padding:0 !important;
	background:transparent !important;border-radius:0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-excerpt-body ul{gap:6px !important}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-excerpt-body li{
	font-size:12.5px;padding-left:20px;line-height:1.5;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-excerpt-body li::before{
	width:14px;height:14px;top:4px;background-size:10px 10px;border-radius:4px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-excerpt-body p{font-size:12.5px}

/* ── Insights ── */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-pdp-mid-insights{
	padding:4px 16px 12px;
	margin-top:10px !important;
	border-top:1px solid var(--pdp-border);
	padding-top:12px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-label{
	font-size:var(--pdp-heading) !important;font-weight:700 !important;
	letter-spacing:.04em !important;text-transform:uppercase !important;
	color:var(--pdp-pro) !important;margin-bottom:4px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-label i{
	color:var(--pdp-pro) !important;font-size:12px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-label--obs{
	color:var(--pdp-obs) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-label--obs i{
	color:var(--pdp-obs) !important;font-size:12px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-grid{
	grid-template-columns:1fr !important;gap:0 !important;
	border:1px solid var(--pdp-border);border-radius:var(--pdp-r-sm);
	overflow:hidden;margin-bottom:8px;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight{
	background:#fff !important;border:none !important;
	border-bottom:1px solid var(--pdp-border) !important;border-radius:0 !important;
	padding:7px 10px !important;gap:8px !important;align-items:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight--pro{
	border-left:2.5px solid var(--pdp-pro) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight--obs{
	border-left:2.5px solid var(--pdp-obs) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight:last-child{
	border-bottom:none !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight-ic{
	width:var(--pdp-ic) !important;height:var(--pdp-ic) !important;
	font-size:14px !important;border-radius:var(--pdp-ic-r) !important;
	display:flex !important;align-items:center;justify-content:center;
	flex-shrink:0 !important;margin-top:0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight--pro .wzd-insight-ic{
	background:var(--pdp-pro-bg) !important;color:var(--pdp-pro) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight--obs .wzd-insight-ic{
	background:var(--pdp-obs-bg) !important;color:var(--pdp-obs) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight-text{
	font-size:var(--pdp-val) !important;color:var(--c-charcoal) !important;
	font-weight:500 !important;margin:0 !important;line-height:1.35 !important;
}
/* Usage label → blue */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-use .wzd-insights-label{
	color:var(--pdp-use) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-use .wzd-insights-label i{
	color:var(--pdp-use) !important;
}
/* Usage tags */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-use{margin-top:2px}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insights-use-list{
	gap:5px !important;margin-top:4px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight-tag{
	font-size:11px !important;padding:4px 10px !important;border-radius:7px !important;
	background:var(--pdp-use-bg) !important;border:0.5px solid var(--pdp-use-border) !important;
	color:var(--pdp-use) !important;font-weight:500 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid-insights .wzd-insight-tag i{
	color:var(--pdp-use) !important;font-size:13px !important;
}

/* Result box */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result{
	margin-top:auto;padding:12px 16px !important;
	border-top:1px solid var(--pdp-border) !important;
	background:#fafafa !important;
	border-radius:0 0 var(--pdp-r) var(--pdp-r) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-label{
	font-size:var(--pdp-heading) !important;font-weight:700 !important;
	letter-spacing:.04em !important;text-transform:uppercase !important;
	color:var(--c-ink-soft) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-num{
	font-size:22px !important;color:var(--pdp-pro) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-row{
	padding:5px 0 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-row-lbl{
	font-size:var(--pdp-lbl) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-row-lbl i{
	font-size:14px !important;color:var(--pdp-brand) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-row-val strong{
	font-size:var(--pdp-val) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-mid .wzd-cq-result-note{
	font-size:10px !important;margin-top:6px !important;
}

/* ══ C. RIGHT COLUMN (form) — centered inputs ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm{
	padding:16px;border-radius:var(--pdp-r);
	background:#fff !important;
	border:1px solid var(--pdp-border) !important;
	box-shadow:var(--pdp-card-shadow) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-head{
	padding:10px 12px;margin-bottom:14px;border-radius:var(--pdp-r-sm);
	text-align:center !important;display:flex !important;
	flex-direction:column !important;align-items:center !important;gap:4px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-head .wzd-cq-ic{
	width:var(--pdp-ic);height:var(--pdp-ic);font-size:15px;
	border-radius:var(--pdp-ic-r);margin-bottom:2px;
	background:var(--pdp-ic-bg) !important;color:var(--pdp-brand) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-head .wzd-cq-head-body{
	text-align:center;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-t{
	font-size:14px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-s{
	font-size:11px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-step{
	display:flex;flex-direction:column;align-items:stretch;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-row{
	margin-bottom:10px !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-label{
	font-size:var(--pdp-heading) !important;margin-bottom:4px !important;
	font-weight:700 !important;letter-spacing:.04em !important;
	text-transform:uppercase !important;text-align:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-area-3col{
	justify-content:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-col-label{
	text-align:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm input.wzd-cq-input,
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm input[type="number"],
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm input[type="text"],
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm input[type="tel"]{
	height:40px !important;font-size:13.5px !important;border-radius:var(--pdp-r-sm) !important;
	border:1px solid var(--pdp-border) !important;text-align:center !important;
	background:#fff !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-orient-3col{
	border-radius:var(--pdp-r-sm);justify-content:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-orient-btn{
	height:40px;border-radius:var(--pdp-ic-r);
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-waste{
	border-radius:var(--pdp-r-sm) !important;justify-content:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-waste label span{
	height:36px !important;font-size:12px !important;border-radius:var(--pdp-ic-r) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-customer{
	padding:10px 12px;border-radius:var(--pdp-r-sm);gap:5px;
	background:#fafafa !important;border:1px solid var(--pdp-border) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-customer input{
	font-size:12px !important;height:38px !important;text-align:center !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-btn-line--main{
	padding:12px 16px !important;font-size:14px !important;
	border-radius:var(--pdp-r-sm) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col .wzd-pdp-colfm .wzd-cq-line-note{
	font-size:10px;text-align:center !important;
}

/* ══ D. BELOW-GRID SECTIONS ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col ~ .wzd-pdp-sec{
	padding:16px 20px !important;border-radius:var(--pdp-r) !important;
	margin:0 0 10px !important;
	background:#fff !important;
	border:1px solid var(--pdp-border) !important;
	box-shadow:var(--pdp-card-shadow) !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col ~ .wzd-pdp-sec .wzd-pdp-sec-h{
	font-size:14px !important;margin:0 0 10px !important;font-weight:600 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp-grid--3col ~ .wzd-pdp-sec .wzd-pdp-sec-h i{
	width:var(--pdp-ic) !important;height:var(--pdp-ic) !important;font-size:14px !important;
	border-radius:var(--pdp-ic-r) !important;
	background:rgba(142,37,33,.06) !important;color:var(--pdp-brand) !important;
	display:inline-flex !important;align-items:center;justify-content:center;
	flex-shrink:0;
}

/* ══ E. BREADCRUMB ══ */
.wzd-pdp.wzd-pdp .wzd-pdp-breadcrumb{
	margin-bottom:10px !important;
}

/* ============================================================================
   iOS 26 UX/UI GLOBAL REFRESH — WATZADU 2026  (appended 2026-06-16)
   Mobile-first · Minimal · Fast · Safe-area aware
   Loads after style.css + style-v2.css → wins all specificity conflicts
   ============================================================================ */

/* ── 0. iOS 26 Design Tokens ─────────────────────────────────────────────── */
:root {
  --ios-blur:        saturate(200%) blur(24px);
  --ios-glass:       rgba(255,255,255,0.82);
  --ios-glass-dk:    rgba(46,46,49,0.72);
  --ios-border:      rgba(46,46,49,0.08);
  --ios-spring:      cubic-bezier(0.34,1.56,0.64,1);
  --ios-smooth:      cubic-bezier(0.4,0,0.2,1);
}
@media (max-width:768px) {
  :root {
    --pad-section:  32px;
    --pad-x:        16px;
    --nav-h:        68px;
    --r-sm:         8px;
    --r-md:         12px;
    --r-lg:         16px;
    --r-xl:         20px;
    --r-2xl:        26px;
  }
}
@media (max-width:480px) {
  :root {
    --pad-section:  24px;
    --r-lg:         18px;
    --r-xl:         22px;
  }
}

/* ── 1. BASE — no horizontal scroll, iOS text rendering ─────────────────── */
html { -webkit-text-size-adjust:100%; }
body { overflow-x:clip; -webkit-font-smoothing:antialiased; }

/* Remove 300ms tap delay on all interactive elements */
a,button,label,summary,[role="button"],input,select,textarea {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── 2. NAV — compact glass (iOS26 signature) ────────────────────────────── */
.wzd-nav {
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  background: var(--ios-glass);
  border-bottom: 0.5px solid var(--ios-border);
}
@media (max-width:768px) {
  .wzd-nav-inner {
    min-height: var(--nav-h);   /* 60px */
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* Brand: hide Thai tagline to save space */
  .wzd-brand-text small { display:none; }
  .wzd-brand-watzadu,
  .wzd-brand-wdc { font-size:17px; }
  /* Quote CTA: short-text pill on mobile */
  .wzd-cta-quote {
    padding:8px 11px !important;
    font-size:12.5px !important;
    border-radius:10px !important;
  }
  /* Hamburger: correct size */
  .wzd-menu-toggle { width:40px; height:40px; }
  /* Admin bar shift */
  .admin-bar .wzd-nav { top:46px; }
}

/* ── 3. DRAWER — iOS26 rounded left edge ─────────────────────────────────── */
.wzd-drawer {
  border-radius: var(--r-2xl) 0 0 var(--r-2xl);
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
}
@media (max-width:768px) {
  .wzd-drawer-items > li > a { padding:16px 22px; min-height:50px; font-size:16px; }
  .wzd-drawer-cta .wzd-btn { min-height:48px; font-size:15px; }
}

/* ── Google Translate bar — hide completely ── */
.goog-te-banner-frame,.skiptranslate{display:none!important}
iframe.goog-te-banner-frame{display:none!important}
body{top:0!important}
.goog-te-gadget,.goog-te-gadget-icon,.goog-logo-link{display:none!important}
#wzd-gt-el,.gtranslate_wrapper,#gtranslate_wrapper,.gtranslate-wrapper{display:none!important;height:0!important}

/* ── 4. LANGUAGE PILL — iOS26 segment control (3 languages: TH / EN / 中文) ── */
.wzd-lang-pill {
  display:inline-flex;
  background:rgba(46,46,49,0.06);
  border-radius:var(--r-pill);
  padding:3px; gap:0;
}
.wzd-lang-opt {
  font-size:11.5px; font-weight:700;
  font-family:var(--font-en,"Inter",sans-serif);
  padding:5px 10px; border-radius:var(--r-pill);
  color:var(--c-ink-soft,#5C5C61); text-decoration:none;
  transition:background .18s,color .18s,box-shadow .18s;
  white-space:nowrap;
  /* button reset */
  background:transparent; border:none; cursor:pointer; line-height:1;
}
.wzd-lang-opt--on {
  background:#fff; color:var(--c-brick,#8E2521);
  box-shadow:0 1px 4px rgba(46,17,15,.12);
}
.wzd-lang-pill--drawer { width:100%; justify-content:stretch; }
.wzd-lang-pill--drawer .wzd-lang-opt { flex:1; text-align:center; padding:10px 10px; font-size:13px; }

/* ── 5. SECTION SPACING — breathe on mobile ─────────────────────────────── */
@media (max-width:768px) {
  .wzd-section { padding-top:var(--pad-section); padding-bottom:var(--pad-section); }
  .wzd-section-head { margin-bottom:18px; gap:6px; }
  .wzd-section-head--center { min-height:68px; }
  .wzd-section-title { font-size:clamp(19px,5vw,24px) !important; }
  /* Section link: smaller on mobile */
  .wzd-section-link { font-size:13px; }
}
@media (max-width:480px) {
  .wzd-section { padding-top:var(--pad-section); padding-bottom:var(--pad-section); }
}

/* ── 6. CARDS — iOS26 rounded, subtle glass inset ───────────────────────── */
@media (max-width:768px) {
  .wzd-card,.wzd-prod,.wzd-catmini,.wzd-art,.wzd-proj,.wzd-info,.wzd-pillar,.wzd-stat,
  .wzd-qbox,.wzd-filter,.wzd-cat-filter,.wzd-pdp-gallery,.wzd-pdp-mini {
    border-radius:var(--r-lg) !important;
  }
  /* iOS26 depth: inner highlight */
  .wzd-prod,.wzd-art,.wzd-catmini {
    box-shadow:0 2px 8px rgba(46,17,15,.06), inset 0 0.5px 0 rgba(255,255,255,.7);
  }
}
/* Active press feedback (iOS26 style) */
@media (max-width:768px) {
  .wzd-prod:active  { transform:scale(0.97); transition:transform .12s var(--ios-spring); }
  .wzd-catmini:active { transform:scale(0.97); transition:transform .12s var(--ios-spring); }
  .wzd-art:active   { transform:scale(0.98); transition:transform .12s var(--ios-spring); }
  .wzd-btn:active   { transform:scale(0.95); transition:transform .12s var(--ios-spring); }
}

/* ── 7. BUTTONS — min 44px touch target ─────────────────────────────────── */
@media (max-width:768px) {
  .wzd-btn { min-height:44px; }
  .wzd-btn--lg { min-height:50px; }
  .wzd-btn--sm { min-height:40px; }
  /* Full-width on very small */
  .wzd-hero-ctas .wzd-btn,
  .wzd-phero-ctas .wzd-btn { flex:1; justify-content:center; min-width:0; }
}

/* ── 8. HERO — compact on mobile ─────────────────────────────────────────── */
@media (max-width:768px) {
  /* Inner page hero */
  .wzd-hero { min-height:0; }
  .wzd-hero-inner { padding-top:28px; padding-bottom:44px; }
  .wzd-hero-eyebrow { font-size:10.5px; padding:4px 11px; margin-bottom:10px; }
  .wzd-hero-title   { font-size:clamp(24px,6.5vw,36px) !important; line-height:1.18; }
  .wzd-hero-sub     { font-size:14px; }
  .wzd-hero-ctas    { gap:8px; flex-wrap:nowrap; }
  /* Page hero (phero) */
  .wzd-phero  { padding:22px 0 38px; }
  .wzd-phero-bg { width:100%; opacity:0.35; }
  /* Trust strip: disable negative margin overlap on mobile */
  .wzd-trust-strip { margin-top:0 !important; }
  /* Breadcrumb */
  .wzd-bread { font-size:11.5px; gap:5px; margin-bottom:14px; }
}
@media (max-width:480px) {
  .wzd-hero-title { font-size:clamp(22px,7vw,30px) !important; }
}

/* ── 9. TRUST STRIP — 2-col on tablet, horizontal-scroll on mobile ───────── */
@media (max-width:900px) {
  .wzd-trust-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px) {
  .wzd-trust-strip {
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:12px 8px; gap:0;
    margin:0 calc(var(--pad-x)*-1);
    border-radius:0;
    box-shadow:none; border:none;
    border-top:1px solid var(--c-line-soft,#F0E6D9);
    border-bottom:1px solid var(--c-line-soft,#F0E6D9);
  }
  .wzd-trust-strip::-webkit-scrollbar { display:none; }
  .wzd-trust-strip > * {
    flex:0 0 auto; min-width:160px; scroll-snap-align:start;
    border-right:1px solid var(--c-line-soft,#F0E6D9) !important;
    border-bottom:none !important;
    padding:12px 16px;
  }
  .wzd-trust-strip > *:last-child { border-right:none !important; }
  .wzd-trust-ic { width:34px; height:34px; font-size:17px; border-radius:9px; }
  .wzd-trust-t  { font-size:12.5px; }
  .wzd-trust-d  { font-size:11px; }
}

/* ── 10. TABLES — max 2-3 cols, scroll on mobile  ────────────────────────
   Rule: wrap ALL <table> in .wzd-table-scroll if not already wrapped.
   CSS makes existing tables scrollable without breaking their layout.
   ─────────────────────────────────────────────────────────────────────────── */

/* (A) General comparison / data table */
@media (max-width:768px) {
  .wzd-table {
    display:block;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    font-size:12.5px;
    border-radius:var(--r-md);
  }
  .wzd-table th,.wzd-table td {
    padding:9px 11px;
    min-width:72px;
  }
  /* First column (label) stays sticky so user always sees row context */
  .wzd-table tbody td:first-child,
  .wzd-table thead th:first-child {
    position:sticky; left:0; z-index:2;
    background:#fff;
    border-right:1px solid var(--c-line-soft,#F0E6D9);
    min-width:100px; max-width:120px;
    white-space:normal; word-break:break-word;
  }
  .wzd-table thead th:first-child { background:var(--c-bg-pink,#F3E0DD); }
}

/* (B) Spec table (label | value) — 2-col, fine on mobile, just compact */
@media (max-width:768px) {
  .wzd-spec-table { font-size:13px; }
  .wzd-spec-table th,.wzd-spec-table td { padding:9px 12px; }
  .wzd-spec-table th { width:36%; min-width:80px; white-space:nowrap; }
  .wzd-spec-table td { word-break:break-word; }
}
@media (max-width:480px) {
  .wzd-spec-table { font-size:12px; }
  .wzd-spec-table th,.wzd-spec-table td { padding:8px 10px; }
}

/* (C) Calculator steps table (3-col: step | formula | result) */
@media (max-width:768px) {
  .wzd-cq-steps { margin:10px 12px 14px; }
  .wzd-cq-steps-table { font-size:11.5px; }
  .wzd-cq-steps-table th,.wzd-cq-steps-table td { padding:6px 8px; }
}

/* (D) wdc-table in SEO articles — already has .wdc-table-wrapper, just tighten */
@media (max-width:768px) {
  .wdc-table-wrapper { border-radius:var(--r-md); margin:1.2rem 0; }
  .wdc-table { font-size:13px; }
  .wdc-table th,.wdc-table td { padding:9px 11px; }
}
@media (max-width:480px) {
  .wdc-table { font-size:12px; }
  .wdc-table th,.wdc-table td { padding:7px 9px; }
}

/* (E) wp-block-table inside article body — scrollable wrapper */
@media (max-width:768px) {
  .wzd-art-body .wp-block-table {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .wzd-art-body .wp-block-table table { min-width:460px; }
  .wzd-art-body .wp-block-table tbody td,
  .wzd-art-body .wp-block-table thead th { font-size:13px; padding:9px 12px; }
}

/* (F) Delivery info grid — 4→2→1 col */
@media (max-width:600px) {
  .wzd-dlv-info-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:400px) {
  .wzd-dlv-info-grid { grid-template-columns:1fr !important; }
}

/* ── 11. SPEC CARDS — 2-col on mobile (not 3-col) ───────────────────────── */
@media (max-width:900px) {
  .wzd-pdp-specs-cards { grid-template-columns:repeat(2,1fr); gap:10px; }
}
@media (max-width:480px) {
  .wzd-pdp-specs-cards { gap:8px; }
  .wzd-pdp-spec-card { padding:10px 12px; }
  .wzd-pdp-spec-card-ic { width:28px; height:28px; font-size:14px; border-radius:8px; }
  .wzd-pdp-spec-card-lbl { font-size:13px; }
  .wzd-pdp-spec-card-val { font-size:13px; }
}

/* ── 12. PRODUCT GRID — 2-col on mobile ─────────────────────────────────── */
@media (max-width:700px) {
  .wzd-prod-grid,
  .wzd-prod-grid--3,
  .wzd-prod-grid--4,
  .wzd-prod-grid--6,
  .wzd-cat-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px;
  }
  .wzd-prod-body { padding:12px 13px 14px; }
  .wzd-prod-name { font-size:13.5px; min-height:36px; }
  .wzd-prod-price { font-size:16px; margin-bottom:10px; }
  .wzd-prod-img { padding:12px; }
  .wzd-prod-cat-tag { font-size:10.5px; padding:3px 9px; }
  .wzd-prod-actions { gap:5px; }
  .wzd-prod-link { padding:8px 10px; font-size:12px; }
  .wzd-prod-cart { width:36px; height:36px; font-size:15px; }
}
@media (max-width:400px) {
  .wzd-prod-grid,.wzd-prod-grid--3,.wzd-prod-grid--4,.wzd-prod-grid--6 {
    gap:8px;
  }
  .wzd-prod-name { font-size:12.5px; }
}

/* ── 13. CATEGORY MINI GRID — 2-col always on mobile ────────────────────── */
@media (max-width:700px) {
  .wzd-catmini-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .wzd-catmini-body { padding:10px 12px 12px; }
  .wzd-catmini-name { font-size:13px; }
  .wzd-catmini-desc { font-size:10.5px; }
  .wzd-catmini-cta  { font-size:11.5px; margin-top:8px; }
}

/* ── 14. ARTICLE GRID — 2-col on tablet, 1-col on small mobile ─────────── */
@media (max-width:900px) { .wzd-art-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .wzd-art-grid { grid-template-columns:1fr; } }
@media (max-width:768px) {
  .wzd-art-body { padding:12px 14px 72px; font-size:16px; line-height:1.85; }
  .wzd-art-title { font-size:14.5px; }
  .wzd-art-excerpt { font-size:12px; }
}

/* ── 15. PILLARS — mobile card sizing (grid-template-columns intentionally
   NOT set here: the iOS26 horizontal scroll-snap rule owns that property —
   setting repeat(2,1fr) here used to fight it and squeeze 2 of 5 cards down
   to ~50px wide, truncating titles like "ให้คำปรึกษาโครงการ") ────────────── */
@media (max-width:700px) {
  .wzd-pillars { gap:10px; }
  .wzd-pillar { padding:16px 12px; }
  .wzd-pillar-ic { width:44px; height:44px; font-size:22px; border-radius:12px; }
  .wzd-pillar-t { font-size:12.5px; }
}

/* ── 16. STATS — 2-col on mobile ────────────────────────────────────────── */
@media (max-width:700px) {
  .wzd-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .wzd-stat { padding:16px 12px; }
  .wzd-stat-num { font-size:clamp(20px,5vw,26px); }
  .wzd-stat-lbl { font-size:11.5px; }
}

/* ── 17. STEPS — 2-col on mobile ────────────────────────────────────────── */
@media (max-width:700px) {
  .wzd-steps { grid-template-columns:repeat(2,1fr); gap:10px; }
  .wzd-step { padding:14px 10px; }
  .wzd-step-t { font-size:13.5px !important; }
  .wzd-step-d { font-size:13.5px !important; }
}

/* ── 18. PDP — mobile layout ─────────────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-pdp { padding-top:12px; }
  .wzd-pdp-title { font-size:clamp(20px,5.5vw,28px) !important; }
  .wzd-pdp-sub { font-size:13.5px; }
  /* Thumbnails: 5-col even on small */
  .wzd-pdp-thumbs { grid-template-columns:repeat(5,1fr); gap:6px; }
  /* Features: 2-col compact */
  .wzd-pdp-features { grid-template-columns:repeat(2,1fr); gap:10px; padding:14px 0; }
  .wzd-pdp-feat-ic { width:30px; height:30px; font-size:14px; border-radius:8px; }
  .wzd-pdp-feat-t  { font-size:13px; }
  .wzd-pdp-feat-d  { font-size:13px; }
  /* Bottom cards: 1-col */
  .wzd-pdp-bottom  { grid-template-columns:1fr; gap:12px; margin-top:20px; }
  /* Bullets: 1-col */
  .wzd-pdp-bullets { grid-template-columns:1fr; gap:8px; }
  .wzd-pdp-bullets ul { font-size:13px; }
  /* Block heading */
  .wzd-pdp-block-h { font-size:14px; margin:16px 0 10px; }
}
@media (max-width:480px) {
  .wzd-pdp-features { grid-template-columns:1fr; gap:8px; }
  .wzd-pdp-thumbs { grid-template-columns:repeat(4,1fr); }
  .wzd-pdp-thumb  { border-width:1.5px; }
}

/* ── 19. QUOTE BOX — mobile stack ───────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-qbox { border-radius:var(--r-xl); }
  .wzd-qbox-row { grid-template-columns:1fr; gap:7px; } /* stack 2 inputs per row */
  .wzd-qbox-t { font-size:16px; }
}

/* ── 20. CTA BAR — mobile stack ─────────────────────────────────────────── */
@media (max-width:640px) {
  .wzd-cta-bar { flex-direction:column; align-items:flex-start; gap:14px; padding:20px 18px; border-radius:var(--r-xl); }
  .wzd-cta-bar-t { font-size:17px; }
  .wzd-cta-bar-s { font-size:13px; }
  .wzd-cta-bar-actions { width:100%; flex-direction:column; }
  .wzd-cta-bar-actions .wzd-btn { width:100%; justify-content:center; }
  /* Light CTA */
  .wzd-cta-light { padding:18px; gap:14px; }
  .wzd-cta-light-t { font-size:15px; }
  .wzd-cta-light-actions { width:100%; }
  .wzd-cta-light-actions .wzd-btn { flex:1; justify-content:center; }
}

/* ── 21. FOOTER — Design C, accordion on mobile ─────────────────────────── */
@media (max-width:768px) {
  .wzd-foot.wzd-foot { padding:0 !important; }
  .wzd-foot-grid { grid-template-columns:1fr; gap:0; padding-bottom:8px; }
  .wzd-foot-brand-col { padding-bottom:20px; border-bottom:1px solid #eee; }
  details.wzd-foot-col {
    padding:0; border-bottom:1px solid #eee;
  }
  details.wzd-foot-col summary {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0; list-style:none; cursor:pointer;
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--c-ink,#2E2E31);
  }
  details.wzd-foot-col summary::-webkit-details-marker { display:none; }
  details.wzd-foot-col summary h4 { margin:0; font-size:inherit; color:inherit; letter-spacing:inherit; }
  .wzd-foot-col--policy summary h4 { color:#8E2521; }
  details.wzd-foot-col ul { padding:2px 0 18px; }
  .wzd-foot-chev { transition:transform .22s; flex-shrink:0; color:var(--c-ink-soft,#888); }
  details.wzd-foot-col[open] .wzd-foot-chev { transform:rotate(180deg); }
  .wzd-foot-cta { padding:18px 0; }
  .wzd-foot-cta-inner { flex-direction:column; align-items:flex-start; }
  .wzd-foot-cta-btns { width:100%; flex-direction:column; }
  .wzd-foot-cta-btn-primary,.wzd-foot-cta-btn-line { justify-content:center; }
  /* Contact card: always visible */
  .wzd-foot-contact-card { padding:16px 0 24px; border-bottom:1px solid #eee; }
  .wzd-foot-contact-card h4 {
    font-size:13px !important; text-transform:uppercase; letter-spacing:.06em !important;
    margin-bottom:14px !important; color:var(--c-ink,#2E2E31) !important;
  }
  .wzd-foot-bottom {
    flex-direction:column; text-align:center; gap:8px; padding:16px 0;
  }
  .wzd-foot-legal { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .wzd-foot-legal a { margin:0; }
}

/* ── 22. STICKYBAR — safe area + refined style ───────────────────────────── */
.wzd-stickybar {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
.wzd-stickybar-item {
  border-radius: 10px;
  min-height: 48px;
  font-size: 11.5px;
  font-weight: 600;
}
.wzd-stickybar-item i { font-size: 21px; }
.wzd-stickybar-cta {
  background: linear-gradient(135deg, var(--c-brick,#8E2521), var(--c-clay,#A63B2C)) !important;
  color: #fff !important;
  flex: 1.8;
}
@media (min-width:769px) { .wzd-stickybar { display:none !important; } }

/* Body padding for stickybar */
@media (max-width:720px) {
  body { padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom,0px))); }
}

/* ── 23. FAB — hide on mobile (stickybar takes over) ────────────────────── */
@media (max-width:720px) { .wzd-fab { display:none !important; } }

/* ── 24. PAGINATION — larger tap targets ─────────────────────────────────── */
@media (max-width:768px) {
  .wzd-pagination { gap:5px; margin-top:28px; }
  .wzd-pagination a,.wzd-pagination span { min-width:44px; height:44px; font-size:14.5px; }
}

/* ── 25. ARCHIVE / SHOP — mobile toolbar ─────────────────────────────────── */
@media (max-width:640px) {
  .wzd-cat-toolbar {
    grid-template-columns:auto 1fr auto;
    padding:8px 12px; gap:8px;
  }
  .wzd-cat-count { font-size:12px; }
  .wzd-cat-toolbar-sort { font-size:12.5px; padding:7px 10px; }
  /* Filter: full-width button */
  .wzd-cat-toolbar-filter { font-size:12.5px; }
}

/* ── 26. SINGLE POST — article mobile ───────────────────────────────────── */
@media (max-width:768px) {
  .wzd-art-single { grid-template-columns:1fr; gap:20px; }
  .wzd-art-aside  { margin-top:0; }
  /* TOC: compact */
  .wzd-toc { padding:14px 16px; }
  .wzd-toc ol li a { font-size:13px; padding:6px 0; }
  /* Share buttons: bigger */
  .wzd-share-btn { width:44px; height:44px; font-size:19px; }
}

/* ── 27. BLOG ARCHIVE ────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-blog-layout { grid-template-columns:1fr; gap:20px; }
  .wzd-feat { min-height:340px; }
  .wzd-feat-body { min-height:340px; padding:22px 20px; }
  .wzd-feat-title { font-size:19px !important; }
  .wzd-feat-excerpt { font-size:13px; -webkit-line-clamp:2; }
}

/* ── 28. DELIVERY PAGE ────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-dlv-hero { min-height:360px; }
  .wzd-dlv-hero-title { font-size:22px; }
  .wzd-dlv-body { grid-template-columns:1fr; gap:24px; }
  .wzd-dlv-related { grid-template-columns:repeat(2,1fr); gap:14px; }
  .wzd-dlv-sidebar-inner { position:static; }
  .wzd-dlv-trust { grid-template-columns:repeat(2,1fr); gap:8px; }
}
@media (max-width:480px) {
  .wzd-dlv-hero { min-height:280px; }
  .wzd-dlv-related { grid-template-columns:1fr; }
  .wzd-dlv-trust { grid-template-columns:1fr; }
  .wzd-dlv-thankyou { flex-direction:column; gap:10px; padding:16px; }
}

/* ── 29. 404 / SEARCH — mobile friendly ─────────────────────────────────── */
@media (max-width:540px) {
  .wzd-404-wrap,.wzd-search-wrap { padding:40px 0; }
  .wzd-search-form { flex-direction:column; gap:8px; }
  .wzd-search-form input { font-size:16px; }
}

/* ── 30. FORM INPUTS — prevent iOS zoom (font-size ≥ 16px) ─────────────── */
@media (max-width:768px) {
  input[type="text"],input[type="tel"],input[type="email"],
  input[type="number"],input[type="search"],input[type="password"],
  select,textarea {
    font-size: 16px !important;   /* iOS Safari: below 16px triggers zoom */
    min-height: 44px;
  }
  textarea { min-height: 80px; }
  .wzd-cq-input,.wzd-cq-text { font-size:16px !important; min-height:44px; }
  .wzd-qbox-form input,.wzd-qbox-form select,.wzd-qbox-form textarea {
    font-size:16px !important; min-height:44px;
  }
}

/* ── 31. FAQ ACCORDION — bigger tap ─────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-faq summary { padding:15px 18px; font-size:14px; }
  .wzd-faq-item summary { padding:14px 18px; font-size:15px; }
  .wzd-pdp-faq summary { padding:14px 18px; font-size:14px; }
  .wzd-filter-acc summary { padding:12px 0; }
}

/* ── 32. HOMEPAGE HERO SPLIT — mobile stack ─────────────────────────────── */
@media (max-width:760px) {
  .wzd-hero-split-grid { grid-template-columns:1fr; min-height:0; }
  .wzd-hero-split { min-height:0; }
  .wzd-hero-split-left { padding-right:0; padding-bottom:16px; padding-top:36px; }
  .wzd-hero-split-title {
    font-size:clamp(34px,9vw,52px);
    letter-spacing:-.025em;
  }
  .wzd-hero-split-sub { font-size:14px; margin:14px 0 22px; }
  .wzd-hero-split-ctas { gap:10px; }
  .wzd-hero-split-ctas .wzd-btn { flex:1; justify-content:center; }
  .wzd-hero-collage { min-height:260px; }
  .wzd-hero-collage img { width:100%; margin:0; }
}

/* ── 33. COMPARE BAR — mobile ────────────────────────────────────────────── */
@media (max-width:640px) {
  .wzd-compare-bar-inner { grid-template-columns:1fr; gap:8px; }
  .wzd-compare-bar-actions { justify-content:flex-end; }
  body:has(.wzd-compare-bar:not([hidden])) {
    padding-bottom: max(130px, calc(120px + env(safe-area-inset-bottom,0px)));
  }
}

/* ── 34. IMAGES — clean on mobile ────────────────────────────────────────── */
@media (max-width:768px) {
  .wzd-banner-image { border-radius:var(--r-xl); aspect-ratio:4/3; object-position:center; }
  .wzd-pdp-mainimg { border-radius:var(--r-md); }
}

/* ── 35. SKIP LINK — visible on focus ───────────────────────────────────── */
.wzd-skip {
  position:absolute; top:-9999px; left:16px;
  background:var(--c-brick,#8E2521); color:#fff !important;
  padding:8px 16px; border-radius:0 0 var(--r-md) var(--r-md);
  font-size:14px; font-weight:700; z-index:9999; text-decoration:none;
}
.wzd-skip:focus { top:0; }

/* ── 36. TEXT COMPACTNESS — compact labels site-wide ────────────────────── */
@media (max-width:768px) {
  /* Section-head link: smaller */
  .wzd-section-link { font-size:12.5px; }
  /* Category tabs (shop) label */
  .wzd-cat-tab-t { font-size:13px; }
  /* Sidebar item titles */
  .wzd-side-item-t { font-size:12.5px; }
  .wzd-side-item-img { width:80px; }
  /* Filter labels */
  .wzd-filter-options { font-size:12.5px; }
  .wzd-filter-group-h { font-size:12.5px; }
  /* Drawer items */
  .wzd-drawer-items > li > a { font-size:15.5px; }
  /* Step text */
  .wzd-step-t { font-size:13.5px !important; }
  .wzd-step-d { font-size:13.5px !important; }
}

/* ── 37. CLS / PERF — force aspect ratios on known images ───────────────── */
.wzd-catmini-img { aspect-ratio:4/3; contain:strict; }
.wzd-art-img     { aspect-ratio:4/3; contain:layout; }
.wzd-proj-img    { aspect-ratio:4/3; contain:layout; }
.wzd-dlv-card-img { aspect-ratio:4/3; contain:layout; }

/* ── 38. READING PROGRESS BAR — thinner on mobile ───────────────────────── */
@media (max-width:768px) {
  .wdc-reading-bar { height:2px; }
}

/* ── 39. BACK-TO-TOP — safe area aware ──────────────────────────────────── */
@media (max-width:720px) {
  .wdc-back-top {
    bottom: max(80px, calc(72px + env(safe-area-inset-bottom,0px)));
    right:12px; width:42px; height:42px; font-size:18px;
  }
}

/* ── 40. PRINT — clean ───────────────────────────────────────────────────── */
@media print {
  .wzd-nav,.wzd-foot,.wzd-stickybar,.wzd-fab,
  .wzd-compare-bar,.wdc-sticky-cta,.wdc-back-top { display:none !important; }
  body { padding-bottom:0 !important; }
}

/* ── 41. REDUCE MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,::before,::after {
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .wzd-prod:active,.wzd-btn:active { transform:none; }
}
/* ============================================================================
   END iOS 26 UX/UI GLOBAL REFRESH
   ============================================================================ */

/* ============================================================================
   42. iOS26 PAGE RESPONSIVE UTILITIES — Calculator / Contact / About
   ============================================================================ */

/* ── Calculator ──────────────────────────────────────────────────────────── */
.wdc-calc-panel{background:var(--c-bg-soft);border-radius:var(--r-xl);padding:28px 32px}
.wdc-calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.wdc-waste-row{display:flex;gap:12px;flex-wrap:wrap}
.wdc-waste-opt{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;padding:10px 16px;border:1.5px solid var(--c-line);border-radius:var(--r-md);background:#fff;flex:1;min-width:0}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.wdc-contact-layout{display:grid;grid-template-columns:260px 1fr 240px;gap:24px;align-items:start}
.wdc-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wdc-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wdc-contact-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.wdc-qcontact{display:none;gap:10px;margin-bottom:20px}
.wdc-qcontact-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:var(--r-lg);font-size:14px;font-weight:700;text-decoration:none;transition:opacity .15s;white-space:nowrap;overflow:hidden}
.wdc-qcontact-btn:hover{opacity:.85}
.wdc-qcontact-btn--call{background:#FDF0EF;color:var(--c-brick)}
.wdc-qcontact-btn--line{background:#E6F9EC;color:#1A7F3C}

/* ── About ───────────────────────────────────────────────────────────────── */
.wdc-about-story{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:32px;align-items:flex-start}
.wdc-cert-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .wdc-contact-layout{grid-template-columns:1fr;gap:20px}
  .wdc-contact-bottom{grid-template-columns:1fr;gap:16px}
  .wdc-qcontact{display:flex}
  .wdc-cat-grid{grid-template-columns:repeat(2,1fr)}
  .wdc-about-story{grid-template-columns:1fr;gap:24px}
  .wdc-cert-layout{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
  .wdc-calc-panel{padding:20px 16px;border-radius:var(--r-lg)}
  .wdc-calc-inputs{grid-template-columns:1fr;gap:12px}
  .wdc-form-2col{grid-template-columns:1fr;gap:10px}
}
@media(max-width:480px){
  .wdc-cat-grid{grid-template-columns:1fr 1fr}
  .wdc-waste-opt{flex:none;width:100%}
}

/* ═══════════════════════════════════════════════════
   Section 43 — Design D: Bottom Navigation Tab Bar
   ═══════════════════════════════════════════════════ */
.wzd-bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;background:#fff;border-top:1px solid rgba(0,0,0,.09);z-index:900;align-items:stretch;box-shadow:0 -2px 14px rgba(0,0,0,.06)}
.wzd-bottomnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#999;cursor:pointer;background:none;border:none;padding:6px 2px 4px;transition:color .15s;-webkit-tap-highlight-color:transparent;line-height:1;font-size:12.5px;font-weight:500}
.wzd-bottomnav-item i{font-size:21px}
.wzd-bottomnav-item span{font-size:12.5px;font-weight:500}
.wzd-bottomnav-item.wzd-bn-on,.wzd-bottomnav-item:active{color:var(--c-brick,#8E2521)}
@media(max-width:768px){
  .wzd-bottomnav{display:flex}
  body{padding-bottom:58px}
  .wzd-stickybar{display:none !important}
  .wzd-fab{bottom:68px !important}
  /* Design D: show CTA text in mobile header */
  .wzd-cta-quote span{display:inline !important}
  .wzd-cta-quote{padding:7px 10px !important;font-size:11.5px !important;border-radius:8px !important}
  /* hide search icon in header (less priority than CTA) */
  .wzd-nav-icon[aria-label="ค้นหา"]{display:none !important}
}
/* Ensure safe-area inset for iPhone notch */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .wzd-bottomnav{padding-bottom:env(safe-area-inset-bottom);height:calc(58px + env(safe-area-inset-bottom))}
  @media(max-width:768px){body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}}
}

/* ============================================================================
   MOBILE FONT SIZE OVERRIDES — minimum readable 2026-06-19
   ============================================================================ */
@media(max-width:700px){
  .wzd-art-excerpt  { font-size:14px; }
  .wzd-art-meta     { font-size:13px; }
  .wzd-art-tag      { font-size:12px !important; }
  .wzd-prod-size    { font-size:13.5px !important; }
  .wzd-step-d       { font-size:13.5px !important; }
  .wzd-trust-d      { font-size:13px; }
  .wzd-catmini-desc { font-size:13px !important; }
}

/* ============================================================
   iOS 26 MINIMAL — spec/calc/section icon boxes removed
   Must stay at END of file to beat all prior !important rules
   2026-06-20
   ============================================================ */

/* Icon box removed: spec card icon — NO background, NO border, NO radius */
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card-ic,
.wzd-pdp .wzd-pdp-spec-card-ic {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--c-ink-soft) !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* Remove 3rd-card pink tint — uniform rows */
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:nth-child(3) { background: none !important; }
.wzd-pdp.wzd-pdp .wzd-pdp-spec-card:nth-child(3) .wzd-pdp-spec-card-val { color: var(--c-charcoal) !important; }

/* Icon box removed: calculator icon */
.wzd-pdp.wzd-pdp .wzd-cq-ic,
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-head .wzd-cq-ic {
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 22px !important;
    color: var(--c-brick) !important;
}

/* Icon box removed: section heading icons */
.wzd-pdp-sec-h i,
.wzd-pdp .wzd-pdp-sec-h i {
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 20px !important;
    color: var(--c-brick) !important;
}

/* Calculator header: no cream box — just a clean divider */
.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-head {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: .5px solid var(--c-line-soft) !important;
    margin-bottom: 16px !important;
}

/* ============================================================================
   PDP v4 — iOS 26 MINIMAL LAYOUT (2026-06-23)
   2-column: Media (sticky left) | Body + Calculator (right)
   Classes: wzd-pdp2-* (layout) + wzd-cq-v4 (calculator card)
   ============================================================================ */

/* ── 2-column grid (media+data | action) ── */
.wzd-pdp2-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 20px;
}

/* ── Left: Media / Gallery (sticky on desktop) ── */
.wzd-pdp2-media {
	align-self: start;
}
.wzd-pdp2-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Main image — full rounded, no border */
.wzd-pdp2-gallery .wzd-pdp-mainimg {
	border-radius: 22px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-bg-soft);
	border: none;
	box-shadow: 0 2px 16px rgba(46,46,49,.06);
	max-height: 480px;
}
/* Horizontal thumbnail strip */
.wzd-pdp2-thumbstrip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.wzd-pdp2-thumbstrip::-webkit-scrollbar { display: none; }
.wzd-pdp2-thumbstrip .wzd-pdp-thumb {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 12px;
	border-width: 2px;
}

/* ── Media column: image + specs + insights ── */
.wzd-pdp2-media .wzd-pdp2-section-hd {
	margin-top: 20px;
}
.wzd-pdp2-media .wzd-pdp2-meta,
.wzd-pdp2-media .wzd-pdp2-desc,
.wzd-pdp2-media .wzd-pdp2-highlights,
.wzd-pdp2-media .wzd-pdp2-obs {
	margin-top: 8px;
}

/* ── Right: Action column (viz + calculator) ── */
.wzd-pdp2-action {
	position: sticky;
	top: calc(var(--nav-h) + var(--utility-h) + 16px);
	align-self: start;
	min-width: 0;
}
.wzd-pdp2-action .wzd-cq-v4 {
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--sh-soft);
	overflow: hidden;
}
.wzd-pdp2-action .wzd-cq-split {
	grid-template-columns: 1fr !important;
}
.wzd-pdp2-action .wzd-cq-split .wzd-cq-viz {
	order: -1 !important;
	border-bottom: 1px solid var(--c-line-soft) !important;
	border-left: none !important;
}
.wzd-pdp2-action .wzd-cq-split .wzd-cq-form {
	border-right: none !important;
	order: 1 !important;
}
.wzd-pdp2-action .wzd-cq-split .wzd-cq-viz-stage {
	height: 220px !important;
}
.wzd-pdp2-action .wzd-cq-split .wzd-cq-viz-stage svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Product header */
.wzd-pdp2-cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-brick);
	margin-bottom: 7px;
}
.wzd-pdp2-title {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.13;
	letter-spacing: -.022em;
	margin: 0;
	color: var(--c-ink);
}

/* Spec chips — horizontal pill row */
.wzd-pdp2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wzd-pdp2-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-pill);
	font-size: 12.5px;
	line-height: 1.3;
}
.wzd-pdp2-chip > i {
	color: var(--c-brick);
	font-size: 14px;
	flex-shrink: 0;
}
.wzd-pdp2-chip > span {
	color: var(--c-ink-soft);
	white-space: nowrap;
}
.wzd-pdp2-chip > strong {
	color: var(--c-ink);
	font-weight: 700;
	font-family: var(--font-en);
	white-space: nowrap;
	margin-left: 2px;
}

/* Meta rows — SKU / standard / brand */
.wzd-pdp2-meta {
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #fff;
}
.wzd-pdp2-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 13px;
	border-bottom: .5px solid var(--c-line-soft);
	gap: 12px;
}
.wzd-pdp2-meta-row:last-child { border-bottom: none; }
.wzd-pdp2-meta-row > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-ink-soft);
	flex-shrink: 0;
	white-space: nowrap;
}
.wzd-pdp2-meta-row > span i {
	font-size: 13px;
	color: var(--c-brick);
	opacity: .7;
}
.wzd-pdp2-meta-row > strong {
	color: var(--c-ink);
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

/* Tech note */
.wzd-pdp2-note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12px;
	color: var(--c-ink-mute);
	line-height: 1.5;
	margin: 0;
}
.wzd-pdp2-note > i {
	color: var(--c-orange);
	font-size: 13px;
	margin-top: 1px;
	flex-shrink: 0;
}

/* Description block */
.wzd-pdp2-desc {
	font-size: 14px;
	color: var(--c-ink-soft);
	line-height: 1.7;
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: 14px 16px;
}
.wzd-pdp2-desc ul { padding-left: 16px; margin: 8px 0; }
.wzd-pdp2-desc li { margin-bottom: 4px; }

/* Insights in right col */
.wzd-pdp2-insights {
	background: var(--c-bg-soft);
	border-radius: var(--r-lg);
	padding: 14px 16px;
}

/* ── Calculator card v4 ── */
.wzd-cq-v4 {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(46,46,49,.07);
	display: block !important; /* never display:contents */
}

/* Viz inside v4: no external margins — card handles spacing */
.wzd-cq-v4 .wzd-cq-viz {
	margin: 0 !important;
	border-radius: 0 !important;
}
.wzd-cq-v4 .wzd-cq-viz-head {
	padding: 12px 16px 10px !important;
	background: #fff !important;
	border-bottom: 1px solid var(--c-line-soft) !important;
}
.wzd-cq-v4 .wzd-cq-viz-stage {
	height: 160px !important;
	padding-bottom: 0 !important;
}
.wzd-cq-v4 .wzd-cq-viz-legend {
	padding: 7px 16px !important;
	border-top: 1px solid var(--c-line-soft) !important;
}

/* Strip card box from form — parent .wzd-cq-v4 provides the card */
.wzd-cq-v4 .wzd-pdp-colfm {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.wzd-cq-v4 .wzd-cq-step { padding-left: 16px !important; padding-right: 16px !important; }
/* 4-col grid for mortar & waste pills (4 options each) */
.wzd-cq-v4 .wzd-cq-waste { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; }

/* v4 form header: icon + title + subtitle */
.wzd-cq-v4-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px 14px;
	border-bottom: .5px solid var(--c-line-soft);
}

/* Override: v4 head re-uses .wzd-cq-ic (no icon box needed) */
.wzd-cq-v4 .wzd-cq-v4-head .wzd-cq-ic {
	font-size: 22px !important;
	color: var(--c-brick) !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
}

/* Result inside v4 — placed between calc inputs and contact */
.wzd-cq-v4 .wzd-cq-result {
	margin: 0 16px 0 !important;
	border-radius: var(--r-md) !important;
}

/* LINE CTA in v4: full width, consistent side padding */
.wzd-cq-v4 .wzd-pdp-colfm .wzd-cq-btn-line--main {
	margin-left: 16px !important;
	margin-right: 16px !important;
}
.wzd-cq-v4 .wzd-cq-line-note {
	padding: 0 16px 14px !important;
}

/* ── Responsive: tablet ≤ 1100px ── */
@media (max-width: 1100px) {
	.wzd-pdp2-grid {
		gap: 20px;
	}
	.wzd-pdp2-action {
		grid-column: 1 / -1;
		position: static;
	}
}
@media (max-width: 768px) {
	.wzd-pdp2-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 0;
	}
	.wzd-pdp2-media {
		position: static;
	}
	/* Gallery: cream bg, full-bleed iOS26 style, no card border */
	.wzd-pdp2-gallery {
		margin-left: calc(-1 * var(--container-px, 16px));
		margin-right: calc(-1 * var(--container-px, 16px));
		gap: 0;
	}
	.wzd-pdp2-gallery .wzd-pdp-mainimg {
		aspect-ratio: unset !important;
		height: clamp(200px, 50vw, 260px) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: #F8F5EF !important;
		padding: 12px !important;
		border: none !important;
		margin-bottom: 0 !important;
		width: 100% !important;
	}
	.wzd-pdp2-gallery .wzd-pdp-mainimg img {
		object-fit: contain !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
	}
	.wzd-pdp2-thumbstrip {
		padding: 8px 16px 4px;
		background: #F8F5EF;
	}
}

/* ── Responsive: mobile ≤ 560px ── */
@media (max-width: 560px) {
	.wzd-pdp2-grid { gap: 14px; }
	.wzd-pdp2-title { font-size: 22px; letter-spacing: -.015em; }
	.wzd-pdp2-chip { font-size: 13px; padding: 7px 11px; }
	.wzd-pdp2-chips { gap: 6px; }
	.wzd-pdp2-thumbstrip .wzd-pdp-thumb { width: 52px; height: 52px; }
}

/* ================================================================
   PDP v4 — UX/UI REFINEMENTS 2026-06-24
   ================================================================ */

/* ── 1. Viz card: white background + light stage (ไม่ใช้สีดำ) ── */
.wzd-cq-v4 .wzd-cq-viz {
	background: #fff !important;
	color: var(--c-ink) !important;
	border-bottom: 1px solid var(--c-line-soft) !important;
}
.wzd-cq-v4 .wzd-cq-viz-head {
	color: var(--c-ink) !important;
}
.wzd-cq-v4 .wzd-cq-viz-head i { color: var(--c-brick) !important; }
.wzd-cq-v4 .wzd-cq-viz-stage {
	background: var(--c-bg-soft, #f7f3ee) !important;
	border-radius: 6px !important;
}
.wzd-cq-v4 .wzd-cq-viz-legend {
	color: var(--c-ink-soft) !important;
	font-size: 14px !important;
}
.wzd-cq-v4 .wzd-cq-viz-aux { color: var(--c-ink-mute) !important; }
.wzd-cq-v4 .dot-mortar { background: #b0b0b0 !important; }

/* ── 2. Area inputs: ตัวเลขกึ่งกลาง ── */
.wzd-cq-v4 .wzd-cq-area-3col input[type="number"].wzd-cq-input {
	text-align: center !important;
}

/* ── 3. Insights card: structured, clean, white card ── */
.wzd-pdp2-insights {
	background: #fff !important;
	border: 1px solid var(--c-line-soft) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: 0 1px 6px rgba(46,46,49,.05) !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-top: none !important;
}
.wzd-pdp2-insights .wzd-insights-row {
	padding: 14px 16px !important;
	border-bottom: .5px solid var(--c-line-soft) !important;
	margin-bottom: 0 !important;
}
.wzd-pdp2-insights .wzd-insights-row + .wzd-insights-row {
	margin-top: 0 !important;
}
.wzd-pdp2-insights .wzd-insights-label {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	color: var(--c-ink-soft) !important;
	text-transform: uppercase;
	margin-bottom: 10px !important;
}
.wzd-pdp2-insights .wzd-insights-label i {
	font-size: 13px !important;
	color: var(--c-teal, #1a8a6f) !important;
}
.wzd-pdp2-insights .wzd-insights-label--obs i {
	color: var(--c-orange, #d97706) !important;
}
/* 3-column grid for insights */
.wzd-pdp2-insights .wzd-insights-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 6px !important;
}
/* Pro items: green card */
.wzd-pdp2-insights .wzd-insight--pro {
	background: rgba(26,138,111,.07) !important;
	border: .5px solid rgba(26,138,111,.2) !important;
	border-left: 3px solid var(--c-teal, #1a8a6f) !important;
	border-radius: 10px !important;
	padding: 9px 11px !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 8px !important;
}
/* Obs items: orange card */
.wzd-pdp2-insights .wzd-insight--obs {
	background: rgba(217,119,6,.07) !important;
	border: .5px solid rgba(217,119,6,.2) !important;
	border-left: 3px solid var(--c-orange, #d97706) !important;
	border-radius: 10px !important;
	padding: 9px 11px !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 8px !important;
}
.wzd-pdp2-insights .wzd-insight-ic {
	font-size: 15px !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}
.wzd-pdp2-insights .wzd-insight--pro .wzd-insight-ic { color: var(--c-teal, #1a8a6f) !important; }
.wzd-pdp2-insights .wzd-insight--obs .wzd-insight-ic { color: var(--c-orange, #d97706) !important; }
.wzd-pdp2-insights .wzd-insight-text {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--c-ink) !important;
	line-height: 1.4 !important;
}
/* งานที่เหมาะ section */
.wzd-pdp2-insights .wzd-insights-use {
	padding: 14px 16px !important;
}
.wzd-pdp2-insights .wzd-insights-use .wzd-insights-label { margin-bottom: 8px !important; }
.wzd-pdp2-insights .wzd-insights-use-list {
	gap: 6px !important;
	margin-top: 0 !important;
}
.wzd-pdp2-insights .wzd-insight-tag {
	font-size: 12px !important;
	padding: 5px 13px !important;
	background: var(--c-bg-soft) !important;
	border: .5px solid var(--c-line) !important;
	border-radius: 20px !important;
	color: var(--c-ink) !important;
}
.wzd-pdp2-insights .wzd-insight-tag i { color: var(--c-brick) !important; font-size: 14px !important; }
/* Responsive: 2-col on small screens */
@media (max-width: 480px) {
	.wzd-pdp2-insights .wzd-insights-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   PDP v5 — L99 LAYOUT REFINEMENTS 2026-06-24
   2-panel calc · install steps v2 · quick nav pills · sticky CTA
   ================================================================ */

/* ── Calculator: 2-panel split (form left | viz right) ── */
.wzd-cq-split {
	display: grid !important;
	grid-template-columns: 1fr minmax(200px, 40%) !important;
	align-items: start;
}
/* form is left col; viz floats in right col from the top */
.wzd-cq-split .wzd-cq-form {
	order: 1;
	border-right: 1px solid var(--c-line-soft) !important;
	align-self: stretch;
}
.wzd-cq-split .wzd-cq-viz {
	order: 2;
	align-self: start !important;
	border-bottom: none !important;
	border-left: none !important;
	display: flex;
	flex-direction: column;
}
.wzd-cq-split .wzd-cq-viz-head {
	background: var(--c-bg-soft, #f7f3ee) !important;
	border-bottom: 1px solid var(--c-line-soft) !important;
}
.wzd-cq-split .wzd-cq-viz-stage {
	flex: none !important;
	height: 220px !important;
	overflow: hidden;
}
.wzd-cq-split .wzd-cq-viz-stage svg {
	width: 100%;
	height: 100%;
}
.wzd-cq-split .wzd-cq-viz-legend {
	border-top: 1px solid var(--c-line-soft) !important;
	padding: 10px 14px !important;
}
@media (max-width: 700px) {
	.wzd-cq-split {
		grid-template-columns: 1fr !important;
	}
	.wzd-cq-split .wzd-cq-form { border-right: none !important; align-self: auto !important; }
	.wzd-cq-split .wzd-cq-viz {
		order: -1 !important;
		border-bottom: 1px solid var(--c-line-soft) !important;
	}
	.wzd-cq-split .wzd-cq-viz-stage { height: 130px !important; }
	.wzd-cq-split .wzd-cq-form { order: 1 !important; }
}

/* ── Installation steps v2: vertical list in single card ── */
.wzd-pdp-steps {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	grid-template-columns: unset !important;
	border: 1px solid var(--c-line-soft) !important;
	border-radius: var(--r-lg) !important;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 6px rgba(46,46,49,.04) !important;
}
.wzd-pdp-steps .wzd-step {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 16px 20px !important;
	border: none !important;
	border-bottom: .5px solid var(--c-line-soft) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: background .15s !important;
}
.wzd-pdp-steps .wzd-step:last-child { border-bottom: none !important; }
.wzd-pdp-steps .wzd-step:hover {
	background: var(--c-bg-soft, #f7f3ee) !important;
	transform: none !important;
	box-shadow: none !important;
}
.wzd-pdp-steps .wzd-step-n {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	border-radius: 50% !important;
	background: var(--c-brick) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: var(--font-en) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(142,37,33,.18) !important;
	margin-top: 1px !important;
}
.wzd-pdp-steps .wzd-step > div:last-child {
	flex: 1;
	min-width: 0;
}

/* ── Quick nav pills ── */
.wzd-pdp-qnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 24px 0 8px;
}
.wzd-pdp-qnav-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
	box-shadow: 0 1px 4px rgba(46,46,49,.05);
	line-height: 1;
}
.wzd-pdp-qnav-pill:hover {
	border-color: var(--c-brick);
	color: var(--c-brick);
	box-shadow: 0 2px 8px rgba(142,37,33,.12);
	background: rgba(142,37,33,.03);
}
.wzd-pdp-qnav-pill i { font-size: 15px; }
.wzd-pdp-qnav-pill--cta {
	background: #06c755 !important;
	border-color: #06c755 !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(6,199,85,.28) !important;
}
.wzd-pdp-qnav-pill--cta:hover {
	background: #05b34c !important;
	border-color: #05b34c !important;
	color: #fff !important;
	box-shadow: 0 3px 12px rgba(6,199,85,.35) !important;
}
@media (max-width: 560px) {
	.wzd-pdp-qnav { gap: 6px; padding: 20px 0 6px; }
	.wzd-pdp-qnav-pill { font-size: 13px; padding: 7px 12px; }
}

/* ── Sticky bottom CTA bar — mobile only ── */
.wzd-pdp-sticky {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 900;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--c-line-soft);
	box-shadow: 0 -4px 28px rgba(46,46,49,.12);
	padding: 10px 16px 14px;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
@media (max-width: 768px) { .wzd-pdp-sticky { display: flex; } }
.wzd-pdp-sticky-text {
	font-size: 12.5px;
	color: var(--c-ink);
	line-height: 1.35;
	min-width: 0;
	overflow: hidden;
}
.wzd-pdp-sticky-text strong { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wzd-pdp-sticky-text em { font-style: normal; color: var(--c-ink-soft); font-size: 11.5px; }
.wzd-pdp-sticky-btns { display: flex; gap: 8px; flex-shrink: 0; }
.wzd-pdp-sticky-line,
.wzd-pdp-sticky-tel {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
.wzd-pdp-sticky-line { background: #06c755; color: #fff; }
.wzd-pdp-sticky-line:hover { background: #05b34c; color: #fff; }
.wzd-pdp-sticky-tel {
	background: var(--c-bg-soft);
	color: var(--c-ink);
	border: 1px solid var(--c-line-soft);
}
.wzd-pdp-sticky-tel:hover { border-color: var(--c-ink-soft); }

/* ── PDP v6: Trust section ───────────────────────────────────── */
.wzd-pdp-trust {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: 16px 18px;
	margin-top: 18px;
	box-shadow: 0 1px 6px rgba(46,46,49,.04);
}
.wzd-pdp-trust-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 12px;
}
.wzd-pdp-trust-hd .ti {
	font-size: 16px;
	color: var(--c-brick);
}
.wzd-pdp-trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.wzd-pdp-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--c-line-soft);
	border-radius: 10px;
	background: var(--c-bg-soft);
	font-size: 12px;
	line-height: 1.4;
	color: var(--c-ink);
}
.wzd-pdp-trust-item .ti {
	font-size: 16px;
	color: var(--c-teal);
	flex-shrink: 0;
	margin-top: 1px;
}

/* ── PDP v6: Horizontal install steps ───────────────────────── */
.wzd-pdp-steps {
	flex-direction: row !important;
	gap: 10px !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	padding-bottom: 6px !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.wzd-pdp-steps .wzd-step {
	flex-direction: column !important;
	min-width: 155px !important;
	max-width: 180px !important;
	flex: 1 !important;
	background: #fff !important;
	border: 1px solid var(--c-line-soft) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	padding: 0 !important;
	gap: 0 !important;
}
.wzd-pdp-steps .wzd-step-n {
	position: static !important;
	top: auto !important; left: auto !important;
	width: 100% !important;
	height: 72px !important;
	min-width: unset !important;
	border-radius: 0 !important;
	background: linear-gradient(135deg, rgba(180,64,40,.1) 0%, rgba(217,137,73,.1) 100%) !important;
	border-bottom: 1px solid var(--c-line-soft) !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	font-family: var(--font-en) !important;
	color: var(--c-brick) !important;
	box-shadow: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wzd-pdp-steps .wzd-step > div:not(.wzd-step-n) {
	padding: 10px 13px 14px !important;
}
.wzd-pdp-steps .wzd-step-t {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	margin-bottom: 4px !important;
	line-height: 1.35 !important;
}
.wzd-pdp-steps .wzd-step-d {
	font-size: 11.5px !important;
	color: #6b7280 !important;
	line-height: 1.4 !important;
}

/* ── Mobile override: 2-col grid (must beat v6 row !important) ── */
@media (max-width: 640px) {
	.wzd-pdp-steps {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		flex-direction: unset !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		gap: 10px !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding-bottom: 0 !important;
	}
	.wzd-pdp-steps .wzd-step {
		min-width: unset !important;
		max-width: unset !important;
		flex: none !important;
	}
}

/* ── PDP v6: Related + FAQ 2-column grid ────────────────────── */
.wzd-pdp-bot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
.wzd-pdp-sec--inner {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: 20px;
	box-shadow: 0 1px 6px rgba(46,46,49,.04);
}
.wzd-prod-grid--2 {
	grid-template-columns: repeat(2, 1fr) !important;
}

/* ── PDP v6: Quick nav label ────────────────────────────────── */
.wzd-pdp-qnav-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9ca3af;
	margin: 28px 0 4px;
	padding: 0;
}

/* ── PDP v6: Sticky 3-button layout ────────────────────────── */
.wzd-pdp-sticky-btns {
	display: flex !important;
	gap: 8px !important;
}
.wzd-pdp-sticky-quote {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	background: var(--c-brick);
	color: #fff;
	white-space: nowrap;
}
.wzd-pdp-sticky-quote:hover { background: #a03020; color: #fff; }
.wzd-pdp-sticky-line { flex: 1 !important; }
.wzd-pdp-sticky-tel  { flex: 1 !important; }

/* ── PDP v6: Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
	.wzd-pdp-bot-grid { grid-template-columns: 1fr; }
	.wzd-pdp-sticky-text { display: none !important; }
	.wzd-pdp-sticky-quote { font-size: 13px; padding: 10px 10px; }
}
@media (max-width: 480px) {
	.wzd-pdp-steps .wzd-step { min-width: 130px !important; }
}

/* ── PDP v7: Subtitle + Heart + 4-col related ───────────────── */
.wzd-pdp2-subtitle {
	font-size: 14px;
	color: #6b7280;
	margin: 4px 0 10px;
	line-height: 1.5;
}
.wzd-pdp2-fave {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7280;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-bottom: 14px;
	transition: color .15s;
}
.wzd-pdp2-fave .ti { font-size: 16px; }
.wzd-pdp2-fave:hover { color: var(--c-brick); }
.wzd-pdp2-fave.active .ti-heart::before { content: "\eaf0"; color: var(--c-brick); }
.wzd-prod-grid--4bot {
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}
.wzd-prod-grid--4bot .wzd-prod-img { aspect-ratio: 1/1 !important; height: auto; }
.wzd-prod-grid--4bot .wzd-prod-name { font-size: 13px !important; min-height: unset !important; text-align: center; }
.wzd-prod-grid--4bot .wzd-prod-link { font-size: 12px !important; padding: 8px 14px !important; }
@media (max-width: 768px) {
	.wzd-prod-grid--4bot { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── PDP v7: FAQ header style ───────────────────────────────── */
.wzd-pdp-sec--inner .wzd-section-head { margin-bottom: 12px; }
.wzd-pdp-sec--inner .wzd-section-title { font-size: 16px; }

/* ── PDP v8: Meta table header ─────────────────────────────── */
.wzd-pdp2-meta-hd { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-sub); margin: 0 0 8px; }
.wzd-pdp2-meta-hd .ti { font-size: 14px; color: var(--c-brick); }

/* ── PDP: Section headers (unified style, all 4 sections) ──────── */
h3.wzd-pdp2-section-hd { margin: 0; }
.wzd-pdp2-section-hd {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 800;
	color: var(--c-ink); margin-bottom: 0;
	letter-spacing: .2px;
}
.wzd-pdp2-section-hd::before {
	content: ''; width: 3px; min-width: 3px; height: 14px;
	background: var(--c-brick); border-radius: 2px; display: block;
}
.wzd-pdp2-section-hd--obs::before { background: #c07800; }
.wzd-pdp2-section-hd .ti { display: none; } /* icons removed from markup */

.wzd-pdp2-highlights,
.wzd-pdp2-obs {
	background: #fff;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	padding: 14px 16px;
}
.wzd-pdp2-hi-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wzd-pdp2-hi-item {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 9px 11px;
	border: 1px solid var(--c-line-soft);
	border-radius: 10px;
	background: var(--c-bg-soft);
	font-size: 11px; line-height: 1.4; color: var(--c-ink);
}
.wzd-pdp2-hi-item .ti { font-size: 15px; color: var(--c-teal); flex-shrink: 0; margin-top: 1px; }
.wzd-pdp2-hi-item--obs .ti { color: #c07800; }

/* ── PDP: spec chips ────────────────────────────────────────── */
.wzd-pdp2-spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.wzd-pdp2-spec-chip { background: var(--c-bg-soft); border: 1px solid var(--c-line-soft); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--c-ink-sub); display: inline-flex; align-items: center; gap: 5px; }
.wzd-pdp2-chip-lbl { font-weight: 400; font-size: 10px; color: var(--c-ink-mute); }
.wzd-pdp2-spec-chip strong { color: var(--c-ink); font-size: 12px; }

/* ── PDP: highlight card list ───────────────────────────────── */
.wzd-pdp2-highlights--list { display: flex; flex-direction: column; gap: 8px; background: none; border: none; padding: 0; }
.wzd-pdp2-hi-card { display: flex; align-items: flex-start; gap: 10px; background: rgba(142,37,33,.04); border: 1px solid rgba(142,37,33,.12); border-radius: 12px; padding: 10px 12px; }
.wzd-pdp2-hi-icon { width: 28px; height: 28px; background: rgba(142,37,33,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--c-brick); flex-shrink: 0; }
.wzd-pdp2-hi-body { font-size: 12px; line-height: 1.5; color: var(--c-ink); flex: 1; }
.wzd-pdp2-hi-body strong { color: var(--c-brick); display: inline; font-size: 12px; }

/* ── PDP: งานที่เหมาะ tags ────────────────────────────────── */
.wzd-pdp-use-tags {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 8px;
}
.wzd-pdp-use-label {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; font-weight: 700; color: var(--c-ink-sub);
	margin: 0;
}
.wzd-pdp-use-label .ti { font-size: 14px; color: var(--c-brick); }
.wzd-pdp-use-tag {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; color: var(--c-ink-soft);
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line-soft);
	border-radius: 20px;
	padding: 5px 12px;
}
.wzd-pdp-use-tag .ti { font-size: 13px; color: var(--c-teal); }

/* ── PDP v9: Full-width header above hero grid ──────────────── */
/* wzd-pdp2-header moved inside media column — keep for desktop fallback */
.wzd-pdp2-header { margin-bottom: 16px; display: none; }

/* Product info block inside media, after gallery */
.wzd-pdp2-pdpinfo {
	padding: 8px 0 6px;
}
.wzd-pdp2-pdpinfo .wzd-pdp2-cat {
	display: inline-block; font-size: 11px; font-weight: 700; color: var(--c-brick);
	background: rgba(142,37,33,.08); padding: 3px 10px; border-radius: 20px;
	margin-bottom: 6px; letter-spacing: .3px;
}
.wzd-pdp2-pdpinfo .wzd-pdp2-title { margin-bottom: 6px; }
.wzd-pdp2-pdpinfo .wzd-pdp2-subtitle { margin-bottom: 10px; }
.wzd-pdp2-pdpinfo .wzd-pdp2-subtitle strong { color: var(--c-brick); font-weight: 700; }
.wzd-pdp2-thumbstrip { margin: 6px 0 6px; }
.wzd-pdp2-note { margin-top: 0; }

/* ================================================================
   WDC TRUCK GRID — article delivery section
   ================================================================ */
.wdc-truck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6em 0;
}
.wdc-truck-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: var(--c-ivory, #F8F5EF);
  border: 1px solid var(--c-line-soft, #e8e2da);
  border-radius: var(--r-lg, 16px);
  padding: 20px 14px 18px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.wdc-truck-card:hover {
  border-color: var(--c-brick, #8E2521);
  box-shadow: 0 4px 16px rgba(142,37,33,0.10);
}
.wdc-truck-card--large {
  border-color: var(--c-orange, #D98949);
  background: #fff9f4;
}
.wdc-truck-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brick, #8E2521);
  border-radius: 14px;
  color: #fff;
  font-size: 26px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.wdc-truck-card--large .wdc-truck-icon {
  background: var(--c-orange, #D98949);
}
.wdc-truck-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink, #2E2E31);
  line-height: 1.3;
}
.wdc-truck-cap {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-brick, #8E2521);
}
.wdc-truck-note {
  font-size: 11.5px;
  color: var(--c-ink-soft, #888);
}
@media (max-width: 700px) {
  .wdc-truck-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wdc-truck-icon { width: 48px; height: 48px; font-size: 22px; }
}
@media (max-width: 480px) {
  .wdc-truck-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   WDC DELIVERY GRID — real delivery post cards in article
   ================================================================ */
.wdc-delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.4em 0 2em;
}
.wdc-delivery-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--c-line-soft, #e8e2da);
  background: #fff;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.wdc-delivery-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transform: translateY(-2px);
  border-color: var(--c-brick, #8E2521);
}
.wdc-delivery-img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--c-ivory, #F8F5EF);
  flex-shrink: 0;
}
.wdc-delivery-title {
  display: block;
  padding: 10px 12px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink, #2E2E31);
  border-top: none;
}
.wdc-delivery-card:hover .wdc-delivery-title {
  color: var(--c-brick, #8E2521);
}
.wdc-delivery-more {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--c-brick, #8E2521);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brick, #8E2521) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.wdc-delivery-more:hover {
  background: var(--c-brick, #8E2521);
  color: #fff !important;
}
@media (max-width: 900px) {
  .wdc-delivery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .wdc-delivery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wdc-delivery-title { font-size: 12px; padding: 8px 10px 10px; }
}
/* wpautop inserts stray <p> between <a> cards — remove from grid layout */
.wdc-delivery-grid > p { display: none !important; }
/* wpautop also creates duplicate empty <a> cards — hide them */
.wdc-delivery-card:not(:has(.wdc-delivery-img)) { display: none !important; }
/* wpautop inserts empty <p> as first child inside each card — suppress */
.wdc-delivery-card > p:empty { display: none !important; margin: 0 !important; }

/* ================================================================
   WDC CUSTOM ICON SYSTEM
   Brand icons from WDC icon set — 77 named PNGs, 96×96px source
   ================================================================ */

/* ================================================================
   UX PATCH 2026-06-25 — footer h4 visible on cream bg + delivery
   ================================================================ */

/* Footer h4 — override old dark-footer white rule for all h4 in footer */
.wzd-foot h4 { color: var(--c-charcoal, #2E2E31) !important; }
/* Contact card: keep consistent heading style */
.wzd-foot-contact-card h4 {
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--c-charcoal, #2E2E31) !important;
  text-transform: uppercase; letter-spacing: .08em !important;
  margin: 0 0 14px !important;
}

/* Delivery card — ensure 4-col gap on mid-size screens too */
@media (min-width: 901px) {
  .wzd-dlv-related { grid-template-columns: repeat(4, 1fr); }
}

/* Footer mobile: better spacing for accordion sections */
@media (max-width: 680px) {
  details.wzd-foot-col summary { padding: 14px 0; border: none; }
  details.wzd-foot-col[open] summary { padding-bottom: 4px; }
  .wzd-foot-col ul { padding-bottom: 14px; }
  .wzd-foot-contact-card { padding-top: 14px !important; }
}

/* FAB (headset) — keep above bottomnav on mobile */
@media (max-width: 768px) {
  .wzd-fab { bottom: 74px !important; right: 16px !important; }
}

/* ============================================================================
   UX PATCH 2026-06-25C — delivery page: CTA box light, FAQ clean, 1:1 images
   ============================================================================ */

/* 1. CTA sidebar box — NO dark background (ห้ามสีดำ) */
.wzd-dlv-cta-box {
  background: var(--c-bg-pink, #F9F0EE) !important;
  border: 1.5px solid var(--c-brick, #8E2521) !important;
  color: var(--c-ink, #1E0A08) !important;
}
.wzd-dlv-cta-box-head h3 {
  color: var(--c-brick, #8E2521) !important;
}
.wzd-dlv-cta-box-head .ti {
  color: var(--c-brick, #8E2521) !important;
}
.wzd-dlv-cta-box-sub {
  color: var(--c-ink-soft, #6B6661) !important;
}

/* 2. FAQ — clean white cards, better readability, separation from trust strip */
.wzd-dlv-body { padding-bottom: 40px; }
.wzd-dlv-faq { margin-bottom: 16px; }
.wzd-dlv-faq-list { gap: 10px; }
.wzd-dlv-faq-item {
  background: #fff !important;
  border: 1px solid var(--c-line, #DDD6CE) !important;
}
.wzd-dlv-faq-item[open] {
  border-color: var(--c-brick, #8E2521) !important;
  background: #fff !important;
}
.wzd-dlv-faq-q {
  font-size: 14.5px !important;
  color: var(--c-ink, #1E0A08) !important;
  padding: 16px 18px !important;
}
.wzd-dlv-faq-a {
  color: var(--c-ink, #1E0A08) !important;
  font-size: 14px !important;
  padding: 12px 18px 16px !important;
  border-top: 1px solid var(--c-line-soft, #E8E0D4) !important;
}

/* 3. Main delivery photo — 1:1 ratio ไม่ยืด ไม่ยาน */
.wzd-dlv-photo img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* 4. Related delivery cards — 1:1 ratio (override line ~10242 which has 4/3) */
.wzd-dlv-card-img {
  aspect-ratio: 1 / 1 !important;
  contain: layout;
}

/* 5. Mobile — FAQ doesn't get covered by bottom nav (58px) + safe area */
@media (max-width: 768px) {
  .wzd-dlv-faq { padding-bottom: 16px; margin-bottom: 8px; }
  .wzd-dlv-trust { margin-bottom: 8px; }
}

/* ============================================================================
   UX PATCH 2026-06-25D — delivery hero: compact light header, no photo
   ============================================================================ */

/* ซ่อนรูปพื้นหลัง + scrim ทั้งหมด */
.wzd-dlv-hero-img  { display: none !important; }
.wzd-dlv-hero-scrim { display: none !important; }

/* Hero → compact cream header */
.wzd-dlv-hero {
  min-height: 0 !important;
  background: var(--c-bg-cream, #F8F5EF) !important;
  border-bottom: 1px solid var(--c-line-soft, #E8E0D4) !important;
  align-items: center !important;
}
.wzd-dlv-hero-inner {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Breadcrumb — dark text on light bg */
.wzd-dlv-bread .wzd-breadcrumb,
.wzd-dlv-bread .breadcrumbs { color: var(--c-ink-soft, #6B6661) !important; }
.wzd-dlv-bread a { color: var(--c-ink-soft, #6B6661) !important; }
.wzd-dlv-bread a:hover { color: var(--c-brick, #8E2521) !important; }

/* Badges — รูปแบบ light สำหรับพื้นครีม */
.wzd-dlv-badge {
  background: rgba(142,37,33,0.07) !important;
  border-color: rgba(142,37,33,0.18) !important;
  color: var(--c-brick, #8E2521) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.wzd-dlv-badge .ti-circle-check-filled { color: #2e9e5a !important; }
.wzd-dlv-badge--loc {
  background: var(--c-bg-pink, #F9F0EE) !important;
  border-color: rgba(142,37,33,0.22) !important;
}

/* Title — ใช้ ink บน cream */
.wzd-dlv-hero-title {
  color: var(--c-ink, #1E0A08) !important;
  text-shadow: none !important;
  font-size: clamp(17px, 2.4vw, 26px) !important;
}

/* Meta — muted dark */
.wzd-dlv-hero-meta { color: var(--c-ink-soft, #6B6661) !important; }
.wzd-dlv-hero-meta .ti { color: var(--c-brick, #8E2521) !important; }
.wzd-dlv-hero-meta a { color: var(--c-brick, #8E2521) !important; }
.wzd-dlv-hero-meta a:hover { color: var(--c-ink, #1E0A08) !important; }

@media (max-width: 768px) {
  .wzd-dlv-hero-inner { padding-top: 16px !important; padding-bottom: 16px !important; }
  .wzd-dlv-hero-title { font-size: 17px !important; }
}

/* ============================================================================
   UX PATCH 2026-06-25E — Category Hub: iOS26 complete layout overhaul
   ครอบคลุมทุกอุปกรณ์ / ใช้กับ 13 hub pages ทั้งหมด
   ============================================================================ */

/* ── Page shell ── */
.wzd-hub-page { background: var(--c-bg-page, #FAFAF8); }

.wzd-hub-topbar {
  background: var(--c-bg-cream, #F8F5EF);
  border-bottom: 1px solid var(--c-line-soft, #E8E0D4);
  padding: 10px 0;
}

.wzd-hub-section { padding-top: 28px; padding-bottom: 60px; }

/* ── Two-column layout ── */
.wzd-hub-layout {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 40px;
  align-items: start;
}
/* Prevent grid items from overflowing their tracks */
.wzd-hub-main,
.wzd-hub-sidebar { min-width: 0; }

/* ── Hub content typography ── */
.wzd-hub-content {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--c-ink, #1E0A08) !important;
}

/* H1 — hero-style header inside content */
.wzd-hub-content > h1,
.wzd-hub-content h1 {
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 800 !important;
  color: var(--c-ink, #1E0A08) !important;
  margin: 0 0 8px !important;
  padding-bottom: 14px !important;
  border-bottom: 2.5px solid var(--c-brick, #8E2521) !important;
  line-height: 1.25 !important;
}

/* H2 section headings */
.wzd-hub-content h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-ink, #1E0A08) !important;
  margin: 36px 0 16px !important;
  padding: 0 0 0 12px !important;
  border-left: 3px solid var(--c-brick, #8E2521) !important;
  border-bottom: none !important;
}

/* H3 inside boxes */
.wzd-hub-content h3 { font-size: 16px !important; font-weight: 700 !important; }

/* ── TOC nav ── */
.wzd-hub-content .wzd-toc,
.wzd-hub-content nav[aria-label*="สารบัญ"],
.wzd-hub-content nav[aria-label*="TOC"] {
  background: var(--c-bg-cream, #F8F5EF) !important;
  border: 1px solid var(--c-line-soft, #E8E0D4) !important;
  border-left: 3px solid var(--c-brick, #8E2521) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 20px 0 28px !important;
  font-size: 14px !important;
}
.wzd-hub-content .wzd-toc a,
.wzd-hub-content nav[aria-label*="สารบัญ"] a {
  color: var(--c-brick, #8E2521) !important;
  text-decoration: none !important;
}
.wzd-hub-content .wzd-toc a:hover,
.wzd-hub-content nav[aria-label*="สารบัญ"] a:hover { text-decoration: underline !important; }

/* ── WooCommerce product grid inside hub ── */
.wzd-hub-content .woocommerce { margin: 0 !important; }

.wzd-hub-content ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}

.wzd-hub-content ul.products li.product {
  background: #fff !important;
  border: 0.5px solid var(--c-line-soft, #E8E0D4) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  transition: box-shadow 0.18s, border-color 0.18s !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.wzd-hub-content ul.products li.product:hover {
  box-shadow: 0 4px 18px rgba(142,37,33,0.10) !important;
  border-color: var(--c-brick, #8E2521) !important;
}

/* Product link wrapper */
.wzd-hub-content ul.products li.product a.woocommerce-LoopProduct-link,
.wzd-hub-content ul.products li.product a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  gap: 8px !important;
  flex: 1 !important;
}

/* Product image — fixed square, object-contain */
.wzd-hub-content ul.products li.product img.attachment-woocommerce_thumbnail,
.wzd-hub-content ul.products li.product img.size-woocommerce_thumbnail {
  width: 100% !important;
  height: 130px !important;
  object-fit: contain !important;
  background: var(--c-bg-cream, #F8F5EF) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Product title */
.wzd-hub-content ul.products li.product h2.woocommerce-loop-product__title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--c-ink, #1E0A08) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  border: none !important;
  padding: 0 !important;
}

/* Price / POA */
.wzd-hub-content ul.products li.product .price {
  font-size: 11.5px !important;
  color: var(--c-brick, #8E2521) !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}
.wzd-hub-content ul.products li.product .price .wdc-poa-price { display: block !important; }
.wzd-hub-content ul.products li.product .price .wdc-poa-price a {
  color: var(--c-brick, #8E2521) !important;
  font-size: 11px !important;
}

/* "อ่านเพิ่ม" button */
.wzd-hub-content ul.products li.product a.button {
  display: block !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--c-brick, #8E2521) !important;
  background: var(--c-bg-pink, #F9F0EE) !important;
  border: 1px solid rgba(142,37,33,0.20) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  margin-top: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.wzd-hub-content ul.products li.product a.button:hover {
  background: rgba(142,37,33,0.08) !important;
  border-color: var(--c-brick, #8E2521) !important;
}

/* "ดูสินค้าทั้งหมด →" link */
.wzd-hub-content p > a[href*="product-category"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-brick, #8E2521);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1.5px solid var(--c-brick, #8E2521);
  padding-bottom: 1px;
}

/* ── Lists ── */
.wzd-hub-content ul:not(.products) {
  padding-left: 20px !important;
  margin: 0 0 16px !important;
}
.wzd-hub-content ul:not(.products) li {
  padding: 4px 0 !important;
  font-size: 14.5px !important;
  color: var(--c-ink, #1E0A08) !important;
}

/* ── FAQ dl/dt/dd → card accordion look ── */
.wzd-hub-content dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px !important;
}
.wzd-hub-content dt {
  background: var(--c-bg-cream, #F8F5EF) !important;
  border: 1px solid var(--c-line, #DDD6CE) !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--c-ink, #1E0A08) !important;
  margin: 0 !important;
}
.wzd-hub-content dd {
  background: #fff !important;
  border: 1px solid var(--c-line-soft, #E8E0D4) !important;
  border-radius: 0 0 8px 8px !important;
  padding: 12px 16px 14px !important;
  font-size: 14px !important;
  color: var(--c-ink, #1E0A08) !important;
  line-height: 1.7 !important;
  margin: -8px 0 0 !important;
}

/* ── CTA boxes — keep the legacy red/orange quotation CTA WCAG-safe ── */
.wzd-hub-content div[style*="#b71c1c"][style*="#e65100"] {
  background: linear-gradient(135deg, #8e2521 0%, #6e1c19 100%) !important;
  color: #fff !important;
  border: 1.5px solid var(--c-brick, #8E2521) !important;
}
.wzd-hub-content div[style*="#b71c1c"][style*="#e65100"] h3,
.wzd-hub-content div[style*="#b71c1c"][style*="#e65100"] p,
.wzd-hub-content div[style*="#b71c1c"][style*="#e65100"] li {
  color: #fff !important;
  opacity: 1 !important;
}
.wzd-hub-content [style*="linear-gradient"] a[href*="เสนอราคา"] {
  display: inline-block !important;
  background: var(--c-brick, #8E2521) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.wzd-hub-content [style*="linear-gradient"] a[href*="lin.ee"] {
  display: inline-block !important;
  background: #00B900 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* "คำนวณ" callout box (not gradient) */
.wzd-hub-content [style*="c-cream"],
.wzd-hub-content [style*="#fdf8f3"] {
  background: var(--c-bg-cream, #F8F5EF) !important;
  border: 1px solid var(--c-line-soft, #E8E0D4) !important;
  border-radius: 10px !important;
}

/* ── Sidebar ── */
.wzd-hub-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }

.wzd-hub-line-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 0.5px solid var(--c-line-soft, #E8E0D4);
  border-radius: 12px;
  padding: 14px 16px;
}
.wzd-hub-line-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #00B900;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.wzd-hub-line-info { flex: 1; min-width: 0; }
.wzd-hub-line-label { font-size: 13px; font-weight: 700; color: var(--c-ink, #1E0A08); }
.wzd-hub-line-sub { font-size: 13px; color: var(--c-ink-soft, #6B6661); }
.wzd-hub-line-btn {
  font-size: 13px;
  font-weight: 700;
  color: #00B900;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid #00B900;
  border-radius: 100px;
  flex-shrink: 0;
}
.wzd-hub-line-btn:hover { background: #00B900; color: #fff; }

.wzd-hub-contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 0.5px solid var(--c-line-soft, #E8E0D4);
  border-radius: 12px;
  padding: 14px 16px;
}
.wzd-hub-contact-card .ti { color: var(--c-brick, #8E2521); font-size: 20px; flex-shrink: 0; }
.wzd-hub-contact-label { font-size: 13px; color: var(--c-ink-soft, #6B6661); }
.wzd-hub-contact-tel { font-size: 14px; font-weight: 700; color: var(--c-ink, #1E0A08); text-decoration: none; }
.wzd-hub-contact-tel:hover { color: var(--c-brick, #8E2521); }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .wzd-hub-layout { grid-template-columns: 1fr 220px; gap: 24px; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .wzd-hub-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wzd-hub-sidebar {
    position: static;
    order: -1;
  }
  .wzd-hub-sidebar .wzd-hub-line-cta,
  .wzd-hub-sidebar .wzd-hub-contact-card {
    display: none;
  }
  .wzd-hub-content ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .wzd-hub-content ul.products li.product img.attachment-woocommerce_thumbnail {
    height: 100px !important;
  }
  .wzd-hub-content h1 { font-size: 22px !important; }
  .wzd-hub-content h2 { font-size: 16px !important; margin: 28px 0 12px !important; }
}

/* ============================================================================
   UX PATCH 2026-06-25F — Hub page: Tab bar + 1:1 flush product cards (iOS26 minimal)
   ============================================================================ */

/* When tab section is present: hide the WooCommerce block in the_content() */
.wzd-hub-page--tabs .wzd-hub-content .woocommerce { display: none !important; }

/* ── Tab bar ── */
.wzd-hub-tabs-wrap { margin-bottom: 4px; }

.wzd-hub-tabs-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 14px;
}
.wzd-hub-tabs-bar::-webkit-scrollbar { display: none; }

.wzd-hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 16px;
  border: 1px solid var(--c-line, #DDD6CE);
  border-radius: 100px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-soft, #6B6661);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.wzd-hub-tab:hover {
  border-color: var(--c-brick, #8E2521);
  color: var(--c-brick, #8E2521);
}
.wzd-hub-tab.active {
  background: var(--c-brick, #8E2521);
  border-color: var(--c-brick, #8E2521);
  color: #fff;
}
.wzd-hub-tab-count {
  font-size: 13px;
  opacity: 0.65;
  font-weight: 400;
}
.wzd-hub-tab.active .wzd-hub-tab-count { opacity: 0.8; }

/* ── Product grid ── */
.wzd-hub-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* ── Product card: 1:1 image flush to edge, minimal ── */
.wzd-hub-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 0.5px solid var(--c-line-soft, #E8E0D4);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.wzd-hub-card:hover {
  box-shadow: 0 4px 16px rgba(142,37,33,0.10);
  border-color: var(--c-brick, #8E2521);
}

/* 1:1 image block — flush to all three outer edges */
.wzd-hub-card-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-cream, #F8F5EF);
  display: block;
}
.wzd-hub-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s;
}
.wzd-hub-card:hover .wzd-hub-card-img img {
  transform: scale(1.04);
}

/* No-image placeholder */
.wzd-hub-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-soft, #6B6661);
  font-size: 24px;
}

/* Info bar below image */
.wzd-hub-card-info {
  padding: 9px 11px 10px;
  border-top: 0.5px solid var(--c-line-soft, #E8E0D4);
}
.wzd-hub-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink, #1E0A08);
  line-height: 1.35;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wzd-hub-card-sku {
  font-size: 10.5px;
  color: var(--c-ink-soft, #6B6661);
  margin-bottom: 3px;
}
.wzd-hub-card-poa {
  font-size: 13px;
  color: var(--c-brick, #8E2521);
  font-weight: 500;
}

/* Tab panel */
.wzd-hub-tab-panel[hidden] { display: none; }
.wzd-hub-tab-panel.active  { display: block; }

/* ── Mobile adjustments for tabs ── */
@media (max-width: 768px) {
  .wzd-hub-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .wzd-hub-tab {
    font-size: 13px;
    padding: 6px 13px;
  }
}

/* ============================================================================
   UX PATCH 2026-06-25G — Product grid 2-row limit + show-more button
   ============================================================================ */

/* Limit grid to ~2 rows (430px ≈ 2× card height at 6-col desktop) */
.wzd-hub-prod-grid {
  max-height: 430px;
  overflow: hidden;
  position: relative;
}
/* Gradient fade hints that more cards exist below */
.wzd-hub-prod-grid:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--c-bg-page, #FAFAF8));
  pointer-events: none;
}
/* Expanded state removes all limits */
.wzd-hub-prod-grid.expanded {
  max-height: none !important;
  overflow: visible !important;
}
.wzd-hub-prod-grid.expanded::after { display: none; }

/* Show-more button */
.wzd-hub-show-more-wrap {
  text-align: center;
  margin: 10px 0 24px;
}
.wzd-hub-show-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 24px;
  border: 1px solid var(--c-brick, #8E2521);
  border-radius: 100px;
  background: #fff;
  color: var(--c-brick, #8E2521);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wzd-hub-show-more:hover {
  background: var(--c-brick, #8E2521);
  color: #fff;
}
.wzd-hub-show-more .ti {
  font-size: 14px;
}

/* WooCommerce block inside any hub content area is hidden when tabs are present */
.wzd-hub-page--tabs .woocommerce { display: none !important; }

/* ============================================================================
   MOBILE UX FIXES 2026-06-27
   ============================================================================ */

/* — 1a. Footer accordions: desktop always open, mobile collapsible — */
@media (min-width: 701px) {
  details.wzd-foot-col > ul,
  details.wzd-foot-col .wzd-foot-contact { display: block !important; }
  details.wzd-foot-col > summary { pointer-events: none; cursor: default; }
  details.wzd-foot-col > summary .wzd-foot-chev { display: none; }
}
@media (max-width: 700px) {
  details.wzd-foot-col > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    -webkit-tap-highlight-color: transparent;
  }
  details.wzd-foot-col > summary h4 { margin: 0; }
  details.wzd-foot-col > ul { padding-top: 8px; }
  .wzd-foot-chev { transition: transform 0.22s ease; }
  details.wzd-foot-col[open] .wzd-foot-chev { transform: rotate(180deg); }
  /* Footer bottom padding accounts for bottomnav bar */
  .wzd-foot { padding-bottom: 88px; }
}

/* — 1b. Footer CTA banner: fix overflow on narrow screens — */
@media (max-width: 480px) {
  .wzd-foot-cta-inner { gap: 14px; }
  .wzd-foot-cta-text strong { font-size: 15px; }
  .wzd-foot-cta-text span { font-size: 12.5px; }
  .wzd-foot-cta-btns { flex-direction: column; width: 100%; gap: 8px; }
  .wzd-foot-cta-btn-primary,
  .wzd-foot-cta-btn-line { justify-content: center; padding: 11px 14px; }
}

/* — 2. Share box: compact 4-in-a-row on mobile — */
@media (max-width: 768px) {
  .wzd-art-share { padding: 14px 14px; }
  .wzd-art-share-buttons {
    display: flex;
    gap: 6px;
  }
  .wzd-share-btn {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 9px 4px;
    font-size: 10.5px;
    border-radius: 10px;
    white-space: nowrap;
    min-width: 0;
  }
  .wzd-share-btn i { font-size: 19px; flex-shrink: 0; }
  .wzd-share-btn span { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* — 3. Article content readability on mobile — */
@media (max-width: 768px) {
  .wzd-art-body {
    font-size: 15.5px;
    line-height: 1.88;
  }
  .wzd-art-body p { margin-bottom: 1.25em; }
  /* Headings: clearer visual separation */
  .wzd-art-body h2 {
    font-size: 18px;
    border-bottom: 2px solid rgba(142,37,33,0.14);
    padding-bottom: 6px;
    margin-bottom: 0.7em;
  }
  .wzd-art-body h3 {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 0.45em;
  }
  /* Formula / calculation highlight: p containing only strong */
  .wzd-art-body p:has(> strong:only-child),
  .wzd-art-body p.wdc-formula {
    background: rgba(142,37,33,0.05);
    border-left: 3px solid var(--c-brick, #8E2521);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin: 1em 0;
    font-size: 14.5px;
  }
  /* Example / calculation callout */
  .wzd-art-body .wdc-example,
  .wzd-art-body blockquote {
    background: var(--c-bg-cream, #FAF6F0);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 1.2em 0;
    border: 1px solid var(--c-line-soft, #E8E4DF);
    font-size: 14.5px;
  }
  /* Lists */
  .wzd-art-body ul, .wzd-art-body ol {
    padding-left: 18px;
    margin-bottom: 1.2em;
  }
  .wzd-art-body li { margin-bottom: 0.45em; }
  /* Tables: horizontal scroll */
  .wzd-art-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
}

/* — 4a. Sticky CTA: push above bottomnav on single post pages — */
@media (max-width: 700px) {
  .single.single-post .wdc-sticky-cta {
    bottom: 58px !important;
    z-index: 910;
  }
}

/* — 4b. Back-to-top: avoid overlapping cookie FAB (now on left) and sticky-cta — */
@media (max-width: 768px) {
  .wdc-back-top {
    right: 14px;
    bottom: 90px;
  }
}
@media (max-width: 700px) {
  .single.single-post .wdc-back-top {
    bottom: 168px !important;
  }
}

/* ============================================================================
   MOBILE UX FIXES ROUND 2 — 2026-06-27
   ============================================================================ */

/* — 1. Footer: force 1-column + proper spacing on mobile — */
@media (max-width: 700px) {
  .wzd-foot-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }
  /* Remove brand-col full-span override so it just flows naturally */
  .wzd-foot-brand-col { grid-column: auto !important; padding-bottom: 20px; border-bottom: 1px solid var(--c-line-soft, #e8e4df); margin-bottom: 0; }
  /* Accordion cols: divider between sections */
  details.wzd-foot-col { border-bottom: 1px solid var(--c-line-soft, #e8e4df); }
  details.wzd-foot-col:last-of-type { border-bottom: none; }
  /* Contact card: divider on top */
  .wzd-foot-contact-card { padding: 16px 0 20px !important; border-bottom: none !important; border-top: 1px solid var(--c-line-soft, #e8e4df); }
  /* Show chevron on mobile */
  .wzd-foot-chev { display: inline-flex !important; }
  /* about text: full width */
  .wzd-foot-about { max-width: 100% !important; font-size: 13.5px; }
  /* social icons row: add bottom spacing */
  .wzd-foot-social { margin-bottom: 4px; }
  /* footer bottom copyright */
  .wzd-foot-bottom { padding: 14px 0 10px; font-size: 12px; }
}

/* — 2. Related articles sidebar: larger thumbnails — */
.wzd-side-related-img {
  width: 76px !important;
  height: 58px !important;
  border-radius: 6px !important;
}
.wzd-side-related-link { gap: 12px; }
.wzd-side-related-title { font-size: 13px !important; }

/* — 3. Article body content: improved readability — */
@media (max-width: 768px) {
  /* Container: ensure proper padding */
  article.wzd-art-body {
    padding: 0;
    font-size: 15.5px;
    line-height: 1.9;
  }
  /* Paragraph spacing: tighter for content-dense articles */
  article.wzd-art-body > p {
    margin-bottom: 1em;
  }
  /* h2: visual section separator */
  article.wzd-art-body > h2 {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(142,37,33,0.15);
    margin: 1.8em 0 0.6em;
  }
  article.wzd-art-body > h2:first-child { margin-top: 0; }
  /* h3: subtle highlight */
  article.wzd-art-body > h3 {
    font-size: 15.5px;
    font-weight: 700;
    background: rgba(142,37,33,0.04);
    border-left: 3px solid var(--c-brick, #8E2521);
    padding: 7px 12px;
    border-radius: 0 6px 6px 0;
    margin: 1.4em 0 0.5em;
  }
  /* Paragraphs after h3: indent slightly */
  article.wzd-art-body > h3 + p { margin-top: 0.3em; }
  /* Lists: add proper spacing */
  article.wzd-art-body ul,
  article.wzd-art-body ol { padding-left: 20px; margin-bottom: 1em; }
  article.wzd-art-body li { margin-bottom: 0.5em; line-height: 1.75; }
  /* Images: full width */
  article.wzd-art-body img { max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 1.2em 0; }
  /* Strong: visual highlight */
  article.wzd-art-body strong { color: var(--c-brick, #8E2521); font-weight: 700; }
}

/* — 4. Tables in posts: full-width + horizontal scroll — */
@media (max-width: 768px) {
  /* Any table inside article body */
  article.wzd-art-body table,
  .wzd-art-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13.5px;
  }
  article.wzd-art-body .wdc-table-wrapper {
    margin-left: calc(-1 * var(--pad-x, 18px));
    margin-right: calc(-1 * var(--pad-x, 18px));
    border-radius: 0;
  }
  /* wdc-table: fix font and padding on small screens */
  article.wzd-art-body .wdc-table th,
  .wdc-table th { padding: 10px 12px; font-size: 13px; }
  article.wzd-art-body .wdc-table td,
  .wdc-table td { padding: 9px 12px; font-size: 13px; }
}

/* — Footer: restore horizontal padding lost by grid padding shorthand — */
.wzd-foot-grid {
  padding-left: var(--pad-x, 20px) !important;
  padding-right: var(--pad-x, 20px) !important;
}
/* Footer CTA inner: same fix (should already use container but be safe) */
.wzd-foot-cta-inner {
  padding-left: var(--pad-x, 20px);
  padding-right: var(--pad-x, 20px);
}
.wzd-foot-bottom.wzd-container {
  padding-left: var(--pad-x, 20px) !important;
  padding-right: var(--pad-x, 20px) !important;
}

/* — Footer: restore horizontal padding (high-specificity override) — */
.wzd-foot.wzd-foot .wzd-foot-grid {
  padding-left: var(--pad-x, 20px) !important;
  padding-right: var(--pad-x, 20px) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   iOS26 FOOTER MOBILE — COMPLETE REDESIGN
   2026-06-27
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 700px) {

  /* ── Shell ── */
  .wzd-foot {
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    padding-bottom: 112px !important;
  }

  /* ── CTA Banner → compact pill row ── */
  .wzd-foot-cta {
    padding: 20px 0 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .wzd-foot-cta-inner {
    padding: 0 20px !important;
    display: block !important;
  }
  .wzd-foot-cta-text { display: none !important; }
  .wzd-foot-cta-btns {
    display: flex !important;
    gap: 10px !important;
  }
  .wzd-foot-cta-btn-primary,
  .wzd-foot-cta-btn-line {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 13px 8px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
  }
  .wzd-foot-cta-btn-primary {
    background: #8E2521 !important;
    color: #fff !important;
    border: none !important;
  }
  .wzd-foot-cta-btn-line {
    background: #06C755 !important;
    color: #fff !important;
    border: none !important;
  }

  /* ── Grid → flex column ── */
  .wzd-foot.wzd-foot .wzd-foot-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* ── Brand section ── */
  .wzd-foot.wzd-foot .wzd-foot-brand-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 22px 20px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    grid-column: auto !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }
  .wzd-foot-brand-main { font-size: 17px !important; }
  .wzd-foot-brand-t small {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 2px !important;
  }
  .wzd-foot-about {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #888 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* Hide "ทำไมราคา" link — saves vertical space on mobile */
  .wzd-foot-brand-col > a[href*="%E0%B8%A3%E0%B8%B2%E0%B8%84%E0%B8%B2"],
  .wzd-foot-brand-col > a[href*="ราคาโรงงาน"] {
    display: none !important;
  }
  /* Social icons */
  .wzd-foot.wzd-foot .wzd-foot-social {
    display: flex !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-social a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
  }

  /* ── Accordion menus (iOS table-row style) ── */
  .wzd-foot.wzd-foot details.wzd-foot-col {
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    padding: 0 !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    min-height: 54px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > summary::-webkit-details-marker { display: none !important; }
  .wzd-foot.wzd-foot details.wzd-foot-col > summary h4 {
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: -0.015em !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-chev {
    display: inline-flex !important;
    font-size: 17px !important;
    color: #bbb !important;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1) !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col[open] .wzd-foot-chev {
    transform: rotate(180deg) !important;
  }
  /* Link grid: 2 columns for main menu, 1 for policy */
  .wzd-foot.wzd-foot details.wzd-foot-col > ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 4px 20px 18px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col.wzd-foot-col--policy > ul {
    grid-template-columns: 1fr !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > ul li a {
    display: block !important;
    padding: 9px 0 !important;
    font-size: 14px !important;
    color: #555 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
  }

  /* ── Contact card ── */
  .wzd-foot.wzd-foot .wzd-foot-contact-card {
    padding: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    grid-column: auto !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-card h4 {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.015em !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact li:last-child { border-bottom: none !important; }
  .wzd-foot.wzd-foot .wzd-foot-contact-ic {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: rgba(142,37,33,0.09) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    color: #8E2521 !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-ic--line {
    background: rgba(6,199,85,0.1) !important;
    color: #06C755 !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-label {
    font-size: 11.5px !important;
    color: #aaa !important;
    display: block !important;
    letter-spacing: 0.01em !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-value {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #111 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
  }

  /* ── Copyright bar ── */
  .wzd-foot-bottom.wzd-container {
    padding: 14px 20px !important;
    text-align: center !important;
  }
  .wzd-foot-copy {
    font-size: 11.5px !important;
    color: #ccc !important;
    display: block !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
  }
}

/* iOS26 footer — accordion & contact full-width fix */
@media (max-width: 700px) {
  .wzd-foot.wzd-foot details.wzd-foot-col {
    width: 100% !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-contact-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-brand-col {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Summary must span full width for space-between to work */
  .wzd-foot.wzd-foot details.wzd-foot-col > summary {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* iOS26 footer — CTA banner mobile override (high-specificity) */
@media (max-width: 700px) {
  .wzd-foot.wzd-foot .wzd-foot-cta {
    background: transparent !important;
    padding: 20px 0 0 !important;
    border: none !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-cta-inner {
    display: block !important;
    padding: 0 20px !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-cta-text { display: none !important; }
  .wzd-foot.wzd-foot .wzd-foot-cta-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    flex-shrink: unset !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-cta-btn-primary {
    flex: 1 !important;
    justify-content: center !important;
    background: #8E2521 !important;
    color: #fff !important;
    padding: 13px 8px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: none !important;
    letter-spacing: -0.01em !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-cta-btn-line {
    flex: 1 !important;
    justify-content: center !important;
    background: #06C755 !important;
    color: #fff !important;
    padding: 13px 8px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: none !important;
    letter-spacing: -0.01em !important;
  }
}

/* ━━━━ iOS26 FOOTER — UX FIX v3 2026-06-27 ━━━━
   Fix: red border, link layout balance, font size */
@media (max-width: 700px) {

  /* ── Remove iOS tap highlight & focus border ── */
  .wzd-foot.wzd-foot details.wzd-foot-col > summary,
  .wzd-foot.wzd-foot details.wzd-foot-col > summary:focus,
  .wzd-foot.wzd-foot details.wzd-foot-col > summary:focus-visible,
  .wzd-foot.wzd-foot details.wzd-foot-col > summary:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    border: none !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col[open] {
    border: none !important;
    outline: none !important;
  }
  /* Use only bottom border as separator */
  .wzd-foot.wzd-foot details.wzd-foot-col {
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── Summary row: increase tap area + clean layout ── */
  .wzd-foot.wzd-foot details.wzd-foot-col > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    min-height: 54px !important;
    margin: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    list-style: none !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col[open] > summary {
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > summary h4 {
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: -0.015em !important;
  }
  /* Policy: keep red label */
  .wzd-foot.wzd-foot details.wzd-foot-col.wzd-foot-col--policy > summary h4 {
    color: #8E2521 !important;
  }

  /* ── Links: SINGLE column, balanced both sides ── */
  .wzd-foot.wzd-foot details.wzd-foot-col > ul {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 12px !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > ul li {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  .wzd-foot.wzd-foot details.wzd-foot-col > ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 20px !important;
    font-size: 14.5px !important;
    color: #444 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Subtle right arrow for each link */
  .wzd-foot.wzd-foot details.wzd-foot-col > ul li a::after {
    content: '›' !important;
    font-size: 18px !important;
    color: #ccc !important;
    flex-shrink: 0 !important;
    font-weight: 300 !important;
  }
}

/* ============================================================================
   iOS26 UI PATCH 2026-06-30 — Category Hub page polish
   Page: /กระเบื้องดินเผา-พื้น-ผนัง-2/ (and all .wzd-hub-page)
   ============================================================================ */

/* ── 1. Breadcrumb topbar: glass material ── */
.wzd-hub-page .wzd-hub-topbar {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  padding: 10px 0;
}

/* ── 2. H1: larger, tighter, with subtle accent ── */
.wzd-hub-page .wzd-hub-content > h1,
.wzd-hub-page .wzd-hub-content h1 {
  font-size: clamp(28px, 4.2vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  margin: 8px 0 14px !important;
  color: var(--c-ink, #1E0A08) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
}
.wzd-hub-page .wzd-hub-content > h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
  border-radius: 100px;
  margin-top: 14px;
}

/* ── 3. Intro paragraph polish ── */
.wzd-hub-page .wzd-hub-content > h1 + p {
  font-size: clamp(15px, 1.4vw, 16.5px) !important;
  line-height: 1.7 !important;
  color: var(--c-ink-soft, #4B4541) !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.005em;
}

/* ── 4. H2: cleaner with accent dot ── */
.wzd-hub-page .wzd-hub-content h2 {
  font-size: clamp(20px, 2vw, 24px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  margin: 36px 0 16px !important;
  color: var(--c-ink, #1E0A08) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wzd-hub-page .wzd-hub-content h2::before {
  content: '';
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
  flex-shrink: 0;
}

/* ── 5. Tab bar: SF segmented control ── */
.wzd-hub-page .wzd-hub-tabs-bar {
  background: rgba(120, 110, 100, 0.08);
  padding: 4px;
  border-radius: 12px;
  gap: 2px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.wzd-hub-page .wzd-hub-tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink-soft, #4B4541);
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s;
  min-height: 36px;
}
.wzd-hub-page .wzd-hub-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-brick, #8E2521);
  border-color: transparent;
}
.wzd-hub-page .wzd-hub-tab.active {
  background: #fff;
  color: var(--c-ink, #1E0A08);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
              0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transform: scale(1.0);
}
.wzd-hub-page .wzd-hub-tab:active { transform: scale(0.96); }
.wzd-hub-page .wzd-hub-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-soft, #6B6661);
  opacity: 1;
}
.wzd-hub-page .wzd-hub-tab.active .wzd-hub-tab-count {
  background: var(--c-brick, #8E2521);
  color: #fff;
  opacity: 1;
}

/* ── 6. Product grid: tighter spacing on desktop, 3-col mobile ── */
.wzd-hub-page .wzd-hub-prod-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  max-height: 540px;
}
.wzd-hub-page .wzd-hub-prod-grid:not(.expanded)::after {
  height: 110px;
}

/* ── 7. Product card: iOS26 rounded with soft layered shadow ── */
.wzd-hub-page .wzd-hub-card {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wzd-hub-page .wzd-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(142, 37, 33, 0.12),
              0 2px 6px rgba(0, 0, 0, 0.06),
              0 0 0 0.5px rgba(142, 37, 33, 0.18);
  border-color: transparent;
}
.wzd-hub-page .wzd-hub-card:active { transform: translateY(-1px) scale(0.99); }
.wzd-hub-page .wzd-hub-card-img {
  border-radius: 17px 17px 0 0;
  padding: 10px 10px 0;
}
.wzd-hub-page .wzd-hub-card-img img {
  object-fit: contain;
  border-radius: 8px 8px 0 0;
}
.wzd-hub-page .wzd-hub-card-info {
  padding: 11px 13px 13px;
  border-top: 0;
}
.wzd-hub-page .wzd-hub-card-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.wzd-hub-page .wzd-hub-card-sku {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.wzd-hub-page .wzd-hub-card-dim {
  font-size: 13px;
  color: var(--c-gray, #B7ACA3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.wzd-hub-page .wzd-hub-card-poa {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.wzd-hub-card-usage-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  background: rgba(30, 10, 8, 0.68);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* ── 8. Show-more button: iOS pill ── */
.wzd-hub-page .wzd-hub-show-more {
  background: rgba(142, 37, 33, 0.08);
  border-color: transparent;
  padding: 11px 28px;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  transition: background 0.18s, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wzd-hub-page .wzd-hub-show-more:hover {
  background: var(--c-brick, #8E2521);
  color: #fff;
  transform: translateY(-1px);
}
.wzd-hub-page .wzd-hub-show-more:active { transform: scale(0.97); }

/* ── 9. Types & tips lists: card-style ── */
.wzd-hub-page .wzd-hub-content ul.wzd-hub-types,
.wzd-hub-page .wzd-hub-content ul.wzd-hub-tips,
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 8px;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-types li,
.wzd-hub-page .wzd-hub-content ul.wzd-hub-tips li {
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px 14px 44px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink, #1E0A08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-types li::before {
  content: '';
  position: absolute;
  left: 16px; top: 18px;
  width: 16px; height: 16px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-tips li::before {
  content: '✓';
  position: absolute;
  left: 14px; top: 13px;
  width: 22px; height: 22px;
  border-radius: 100px;
  background: rgba(34, 139, 34, 0.12);
  color: #16803c;
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-types li strong {
  color: var(--c-brick, #8E2521);
  font-weight: 700;
}

.wzd-hub-page .wzd-hub-content ul.wzd-hub-related {
  margin-top: 12px;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related li {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  list-style: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related li::before { display: none; }
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  color: var(--c-ink, #1E0A08);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: background 0.15s;
  min-height: 48px;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related li a::after {
  content: '›';
  color: var(--c-ink-soft, #B0A89F);
  font-size: 22px;
  font-weight: 300;
  margin-left: 12px;
}
.wzd-hub-page .wzd-hub-content ul.wzd-hub-related li a:hover {
  background: rgba(142, 37, 33, 0.04);
  color: var(--c-brick, #8E2521);
}

/* ── 10. Calculator CTA: glass material ── */
.wzd-hub-page .wzd-hub-content .wzd-hub-calc {
  background: linear-gradient(135deg, rgba(255, 248, 240, 0.95), rgba(253, 240, 230, 0.95));
  border: 0;
  border-radius: 20px;
  padding: 22px 24px;
  margin: 28px 0;
  box-shadow: 0 1px 2px rgba(180, 80, 40, 0.06),
              0 0 0 0.5px rgba(180, 80, 40, 0.12);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-t {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-brick, #8E2521);
  letter-spacing: -0.01em;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-s {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--c-ink-soft, #4B4541);
  line-height: 1.6;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brick, #8E2521);
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14.5px;
  min-height: 44px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, background 0.18s;
  box-shadow: 0 1px 2px rgba(142, 37, 33, 0.2),
              0 4px 12px rgba(142, 37, 33, 0.15);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(142, 37, 33, 0.25),
              0 8px 24px rgba(142, 37, 33, 0.25);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-btn:active { transform: scale(0.97); }
.wzd-hub-page .wzd-hub-content .wzd-hub-calc-btn i { font-size: 18px; }

/* ── 11. Quote CTA: dark gradient hero ── */
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta {
  background: linear-gradient(135deg, #8E2521 0%, #B53A1C 50%, #D14318 100%);
  border-radius: 24px;
  padding: 28px 28px 26px;
  margin: 32px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(142, 37, 33, 0.22);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-t {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  position: relative;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-s {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  position: relative;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  position: relative;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-list li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 22px !important;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  min-height: auto;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-list li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 16px !important; height: 16px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary,
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14.5px;
  min-height: 46px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary {
  background: #fff;
  color: var(--c-brick, #8E2521);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line {
  background: #06C755;
  color: #fff;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.35);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary:hover,
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line:hover {
  transform: translateY(-2px);
}
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary:active,
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line:active { transform: scale(0.97); }
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary i,
.wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line i { font-size: 18px; }

/* ── 12. FAQ list: iOS grouped list ── */
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq {
  background: #fff;
  border-radius: 16px;
  padding: 4px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
  margin: 0 0 28px;
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dt {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-ink, #1E0A08);
  padding: 16px 20px 6px;
  margin: 0;
  letter-spacing: -0.005em;
  background: transparent;
  border: 0;
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dt::before {
  content: 'Q.';
  display: inline-block;
  margin-right: 8px;
  color: var(--c-brick, #8E2521);
  font-weight: 800;
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dd {
  margin: 0 !important;
  padding: 0 20px 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-soft, #4B4541);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dd:last-child {
  border-bottom: 0;
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dd a {
  color: var(--c-brick, #8E2521);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(142, 37, 33, 0.4);
}
.wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dd a:hover {
  border-bottom-style: solid;
}

/* ── 13. Sidebar: glass quote card + layered shadow ── */
.wzd-hub-page .wzd-hub-sidebar .wzd-qbox {
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(142, 37, 33, 0.18),
              0 1px 2px rgba(0, 0, 0, 0.06);
}
.wzd-hub-page .wzd-hub-sidebar .wzd-qbox-btn {
  border-radius: 100px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
}
.wzd-hub-page .wzd-hub-sidebar .wzd-qbox-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.wzd-hub-page .wzd-hub-sidebar .wzd-qbox-btn:active { transform: scale(0.97); }

.wzd-hub-page .wzd-hub-sidebar .wzd-hub-line-cta {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.wzd-hub-page .wzd-hub-sidebar .wzd-hub-line-btn {
  border-radius: 100px;
  min-height: 36px;
  font-weight: 700;
}
.wzd-hub-page .wzd-hub-sidebar .wzd-hub-contact-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

/* ── 14. Mobile sticky bottom CTA bar ── */
.wzd-hub-page .wzd-hub-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}
.wzd-hub-page .wzd-hub-sticky-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  min-height: 46px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wzd-hub-page .wzd-hub-sticky-cta-quote {
  background: var(--c-brick, #8E2521);
  color: #fff;
  box-shadow: 0 2px 8px rgba(142, 37, 33, 0.3);
}
.wzd-hub-page .wzd-hub-sticky-cta-line {
  background: #06C755;
  color: #fff;
  box-shadow: 0 2px 8px rgba(6, 199, 85, 0.3);
}
.wzd-hub-page .wzd-hub-sticky-cta-call {
  background: #fff;
  color: var(--c-ink, #1E0A08);
  border: 0.5px solid rgba(0, 0, 0, 0.12);
}
.wzd-hub-page .wzd-hub-sticky-cta a:active { transform: scale(0.96); }

/* ── 15. Responsive: mobile tightening ── */
@media (max-width: 768px) {
  .wzd-hub-page .wzd-hub-section { padding-top: 16px; padding-bottom: 96px; }
  .wzd-hub-page .wzd-hub-content > h1 { font-size: 26px !important; }
  .wzd-hub-page .wzd-hub-content h2 { font-size: 18.5px !important; margin: 28px 0 12px !important; }
  .wzd-hub-page .wzd-hub-content .wzd-hub-quotecta { padding: 22px 20px; border-radius: 20px; }
  .wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-t { font-size: 18px; }
  .wzd-hub-page .wzd-hub-content .wzd-hub-calc { padding: 18px 18px; border-radius: 18px; }
  .wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dt { font-size: 14.5px; padding: 14px 16px 4px; }
  .wzd-hub-page .wzd-hub-content dl.wzd-hub-faq dd { padding: 0 16px 14px; font-size: 13.5px; }
  .wzd-hub-page .wzd-hub-content ul.wzd-hub-types li,
  .wzd-hub-page .wzd-hub-content ul.wzd-hub-tips li { font-size: 13.5px; padding: 12px 14px 12px 38px; }
  .wzd-hub-page .wzd-hub-content ul.wzd-hub-related li a { font-size: 13.5px; padding: 12px 14px; }
  .wzd-hub-page .wzd-hub-tab { padding: 8px 14px; font-size: 13px; }
  .wzd-hub-page .wzd-hub-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 700px;
  }
}

/* ── 16. Reduced motion — respect OS preference ── */
@media (prefers-reduced-motion: reduce) {
  .wzd-hub-page .wzd-hub-card,
  .wzd-hub-page .wzd-hub-tab,
  .wzd-hub-page .wzd-hub-show-more,
  .wzd-hub-page .wzd-hub-content .wzd-hub-calc-btn,
  .wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-primary,
  .wzd-hub-page .wzd-hub-content .wzd-hub-quotecta-btn-line,
  .wzd-hub-page .wzd-hub-sidebar .wzd-qbox-btn { transition: none !important; }
  .wzd-hub-page .wzd-hub-card:hover { transform: none; }
  .wzd-hub-page .wzd-hub-card-img img { transition: none; }
  .wzd-hub-page .wzd-hub-card:hover .wzd-hub-card-img img { transform: none; }
}

/* ── 17. Focus-visible (keyboard a11y) ── */
.wzd-hub-page .wzd-hub-tab:focus-visible,
.wzd-hub-page .wzd-hub-card:focus-visible,
.wzd-hub-page .wzd-hub-show-more:focus-visible,
.wzd-hub-page .wzd-hub-content a:focus-visible,
.wzd-hub-page .wzd-hub-sidebar a:focus-visible {
  outline: 2px solid var(--c-brick, #8E2521);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ============================================================================
   iOS26 UI PATCH 2026-06-30 — Article (single.php) polish
   ============================================================================ */

/* ── 1. Article H2 with gradient accent stripe ── */
.single .wzd-art-body h2 {
  position: relative;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.3 !important;
  margin: 2em 0 0.6em !important;
  padding-left: 16px !important;
  color: var(--c-ink, #1E0A08) !important;
  border-bottom: 0 !important;
  scroll-margin-top: 80px;
}
.single .wzd-art-body h2::before {
  content: '';
  position: absolute;
  left: 0; top: 0.18em; bottom: 0.18em;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
}
.single .wzd-art-body h3 {
  font-size: clamp(16.5px, 1.6vw, 19px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  margin: 1.6em 0 0.5em !important;
  scroll-margin-top: 80px;
}

/* ── 2. TOC: iOS26 grouped list ── */
.single .wzd-art-body .wzd-art-toc {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 240, 230, 0.96));
  border: 0;
  border-radius: 18px;
  padding: 18px 22px 18px;
  margin: 24px 0 32px;
  box-shadow: 0 1px 2px rgba(180, 80, 40, 0.05),
              0 0 0 0.5px rgba(180, 80, 40, 0.10);
}
.single .wzd-art-body .wzd-art-toc-head {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-brick, #8E2521);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.single .wzd-art-body .wzd-art-toc-head i { font-size: 18px; }
.single .wzd-art-body ol.wzd-art-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 14px;
}
.single .wzd-art-body ol.wzd-art-toc-list li {
  counter-increment: toc;
  padding: 0;
  margin: 0;
  list-style: none;
}
.single .wzd-art-body ol.wzd-art-toc-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--c-ink, #1E0A08);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border: 0;
  transition: background 0.15s;
}
.single .wzd-art-body ol.wzd-art-toc-list li a::before {
  content: counter(toc);
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(142, 37, 33, 0.12);
  color: var(--c-brick, #8E2521);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.single .wzd-art-body ol.wzd-art-toc-list li a:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--c-brick, #8E2521);
}

/* ── 3. Tables: iOS26 zebra + sticky header + scrollable ── */
.single .wzd-art-body .wdc-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  margin: 20px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
  border: 0 !important;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table thead th {
  background: linear-gradient(180deg, #fff, #fbf6ef);
  font-weight: 700;
  font-size: 12.5px;
  text-align: left;
  padding: 12px 14px;
  color: var(--c-ink, #1E0A08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-right: 0 !important;
  position: sticky;
  top: 0;
  letter-spacing: -0.005em;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table td {
  padding: 11px 14px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  border-right: 0 !important;
  color: var(--c-ink, #1E0A08);
  line-height: 1.55;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table tr:last-child td {
  border-bottom: 0 !important;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table tr:hover td {
  background: rgba(142, 37, 33, 0.04);
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table td[colspan] {
  background: rgba(142, 37, 33, 0.06) !important;
  color: var(--c-brick, #8E2521);
  font-weight: 700;
  font-size: 13px;
}
.single .wzd-art-body .wdc-table-wrapper table.wdc-table td a {
  color: var(--c-brick, #8E2521);
  font-weight: 600;
  border-bottom: 1px dashed rgba(142, 37, 33, 0.4);
  text-decoration: none;
}

/* ── 4. Source line (small italic) ── */
.single .wzd-art-body p.wzd-art-source {
  font-size: 12.5px;
  color: var(--c-ink-soft, #6B6661);
  font-style: italic;
  margin: -8px 0 18px;
}

/* ── 5. Note callout ── */
.single .wzd-art-body .wzd-art-note {
  background: linear-gradient(135deg, rgba(255, 235, 200, 0.5), rgba(255, 250, 240, 0.7));
  border-left: 4px solid var(--c-orange, #E65100);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 22px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink, #1E0A08);
}
.single .wzd-art-body .wzd-art-note strong {
  color: var(--c-brick, #8E2521);
}

/* ── 6. Download card (PDF) ── */
.single .wzd-art-body .wzd-art-download {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  margin: 28px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
  scroll-margin-top: 80px;
}
.single .wzd-art-body .wzd-art-download-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #DC2626, #9F1239);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.single .wzd-art-body .wzd-art-download-info { flex: 1; min-width: 200px; }
.single .wzd-art-body .wzd-art-download-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink, #1E0A08);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.single .wzd-art-body .wzd-art-download-sub {
  font-size: 13px;
  color: var(--c-ink-soft, #6B6661);
}
.single .wzd-art-body .wzd-art-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brick, #8E2521);
  color: #fff !important;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 100px;
  text-decoration: none !important;
  font-size: 14px;
  border: 0 !important;
  min-height: 44px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(142, 37, 33, 0.25);
}
.single .wzd-art-body .wzd-art-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(142, 37, 33, 0.35);
  color: #fff !important;
}
.single .wzd-art-body .wzd-art-download-btn:active { transform: scale(0.97); }
.single .wzd-art-body .wzd-art-download-btn i { font-size: 18px; }

/* ── 7. FAQ iOS grouped list ── */
.single .wzd-art-body dl.wzd-art-faq {
  background: #fff;
  border-radius: 16px;
  padding: 4px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 0 0 0.5px rgba(0, 0, 0, 0.08);
  margin: 0 0 28px;
}
.single .wzd-art-body dl.wzd-art-faq dt {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-ink, #1E0A08);
  padding: 16px 20px 6px;
  margin: 0;
  letter-spacing: -0.005em;
  border: 0;
  background: transparent;
}
.single .wzd-art-body dl.wzd-art-faq dt::before {
  content: 'Q.';
  display: inline-block;
  margin-right: 8px;
  color: var(--c-brick, #8E2521);
  font-weight: 800;
}
.single .wzd-art-body dl.wzd-art-faq dd {
  margin: 0 !important;
  padding: 0 20px 16px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink-soft, #4B4541);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.single .wzd-art-body dl.wzd-art-faq dd:last-child {
  border-bottom: 0;
}

/* ── 8. List items: tighter + better leading ── */
.single .wzd-art-body > ul {
  background: transparent;
  padding: 0 0 0 24px;
  margin: 0 0 22px;
}
.single .wzd-art-body > ul li {
  margin: 0 0 8px;
  line-height: 1.75;
  font-size: 15px;
}
.single .wzd-art-body > ul li strong {
  color: var(--c-ink, #1E0A08);
  font-weight: 700;
}

/* ── 9. Article figures: rounded, soft shadow ── */
.single .wzd-art-body figure.wdc-article-img {
  border-radius: 18px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06),
              0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.single .wzd-art-body figure.wdc-article-img img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
  transition: transform 0.4s ease;
}
.single .wzd-art-body figure.wdc-article-img:hover img {
  transform: scale(1.02);
}

/* ── 10. Mobile tweaks ── */
@media (max-width: 768px) {
  .single .wzd-art-body h2 {
    font-size: 19px !important;
    margin: 1.6em 0 0.5em !important;
    padding-left: 12px !important;
  }
  .single .wzd-art-body h2::before { width: 4px; }
  .single .wzd-art-body h3 { font-size: 16px !important; }
  .single .wzd-art-body .wzd-art-toc { padding: 14px 16px; border-radius: 14px; }
  .single .wzd-art-body ol.wzd-art-toc-list { grid-template-columns: 1fr; }
  .single .wzd-art-body .wdc-table-wrapper table.wdc-table { font-size: 12.5px; min-width: 460px; }
  .single .wzd-art-body .wzd-art-download { padding: 14px 16px; border-radius: 14px; }
  .single .wzd-art-body .wzd-art-download-btn { width: 100%; justify-content: center; }
  .single .wzd-art-body dl.wzd-art-faq dt { font-size: 14.5px; padding: 14px 16px 4px; }
  .single .wzd-art-body dl.wzd-art-faq dd { padding: 0 16px 14px; font-size: 13.5px; }
  .single .wzd-art-body figure.wdc-article-img { border-radius: 14px; margin: 22px 0; }
  .single .wzd-art-body .wzd-art-note { padding: 12px 14px; font-size: 13.5px; }
}

/* ── 11. Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .single .wzd-art-body figure.wdc-article-img img,
  .single .wzd-art-body .wzd-art-download-btn { transition: none !important; }
  .single .wzd-art-body figure.wdc-article-img:hover img { transform: none; }
}

/* ============================================================================
   iOS26 UI PATCH 2026-06-30b — Hub page (page-category-hub.php)
   Mirrors article polish for category-hub content
   ============================================================================ */
.wzd-hub-page .wzd-art-body h1 {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin: 0 0 0.5em !important;
  color: var(--c-ink, #1E0A08) !important;
}
.wzd-hub-page .wzd-art-body h2 {
  position: relative;
  font-size: clamp(19px, 1.9vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.3 !important;
  margin: 2em 0 0.6em !important;
  padding-left: 16px !important;
  color: var(--c-ink, #1E0A08) !important;
  border-bottom: 0 !important;
}
.wzd-hub-page .wzd-art-body h2::before {
  content: '';
  position: absolute;
  left: 0; top: 0.18em; bottom: 0.18em;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
}
.wzd-hub-page .wzd-art-body > ul {
  background: transparent;
  padding: 0 0 0 24px;
  margin: 0 0 22px;
}
.wzd-hub-page .wzd-art-body > ul li {
  margin: 0 0 8px;
  line-height: 1.75;
  font-size: 15px;
}
.wzd-hub-page .wzd-art-body > ul li strong { color: var(--c-ink, #1E0A08); font-weight: 700; }

/* Calculator CTA card (replaces old inline-style div) */
.wzd-hub-page .wzd-art-calc-cta,
.wzd-art-calc-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 240, 230, 0.96));
  border-radius: 18px;
  padding: 16px 20px;
  margin: 24px 0;
  box-shadow: 0 1px 2px rgba(180, 80, 40, 0.05),
              0 0 0 0.5px rgba(180, 80, 40, 0.10);
  flex-wrap: wrap;
}
.wzd-art-calc-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-brick, #8E2521), var(--c-orange, #E65100));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.wzd-art-calc-info { flex: 1; min-width: 200px; }
.wzd-art-calc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink, #1E0A08);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.wzd-art-calc-sub {
  font-size: 13px;
  color: var(--c-ink-soft, #6B6661);
  line-height: 1.5;
}
.wzd-art-calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brick, #8E2521);
  color: #fff !important;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 100px;
  text-decoration: none !important;
  font-size: 14px;
  border: 0 !important;
  min-height: 44px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(142, 37, 33, 0.25);
  flex-direction: row-reverse;
}
.wzd-art-calc-btn i { font-size: 16px; }
.wzd-art-calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(142, 37, 33, 0.35);
  color: #fff !important;
}
.wzd-art-calc-btn:active { transform: scale(0.97); }

/* FAQ iOS grouped list for hub */
.wzd-hub-page .wzd-art-body dl.wzd-art-faq {
  background: #fff;
  border-radius: 16px;
  padding: 4px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
              0 0 0 0.5px rgba(0, 0, 0, 0.08);
  margin: 0 0 28px;
}
.wzd-hub-page .wzd-art-body dl.wzd-art-faq dt {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-ink, #1E0A08);
  padding: 16px 20px 6px;
  margin: 0;
  letter-spacing: -0.005em;
  border: 0;
  background: transparent;
}
.wzd-hub-page .wzd-art-body dl.wzd-art-faq dt::before {
  content: 'Q.';
  display: inline-block;
  margin-right: 8px;
  color: var(--c-brick, #8E2521);
  font-weight: 800;
}
.wzd-hub-page .wzd-art-body dl.wzd-art-faq dd {
  margin: 0 !important;
  padding: 0 20px 16px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink-soft, #4B4541);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.wzd-hub-page .wzd-art-body dl.wzd-art-faq dd:last-child { border-bottom: 0; }

/* Tab bar — iOS26 segmented control polish */
.wzd-hub-page .wzd-hub-tabs-bar {
  background: rgba(245, 235, 220, 0.4);
  border-radius: 14px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 14px;
}
.wzd-hub-page .wzd-hub-tab {
  border: 0 !important;
  background: transparent;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: background 0.18s, color 0.18s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  min-height: 38px;
}
.wzd-hub-page .wzd-hub-tab:hover { background: rgba(255, 255, 255, 0.6); }
.wzd-hub-page .wzd-hub-tab.active {
  background: #fff !important;
  color: var(--c-brick, #8E2521) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.05);
}
.wzd-hub-page .wzd-hub-tab.active .wzd-hub-tab-count {
  background: rgba(142,37,33,0.10);
  color: var(--c-brick, #8E2521);
  padding: 2px 7px;
  border-radius: 100px;
  opacity: 1;
  font-weight: 700;
}

/* Cards: increase radius for iOS26 feel */
.wzd-hub-page .wzd-hub-card { border-radius: 16px !important; }
.wzd-hub-page .wzd-hub-card-img { border-radius: 16px 16px 0 0; }

/* Mobile tweaks */
@media (max-width: 768px) {
  .wzd-hub-page .wzd-art-body h2 { font-size: 19px !important; padding-left: 12px !important; }
  .wzd-hub-page .wzd-art-body h2::before { width: 4px; }
  .wzd-art-calc-cta { padding: 14px 16px; border-radius: 14px; }
  .wzd-art-calc-btn { width: 100%; justify-content: center; flex-direction: row-reverse; }
  .wzd-hub-page .wzd-art-body dl.wzd-art-faq dt { font-size: 14.5px; padding: 14px 16px 4px; }
  .wzd-hub-page .wzd-art-body dl.wzd-art-faq dd { padding: 0 16px 14px; font-size: 13.5px; }
}

/* ── 12. Override auto-TOC (.wzd-toc generated by app.js) — iOS26 polish ── */
.single .wzd-art-body nav.wzd-toc {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 240, 230, 0.96)) !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 18px 22px !important;
  margin: 22px 0 32px !important;
  box-shadow: 0 1px 2px rgba(180, 80, 40, 0.05),
              0 0 0 0.5px rgba(180, 80, 40, 0.10) !important;
}
.single .wzd-art-body nav.wzd-toc .wzd-toc-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--c-brick, #8E2521) !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.005em !important;
}
.single .wzd-art-body nav.wzd-toc .wzd-toc-title i { font-size: 18px; }
.single .wzd-art-body nav.wzd-toc ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: toc;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 4px 14px !important;
}
.single .wzd-art-body nav.wzd-toc ol li {
  counter-increment: toc;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.single .wzd-art-body nav.wzd-toc ol li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--c-ink, #1E0A08) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border: 0 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.single .wzd-art-body nav.wzd-toc ol li a::before {
  content: counter(toc);
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(142, 37, 33, 0.12);
  color: var(--c-brick, #8E2521);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.single .wzd-art-body nav.wzd-toc ol li a:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--c-brick, #8E2521) !important;
  padding-left: 10px !important;
}
@media (max-width: 768px) {
  .single .wzd-art-body nav.wzd-toc { padding: 14px 16px !important; border-radius: 14px !important; }
  .single .wzd-art-body nav.wzd-toc ol { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   HUB PAGE — iOS26 REDESIGN 2026-07-01
   Mobile-first, Google SEO compliant, table-safe, WCAG AA touch targets
   ============================================================================ */

/* ── 1. Mobile action strip (ซ่อนบน desktop) ── */
.wzd-hub-mobile-strip {
  display: none;
}

/* ── 2. Desktop product grid — 3 explicit columns ── */
.wzd-hub-prod-grid {
  grid-template-columns: repeat(3, 1fr);
  max-height: 520px;
  gap: 12px;
}

/* ── 3. iOS26 card — elevated shadows, spring hover ── */
.wzd-hub-card {
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.22s ease !important;
}
.wzd-hub-card:hover {
  box-shadow: 0 8px 28px rgba(142,37,33,0.14), 0 0 0 0.5px rgba(142,37,33,0.15) !important;
  transform: translateY(-3px) !important;
  border: none !important;
}
.wzd-hub-card:active { transform: scale(0.97) !important; }

/* ── 4. Tab bar — iOS26 segmented control, 44px tap target ── */
.wzd-hub-page .wzd-hub-tab {
  min-height: 44px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
}

/* ── 5. Show-more button — larger, cleaner ── */
.wzd-hub-show-more {
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
  padding: 11px 28px;
}

/* ── 6. Table overflow — mobile horizontal scroll ── */
.wzd-hub-content table,
.wzd-hub-page table {
  min-width: 360px;
}
.wzd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
  border-radius: 10px;
}
.wzd-table-scroll table {
  min-width: 0;
  width: 100%;
}

/* ── 7. Sidebar line + contact card — glass look on desktop ── */
.wzd-hub-line-cta,
.wzd-hub-contact-card {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 0.5px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ── 8. MOBILE overrides (≤768px) ── */
@media (max-width: 768px) {

  /* Show mobile CTA strip */
  .wzd-hub-mobile-strip {
    display: flex;
    gap: 10px;
    margin: 18px 0 24px;
  }
  .wzd-hub-mstrip-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    border-radius: 16px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s;
    -webkit-tap-highlight-color: transparent;
  }
  .wzd-hub-mstrip-btn i { font-size: 19px; flex-shrink: 0; }
  .wzd-hub-mstrip-btn:active { transform: scale(0.96); opacity: 0.85; }
  .wzd-hub-mstrip-btn--quote {
    background: linear-gradient(135deg, var(--c-brick, #8E2521), #6B1A18);
    color: #fff;
    box-shadow: 0 4px 14px rgba(142,37,33,0.30);
  }
  .wzd-hub-mstrip-btn--line {
    background: linear-gradient(135deg, #06C755, #00A843);
    color: #fff;
    box-shadow: 0 4px 14px rgba(6,199,85,0.28);
  }
  .wzd-hub-mstrip-btn--tel {
    flex: 0 0 auto;
    min-width: 68px;
    background: rgba(142,37,33,0.08);
    color: var(--c-brick, #8E2521);
    border: 1.5px solid rgba(142,37,33,0.22);
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    min-height: 50px;
    padding: 8px 10px;
  }
  .wzd-hub-mstrip-btn--tel i { font-size: 21px; }

  /* Sidebar: มาหลัง content (ไม่ใช่ก่อน), แสดง LINE + phone */
  .wzd-hub-sidebar {
    order: 2 !important;       /* ← แก้: เอา order:-1 ออก */
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .wzd-hub-sidebar .wzd-qbox {
    grid-column: 1 / -1;
  }
  .wzd-hub-sidebar .wzd-hub-line-cta,
  .wzd-hub-sidebar .wzd-hub-contact-card {
    display: flex !important;   /* ← แก้: เปิดที่ถูกซ่อนไว้ */
  }

  /* Product grid: 2-col mobile */
  .wzd-hub-prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    max-height: 360px;
  }

  /* Tab: 44px touch target */
  .wzd-hub-page .wzd-hub-tab {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Section padding: leave room for content */
  .wzd-hub-section {
    padding-bottom: 40px;
  }

  /* Card name — readable on small screen */
  .wzd-hub-card-name { font-size: 13px; }
  .wzd-hub-card-poa  { font-size: 13px; }

  /* H1 area — bump mobile heading size */
  .wzd-hub-content h1 {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    margin-bottom: 12px !important;
  }
}

/* ── 9. Narrow mobile (≤400px) ── */
@media (max-width: 400px) {
  .wzd-hub-prod-grid {
    gap: 7px;
  }
  .wzd-hub-card-name { font-size: 13px; }
  .wzd-hub-mstrip-btn { font-size: 13.5px; min-height: 48px; }
}

/* ── 10. Tablet (769px–1024px) — 2 col product grid ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .wzd-hub-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wzd-hub-layout { grid-template-columns: 1fr 200px; gap: 20px; }
}

/* ── 11. HUB UPDATES 2026-07-01 ── */

/* Single-cat: hide tab bar when only 1 category (leaf node pages) */
.wzd-hub-tabs-bar--single {
  display: none !important;
}

/* Related Hubs sidebar widget */
.wzd-hub-related {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.wzd-hub-related-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-brick, #8E2521);
  margin-bottom: 8px;
}
.wzd-hub-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 0.5px solid rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--c-ink, #1E0A08);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.wzd-hub-related-item:hover { color: var(--c-brick, #8E2521); }
.wzd-hub-related-item:active { opacity: 0.7; }
.wzd-hub-related-item i {
  font-size: 13px;
  color: var(--c-ink-soft, #6B6661);
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.wzd-hub-related-item:hover i { color: var(--c-brick, #8E2521); }

/* Mobile: related hubs collapsed (show fewer items on mobile) */
@media (max-width: 768px) {
  .wzd-hub-related {
    margin-top: 24px;
    border-radius: 14px;
  }
  .wzd-hub-related-item { font-size: 13px; padding: 7px 0; }
}

/* ── Comparison Table — hub pages ───────────────────────────────────────────
   .wzd-compare-table inside .wzd-table-scroll (auto-wrapped by hub JS)
   ─────────────────────────────────────────────────────────────────────────── */
.wzd-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.wzd-compare-table thead th {
  background: linear-gradient(135deg,#6E1D1A 0%,var(--c-brick,#8E2521) 100%);
  color: #fff;
  padding: 12px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
}
.wzd-compare-table tbody tr:nth-child(odd) { background: var(--c-cream,#fdf8f3); }
.wzd-compare-table tbody tr:nth-child(even) { background: #fff; }
.wzd-compare-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(142,37,33,0.09);
  vertical-align: top;
  font-size: 13.5px;
  color: var(--c-ink,#2e2e31);
}
.wzd-compare-table td:first-child {
  font-weight: 600;
  color: var(--c-brick,#8E2521);
  min-width: 130px;
}
.wzd-compare-table tbody tr:last-child td { border-bottom: none; }
.wzd-compare-table a { color: var(--c-brick,#8E2521); }
.wzd-hub-content .wzd-table-scroll { margin: 0 0 28px; }


/* ================================================================
   PRODUCT PAGE FIXES 2026-07-03
   ================================================================ */

/* ── Viz: full width within action card (no side margins) ── */
.wzd-pdp2-action .wzd-cq-viz {
  margin: 0 !important;
  border-radius: 0 !important;
}
.wzd-pdp2-action .wzd-cq-viz-stage {
  border-radius: 0 !important;
}

/* ── Install steps: smaller number, larger content text ── */
.wzd-pdp-steps .wzd-step-n {
  height: 48px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.wzd-pdp-steps .wzd-step-t {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.wzd-pdp-steps .wzd-step-d {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* ── งานที่เหมาะ — inline below spec table ── */
.wzd-pdp-use-tags--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
}
.wzd-pdp-use-tags--inline .wzd-pdp-use-tag {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--c-bg-soft, #f7f3ee);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  color: var(--c-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wzd-pdp-use-tags--inline .wzd-pdp-use-tag .ti {
  font-size: 13px;
  color: var(--c-clay, #A63B2C);
}

/* ── Related products: usage badge + dimensions ── */
.wzd-prod-img { position: relative; }
.wzd-prod-badge-usage {
  position: absolute;
  top: 7px;
  right: 7px;
  background: rgba(142,37,33,.88);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.wzd-prod-dims {
  font-size: 11.5px;
  color: var(--c-ink-mute);
  margin: 2px 0 4px;
  line-height: 1.3;
}

/* ── Quote page — deduplicate CTAs ── */
.page-template-page-quote .wzd-cta-quote{display:none !important}
@media (max-width:880px){
  .page-template-page-quote .wzd-quote-sidebar{display:none}
}

/* ─────────────────────────────────────────
   Price Page Tab UI  (ID 20339 — ราคาวัสดุก่อสร้างและค่าแรง ปี 2569)
   ───────────────────────────────────────── */

/* Download card */
.wzd-pt__dl{display:flex;align-items:center;gap:14px;background:#F8F5EF;border:1.5px solid #E7D9C8;border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:14px}
.wzd-pt__dl-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#8E2521;color:#fff;border-radius:10px}
.wzd-pt__dl-icon svg{stroke:#fff}
.wzd-pt__dl-body{display:flex;flex-direction:column;gap:4px}
.wzd-pt__dl-body strong{font-size:13px;color:#1e293b;font-weight:600;line-height:1.4}
.wzd-pt__dl-body span{font-size:12px;color:#64748b}
.wzd-pt__dl-body a{display:inline-flex;align-items:center;gap:4px;background:#8E2521;color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;margin-top:2px;width:fit-content;transition:background .15s}
.wzd-pt__dl-body a:hover{background:#A63B2C}

/* Intro text */
.wzd-pt__intro{font-size:14px;color:#2E2E31;line-height:1.7;margin-bottom:20px;max-width:720px}

/* Layout wrapper */
.wzd-pt__main{display:block}

/* ── Tab bar (mobile: horizontal scroll) ── */
.wzd-pt__bar{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding-bottom:4px;margin-bottom:16px;position:sticky;top:calc(var(--wzd-header-h,60px) + 4px);z-index:40;background:rgba(248,245,239,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1.5px solid #E7D9C8;padding-top:10px}
.wzd-pt__bar::-webkit-scrollbar{display:none}
.wzd-pt__btn{flex-shrink:0;white-space:nowrap;font-size:13px;font-weight:600;padding:7px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#F8F5EF;color:#2E2E31;cursor:pointer;transition:all .15s;font-family:inherit}
.wzd-pt__btn:hover{border-color:#C86B44;color:#8E2521;background:#F8F5EF}
.wzd-pt__btn--act{background:#8E2521;color:#fff!important;border-color:#8E2521}

/* ── Content panels ── */
.wzd-pt__content{overflow:hidden}
.wzd-pt__panel{display:none}
.wzd-pt__panel--act{display:block}

/* Badge */
.wzd-pt__badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:6px;background:#E7D9C8;color:#2E2E31;border:1px solid #B7ACA3;margin-bottom:8px}
.wzd-pt__badge--gov{background:#F8F5EF;color:#8E2521;border-color:#C86B44}

/* Unit note */
.wzd-pt__unit{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#2E2E31;background:rgba(231,217,200,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #E7D9C8;border-radius:20px;padding:5px 12px;margin-bottom:14px;line-height:1.4;font-weight:500}.wzd-pt__unit::before{content:'📐';font-size:12px}

/* Table scroll wrapper */
.wzd-pt__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.06)}

/* Price table */
.wzd-pt__tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.wzd-pt__tbl thead tr{background:#E7D9C8}
.wzd-pt__tbl th{padding:10px 12px;text-align:left;font-weight:600;font-size:12px;letter-spacing:.03em;color:#2E2E31;border-bottom:2px solid #B7ACA3;white-space:nowrap}
.wzd-pt__tbl td{padding:9px 12px;border-bottom:1px solid #E7D9C8;color:#2E2E31;line-height:1.5}
.wzd-pt__tbl tbody tr:last-child td{border-bottom:none}
.wzd-pt__tbl tbody tr:hover td{background:#F8F5EF}
.wzd-pt__num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.wzd-pt__col-total{color:#A63B2C!important;font-weight:700}

/* Sub-row (category header) */
.wzd-pt__sub-row td{background:#F8F5EF!important;font-size:12px;font-weight:700;color:#B7ACA3;letter-spacing:.04em;text-transform:uppercase;padding:7px 12px!important;border-bottom:1px solid #E7D9C8!important}

/* Mobile: hide labor column (3-col layout) */
@media(max-width:600px){
  .wzd-pt__col-labor{display:none}
  .wzd-pt__scroll{overflow-x:hidden}
  .wzd-pt__tbl{table-layout:fixed;width:100%}
  .wzd-pt__tbl td:first-child,.wzd-pt__tbl th:first-child{width:auto;word-break:keep-all;white-space:normal}
  .wzd-pt__num{width:70px;padding:9px 8px}
  .wzd-pt__tbl th.wzd-pt__num{padding:10px 8px}
}

/* ── Desktop sidebar layout ── */
@media(min-width:768px){
  .wzd-pt__main{display:grid;grid-template-columns:168px 1fr;gap:0 28px}
  .wzd-pt__bar{flex-direction:column;overflow-x:visible;position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;padding-top:0;gap:4px;align-self:start;position:sticky;top:calc(var(--wzd-header-h,60px)+16px)}
  .wzd-pt__btn{width:100%;text-align:left;border-radius:10px;padding:10px 14px;font-size:14px}
  .wzd-pt__btn--act{background:#8E2521;color:#fff!important;border-color:#8E2521}
  .wzd-pt__col-labor{display:table-cell}
  .wzd-pt__tbl th:first-child{min-width:auto}
}

/* Disclaimer */
.wzd-pt__disclaimer{font-size:12px;color:#B7ACA3;background:#F8F5EF;border-left:3px solid #C86B44;padding:10px 14px;border-radius:6px;margin-top:24px;line-height:1.6}

/* CTA */
.wzd-pt__cta-wrap{text-align:center;margin-top:28px;padding:24px;background:linear-gradient(135deg,#F8F5EF,#E7D9C8);border-radius:14px;border:1.5px solid #B7ACA3}
.wzd-pt__cta-label{font-size:15px;font-weight:600;color:#2E2E31;margin-bottom:12px}
.wzd-pt__cta-btn{display:inline-block;background:#D98949;color:#fff!important;text-decoration:none!important;font-size:15px;font-weight:700;padding:12px 28px;border-radius:12px;transition:background .15s}
.wzd-pt__cta-btn:hover{background:#8E2521}

/* wpautop inserts <br> between inline elements — suppress inside tab components */
.wzd-pt__bar br,.wzd-pt__content br,.wzd-pt tr br{display:none!important}

/* ================================================================
   PDP v10 — OODA Goal 2026-07-03
   ✅ Step cards: small badge, content-first
   ✅ Waste/mortar: 4-col single row
   ✅ Customer form: 2-col on all mobile sizes
   ✅ Section width: consistent padding
   ================================================================ */

/* ── v10: Step cards — small circle badge, content gets the space ── */
.wzd-pdp-steps .wzd-step {
    flex-direction: column !important;
    padding: 12px 14px 14px !important;
    gap: 8px !important;
}
.wzd-pdp-steps .wzd-step-n {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(176,64,32,.12) !important;
    background-image: none !important;
    color: var(--c-brick) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: var(--font-en) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.wzd-pdp-steps .wzd-step > div:last-child {
    padding: 0 !important;
    flex: 1 !important;
}
.wzd-pdp-steps .wzd-step-t {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--c-ink) !important;
    margin-bottom: 4px !important;
    letter-spacing: -.01em !important;
}
.wzd-pdp-steps .wzd-step-d {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: var(--c-ink-soft) !important;
    margin-bottom: 0 !important;
}

/* ── v10: Waste/mortar both 4-col (same .wzd-cq-waste class) ────── */
.wzd-pdp.wzd-pdp .wzd-cq-waste {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-waste label span {
    font-size: 12px !important;
    padding: 7px 3px !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: block !important;
}
@media (max-width: 360px) {
    .wzd-pdp.wzd-pdp .wzd-cq-waste label span {
        font-size: 10px !important;
        padding: 6px 2px !important;
    }
}

/* ── v10: Customer form — 2-col on ALL mobile sizes ─────────────── */
@media (max-width: 420px) {
    .wzd-pdp.wzd-pdp .wzd-cq-customer-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}

/* ── v10: Consistent section side padding on mobile ─────────────── */
@media (max-width: 768px) {
    .wzd-pdp-sec {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    .wzd-pdp2-media,
    .wzd-pdp2-action {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Prevent any child from overflowing */
    .wzd-pdp .wzd-container {
        overflow-x: hidden !important;
    }
}

/* ── v10 fix: override 480px 1-col rule for customer-2col ───────── */
@media (max-width: 480px) {
    .wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-customer-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}


/* ================================================================
   COMPARE PAGE (wcp-*) — Apple compare-page structure: label sits
   ABOVE its row of values (no left column); desktop shows all
   columns side by side; mobile shows 2 at a time via slot chips.
   Palette: white surface, #d2d2d7 hairlines, #6e6e73 secondary text,
   #1d1d1f primary text. Brand red reserved for CTAs + calculated
   numbers only — never used as a background wash.
   ================================================================ */
.wcp-page {
	--wcp-brick: #8E2521;
	--wcp-n: 2;
	--wcp-visible-n: 3;
	--wcp-nav: 72px;
	--wcp-ink: #1d1d1f;
	--wcp-gray: #6e6e73;
	--wcp-line: #d2d2d7;
	background: #fff;
}

/* Page title */
.wcp-title-bar { padding: 28px 0 6px; text-align: center; }
.wcp-h1 { font-size: 34px; font-weight: 700; color: var(--wcp-ink); letter-spacing: -0.01em; margin: 0; }

/* How-to compact bar */
.wcp-howto-bar { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 0 14px; flex-wrap:wrap; }
.wcp-howto-steps { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.wcp-hs { display:inline-flex; align-items:center; gap:7px; font-size:15px; color:var(--wcp-gray); white-space:nowrap; }
.wcp-hs-n { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--wcp-brick); color:#fff; font-size:11px; font-weight:700; flex-shrink:0; }
.wcp-hs-n--green { background:#15803d; }
.wcp-hs-sep { font-size:15px; color:var(--wcp-line); }
.wcp-hs-hint { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#15803d; font-weight:600; white-space:nowrap; }
.wcp-hs-hint .ti { font-size:14px; }

/* Back bar */
.wcp-back-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 0 14px; }
.wcp-back-bar a { color:var(--wcp-gray); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:6px; transition:color .15s; }
.wcp-back-bar a:hover { color:var(--wcp-ink); }

/* PDF button */
.wcp-pdf-btn {
	border:1px solid var(--wcp-line); background:transparent; border-radius:20px;
	padding:5px 14px; font-size:12px; font-weight:600; color:var(--wcp-gray);
	cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s;
}
.wcp-pdf-btn:hover { border-color:var(--wcp-ink); color:var(--wcp-ink); }
.wcp-pdf-btn .ti { font-size:15px; }

/* Price group */
.wcp-prod-price-group { margin:6px 0 4px; }
.wcp-prod-price-lbl { font-size:11px; color:var(--wcp-gray); margin-bottom:3px; }
.wcp-prod-price-lbl abbr { text-decoration:none; border-bottom:1px dashed var(--wcp-line); cursor:help; }

/* ── Sticky wrapper: transparent full-bleed, holds the floating glass card ── */
.wcp-glass-wrap { padding: 10px 0 14px; position: relative; z-index: 10; }

/* Mini sticky header — image + name only; revealed by IntersectionObserver */
.wcp-mini-hdr {
	position: fixed; top: var(--wcp-nav); left: 0; right: 0; z-index: 40;
	background: rgba(255,255,255,.95);
	border-bottom: 1px solid rgba(0,0,0,.09);
	display: none;
}
.wcp-mini-inner { }
.wcp-mini-inner .wzd-container { display: flex; flex-direction: column; }
.wcp-mini-hdr.wcp-mini-visible { display: block; }
.wcp-mini-prod-row {
	display: grid; grid-template-columns: repeat(var(--wcp-visible-n),1fr);
	padding: 6px 0; order: 1;
}
.wcp-mini-cell {
	text-align: center; padding: 5px 10px; position: relative;
}
.wcp-mini-cell + .wcp-mini-cell::before {
	content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--wcp-line);
}
.wcp-mini-cell.wcp-slot-hidden { display: none; }
.wcp-mini-img {
	width: 72px; height: 72px; border-radius: 14px; object-fit: contain;
	display: block; margin: 0 auto 5px; background: rgba(255,255,255,.75);
}
.wcp-mini-img--icon { display:flex; align-items:center; justify-content:center; color:#ccc; font-size:32px; }
.wcp-mini-name { font-size: 13px; font-weight: 600; color: var(--wcp-ink); line-height: 1.3; }

/* Mini calc bar inside sticky header */
.wcp-mini-calc-bar { order: 2; border: 1.5px solid rgba(0,0,0,.22); border-radius: 10px; margin: 3px 8px 7px; padding: 6px 14px 7px; background: rgba(0,0,0,.025); }
.wcp-mini-calc-inner { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.wcp-mini-calc-inner .wcp-calc-area-wrap input { width:60px; font-size:14px; padding:3px 5px; }
.wcp-mini-calc-inner .wcp-calc-label { font-size:12px; }
.wcp-mini-calc-inner .wcp-calc-btns button { padding:3px 9px; font-size:12px; }

/* iOS26 "Liquid Glass" floating toolbar */
.wcp-glass {
	background: rgba(255,255,255,.68);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.5);
	padding: 14px 20px 12px;
}

/* Calculator bar */
.wcp-calc-bar { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 10px; margin-bottom: 10px; }
.wcp-calc-inner {
	display:grid;
	grid-template-columns: minmax(120px,.7fr) minmax(300px,1.5fr) minmax(420px,1.4fr) minmax(145px,.7fr) minmax(190px,.8fr);
	grid-template-areas:
		"area dest groove team wage"
		". . cement cement .";
	align-items:center;
	justify-content:center;
	gap:14px 18px;
}
.wcp-calc-item--area { grid-area:area; }
.wcp-calc-item--dest { grid-area:dest; }
.wcp-calc-item--groove { grid-area:groove; }
.wcp-calc-item--team { grid-area:team; }
.wcp-calc-item--wage { grid-area:wage; }
.wcp-calc-item--cement { grid-area:cement; justify-self:center; }
.wcp-calc-area-wrap { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--wcp-gray); }
.wcp-calc-area-wrap input {
	width: 68px; border: 1px solid var(--wcp-line); border-radius: 9px;
	padding: 5px 6px; font-size: 16px; font-weight: 700; text-align: center;
	color: var(--wcp-ink); background:rgba(255,255,255,.8);
}
.wcp-calc-area-wide input { width: 92px; }
.wcp-calc-team-wide input { width: 72px; }
.wcp-calc-area-wrap input:focus { outline:none; border-color:var(--wcp-brick); }
.wcp-calc-group { display:flex; align-items:center; gap:8px; }
.wcp-calc-label { font-size:13px; color:var(--wcp-gray); white-space:nowrap; }

.wcp-dest-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: min(360px, 100%);
	color: var(--wcp-gray);
}
.wcp-dest-wrap > .ti { font-size: 17px; color: var(--wcp-brick); flex-shrink: 0; }
.wcp-dest-wrap input[type="search"] {
	width: 260px;
	max-width: 52vw;
	border: 1px solid var(--wcp-line);
	border-radius: 9px;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wcp-ink);
	background: rgba(255,255,255,.86);
}
.wcp-dest-wrap input[type="search"]:focus { outline: none; border-color: var(--wcp-brick); }
.wcp-dest-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 22px;
	right: 0;
	z-index: 80;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--wcp-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(0,0,0,.18);
	padding: 6px;
}
.wcp-dest-results[hidden] { display: none; }
.wcp-dest-item {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 8px 10px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var(--wcp-ink);
	cursor: pointer;
}
.wcp-dest-item:hover { background: rgba(142,37,33,.08); color: var(--wcp-brick); }
.wcp-dest-status { display:none; }
.wcp-dest-status--error { color: var(--wcp-brick); }

/* iOS segmented control */
.wcp-calc-btns {
	display:inline-flex; background:rgba(118,118,128,.12); border-radius:999px;
	padding:2px; gap:2px;
}
.wcp-calc-btns button {
	border:none; background:transparent; padding:5px 13px;
	border-radius:999px; font-size:13px; font-weight:500; color:var(--wcp-gray);
	cursor:pointer; transition:all .15s; white-space:nowrap;
}
.wcp-calc-btns button:hover { color:var(--wcp-ink); }
.wcp-calc-btns button.wcp-btn-on {
	background: var(--wcp-brick); color:#fff; font-weight:600;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Highlight-differences toggle */
.wcp-hl-toggle { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--wcp-gray); }
.wcp-hl-switch {
	position:relative; width:36px; height:22px; border-radius:20px;
	background:#e9e9eb; cursor:pointer; transition:background .2s; flex-shrink:0;
	border:none; padding:0;
}
.wcp-hl-switch::after {
	content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
	border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
	transition:transform .2s;
}
.wcp-hl-switch.wcp-hl-on { background: var(--wcp-brick); }
.wcp-hl-switch.wcp-hl-on::after { transform: translateX(14px); }


/* Product cards row — grid width follows how many are actually visible */
.wcp-prod-row { display:grid; grid-template-columns: repeat(var(--wcp-visible-n), 1fr); align-items:start; }
.wcp-prod-cell { text-align:center; padding:0 14px; position:relative; }
.wcp-prod-cell.wcp-slot-hidden { display:none; }
.wcp-prod-cell + .wcp-prod-cell::before {
	content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--wcp-line);
}
.wcp-prod-img-wrap {
	display:flex; align-items:center; justify-content:center;
	width:84px; height:84px; margin:0 auto 10px;
	border-radius:16px; overflow:hidden; background:rgba(255,255,255,.75);
	transition:opacity .15s;
}
.wcp-prod-img-wrap:hover { opacity:.7; }
.wcp-prod-img-wrap img { width:100%; height:100%; object-fit:contain; }
.wcp-prod-name { font-size:16px; font-weight:700; color:var(--wcp-ink); line-height:1.3; margin-bottom:8px; letter-spacing:-0.01em; }
.wcp-prod-price-wrap { display:flex; align-items:center; justify-content:center; gap:4px; font-size:12px; color:var(--wcp-gray); margin-bottom:8px; }
.wcp-prod-price-wrap input {
	width:60px; border:1px solid var(--wcp-line); border-radius:8px; padding:4px 6px;
	font-size:14px; font-weight:700; text-align:center; color:var(--wcp-ink); background:rgba(255,255,255,.8);
}
.wcp-prod-price-wrap input:focus { outline:none; border-color:var(--wcp-brick); }
.wcp-prod-quote {
	display:inline-flex; align-items:center; justify-content:center;
	padding:6px 18px; font-size:12px; font-weight:600; color:#fff;
	background:var(--wcp-brick); border-radius:20px; text-decoration:none; transition:opacity .15s;
}
.wcp-prod-quote:hover { opacity:.85; }

/* Highlights list — now inside spec table row */
.wcp-hl-list { list-style:none; margin:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:4px; }
.wcp-hl-list li { font-size:11.5px; color:var(--wcp-gray); line-height:1.4; padding-left:12px; position:relative; }
.wcp-hl-list li::before { content:'·'; position:absolute; left:3px; font-weight:700; color:var(--wcp-brick); }

/* Area sub-label in bricks row */
.wcp-sub-area { display:block; font-size:11px; color:var(--wcp-gray); margin-top:2px; }

/* ── Summary section ── */
.wcp-summary { padding:8px 0 16px; }
.wcp-summary-h { font-size:18px; font-weight:700; color:var(--wcp-ink); letter-spacing:-0.01em; margin:0 0 14px; }
.wcp-summary-grid { display:grid; grid-template-columns:repeat(var(--wcp-visible-n, 3), 1fr); gap:12px; align-items:start; }
.wcp-sum-card {
	background:#fff;
	border:1px solid var(--wcp-line); border-radius:14px; overflow:hidden; transition:box-shadow .2s;
}
.wcp-sum-card.wcp-sum-winner { border-color:rgba(22,163,74,.5); box-shadow:0 0 0 2px rgba(22,163,74,.15); }

/* Colored header band */
.wcp-sum-head {
	background: var(--wcp-brick); padding:12px 14px 10px;
	display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.wcp-sum-head--win { background: #087a36; }
.wcp-sum-hname { font-size:13px; font-weight:700; color:#fff; line-height:1.3; }
.wcp-sum-badge {
	font-size:11px; font-weight:700; color:#fff;
	background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5);
	border-radius:20px; padding:2px 8px; white-space:nowrap; flex-shrink:0;
}

/* Body */
.wcp-sum-body { padding:12px 14px 12px; }
.wcp-sum-rows { display:flex; flex-direction:column; gap:6px; }
.wcp-sum-row { display:flex; align-items:flex-start; gap:6px; }
.wcp-sum-k { font-size:12px; color:var(--wcp-gray); white-space:nowrap; flex-shrink:0; min-width:72px; padding-top:1px; }
.wcp-sum-v { font-size:13px; color:var(--wcp-ink); line-height:1.4; }
.wcp-sum-v small { font-size:11px; color:var(--wcp-gray); }
.wcp-sum-v b { color:var(--wcp-ink); font-weight:700; }
.wcp-sum-divider { border-top:1px solid var(--wcp-line); margin:8px 0 4px; }
.wcp-sum-total-row .wcp-sum-k { font-size:12px; font-weight:700; color:var(--wcp-ink); }
.wcp-sum-big { font-size:16px; font-weight:700; color:var(--wcp-brick); }
.wcp-sum-muted { color:var(--wcp-gray) !important; font-size:11px; }

/* Truck chips */
.wcp-sum-trucks { flex-wrap:wrap; }
.wcp-truck-chip {
	display:inline-block; font-size:11px; color:var(--wcp-gray);
	background:rgba(0,0,0,.04); border:1px solid var(--wcp-line);
	border-radius:20px; padding:2px 8px; margin:2px 2px 0 0; white-space:nowrap;
}

/* Change-product picker */
.wcp-swap-wrap { position:relative; margin-top:10px; }
.wcp-swap-btn {
	border:1px solid var(--wcp-line); background:rgba(255,255,255,.7); border-radius:20px;
	padding:7px 16px; font-size:13px; font-weight:600; color:var(--wcp-gray);
	cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s;
}
.wcp-swap-btn i { font-size:16px; }
.wcp-swap-btn:hover { color:var(--wcp-brick); border-color:var(--wcp-brick); }
.wcp-swap-panel {
	position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
	width:260px; max-width:75vw; z-index:60;
	background:#fff;
	border:1px solid var(--wcp-line); border-radius:14px;
	box-shadow:0 12px 32px rgba(0,0,0,.18); padding:8px; text-align:left;
}
.wcp-swap-search {
	width:100%; border:1px solid var(--wcp-line); border-radius:8px;
	padding:6px 10px; font-size:12px; margin-bottom:6px; color:var(--wcp-ink); background:#fff;
}
.wcp-swap-search:focus { outline:none; border-color:var(--wcp-brick); }
.wcp-swap-status {
	padding:0 4px 6px;
	color:var(--wcp-gray);
	font-size:11px;
	line-height:1.35;
}
.wcp-swap-list { max-height:260px; overflow-y:auto; }
.wcp-swap-item {
	display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:transparent;
	padding:7px 8px; font-size:12.5px; color:var(--wcp-ink); border-radius:8px;
	cursor:pointer; transition:background .12s;
}
.wcp-swap-item:hover { background:rgba(142,37,33,.08); }
.wcp-swap-empty {
	margin:0;
	padding:12px 8px;
	color:var(--wcp-gray);
	font-size:12px;
	line-height:1.45;
}
.wcp-swap-item img, .wcp-swap-item-noimg {
	width:32px; height:32px; border-radius:7px; object-fit:contain; background:#fbfbfd;
	flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:16px;
}

/* ── Spec table — Apple pattern: label above, values in a grid below ── */
.wcp-table { padding:8px 0 3rem; }
.wcp-section-h {
	font-size:20px; font-weight:700; color:var(--wcp-ink); letter-spacing:-0.01em;
	padding:40px 0 16px; border-top:1px solid var(--wcp-line); margin-top:8px;
}
.wcp-section-h:first-child { border-top:none; margin-top:0; padding-top:8px; }

.wcp-row { padding:4px 0; border-bottom:1px solid var(--wcp-line); }
.wcp-row-label { display:none; }
.wcp-inlabel { display:block; font-size:11px; color:var(--wcp-gray); margin-bottom:3px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.wcp-row-vals { display:grid; grid-template-columns:repeat(var(--wcp-visible-n), 1fr); align-items:start; }
.wcp-row-val { text-align:center; font-size:14px; color:var(--wcp-ink); padding:5px 8px; position:relative; }
.wcp-row-val.wcp-slot-hidden { display:none; }
.wcp-row-val + .wcp-row-val::before {
	content:''; position:absolute; left:0; top:-2px; bottom:-2px; width:1px; background:var(--wcp-line);
}
.wcp-row-val--empty { color:#c7c7cc; }
.wcp-usage-val,
.wcp-usage-joint { display:block; }
.wcp-usage-joint { min-height:1.45em; }

/* Diff emphasis — typography weight only, no dot/color wash */
.wcp-row--diff .wcp-inlabel { color:var(--wcp-ink); font-weight:700; }
.wcp-hl-active .wcp-row--diff .wcp-row-val:not(.wcp-row-val--empty) { font-weight:700; }
.wcp-hl-active .wcp-row:not(.wcp-row--diff) .wcp-row-val { color:var(--wcp-gray); }
.wcp-hl-active .wcp-row:not(.wcp-row--diff) .wcp-inlabel { opacity:1; color:var(--wcp-gray); }

/* Calc value sizes */
.wcp-big { font-size:24px; font-weight:700; color:var(--wcp-brick); line-height:1.1; display:block; letter-spacing:-0.01em; }
.wcp-med { font-size:16px; font-weight:600; color:var(--wcp-ink); display:block; }
.wcp-hl-active .wcp-row:not(.wcp-row--diff) .wcp-med { color:var(--wcp-gray); }
.wcp-sub-cost { font-size:12px; font-weight:500; color:var(--wcp-gray); display:block; margin-top:3px; }
.wcp-sub-wt { font-size:12px; color:var(--wcp-gray); display:block; margin-top:1px; }
.wcp-money-inline,
.wcp-sum-v .wcp-money-inline,
#wcp-row-transport .wcp-med,
#wcp-row-grandtotal .wcp-big,
.wcp-sub-cost {
	color: var(--c-brick, var(--wcp-brick));
}
#wcp-row-bricks .wcp-big {
	color: #9a4f1a;
}
.wcp-route {
	display:block;
	color: var(--wcp-gray);
	font-weight:600;
	line-height:1.45;
}
.wcp-route .wcp-money-inline { font-weight:700; }
.wcp-route-note { color:var(--wcp-gray); font-size:11px; font-weight:600; }
#wcp-row-transport .wcp-med { font-size:22px; font-weight:800; }
#wcp-row-grandtotal .wcp-big { font-size:30px; font-weight:800; }
#wcp-row-mortar .wcp-med,
#wcp-row-time .wcp-med { font-size:19px; font-weight:750; }
.wcp-sub-cost .wcp-money-inline,
.wcp-sub-cost { font-size:14px; font-weight:700; }
.wcp-sum-v .wcp-money-inline { font-size:1.06em; }

/* Winner badge — green advisory: cheapest/best option */
.wcp-winner-badge {
	display:inline-flex; align-items:center; gap:3px;
	margin-top:6px; padding:3px 10px; border-radius:20px;
	background:rgba(8,122,54,.12); color:#075b29;
	font-size:10px; font-weight:700; white-space:nowrap;
	border:1px solid rgba(8,122,54,.28);
}
.wcp-winner-badge i { font-size:12px; }

.wcp-calc-note { font-size:12px; color:var(--wcp-brick); font-weight:600; padding:16px 0 0; text-align:center; }

/* CTA row */
.wcp-cta-row { display:flex; gap:12px; padding:32px 0 48px; flex-wrap:wrap; justify-content:center; }

/* Empty state */
.wcp-empty { text-align:center; padding:96px 20px; color:var(--wcp-gray); }
.wcp-empty i { font-size:48px; display:block; margin-bottom:16px; color:#c7c7cc; }
.wcp-empty p { margin-bottom:20px; font-size:14px; }

/* ── Tablet: summary stacks, calc bar wraps tighter ── */
@media (max-width:900px) and (min-width:641px) {
	.wcp-summary-grid { grid-template-columns: repeat(2, 1fr); }
	.wcp-calc-inner {
		grid-template-columns: minmax(90px,.6fr) minmax(260px,1.4fr) minmax(320px,1.2fr);
		grid-template-areas:
			"area dest dest"
			"groove team wage"
			". cement .";
		gap:10px;
	}
	.wcp-sum-k { min-width:64px; }
}

/* ── Mobile: exactly 2 columns, switch via slot chips (no scrolling table) ── */
@media (max-width:640px) {
	.wcp-page { --wcp-nav:60px; }

	.wcp-glass-wrap .wzd-container { padding-left:10px; padding-right:10px; }
	.wcp-glass { padding:10px 8px 9px; border-radius:16px; max-width:100%; overflow:visible; }
	.wcp-glass *, .wcp-glass *::before, .wcp-glass *::after { box-sizing:border-box; }
	.wcp-calc-inner { display:flex; gap:10px; }
	.wcp-calc-group { flex-wrap:wrap; justify-content:center; }

	.wcp-prod-img-wrap { width:64px; height:64px; margin-bottom:8px; }
	.wcp-prod-name { font-size:13px; margin-bottom:6px; }
	.wcp-swap-panel { left:0; transform:none; }
	.wcp-howto-bar { padding:6px 0 8px; gap:6px; }
	.wcp-hs { font-size:13px; }
	.wcp-back-bar { padding:6px 0 8px; }
	.wcp-summary-grid { grid-template-columns:1fr; gap:10px; }
	.wcp-sum-head { padding:10px 12px 8px; }
	.wcp-sum-body { padding:10px 12px 10px; }
	.wcp-sum-hname { font-size:12px; }
	.wcp-sum-big { font-size:15px; }

	.wcp-section-h { font-size:17px; padding:20px 0 10px; }
	.wcp-inlabel { font-size:11px; }
	.wcp-row-val { padding:4px 3px; font-size:13px; }
	.wcp-big { font-size:20px; }
	.wcp-med { font-size:14px; }
	.wcp-sub-cost { font-size:12px; }
	#wcp-row-transport .wcp-med { font-size:18px; }
	#wcp-row-grandtotal .wcp-big { font-size:23px; }
	#wcp-row-mortar .wcp-med,
	#wcp-row-time .wcp-med { font-size:16px; }
	.wcp-sub-cost .wcp-money-inline,
	.wcp-sub-cost { font-size:12px; }
	.wcp-h1 { font-size:20px; }
	.wcp-title-bar { padding:14px 0 2px; }
	.wcp-mini-calc-inner { gap:8px; }
	.wcp-mini-calc-inner .wcp-calc-label { font-size:11px; }
	.wcp-mini-calc-inner .wcp-calc-btns button { padding:2px 7px; font-size:11px; }
	.wcp-mini-calc-inner .wcp-calc-area-wrap input { width:52px; font-size:13px; }
	/* Mobile mini header: hide form, compact thumbnails */
	.wcp-mini-calc-bar { display: none; }
	.wcp-mini-img { width: 50px; height: 50px; border-radius: 10px; }
	.wcp-mini-name { font-size: 11px; }
	.wcp-mini-cell { padding: 3px 6px; }
	/* Main glass form: force 2-row compact layout */
	.wcp-glass .wcp-calc-inner {
		width:100%;
		max-width:100%;
		gap: 7px 6px;
		justify-content:stretch;
		align-items:center;
	}
	.wcp-glass .wcp-calc-inner > .wcp-calc-area-wrap {
		flex:1 1 86px;
		min-width:0;
		justify-content:center;
	}
	.wcp-glass .wcp-calc-group {
		flex:1 1 calc(50% - 4px);
		min-width:0;
		flex-wrap: nowrap;
		justify-content:center;
		gap: 4px;
	}
	.wcp-glass .wcp-calc-area-wrap { gap: 4px; font-size: 11px; }
	.wcp-glass .wcp-calc-area-wrap input { width: 48px; min-width:0; }
	.wcp-glass .wcp-dest-wrap {
		order: 10;
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-content: center;
		margin-top: 2px;
	}
	.wcp-glass .wcp-dest-wrap input[type="search"] { width: 100%; max-width: none; font-size: 13px; padding: 7px 10px; }
	.wcp-glass .wcp-dest-results { left: 0; right: 0; text-align: left; }
	.wcp-glass .wcp-dest-status { position: static; transform: none; width: 100%; max-width: none; text-align: center; margin-top: 2px; }
	.wcp-glass .wcp-calc-label { font-size: 11px; }
	.wcp-glass .wcp-calc-btns {
		max-width:100%;
		min-width:0;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
	}
	.wcp-glass .wcp-calc-btns button { flex:0 0 auto; padding: 2px 5px; font-size: 11px; }
	/* Hide text labels for ช่าง/ค่าแรง/ปูน (2nd+ .wcp-calc-group), keep icons */
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label { font-size: 0; line-height: 1; letter-spacing: 0; }
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label i { font-size: 13px; line-height: 1; }
}

/* Compare calculator: balanced 2-row form */
.wcp-glass .wcp-calc-inner {
	display:grid;
	grid-template-columns:minmax(140px,.58fr) minmax(360px,1.34fr) minmax(360px,1.08fr);
	grid-template-areas:
		"area dest groove"
		"team wage cement";
	align-items:center;
	justify-items:center;
	gap:18px 28px;
}
.wcp-glass .wcp-calc-item--area,
.wcp-glass .wcp-calc-item--team,
.wcp-glass .wcp-calc-item--wage,
.wcp-glass .wcp-calc-item--cement { justify-self:center; }
.wcp-glass .wcp-calc-item--dest { justify-self:stretch; }
.wcp-glass .wcp-dest-wrap { width:100%; min-width:0; justify-content:center; }
.wcp-glass .wcp-dest-wrap input[type="search"] { width:100%; max-width:none; }
.wcp-glass .wcp-calc-item--groove .wcp-calc-btns { min-width:340px; }
.wcp-route { font-weight:600; }
.wcp-route-vehicle { color:var(--wcp-gray); font-weight:500; }
.wcp-route .wcp-money-inline { font-weight:800; }
.wcp-route-note { display:none; }
.wcp-calc-note {
	font-size:15px;
	line-height:1.55;
	font-weight:800;
	color:var(--c-brick, var(--wcp-brick));
	padding-top:20px;
}

@media (max-width:1100px) and (min-width:641px) {
	.wcp-glass .wcp-calc-inner {
		grid-template-columns:minmax(120px,.52fr) minmax(300px,1.25fr) minmax(300px,1fr);
		gap:14px 16px;
	}
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns { min-width:300px; }
}

@media (max-width:640px) {
	.wcp-glass .wcp-calc-inner {
		display:grid;
		grid-template-columns:minmax(86px,.42fr) minmax(0,1fr);
		grid-template-areas:
			"area dest"
			"groove groove"
			"team wage"
			"cement cement";
		gap:8px 8px;
	}
	.wcp-glass .wcp-calc-item--area,
	.wcp-glass .wcp-calc-item--dest,
	.wcp-glass .wcp-calc-item--groove,
	.wcp-glass .wcp-calc-item--team,
	.wcp-glass .wcp-calc-item--wage,
	.wcp-glass .wcp-calc-item--cement {
		order:initial;
		width:100%;
		max-width:100%;
		min-width:0;
	}
	.wcp-glass .wcp-calc-group {
		flex-wrap:nowrap;
		justify-content:center;
	}
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		min-width:0;
		width:100%;
		justify-content:center;
	}
	.wcp-glass .wcp-dest-wrap {
		order:initial;
		flex:initial;
		width:100%;
		margin-top:0;
	}
	.wcp-glass .wcp-calc-label {
		font-size:11px;
	}
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		font-size:11px;
		line-height:normal;
	}
	.wcp-calc-note {
		font-size:13px;
		line-height:1.45;
	}
}

/* Compare calculator labels and centered spacing */
.wcp-glass .wcp-calc-inner {
	grid-template-columns:minmax(250px,.9fr) minmax(460px,1.35fr) minmax(460px,1.25fr);
	max-width:1320px;
	margin:0 auto;
	justify-content:center;
	justify-items:center;
	align-items:center;
	gap:20px 30px;
}
.wcp-glass .wcp-calc-item {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	width:100%;
	min-width:0;
}
.wcp-glass .wcp-calc-label {
	display:inline-flex;
	align-items:center;
	gap:4px;
	flex:0 0 auto;
	font-size:14px;
	font-weight:700;
	color:var(--wcp-gray);
	white-space:nowrap;
}
.wcp-glass .wcp-calc-label i {
	font-size:18px;
	line-height:1;
}
.wcp-glass .wcp-calc-item--area,
.wcp-glass .wcp-calc-item--team { justify-content:center; }
.wcp-glass .wcp-calc-item--dest,
.wcp-glass .wcp-calc-item--groove,
.wcp-glass .wcp-calc-item--wage,
.wcp-glass .wcp-calc-item--cement { justify-content:center; }
.wcp-glass .wcp-calc-item--dest .wcp-dest-wrap {
	flex:1 1 auto;
	max-width:560px;
}
.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
	flex:1 1 auto;
	max-width:360px;
	min-width:300px;
}
.wcp-glass .wcp-calc-item--wage .wcp-calc-area-wrap,
.wcp-glass .wcp-calc-item--cement .wcp-calc-area-wrap,
.wcp-glass .wcp-calc-item--team .wcp-calc-area-wrap,
.wcp-glass .wcp-calc-item--area .wcp-calc-area-wrap {
	flex:0 0 auto;
}

@media (max-width:1180px) and (min-width:641px) {
	.wcp-glass .wcp-calc-inner {
		grid-template-columns:minmax(210px,.8fr) minmax(360px,1.25fr) minmax(360px,1.1fr);
		gap:16px 18px;
	}
	.wcp-glass .wcp-calc-label { font-size:13px; }
	.wcp-glass .wcp-calc-item { gap:9px; }
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns { min-width:280px; }
}

@media (max-width:640px) {
	.wcp-glass .wcp-calc-inner {
		grid-template-columns:1fr;
		grid-template-areas:
			"area"
			"dest"
			"groove"
			"team"
			"wage"
			"cement";
		gap:9px;
		max-width:100%;
	}
	.wcp-glass .wcp-calc-item {
		display:grid;
		grid-template-columns:96px minmax(0,1fr);
		justify-content:stretch;
		align-items:center;
		gap:8px;
	}
	.wcp-glass .wcp-calc-label {
		justify-self:start;
	}
	.wcp-glass .wcp-calc-area-wrap,
	.wcp-glass .wcp-dest-wrap,
	.wcp-glass .wcp-calc-btns {
		justify-self:stretch;
		min-width:0;
	}
	.wcp-glass .wcp-calc-area-wrap {
		justify-content:flex-start;
	}
	.wcp-glass .wcp-calc-area-wrap input {
		width:68px;
	}
	.wcp-glass .wcp-calc-item--wage .wcp-calc-area-wrap input,
	.wcp-glass .wcp-calc-item--cement .wcp-calc-area-wrap input {
		width:76px;
	}
	.wcp-glass .wcp-dest-wrap input[type="search"] {
		width:100%;
		min-width:0;
	}
	.wcp-glass .wcp-calc-label,
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		font-size:12px;
		line-height:1.2;
	}
	.wcp-glass .wcp-calc-label i,
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label i {
		font-size:15px;
	}
	.wcp-glass .wcp-calc-item--dest .wcp-dest-wrap,
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		max-width:none;
		min-width:0;
	}
}

/* Compare page typography pass: keep hierarchy without making every value bold */
.wcp-page {
	--wcp-weight-regular: 400;
	--wcp-weight-ui: 500;
	--wcp-weight-label: 600;
	--wcp-weight-strong: 700;
	--wcp-weight-hero: 800;
}
.wcp-h1 {
	font-size:30px;
	font-weight:700;
	letter-spacing:0;
}
.wcp-hs,
.wcp-back-bar a,
.wcp-hl-toggle,
.wcp-prod-price-wrap,
.wcp-route,
.wcp-sub-area,
.wcp-sub-wt,
.wcp-sum-k,
.wcp-sum-muted {
	font-weight:var(--wcp-weight-ui);
}
.wcp-hs-n,
.wcp-hs-hint,
.wcp-pdf-btn,
.wcp-swap-btn,
.wcp-winner-badge {
	font-weight:var(--wcp-weight-label);
}
.wcp-glass .wcp-calc-label,
.wcp-calc-label {
	font-size:13px;
	font-weight:var(--wcp-weight-label);
}
.wcp-calc-area-wrap input,
.wcp-dest-wrap input[type="search"],
.wcp-prod-price-wrap input {
	font-weight:var(--wcp-weight-label);
}
.wcp-calc-btns button {
	font-weight:var(--wcp-weight-ui);
}
.wcp-calc-btns button.wcp-btn-on {
	font-weight:var(--wcp-weight-label);
}
.wcp-prod-name {
	font-size:15px;
	font-weight:var(--wcp-weight-strong);
	line-height:1.35;
}
.wcp-inlabel {
	font-size:11px;
	font-weight:var(--wcp-weight-ui);
	letter-spacing:0;
	text-transform:none;
}
.wcp-row-val {
	font-size:14px;
	font-weight:var(--wcp-weight-ui);
	line-height:1.45;
}
.wcp-row--diff .wcp-inlabel {
	font-weight:var(--wcp-weight-label);
}
.wcp-hl-active .wcp-row--diff .wcp-row-val:not(.wcp-row-val--empty) {
	font-weight:var(--wcp-weight-ui);
}
.wcp-big {
	font-size:23px;
	font-weight:var(--wcp-weight-strong);
}
.wcp-med {
	font-size:17px;
	font-weight:var(--wcp-weight-label);
}
#wcp-row-bricks .wcp-big {
	font-weight:var(--wcp-weight-strong);
}
#wcp-row-mortar .wcp-med,
#wcp-row-time .wcp-med {
	font-size:18px;
	font-weight:var(--wcp-weight-label);
}
#wcp-row-transport .wcp-med {
	font-size:21px;
	font-weight:var(--wcp-weight-strong);
}
#wcp-row-grandtotal .wcp-big {
	font-size:30px;
	font-weight:var(--wcp-weight-hero);
}
.wcp-sub-cost,
.wcp-sub-cost .wcp-money-inline {
	font-size:13px;
	font-weight:var(--wcp-weight-ui);
}
.wcp-money-inline,
.wcp-route .wcp-money-inline,
.wcp-sum-v .wcp-money-inline {
	font-weight:var(--wcp-weight-strong);
}
.wcp-route {
	font-size:13px;
	line-height:1.5;
}
.wcp-route-vehicle {
	font-weight:var(--wcp-weight-ui);
}
.wcp-sum-hname {
	font-weight:var(--wcp-weight-label);
}
.wcp-sum-badge {
	font-weight:var(--wcp-weight-label);
}
.wcp-sum-v,
.wcp-sum-v b {
	font-weight:var(--wcp-weight-ui);
}
.wcp-sum-total-row .wcp-sum-k,
.wcp-sum-big {
	font-weight:var(--wcp-weight-strong);
}
.wcp-calc-note {
	font-size:14px;
	font-weight:var(--wcp-weight-label);
	line-height:1.6;
}
.wcp-calc-note a {
	color:inherit;
	font-weight:var(--wcp-weight-strong);
	text-decoration:underline;
	text-underline-offset:2px;
}

@media (max-width:640px) {
	.wcp-h1 { font-size:20px; font-weight:700; }
	.wcp-glass .wcp-calc-label,
	.wcp-glass .wcp-calc-inner > .wcp-calc-group ~ .wcp-calc-group .wcp-calc-label {
		font-size:12px;
		font-weight:var(--wcp-weight-label);
	}
	.wcp-prod-name { font-size:13px; font-weight:var(--wcp-weight-label); }
	.wcp-row-val { font-size:13px; font-weight:var(--wcp-weight-ui); }
	.wcp-big { font-size:20px; }
	.wcp-med { font-size:15px; }
	#wcp-row-transport .wcp-med { font-size:18px; font-weight:var(--wcp-weight-strong); }
	#wcp-row-grandtotal .wcp-big { font-size:24px; }
	#wcp-row-mortar .wcp-med,
	#wcp-row-time .wcp-med { font-size:16px; }
	.wcp-sub-cost,
	.wcp-sub-cost .wcp-money-inline { font-size:12px; }
	.wcp-calc-note { font-size:13px; font-weight:var(--wcp-weight-label); }
}

/* Groove selector: six options from 0.5 to 3.0 */
.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
	max-width:440px;
	min-width:420px;
	width:100%;
}
.wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
	flex:1 1 0;
	padding-left:10px;
	padding-right:10px;
	text-align:center;
}

@media (max-width:1180px) and (min-width:641px) {
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		min-width:360px;
	}
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
		padding-left:8px;
		padding-right:8px;
	}
}

@media (max-width:640px) {
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
		min-width:0;
		max-width:none;
		width:100%;
	}
	.wcp-glass .wcp-calc-item--groove .wcp-calc-btns button {
		flex:1 1 0;
		padding:3px 2px;
		font-size:11px;
	}
}

/* ── Print / PDF export ── */
.wcp-no-print { }
@media print {
	/* Hide nav, interactive elements */
	.site-header, .site-nav, footer.site-footer,
	.wcp-back-bar, .wcp-howto-bar, .wcp-slot-picker,
	.wcp-swap-wrap, .wcp-cta-row, .wcp-no-print,
	.wcp-hl-toggle, .wzd-sticky-line, .wzd-bottom-nav,
	#wc-cookie-notice, #cookie-notice { display:none !important; }

	/* Unstick toolbar */
	.wcp-glass-wrap { padding:0 !important; }
	.wcp-mini-hdr { display:none !important; visibility:hidden !important; }
	.wcp-glass {
		background:#fff !important;
		-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
		border:1px solid #d2d2d7 !important; border-radius:8px !important;
		box-shadow:none !important; padding:12px 16px !important;
	}

	/* Show all 3 columns */
	.wcp-page { --wcp-visible-n:3 !important; }
	.wcp-slot-hidden { display:block !important; }
	.wcp-prod-cell.wcp-slot-hidden, .wcp-row-val.wcp-slot-hidden { display:block !important; }
	.wcp-prod-row { grid-template-columns:repeat(3,1fr) !important; }
	.wcp-row-vals { grid-template-columns:repeat(3,1fr) !important; }

	/* Make inputs look like text */
	.wcp-prod-price, #wcp-area, #wcp-team, #wcp-wage, #wcp-cement-price {
		border:none !important; background:transparent !important;
		padding:0 !important; font-weight:700; font-size:inherit !important;
	}
	.wcp-prod-price-wrap { justify-content:center; }

	/* Disable backdrop for prodcards */
	.wcp-prod-img-wrap { background:#f5f5f5 !important; }

	/* Page breaks */
	.wcp-prod-row, .wcp-row, .wcp-sum-card { page-break-inside:avoid; }
	.wcp-table { padding:4px 0 1rem; }
	/* Summary in print */
	.wcp-summary { display:block !important; }
	.wcp-sum-card { background:#fff !important; }
	.wcp-sum-head { background:var(--wcp-brick) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
	.wcp-sum-head--win { background:#087a36 !important; }
	.wcp-truck-chip { display:none !important; }
	.wcp-summary-grid { grid-template-columns:repeat(3,1fr) !important; }

	/* Footer note */
	.wcp-calc-note { font-size:10px; color:#888; }
}

/* ══════════════════════════════════════════════════════════════
   PDP v11 — kill legacy double-padding on calculator card (OODA 2026-07-03)
   Root cause: two stale pre-v4 rules — .wzd-cq{padding:18px!important} (540px)
   and .wzd-pdp-colfm{padding:16px!important} (480px) — stack on top of v4's
   OWN internal padding (.wzd-cq-v4-head/.wzd-cq-step already pad 16-18px),
   plus .wzd-container's 16px page edge. Result: 16+18+16+16=66px dead space
   before any input reached the edge on a 375px screen. v4 card design
   already supplies padding via its internal sections — outer wrappers
   must be 0 so the card content runs edge-to-edge inside .wzd-container.
   (Re-applied — a concurrent edit to this file dropped the first pass.)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
	.wzd-pdp.wzd-pdp .wzd-cq { padding: 0 !important; }
}
@media (max-width: 480px) {
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm { padding: 0 !important; }
}
@media (max-width: 540px) {
	.wzd-pdp.wzd-pdp .wzd-cq-v4-head { padding: 14px 16px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   PDP v12 — compact "สินค้าใกล้เคียง" related-product cards (2026-07-03)
   Root cause: square (1:1) image + 16px image padding + a bordered pill
   button with its own top divider made each card ~275px tall on a
   ~120px-wide column — tall, disproportionate, not compact. Scoped to
   .wzd-prod-grid--4bot only (this PDP section) so other product grids
   site-wide (bestseller, category archive, article-related) are untouched.
   ══════════════════════════════════════════════════════════════ */
.wzd-prod-grid--4bot { gap: 10px !important; }
.wzd-prod-grid--4bot .wzd-prod-img {
	aspect-ratio: 4/3 !important;
	padding: 8px !important;
}
.wzd-prod-grid--4bot .wzd-prod-body {
	padding: 8px 10px 10px !important;
	gap: 2px !important;
}
.wzd-prod-grid--4bot .wzd-prod-name {
	font-size: 12.5px !important;
	line-height: 1.3 !important;
	min-height: 0 !important;
	margin: 0 !important;
}
.wzd-prod-grid--4bot .wzd-prod-dims {
	font-size: 11px !important;
	margin: 1px 0 0 !important;
}
.wzd-prod-grid--4bot .wzd-prod-actions {
	margin-top: 6px !important;
	padding-top: 0 !important;
	border-top: none !important;
}
.wzd-prod-grid--4bot .wzd-prod-link {
	padding: 6px 10px !important;
	font-size: 11.5px !important;
	border-radius: 9px !important;
}
.wzd-prod-grid--4bot .wzd-prod-badge-usage {
	font-size: 9.5px !important;
	padding: 2px 6px !important;
}

/* ══════════════════════════════════════════════════════════════
   PDP v13 — "สินค้าใกล้เคียง" switched to the .wzd-hub-card component
   (same compact card already proven on category hub pages), with the
   product-photo backdrop forced to white instead of hub pages' cream
   (2026-07-03, user reference: hub-card layout, white image bg).
   ══════════════════════════════════════════════════════════════ */
.wzd-hub-card-grid--flat .wzd-hub-card-img {
	background: #fff !important;
}
.wzd-hub-card-grid--flat .wzd-hub-card {
	box-shadow: 0 1px 3px rgba(46,46,49,.06);
}

/* ============================================================================
   36. RAW TABLE THEME — Google Sheets / paste-in tables inside article body
   Same visual language as .wp-block-table (brick header, stripe rows, compact)
   ============================================================================ */

/* Reset Google Sheets inline attributes */
.wzd-art-body table,
.wzd-table-scroll table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13.5px;
  line-height: 1.55;
  border: none !important;
  table-layout: auto;
}
.wzd-art-body colgroup,
.wzd-table-scroll colgroup { display: none; }

/* Header row — first <tr> (Google Sheets uses <td><strong> not <th>) */
.wzd-art-body table > tbody > tr:first-child > td,
.wzd-art-body table > thead > tr > th,
.wzd-table-scroll table > tbody > tr:first-child > td,
.wzd-table-scroll table > thead > tr > th {
  background: linear-gradient(135deg, #6E1D1A 0%, #8E2521 100%) !important;
  color: #fff !important;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  border: none !important;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.wzd-art-body table > tbody > tr:first-child > td strong,
.wzd-table-scroll table > tbody > tr:first-child > td strong {
  color: #fff !important;
  font-weight: 700;
}

/* Body rows */
.wzd-art-body table > tbody > tr:not(:first-child) > td,
.wzd-table-scroll table > tbody > tr:not(:first-child) > td {
  padding: 9px 15px;
  border: none !important;
  border-bottom: 1px solid #EDE8E1 !important;
  vertical-align: top;
  font-size: 13.5px;
  color: #2E2E31;
}
.wzd-art-body table > tbody > tr:last-child > td,
.wzd-table-scroll table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Zebra stripe */
.wzd-art-body table > tbody > tr:nth-child(even) > td,
.wzd-table-scroll table > tbody > tr:nth-child(even) > td {
  background: #FAF6F1;
}
.wzd-art-body table > tbody > tr:nth-child(odd):not(:first-child) > td,
.wzd-table-scroll table > tbody > tr:nth-child(odd):not(:first-child) > td {
  background: #fff;
}

/* First column = label — styled as row header */
.wzd-art-body table > tbody > tr:not(:first-child) > td:first-child,
.wzd-table-scroll table > tbody > tr:not(:first-child) > td:first-child {
  font-weight: 600;
  color: #4a2520;
  background: #FDF5EE !important;
  white-space: nowrap;
  border-right: 1px solid #E8E0D6 !important;
}

/* Scroll wrapper — card radius + shadow */
.wzd-table-scroll {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(46,46,49,.09);
  border: 1px solid #E8E0D6 !important;
  margin: 24px 0;
}

/* Mobile — allow horizontal scroll, no body overflow */
@media (max-width: 768px) {
  .wzd-table-scroll { margin: 16px -4px; }
  .wzd-art-body table > tbody > tr:not(:first-child) > td,
  .wzd-table-scroll table > tbody > tr:not(:first-child) > td { padding: 8px 11px; font-size: 12.5px; }
  .wzd-art-body table > tbody > tr:first-child > td,
  .wzd-table-scroll table > tbody > tr:first-child > td { padding: 9px 11px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   PDP v14 — mobile compact fixes (2026-07-03)
   1) ② แนวการก่อ — sub-label capped at 2 lines (nowrap + smaller)
   2) สินค้าใกล้เคียง — smaller photo, gray backdrop (was white, v13)
   3) Hero image — shorter on mobile so photo + info fit one screen
   ══════════════════════════════════════════════════════════════ */

/* 1) orientation buttons — force 2 lines max (beats .wzd-pdp-colfm !important) */
@media (max-width:480px){
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn{
		padding:7px 3px !important;
	}
	.wzd-pdp.wzd-pdp .wzd-pdp-colfm .wzd-cq-orient-btn-s{
		font-size:9.5px !important;
		white-space:nowrap !important;
	}
	.wzd-pdp.wzd-pdp .wzd-cq-orient-btn-s{
		font-size:9.5px !important;
		white-space:nowrap !important;
	}
}

/* 2) สินค้าใกล้เคียง — smaller product photo on a gray backdrop */
.wzd-hub-card-grid--flat .wzd-hub-card-img{
	background:#EBE7E1 !important;
	padding:18px !important;
}
.wzd-hub-card-grid--flat .wzd-hub-card-img img{
	object-fit:contain !important;
}
/* Minimal card — image + name only, no dim/poa line — tighter info bar */
.wzd-hub-card--minimal .wzd-hub-card-info{
	padding:9px 11px !important;
}
.wzd-hub-card--minimal .wzd-hub-card-name{
	margin-bottom:0 !important;
}

/* 3) Hero image — full-bleed on mobile (gallery in pdp2 template) */
@media (max-width:560px){
	.wzd-pdp2-gallery .wzd-pdp-mainimg{
		aspect-ratio: unset !important;
		width: 100% !important;
		margin: 0 !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   HOME v1 — homepage mobile UX pass (2026-07-03)
   ══════════════════════════════════════════════════════════════ */

/* 1) Hero CTAs — fix overflow bug: a later "min touch target" pass
   (flex-wrap:nowrap at ~768px) silently overrode the earlier intentional
   wrap rule, forcing all 3 hero buttons onto one row and clipping the
   3rd ("คำนวณวัสดุ") off the right edge of the screen. Restore the
   original design: 2 buttons side by side, ghost/calculator button
   drops to its own full-width row. */
@media (max-width:768px){
	.wzd-hero-ctas{ flex-wrap:wrap !important; }
	.wzd-hero-ctas .wzd-btn{ flex:1 1 calc(50% - 4px) !important; }
	.wzd-hero-ctas .wzd-btn--ghost{ flex:1 1 100% !important; }
}
@media (max-width:420px){
	.wzd-hero-ctas .wzd-btn--primary,
	.wzd-hero-ctas .wzd-btn--outline{ flex:1 1 100% !important; }
}

/* 2) Service pillars carousel (mobile) — each card previews at 78% width
   with the next card peeking in, which read as "cut off / broken" rather
   than "swipe for more". Add an edge fade so the truncation reads as an
   intentional scroll affordance, and shrink the peek slightly so more of
   the next card's icon is visible as a stronger hint. */
@media (max-width:680px){
	.wzd-pillars-section{ position:relative; }
	.wzd-pillars{ grid-auto-columns:82% !important; }
	.wzd-pillars-section::after{
		content:'';
		position:absolute; top:0; right:0; bottom:0; width:28px;
		background:linear-gradient(to right, transparent, var(--c-bg-cream,#F8F5EF));
		pointer-events:none;
	}
}

/* 3) Bestseller cards — drop the duplicate "ขนาด" line when the product
   title already states the same dimensions, so the card doesn't repeat
   itself (e.g. "หินทราย สีขาวลาย 10x30 ซม." followed by "ขนาด 10 x 30 ซม."). */
.wzd-prod-pdf .wzd-prod-size{
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Hub Page Banner ── */
.wzd-hub-banner{
	position:relative;
	width:100%;
	overflow:hidden;
	height:360px;
	margin:0;
	line-height:0;
}
.wzd-hub-banner-img{
	display:block !important;
	width:100% !important;
	height:360px !important;
	max-width:100% !important;
	object-fit:cover !important;
	object-position:center 35%;
}
.wzd-hub-banner-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(to right,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.65) 58%,rgba(255,255,255,.15) 76%,transparent 90%);
	display:flex;
	align-items:center;
	line-height:1;
}
.wzd-hub-banner-overlay .wzd-container{
	width:100%;
}
.wzd-hub-banner-text{
	max-width:46%;
	padding:0;
}
.wzd-hub-banner-eyebrow{
	font-size:11px;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--c-brick,#8E2521);
	margin-bottom:12px;
}
.wzd-hub-banner-title{
	font-size:40px;
	font-weight:700;
	color:var(--c-ink,#2e2e31);
	line-height:1.1;
	margin-bottom:10px;
	letter-spacing:-.6px;
}
.wzd-hub-banner-desc{
	font-size:14px;
	color:var(--c-ink-soft,#6B6661);
	line-height:1.65;
	font-weight:400;
	max-width:340px;
}
@media(max-width:900px){
	.wzd-hub-banner{height:260px}
	.wzd-hub-banner-img{height:260px !important}
	.wzd-hub-banner-title{font-size:30px}
	.wzd-hub-banner-text{max-width:58%}
	.wzd-hub-banner-desc{font-size:13px}
}
@media(max-width:600px){
	.wzd-hub-banner{height:185px}
	.wzd-hub-banner-img{height:185px !important;object-position:center 38%}
	.wzd-hub-banner-eyebrow{display:none}
	.wzd-hub-banner-title{font-size:20px;margin-bottom:5px}
	.wzd-hub-banner-desc{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}
	.wzd-hub-banner-text{max-width:68%}
}

/* ── Mobile product card: เพิ่มช่องไฟรอบภาพ ── */
@media(max-width:600px){
	.wzd-prod-img{padding:16px}
	.wzd-prod-grid{gap:10px}
	.wzd-hub-page .wzd-hub-card-img{padding:14px 14px 10px}
	.wzd-hub-prod-grid{gap:8px !important}
}


/* ══════════════════════════════════════════════════════
   PDP v2 — High-specificity override for gallery mainimg
   (beats .wzd-pdp.wzd-pdp .wzd-pdp-mainimg 0-3-0 rule)
   ══════════════════════════════════════════════════════ */
.wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg {
	background: #F8F5EF !important;
	border-radius: 22px !important;
	box-shadow: none !important;
	padding: 14px !important;
	border: none !important;
	margin-bottom: 0 !important;
	aspect-ratio: 1/1 !important;
}
.wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg img {
	object-fit: contain !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
}
@media (max-width: 768px) {
	.wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg {
		border-radius: 0 !important;
		height: unset !important;
		aspect-ratio: 1 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 8px !important;
	}
}

/* ══ PDP Accordion — Global (all screen sizes) ══════════════════════════ */
.wzd-accord {
  border: 1px solid var(--c-line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.wzd-accord-item { border-bottom: 0.5px solid var(--c-line-soft); }
.wzd-accord-item:last-child { border-bottom: none; }
.wzd-accord-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--c-ink); text-align: left;
  transition: background 0.15s; line-height: 1.3;
}
.wzd-accord-btn:hover { background: var(--c-bg-soft, #f8f5ef); }
.wzd-accord-btn[aria-expanded="true"] { color: var(--c-brick); }
.wzd-accord-chevron {
  flex-shrink: 0; transition: transform 0.25s;
  display: inline-flex; align-items: center;
}
.wzd-accord-btn[aria-expanded="true"] .wzd-accord-chevron { transform: rotate(180deg); }
.wzd-accord-panel { display: none; }
.wzd-accord-panel.open { display: block; padding: 0 20px 18px; }
.wzd-accord-panel ul { margin: 0; padding-left: 20px; }
.wzd-accord-panel ul li { font-size: 14px; color: var(--c-ink); line-height: 1.65; margin-bottom: 6px; }
.wzd-accord-panel ul li:last-child { margin-bottom: 0; }

/* ══ PDP Related Products Grid — Global (all screen sizes) ══════════════ */
.wzd-pdp-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.wzd-pdp-rel-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--c-line-soft);
  border-radius: 14px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow 0.2s;
}
.wzd-pdp-rel-card:hover {
  border-color: var(--c-brick); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(142,37,33,.10); text-decoration: none;
}
.wzd-pdp-rel-img {
  aspect-ratio: 1; background: #F8F5EF; padding: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.wzd-pdp-rel-img img { width: 100%; height: 100%; object-fit: contain; }
.wzd-pdp-rel-info { padding: 12px 14px 14px; }
.wzd-pdp-rel-name {
  font-size: 13.5px; font-weight: 700; color: var(--c-ink); line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wzd-pdp-rel-dim { font-size: 12px; color: var(--c-ink-soft); margin: 4px 0 0; }

/* ══ PDP v2 Mobile — Match Mockup 100% ══════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Cream page background on mobile */
  .single-product .wzd-pdp,
  .single-product .woocommerce-page .wzd-pdp {
    background: #F8F5EF !important;
    padding-bottom: 80px !important;
  }

  /* 2. Below-fold sections: flat white on cream bg */
  .wzd-pdp-sec {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 10px 0 0 !important;
  }
  .wzd-pdp-sec--inner {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 10px 0 0 !important;
  }

  /* 3. Section heading: red bar instead of icon box */
  .wzd-pdp-sec-h, h2.wzd-pdp-sec-h {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .wzd-pdp-sec-h i { display: none !important; }
  .wzd-pdp-sec-h::before {
    content: '' !important;
    width: 3px;
    min-width: 3px;
    height: 14px;
    background: #8E2521;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
  }

  /* 4. Step cards: vertical layout (matches mockup: circle → title → desc) */
  .wzd-pdp-steps {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wzd-pdp-steps .wzd-step {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: left !important;
    padding: 12px 14px 14px !important;
    background: #F8F5EF !important;
    border: 1px solid #E7D9C8 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .wzd-pdp-steps .wzd-step:hover { transform: none !important; box-shadow: none !important; border-color: #E7D9C8 !important; }
  .wzd-pdp-steps .wzd-step-n {
    position: static !important;
    top: auto !important; left: auto !important;
    width: 26px !important; height: 26px !important; min-width: 26px !important;
    background: rgba(142,37,33,.12) !important;
    border-radius: 50% !important;
    font-size: 12px !important; font-weight: 800 !important;
    color: #8E2521 !important;
    border: none !important; box-shadow: none !important;
    flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .wzd-pdp-steps .wzd-step-ic { display: none !important; }
  .wzd-pdp-steps .wzd-step-t {
    font-size: 14px !important; font-weight: 700 !important;
    margin: 0 !important; color: #2E2E31 !important; line-height: 1.3 !important;
  }
  .wzd-pdp-steps .wzd-step-d {
    font-size: 12px !important; color: #5C5C61 !important;
    line-height: 1.55 !important; margin: 0 !important;
  }

  /* 5. Accordion: มาตรฐานและการจัดส่ง */
  .wzd-accord {
    border: 1px solid #E7D9C8;
    border-radius: 12px;
    overflow: hidden;
  }
  .wzd-accord-item { border-bottom: 1px solid #E7D9C8; }
  .wzd-accord-item:last-child { border-bottom: none; }
  .wzd-accord-btn {
    width: 100%; background: none; border: none;
    padding: 13px 14px;
    display: flex; align-items: center; justify-content: space-between;
    text-align: left; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #2E2E31;
    font-family: inherit; line-height: 1.4;
  }
  .wzd-accord-btn > span:first-child i {
    margin-right: 7px; color: #8E2521; font-size: 14px; vertical-align: -2px;
  }
  .wzd-accord-chevron { font-size: 13px; color: #5C5C61; transition: .2s; flex-shrink: 0; display: inline-flex; }
  .wzd-accord-btn[aria-expanded="true"] .wzd-accord-chevron { transform: rotate(180deg); color: #8E2521; }
  .wzd-accord-panel {
    display: none; padding: 0 14px 14px;
    font-size: 12px; line-height: 1.6; color: #5C5C61;
  }
  .wzd-accord-panel.open { display: block; }
  .wzd-accord-panel ul { padding-left: 16px; margin: 0; }
  .wzd-accord-panel ul li { margin-bottom: 4px; }

  /* 6. Article cards: horizontal layout */
  .wzd-pdp-sec .wzd-art-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wzd-pdp-sec .wzd-art {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    background: #F8F5EF !important;
    border: 1px solid #E7D9C8 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: none !important;
  }
  .wzd-pdp-sec .wzd-art:hover { transform: none !important; box-shadow: none !important; }
  .wzd-pdp-sec .wzd-art-img {
    width: 64px !important; height: 64px !important;
    aspect-ratio: 1/1 !important; min-height: unset !important;
    flex-shrink: 0; border-radius: 8px !important;
  }
  .wzd-pdp-sec .wzd-art-img::before { display: none !important; }
  .wzd-pdp-sec .wzd-art-tag {
    position: static !important; padding: 0 !important; background: none !important;
    border-radius: 0 !important; font-size: 10px !important; color: #8E2521 !important;
    font-weight: 700 !important; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
  }
  .wzd-pdp-sec .wzd-art-body { padding: 0 !important; flex: 1; min-width: 0; }
  .wzd-pdp-sec .wzd-art-title {
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .wzd-pdp-sec .wzd-art-meta,
  .wzd-pdp-sec .wzd-art-excerpt { display: none !important; }

  /* 7. FAQ: details/summary styled like mockup faq-item */
  .wzd-pdp-faq { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .wzd-pdp-faq details {
    background: #F8F5EF !important;
    border: 1px solid #E7D9C8 !important;
    border-radius: 12px !important; overflow: hidden !important; padding: 0 !important;
  }
  .wzd-pdp-faq details[open] { border-color: rgba(142,37,33,.3) !important; }
  .wzd-pdp-faq summary {
    padding: 12px 14px !important; font-size: 13px !important; font-weight: 700 !important;
    color: #2E2E31 !important; display: flex !important; align-items: flex-start !important;
    justify-content: space-between !important; gap: 8px !important; line-height: 1.4 !important;
    cursor: pointer; list-style: none !important;
  }
  .wzd-pdp-faq summary::-webkit-details-marker { display: none !important; }
  .wzd-pdp-faq summary::after {
    content: '+' !important; font-size: 16px !important; font-weight: 700 !important;
    color: #8E2521 !important; flex-shrink: 0 !important; line-height: 1; margin-top: 1px;
  }
  .wzd-pdp-faq details[open] summary::after { content: '−' !important; }
  .wzd-pdp-faq details p {
    padding: 0 14px 14px !important; font-size: 12px !important;
    line-height: 1.65 !important; color: #5C5C61 !important; margin: 0 !important; display: block !important;
  }

  /* 8. Related products: 2×2 grid */
  .wzd-pdp-rel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wzd-pdp-rel-card {
    background: #fff; border: 1px solid #E7D9C8; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit; display: block;
  }
  .wzd-pdp-rel-img {
    width: 100%; aspect-ratio: 1/1; background: #F8F5EF;
    display: flex; align-items: center; justify-content: center; padding: 12px;
  }
  .wzd-pdp-rel-img img { width: 100%; height: 100%; object-fit: contain; }
  .wzd-pdp-rel-noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #9ca3af;
  }
  .wzd-pdp-rel-info { padding: 8px 10px 10px; }
  .wzd-pdp-rel-name {
    font-size: 12px; font-weight: 700; line-height: 1.3; color: #2E2E31; margin-bottom: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .wzd-pdp-rel-dim { font-size: 10px; color: #5C5C61; }

  /* 9. Quick nav: hide on mobile */
  .wzd-pdp-qnav-label,
  .wzd-pdp-qnav { display: none !important; }

  /* 10. Sticky CTA: big quote + small LINE icon */
  .wzd-pdp-sticky {
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .wzd-pdp-sticky-text { display: none !important; }
  .wzd-pdp-sticky-btns {
    flex: 1 !important; gap: 8px !important; display: flex !important;
  }
  .wzd-pdp-sticky-quote {
    flex: 1 !important; font-size: 14px !important; font-weight: 800 !important;
    padding: 14px 16px !important; border-radius: 12px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 8px !important;
  }
  .wzd-pdp-sticky-line {
    flex: none !important; width: 52px !important; height: 52px !important;
    border-radius: 12px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 0 !important;
  }
  .wzd-pdp-sticky-line .ti { font-size: 24px !important; }
  .wzd-pdp-sticky-tel { display: none !important; }
}

/* ══ PDP Desktop (min-width: 769px) ════════════════════════════════════ */
@media (min-width: 769px) {
  /* Steps: fill full container width as equal-width grid cards */
  .wzd-pdp-steps {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    flex-direction: unset !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 12px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
  }
  .wzd-pdp-steps .wzd-step {
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
    width: 100% !important;
  }
  /* Accordion: slightly larger padding on desktop */
  .wzd-accord-btn { padding: 18px 24px !important; font-size: 15px !important; }
  .wzd-accord-panel.open { padding: 0 24px 20px !important; }
  /* Related products: larger cards on desktop (override mobile 2-col) */
  .wzd-pdp-rel-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 16px !important;
  }
  .wzd-pdp-rel-card { border-radius: 14px !important; }
  .wzd-pdp-rel-img { padding: 16px !important; aspect-ratio: 1 !important; }
  .wzd-pdp-rel-name { font-size: 13.5px !important; }
}

/* ══ Mobile Fixes Batch 2 (2026-07-04) ══════════════════════════════════ */

/* Fix 2: legend ปูนก่อ — prevent 2-line wrap */
.wzd-pdp.wzd-pdp .wzd-pdp-mid .wzd-cq-viz-legend > span:not(.wzd-cq-viz-aux) {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  /* Fix 3: orient แนวก่อ — หนา small label, X ซม. big like badge-num */
  .wzd-pdp.wzd-pdp [data-orient-wall] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    opacity: 0.75 !important;
  }
  .wzd-pdp.wzd-pdp .wzd-wall-num {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--c-brick) !important;
    line-height: 1 !important;
    display: block !important;
  }
  /* Fix 4: related articles — 2 columns × 2 rows on mobile */
  .wzd-pdp-sec .wzd-art-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .wzd-pdp-sec .wzd-art-body { padding: 10px !important; }
  .wzd-pdp-sec .wzd-art-title { font-size: 12.5px !important; -webkit-line-clamp: 3 !important; }
  .wzd-pdp-sec .wzd-art-meta { font-size: 11px !important; }
  /* Fix 5: related products — 2 columns × 2 rows on mobile */
  .wzd-pdp-rel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .wzd-pdp-rel-img { padding: 10px !important; }
  .wzd-pdp-rel-name { font-size: 12px !important; }
  .wzd-pdp-rel-dim { font-size: 11px !important; }
}

/* Fix 4b: article card — switch to column layout inside 2-col grid */
@media (max-width: 768px) {
  .wzd-pdp-sec .wzd-art {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  .wzd-pdp-sec .wzd-art-img {
    width: 100% !important;
    height: 90px !important;
    aspect-ratio: unset !important;
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: unset !important;
  }
  .wzd-pdp-sec .wzd-art-tag {
    margin-bottom: 2px !important;
  }
  .wzd-pdp-sec .wzd-art-body {
    padding: 8px !important;
    flex: 1 !important;
  }
}

/* Fix 2b: legend ปูนก่อ — correct selector (pdp2-action context) */
.wzd-pdp2-action .wzd-cq-viz-legend > span:not(.wzd-cq-viz-aux),
.wzd-cq-viz-legend > span:not(.wzd-cq-viz-aux) {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ══ Desktop Fixes (2026-07-04) ══════════════════════════════════ */
@media (min-width: 769px) {
  /* Articles: 4 per row on desktop PDP */
  .wzd-pdp-sec .wzd-art-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  /* Related products: 6 per row on desktop */
  .wzd-pdp-rel-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
  }
}

/* ══ Mobile Fixes Batch 3 (2026-07-05) ══════════════════════════════════ */

/* Fix 1: gallery — small side gap + controlled image height */
@media (max-width: 768px) {
  .wzd-pdp.wzd-pdp .wzd-pdp2-gallery {
    margin-left: -4px !important;
    margin-right: -4px !important;
    margin-bottom: 4px !important;
  }
  .wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg {
    aspect-ratio: unset !important;
    height: clamp(180px, 54vw, 230px) !important;
    border-radius: 8px !important;
    padding: 10px !important;
  }
}

/* Fix 2: spec chips — iOS card grid (label above value, 2-col) */
.wzd-pdp2-spec-chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 12px 0 6px !important;
}
.wzd-pdp2-spec-chip {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: inherit !important;
}
.wzd-pdp2-chip-lbl {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--c-ink-mute) !important;
  letter-spacing: 0.04em !important;
}
.wzd-pdp2-spec-chip strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-ink) !important;
  line-height: 1.3 !important;
}

/* Fix 3: calculator form — equal boxes, × above col 2 label, bigger label text */
@media (max-width: 768px) {
  .wzd-pdp.wzd-pdp .wzd-cq-area-3col {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    align-items: end !important;
  }
  .wzd-pdp.wzd-pdp .wzd-cq-area-sep {
    display: none !important;
  }
  .wzd-pdp.wzd-pdp .wzd-cq-col-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-ink) !important;
    text-align: center !important;
    white-space: normal !important;
    margin-bottom: 5px !important;
  }
  /* × appears above the สูง column label (2nd input-group = child 3 because sep is child 2) */
  .wzd-pdp.wzd-pdp .wzd-cq-area-3col .wzd-cq-input-group:nth-child(3) .wzd-cq-col-label::before {
    content: "× ";
    color: var(--c-brick);
    font-weight: 800;
  }
}

/* Fix 4: related articles — 1 per row on mobile, horizontal card, lighter text */
@media (max-width: 768px) {
  .wzd-pdp-sec .wzd-art-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wzd-pdp-sec .wzd-art {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .wzd-pdp-sec .wzd-art-img {
    width: 88px !important;
    min-width: 88px !important;
    height: 88px !important;
    aspect-ratio: 1 !important;
    border-radius: 10px 0 0 10px !important;
    flex-shrink: 0 !important;
  }
  .wzd-pdp-sec .wzd-art-body {
    padding: 10px 12px !important;
    flex: 1 !important;
  }
  .wzd-pdp-sec .wzd-art-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.4 !important;
  }
  .wzd-pdp-sec .wzd-art-meta {
    font-size: 11px !important;
    font-weight: 400 !important;
  }
}

/* ══ Mobile Fixes Batch 4 (2026-07-05) ══════════════════════════════════ */

/* Fix: gallery — ลดขนาดภาพ (ย้าย chips ออกไปแล้ว ไม่ต้องใหญ่) */
@media (max-width: 768px) {
  .wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg {
    height: clamp(110px, 38vw, 150px) !important;
    padding: 8px !important;
  }
}

/* Hide old chips (moved to meta section as rows) */
.wzd-pdp2-spec-chips { display: none !important; }

/* ══ Mobile Fixes Batch 5 (2026-07-05) ══════════════════════════════════ */

/* Fix 1: ภาพสินค้า — เพิ่มขนาดกลับ (Batch 4 เล็กเกินไป) */
@media (max-width: 768px) {
  .wzd-pdp.wzd-pdp .wzd-pdp2-gallery .wzd-pdp-mainimg {
    height: clamp(180px, 52vw, 220px) !important;
    padding: 10px !important;
  }
}

/* Fix 2: บทความที่เกี่ยวข้อง — การ์ด 1:1 ภาพบน ข้อความล่าง 2 บรรทัด */
@media (max-width: 768px) {
  .wzd-pdp-sec .wzd-art-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .wzd-pdp-sec .wzd-art {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .wzd-pdp-sec .wzd-art-img {
    width: 100% !important;
    min-width: unset !important;
    height: unset !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: 0 !important;
  }
  .wzd-pdp-sec .wzd-art-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .wzd-pdp-sec .wzd-art-body {
    padding: 10px 12px 12px !important;
    flex: unset !important;
  }
  .wzd-pdp-sec .wzd-art .wzd-art-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
    min-height: unset !important;
  }
  .wzd-pdp-sec .wzd-art .wzd-art-meta {
    font-size: 11px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
  }
}

/* Fix 3: ข้อความทั่วไป — ไม่หนา ขนาดสม่ำเสมอ */
@media (max-width: 768px) {
  .wzd-pdp2-subtitle {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }
  .wzd-pdp2-subtitle strong {
    font-weight: 500 !important;
  }
}

/* Compare entry points */
.wzd-nav-compare,
.wzd-mega-compare,
.wzd-drawer-compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wzd-mega-compare,
.wzd-drawer-compare {
  color: var(--c-brick, #9b2c25) !important;
  font-weight: 600;
}
.wzd-cat-compare-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(155, 44, 37, .16);
  border-radius: 12px;
  background: #fff7f2;
}
.wzd-cat-compare-cta strong {
  display: block;
  color: var(--c-ink, #2f3034);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.wzd-cat-compare-cta span {
  display: block;
  margin-top: 2px;
  color: #595959;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.wzd-pdp-qnav-pill--compare {
  border-color: rgba(155, 44, 37, .24);
  color: var(--c-brick, #9b2c25);
  background: #fff7f2;
}
.wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
  max-width: 320px;
  min-width: 300px;
}
@media (max-width: 768px) {
  .wzd-cat-compare-cta {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .wzd-cat-compare-cta .wzd-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .wcp-glass .wcp-calc-item--groove .wcp-calc-btns {
    max-width: none;
    min-width: 0;
  }
}

/* Lighthouse/WCAG AA finish: shared footer and mobile navigation contrast. */
.wzd-foot.wzd-foot .wzd-foot-about {
  color: #595959 !important;
  opacity: 1 !important;
}
.wzd-foot.wzd-foot .wzd-foot-contact-label,
.wzd-foot.wzd-foot .wzd-foot-copy {
  color: #3f3f3f !important;
}
.wzd-foot.wzd-foot .wzd-foot-bottom {
  opacity: 1 !important;
}
.wzd-foot.wzd-foot details.wzd-foot-col > ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.wdc-ck-desc,
.wdc-ck-info span,
.wdc-ck-always {
  color: #595959 !important;
}
.wzd-cta-light .wzd-btn--outline {
  color: #8e2521 !important;
  border-color: #8e2521 !important;
  opacity: 1 !important;
}
.wdc-advisory-title small {
  color: #3f3f3f !important;
  opacity: 1 !important;
}
.wzd-foot-heading {
  display: block;
  color: #2e2e31;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 16px;
}
details.wzd-foot-col > summary .wzd-foot-heading {
  margin: 0;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wzd-foot-col--policy .wzd-foot-heading { color: #8e2521; }
.wzd-pdp2-subtitle,
.wzd-cq-viz-aux,
.wzd-cq-label-aux { color: #595959 !important; }
.wzd-pdp.wzd-pdp .wzd-cq-viz-aux,
.wzd-pdp.wzd-pdp .wzd-cq-label-aux,
.wzd-pdp.wzd-pdp .wzd-cq-orient-btn-s {
  color: #454545 !important;
  opacity: 1 !important;
}
.wzd-pdp.wzd-pdp .wzd-cq-btn-line {
  background: #087a36 !important;
  color: #fff !important;
}
.wzd-menu-toggle,
.wzd-drawer-close {
  border: 0;
  padding: 0;
}
.wzd-pdp-qnav-label { color: #454545 !important; }
.wzd-pdp-qnav-pill--cta { background: #087a36 !important; color: #fff !important; }
.wzd-pdp.wzd-pdp .wzd-cq-area-sep--or { color: #454545 !important; }
@media (max-width: 768px) {
  .wzd-pdp-sticky { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 700px) {
  .wzd-foot.wzd-foot .wzd-foot-cta-btn-line {
    background: #087a36 !important;
    color: #fff !important;
  }
  .wzd-foot.wzd-foot .wzd-foot-about,
  .wzd-foot.wzd-foot .wzd-foot-contact-label,
  .wzd-foot.wzd-foot .wzd-foot-copy {
    color: #3f3f3f !important;
  }
  .wzd-bottomnav-item {
    color: #595959;
  }
}

/* Keep the high-priority outline-button reset from hiding contact details on dark CTA bars. */
.wzd-cta-bar .wzd-cta-bar-actions .wzd-btn--outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
  opacity: 1 !important;
}
.wzd-cta-bar .wzd-cta-bar-actions .wzd-btn--outline:hover {
  color: #fff !important;
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Footer "why price" link turns brick on hover.  Keep its label and icon
   white: a later generic footer-link hover rule otherwise makes them brick
   as well, which removes all contrast against the brick background. */
.wzd-foot.wzd-foot a.wzd-foot-why-price:hover,
.wzd-foot.wzd-foot a.wzd-foot-why-price:focus-visible {
  background: var(--c-brick, #8E2521) !important;
  border-color: var(--c-brick, #8E2521) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.wzd-foot.wzd-foot a.wzd-foot-why-price:hover i,
.wzd-foot.wzd-foot a.wzd-foot-why-price:focus-visible i {
  color: #fff !important;
}

/* Mobile keeps the single collapsible contact FAB above the bottom navigation. */
@media (max-width: 720px) {
  .wzd-fab {
    display: flex !important;
  }
}

/* Mobile shop: keep the compare tray fully above the persistent bottom nav. */
@media (max-width: 768px) {
  .wzd-compare-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 890 !important;
    padding: 10px 0 !important;
  }

  .wzd-compare-bar-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .wzd-compare-bar-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .wzd-compare-bar-items {
    display: none !important;
  }

  .wzd-compare-bar-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  body:has(.wzd-compare-bar:not([hidden])) {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 340px) {
  .wzd-compare-bar-inner {
    flex-wrap: wrap !important;
  }

  .wzd-compare-bar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  body:has(.wzd-compare-bar:not([hidden])) {
    padding-bottom: calc(182px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Homepage previews show the complete four-card collection on desktop. */
@media (min-width: 901px) {
  .wzd-home-articles .wzd-art-grid,
  .wzd-home-reviews .wzd-reviews-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Catalogue hero must grow with wrapped mobile copy and stacked CTA buttons. */
@media (max-width: 768px) {
  body.wzd-archive-product .wzd-hero--md,
  body.tax-product_cat .wzd-hero--md {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}