/**
 * หน้าตาพื้นฐานของรายการ/การ์ด/ตัวกรอง ตารางข้อมูล (spec ข้อ 6.1–6.3)
 *
 * - สีและขนาดหลักเป็น CSS variable — แพ็กเกจของลูกค้าทับได้ที่ :root หรือที่ตัวห่อของตัวเอง
 * - ทุก selector ขึ้นต้น .cz- (ไม่แตะของธีม) · ความเจาะจงต่ำ ทับง่าย
 * - ธีม Kadence: ใส่พื้นหลังฟ้าให้ทุก <button> → ล้างบนปุ่มของเรา · img{max-width:100%} → รูปการ์ดคุมด้วยกรอบ aspect-ratio
 * - มือถือ: การ์ด 1–2 คอลัมน์ · ตัวกรองซ้อนแนวตั้ง · ไม่ล้นแนวนอนที่ 375 px
 */

/*
 * ตัวแปรที่ทับได้ (ค่าเริ่มเขียนเป็น fallback ทุกจุด → ตั้งที่ :root หรือตัวห่อใดก็ได้):
 *   --cz-accent (token --czt-accent = สีปุ่มของธีม) · --cz-accent-ink #fff · --cz-muted #6b7280 · --cz-line #e5e7eb
 *   --cz-surface #fff · --cz-soft #f5f7fa · --cz-radius 12px · --cz-radius-sm 8px
 *   --cz-gap 24px · --cz-media-ratio 4 / 3 · --cz-cols (ตั้งโดยบล็อกรายการ ค่าเริ่ม 3)
 */

/*
 * ---------------- ฟอนต์ (blocks-v2 §6.4) ----------------
 * รากของทุกบล็อก/ส่วนผลตั้งฟอนต์ชัดเจนจาก token (ฟอนต์ของธีม) — ใน editor (iframe) อะไรที่ฟอนต์ของธีมไปไม่ถึงจะไม่ตกไป
 * serif/monospace ของ reset · ตัวควบคุมด้านในสืบทอดจากราก (ไม่พึ่งค่าของเบราว์เซอร์ — textarea/select มีฟอนต์ของตัวเอง)
 */
[class*="wp-block-cirney-"],
.cz-results,
.cz-filter {
	font-family: var(--czt-font);
}

[class*="wp-block-cirney-"] :is(select, input, button, textarea),
.cz-results :is(select, input, button, textarea),
.cz-filter :is(select, input, button, textarea) {
	font-family: inherit;
}

/* editor: บล็อกที่บนหน้าเว็บว่างในสถานะนี้ (เช่น ตัวกรองที่เลือกอยู่ ตอนยังไม่มีตัวกรอง) = กรอบเส้นประบางให้คลิกเลือกได้ ไม่มีข้อความ */
.cz-editor-empty {
	min-height: 8px;
	border: 1px dashed var(--czt-line);
	border-radius: 4px;
	opacity: 0.7;
}

/* ---------------- ส่วนผล ---------------- */

.cz-results {
	position: relative;
	transition: opacity 0.15s ease;
}

.cz-results:focus {
	outline: none; /* โฟกัสจาก JS หลังเปลี่ยนหน้า — ไม่ต้องมีกรอบ */
}

.cz-results--loading {
	opacity: 0.45;
	pointer-events: none;
}

