/* ==========================================================================
   4x4thailand · main.css (ชุด 1 · Mockup v98)
   ค่าทั้งหมดจาก rules/ออกแบบ.md ข้อ 5 · ธีมขาว
   1 Token  2 พื้นฐาน  3 ปุ่ม  4 หัว Section  5 HOME.HERO  6 C.VEHSELECT
   7 HOME.VALUEPROPS  8 HOME.CATEGORIES  9 C.PCARD / HOME.FEATURED
   10 HOME.INSTALLS  11 HOME.ARTICLES  12 C.CTABAND  13 G.ACTIONBAR
   14 แก้ทับ Astra / Elementor (0.1.2)
   15 G.HEADER · G.FOOTER · ลิ้นชัก (0.2.0)
   ========================================================================== */

/* 1 Token ---------------------------------------------------------------- */
:root {
	--x4-orange: #F48028;
	--x4-orange-hover: #D96A15;
	--x4-orange-text: #B35200;   /* ตัวหนังสือส้มบนพื้นขาว 5.1:1 */
	--x4-orange-soft: #FFF3E8;
	--x4-ink: #141414;           /* กล่องเด่น / ตัวหนังสือ */
	--x4-text: #141414;
	--x4-muted: #5C5F66;
	--x4-line: #E3E5E8;
	--x4-soft: #F4F5F6;
	--x4-white: #FFFFFF;
	--x4-ok: #2FBF71;
	--x4-radius: 4px;
	--x4-radius-card: 8px;
	--x4-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
	--x4-font: "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
	--x4-wrap: 1200px;
	--x4-gutter: 16px;
	--x4-sec: 48px;
}
@media (min-width: 1024px) { :root { --x4-sec: 80px; } }

/* 2 พื้นฐาน -------------------------------------------------------------- */
body, button, input, select, textarea,
.editor-styles-wrapper { font-family: var(--x4-font); }
body { color: var(--x4-text); background: var(--x4-white); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--x4-font); color: var(--x4-text); line-height: 1.25; }
a { color: var(--x4-orange-text); }
.x4-sec { padding-block: var(--x4-sec); padding-inline: var(--x4-gutter); }
/* เนื้อหาใน Section กว้างไม่เกิน 1,200 px ตรงกลาง (ใช้ได้ทั้งธีมที่มีและไม่มี theme.json) */
.x4-sec > *, .x4-sec > .wp-block-group__inner-container > * { max-width: var(--x4-wrap); margin-inline: auto !important; }
/* Group ในธีมแบบคลาสสิกมีกล่องใน (.wp-block-group__inner-container) · ให้ grid / flex ทำงานที่กล่องใน */
.x4-tiles > .wp-block-group__inner-container, .x4-installs > .wp-block-group__inner-container,
.x4-sechead > .wp-block-group__inner-container, .x4-cta > .wp-block-group__inner-container,
.x4-tile > .wp-block-group__inner-container { display: contents; }
.x4-sec + .x4-sec { padding-top: 0; }
.x4-eyebrow { font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--x4-orange-text) !important; margin: 0 0 6px !important; }
.x4-h1 { font-size: 28px !important; font-weight: 700 !important; }
.x4-h2 { font-size: 24px !important; font-weight: 600 !important; margin: 0 !important; }
@media (min-width: 1024px) {
	.x4-h1 { font-size: 44px !important; }
	.x4-h2 { font-size: 32px !important; }
}
:focus-visible { outline: 2px solid var(--x4-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 3 ปุ่ม (หลัก = ส้ม ตัวหนังสือดำ · รอง = ขอบ) ---------------------------- */
.x4-btn,
.wp-block-button.is-style-x4 .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border: 1.5px solid var(--x4-orange); border-radius: var(--x4-radius);
	background: var(--x4-orange); color: #000 !important; font-family: var(--x4-font); font-weight: 600; font-size: 16px; line-height: 1;
	text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .32s cubic-bezier(.34,1.8,.64,1);
}
.x4-btn:hover,
.wp-block-button.is-style-x4 .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--x4-orange-hover); border-color: var(--x4-orange-hover); color: #000 !important;
}
.x4-btn:active, .woocommerce a.button:active, .woocommerce button.button:active { transform: scale(.94); transition-duration: .08s; }
.wp-block-button.is-style-x4-outline .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
	border: 1.5px solid currentColor; border-radius: var(--x4-radius); background: transparent; color: var(--x4-text); font-weight: 600; text-decoration: none;
}
.wp-block-button.is-style-x4-outline .wp-block-button__link:hover { border-color: var(--x4-orange); color: var(--x4-orange-text); }

/* 4 หัว Section (ชื่อ + ลิงก์ดูทั้งหมด) ----------------------------------- */
.x4-sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px !important; }
.x4-sechead p { margin: 0; font-size: 15px; }
.x4-sechead a { color: var(--x4-orange-text); font-weight: 600; text-decoration: none; }
.x4-sechead a:hover { text-decoration: underline; }

/* 5 HOME.HERO ----------------------------------------------------------- */
.x4-hero.wp-block-cover { padding: 0 !important; align-items: flex-end; background: #2a2d31; } /* สีพื้นตอนยังไม่ใส่รูป */
.x4-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--x4-wrap); margin-inline: auto; padding: 32px var(--x4-gutter); }
.x4-hero h1, .x4-hero p { color: #fff; }
.x4-hero h1 { text-shadow: 0 2px 16px rgba(0,0,0,.45); margin: 4px 0 12px; }
.x4-hero .x4-lead { font-size: 17px; max-width: 520px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.x4-hero .x4-eyebrow { color: var(--x4-orange) !important; }
.x4-hero .wp-block-button.is-style-x4-outline .wp-block-button__link { color: #fff; border-color: #fff; }
/* เงาไล่จางเฉพาะฝั่งข้อความ (คอม) */
.x4-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%); }
.x4-hero .wp-block-cover__inner-container { position: relative; z-index: 1; }
@media (min-width: 1024px) {
	.x4-hero.wp-block-cover { align-items: center; }
	.x4-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,0) 55%); }
	.x4-hero .wp-block-cover__inner-container { padding-block: 80px; }
	.x4-hero h1 { font-size: 52px !important; }
}