/* "พบ N รายการ" เหนือการ์ด */
.cz-results-count {
	margin: 0 0 12px;
	color: var(--cz-muted, #6b7280);
	font-size: 0.95em;
}

.cz-results-empty,
.cz-results-error {
	margin: 0 0 12px;
	padding: 24px;
	border-radius: var(--cz-radius, 12px);
	background: var(--cz-soft, #f5f7fa);
	color: var(--cz-muted, #6b7280);
	text-align: center;
}

.cz-clear {
	color: var(--cz-accent, var(--czt-accent));
}

/* ---------------- กริดการ์ด ---------------- */

.cz-grid {
	display: grid;
	grid-template-columns: repeat(var(--cz-cols, 3), minmax(0, 1fr));
	gap: var(--cz-gap, 24px);
	margin: 0;
	padding: 0;
}

.cz-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--cz-line, #e5e7eb);
	border-radius: var(--cz-radius, 12px);
	background: var(--cz-surface, #fff);
	color: inherit;
}

/* กรอบรูปสัดส่วนคงที่ — จองพื้นที่ก่อนรูปโหลด (กัน CLS) */
.cz-card-media {
	position: relative;
	aspect-ratio: var(--cz-media-ratio, 4 / 3);
	overflow: hidden;
	background: var(--cz-soft, #f5f7fa);
}

.cz-card-media > a {
	display: block;
	width: 100%;
	height: 100%;
}

.cz-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none; /* ธีมบีบรูปที่กำหนดขนาดเอง */
	object-fit: cover;
	border-radius: 0;
}

.cz-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.cz-card-title {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* รูปของหมวดบนการ์ด (โลโก้แบรนด์) — สูงคงที่ กว้างตามสัดส่วนของรูป (width/height ของ <img> จองที่ไว้ กัน CLS) */
.cz-card-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.cz-card-logos img {
	display: block;
	width: auto;
	height: 28px;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
}

.cz-card-title a {
	color: inherit;
	text-decoration: none;
}

.cz-card-title a:hover,
.cz-card-title a:focus-visible {
	color: var(--cz-accent, var(--czt-accent));
}

.cz-card-price {
	font-weight: 600;
}

.cz-price-old {
	margin-right: 4px;
	color: var(--cz-muted, #6b7280);
	font-weight: 400;
}

.cz-price-now {
	text-decoration: none;
	background: none;
}

/* ราคาหนึ่งตัวไม่แตกบรรทัดกลางตัวเลข/หน่วย (3,950 / บาท) */
.cz-price-old,
.cz-price-now {
	white-space: nowrap;
}

.cz-card-specs {
	display: grid;
	gap: 4px;
	margin: 0;
	font-size: 0.9em;
}

.cz-card-spec {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	min-width: 0;
}

.cz-card-spec dt {
	margin: 0;
	color: var(--cz-muted, #6b7280);
	font-weight: 400;
}

.cz-card-spec dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------------- การ์ดประกอบเอง (template การ์ด + block ของการ์ด) ---------------- */

/* กรอบเดียวกับการ์ดตายตัว (.cz-card) · block ด้านในเรียงแนวตั้งห่าง 8px ระยะข้าง 16px
   (.cz-card.cz-card--custom > * ชนะ margin ของธีมที่ใส่ให้ h3/p · ระยะที่ตั้งในแท็บ Styles เป็น inline style จึงชนะอีกชั้น) */
.cz-card--custom {
	--_cz-inset: var(--cz-card-inset, 16px); /* ระยะข้างของบล็อกที่อยู่ตรงใต้การ์ด · ตั้ง "inset" ที่ชิ้นส่วนการ์ดเป็น 0 = เต็มขอบ */
	gap: 8px;
	padding-bottom: 16px;
}

.cz-card.cz-card--custom:not(:where(.cz-card--bare)) > * { /* :where() = น้ำหนักเท่าเดิม · การ์ดเปล่า (cz-card--bare) ไม่ใส่ margin ให้ลูก — margin ที่ตั้งในบล็อกชนะ */
	margin: 0 var(--_cz-inset);
	min-width: 0;
}

/* รูปบนสุดเต็มขอบการ์ดแบบการ์ดตายตัว */
.cz-card.cz-card--custom > .cz-item-image:first-child,
.cz-card.cz-card--custom > .wp-block-cirney-item-image:first-child {
	margin: 0;
}

.cz-card.cz-card--custom > .cz-card-title,
.cz-card.cz-card--custom > .wp-block-heading {
	font-size: 1.05em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.cz-card--custom .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.cz-card--custom .wp-block-heading a:hover,
.cz-card--custom .wp-block-heading a:focus-visible {
	color: var(--cz-link, var(--czt-accent));
}

/* ปุ่มของ core ในการ์ด: ชิดล่างเมื่อการ์ดในแถวสูงไม่เท่ากัน */
.cz-card--custom > .wp-block-buttons:last-child {
	margin-top: auto;
}

.cz-item-image {
	overflow: hidden;
	background: var(--cz-soft, #f5f7fa);
}

.cz-item-image > a {
	display: block;
}

.cz-item-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none; /* ธีม Kadence บีบรูปที่กำหนดขนาดเอง (img{max-width:100%}) */
	border-radius: 0;
}

.cz-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cz-badge, #c81e1e); /* ตัวหนังสือขาวบนแดงเข้ม ผ่าน AA */
	color: var(--cz-badge-ink, #fff);
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
}

.cz-item-terms {
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.cz-item-terms a {
	color: var(--cz-link, var(--czt-accent));
	text-decoration: none;
}

.cz-item-terms a:hover,
.cz-item-terms a:focus-visible {
	text-decoration: underline;
}

.cz-item-specs--inline .cz-card-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

@media (max-width: 480px) {
	.cz-card.cz-card--custom:not(:where(.cz-card--bare)) > * {
		margin-right: var(--_cz-inset);
		margin-left: var(--_cz-inset);
	}

	.cz-card--custom {
		--_cz-inset: var(--cz-card-inset, 12px);
		padding-bottom: 12px;
	}
}

/* ---------------- แบ่งหน้า ---------------- */

.cz-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: var(--cz-gap, 24px);
}

.cz-pagination a,
.cz-pagination .cz-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--cz-line, #e5e7eb);
	border-radius: var(--cz-radius-sm, 8px);
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.cz-pagination a:hover,
.cz-pagination a:focus-visible {
	border-color: var(--cz-accent, var(--czt-accent));
	color: var(--cz-accent, var(--czt-accent));
}

.cz-pagination .cz-page-current {
	border-color: var(--cz-accent, var(--czt-accent));
	background: var(--cz-accent, var(--czt-accent));
	color: var(--cz-accent-ink, var(--czt-accent-ink));
}

.cz-pagination .cz-page-gap {
	border-color: transparent;
	min-width: 24px;
	padding: 0;
}

/* ---------------- ตัวกรอง ---------------- */

.cz-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	margin: 0 0 var(--cz-gap, 24px);
	min-width: 0;
}

.cz-filter__label,
.cz-filter__legend {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 0.9em;
	font-weight: 600;
}

.cz-filter__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cz-filter__search,
.cz-filter__sort {
	min-width: 0;
}

.cz-filter input[type="search"],
.cz-filter input[type="text"],
.cz-filter input[type="date"],
.cz-filter select {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--cz-line, #e5e7eb);
	border-radius: var(--cz-radius-sm, 8px);
	background: var(--cz-surface, #fff);
	color: inherit;
	font: inherit;
}

.cz-filter input:focus-visible,
.cz-filter select:focus-visible {
	outline: 2px solid var(--cz-accent, var(--czt-accent));
	outline-offset: 1px;
	border-color: var(--cz-accent, var(--czt-accent));
}

.cz-filter input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--cz-accent, var(--czt-accent));
}

.cz-filter__opts {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ในเนื้อหาของหน้า (block/shortcode) ธีมเติม padding ให้ ul ของเนื้อหา (Kadence .entry-content ul) — ตัวเลือกเยื้องเกินหัวกลุ่ม */
.cz-filter ul.cz-filter__opts {
	padding: 0;
}

.cz-filter__opt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.cz-filter__opt label {
	min-width: 0;
	cursor: pointer;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.cz-filter__opt input:disabled + label {
	cursor: default;
	opacity: 0.45;
}

.cz-depth-1 { padding-left: 16px; }
.cz-depth-2 { padding-left: 32px; }
.cz-depth-3 { padding-left: 48px; }
.cz-depth-4,
.cz-depth-5 { padding-left: 64px; }

.cz-filter__count {
	color: var(--cz-muted, #6b7280);
	font-size: 0.9em;
}

/* หมวดลำดับชั้น: หมวดย่อยพับใต้หมวดแม่ · ปุ่มลูกศรชิดขวาของแถวหมวดแม่ (summary ลอยอยู่ในแถว ไม่กินบรรทัดเมื่อปิด) */
.cz-filter__opt--parent {
	position: relative;
	flex-wrap: wrap;
	row-gap: 0; /* กลุ่มย่อยที่ปิดอยู่ไม่เพิ่มช่องว่างใต้แถว */
	padding-right: 36px;
}

.cz-filter__opt--parent > label {
	flex: 1 1 0; /* ชื่อหมวดหดในแถวเดียวกับกล่องติ๊ก ไม่ตกบรรทัด (flex-wrap ของแถวมีไว้ให้กลุ่มย่อยเท่านั้น) */
}

/* หมวดแม่ที่ถูกหมวดลูกแทน (เลือกทั้งแบรนด์และรุ่น = กรองตามรุ่น): ยังติ๊กอยู่ แต่จำนวนของแม่ไม่ใช่จำนวนผล → จาง */
.cz-filter__opt--narrowed > label .cz-filter__count {
	opacity: 0.5;
}

.cz-filter__sub {
	flex: 0 0 100%;
	min-width: 0;
}

.cz-filter__sub > summary {
	position: absolute;
	top: -5px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--cz-radius-sm, 8px);
	color: var(--cz-muted, #6b7280);
	cursor: pointer;
	list-style: none;
}

.cz-filter__sub > summary::-webkit-details-marker {
	display: none;
}

.cz-filter__sub > summary::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
}

.cz-filter__sub[open] > summary::before {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.cz-filter__sub > summary:hover {
	background: var(--cz-soft, #f5f7fa);
	color: inherit;
}

.cz-filter__sub > summary:focus-visible {
	outline: 2px solid var(--cz-accent, var(--czt-accent));
	outline-offset: 1px;
}

.cz-filter__sub > .cz-filter__opts {
	margin: 6px 0 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cz-filter__sub > summary::before {
		transition: none;
	}
}

.cz-filter__more {
	margin-top: 6px;
}

.cz-filter__more > summary {
	color: var(--cz-accent, var(--czt-accent));
	cursor: pointer;
	font-size: 0.9em;
}

.cz-filter__more > .cz-filter__opts {
	margin-top: 6px;
}

.cz-filter__range {
	display: flex;
	gap: 8px;
}

.cz-filter__end {
	flex: 1 1 0;
	min-width: 0;
}

.cz-filter__end .cz-filter__label {
	font-weight: 400;
	color: var(--cz-muted, #6b7280);
}

/* ปุ่ม "ใช้ตัวกรอง" — ล้างพื้นหลังฟ้าของธีมแล้วใส่สีของเราเอง */
.cz-filter .cz-filter__apply {
	align-self: flex-end;
	min-height: 40px;
	margin: 0;
	padding: 8px 20px;
	border: 1px solid var(--cz-accent, var(--czt-accent));
	border-radius: var(--cz-radius-sm, 8px);
	background: var(--cz-accent, var(--czt-accent));
	background-image: none;
	box-shadow: none;
	color: var(--cz-accent-ink, var(--czt-accent-ink));
	font: inherit;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

.cz-filter .cz-filter__apply:hover,
.cz-filter .cz-filter__apply:focus-visible {
	filter: brightness(0.95);
}

.cz-filter [data-cz-apply][hidden] {
	display: none !important; /* JS ส่งเอง — ธีมบางตัวตั้ง display ให้ button ทับ [hidden] */
}

/* ชิปตัวกรองที่เลือกอยู่ */
.cz-filter__chips {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.cz-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 12px;
	border: 1px solid var(--cz-accent, var(--czt-accent));
	border-radius: 999px;
	color: var(--cz-accent, var(--czt-accent));
	font-size: 0.9em;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cz-filter__chip:hover,
.cz-filter__chip:focus-visible {
	background: var(--cz-accent, var(--czt-accent));
	color: var(--cz-accent-ink, var(--czt-accent-ink));
}

.cz-filter__x {
	font-size: 1.1em;
	line-height: 1;
}

.cz-filter__clear {
	color: var(--cz-muted, #6b7280);
	font-size: 0.9em;
	text-decoration: underline;
}

/* แถบบน: กลุ่มเรียงแนวนอน ขึ้นบรรทัดใหม่เมื่อเต็ม · รายการตัวเลือกยาวเลื่อนในกลุ่ม */
.cz-filter--bar .cz-filter__search {
	flex: 1 1 220px;
}

.cz-filter--bar .cz-filter__group,
.cz-filter--bar .cz-filter__sort {
	flex: 0 1 200px;
}

.cz-filter--bar .cz-filter__group--range {
	flex-basis: 240px;
}

/* แถบข้าง: ทุกส่วนซ้อนแนวตั้งเต็มความกว้าง */
.cz-filter--sidebar {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.cz-filter--sidebar > * {
	flex: 0 0 auto;
	width: 100%;
}

.cz-filter--sidebar .cz-filter__group + .cz-filter__group {
	padding-top: 16px;
	border-top: 1px solid var(--cz-line, #e5e7eb);
}

.cz-filter--sidebar .cz-filter__apply {
	align-self: stretch;
}

/*
 * แผงมือถือ "ตัวกรอง (n)" — ใช้เมื่อฟอร์มห่อตัวควบคุมด้วย
 * <details class="cz-filter__panel" open><summary class="cz-filter__toggle">…</summary><div class="cz-filter__body">…</div></details>
 * (cz-filter.js เปิดบนจอใหญ่ · ปิดบนมือถือ) — จอใหญ่ซ่อนปุ่มเปิดแผง
 */
.cz-filter__panel {
	flex: 1 1 100%;
	min-width: 0;
}

.cz-filter__panel > .cz-filter__toggle {
	display: none;
}

.cz-filter__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	min-width: 0;
}

.cz-filter--sidebar .cz-filter__body {
	flex-direction: column;
	align-items: stretch;
}

/*
 * ---------------- ชุด block ตัวกรอง (กล่องตัวกรอง + ตัวควบคุมแยกชิ้น) ----------------
 * กล่อง = <form class="cz-filter cz-filter--box cz-filter--column|row"> · ตัวควบคุม = <fieldset class="… cz-fb cz-fb--filter-…">
 * สี/ตัวอักษร/ระยะ/ขอบ ที่ตั้งในแท็บ Styles อยู่ที่ wrapper — ด้านในสืบทอด (inherit) · สีเน้นของ block = --cz-accent
 * สีของปุ่มที่เลือก = คู่สีปุ่มของธีม (--czt-accent / --czt-accent-ink — Kadence รับประกันคู่สีอ่านได้) ไม่ใช่สีแบรนด์ CIRNEY
 */
.cz-filter--box .cz-filter__body {
	gap: 20px 24px;
}

.cz-filter--column .cz-filter__body {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.cz-filter--column .cz-filter__body > * {
	flex: 0 0 auto;
	width: 100%;
}

.cz-filter--column .cz-filter__apply {
	align-self: stretch;
}

.cz-filter--row .cz-filter__body > .cz-fb {
	flex: 0 1 200px;
}

.cz-filter--row .cz-filter__body > .cz-fb--filter-search {
	flex: 1 1 240px;
}

.cz-filter--row .cz-filter__body > .cz-fb--filter-range,
.cz-filter--row .cz-filter__body > .cz-fb--filter-buttons {
	flex: 0 1 260px;
}

.cz-fb {
	min-width: 0;
	box-sizing: border-box;
}

.cz-fb select,
.cz-fb input,
.cz-fb label,
.cz-fb legend {
	font: inherit;
	color: inherit;
}

.cz-fb .cz-filter__legend,
.cz-fb .cz-filter__label {
	font-size: 0.9em;
	font-weight: 600;
}

.cz-fb select {
	cursor: pointer;
}

/* ซ่อนด้วยสายตา (หัวข้อที่ปิด · ป้ายของ dropdown) — สำรองให้ธีมที่ไม่มีคลาสนี้ */
.cz-filter .screen-reader-text,
.cz-fb .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ส่วนที่ซ่อนไว้รอผล (dropdown รุ่นก่อนเลือกแบรนด์ · จำนวนผล 0 · ไม่มีชิป) — ธีมบางตัวตั้ง display ทับ [hidden] */
.cz-fb[hidden],
.cz-fb-count[hidden],
.cz-fb-chips[hidden],
.cz-fb-reset[hidden] {
	display: none !important;
}

/* ปุ่มตัวเลือก: input ซ่อนแบบยังโฟกัส/อ่านได้ · label เป็นปุ่มทรงแคปซูล */
.cz-fb__btns {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cz-fb__btninput {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
}

.cz-fb__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--cz-line, #e5e7eb);
	border-radius: 999px;
	background: var(--cz-surface, #fff);
	font-size: 0.95em;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cz-fb__btn:hover {
	border-color: var(--cz-accent, var(--czt-accent));
}

.cz-fb__btninput:checked + .cz-fb__btn {
	border-color: var(--cz-accent, var(--czt-accent));
	background: var(--cz-accent, var(--czt-accent));
	color: var(--cz-accent-ink, var(--czt-accent-ink));
}

.cz-fb__btninput:checked + .cz-fb__btn .cz-filter__count {
	color: inherit;
	opacity: 0.85;
}

.cz-fb__btninput:focus-visible + .cz-fb__btn {
	outline: 2px solid var(--cz-accent, var(--czt-accent));
	outline-offset: 2px;
}

.cz-fb__btninput:disabled + .cz-fb__btn {
	opacity: 0.45;
	cursor: default;
}

/* ค้นหา + ปุ่ม */
.cz-fb--filter-search .cz-filter__search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cz-fb--filter-search .cz-filter__search > .cz-filter__label {
	flex: 1 1 100%;
	margin: 0;
}

.cz-fb--filter-search .cz-filter__search > input {
	flex: 1 1 160px;
	width: auto;
}

.cz-filter .cz-fb__searchbtn {
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--cz-accent, var(--czt-accent));
	border-radius: var(--cz-radius-sm, 8px);
	background: var(--cz-accent, var(--czt-accent));
	background-image: none;
	box-shadow: none;
	color: var(--cz-accent-ink, var(--czt-accent-ink));
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

/* เรียงตามที่วางนอกกล่อง (ฟอร์มเล็กของตัวเอง) */
.cz-filter--sort {
	display: inline-flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
}

.cz-filter--sort .cz-filter__sort {
	min-width: 180px;
}

/* จำนวนผล · ชิป · ล้างค่า ที่วางเอง */
.cz-fb-count {
	margin: 0;
	color: var(--cz-muted, #6b7280);
	font-size: 0.95em;
}

.cz-fb-chips .cz-filter__chips {
	margin: 0;
}

.cz-fb-reset .cz-filter__clear {
	display: inline-block;
}

/* ---------------- จอกลาง/มือถือ ---------------- */

@media (max-width: 900px) {
	.cz-grid {
		grid-template-columns: repeat(min(var(--cz-cols, 3), 2), minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.cz-filter,
	.cz-filter__body {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 16px;
	}

	.cz-filter > *,
	.cz-filter__body > * {
		flex: 0 0 auto;
		width: 100%;
	}

	.cz-filter .cz-filter__apply {
		align-self: stretch;
	}

	/* กล่องแนวนอน: บนมือถือซ้อนแนวตั้งเต็มความกว้างเหมือนแนวตั้ง */
	.cz-filter--row .cz-filter__body > .cz-fb,
	.cz-filter--row .cz-filter__body > .cz-fb--filter-search,
	.cz-filter--row .cz-filter__body > .cz-fb--filter-range,
	.cz-filter--row .cz-filter__body > .cz-fb--filter-buttons {
		flex: 0 0 auto;
	}

	.cz-filter--sort {
		display: flex;
		width: 100%;
	}

	.cz-filter--sort .cz-filter__sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* ตัวเลือกสองคอลัมน์ — ลดความยาวหน้าบนจอแคบ */
	.cz-filter__group--list > .cz-filter__opts,
	.cz-filter__group--text > .cz-filter__opts,
	.cz-filter__group--tax > .cz-filter__opts,
	.cz-filter__group--values > .cz-filter__opts,
	.cz-filter__more > .cz-filter__opts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 12px;
	}

	/* หมวดลำดับชั้น: คอลัมน์เดียว — หมวดบนสุดพับแล้วสั้นอยู่แล้ว และปุ่มกาง + รายการรุ่นต้องการความกว้างเต็ม */
	.cz-filter__group--tax > .cz-filter__opts:has(> .cz-filter__opt--parent),
	.cz-filter__group--tax > .cz-filter__more > .cz-filter__opts:has(> .cz-filter__opt--parent) {
		grid-template-columns: minmax(0, 1fr);
	}

	.cz-filter__panel > .cz-filter__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 44px;
		padding: 8px 16px;
		border: 1px solid var(--cz-line, #e5e7eb);
		border-radius: var(--cz-radius-sm, 8px);
		background: var(--cz-surface, #fff);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}

	.cz-filter__panel > .cz-filter__toggle::-webkit-details-marker {
		display: none;
	}

	.cz-filter__panel > .cz-filter__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.cz-filter__panel[open] > .cz-filter__toggle::after {
		transform: rotate(-135deg);
	}

	.cz-filter__panel[open] > .cz-filter__body {
		margin-top: 12px;
		padding: 16px;
		border: 1px solid var(--cz-line, #e5e7eb);
		border-radius: var(--cz-radius-sm, 8px);
	}
}

@media (max-width: 480px) {
	.cz-grid {
		gap: 12px;
	}

	.cz-card-body {
		padding: 12px;
	}
}

@media (max-width: 360px) {
	.cz-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cz-results,
	.cz-fb__btn,
	.cz-filter__panel > .cz-filter__toggle::after {
		transition: none;
	}
}

/* ---------------- หน้ารวม / หน้าหมวด (templates/archive.php) ---------------- */

.cz-archive-header {
	margin: 0 0 var(--cz-gap, 24px);
}

/* รูปของหมวดบนหน้าหมวด (โลโก้แบรนด์) */
.cz-archive-logo {
	display: block;
	width: auto;
	height: 56px;
	max-width: 100%;
	margin: 0 0 12px;
	object-fit: contain;
}

.cz-archive-title,
.cz-single-title {
	margin: 0 0 8px;
	font-weight: var(--cz-h1-weight, 300); /* หัวเรื่อง H1 ของเว็บเป็นตัวบาง */
	line-height: 1.25;
}

.cz-archive-desc {
	color: var(--cz-muted, #6b7280);
}

.cz-archive-desc > :last-child {
	margin-bottom: 0;
}

.cz-archive .cz-filter {
	margin-bottom: var(--cz-gap, 24px);
}

/* ---------------- หน้ารายละเอียด (templates/single.php) ---------------- */

/* คอมพิวเตอร์: รูปซ้าย ข้อมูลขวา · ตารางสเปกและรายการที่เชื่อมเต็มความกว้าง · ไม่มีรูป = คอลัมน์เดียว */
.cz-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: calc(var(--cz-gap, 24px) * 1.5);
	align-content: start;
}

.cz-single > * {
	grid-column: 2;
	min-width: 0;
}

.cz-single > .cz-single-media {
	grid-column: 1;
	grid-row: 1 / span 6;
	align-self: start;
}

.cz-single > .cz-spec,
.cz-single > .cz-single-rich,
.cz-single > .cz-single-related {
	grid-column: 1 / -1;
}

.cz-single:not(:has(> .cz-single-media)) {
	grid-template-columns: minmax(0, 1fr);
}

.cz-single:not(:has(> .cz-single-media)) > * {
	grid-column: 1;
}

.cz-single-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cz-radius, 12px);
	background: var(--cz-soft, #f5f7fa);
}

.cz-single-price {
	margin: 8px 0 16px;
	font-size: 1.5em;
}

.cz-single-terms {
	margin: 0 0 8px;
	color: var(--cz-muted, #6b7280);
}

.cz-single-terms-label {
	font-weight: 600;
	color: inherit;
}

/* เส้นทางหมวด แบรนด์ › รุ่น (cz_term_trail) */
.cz-single-terms a {
	color: var(--cz-link, var(--czt-accent)); /* ตัวหนังสือบนพื้นอ่อน — สีแบรนด์เข้ม (AA) */
	text-decoration: none;
}

.cz-single-terms a:hover,
.cz-single-terms a:focus-visible {
	text-decoration: underline;
}

.cz-trail-sep {
	padding: 0 0.35em;
	color: var(--cz-muted, #6b7280);
}

.cz-single-expired,
.cz-single-before {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--cz-radius-sm, 8px);
	background: var(--cz-soft, #f5f7fa);
	color: var(--cz-muted, #6b7280);
}

.cz-single-before {
	border-left: 3px solid var(--cz-accent, var(--czt-accent));
}

/* ตารางสเปก: หัวแถวชิดซ้าย · เส้นคั่น + แถวสลับสี · มือถือเรียงหัวเหนือค่า */
.cz-spec {
	margin-top: calc(var(--cz-gap, 24px) * 1.5);
}

.cz-spec-table {
	width: 100%;
	margin: 0 0 var(--cz-gap, 24px);
	border-collapse: collapse;
	border: 1px solid var(--cz-line, #e5e7eb);
	border-radius: var(--cz-radius-sm, 8px);
	overflow: hidden;
}

.cz-spec-table caption {
	padding: 0 0 8px;
	font-weight: 600;
	text-align: left;
}

.cz-spec-table th,
.cz-spec-table td {
	padding: 10px 14px;
	border: 0;
	border-top: 1px solid var(--cz-line, #e5e7eb);
	text-align: left;
	vertical-align: top;
}

.cz-spec-table tr:first-child > * {
	border-top: 0;
}

.cz-spec-table th {
	width: 35%;
	font-weight: 600;
}

.cz-spec-table tbody tr:nth-child(even) {
	background: var(--cz-soft, #f5f7fa);
}

/* ข้อความจัดรูปแบบ (cz_rich_sections): ส่วนเนื้อหาใต้ตารางสเปก บรรทัดยาวพออ่านสบาย */
.cz-single-rich {
	margin-top: calc(var(--cz-gap, 24px) * 0.5);
}

.cz-single-rich-title {
	margin: 0 0 12px;
}

.cz-rich {
	max-width: 75ch;
	line-height: 1.75;
}

.cz-rich > :first-child {
	margin-top: 0;
}

.cz-rich > :last-child {
	margin-bottom: 0;
}

.cz-rich img {
	max-width: 100%;
	height: auto;
}

.cz-single-related {
	margin-top: calc(var(--cz-gap, 24px) * 1.5);
}

.cz-single-related > h2 {
	margin: 0 0 16px;
}

@media (max-width: 760px) {
	.cz-single {
		display: block;
	}

	.cz-single-media {
		margin-bottom: 16px;
	}

	.cz-spec-table th,
	.cz-spec-table td {
		display: block;
		width: auto;
	}

	.cz-spec-table td {
		border-top: 0;
		padding-top: 0;
	}
}

/* คำเตือนของตัวอย่างใน editor (ค่าตรงตัวเกินเพดาน) — หน้าเว็บไม่มี */
.cz-fb-note {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	font-size: 13px;
	line-height: 1.5;
}

/* ไอคอนหน้าชื่อแถวของสเปกย่อ (แถวที่ตั้งเอง — Cirney_Data_Glyphs) */
.cz-card-spec__icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin: 0 .35em 0 0;
	vertical-align: -.18em;
}

/* เวลาทำการ (Cirney_Data_Hours) — หน้าตาตั้งต้น · แต่งต่อได้ที่บล็อก "ข้อมูลจากตาราง" (ชื่อวัน · เวลา · วันนี้ · สถานะ) */
.cz-hours--summary{display:inline-flex;flex-direction:column;gap:2px}
.cz-hours--summary.cz-hours--inline{display:inline;flex-direction:row}
.cz-hours--summary .cz-hours__row{display:block}
.cz-hours--inline .cz-hours__row{display:inline}
.cz-hours__days{font-weight:600}
.cz-hours__days,.cz-hours__time{white-space:nowrap}
.cz-hours--week .cz-hours__time{white-space:normal}
.cz-hours__row.is-closed .cz-hours__time{opacity:.7}
.cz-hours__note{display:block;font-size:.9em;opacity:.8}
.cz-hours--week{border-collapse:collapse;width:auto;margin:0}
.cz-hours--week th,.cz-hours--week td{padding:4px 0;text-align:left;border:0;background:none;font-size:inherit}
.cz-hours--week th{padding-right:12px}
.cz-hours--week tr.is-today>*{font-weight:700}
.cz-hours--week tr.is-closed td{opacity:.7}
.cz-hours--status{display:inline-flex;align-items:center;gap:6px;border-radius:999px}
.cz-hours__dot{width:.6em;height:.6em;border-radius:50%;background:currentColor;flex:none}
.cz-hours--status.is-open{color:#1a7f37}
.cz-hours--status.is-closed{color:#b42318}
.cz-hours--raw{white-space:pre-line}