/* 6 C.VEHSELECT (S02) --------------------------------------------------- */
.x4-picker { background: var(--x4-ink); color: #fff; border-radius: var(--x4-radius-card); padding: 20px; }
.x4-vsel { display: grid; gap: 12px; margin: 0; }
.x4-vsel__t { color: #fff; font-weight: 600; font-size: 18px; }
.x4-vsel__t small { display: block; font-size: 13px; font-weight: 400; color: #B8B8B8; }
.x4-vsel__f { display: grid; gap: 4px; margin: 0; }
.x4-vsel__f span { font-size: 13px; color: #B8B8B8; }
.x4-vsel select { height: 48px; width: 100%; padding: 0 12px; border: 1px solid #2E2E2E; border-radius: var(--x4-radius); background: #1A1A1A; color: #fff; font: inherit; font-size: 16px; }
.x4-vsel select:disabled { opacity: .45; }
.x4-vsel select:focus { border-color: var(--x4-orange); outline: none; }
.x4-vsel .x4-btn { width: 100%; }
.x4-note { margin: 0; font-size: 13px; color: #E7C14B; }
@media (min-width: 1024px) {
	.x4-picker { padding: 24px; }
	.x4-vsel { grid-template-columns: minmax(150px, auto) repeat(3, 1fr) auto; align-items: end; }
	.x4-vsel__t { align-self: center; margin-right: 8px; }
	.x4-vsel .x4-btn { width: auto; }
	.x4-note { grid-column: 1 / -1; }
}

/* 7 HOME.VALUEPROPS (S05 · C.VALUEPROP) ---------------------------------- */
.x4-tiles { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.x4-tile { position: relative; overflow: hidden; min-width: 0; min-height: 150px; margin: 0 !important; padding: 16px !important;
	display: flex !important; flex-direction: column; justify-content: flex-end; border-radius: var(--x4-radius-card); background: var(--x4-ink); color: #fff; }
.x4-tile > * { position: relative; margin: 0 !important; }
.x4-tile .x4-bg { position: absolute !important; right: -6px; top: -14px; font-size: 96px !important; font-weight: 700; line-height: 1; letter-spacing: -.04em;
	color: transparent !important; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); pointer-events: none; white-space: nowrap; }
.x4-tile .x4-k { font-size: 12px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--x4-orange) !important; }
.x4-tile .x4-big { font-size: 22px !important; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; color: #fff !important; margin-top: 4px !important; }
.x4-tile .x4-big em { font-style: normal; color: var(--x4-orange); }
.x4-tile .x4-sm { font-size: 13px !important; color: #C9CBD0 !important; margin-top: 4px !important; }
.x4-tile.is-solid { background: var(--x4-orange); }
.x4-tile.is-solid .x4-k, .x4-tile.is-solid .x4-big { color: #000 !important; }
.x4-tile.is-solid .x4-sm { color: #2A1300 !important; }
.x4-tile.is-solid .x4-bg { -webkit-text-stroke-color: rgba(0,0,0,.14); }
@media (min-width: 1024px) {
	.x4-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.x4-tile { min-height: 200px; padding: 22px !important; }
	.x4-tile .x4-bg { font-size: 150px !important; top: -22px; }
	.x4-tile .x4-big { font-size: 32px !important; }
}

/* 8 HOME.CATEGORIES (S03 · [product_categories]) ------------------------- */
.x4-cats ul.products { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 !important; padding: 0; }
.x4-cats ul.products::before, .x4-cats ul.products::after { display: none !important; }
.x4-cats ul.products li.product-category { width: auto !important; margin: 0 !important; float: none !important; list-style: none;
	background: var(--x4-white); border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card); overflow: hidden;
	transition: border-color .15s, box-shadow .15s, transform .15s; }
.x4-cats li.product-category a { display: block; color: var(--x4-text); text-decoration: none; }
.x4-cats li.product-category img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 !important; }
.x4-cats .woocommerce-loop-category__title { margin: 0 !important; padding: 10px 12px 12px !important; font-size: 16px !important; font-weight: 600; }
.x4-cats .woocommerce-loop-category__title mark.count { display: block; background: none; color: var(--x4-muted); font-size: 13px; font-weight: 400; }
@media (hover: hover) {
	.x4-cats li.product-category:hover { border-color: var(--x4-orange); box-shadow: 0 0 0 2px var(--x4-orange), 0 10px 24px rgba(16,24,40,.12); transform: translateY(-2px); }
}
@media (min-width: 768px) {
	.x4-cats ul.products { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.x4-cats li.product-category img { aspect-ratio: 4 / 3; }
}

/* 9 C.PCARD · HOME.FEATURED (S04) --------------------------------------- */
.woocommerce ul.products li.product:not(.product-category) { background: var(--x4-white); border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card);
	overflow: hidden; padding-bottom: 14px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.woocommerce ul.products li.product:not(.product-category) img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-inline: 12px; font-size: 15px !important; font-weight: 600; line-height: 1.35; }
.woocommerce ul.products li.product .price { padding-inline: 12px; color: var(--x4-text) !important; font-weight: 700; font-size: 17px; }
.woocommerce ul.products li.product .button { margin-inline: 12px; min-height: 40px; font-size: 14px; }
@media (hover: hover) {
	.woocommerce ul.products li.product:not(.product-category):hover { border-color: var(--x4-orange); box-shadow: 0 0 0 2px var(--x4-orange), 0 10px 24px rgba(16,24,40,.12); transform: translateY(-2px); }
}
/* มือถือ: ปัดเลื่อนแนวนอน */
@media (max-width: 767px) {
	.x4-featured ul.products { display: grid !important; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto;
		scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; padding: 4px 2px 10px !important; margin: 0 !important; }
	.x4-featured ul.products::before, .x4-featured ul.products::after { display: none !important; }
	.x4-featured ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; scroll-snap-align: start; }
}

/* 10 HOME.INSTALLS (S06 · C.UGCCARD) ------------------------------------- */
.x4-installs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 70%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; padding-bottom: 8px; }
.x4-install { margin: 0 !important; scroll-snap-align: start; }
.x4-install .wp-block-cover { aspect-ratio: 4 / 5 !important; height: auto; min-height: 0 !important; width: 100%; border-radius: var(--x4-radius-card); overflow: hidden; margin: 0 0 10px; }
.x4-install .x4-mdl { display: inline-block; margin: 0 0 6px !important; padding: 2px 8px; border-radius: 3px; background: var(--x4-orange); color: #000; font-size: 12px !important; font-weight: 600; }
.x4-install h3 { font-size: 15px !important; margin: 0 0 2px !important; }
.x4-install .x4-by { margin: 0 !important; font-size: 12px; color: var(--x4-muted); }
@media (min-width: 1024px) { .x4-installs { grid-auto-columns: calc((100% - 36px) / 4); } }

/* 11 HOME.ARTICLES (S07 · C.ARTCARD) ------------------------------------- */
.x4-posts .wp-block-post-template { gap: 40px 28px; }
.x4-posts .wp-block-post-featured-image { margin: 0 0 10px; }
.x4-posts .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--x4-radius); }
.x4-posts .wp-block-post-date { font-size: 13px; color: var(--x4-muted); }
.x4-posts .wp-block-post-title { font-size: 19px !important; font-weight: 700; line-height: 1.35; margin: 4px 0 6px !important; }
.x4-posts .wp-block-post-title a { color: var(--x4-text); text-decoration: none; }
.x4-posts .wp-block-post-title a:hover { color: var(--x4-orange-text); }
.x4-posts .wp-block-post-excerpt__excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--x4-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x4-posts .wp-block-post-excerpt__more-text { margin: 8px 0 0; }
.x4-posts .wp-block-post-excerpt__more-link { font-weight: 700; font-size: 14px; color: var(--x4-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.x4-posts .wp-block-post-excerpt__more-link:hover { color: var(--x4-orange-text); }

/* 12 C.CTABAND (กล่องดำ + ปุ่มส้ม) --------------------------------------- */
.x4-cta { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px;
	background: var(--x4-ink); color: #fff; border-radius: var(--x4-radius-card); padding: 20px 22px !important; }
.x4-cta h2, .x4-cta h3, .x4-cta p { color: #fff; margin: 0 !important; }
.x4-cta .x4-eyebrow { color: var(--x4-orange) !important; }

/* 13 G.ACTIONBAR (S08 · มือถือ) ------------------------------------------ */
.x4-actionbar { display: none; }
@media (max-width: 767px) {
	.x4-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 2px solid var(--x4-orange);
		box-shadow: 0 -8px 24px rgba(16,24,40,.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
	.x4-actionbar a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: var(--x4-radius);
		border: 1px solid #D5D8DC; background: var(--x4-soft); color: var(--x4-text); font-size: 14px; font-weight: 600; text-decoration: none;
		transition: transform .32s cubic-bezier(.34,1.8,.64,1), background-color .15s; -webkit-tap-highlight-color: transparent; }
	.x4-actionbar a:active { transform: scale(.9); transition-duration: .08s; }
	.x4-actionbar a.is-cart { background: var(--x4-orange); border-color: var(--x4-orange); color: #000; }
	.x4-actionbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}


/* 14 แก้ทับ Astra / Elementor (0.1.2–0.1.3 · ตรวจ CSS จริงบนเว็บทดสอบ 05-10-26) ------------ */
/* ฟอนต์: Elementor Kit ตั้ง Kanit ที่ body ทุกหน้า */
body.wp-child-theme-4x4thailand { font-family: var(--x4-font) !important; }
body.wp-child-theme-4x4thailand :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .button, .wp-block-button__link) { font-family: var(--x4-font) !important; }
body.wp-child-theme-4x4thailand :is(a, p, li, span, label, small, b, strong, div) { font-family: var(--x4-font); } /* Elementor Kit ตั้ง Kanit ที่ลิงก์ */
/* แบนเนอร์เต็มจอ · ข้อความรองสีขาว */
body { overflow-x: clip; }
/* Astra ใส่ padding 20px ที่ article ของหน้า Full Width / Stretched · เอาออกเฉพาะหน้าที่มี Section ของเรา */
body.ast-page-builder-template .site-content article.page:has(.x4-sec, .x4-hero) { padding-left: 0 !important; padding-right: 0 !important; }
.x4-hero.wp-block-cover.alignfull { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0; }
.x4-hero .wp-block-cover__inner-container { max-width: calc(var(--x4-wrap) + 2 * var(--x4-gutter)) !important; margin-inline: auto !important; padding-inline: var(--x4-gutter) !important; }
/* WordPress / Astra ทับ padding ข้างของ Section → ขอบซ้ายเนื้อหาไม่ตรงแบนเนอร์ */
.x4-sec { padding-left: var(--x4-gutter) !important; padding-right: var(--x4-gutter) !important; }
.x4-hero p.x4-lead { color: rgba(255,255,255,.9) !important; }
/* การ์ดสินค้า: ชื่อหมวด · ปุ่ม เว้นขอบเท่าชื่อสินค้า */
.woocommerce ul.products li.product:not(.product-category) .ast-woo-product-category { display: block; padding-inline: 12px !important; margin-bottom: 4px; font-size: 12px; color: var(--x4-muted); }
.woocommerce ul.products li.product:not(.product-category) .button,
.woocommerce ul.products li.product:not(.product-category) .added_to_cart { margin-left: 12px !important; margin-right: 12px !important; }
/* การ์ดหมวด: ชื่อใต้รูป ไม่ทับรูป · ไม่ใช้ตัวพิมพ์ใหญ่ · ไม่ตัดกลางคำ */
.x4-cats ul.products li.product-category { display: block !important; height: auto !important; } /* Astra ตั้งเป็น flex → ชื่อหมวดหลุดออกนอกการ์ด */
.x4-cats li.product-category img { width: 100% !important; height: auto !important; }
.x4-cats li.product-category a { position: static !important; }
.x4-cats .woocommerce-loop-category__title { position: static !important; inset: auto !important; transform: none !important; width: auto !important;
	background: none !important; box-shadow: none !important; opacity: 1 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
	word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; line-height: 1.3; }
.x4-cats .woocommerce-loop-category__title mark.count { text-transform: none !important; letter-spacing: 0 !important; }
/* สินค้าแนะนำบนมือถือ: การ์ดสูงเท่าเนื้อหา */
@media (max-width: 767px) {
	/* Astra ตั้ง grid-template-columns 2 คอลัมน์ไว้ → 2 การ์ดแรกกว้าง 0 px และสูงหลายพัน px */
	.x4-featured ul.products { grid-template-columns: none !important; grid-template-rows: auto !important; height: auto !important; min-height: 0 !important; }
	/* ปุ่มกลับขึ้นบนของ Astra ไม่ทับแถบ LINE / โทร / ตะกร้า */
	#ast-scroll-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* การ์ดสินค้าทุกหน้า (หน้าแรก · ร้านค้า · หมวด · สินค้าที่เกี่ยวข้อง): กว้าง-สูงเท่ากันทุกใบ · ปุ่มอยู่ล่างสุดระยะเดียวกัน */
.woocommerce ul.products:has(> li.product:not(.product-category)) { grid-auto-rows: 1fr !important; align-items: stretch !important; }
.woocommerce ul.products li.product:not(.product-category) { display: flex !important; flex-direction: column !important; height: auto; }
.woocommerce ul.products li.product:not(.product-category) .astra-shop-summary-wrap { flex: 1 1 auto; display: flex !important; flex-direction: column; }
.woocommerce ul.products li.product:not(.product-category) .price { margin-bottom: 14px !important; }
.woocommerce ul.products li.product:not(.product-category) .astra-shop-summary-wrap .button { margin-top: auto !important; align-self: flex-start; }


/* 15 G.HEADER · G.MEGAMENU · G.NAVDRAWER · G.VEHDRAWER · G.FOOTER (0.2.0 · ชุด 2) ---------------- */
:root { --x4-hf-bg: #FFFFFF; --x4-hf-fg: #141414; --x4-hf-muted: #5C5F66; --x4-hf-line: #E3E5E8; --x4-hf-panel: #FFFFFF; }
body.x4-hf-dark { --x4-hf-bg: #0E0E0E; --x4-hf-fg: #FFFFFF; --x4-hf-muted: #B8B8B8; --x4-hf-line: #2E2E2E; --x4-hf-panel: #141414; }
.x4-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.x4-ib { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 40px; padding: 0; border: 0; border-radius: var(--x4-radius);
	background: none; color: var(--x4-hf-fg); cursor: pointer; text-decoration: none; }
.x4-ib:hover, .x4-ib:focus-visible { color: var(--x4-orange); background: none; }
.x4-cart-n { position: absolute; top: 3px; right: -1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--x4-orange); color: #000; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.x4-cart-n[hidden] { display: none; }
.x4-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x4-hdr__veh { white-space: nowrap; flex: none; }
.x4-btn--sm { min-height: 36px !important; padding: 0 14px !important; font-size: 14px !important; }

.x4-hdr { position: sticky; top: 0; z-index: 60; background: var(--x4-hf-bg); color: var(--x4-hf-fg); border-bottom: 1px solid var(--x4-hf-line); box-shadow: 0 2px 12px rgba(16,24,40,.06); }
body.admin-bar .x4-hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .x4-hdr { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .x4-hdr { top: 0; } }
.x4-hdr__row { display: flex; align-items: center; gap: 2px; height: 60px; max-width: 1440px; margin-inline: auto; padding-inline: var(--x4-gutter); }
.x4-logo { display: flex; align-items: center; flex: none; height: 40px; margin: 0 4px; }
.x4-logo img { display: block; height: 34px; width: auto; }
.x4-grow { flex: 1; }
.x4-nav, .x4-hsearch, .x4-hdr__veh { display: none !important; }
.x4-hdr__srow { padding: 0 var(--x4-gutter) 12px; }
.x4-hdr__srow[hidden] { display: none; }
.x4-hdr__sbtn[aria-expanded="true"] { color: var(--x4-orange); }
.x4-sbox { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 12px; border: 1px solid #D5D8DC; border-radius: 6px; background: #F7F8F9; color: #6B6F76; }
.x4-sbox:focus-within { background: #fff; border-color: var(--x4-orange); box-shadow: 0 0 0 3px rgba(244,128,40,.3); }
.x4-sbox .x4-ico { width: 18px; height: 18px; stroke-width: 1.6; }
.x4-sbox input[type="search"] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: #2B2D31; font: inherit; font-size: 16px; }
.x4-sbox input::placeholder { color: #6B6F76; opacity: 1; }
@media (min-width: 1024px) {
	.x4-hdr__row { height: 72px; gap: 10px; }
	.x4-hdr__burger, .x4-hdr__sbtn, .x4-hdr__srow { display: none !important; }
	.x4-logo img { height: 40px; }
	.x4-nav { display: flex !important; gap: 2px; }
	.x4-hsearch { display: block !important; flex: 1; max-width: 340px; margin-left: auto; }
	.x4-hsearch .x4-sbox { height: 34px; padding: 0 10px; border-radius: 5px; }
	.x4-hsearch .x4-sbox input[type="search"] { font-size: 15px; }
	.x4-hdr__veh { display: inline-flex !important; margin-left: 4px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .x4-nav__i > a { padding: 8px 6px !important; font-size: 14px !important; } .x4-hsearch { min-width: 120px; } }
.x4-nav__i { position: relative; }
.x4-nav__i > a { display: block; padding: 8px 10px; border-radius: var(--x4-radius); color: var(--x4-hf-fg); font-size: 15px; white-space: nowrap; text-decoration: none; }
.x4-nav__i > a:hover, .x4-nav__i > a:focus-visible { color: var(--x4-orange); }
.x4-mega { display: none; position: absolute; left: 0; top: 100%; z-index: 70; grid-template-columns: repeat(3, 200px); gap: 18px 24px; padding: 20px;
	background: var(--x4-hf-panel); border: 1px solid var(--x4-hf-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(16,24,40,.18); }
.has-mega:hover .x4-mega, .has-mega:focus-within .x4-mega { display: grid; }
.x4-mega__col { display: grid; gap: 4px; align-content: start; }
.x4-mega__col a { padding: 2px 0; color: var(--x4-hf-muted); font-size: 14px; text-decoration: none; }
.x4-mega__col a:hover { color: var(--x4-orange); }
.x4-mega__col a.x4-mega__h { display: flex; justify-content: space-between; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--x4-hf-line); color: var(--x4-hf-fg); font-size: 15px; font-weight: 600; }
.x4-mega__h span { color: var(--x4-hf-muted); font-size: 12px; font-weight: 400; }
.x4-mega__soon { color: var(--x4-hf-muted); font-size: 13px; }

/* ลิ้นชัก (เมนูมือถือ / เลือกรุ่นรถ) */
.x4-layer[hidden] { display: none; }
.x4-layer { position: fixed; inset: 0; z-index: 100000; }
.x4-scrim { position: absolute; inset: 0; background: rgba(16,24,40,.45); animation: x4sIn .25s ease both; }
.x4-drawer { position: absolute; top: 0; bottom: 0; left: 0; display: grid; grid-template-rows: auto 1fr; width: min(340px, 100vw); background: #fff; color: var(--x4-text);
	border-right: 1px solid var(--x4-line); animation: x4dIn .28s cubic-bezier(.22,1,.36,1) both; }
.x4-layer.is-closing .x4-drawer { transform: translateX(-100%); transition: transform .2s ease-in; }
.x4-layer.is-closing .x4-scrim { opacity: 0; transition: opacity .2s; }
.x4-drawer__h { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 1px solid var(--x4-line); }
.x4-drawer__h b { font-size: 18px; font-weight: 600; }
.x4-drawer__h .x4-ib { color: var(--x4-text); }
.x4-dprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--x4-orange); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.x4-drawer__b { overflow: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; }
.x4-menu { display: grid; }
.x4-menu a { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--x4-line); color: var(--x4-text); text-decoration: none;
	animation: x4mIn .34s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 28ms + 90ms); transition: background-color .18s, color .18s, padding-left .18s; }
.x4-menu a > span { flex: none; transition: transform .18s, color .18s; }
.x4-menu a small { color: var(--x4-muted); font-size: 12px; }
.x4-menu__sub a { padding-left: 16px; color: var(--x4-muted); font-size: 15px; }
.x4-menu a::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--x4-orange); transform: scaleY(0); transition: transform .18s; }
.x4-menu a:active, .x4-menu a.is-tap { background: var(--x4-orange-soft); color: var(--x4-orange-text); padding-left: 8px; }
.x4-menu__sub a:active, .x4-menu__sub a.is-tap { padding-left: 24px; }
.x4-menu a:active::before, .x4-menu a.is-tap::before { transform: scaleY(1); }
@media (hover: hover) { .x4-menu a:hover { color: var(--x4-orange-text); } .x4-menu a:hover > span { transform: translateX(3px); } }
.x4-picker--drawer { margin-top: 16px; }
.x4-picker--drawer .x4-vsel { grid-template-columns: 1fr !important; }
.x4-picker--drawer .x4-vsel .x4-btn { width: 100% !important; }
@keyframes x4dIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes x4sIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes x4mIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
body.x4-lock { overflow: hidden; }

/* G.FOOTER */
.x4-ftr { padding: 40px var(--x4-gutter) 24px; background: var(--x4-hf-bg); color: var(--x4-hf-muted); border-top: 1px solid var(--x4-hf-line); font-size: 14px; }
.x4-ftr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; max-width: var(--x4-wrap); margin-inline: auto; }
.x4-ftr__brand { grid-column: 1 / -1; }
.x4-ftr__col { display: grid; gap: 8px; align-content: start; }
.x4-ftr__col h4 { margin: 0 0 4px; color: var(--x4-hf-fg); font-size: 15px; font-weight: 600; }
.x4-ftr__col a { color: var(--x4-hf-muted); text-decoration: none; }
.x4-ftr__col a:hover { color: var(--x4-orange); }
.x4-ftr__col p { margin: 0; }
.x4-ftr .x4-logo { margin: 0; }
.x4-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.x4-pay span { padding: 3px 8px; border: 1px solid var(--x4-hf-line); border-radius: 3px; color: var(--x4-hf-fg); font-size: 12px; }
.x4-ftr__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: var(--x4-wrap); margin: 28px auto 0; padding-top: 16px; border-top: 1px solid var(--x4-hf-line); font-size: 13px; }
@media (min-width: 1024px) { .x4-ftr__grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } .x4-ftr__brand { grid-column: auto; } }
@media (max-width: 767px) { .x4-ftr { padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .x4-drawer, .x4-scrim, .x4-menu a { animation: none !important; } .x4-menu a, .x4-menu a > span, .x4-menu a::before, .x4-dprog { transition: none !important; } }

/* 16 ชุด 4: PLP / PDP / Checkout / Dock / Compare / Wishlist (0.3.0) ------------------------- */
.x4-badge { display: inline-block; padding: 2px 8px; border: 1px solid #C9CDD2; border-radius: 3px; color: var(--x4-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.x4-badge--ok { border-color: var(--x4-ok); background: rgba(47,191,113,.1); color: #17803F; }
.x4-btn--ghost { background: transparent !important; color: var(--x4-text) !important; border-color: #C9CDD2 !important; }
.x4-btn--ghost:hover { border-color: var(--x4-orange) !important; color: var(--x4-orange-text) !important; }
/* แถบเลือกรุ่นรถ หน้าร้าน / หมวด */
.x4-vehbar { margin: 0 0 24px; padding: 16px; border-top: 2px solid var(--x4-orange); border-radius: var(--x4-radius-card); background: #141414; color: #fff; }
.x4-vehbar__cur { margin-bottom: 12px; font-size: 14px; color: #D5D8DC; }
.x4-vehbar__cur b { color: #fff; }
.x4-vehbar__cur a { margin-left: 8px; color: var(--x4-orange); font-weight: 600; }
.x4-vehbar .x4-vsel__t small { color: #B8B8B8; }
@media (min-width: 1024px) { .x4-vehbar { padding: 18px 20px; border-top: 0; } }
/* การ์ดสินค้า: ใส่ได้กับ · สถานะ */
.woocommerce ul.products li.product .x4-fit { padding-inline: 12px; margin: -2px 0 6px; color: var(--x4-muted); font-size: 12.5px; line-height: 1.4; }
.woocommerce ul.products li.product .x4-pcard__st { padding-inline: 12px; margin: 6px 0 12px; }
.woocommerce ul.products li.product .price { margin-bottom: 4px !important; }
/* PDP */
.single-product .product_title { font-size: 24px !important; line-height: 1.3; margin-bottom: 4px !important; }
@media (min-width: 1024px) { .single-product .product_title { font-size: 30px !important; } }
.x4-sku { margin-bottom: 10px; color: var(--x4-muted); font-size: 13px; }
.x4-fit--pdp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 8px 12px; border-radius: var(--x4-radius); background: rgba(47,191,113,.1); color: #17803F; font-size: 14px; font-weight: 600; }
.x4-fit--pdp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.x4-fit__more { margin-left: auto; color: var(--x4-orange-text); font-weight: 600; font-size: 13px; }
.single-product .summary .price { font-size: 26px !important; font-weight: 700; color: var(--x4-text) !important; margin-bottom: 6px !important; }
.x4-pdp__st { margin-bottom: 16px; }
.x4-pick { margin: 16px 0 20px; padding: 14px 16px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card); }
.x4-pick__h { margin-bottom: 8px; font-weight: 700; }
.x4-pick__h span { margin-left: 6px; color: var(--x4-muted); font-size: 13px; font-weight: 400; }
.x4-pick ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.x4-pick li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.x4-pick li span { color: var(--x4-muted); text-align: right; }
.single-product form.cart { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.single-product form.cart .quantity .qty { height: 48px; }
.single-product form.cart .single_add_to_cart_button { flex: 1 1 160px; }
.x4-cmpbtn, .x4-wishbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 1.5px solid #141414; border-radius: var(--x4-radius);
	background: #141414; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.x4-cmpbtn[aria-pressed="true"] { background: #fff; color: #141414; }
.x4-wishbtn { width: 48px; padding: 0; background: #fff; color: #141414; border-color: #C9CDD2; }
.x4-wishbtn .x4-ico { width: 22px; height: 22px; }
.x4-wishbtn[aria-pressed="true"] { color: #E0393E; border-color: #E0393E; }
.x4-wishbtn[aria-pressed="true"] .x4-ico { fill: currentColor; }
.x4-pdp__help { margin-top: 12px; color: var(--x4-muted); font-size: 14px; }
.woocommerce-tabs .shop_attributes th { width: 30%; }
/* ช่องติ๊กติดตั้งเอง · แจ้งชำระเงิน */
.x4-agree { margin: 0 0 16px !important; padding: 12px 14px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius); background: var(--x4-soft); font-size: 14px; line-height: 1.5; }
.x4-agree input { margin-right: 6px; accent-color: var(--x4-orange); }
.x4-paynote { margin: 0 0 24px; padding: 16px 18px; border-left: 4px solid var(--x4-orange); border-radius: var(--x4-radius); background: var(--x4-orange-soft); }
.x4-paynote p { margin: 4px 0 0; }
/* Cart Dock (คอม · การ์ดลอยขวาล่าง) */
.x4-dock { display: none; }
@media (min-width: 768px) {
	.x4-dock.is-on { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 10px; min-width: 300px; padding: 12px 40px 12px 14px; border-top: 2px solid var(--x4-orange);
		border-radius: 12px; background: #141414; color: #fff; box-shadow: 0 12px 32px rgba(16,24,40,.28); }
	.x4-dock.is-min { min-width: 0; padding: 8px 36px 8px 12px; }
	.x4-dock.is-min .x4-btn { display: none !important; }
}
.x4-dock__cart, .x4-dock__cmp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x4-dock__cart[hidden], .x4-dock__cmp[hidden] { display: none; }
.x4-dock__t { flex: 1 1 auto; margin-right: 4px; font-size: 14px; white-space: nowrap; }
.x4-dock__t.is-warn { color: var(--x4-orange); }
.x4-dock__t.is-warn::after { content: " · เต็มแล้ว"; }
.x4-dock .x4-btn--ghost { color: #fff !important; border-color: #555 !important; }
.x4-dock__min { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: #B8B8B8; font-size: 18px; line-height: 1; cursor: pointer; }
.x4-dock__min:hover { color: var(--x4-orange); background: #2A2A2E; }
/* แถบล่างจอหน้าสินค้า (มือถือ) */
@media (max-width: 767px) {
	.x4-actionbar--pdp { grid-template-columns: 1fr 1.3fr !important; align-items: center; }
	.x4-actionbar--pdp .x4-actionbar__price { font-weight: 700; font-size: 17px; line-height: 1.2; }
	.x4-actionbar--pdp .x4-actionbar__price del { display: block; font-size: 12px; font-weight: 400; color: var(--x4-muted); }
	.x4-actionbar--pdp button { height: 48px; border: 0; border-radius: var(--x4-radius); background: var(--x4-orange); color: #000; font: inherit; font-weight: 700; transition: transform .32s cubic-bezier(.34,1.8,.64,1); }
	.x4-actionbar--pdp button:active { transform: scale(.9); transition-duration: .08s; }
}
/* หน้าเปรียบเทียบ / รายการโปรด */
.x4-list__empty { color: var(--x4-muted); }
.x4-list__grid { display: grid; gap: 12px; }
.x4-list__grid--cmp { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; }
.x4-list__grid--wish { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .x4-list__grid--wish { grid-template-columns: repeat(4, 1fr); } }
.x4-litem { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card); overflow: hidden; background: #fff; scroll-snap-align: start; }
.x4-litem__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.x4-litem__n { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-inline: 12px; color: var(--x4-text); font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; }
.x4-litem__p { padding-inline: 12px; font-weight: 700; }
.x4-litem dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 4px 12px; font-size: 13px; }
.x4-litem dt { color: var(--x4-muted); }
.x4-litem dd { margin: 0; }
.x4-litem__a { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 6px 12px 0; }
.x4-litem__rm { padding: 0; border: 0; background: none; color: var(--x4-muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }

/* 17 หน้าข้อมูล (0.4.0 · ชุด 5) ---------------------------------------------------------- */
.x4-page { max-width: 780px; margin-inline: auto; padding-bottom: 48px; font-size: 16px; line-height: 1.75; }
.x4-page > * + * { margin-top: 16px; }
.x4-page h2 { margin-top: 36px !important; font-size: 24px !important; font-weight: 700; }
.x4-page h3 { margin-top: 24px !important; font-size: 18px !important; font-weight: 700; }
.x4-pagelead { color: var(--x4-muted); font-size: 18px !important; }
.x4-note { color: var(--x4-muted); font-size: 14px !important; }
.x4-steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.x4-steps > li { counter-increment: s; position: relative; padding: 12px 14px 12px 56px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card); }
.x4-steps > li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--x4-orange); color: #000; font-weight: 700; text-align: center; line-height: 28px; }
.x4-facts { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.x4-facts > li { padding: 10px 14px; border-radius: var(--x4-radius); background: var(--x4-soft); }
.x4-ticks, .x4-xs { padding-left: 1.2em !important; }
.x4-table { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; }
.x4-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.x4-table th, .x4-table td { padding: 10px 12px; border: 1px solid var(--x4-line); text-align: left; vertical-align: top; }
.x4-table thead th { background: #141414; color: #fff; }
.x4-table tbody th { background: var(--x4-soft); font-weight: 600; }
.x4-page .wp-block-details { padding: 12px 16px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius); }
.x4-page .wp-block-details + .wp-block-details { margin-top: 8px; }
.x4-page .wp-block-details summary { font-weight: 600; cursor: pointer; }
.x4-page .wp-block-details[open] summary { color: var(--x4-orange-text); margin-bottom: 6px; }
.x4-map { aspect-ratio: 16 / 10; border-radius: var(--x4-radius-card); overflow: hidden; background: var(--x4-soft); }
.x4-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.x4-page .woocommerce form.track_order { padding: 16px; border: 1px solid var(--x4-line); border-radius: var(--x4-radius-card); }

/* 18 PLP ตัวกรอง (0.4.2 · Mockup filterHTML) ------------------------------------------- */
.x4-plp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.x4-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x4-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--x4-line); border-radius: 16px; background: var(--x4-soft); color: var(--x4-text); font-size: 13px; text-decoration: none; }
.x4-chip:hover { border-color: var(--x4-orange); }
.x4-chip--clear { background: none; border-color: transparent; color: var(--x4-orange-text); font-weight: 600; }
.x4-fgroup { display: grid; gap: 2px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--x4-line); }
.x4-fgroup:last-child { border-bottom: 0; }
.x4-fgroup h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.x4-fopt { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--x4-text); font-size: 15px; text-decoration: none; cursor: pointer; }
.x4-fopt span { margin-left: auto; color: var(--x4-muted); font-size: 13px; }
.x4-fopt i { flex: none; width: 18px; height: 18px; border: 1.5px solid #B8BCC2; border-radius: 50%; background: #fff; }
.x4-fopt.is-on i { border-color: var(--x4-orange); box-shadow: inset 0 0 0 4px #fff; background: var(--x4-orange); }
.x4-fopt:hover { color: var(--x4-orange-text); }
.x4-fsub { padding-left: 26px; }
.x4-fsub .x4-fopt { font-size: 14px; }
.x4-fopt--ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--x4-orange); }
.x4-fgroup--veh .x4-vsel { grid-template-columns: 1fr !important; gap: 8px; }
.x4-fgroup--veh .x4-vsel__t, .x4-fgroup--veh .x4-vsel__f > span { display: none; }
.x4-fgroup--veh .x4-vsel select { background: #fff; color: var(--x4-text); border-color: #D5D8DC; }
.x4-fgroup--veh .x4-btn { width: 100% !important; }
@media (min-width: 1024px) {
	.x4-plp { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
	.x4-filterlayer[hidden], .x4-filterlayer { display: block !important; position: sticky; top: 100px; inset: auto; z-index: 1; }
	.x4-filterlayer .x4-scrim, .x4-filterlayer .x4-drawer__h { display: none; }
	.x4-filterlayer .x4-drawer { position: static; width: auto; display: block; border: 0; animation: none; background: none; }
	.x4-filterlayer .x4-drawer__b { padding: 0; overflow: visible; }
	.x4-filterlayer .x4-fgroup:first-child { padding-top: 0; }
	.x4-plp__fbtn { display: none !important; }
	.x4-plp__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* 19 การ์ดสินค้าตาม Mockup (0.4.2) ---------------------------------------------------- */
.woocommerce ul.products li.product .ast-woo-product-category { display: none !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 12px 0 6px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.35 !important; }
.woocommerce ul.products li.product .x4-fit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 10px !important; }
.woocommerce ul.products li.product .x4-fit b { color: var(--x4-orange-text); font-weight: 600; }
.woocommerce ul.products li.product .x4-pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 12px; margin-bottom: 12px; }
.woocommerce ul.products li.product .x4-pcard__row .price { padding: 0 !important; margin: 0 !important; font-size: 19px !important; }
.woocommerce ul.products li.product:not(.product-category) img { margin-bottom: 0 !important; }
/* 20 ลิ้นชักเลือกรุ่นรถ พื้นขาวตาม Mockup (0.4.2) */
.x4-picker--drawer { padding: 0 !important; background: none !important; color: var(--x4-text) !important; border-radius: 0; }
.x4-picker--drawer .x4-vsel__t, .x4-picker--drawer .x4-vsel__f > span { display: none; }
.x4-picker--drawer .x4-vsel { gap: 12px; }
.x4-picker--drawer .x4-vsel select { background: #fff; color: var(--x4-text); border-color: #D5D8DC; }
.x4-picker--drawer .x4-vsel select:disabled { opacity: .55; }

/* 21 ชุด 1 รอบ Mockup (0.5.0): Dock · Mini Cart · ถาดเปรียบเทียบ · Toast · ปุ่มกลับ · แถบเลื่อน · S09 · S10 · Hub ขาย ---- */
/* G.SCB Cart Dock (Mockup dock2 / cartbar) */
.x4-dock2[hidden] { display: none !important; }
.x4-dock2 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; background: #141414; color: #fff; border-top: 2px solid var(--x4-orange); box-shadow: 0 -8px 24px rgba(0,0,0,.25); font-size: 14px; }
.x4-dock2__in { display: flex; align-items: center; gap: 8px; max-width: 1200px; margin: 0 auto; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
.x4-dock2 .x4-btn--sm { min-height: 38px !important; height: 38px; }
.x4-btn--ghw { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; }
.x4-btn--ghw:hover { border-color: var(--x4-orange) !important; color: var(--x4-orange) !important; }
.x4-btn.is-off { opacity: .5; cursor: not-allowed; }
.x4-d2cmp, .x4-d2back { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid #3A3A3E; border-radius: 6px; background: #2A2A2D; color: #fff; font: 600 13px var(--x4-font); white-space: nowrap; cursor: pointer; text-decoration: none; }
.x4-d2cmp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.x4-d2cmp:hover, .x4-d2cmp.is-on, .x4-d2back:hover { border-color: var(--x4-orange); color: #fff; }
.x4-d2back { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; max-width: 46%; min-width: 0; line-height: 1.1; }
.x4-d2back small { max-width: 100%; overflow: hidden; color: #B8B8B8; font-size: 11px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.x4-d2cart { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; margin-left: auto; }
.x4-d2open { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: #fff; cursor: pointer; }
.x4-d2open:hover, .x4-d2open.is-on { border-color: #3A3A3E; background: #222; }
.x4-d2n { position: relative; display: inline-flex; }
.x4-d2n svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.x4-d2n b { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--x4-orange); color: #000; font-size: 11px; }
.x4-d2t { font-weight: 700; font-size: 15px; white-space: nowrap; }
.x4-car { color: #B8B8B8; font-size: 11px; }
.x4-d2atc { display: none; }
.x4-cartbar { flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 10px; }
.x4-cartbar__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.x4-cartbar__l img, .x4-cartbar__l i { flex: none; width: 56px; height: 42px; border-radius: 4px; object-fit: cover; background: #2A2A2D; }
.x4-cartbar__l b { display: block; font-size: 15px; }
.x4-cartbar__l small { color: #B8B8B8; font-size: 13px; }
.x4-cartbar__a { display: flex; align-items: center; gap: 12px; }
.x4-cbx { padding: 0 4px; border: 0; background: none; color: #B8B8B8; font-size: 22px; line-height: 1; cursor: pointer; }
.x4-cbx:hover { color: #fff; }
.x4-dpanel { max-width: 1200px; max-height: min(55vh, 420px); margin: 0 auto; padding: 12px 12px 4px; border-bottom: 1px solid #2E2E2E; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--x4-orange) transparent; }
.x4-dp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.x4-linkbtn { padding: 0; border: 0; background: none; color: var(--x4-orange-text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.x4-dock2 .x4-linkbtn { color: var(--x4-orange); }
.x4-dp-list { display: grid; gap: 6px; }
.x4-dp-i { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: #1E1E20; }
.x4-dp-i.is-ci { grid-template-columns: 52px 1fr auto auto 24px; }
.x4-dp-i img, .x4-dp-i i { display: block; width: 52px; height: 39px; border-radius: 4px; object-fit: cover; background: #2A2A2D; }
.x4-dp-i a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font-size: 13px; line-height: 1.35; text-decoration: none; }
.x4-dp-i a:hover { color: var(--x4-orange); }
.x4-dp-p { font-weight: 700; font-size: 13px; white-space: nowrap; }
.x4-dp-x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: #B8B8B8; font-size: 18px; line-height: 1; cursor: pointer; }
.x4-dp-x:hover { background: #3A3A3E; color: var(--x4-orange); }
.x4-dp-q { display: inline-flex; align-items: center; border: 1px solid #3A3A3E; border-radius: 4px; }
.x4-dp-q button { width: 24px; height: 26px; padding: 0; border: 0; background: none; color: #fff; font-size: 15px; cursor: pointer; }
.x4-dp-q b { min-width: 18px; font-size: 13px; text-align: center; }
.x4-dp-tot { display: flex; justify-content: space-between; padding: 10px 2px 0; color: #B8B8B8; }
.x4-dp-tot b { color: #fff; }
.x4-dp-a { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 8px; }
.x4-dp-a.is-two { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) {
	.x4-dp-i, .x4-dp-i.is-ci { grid-template-columns: 44px 1fr auto; grid-template-areas: "img nm x" "img q p"; }
	.x4-dp-i img, .x4-dp-i i { grid-area: img; width: 44px; height: 33px; }
	.x4-dp-i a { grid-area: nm; } .x4-dp-i .x4-dp-x { grid-area: x; } .x4-dp-i .x4-dp-q { grid-area: q; justify-self: start; } .x4-dp-i .x4-dp-p { grid-area: p; justify-self: end; }
	.x4-cartbar__a { width: 100%; display: grid; grid-template-columns: 1fr 1fr 28px; gap: 8px; }
	.x4-dock2__in { gap: 6px; padding-inline: 10px; }
	body.x4-dock-on .x4-actionbar:not(.x4-actionbar--pdp) { display: none !important; }
	body.x4-dock-on { padding-bottom: 64px; }
	body.single-product .x4-dock2 { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
	.x4-dock2 { left: auto; right: 24px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
	.x4-dock2 > * { pointer-events: auto; }
	.x4-dock2__in { width: auto; max-width: none; margin: 0; padding: 10px 12px; justify-content: flex-end; gap: 10px; border-top: 2px solid var(--x4-orange); border-radius: 12px; background: #141414; box-shadow: 0 12px 32px rgba(16,24,40,.28), 0 0 0 1px rgba(255,255,255,.06); }
	.x4-dock2 .x4-d2cart { flex: none; margin-left: 0; }
	.x4-cartbar { min-width: 520px; padding: 12px 14px; gap: 16px; }
	.x4-d2back { max-width: 240px; }
	.x4-dpanel { width: 460px; max-width: 460px; max-height: min(60vh, 480px); margin: 0 0 8px; padding: 14px 14px 4px; border: 0; border-radius: 12px; background: #141414; box-shadow: 0 16px 40px rgba(16,24,40,.32), 0 0 0 1px rgba(255,255,255,.06); }
	.x4-dock2.is-open .x4-dock2__in { border-top-color: #3A3A3E; }
	.x4-dock2.is-atc .x4-d2atc { display: flex; align-items: center; gap: 10px; margin-right: 2px; padding-right: 12px; border-right: 1px solid #2E2E2E; }
	.x4-d2atc__n { max-width: 220px; overflow: hidden; color: #B8B8B8; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
	.x4-d2atc b { font-size: 16px; white-space: nowrap; }
	.x4-d2atc b del { display: none; }
}
/* G.TOAST */
.x4-toast { position: fixed; left: 50%; bottom: 90px; z-index: 100001; padding: 10px 16px; border-radius: 4px; background: #fff; color: #000; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); transform: translate(-50%, 8px); opacity: 0; transition: opacity .2s, transform .2s; }
.x4-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* C.BACKLINK */
.x4-backlink { display: flex; align-items: baseline; gap: 6px; max-width: 100%; margin: 0 0 12px; padding: 6px 0; color: var(--x4-text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.x4-backlink span { min-width: 0; max-width: 60ch; overflow: hidden; color: var(--x4-orange-text); font-weight: 600; text-overflow: ellipsis; }
.x4-backlink:hover span { text-decoration: underline; }
/* C.SCROLLBAR (Mockup pbar) */
.x4-hscroll, .x4-installs, .x4-pvrow, .x4-list__grid--cmp, .x4-featured ul.products { scrollbar-width: none !important; }
.x4-hscroll::-webkit-scrollbar, .x4-installs::-webkit-scrollbar, .x4-pvrow::-webkit-scrollbar, .x4-featured ul.products::-webkit-scrollbar { display: none; }
.x4-pbar { position: relative; width: 70%; max-width: 560px; height: 24px; margin: 8px auto 0; cursor: grab; touch-action: none; user-select: none; }
.x4-pbar[hidden] { display: none; }
.x4-pbar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: #E3E5E8; transition: height .15s, top .15s; }
.x4-pbar span { position: absolute; left: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--x4-orange); transition: height .15s, top .15s; }
.x4-pbar:hover::before, .x4-pbar:hover span, .x4-pbar.is-drag::before, .x4-pbar.is-drag span { top: 9px; height: 6px; border-radius: 3px; }
.x4-pbar.is-drag { cursor: grabbing; }
.x4-hscroll, .x4-installs, .x4-pvrow { cursor: grab; }
.is-mdrag { cursor: grabbing !important; user-select: none; }
.is-mdrag * { pointer-events: none; }
.x4-hscroll img, .x4-installs img, .x4-pvrow img { -webkit-user-drag: none; user-select: none; }
.x4-hscroll { display: grid !important; grid-auto-flow: column; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 3px 4px !important; margin: 0 !important; overscroll-behavior-x: contain; list-style: none; }
.x4-hscroll > * { scroll-snap-align: start; }
/* การ์ดสินค้าตาม Mockup .card */
.woocommerce ul.products li.product:not(.product-category) { border-radius: 8px !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.07); padding-bottom: 0 !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 12px 12px 6px !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.woocommerce ul.products li.product .x4-fit { padding-inline: 12px; font-size: 12px !important; line-height: 1.4; }
.woocommerce ul.products li.product .x4-pcard__row { margin-top: auto; padding-bottom: 12px; }
.woocommerce ul.products li.product .x4-pcard__row .price { font-size: 18px !important; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 0 !important; }
.x4-badge { padding: 5px 8px; font-size: 13px; line-height: 1; }
/* แถวสินค้าปัด (Hub · หน้าแรก) */
.x4-prodrow { grid-auto-columns: 62% !important; grid-template-columns: none !important; }
.x4-prodrow > li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (min-width: 768px) { .x4-prodrow { grid-auto-columns: calc((100% - 36px) / 4) !important; } }
/* PLP หัว + ลิงก์ข้อมูลแบบ */
.x4-plp__count { margin: -4px 0 12px; color: var(--x4-muted); font-size: 14px; }
.x4-gdlink { display: flex; justify-content: space-between; width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--x4-line); border-left: 3px solid var(--x4-orange); border-radius: 8px; background: #fff; color: var(--x4-text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.x4-gdlink:hover { border-color: var(--x4-orange); box-shadow: 0 0 0 2px var(--x4-orange), 0 10px 24px rgba(16,24,40,.12); transform: translateY(-2px); color: var(--x4-text); }
.x4-chip { cursor: pointer; }
.x4-chip span { color: var(--x4-muted); }
/* แถบรุ่นรถ (Mockup vbar): มือถือแถบดำเต็มจอ ขอบบนส้ม · คอมกล่องดำมุม 8 px */
.x4-vehbar .x4-vsel__t small { display: none; }
@media (max-width: 1023px) { .x4-vehbar { margin-inline: calc(-1 * var(--x4-gutter)); border-radius: 0; } .x4-vehbar .x4-vsel__t, .x4-vehbar .x4-vsel__f > span { display: none; } .x4-vehbar .x4-vsel { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .x4-vehbar .x4-vsel .x4-btn { grid-column: 1 / -1; } .x4-vehbar .x4-vsel select { height: 40px; font-size: 14px; padding: 0 8px; } }
/* S09 รุ่นรถยอดนิยม (Mockup pv) */
.x4-pv { overflow: hidden; padding-inline: 0 !important; }
.x4-s09h { display: grid; gap: 4px; margin-bottom: 16px !important; text-align: center; }
.x4-s09h .x4-h2 { margin: 0 !important; }
@media (min-width: 768px) { .x4-s09h .x4-h2 { font-size: 40px !important; } }
.x4-pvrow { display: grid; grid-auto-flow: column; grid-auto-columns: 72vw; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 14vw; max-width: none !important; }
.x4-pvi { position: relative; display: flex; align-items: center; justify-content: center; opacity: .28; transform: scale(.78); transition: opacity .35s, transform .35s; scroll-snap-align: center; }
.x4-pvi.is-on { opacity: 1; transform: scale(1); }
.x4-pvimg { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; }
.x4-pvimg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.x4-pvimg::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 4%; z-index: -1; height: 8%; background: radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 70%); }
.x4-pvcap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; max-width: 760px; margin: 8px auto 0; padding-inline: var(--x4-gutter); }
.x4-pvnav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #141414; cursor: pointer; }
.x4-pvnav svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.x4-pvnav:hover { color: var(--x4-orange); background: none; }
.x4-pvtxt { display: grid; gap: 2px; color: #141414; text-align: center; text-decoration: none; }
.x4-pvtxt small { color: var(--x4-orange-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.x4-pvtxt b { font-size: 24px; font-weight: 700; line-height: 1.2; }
.x4-pvtxt span { color: #5C5F66; font-size: 13px; }
@media (min-width: 768px) { .x4-pvrow { grid-auto-columns: 40vw; padding-inline: 30vw; } .x4-pvtxt b { font-size: 30px; } }
/* S10 สินค้าแต่งตรงรุ่น (Mockup s09 / s9card · ธีมขาว การ์ดดำ) */
.x4-s10tabs { display: flex; gap: 4px; margin-bottom: 24px !important; padding-inline: 12px; overflow-x: auto; border-bottom: 1px solid var(--x4-line); scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.x4-s10tabs::-webkit-scrollbar { display: none; }
.x4-s10tabs > :first-child { margin-left: auto; } .x4-s10tabs > :last-child { margin-right: auto; }
.x4-s10tabs button { padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: #7A7D84; font: 600 14px var(--x4-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.x4-s10tabs button[aria-selected="true"] { color: #141414; }
.x4-s10tabs button:hover { background: none; color: #141414; }
.x4-s10row { grid-auto-columns: 78%; gap: 16px !important; }
@media (min-width: 768px) { .x4-s10row { grid-auto-columns: calc((100% - 48px) / 4); } }
.x4-s9card { display: grid; grid-template-rows: auto 1fr; max-width: 100%; overflow: hidden; border-radius: 8px; background: #141414; color: #fff; text-decoration: none; box-shadow: 0 10px 26px rgba(16,24,40,.18); transition: transform .2s, box-shadow .2s; }
.x4-s9card:hover { color: #fff; box-shadow: 0 0 0 2px var(--x4-orange), 0 14px 30px rgba(16,24,40,.22); transform: translateY(-3px); }
.x4-s9card__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: #1E1E1E; }
.x4-s9card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x4-s9card__t { display: grid; gap: 4px; align-content: start; padding: 14px 16px 16px; }
.x4-s9card__t b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.x4-s9card__t > span { color: #B8B8B8; font-size: 13px; }
.x4-s9card__st { margin-top: 4px; padding-left: 6px; border-left: 2px solid var(--x4-orange); color: #B8B8B8; font-size: 12px; font-style: normal; line-height: 1.4; }
.x4-s9card__pr { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.x4-s9card__pr small { color: #B8B8B8; font-size: 12px; }
.x4-s9card__pr .price { color: #fff; font-size: 22px; font-weight: 700; }
.x4-s9card__go { margin-top: 6px; color: var(--x4-orange); font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .04em; }
@media (hover: none) { .x4-s9card:hover { transform: none; } }
/* CLP Hub ขาย */
.x4-hub { max-width: calc(var(--x4-wrap) + 2 * var(--x4-gutter)); margin-inline: auto; padding: 0 var(--x4-gutter) 48px; }
.x4-vehbar--hub { margin-top: 20px; }
.x4-hubh { padding: 16px 0 8px; border-bottom: 1px solid var(--x4-line); }
.x4-hubh .x4-h1 { margin: 4px 0 6px !important; }
.x4-hubh__meta { margin: 0; color: var(--x4-muted); }
.x4-hubnav { display: flex; gap: 8px; padding: 16px 0 8px; overflow-x: auto; scrollbar-width: none; }
.x4-hubnav .x4-chip { flex: none; }
.x4-hubf { padding-block: 28px; }
.x4-hubf + .x4-hubf { border-top: 1px solid var(--x4-line); }
.x4-hubf__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.x4-hubf__h p { margin: 4px 0 0; color: var(--x4-muted); font-size: 14px; }
.x4-hubf__h p b { color: var(--x4-text); }
.x4-hubf__a { display: flex; align-items: center; gap: 14px; }
/* C.CTABAND (Mockup cta-box) */
.x4-ctabox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 20px 22px; border-radius: 8px; background: #141414; color: #fff; }
.x4-ctabox > div { display: grid; gap: 4px; min-width: 0; }
.x4-ctabox b { font-size: 18px; font-weight: 600; }
.x4-ctabox .x4-eyebrow { color: var(--x4-orange) !important; margin: 0 !important; }
.x4-ctabox__s { color: #B8B8B8; font-size: 14px; }
.x4-hub__faqh { margin: 40px 0 16px !important; }
/* FAQ (Mockup qa) */
.x4-qas { display: grid; gap: 8px; }
.x4-qa { padding: 12px 16px; border: 1px solid var(--x4-line); border-radius: 4px; }
.x4-qa summary { font-weight: 600; cursor: pointer; }
.x4-qa[open] summary { margin-bottom: 6px; color: var(--x4-orange-text); }
/* 22 ตรวจเทียบ Mockup รอบ 1 (0.5.1) */
.woocommerce ul.products li.product:not(.product-category) .button, .woocommerce ul.products li.product .added_to_cart { display: none !important; }
.x4-crumb { margin: 16px 0 8px; color: var(--x4-muted); font-size: 13px; }
.x4-crumb a { color: var(--x4-muted); text-decoration: none; }
.x4-crumb a:hover { color: var(--x4-orange-text); }
.x4-shoptop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 16px; }
.x4-shoptop .x4-plp__count { margin: 2px 0 0; }
.x4-shoptop .woocommerce-ordering { margin: 0 !important; }
.x4-shoptop .woocommerce-ordering select { height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--x4-line); border-radius: 6px; font-size: 14px; }
.x4-shoptop__h { margin: 0 !important; }
.x4-plp__bar:empty, .x4-plp__bar:not(:has(.x4-chips)) { margin: 0; }
@media (min-width: 1024px) { .x4-plp__main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; } .x4-plp { grid-template-columns: 240px minmax(0, 1fr); } }
.x4-vehbar { margin-top: 20px; }
.x4-chip { background: #F1F2F4; border-color: #E3E5E8; }
.x4-lang { display: inline-flex; flex: none; height: 28px; margin-left: 2px; overflow: hidden; border: 1px solid #D5D8DC; border-radius: 4px; }
.x4-lang a { display: inline-flex; align-items: center; padding: 0 6px; color: #5C5F66; font: 600 11px var(--x4-font); text-decoration: none; }
.x4-lang a[aria-pressed="true"] { background: #141414; color: #fff; }
.x4-lang button { padding: 0 6px; border: 0; background: none; color: #5C5F66; font: 600 11px var(--x4-font); cursor: pointer; }
.x4-lang button[aria-pressed="true"] { background: #141414; color: #fff; }
/* C.PCARD ตาม Mockup (.card) */
.woocommerce ul.products li.product.x4-card { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: hidden; border: 1px solid var(--x4-line); border-radius: 8px !important; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.07); text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
@media (hover: hover) { .woocommerce ul.products li.product.x4-card:hover { border-color: var(--x4-orange); box-shadow: 0 0 0 2px var(--x4-orange), 0 10px 24px rgba(16,24,40,.12); transform: translateY(-2px); } }
.x4-card__a { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--x4-text) !important; text-decoration: none !important; }
.x4-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EDEFF1; }
.x4-card__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; border-radius: 0 !important; }
.x4-card__bd { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 12px; }
.x4-card__nm { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.x4-card__fit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--x4-muted); font-size: 12px; line-height: 1.4; }
.x4-card__fit b { color: var(--x4-orange-text); font-weight: 600; }
.x4-card__pr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.x4-card__pr .price { color: var(--x4-text) !important; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.x4-card__pr .price del { margin-right: 4px; color: var(--x4-muted); font-size: 13px; font-weight: 400; }
.woocommerce ul.products:has(> li.x4-card) { display: grid !important; align-items: stretch !important; gap: 12px !important; }
.woocommerce ul.products:has(> li.x4-card)::before, .woocommerce ul.products:has(> li.x4-card)::after { display: none !important; }
@media (max-width: 767px) { .woocommerce .x4-plp__main ul.products, .woocommerce.archive ul.products:not(.x4-hscroll) { grid-template-columns: 1fr 1fr !important; } }
/* 23 เทียบ Mockup รอบ 2 (0.5.2) */
.entry-content .x4-sec > *, .entry-content .x4-sec > .wp-block-group__inner-container > * { max-width: var(--x4-wrap) !important; margin-inline: auto !important; }
.entry-content .x4-pv > .x4-pvrow { max-width: none !important; }
.x4-s9card, .x4-s9card *, .x4-card__a, .x4-card__a * { text-decoration: none !important; }
[data-x4-s10panel][hidden], [data-x4-s10panel][hidden] + .x4-pbar { display: none !important; }
/* หน้าข้อมูล (Mockup phero · prose-wrap) */
.x4-phero { position: relative; margin-bottom: 0; padding-block: 8px 28px; border-bottom: 1px solid var(--x4-line); }
.x4-phero .x4-crumb { margin: 0; padding-top: 16px; }
.x4-phero .x4-eyebrow { margin-top: 16px !important; }
.x4-phero .x4-h1 { margin: 6px 0 0 !important; }
.x4-phero__lead { max-width: 60ch; margin: 8px 0 0 !important; color: var(--x4-muted); }
.x4-prose { padding-block: 24px 56px; }
.x4-prose .x4-page { max-width: 860px; margin: 0; padding: 0; }
.x4-prose .x4-page > .x4-pagelead { display: none; }
body.x4-info .entry-header { display: none; }
/* หน้าติดต่อเรา (Mockup two · box · srow · ff) */
.x4-two { display: grid; gap: 16px; }
@media (min-width: 1024px) { .x4-two { grid-template-columns: 1fr 1fr; align-items: start; } }
.x4-box { position: relative; display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--x4-line); border-radius: 8px; background: #fff; }
.x4-srow { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--x4-line); font-size: 14px; }
.x4-srow b { text-align: right; }
.x4-box .x4-note { margin: 0 !important; }
.x4-two__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x4-btn--line { background: transparent !important; color: var(--x4-text) !important; border: 1px solid var(--x4-text) !important; }
.x4-btn--line:hover { border-color: var(--x4-orange) !important; color: var(--x4-orange-text) !important; }
.x4-btn--dk { background: #141414 !important; color: #fff !important; border-color: #141414 !important; }
.x4-btn--dk:hover { background: #2A2A2D !important; }
.x4-mapb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--x4-line); border-radius: 8px; background: #EEF0EC; }
.x4-mapb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.x4-fgrid2 { grid-template-columns: 1fr; gap: 10px; }
.x4-ff { display: grid; gap: 4px; min-width: 0; }
.x4-ff label { color: var(--x4-muted); font-size: 13px; }
.x4-inp { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--x4-line) !important; border-radius: 4px !important; background: #fff; color: var(--x4-text); font: inherit; }
textarea.x4-inp { height: auto; padding: 10px 12px; }
.x4-inp:focus { border-color: var(--x4-orange) !important; outline: none; box-shadow: 0 0 0 3px rgba(244,128,40,.25); }
.x4-hp { position: absolute; left: -9999px; }
.x4-sent { margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(47,191,113,.1); color: #17803F; font-size: 14px; }
.x4-sent.is-err { background: #FDECEC; color: #B42318; }
/* Footer ตาม Mockup */
.x4-ftr__brand p { max-width: 40ch; margin: 8px 0 !important; color: var(--x4-hf-muted); }
.x4-ftr__col > span { color: var(--x4-hf-muted); }
.x4-ftr__col b, .x4-ftr__col b a { color: var(--x4-hf-fg); font-weight: 600; }
.x4-ftr__addr { font-size: 13px; }
.x4-s10tabs { cursor: grab; scroll-behavior: smooth; }
.x4-s10tabs.is-drag { cursor: grabbing; scroll-behavior: auto; }
.x4-s10tabs.is-drag button { pointer-events: none; }
.x4-s10tabs button { border-radius: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }

/* 0.5.3 หน้าแรกตาม Mockup: ระยะ Section · หมวด · สินค้าแนะนำ 1 แถว · บทความ ------------------ */
.entry-content > .x4-sec { padding-top: var(--x4-sec) !important; padding-bottom: var(--x4-sec) !important; }
.entry-content > .x4-sec.x4-vehicle { padding-top: 24px !important; padding-bottom: 0 !important; }
.entry-content > .x4-sec.x4-posts { padding-top: 24px !important; }
.x4-sechead { margin-bottom: 24px !important; align-items: flex-end; }
@media (min-width: 1024px) {
	.x4-hero.wp-block-cover { min-height: 600px !important; }
	.entry-content > .x4-sec.x4-vehicle { padding-top: 32px !important; }
	.x4-h2 { font-size: 32px !important; }
}
/* หมวดสินค้า: รูป 4:3 เต็มการ์ด · ชื่อไทย + ชื่ออังกฤษ · จำนวน */
.x4-cats li.product-category a { display: block !important; width: 100% !important; }
.x4-cats li.product-category img { width: 100% !important; max-width: none !important; aspect-ratio: 4 / 3 !important; object-fit: cover; }
.x4-cats .woocommerce-loop-category__title { padding: 10px 12px 12px !important; font-size: 17px !important; }
.x4-cats .woocommerce-loop-category__title b { display: block; font-weight: 600; font-size: 17px; line-height: 1.25; }
.x4-cats .woocommerce-loop-category__title .x4-catn { display: block; font-size: 13px; font-weight: 400; color: #5C5F66; margin-top: 2px; }
/* สินค้าแนะนำ: แถวเดียว ปัดเลื่อน + แถบเลื่อน · มือถือ 62% · คอม 4 ใบ */
.x4-featured ul.products { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-template-rows: auto !important;
	grid-auto-columns: 62% !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 6px 3px 4px !important; margin: 0 !important; height: auto !important; }
.x4-featured ul.products::before, .x4-featured ul.products::after { display: none !important; }
.x4-featured ul.products > li { width: auto !important; margin: 0 !important; float: none !important; scroll-snap-align: start; }
.x4-featured ul.products { cursor: grab; }
@media (min-width: 768px) { .x4-featured ul.products { grid-auto-columns: calc((100% - 36px) / 4) !important; } }
/* บทความล่าสุด: รูป 1200:630 · ชื่อ · คำอธิบาย 2 บรรทัด · วันที่ล่างสุด · มือถือรูปซ้าย 120 px */
.x4-posts .wp-block-post-template { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; }
.x4-posts .wp-block-post-template > li { display: grid; grid-template-columns: 120px 1fr; column-gap: 12px; align-content: start; margin: 0 !important; }
.x4-posts .wp-block-post-featured-image { grid-row: 1 / span 3; margin: 0 !important; }
.x4-posts .wp-block-post-featured-image img { aspect-ratio: 1200 / 630 !important; border-radius: 6px; height: auto !important; }
.x4-posts .wp-block-post-title { grid-column: 2; order: 1; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4; margin: 0 !important; }
.x4-posts .wp-block-post-excerpt { grid-column: 2; order: 2; margin: 0 !important; }
.x4-posts .wp-block-post-excerpt__excerpt { margin: 4px 0 0 !important; font-size: 14px; line-height: 1.5; color: var(--x4-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x4-posts .wp-block-post-excerpt__more-text { display: none !important; }
.x4-posts .wp-block-post-date { grid-column: 2; order: 3; font-size: 13px; color: var(--x4-muted); }
.x4-posts .wp-block-post-date a { color: inherit; text-decoration: none; }
@media (min-width: 768px) {
	.x4-posts .wp-block-post-template { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
	.x4-posts .wp-block-post-template > li { grid-template-columns: 1fr; row-gap: 0; }
	.x4-posts .wp-block-post-featured-image { grid-row: auto; margin: 0 0 12px !important; }
	.x4-posts .wp-block-post-title, .x4-posts .wp-block-post-excerpt, .x4-posts .wp-block-post-date { grid-column: 1; }
}
@media (hover: hover) {
	.x4-posts li:hover .wp-block-post-featured-image img { box-shadow: 0 0 0 2px var(--x4-orange), 0 10px 24px rgba(16,24,40,.12); }
	.x4-posts li:hover .wp-block-post-title a { color: var(--x4-orange-text); }
}
/* ปุ่มเลือกภาษาลอยของ TranslatePress: ใช้ปุ่ม TH/EN ที่ Header แทน (Mockup) */
#trp-floater-ls, .trp-floating-switcher { display: none !important; }
/* ปุ่มกลับขึ้นบนของ Astra: Mockup ไม่มี · ทับแถบตะกร้า → ซ่อน */
#ast-scroll-top { display: none !important; }

/* 0.6.0 PDP ตาม Mockup (product) ------------------------------------------------------------ */
.x4-pdp { max-width: var(--x4-wrap); margin: 0 auto; padding: 0 0 48px; }
.x4-pdp .x4-crumb { margin: 0; padding-top: 16px; }
.x4-pd { display: grid; gap: 20px; padding-top: 16px; }
.x4-pd > * { min-width: 0; }
.x4-gal-w { position: relative; min-width: 0; }
.x4-gal { position: relative; margin-inline: calc(var(--x4-gutter) * -1); }
.x4-gal__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; }
.x4-gal__track::-webkit-scrollbar { display: none; }
.x4-gal__m { scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.x4-gal__m img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; -webkit-user-drag: none; pointer-events: none; }
.x4-gal__cnt { position: absolute; right: 12px; top: 12px; z-index: 3; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.x4-gnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important; color: #141414 !important;
	font-size: 24px; line-height: 34px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.x4-gnav:hover { background: #fff !important; color: var(--x4-orange-text) !important; }
.x4-gnav--p { left: 10px; } .x4-gnav--n { right: 10px; }
.x4-gdots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.x4-gdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: width .15s; }
.x4-gdots i.on { width: 18px; border-radius: 4px; background: var(--x4-orange); }
.x4-thumbs { display: none; }
.x4-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.x4-info h1.product_title { margin: 0 !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.35 !important; overflow-wrap: anywhere; }
.x4-info .x4-sku { margin-top: 4px; font-size: 13px; color: var(--x4-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.x4-fitchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--x4-line); border-radius: 3px; background: var(--x4-soft); font-size: 13px; color: var(--x4-text); }
.x4-fitchip svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--x4-orange); stroke-width: 2.4; }
.x4-plinks { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: 14px; }
.x4-plinks a { color: var(--x4-orange-text); text-decoration: underline; text-underline-offset: 3px; }
.x4-plinks span { color: var(--x4-muted); }
.x4-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.x4-prow .price { font-size: 32px; font-weight: 700; line-height: 1; color: var(--x4-text) !important; }
.x4-prow .price del { font-size: 18px; color: var(--x4-muted); font-weight: 400; }
.x4-prow__vat { font-size: 13px; color: var(--x4-muted); }
.x4-ticks { margin: 0 !important; padding: 0; list-style: none; display: grid; gap: 8px; }
.x4-ticks li { position: relative; padding-left: 24px; font-size: 15px; }
.x4-ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--x4-orange); border-bottom: 2px solid var(--x4-orange); transform: rotate(-45deg); }
.x4-h3 { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.x4-rcv { margin: 0 !important; padding: 0; list-style: none; border: 1px solid var(--x4-line); border-radius: 8px; overflow: hidden; }
.x4-rcv li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 7px 12px; border-top: 1px solid var(--x4-line); }
.x4-rcv li:first-child { border-top: 0; }
.x4-rcv b { font-size: 14px; font-weight: 600; }
.x4-rcv small { font-size: 12px; color: var(--x4-muted); }
.x4-rcvn { margin: 8px 0 0 !important; font-size: 14px; }
.x4-same { padding: 2px 6px; border-radius: 3px; background: rgba(47,191,113,.14); color: #0E7A45; font-size: 12px; }
/* ปุ่ม: ใส่ตะกร้า · เปรียบเทียบ · ♡ สูงเท่ากัน 48 px */
.single-product form.cart.x4-pcta { display: grid !important; grid-template-columns: 1fr 1fr 48px; gap: 8px; margin: 0 !important; }
.x4-pcta > button { height: 48px !important; min-height: 48px !important; margin: 0 !important; width: 100%; padding: 0 12px !important; border-radius: 4px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; box-sizing: border-box; }
.x4-pcta .single_add_to_cart_button { background: var(--x4-orange) !important; border: 1.5px solid var(--x4-orange) !important; color: #000 !important; }
.x4-pcta .single_add_to_cart_button:hover { background: var(--x4-orange-hover) !important; border-color: var(--x4-orange-hover) !important; }
.x4-pcta .x4-cmpbtn { gap: 8px; background: #141414 !important; color: #fff !important; border: 1px solid #141414 !important; white-space: nowrap; }
.x4-pcta .x4-cmpbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.x4-pcta .x4-cmpbtn.on, .x4-pcta .x4-cmpbtn[aria-pressed="true"] { background: #141414 !important; color: #fff !important; box-shadow: inset 0 0 0 2px var(--x4-orange); }
.x4-pcta .x4-wishbtn { width: 48px; padding: 0 !important; background: #fff !important; border: 1.5px solid #141414 !important; color: #141414 !important; }
.x4-pcta .x4-wishbtn:hover { border-color: #E0245E !important; color: #E0245E !important; }
.x4-pcta .x4-wishbtn[aria-pressed="true"] { color: #E0245E !important; border-color: #F6C3D2 !important; background: #FFF1F5 !important; }
.x4-pcmp { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--x4-muted); }
.x4-pcmp[hidden] { display: none; }
.x4-pcmp a, .x4-phelp a { color: var(--x4-orange-text); text-decoration: underline; text-underline-offset: 3px; }
.x4-phelp { margin: 10px 0 0 !important; font-size: 14px; color: var(--x4-muted); }
/* แท็บ (คอม) / พับเปิด (มือถือ) */
.x4-below { min-width: 0; }
.x4-tabs { display: none; }
.x4-acc { border-top: 1px solid var(--x4-line); }
.x4-acc__b { width: 100%; display: flex !important; justify-content: space-between; align-items: center; padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--x4-line) !important; border-radius: 0 !important;
	background: none !important; color: var(--x4-text) !important; font: 600 17px var(--x4-font) !important; text-align: left; cursor: pointer; min-height: 0 !important; }
.x4-acc__b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.x4-acc__b[aria-expanded="true"] svg { transform: rotate(180deg); }
.x4-panel { padding: 16px 0 24px; border-bottom: 1px solid var(--x4-line); }
.x4-panel[hidden] { display: none; }
.x4-panel p { margin: 0 0 12px; }
.x4-tscroll { overflow-x: auto; }
.x4-ftab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 !important; border: 0 !important; }
.x4-ftab th, .x4-ftab td { text-align: left; padding: 10px 8px !important; border: 0 !important; border-bottom: 1px solid var(--x4-line) !important; background: none !important; }
.x4-ftab th { color: var(--x4-muted); font-weight: 400; font-size: 13px; }
.x4-ftab a { color: var(--x4-text); }
.x4-qas { display: grid; border-top: 1px solid var(--x4-line); }
.x4-panel .x4-qa, .x4-qas .x4-qa { padding: 0; border: 0; border-bottom: 1px solid var(--x4-line); border-radius: 0; }
.x4-qas .x4-qa summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; list-style: none; color: var(--x4-text) !important; margin: 0 !important; }
.x4-qas .x4-qa summary::-webkit-details-marker { display: none; }
.x4-qas .x4-qa summary::after { content: "+"; color: var(--x4-orange); font-size: 20px; line-height: 1; }
.x4-qas .x4-qa[open] summary::after { content: "−"; }
.x4-qas .x4-qa > div { padding: 0 0 14px; color: var(--x4-muted); font-size: 15px; }
.x4-rel h2 { margin: 24px 0 16px !important; }
.x4-rel .x4-hscroll { grid-auto-columns: 62%; }
@media (min-width: 768px) {
	.x4-gal { margin-inline: 0; }
	.x4-gal__m { border-radius: 8px; }
	.x4-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
	.x4-thumbs button { padding: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--x4-line) !important; border-radius: 4px !important; background: #fff !important; cursor: pointer; min-height: 0 !important; }
	.x4-thumbs button.on { border-color: var(--x4-orange) !important; }
	.x4-thumbs img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; }
	.x4-info h1.product_title { font-size: 26px !important; }
	.single-product form.cart.x4-pcta { grid-template-columns: minmax(0, 1fr) minmax(190px, auto) 48px; }
	.x4-rel .x4-hscroll { grid-auto-columns: calc((100% - 36px) / 4); }
}
@media (min-width: 1024px) {
	.x4-pd { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; padding-top: 24px; }
	.x4-below { grid-column: 1 / -1; }
	.x4-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--x4-line); }
	.x4-tabs button { padding: 14px 18px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--x4-muted) !important;
		font: 600 16px var(--x4-font) !important; cursor: pointer; min-height: 0 !important; }
	.x4-tabs button[aria-selected="true"] { color: var(--x4-text) !important; border-bottom-color: var(--x4-orange) !important; }
	.x4-acc { border: 0; }
	.x4-acc__b { display: none !important; }
	.x4-acc .x4-panel { border: 0; padding: 24px 0; max-width: 820px; }
	.x4-acc .x4-panel:not(.cur) { display: none !important; }
}

/* 0.6.0 ตะกร้า · ชำระเงิน · สั่งซื้อสำเร็จ · บัญชี · สลิป (Mockup two / box / sum) ------------------------ */
.x4-hide { display: none !important; }
.x4-muted { color: var(--x4-muted); }
.x4-sm { font-size: 13px; }
.x4-two--sum, .x4-two--acc { display: grid; gap: 16px; padding-block: 8px 0; }
.x4-sum { display: grid; gap: 10px; align-content: start; }
.x4-sumi { display: grid; gap: 10px; }
.x4-sum .x4-h3, .x4-sumi .x4-h3 { margin: 0; }
.x4-srow .price { font-weight: 700; white-space: nowrap; }
.x4-srow--sm { font-size: 13px; }
.x4-srow--disc .price { color: #1F8A4C; }
.x4-srow--disc a { margin-left: 6px; font-size: 12px; color: var(--x4-muted); }
.x4-srow--tot { border: 0 !important; font-size: 17px; font-weight: 600; }
.x4-btn--full { width: 100%; }
.x4-btn--dk { background: #141414 !important; border-color: #141414 !important; color: #fff !important; min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
.x4-btn--dk:hover { background: #2A2A2D !important; }
.x4-cpn { display: grid; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--x4-line); }
.x4-cpn label { font-size: 13px; color: var(--x4-muted); }
.x4-cpn__row { display: flex; gap: 8px; }
.x4-cpn__row .x4-inp { flex: 1; min-width: 0; height: 40px; }
.woocommerce-form-coupon-toggle, form.checkout_coupon { display: none !important; }
/* รายการในตะกร้า */
.x4-cartlist { gap: 0; align-content: start; }
.x4-crow { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; padding-block: 12px; border-bottom: 1px solid var(--x4-line); }
.x4-crow:last-of-type { border-bottom: 0; }
.x4-crow__img img { display: block; width: 72px !important; height: 72px !important; object-fit: cover; border-radius: 4px; margin: 0 !important; }
.x4-crow__i { display: grid; gap: 4px; min-width: 0; }
.x4-crow__n { color: var(--x4-text) !important; font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.x4-crow__m { font-size: 13px; color: var(--x4-muted); }
.x4-crow__p { font-weight: 700; white-space: nowrap; }
.x4-qty { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.x4-qty button { width: 30px; height: 30px; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--x4-line) !important; border-radius: 4px !important; background: var(--x4-soft) !important; color: var(--x4-text) !important; cursor: pointer; font-size: 16px; line-height: 1; }
.x4-qty input { width: 40px; height: 30px; padding: 0 !important; border: 0 !important; background: none; text-align: center; font: inherit; -moz-appearance: textfield; }
.x4-qty input::-webkit-outer-spin-button, .x4-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.x4-qty__x { color: var(--x4-muted) !important; font-size: 13px; text-decoration: underline; }
.x4-cartempty { justify-items: start; }
.woocommerce-cart .cart-collaterals, .woocommerce-cart .cross-sells { display: none; }
/* ฟอร์ม */
.x4-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.x4-cgrid .form-row { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 4px; min-width: 0; }
.x4-cgrid .form-row-wide { grid-column: 1 / -1; }
.x4-cgrid .form-row label { margin: 0; font-size: 13px; color: var(--x4-muted); line-height: 1.4; }
.x4-cgrid .form-row .required { color: #C0392B; text-decoration: none; }
.x4-cgrid .form-row .optional { display: none; }
.x4-cof .input-text, .x4-cof select, .x4-cof .select2-selection, .x4-accf .x4-inp, .woocommerce-MyAccount-content .input-text {
	width: 100%; min-height: 48px; padding: 0 12px !important; border: 1px solid var(--x4-line) !important; border-radius: 4px !important; background: #fff !important; font: inherit; box-shadow: none !important; }
.x4-cof .select2-selection { display: flex !important; align-items: center; }
.x4-cof .select2-selection__arrow { height: 46px !important; }
.x4-cof .input-text:focus, .x4-cof select:focus { border-color: var(--x4-orange) !important; outline: none; box-shadow: 0 0 0 3px rgba(244,128,40,.25) !important; }
.x4-ck { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 12px; font-size: 14px; cursor: pointer; }
.x4-ck input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--x4-orange); }
.x4-cobox { gap: 24px; align-content: start; }
.x4-cobox .x4-h3 { margin: 0 0 4px; }
.x4-acclink { margin: 0; font-size: 14px; color: var(--x4-muted); }
.x4-acclink a { color: var(--x4-orange-text); }
/* วิธีรับสินค้า */
.x4-pick { display: grid; gap: 8px; margin-top: 8px; }
.x4-pick label { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 12px; border: 1px solid var(--x4-line); border-radius: 8px; background: #fff; cursor: pointer; }
.x4-pick label:has(input:checked) { border-color: var(--x4-orange); box-shadow: 0 0 0 1px var(--x4-orange); }
.x4-pick input { grid-column: 1; grid-row: 1 / span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--x4-orange); }
.x4-pick b { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; }
.x4-pick small { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--x4-muted); line-height: 1.4; }
.x4-pick .x4-same { grid-column: 3; grid-row: 1; }
.x4-coaddr { margin-top: 12px; }
.x4-copick { display: none; margin-top: 12px; gap: 6px; font-size: 14px; }
.x4-copick a { color: var(--x4-orange-text); font-weight: 600; }
.x4-pk-pickup .x4-coaddr { display: none; }
.x4-pk-pickup .x4-copick { display: grid; }
.x4-pk-home .x4-f-depot:not(.x4-f-home), .x4-pk-depot .x4-f-home:not(.x4-f-depot) { display: none !important; }
/* การชำระเงิน */
.x4-copay #payment { background: none !important; border-radius: 0; }
.x4-copay #payment ul.payment_methods { margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; list-style: none; display: grid; gap: 8px; }
.x4-copay #payment ul.payment_methods li { padding: 12px !important; border: 1px solid var(--x4-line); border-radius: 8px; background: #fff; }
.x4-copay #payment ul.payment_methods li:has(input:checked) { border-color: var(--x4-orange); }
.x4-copay #payment ul.payment_methods li input { accent-color: var(--x4-orange); margin-right: 8px; }
.x4-copay #payment ul.payment_methods li label { font-weight: 600; }
.x4-copay #payment div.payment_box { margin: 6px 0 0 !important; padding: 0 !important; background: none !important; color: var(--x4-muted); font-size: 13px; }
.x4-copay #payment div.payment_box::before { display: none !important; }
.x4-copay #payment .place-order { display: grid; gap: 10px; margin: 16px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--x4-line); }
.x4-copay #place_order { display: none !important; }
.x4-copay .woocommerce-privacy-policy-text { font-size: 13px; color: var(--x4-muted); }
.x4-copay .x4-agree { margin: 0 !important; padding: 0; border: 0; background: none; }
.x4-copay .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 !important; padding: 0 !important; font-size: 14px; }
/* สั่งซื้อสำเร็จ */
.x4-ordbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 8px 0 16px; overflow: hidden; border: 1px solid var(--x4-line); border-radius: 8px; background: var(--x4-line); }
.x4-ordbar > div { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; background: #fff; }
.x4-ordbar span { font-size: 12px; color: var(--x4-muted); }
.x4-ordbar b { font-size: 15px; overflow-wrap: anywhere; }
.x4-tybox { gap: 20px; align-content: start; }
.x4-bank { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.x4-bank:not(:has(.x4-bank__qr)) { grid-template-columns: 1fr; }
.x4-bank__qr { width: 120px; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.x4-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.x4-kv dt { color: var(--x4-muted); }
.x4-kv dd { margin: 0; }
.x4-slip { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--x4-line); border-radius: 8px; }
.x4-box.x4-slip { margin-bottom: 16px; }
.x4-slipform { display: grid; gap: 10px; }
.x4-slipform .x4-cgrid { margin: 0; }
.x4-slipform .x4-ff { margin: 0; }
.x4-slipf { display: block; padding: 14px; border: 1px dashed #8A8D93; border-radius: 6px; color: var(--x4-muted); font-size: 14px; text-align: center; cursor: pointer; }
.x4-slipf input { display: none; }
.x4-slipf img { display: block; max-width: 100%; max-height: 220px; margin: 10px auto 0; border-radius: 4px; }
.x4-slipch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.x4-slipch .x4-btn { padding: 0 8px !important; font-size: 14px !important; }
.x4-steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 14px; }
.x4-msg { padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.x4-msg--ok { background: #EAF7EF; border: 1px solid #BFE5CC; color: #1F5C38; }
.x4-msg--err { background: #FDECEA; border: 1px solid #F5C2BC; color: #8A1F14; }
/* บัญชีของฉัน */
.x4-accf { display: grid; gap: 14px; justify-items: stretch; }
.x4-accf .x4-ff { margin: 0; }
.x4-accf .x4-linkbtn { justify-self: start; }
.x4-accaside { align-content: start; }
.x4-accaside p { margin: 0; font-size: 14px; }
.woocommerce-account .woocommerce { display: grid; gap: 16px; }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; border: 0 !important; }
.woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px !important; border: 1px solid var(--x4-line); border-radius: 6px; background: #fff; color: var(--x4-muted) !important; font-size: 14px; text-align: center; text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { border-color: var(--x4-orange); color: var(--x4-text) !important; }
.woocommerce-MyAccount-content { padding: 16px; border: 1px solid var(--x4-line); border-radius: 8px; background: #fff; min-width: 0; }
.woocommerce-MyAccount-content .woocommerce-orders-table { border: 0 !important; font-size: 14px; }
.woocommerce-MyAccount-content .woocommerce-orders-table th, .woocommerce-MyAccount-content .woocommerce-orders-table td { padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--x4-line) !important; text-align: left; background: none !important; }
.woocommerce-orders-table__cell-order-status { white-space: nowrap; }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: var(--x4-orange-text); font-weight: 600; }
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: #17803F; font-weight: 600; }
.woocommerce-orders-table .button { min-height: 36px !important; padding: 0 14px !important; font-size: 14px !important; }
.woocommerce-orders-table .button.view { background: #fff !important; border-color: #C9CDD2 !important; }
@media (max-width: 767px) {
	.x4-cgrid { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-content table.shop_table_responsive tr { display: grid; gap: 4px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--x4-line); border-radius: 8px; }
	.woocommerce-MyAccount-content table.shop_table_responsive td { border: 0 !important; padding: 0 !important; }
}
@media (min-width: 768px) { .x4-ordbar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
	.x4-two--sum { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
	.x4-two--acc { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
	.x4-sum { position: sticky; top: 100px; }
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 220px 1fr; align-items: start; }
	.woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation li a { text-align: left; }
}
.x4-fgrid2 > p:empty { display: none; }

/* 0.7.0 ------------------------------------------------------------------------------- */
/* พื้นหลังขาวทุกหน้า (Astra ตั้งพื้นดำไว้ในหน้าบทความ / 404) */
body, body.ast-separate-container, .ast-separate-container .site-content, .ast-separate-container #primary { background: #fff !important; }
.ast-separate-container .ast-article-single, .ast-separate-container .ast-article-post { background: #fff; }
body.x4-mkpage .site-content > .ast-container { max-width: none !important; padding: 0 !important; display: block; }
body.x4-mkpage #primary { margin: 0 !important; padding: 0 !important; }
/* ค้นหา Header (Mockup .sg) */
.x4-sbox { position: relative; }
.x4-sg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; min-width: 300px; max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid #E3E5E8; border-radius: 6px; background: #fff; box-shadow: 0 12px 32px rgba(16,24,40,.12); text-align: left; }
.x4-sg[hidden] { display: none; }
.x4-sg-h { padding: 8px 8px 4px; color: #888; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.x4-sg-i { display: flex; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 4px; color: #2B2D31 !important; font-size: 14px; text-decoration: none !important; }
.x4-sg-i:hover { background: #F4F5F6; color: #141414 !important; }
.x4-sg-i b { color: #141414; font-weight: 600; }
.x4-sg-i span { color: #6B6F76; font-size: 12px; }
.x4-sg-p .x4-sg-t { min-width: 0; overflow: hidden; color: #2B2D31; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.x4-sg-p .price { flex: none; color: #141414; font-size: 13px; font-weight: 700; }
.x4-sg-all { display: block; margin-top: 4px; padding: 9px; border-radius: 4px; background: var(--x4-orange); color: #000 !important; font-weight: 600; text-align: center; text-decoration: none !important; }
.x4-sg-empty { padding: 12px; color: #6B6F76; font-size: 14px; }
/* ติดต่อเรา: ฟอร์มคอลัมน์เดียวตาม Mockup */
.x4-fgrid2 > .x4-hp, .x4-fgrid2 > p:empty, .x4-fgrid2 > br { display: none !important; }
.x4-fgrid2 > .x4-ff, .x4-fgrid2 > button { grid-column: 1 / -1; }
/* ชำระเงิน: ช่องสรุปไม่ให้ Astra บีบ */
.x4-cof #order_review, .x4-cof #order_review_heading { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.x4-cof .x4-sum .x4-h3 { border: 0 !important; padding: 0 !important; }
.x4-cof #customer_details { float: none !important; width: auto !important; }
.x4-cof .x4-h3 { border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; font-size: 18px; font-weight: 600; }
.x4-cof .x4-btn--full, .x4-cartf .x4-btn--full { min-height: 48px; }
.x4-cof [data-x4-place] { background: var(--x4-orange) !important; border-color: var(--x4-orange) !important; color: #000 !important; }
.x4-cof .x4-pick input[type=radio] { appearance: auto; }
/* บัญชีของฉัน: เมนูซ้าย เนื้อหาขวา */
.woocommerce-account .x4-prose > .woocommerce { display: grid; gap: 16px; }
.woocommerce-account .x4-prose > .woocommerce > * { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.woocommerce-account.logged-in .x4-prose > .woocommerce { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
	.woocommerce-account.logged-in .x4-prose > .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
	.woocommerce-account.logged-in .x4-prose > .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
	.woocommerce-account.logged-in .x4-prose > .woocommerce > .woocommerce-notices-wrapper { grid-row: 1; }
}
.woocommerce-MyAccount-content > p:first-child:empty { display: none; }
.single-product form.cart.x4-pcta::before, .single-product form.cart.x4-pcta::after { display: none !important; content: none !important; }
/* หน้าจอไม่เลื่อนซ้าย-ขวาเอง (มือถือ): ลิงก์กลับยาวเกินจอ */
.x4-backlink { overflow: hidden; }
.x4-backlink span { max-width: 100%; }
#page, .site { overflow-x: clip; }
.woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { overflow-wrap: anywhere; }
/* ค้นหา: ยี่ห้อ + รุ่นอยู่บรรทัดเดียว ปีชิดขวา */
.x4-sg-i { align-items: baseline; }
.x4-sg-l { min-width: 0; flex: 1; color: #2B2D31; font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-sg-l b { color: #141414; }
.x4-sg-i > span:last-child { flex: none; white-space: nowrap; }
.x4-sg { left: auto; right: 0; min-width: 400px; } @media (max-width: 600px) { .x4-sg { left: 0; right: 0; min-width: 0; } }
/* Header มือถือแคบ: ปุ่ม TH/EN ไม่ล้นขอบจอ */
@media (max-width: 430px) {
	.x4-hdr__row { gap: 0 !important; }
	.x4-hdr__row .x4-ib { width: 34px !important; min-width: 34px; }
	.x4-hdr__row .x4-logo { max-width: 92px; }
	.x4-hdr__row .x4-logo img { max-width: 100%; height: auto; }
	.x4-lang { margin-left: 2px; }
	.x4-lang a, .x4-lang button { padding: 0 5px; }
}
/* ปุ่มไอคอน / ปุ่ม × : ไม่ให้สีฟ้าของ Astra ขึ้นตอนชี้หรือกด */
.x4-ib, .x4-ib:hover, .x4-ib:focus, .x4-ib:active,
.x4-cbx:hover, .x4-cbx:focus, .x4-cbx:active,
.x4-linkbtn:hover, .x4-linkbtn:focus, .x4-linkbtn:active,
.x4-acc__b:hover, .x4-acc__b:focus, .x4-tabs button:hover, .x4-tabs button:focus,
.x4-lang button:hover, .x4-lang button:focus { background: none !important; background-color: transparent !important; border-color: transparent; box-shadow: none !important; }
.x4-ib:hover, .x4-ib:focus-visible { color: var(--x4-orange) !important; }
.x4-ib:focus:not(:focus-visible) { color: inherit !important; }
.x4-drawer__h .x4-ib:focus:not(:focus-visible) { color: var(--x4-text) !important; }
.x4-qty button:hover, .x4-qty button:focus, .x4-gnav:focus, .x4-thumbs button:focus, .x4-mk .cmpx:hover, .x4-mk .cmpx:focus { background-color: #fff !important; color: var(--x4-text) !important; }
.x4-qty button:hover, .x4-qty button:focus { background-color: var(--x4-soft) !important; }
:where(.x4-ib, .x4-qty button, .x4-gnav, .cmpx):focus-visible { outline: 2px solid var(--x4-orange); outline-offset: 2px; }

/* 0.7.9 การ์ดสินค้า: ปุ่มใส่ตะกร้าแทนป้ายสถานะ (ราคาชิดล่างการ์ด) */
.woocommerce ul.products li.product.x4-card { display: flex !important; flex-direction: column; }
.x4-card .x4-card__a { flex: 1 1 auto; height: auto; }
.x4-card .x4-card__pr { flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 0 12px 12px; }
.x4-card .x4-card__pr .price { min-width: 0; margin: 0 !important; padding: 0 !important; line-height: 1.2; }
.x4-cardatc { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--x4-orange) !important; border-radius: 4px !important; background: #fff !important; color: var(--x4-orange-text) !important; box-shadow: none !important; cursor: pointer; transition: background .15s, opacity .15s; }
.x4-cardatc:hover, .x4-cardatc:focus-visible { background: var(--x4-orange) !important; color: #fff !important; }
.x4-cardatc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x4-cardatc .x4-i-ok { display: none; }
.x4-cardatc.is-in { border-color: var(--x4-ink) !important; background: var(--x4-ink) !important; color: #fff !important; }
.x4-cardatc.is-in .x4-i-cart { display: none; }
.x4-cardatc.is-in .x4-i-ok { display: block; }
.x4-cardatc.is-busy { opacity: .55; pointer-events: none; }
.x4-card__rm { align-self: flex-start; margin: -4px 12px 12px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--x4-muted) !important; font-size: 13px; text-decoration: underline; cursor: pointer; }
.x4-card__rm:hover { color: var(--x4-orange-text) !important; }
ul.products.x4-wgrid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; }
ul.products.x4-wgrid::before, ul.products.x4-wgrid::after { display: none !important; }
@media (min-width: 768px) { ul.products.x4-wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.woocommerce-MyAccount-content ul.products.x4-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 1024px) { .woocommerce-MyAccount-content ul.products.x4-wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* 0.8.1 ยืนยันออกจากระบบ (Mockup modal) · ฟอร์มที่อยู่ในบัญชี */
.x4-cfm { position: fixed; inset: 0; z-index: 100002; display: grid; place-items: center; padding: 16px; }
.x4-cfm__s { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.x4-cfm__b { position: relative; display: grid; gap: 10px; width: min(400px, 100%); padding: 24px; border-radius: 8px; background: #fff; box-shadow: 0 20px 48px rgba(0,0,0,.3); }
.x4-cfm__b b { font-size: 20px; font-weight: 700; color: var(--x4-text); }
.x4-cfm__b p { margin: 0; color: var(--x4-muted); font-size: 14px; }
.x4-cfm__a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.x4-cfm__a .x4-btn { justify-content: center; text-align: center; }
.x4-addrf { display: grid; gap: 4px; }
.x4-addrf .x4-h3 { margin: 0; }
.x4-addrf > p { margin: 0; }
.x4-addrf__a { margin: 16px 0 0 !important; }
.x4-addrf .x4-muted { color: var(--x4-muted); font-size: 14px; }

/* 0.8.4 G.COOKIE (Mockup v98): มือถือแถบขาวล่างจอ ขอบบนส้ม · คอมการ์ดลอยซ้ายล่าง 420px ไม่ชน Dock ขวา */
.x4-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; display: grid; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; color: #141414; border-top: 2px solid var(--x4-orange); box-shadow: 0 -8px 24px rgba(16,24,40,.14); font-size: 14px; animation: x4cookieIn .3s ease both; }
.x4-cookie[hidden] { display: none !important; }
.x4-cookie p { margin: 0; line-height: 1.55; color: #3A3D42; }
.x4-cookie a { color: var(--x4-orange-text); text-decoration: underline; }
.x4-cookie__b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x4-cookie__b .x4-btn { justify-content: center; text-align: center; }
.x4-cookie .x4-btn--ghost { color: #141414 !important; border-color: #141414 !important; background: #fff !important; }
@keyframes x4cookieIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) { .x4-cookie { right: auto; left: 24px; bottom: 20px; width: 420px; border: 1px solid var(--x4-line); border-top: 2px solid var(--x4-orange); border-radius: 12px; animation: none; } }
@media (prefers-reduced-motion: reduce) { .x4-cookie { animation: none; } }