/**
 * Phase 3C — checkout.css ไฟล์เดียว (ยุบจาก 5 ไฟล์ + 2 inline) โหลดเฉพาะ is_cart()||is_checkout()
 *
 * โครงสร้าง:
 *   A. โครง single-page (3B): กริด/แถบขั้นตอน/กล่อง LINE/trust/มือถือ
 *   B. หน้าตา checkout (ยกภาษาภาพจาก superpart-v2 มา target markup ปัจจุบัน)
 *   C. คอมโพเนนต์ที่เสียสไตล์ตอนลบ JS/inline: ตัวเลือกจ่ายเงิน .wpc-pay-*, การ์ดวิธีส่ง (markup จริง),
 *      ใบกำกับ .wpc-tax-invoice*, ตัวนับ .wpc-notes-count, dropdown autocomplete .tt-menu
 *   D. cart: โชว์แถวค่าจัดส่ง (แก้บั๊ก marketplace #1 — เลิกซ่อน tr.shipping ทั้งเว็บ)
 *
 * เลิกใช้: #wpc-tax-invoice-wrapper · .wpc-tax-input · .wpc-channel-… · .wpc-sh-… · #wpc-ship-ui (markup ตายแล้ว),
 *   🔴 ห้ามพิมพ์ `*` ติดกับ `/` ในคอมเมนต์ CSS — มันปิดคอมเมนต์ทันที
 *      บรรทัดนี้เคยมีลำดับนั้นอยู่ ทำให้คอมเมนต์หัวไฟล์จบกลางประโยค แล้วข้อความที่เหลือ
 *      กลืน **กฎแรกของไฟล์ (กริด 2 คอลัมน์) หายทั้งกฎ** โดยไม่มี error ให้เห็น
 *      (อาการนี้เคยเจอแล้วจดไว้ว่า "ยังหาเหตุ" — ปิดเคสแล้ว 31 ส.ค. 2026)
 *          กฎซ่อน tr.woocommerce-shipping-totals แบบ global · select2-dropdown+มินิ-cart+page2030 ย้ายไป global.css
 */

/* A. Single-page shell (Phase 3B) */

/* 2-column grid. High specificity + !important: WoodMart checkout CSS loads after this
   file and its "form.checkout > div" rule sets display. Do NOT use align-items:start
   (it kills the right-column sticky travel). */
.wpc-checkout.checkout .wpc-co__grid,
.woocommerce-checkout .wpc-co__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 360px !important;
	gap: 24px !important;
	align-items: stretch !important;
}
.wpc-co__left {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.wpc-co__right { min-width: 0; }
.wpc-co__right .checkout-order-review {
	position: sticky;
	top: 20px;
}

/* กัน float/ความกว้างจาก markup theme ทำกริดพัง */
.wpc-checkout #customer_details,
.wpc-checkout .checkout-order-review,
.wpc-checkout #order_review {
	float: none !important;
	width: auto !important;
	max-width: none !important;
}

/* ---- แถบขั้นตอน ---- */
.wpc-co-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
}
.wpc-co-step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #9ca3af;
	font-size: 14px;
}
.wpc-co-step__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex: 0 0 auto;
}
.wpc-co-step.is-active { color: #e8430a; font-weight: 700; }
.wpc-co-step.is-active .wpc-co-step__num { background: #e8430a; color: #fff; }
.wpc-co-step__sep { width: 22px; height: 2px; background: #e5e7eb; }
/* [3G ข้อ 7] .wpc-co-steps__line (ลิงก์ติดต่อ LINE ท้ายแถบ) ถูกตัดออกแล้ว — ดู wpc_checkout_step_bar()
   [3J] .wpc-co-line-box (กล่องเขียวคอลัมน์ซ้าย) ตัดออกทั้งกล่อง+กฎ CSS ตาม feedback 5 ส.ค.
   ⚠️ กล่อง LINE ของ "ส่งด่วนมอเตอร์ไซค์" คนละตัว (.wpc-express-line-notice — สไตล์ inline
   ใน shipping-express-line.php ไม่ได้อยู่ไฟล์นี้) ยังอยู่ ห้ามตัดตามกัน */

/* ---- การจัดส่ง & การคืนสินค้า (ขวา ใต้ปุ่มสั่งซื้อ) — 3G ข้อ 9 แทน trust badges ----
   คลาส .wpc-co-sr เป็นของใหม่ → Customizer CSS ไม่มีกฎแตะ (เช็คแล้ว)
   ลูกศรทำจาก border หมุน 45° แทนอักขระ/emoji — ไม่ต้องพึ่งฟอนต์ */
.wpc-co-sr {
	margin-top: 16px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
}
.wpc-co-sr__title {
	margin: 0;
	padding-bottom: 4px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}
.wpc-co-sr__item { border-top: 1px solid #f0f0f0; }
.wpc-co-sr__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 0;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	list-style: none;
}
.wpc-co-sr__head::-webkit-details-marker { display: none; }
.wpc-co-sr__head::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 2px solid #9ca3af;
	border-bottom: 2px solid #9ca3af;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}
.wpc-co-sr__item[open] .wpc-co-sr__head::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.wpc-co-sr__body {
	padding: 0 0 12px;
	font-size: 13px;
	line-height: 1.65;
	color: #666;
}

/* ==================================================================
 * B. หน้าตา checkout — ยกภาษาภาพจาก superpart-v2 (theme WoodMart ยังโหลด → คง !important ที่จำเป็น)
 * ================================================================== */

/* พื้นหลัง + คอนเทนเนอร์ */
body.woocommerce-checkout {
	background-color: #f4f5f8 !important;
}
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout #content .woocommerce {
	max-width: 1200px !important;
}

/* หัวข้อ section */
body.woocommerce-checkout form.woocommerce-checkout h3,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #customer_details h3 {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	padding: 0 0 12px 0 !important;
	margin: 0 0 18px 0 !important;
	border: none !important;
	border-bottom: 2px solid #e8430a !important;
	background: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* การ์ดครอบ section (ซ้าย) */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-additional-fields {
	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 24px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	margin-bottom: 0 !important;
}
/* กัน card-in-card: billing/additional อยู่ใน #customer_details แล้ว → ตัดการ์ดชั้นใน */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	margin-top: 18px !important;
}
body.woocommerce-checkout .col2-set {
	border: none !important;
	box-shadow: none !important;
	background: none !important;
}

/* labels */
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout .woocommerce-form__label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #555 !important;
	margin-bottom: 6px !important;
	display: block !important;
	line-height: 1.4 !important;
}
body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout .form-row abbr[title] {
	color: #e8430a !important;
	text-decoration: none !important;
	border: none !important;
}
/* ซ่อน "(optional)" อังกฤษ — label ไทยสื่อ optional เอง (เช่น "(ถ้ามี)"); gettext จับไม่ได้
   เพราะ theme hardcode สตริงนี้ · ช่องบังคับยังมีดาว * ชัดเจน */
body.woocommerce-checkout .optional {
	display: none !important;
}

/* input pill */
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout input[type="password"] {
	border-radius: 30px !important;
	border: 1.5px solid #ddd !important;
	height: 48px !important;
	line-height: 46px !important;
	padding: 0 20px !important;
	font-size: 14px !important;
	/* [3I P1] เดิมเขียน 'Kanit','Sarabun',inherit — keyword `inherit` ปนใน list ทำให้
	   declaration ทั้งบรรทัด invalid ถูกเบราว์เซอร์ทิ้ง = ฟอนต์หล่นไปใช้ default
	   (ต้นเหตุ "ฟอนต์ปุ่มสั่งซื้อแปลกกว่าส่วนอื่น" ที่ลูกค้าทัก) → inherit เดี่ยว ๆ ให้ตรงฟอนต์เว็บ */
	font-family: inherit !important;
	background-color: #fff !important;
	color: #333 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="tel"]:focus {
	border-color: #e8430a !important;
	box-shadow: 0 0 0 3px rgba(232, 67, 10, 0.13) !important;
}
body.woocommerce-checkout input::placeholder {
	color: #aaa !important;
	font-size: 13px !important;
}

/* textarea */
body.woocommerce-checkout textarea {
	border-radius: 16px !important;
	border: 1.5px solid #ddd !important;
	padding: 14px 20px !important;
	font-size: 14px !important;
	/* [3I P1] เดิมเขียน 'Kanit','Sarabun',inherit — keyword `inherit` ปนใน list ทำให้
	   declaration ทั้งบรรทัด invalid ถูกเบราว์เซอร์ทิ้ง = ฟอนต์หล่นไปใช้ default
	   (ต้นเหตุ "ฟอนต์ปุ่มสั่งซื้อแปลกกว่าส่วนอื่น" ที่ลูกค้าทัก) → inherit เดี่ยว ๆ ให้ตรงฟอนต์เว็บ */
	font-family: inherit !important;
	background: #fff !important;
	line-height: 1.6 !important;
	min-height: 80px !important;
	resize: vertical !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 0.2s !important;
}
body.woocommerce-checkout textarea:focus {
	border-color: #e8430a !important;
	box-shadow: 0 0 0 3px rgba(232, 67, 10, 0.13) !important;
}

/* select + select2 (จังหวัด) */
body.woocommerce-checkout select {
	border-radius: 30px !important;
	border: 1.5px solid #ddd !important;
	height: 48px !important;
	padding: 0 42px 0 20px !important;
	font-size: 14px !important;
	/* [3I P1] เดิมเขียน 'Kanit','Sarabun',inherit — keyword `inherit` ปนใน list ทำให้
	   declaration ทั้งบรรทัด invalid ถูกเบราว์เซอร์ทิ้ง = ฟอนต์หล่นไปใช้ default
	   (ต้นเหตุ "ฟอนต์ปุ่มสั่งซื้อแปลกกว่าส่วนอื่น" ที่ลูกค้าทัก) → inherit เดี่ยว ๆ ให้ตรงฟอนต์เว็บ */
	font-family: inherit !important;
	background-color: #fff !important;
	color: #333 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	cursor: pointer !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	border-radius: 30px !important;
	border: 1.5px solid #ddd !important;
	height: 48px !important;
	background: #fff !important;
	padding: 0 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px !important;
	padding: 0 42px 0 20px !important;
	color: #333 !important;
	font-size: 14px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
	width: 36px !important;
	right: 8px !important;
}
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #e8430a !important;
	box-shadow: 0 0 0 3px rgba(232, 67, 10, 0.13) !important;
}

body.woocommerce-checkout .form-row {
	margin-bottom: 14px !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------------
 * ที่อยู่จัดส่ง: กริด 2 คอลัมน์ (3E — ย่อฟอร์มตาม mockup ลูกค้า)
 *
 * 🔴 ทำไมไม่ใช้ form-row-first/last แบบเดิม: WooCommerce ตั้ง
 * .woocommerce-billing-fields__field-wrapper เป็น display:flex → float ตายสนิท
 * ทุกช่องเลยกินเต็มความกว้างหมด (วัดบน staging 375px: ทั้ง 10 ช่อง = 313px เท่ากันหมด)
 * แม้แต่ ชื่อ/นามสกุล ที่ตั้งใจให้อยู่คู่กันตั้งแต่ 3B ก็ไม่เคยอยู่คู่กันจริง
 *
 * และ address-i18n.js ของ WC ลบ class form-row-first/last/wide ทิ้งแล้วใส่ของ locale แทน
 * (ดู assets/js/frontend/address-i18n.js บรรทัด ~104) → ผูก layout กับ class พวกนี้ไม่ได้
 * จึงจัดด้วย "id ของช่อง" ซึ่ง WC ไม่เคยเปลี่ยน · ลำดับยังเป็นหน้าที่ของ priority เหมือนเดิม
 * ------------------------------------------------------------------ */
/* 🔴🔴 ต้องใช้ selector ยาว `form.wpc-checkout` เพื่อชนะ Additional CSS ใน Customizer
 * (`<style id="wp-custom-css">` 45KB ใน DB ชื่อ "WPC AutoParts — CSS รวมสมบูรณ์ Final v8")
 * ซึ่งมีบล็อก "CHECKOUT UNIFORM FIELDS - MOBILE FIX" สั่งไว้ว่า:
 *     body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
 *         display: flex !important; flex-direction: column !important;
 *         grid-template-columns: unset !important;  ← ดัก grid ไว้ล่วงหน้าด้วย
 *     }
 * specificity เท่ากับของเราเป๊ะ (0,2,1) แต่ wp-custom-css พิมพ์ทีหลังใน <head> → ชนะตลอด
 * = เหตุผลจริงที่ ชื่อ/นามสกุล ไม่เคยอยู่คู่กันเลยตั้งแต่ Phase 3B แม้เราเขียนกฎไว้แล้ว
 * เติม form.wpc-checkout ทำให้เป็น (0,3,2) → ชนะโดยไม่ต้องแตะ DB
 * ⚠️ CSS ก้อนนั้นอยู่ใน DB จึงมีบน production ด้วย และไม่ไปกับไฟล์ตอน deploy
 *
 * กริดฐาน 12 คอลัมน์ — รองรับทั้งคู่ครึ่ง-ครึ่ง (6+6) และ 4 ช่องแถวเดียว (3+3+3+3)
 * — ครึ่ง-ครึ่งบนจอ 375px ทำให้ "กรุงเทพมหานคร" ใน select2 โดนตัด */
body.woocommerce-checkout form.wpc-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	column-gap: 16px !important;
	row-gap: 0 !important;
	align-items: start !important;
}
/* ค่าตั้งต้น = เต็มแถว แล้วค่อยระบุเฉพาะช่องที่ให้อยู่ครึ่งเดียว */
body.woocommerce-checkout form.wpc-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
	grid-column: 1 / -1 !important;
	float: none !important;
	width: auto !important;
	margin-right: 0 !important;
}
/* จอคอม: ชื่อผู้รับ|เบอร์โทร (ครึ่ง-ครึ่ง) · อีเมลเต็มแถว · ที่อยู่เต็มแถว
   · แขวง|เขต|จังหวัด|ไปรษณีย์ เรียงแถวเดียว 4 ช่อง
   [20 ส.ค.] ช่องนามสกุลถูกซ่อนแล้ว → จับ ชื่อผู้รับ คู่กับ เบอร์โทร แทน จำนวนแถวเท่าเดิม */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #billing_phone_field {
	grid-column: span 6 !important;
}
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #billing_postcode_field {
	grid-column: span 3 !important;
}

/* 🔴 ผลข้างเคียงของ 4 ช่องแถวเดียว: ช่อง "แขวง/ตำบล" เหลือกว้าง ~174px แต่ dropdown
   autocomplete ต้องโชว์ "ตำบล » อำเภอ » จังหวัด » รหัส" (วัดจริงต้องการ ~313px)
   → ปล่อยให้เมนูกว้างกว่าช่องได้ (position:absolute อยู่แล้ว ไม่ดันเลย์เอาต์) */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .tt-menu {
	min-width: 320px !important;
}

/* ประเทศ: ร้านส่งเฉพาะในไทย — ซ่อนช่องแต่ยังอยู่ใน DOM
   (ค่ายัง post ไปตามปกติ · country_to_state + การคิดค่าส่งพึ่ง element นี้ ห้ามถอดทิ้ง)

   [20 ส.ค.] นามสกุล: ซ่อนด้วยเหตุผลเดียวกัน — ลูกค้ากรอก "ชื่อผู้รับ" ช่องเดียว
   แล้วฝั่ง PHP แยกคำให้เองตอนบันทึก (wpc_checkout_split_name)
   🔴 ห้ามถอดออกจาก DOM — WooCommerce/ปลั๊กอินส่งออก/gateway อ่านช่องนี้กันหมด */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #billing_last_name_field {
	display: none !important;
}

/* ที่อยู่เป็น textarea แล้ว — เตี้ยลงหน่อยให้พอดี 2–3 บรรทัด ไม่ต้องสูงเท่ากล่องหมายเหตุ */
body.woocommerce-checkout #billing_address_1_field textarea {
	min-height: 68px !important;
	border-radius: 16px !important;
	padding: 12px 20px !important;
}

body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after {
	content: '' !important;
	display: table !important;
	clear: both !important;
}

/* ---- คอลัมน์ขวา: order review ---- */
body.woocommerce-checkout #order_review {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 24px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
}
body.woocommerce-checkout h3#order_review_heading {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	border-bottom: 2px solid #e8430a !important;
	padding-bottom: 12px !important;
	margin-bottom: 16px !important;
	background: none !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border: none !important;
	width: 100% !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	border: none !important;
	border-bottom: 1px solid #f2f2f2 !important;
	padding: 10px 6px !important;
	font-size: 14px !important;
	vertical-align: middle !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	background: #e8430a !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	border-bottom: none !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child { border-radius: 10px 0 0 0 !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child { border-radius: 0 10px 0 0 !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	/* เส้นคั่นย้ายไปวางบน tr แล้ว (หมวด L ท้ายไฟล์) — ใส่ที่ th+td จะได้เส้นขาด 2 ท่อน
	   เพราะแถวเป็น flex ที่มี gap ตรงกลาง = "เส้นรก" ที่ลูกค้าแจ้ง 27 ก.ค. */
	border: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img {
	border-radius: 8px !important;
	width: 56px !important;
	height: 56px !important;
	object-fit: cover !important;
}

/* ==================================================================
 * C. คอมโพเนนต์ (markup ปัจจุบัน)
 * ================================================================== */

/* ---- การ์ดวิธีจัดส่ง (native #shipping_method — เดิม JS วาด #wpc-ship-ui, ตอนนี้ CSS บน markup จริง) ---- */
body.woocommerce-checkout #shipping_method {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.woocommerce-checkout #shipping_method li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	border: 2px solid #e5e5e5;
	border-radius: 12px;
	padding: 10px 14px;
	margin: 0;
	transition: border-color 0.2s ease, background 0.2s ease;
}
body.woocommerce-checkout #shipping_method li:has(input.shipping_method:checked) {
	border-color: #e8430a;
	background: #fff9f7;
}
body.woocommerce-checkout #shipping_method li input.shipping_method {
	accent-color: #e8430a;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
}
body.woocommerce-checkout #shipping_method li label {
	display: inline !important;
	margin: 0 !important;
	font-weight: 600 !important;
	color: #333 !important;
	cursor: pointer;
}
/* กล่องแจ้ง "ส่งด่วน ติดต่อ LINE" (inline-styled ใน shipping-express-line.php) ให้กินเต็มความกว้างการ์ด */
body.woocommerce-checkout #shipping_method li .wpc-express-line-notice {
	flex: 1 1 100%;
}

/* [3I] ข้อความสีแดงใต้ตัวเลือก (PHP render เฉพาะตัวที่ถูกเลือก — shipping-pickup.php)
   ใช้ทั้งการ์ดบน checkout และลิสต์ radio ใน cart totals (คลาสเดียวกัน) */
.wpc-ship-note {
	color: #d63638;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 500;
	margin: 4px 0 2px;
}
body.woocommerce-checkout #shipping_method li .wpc-ship-note {
	flex: 1 1 100%;
	margin: 2px 0 0 28px; /* เยื้องให้ตรงกับ label (radio 18px + gap 10px) */
}

/* ---- ตัวเลือกช่องจ่ายเงิน (#wpc-paysolutions-ui สร้างใน checkout.js) ---- */
/* 3F: #payment ย้ายมาคอลัมน์ซ้ายแล้ว และถูกครอบด้วยการ์ด .wpc-co-pay (ดูหมวด J)
   ตัวมันเองจึงไม่ต้องเป็นการ์ดซ้ำ — ถ้าปล่อยไว้จะได้การ์ดซ้อนการ์ดแบบที่ลูกค้าเพิ่งทัก */
body.woocommerce-checkout #payment {
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: none !important;
	margin-top: 0 !important;
}
/* ==================================================================
 * J. กล่องฝั่งซ้ายที่ย้ายมาจากคอลัมน์ขวา (Phase 3F — ตาม mockup)
 *    รายการสินค้า · วิธีการจัดส่ง · ช่องทางการชำระเงิน
 * ================================================================== */

/* การ์ดกลาง — ชุดเดียวกับ #customer_details ให้ทั้งคอลัมน์ดูเป็นภาษาเดียวกัน */
body.woocommerce-checkout .wpc-co-box {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 24px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	margin-top: 18px !important;
}
body.woocommerce-checkout .wpc-co-box__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	padding: 0 0 12px 0 !important;
	margin: 0 0 18px 0 !important;
	border-bottom: 2px solid #e8430a !important;
	background: none !important;
	text-transform: none !important;
}

/* ---- รายการสินค้า (อ่านอย่างเดียว — แก้จำนวนที่หน้าตะกร้า) ---- */
.wpc-co-items__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wpc-co-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}
.wpc-co-item:last-child { border-bottom: 0; }
.wpc-co-item__img {
	flex: 0 0 64px;
	width: 64px;
}
.wpc-co-item__img img {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain;
	/* [3 ส.ค. รอบ 3] ขอบเหลี่ยมให้ตรงกับตะกร้า/ตะกร้าเล็ก (ตะวันสั่ง) */
	border-radius: 0;
	border: 1px solid #f0f0f0;
	background: #fff;
	display: block;
}
.wpc-co-item__body { flex: 1 1 auto; min-width: 0; }
.wpc-co-item__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.45;
	color: #333;
}
.wpc-co-item__sku {
	display: block;
	font-size: 12px;
	color: #999;
	margin-top: 2px;
}
.wpc-co-item__side {
	flex: 0 0 auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wpc-co-item__qty { font-size: 13px; color: #777; }
.wpc-co-item__price { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; }
.wpc-co-items__edit {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	color: #e8430a;
	text-decoration: none;
}
.wpc-co-items__edit:hover { text-decoration: underline; }

/* ---- วิธีการจัดส่ง: table ที่ครอบ radio ของ WooCommerce ต้องมองไม่เห็น ---- */
body.woocommerce-checkout .wpc-co-ship__table,
body.woocommerce-checkout .wpc-co-ship__table tbody,
body.woocommerce-checkout .wpc-co-ship__table tr,
body.woocommerce-checkout .wpc-co-ship__table th,
body.woocommerce-checkout .wpc-co-ship__table td {
	display: block !important;
	width: 100% !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
/* ป้าย "ค่าจัดส่ง" ที่ WooCommerce ใส่มาใน th — ซ้ำกับหัวข้อการ์ดแล้ว */
body.woocommerce-checkout .wpc-co-ship__table th { display: none !important; }

/* ---- บรรทัดค่าจัดส่ง (อ่านอย่างเดียว) ในกล่องสรุปฝั่งขวา ---- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.wpc-co-shipcost {
	display: flex !important;
	justify-content: space-between !important;
	gap: 12px !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.wpc-co-shipcost th {
	width: auto !important;
	text-align: left !important;
	font-weight: 400 !important;
	color: #666 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.wpc-co-shipcost td {
	width: auto !important;
	text-align: right !important;
}

/* ---- รายการสินค้า: จำนวนกับราคาอยู่แถวเดียวกัน คนละคอลัมน์ (จำนวนก่อน แล้วราคา) ---- */
.wpc-co-item {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr) auto auto !important;
	column-gap: 14px !important;
	align-items: center !important;
}
.wpc-co-item__side { display: contents !important; }
.wpc-co-item__qty { text-align: right; white-space: nowrap; }
.wpc-co-item__price { text-align: right; }

/* ==================================================================
 * K. จอคอม: จัดตัวเลือกให้อยู่แถวเดียวกันตาม mockup (27 ก.ค.)
 *    วิธีจัดส่ง = 2 คอลัมน์ · ช่องทางชำระเงิน = 3 คอลัมน์
 * ================================================================== */
@media (min-width: 769px) {

	/* จำนวน + ราคา: ตรึงความกว้างคอลัมน์ให้ทุกแถวตรงกัน
	   (แต่ละ .wpc-co-item เป็นกริดของตัวเอง ถ้าใช้ auto คอลัมน์จะกว้างตามเนื้อหาของ
	    แถวนั้น ๆ → "x 1" กับ "x 12" ไม่ตรงกัน และตำแหน่งราคาก็เลื่อนตามความยาวตัวเลข) */
	.wpc-co-item {
		grid-template-columns: 64px minmax(0, 1fr) 48px 100px !important;
	}

	/* [3I] วิธีการรับสินค้า — เดิมการ์ด 2 ใบเรียงข้างกัน (3F) · mockup ใหม่ 04/08 เป็น
	   ลิสต์แนวตั้ง 3 ตัวเลือก (รับหน้าร้าน → จัดส่งถึงบ้าน → ส่งด่วน) → ถอดกริด 2 คอลัมน์
	   ให้ตกกลับไปใช้ flex column ของกฎฐาน (หมวด C) เหมือนมือถือ */

	/* [3G ข้อ 10] กฎ "ช่องทางชำระเงิน 3 คอลัมน์" (เขียนตอน 3F) ถูกถอดออกแล้ว —
	   ลูกค้าขอให้เรียงลงต่อกันตาม mockup · Customizer CSS ตั้ง .wpc-pay-list เป็น
	   flex column ไว้อยู่แล้ว กฎ 3 คอลัมน์ของเรานี่แหละที่ทับมันอยู่
	   สไตล์ 2 กลุ่มใหม่อยู่หมวด P ท้ายไฟล์ */
	body.woocommerce-checkout .wpc-co-pay .wpc-pay-logos img.real-logo-pp,
	body.woocommerce-checkout .wpc-co-pay .wpc-pay-logos .real-logo-img.real-logo-pp {
		max-width: 90px !important;
	}
}

@media (max-width: 768.98px) {
	.wpc-co-item {
		grid-template-columns: 56px minmax(0, 1fr) auto auto !important;
		column-gap: 10px !important;
	}
	.wpc-co-item__img, .wpc-co-item__img img { width: 56px !important; }
	.wpc-co-item__img img { height: 56px !important; }
}

/* 🔴 [3E รอบ 3 — ลูกค้าแจ้ง "สรุปคำสั่งซื้อก็ชิดขอบ"] ถอดกรอบ "ใบใน" ที่ซ้ำซ้อน
 *
 * เคสเดียวกับหน้า cart เป๊ะ: Customizer CSS (wp-custom-css ใน DB) มีกฎเหมารวม
 *     .woocommerce-orders-table, .shop_table {
 *         background:#fff; border:1px solid #f0f0f0; border-radius:12px; box-shadow:0 2px 8px …
 *     }
 * ตารางสรุปคำสั่งซื้อก็มีคลาส .shop_table → กลายเป็นการ์ดขาวมีเงาซ้อนอยู่ใน #order_review
 * ซึ่งเป็นการ์ดอยู่แล้ว และตารางมี padding:0 → ของข้างในแนบกรอบใบในหมด
 * วัดบน prod จอ 1400px: รูปสินค้า / "ยอดรวมสินค้า" / ราคา / "ค่าจัดส่ง" / ยอดรวมทั้งหมด
 * = **0px จากกรอบตาราง** ทุกตัว
 *
 * ⚠️ บทเรียน: รอบก่อนวัดเทียบ #order_review แล้วได้ 24px เลยสรุปว่า "ไม่มีปัญหา" — ผิด
 * เพราะสิ่งที่ตาเห็นคือกรอบใบในที่ Customizer สร้าง ไม่ใช่ padding ของการ์ดใบนอก
 * → เวลาเช็ค "ชิดขอบ" ต้องวัดเทียบ **กล่องที่มองเห็น** (bg/border/shadow) ไม่ใช่ ancestor ที่สะดวก
 *
 * ถอดกรอบใบในออก → ทุกอย่างในคอลัมน์ขวาได้ระยะ 24px เท่ากันจาก padding ของ #order_review
 * (เท่ากับฝั่ง "ชำระด้วย" + การ์ดวิธีจ่ายเงินที่ 24.9px อยู่แล้ว = ทั้งคอลัมน์เสมอกัน)
 * specificity (1,2,1) ชนะกฎเหมารวม (0,1,0) — ไม่แตะ DB
 */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.woocommerce-checkout #payment .payment_box {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.woocommerce-checkout #payment .payment_box::before { display: none !important; }
.wpc-pay-header {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin-bottom: 12px;
}
.wpc-pay-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wpc-pay-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 2px solid #e5e5e5;
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wpc-pay-item:hover { border-color: #f0a58c; }
.wpc-pay-item--selected {
	border-color: #e8430a;
	background: #fff9f7;
	box-shadow: 0 2px 8px rgba(232, 67, 10, 0.12);
}
.wpc-pay-item-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.wpc-pay-icon { flex: 0 0 auto; display: flex; }
.wpc-pay-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpc-pay-title { font-weight: 600; font-size: 15px; color: #333; }
.wpc-pay-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
}
.wpc-pay-item-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wpc-pay-arrow { color: #bbb; font-size: 20px; line-height: 1; }

/* โลโก้จ่ายเงิน (พับจาก payment-logos.js inline) */
.wpc-pay-logos { display: flex; align-items: center; gap: 4px; }
.wpc-pay-logos .real-logo-img { height: 26px; width: auto; object-fit: contain; display: block; }
.wpc-pay-logos .real-logo-img.real-logo-pp { height: 30px; max-width: 100px; }

/* ------------------------------------------------------------------
 * 🔴 3E: แย่งพื้นที่คืนให้ชื่อช่องทางจ่ายเงิน — ต้องนำหน้าด้วย #payment
 * เพื่อชนะ Additional CSS ใน Customizer (wp-custom-css ใน DB) ที่ตั้งไว้ว่า
 *     .wpc-pay-item-right          { min-width: 110px !important; flex-shrink: 0 !important; }
 *     .wpc-pay-logos img.real-logo-pp { width: 110px !important; max-width: none !important; }
 * = จองที่ฝั่งขวาตายตัว 110px ทุกความกว้างจอ ทำให้ข้อความเหลือ 84px (มือถือ) / 100px (จอคอม)
 * แล้ว "ชำระผ่านคิวอาร์" ถูกตัด 2–3 บรรทัด · ให้ฝั่งขวายอมหดแทน
 * (ต้องอยู่นอก media query เพราะบั๊กนี้เกิดทั้งมือถือและจอคอม)
 * ------------------------------------------------------------------ */
body.woocommerce-checkout #payment .wpc-pay-item-left,
body.woocommerce-checkout #payment .wpc-pay-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
body.woocommerce-checkout #payment .wpc-pay-item-right {
	flex: 0 1 auto !important;
	min-width: 0 !important;
}
body.woocommerce-checkout #payment .wpc-pay-logos {
	min-width: 0 !important;
	flex-wrap: nowrap !important;
}
body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo,
body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img {
	width: auto !important;
	height: 24px !important;
	max-width: 64px !important;
}
body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo-pp,
body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img.real-logo-pp {
	width: auto !important;
	height: 26px !important;
	max-width: 82px !important;
}

/* ---- ปุ่มสั่งซื้อ ---- */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
	background: linear-gradient(135deg, #e8430a 0%, #ff6b35 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 30px !important;
	height: 54px !important;
	line-height: 54px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	width: 100% !important;
	padding: 0 !important;
	margin-top: 10px !important;
	cursor: pointer !important;
	letter-spacing: 0.5px !important;
	box-shadow: 0 5px 18px rgba(232, 67, 10, 0.4) !important;
	transition: all 0.2s ease !important;
	/* [3I P1] เดิมเขียน 'Kanit','Sarabun',inherit — keyword `inherit` ปนใน list ทำให้
	   declaration ทั้งบรรทัด invalid ถูกเบราว์เซอร์ทิ้ง = ฟอนต์หล่นไปใช้ default
	   (ต้นเหตุ "ฟอนต์ปุ่มสั่งซื้อแปลกกว่าส่วนอื่น" ที่ลูกค้าทัก) → inherit เดี่ยว ๆ ให้ตรงฟอนต์เว็บ */
	font-family: inherit !important;
	display: block !important;
}
body.woocommerce-checkout #place_order:hover {
	background: linear-gradient(135deg, #c93a09 0%, #e8430a 100%) !important;
	box-shadow: 0 7px 22px rgba(232, 67, 10, 0.5) !important;
	transform: translateY(-1px) !important;
}

/* privacy/terms */
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px !important;
	color: #999 !important;
	text-align: center !important;
	margin: 10px 0 0 !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a { color: #e8430a !important; }

/* ---- ตัวนับหมายเหตุ 0/300 ---- */
.wpc-notes-count {
	text-align: right;
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}

/* ---- ใบกำกับภาษี (3A markup: .wpc-tax-invoice) ---- */
body.woocommerce-checkout .wpc-tax-invoice {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 20px 24px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
}
.wpc-tax-invoice__toggle {
	margin: 0 !important;
}
.wpc-tax-invoice__toggle label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #333 !important;
	cursor: pointer;
	margin: 0 !important;
}
.wpc-tax-invoice__toggle input[type="checkbox"] {
	accent-color: #e8430a;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.wpc-tax-invoice__fields {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}
/* toggle CSS-only (progressive; checkout.js เสริม JS ใน Task 4) — ซ่อน fields จนกว่าจะติ๊ก */
#wpc-tax-invoice:has(#wpc_tax_invoice:not(:checked)) .wpc-tax-invoice__fields {
	display: none;
}
/* ปุ่ม "ใช้ที่อยู่เดียวกับจัดส่ง" (Task 4) */
/* 🔴 ผูก body+button ให้ชนะกฎ :is(.btn,.button,button,...) ของ WoodMart
   ไม่งั้นปุ่มนี้กลายเป็นพื้นส้มอ่อน ตัวหนังสือดำ สูง 42px แบบเดียวกับ dialog รีวิว (31 ส.ค.)
   เทสกันไว้ที่ tests/test-theme-button-override.php

   🔴🔴 และ `color` ต้องมี !important เพราะ Additional CSS ใน Customizer มีกฎ
        `.woocommerce-checkout * { color: #333 !important; }`
        = **ทุก element บนหน้าชำระเงินถูกบังคับสี #333** สีที่เราตั้งโดยไม่มี !important ตายหมด
        (ตรวจจาก DB ผ่าน <style id="wp-custom-css"> ของเว็บจริง 31 ส.ค. · เป็นกฎ `*` ข้อเดียวในก้อนนั้น)
        ห้ามพึ่ง -webkit-text-fill-color อย่างเดียว — มันบังเอิญชนะเพราะ WebKit วาดตัวอักษรด้วย fill
        แต่ `color` ที่ไม่ตรงกันจะไปโผล่ที่ currentColor/เส้นขอบ/ไอคอนของลูก */
body.woocommerce-checkout button.wpc-tax-invoice__copy {
	display: inline-flex;
	align-items: center;
	margin-bottom: 14px;
	min-height: 0;
	padding: 8px 16px;
	background-color: #fff;
	color: #e8430a !important;
	-webkit-text-fill-color: #e8430a;
	border: 1.5px solid #e8430a;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
body.woocommerce-checkout button.wpc-tax-invoice__copy:hover {
	background-color: #e8430a;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

/* ---- autocomplete ที่อยู่ไทย (ยกจาก shipping-zone-district.js inline เดิม) ---- */
.twitter-typeahead { width: 100% !important; display: block !important; }
.tt-menu {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
	max-height: 240px;
	overflow-y: auto;
	width: 100%;
	z-index: 99999;
}
.tt-suggestion {
	padding: 9px 14px;
	cursor: pointer;
	font-size: 14px;
	border-bottom: 1px solid #f5f5f5;
}
.tt-suggestion:hover,
.tt-cursor { background: #e8420b; color: #fff; border-radius: 4px; }

/* ==================================================================
 * D. หน้า cart — โชว์แถวค่าจัดส่ง (เลิกซ่อน tr.shipping แบบ global = แก้บั๊ก marketplace #1)
 *
 * บนมือถือธีมซ่อน th อยู่แล้ว (td::before เอา label จาก data-title มาแทน) → table-row
 * กับ flex เห็นผลเหมือนกัน จึงคงของเดิมไว้ ไม่แตะสิ่งที่เทสมือถือผ่านแล้ว
 * ส่วนจอคอมต้องเป็น flex — ดู D1
 * ================================================================== */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals tr.shipping {
	display: table-row;
}

/* ==================================================================
 * D1. หน้า cart บนจอคอม — กล่องสรุปยอด (Phase 3D รอบ 3)
 *
 * ธีมวางกล่องนี้เป็น .cart-totals-inner.wd-layout-2 แล้วจัดแต่ละแถวด้วย
 * flex + space-between โดยตั้ง th/td padding:0 (ระยะห่างมาจากตัวแถวเอง)
 * ของที่พังอยู่ 3 จุด:
 *
 *   1) กล่องไม่มี padding เลย → ป้าย "ยอดรวมสินค้า" ชิดขอบซ้ายกล่อง
 *      (การ์ดของธีม `.cart-content-wrapper > .cart_totals .cart-totals-inner`
 *      กับของ Customizer `.cart-collaterals .cart_totals` ไม่ match ทั้งคู่
 *      เพราะหน้า cart นี้ render ผ่าน widget wd_cart_table ใน Elementor)
 *   2) 🔴 Customizer CSS (#wp-custom-css ใน DB ไม่ใช่ไฟล์!) มีกฎ
 *      `.shop_table tbody td { padding:12px 16px !important }` → ทับ padding:0
 *      ของธีมเฉพาะฝั่ง td ส่วน th ยังเป็น 0 = ซ้าย/ขวาไม่สมมาตร
 *   3) กฎ D ข้างบนดัน tr.shipping กลับเป็น table-row → หลุดจาก flex ของธีม
 *      กลายเป็น anonymous table ใน table ที่ display:block → th บีบเหลือ 32px
 *      คำว่า "ค่าจัดส่ง" เลยตกบรรทัดเละ
 *
 * ⚠️ จอมือถือ (<769px) ไม่แตะ — ผ่านการเทสจริงกับตะวันรอบ 25 ก.ค. แล้ว
 * ================================================================== */
@media (min-width: 769px) {

	/* 1) การ์ดสรุปยอด ให้ชุดเดียวกับกล่องสรุปบนหน้า checkout */
	body.woocommerce-cart .cart_totals .cart-totals-inner {
		background: #fff;
		border: 1px solid #f0f0f0;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 1px 3px rgba( 0, 0, 0, .05 );
	}

	/* 2) คืน padding:0 ตามที่ธีมตั้งใจ (กัน Customizer CSS ที่ยิง !important มา) */
	body.woocommerce-cart .cart_totals .shop_table tbody th,
	body.woocommerce-cart .cart_totals .shop_table tbody td {
		padding: 0 !important;
	}

	/* 🔴 4) [3E รอบ 2 — ลูกค้าแจ้ง "ชิดขอบ"] ถอดกรอบ "ใบใน" ที่ซ้ำซ้อนออก
	 *
	 * Customizer CSS (wp-custom-css ใน DB) มีกฎเหมารวม:
	 *     .woocommerce-orders-table, .shop_table {
	 *         background:#fff; border:1px solid #f0f0f0; border-radius:12px; box-shadow:0 2px 8px …
	 *     }
	 * กฎนี้ไปโดน "ตารางยอดรวม" ด้วย → เกิดการ์ดขาวมีกรอบ+เงา ซ้อนอยู่ใน .cart-totals-inner
	 * ซึ่งเป็นการ์ดอยู่แล้ว · พอข้อ 2 ตั้ง th/td padding:0 ข้อความจึงแนบกรอบใบในสนิท
	 * วัดจริงบน prod จอ 1400px (คอลัมน์ขวา 391px): ระยะจากกรอบใบในถึงข้อความ = **0.9px**
	 * = "ยอดรวมสินค้า ชิดซ้าย · ราคาชิดขวา · กล่องเขียวชิดสองฝั่ง" ตามที่ลูกค้าแจ้งเป๊ะ
	 *
	 * ถอดกรอบใบในออกให้เหลือการ์ดใบเดียว → ทุกอย่างได้ระยะ 20px จาก padding ของ
	 * .cart-totals-inner เอง (ข้อ 1) โดยไม่ต้องไปบวก padding ซ้อนอีกชั้น
	 * specificity (0,3,1) ชนะกฎเหมารวมของ Customizer (0,1,0) — ไม่ต้องแตะ DB
	 * ⚠️ จำกัดขอบเขตด้วย .cart_totals เท่านั้น — ตารางรายการสินค้าบนหน้า cart
	 *    ยังต้องเป็นการ์ดเหมือนเดิมตามดีไซน์ Phase 3D
	 */
	body.woocommerce-cart .cart_totals .shop_table {
		background: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* 3) แถวค่าจัดส่งกลับเข้า flex ของธีม: ป้ายเต็มบรรทัดบน ตัวเลือกอยู่บรรทัดล่าง */
	body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
	body.woocommerce-cart .cart_totals tr.shipping {
		display: flex;
	}
	body.woocommerce-cart .cart_totals tr.shipping th {
		flex: 1 1 100%;
		margin-bottom: 6px;
	}
}

/* ==================================================================
 * D2. หน้า cart บนมือถือ — แถวตารางกลายเป็นการ์ด (Phase 3D)
 *
 * markup ชุดเดียวกันทั้งทาง layout 1625 (widget wd_cart_table) และทาง cart.php
 * → กฎชุดนี้ครอบทั้งสองทาง (ไม่ต้อง fork template / ไม่ต้องกด layout)
 * ธีมทำ tr เป็น flex + ::before จาก data-title มาให้แล้ว เราเปลี่ยนเป็นกริดการ์ด
 * แล้วดัน "ปุ่มลบ" ออกไปมุมขวาบนไม่ให้ไปเบียดชื่อสินค้า/ช่องจำนวน
 *
 * ⚠️ จุดตัดต้องเป็น 768.98px ให้ตรงกับธีม (woo-mod-shop-table.min.css) เป๊ะ —
 * ถ้าใช้ 768px จะมีช่วงคาบเกี่ยว 0.98px ที่ธีมเลิกเป็นตารางแล้วแต่การ์ดเรายังไม่ติด
 * ================================================================== */
@media (max-width: 768.98px) {
	body.woocommerce-cart table.woocommerce-cart-form__contents thead { display: none !important; }

	body.woocommerce-cart table.woocommerce-cart-form__contents,
	body.woocommerce-cart table.woocommerce-cart-form__contents tbody {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
	}

	/* การ์ดสินค้า (ออกแบบใหม่ 25 ก.ค. รอบ 3 — ตะวันสั่ง "รูปหายไปเยอะ จัดใหม่ให้ดี"):
	 *   [ รูป 72px ]  ชื่อสินค้า (สูงสุด 2 บรรทัด)
	 *                 ราคา/ชิ้น (เทาเล็ก)
	 *                 [− n +]
	 *                 ราคารวมรายการ (ส้มหนา ชิดขวา)
	 * เลิกใช้ป้าย "ราคา/จำนวน/รวม" หน้าแถว — ตำแหน่งสื่อความหมายเองแบบการ์ด marketplace
	 * ⚠️ ทำไมราคารวมอยู่บรรทัดของตัวเอง: จอ 390 เหลือพื้นที่ข้างรูปแค่ ~145px
	 *    ใส่ [− n +] (~114px) + ราคารวม (~98px) แถวเดียวกันไม่พอ → คอลัมน์บีบจนทับกัน
	 *
	 * [3G ข้อ 4] ลูกค้าขอ "Compact Card — เห็นสินค้าได้มากขึ้นในหน้าจอเดียว":
	 *   รูป 96 → 72px · padding 14/12 → 10 · gap 6/12 → 4/10 · margin 12 → 8
	 *   ⚠️ ลูกค้าย้ำ "ปุ่ม +/− และ checkbox ยังต้องกดง่าย" → พื้นที่แตะคงไว้ ≥36px
	 *      (ดูหมวด S ท้ายไฟล์) · ย่อได้เฉพาะระยะ ห้ามย่อปุ่ม */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
		position: relative !important;
		display: grid !important;
		/* [3G ข้อ 3] เพิ่มคอลัมน์ซ้ายสุดให้ checkbox (26px) — ของเดิม 2 คอลัมน์ */
		grid-template-columns: 26px 72px minmax(0, 1fr) !important;
		grid-template-areas:
			"pick thumb name"
			"pick thumb price"
			"pick thumb qty"
			"pick thumb total" !important;
		align-content: start !important;
		align-items: center !important;
		gap: 4px 10px !important;
		margin: 0 0 8px !important;
		/* padding ขวาแค่ 10 — เว้นที่ให้ปุ่ม X เฉพาะแถวชื่อสินค้า (ดู td.product-name)
		   ไม่งั้นเสียพื้นที่ตัวหนังสือทั้งการ์ดทั้งที่ X ทับแค่มุมบน */
		padding: 10px !important;
		border: 1px solid #ececec !important;
		border-radius: 12px !important;
		background: #fff !important;
	}

	body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px !important;
		width: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	/* รูปสินค้า: กรอบจัตุรัส 96px + object-fit:contain = เห็นเต็มรูป ไม่โดนครอบตัด
	 * 🔴 กับดักของธีม 2 ชั้นที่ต้องล้างทั้งคู่ (เจอตอนเทสมือถือจริง):
	 *   (1) td ถูกตั้ง position:absolute (woo-mod-shop-table) → หลุดกริดไปทับชื่อสินค้า
	 *   (2) <a> ที่หุ้มรูปกว้างแค่ 44px + overflow:hidden → รูปโดนตัดข้างหายไปครึ่ง */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		grid-area: thumb !important;
		align-self: start !important;
		display: block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail a,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail > * {
		display: block !important;
		width: 72px !important;
		max-width: 72px !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
	}
	/* box-sizing: border-box เพื่อให้ 72px คือความกว้างรวม border+padding แล้ว
	   ตรงกับคอลัมน์ grid พอดี (ของเดิม 96px วัดได้จริง 100px เพราะ border+padding บวกเพิ่ม) */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
		box-sizing: border-box !important;
		width: 72px !important;
		height: 72px !important;
		max-width: 72px !important;
		object-fit: contain !important;
		background: #fff !important;
		border: 1px solid #ececec !important;
		/* [3 ส.ค. รอบ 2] ตะวันสั่งขอบเหลี่ยม — แก้มือถือด้วยให้หน้าตาตรงกับจอคอม
		   (ของเดิมเป็น 10px มาตั้งแต่ 3D) */
		border-radius: 0 !important;
		padding: 3px !important;
	}

	/* ชื่อสินค้า: สูงสุด 2 บรรทัด ตัด ... (กันการ์ดยืดยาวเวลาชื่อรุ่นรถยาว)
	   clamp ต้องใส่ที่ <a> ข้างใน — ธีมบังคับ display:flow-root ที่ตัว td ทับ -webkit-box */
	/* display:block เพื่อให้ SKU/ตัวเลือกสินค้าลงบรรทัดใหม่ใต้ชื่อ
	   (ถ้าเป็น flex ตามกฎ > td ข้างบน SKU จะไปยืนข้างชื่อแล้วบีบชื่อจนเหลือนิดเดียว) */
	/* ⚠️ ต้องมี `table.cart` ในตัวเลือกด้วย ไม่งั้น padding-right โดนกฎ
	   `table.cart … > td { padding: 0 }` (หมวด S) ล้างทิ้ง แล้วชื่อสินค้าจะยาว
	   ไปชนปุ่มลบมุมขวาบน (วัดจริง 31 ก.ค.: ตัวอักษรทับปุ่ม 25px) */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-name {
		grid-area: name !important;
		display: block !important;
		align-self: end !important;
		/* 40px = ปุ่มลบ 36 + เว้นหายใจ 4 (3G ขยายพื้นที่แตะปุ่มจาก 32 → 36) */
		padding-right: 40px !important;
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-name .wd-product-detail,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-name dl.variation {
		margin: 2px 0 0 !important;
		color: #9a9a9a !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-name a {
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden !important;
		color: #222 !important;
	}

	/* ราคาต่อชิ้น: เทาเล็ก ๆ ใต้ชื่อ */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-price {
		grid-area: price !important;
		align-self: start !important;
		color: #8a8a8a !important;
		font-size: 13px !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-price::after {
		content: "/ ชิ้น" !important;
		color: #b5b5b5 !important;
		white-space: nowrap !important;
	}

	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity { grid-area: qty !important; }

	/* ราคารวมของรายการ: ส้มหนา ชิดขวาในแถวเดียวกับตัวปรับจำนวน */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-subtotal {
		grid-area: total !important;
		justify-content: flex-end !important;
		color: #e8420b !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		white-space: nowrap !important;
	}

	/* การ์ดใหม่ไม่ใช้ป้ายหน้าแถวแล้ว (ตำแหน่งสื่อความหมายเอง) */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item > td::before { display: none !important; }

	/* [3G ข้อ 3] td.product-remove เดิมลอยมุมขวาบน (มีแต่ปุ่ม ×) — ตอนนี้เป็น
	 * "คอลัมน์ pick" ซ้ายสุดของการ์ด มีแต่ checkbox
	 *
	 * [3 ส.ค. 3H] ปุ่ม × ไม่อยู่ในเซลล์นี้แล้ว ย้ายไป td.product-subtotal
	 * (ดูหมวดท้ายไฟล์) — เซลล์นี้จึงเหลือหน้าที่เดียวคือวาง checkbox */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-remove {
		grid-area: pick !important;
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
	}
	/* ตัวปรับจำนวน: หน้าตาเดียวกับหน้า checkout (− 36px · เลข 46px · + 36px) */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity .quantity {
		display: inline-flex !important;
		align-items: center !important;
		width: auto !important;
		max-width: 120px !important;
		margin: 0 !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity input.qty {
		width: 46px !important;
		min-width: 0 !important;
		height: 36px !important;
		line-height: 34px !important;
		font-size: 15px !important;
		text-align: center !important;
	}
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity input.minus,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity input.plus {
		width: 34px !important;
		height: 36px !important;
		line-height: 1 !important;
	}

	/* แถวปุ่ม (คูปอง/อัปเดตตะกร้า) เป็นบล็อกเต็มความกว้าง ไม่ใช่ช่องตาราง */
	body.woocommerce-cart table.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item),
	body.woocommerce-cart table.woocommerce-cart-form__contents td.actions {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
	}

	/* ─── ลำดับบล็อกบนหน้า cart: ตะกร้า → สรุปคำสั่งซื้อ → สินค้าแนะนำ ───
	 * หน้านี้เป็น Elementor (layout 1625) ซึ่งวาง "สินค้าแนะนำ" ไว้ในบล็อกเดียวกับตาราง
	 * และ "สรุปคำสั่งซื้อ" เป็นบล็อกแยกต่อท้าย → ใช้ display:contents แบนบล็อกแรก
	 * ให้ลูกกลายเป็น flex item ของ .e-con-inner แล้วค่อยสั่ง order (ไม่แตะ DB/ไม่ hardcode id)
	 * (เช็คแล้วว่า wrapper ไม่มีพื้นหลัง/ขอบ/padding — แบนได้โดยหน้าตาไม่เปลี่ยน) */
	body.woocommerce-cart .e-con-inner > .elementor-element:has(.woocommerce-cart-form) {
		display: contents !important;
	}
	body.woocommerce-cart .e-con-inner > .elementor-element,
	body.woocommerce-cart .e-con-inner > .elementor-element > .elementor-element {
		order: 4; /* ค่าเริ่มต้น = ท้ายสุด (สินค้าแนะนำตกมาอยู่ตรงนี้) */
	}
	body.woocommerce-cart .e-con-inner .elementor-element:has(> .elementor-widget-container .woocommerce-message) { order: 1; }
	body.woocommerce-cart .e-con-inner .elementor-element:has(.woocommerce-cart-form) { order: 2; }
	body.woocommerce-cart .e-con-inner > .elementor-element:has(.cart_totals) { order: 3; }
}

/* ==================================================================
 * E. มือถือ
 * ================================================================== */

/* กริดยุบคอลัมน์เดียว + ปุ่มสั่งซื้อ sticky ล่าง (CSS ล้วน ไม่ clone DOM) — 3B */
@media (max-width: 991px) {
	.wpc-checkout.checkout .wpc-co__grid,
	.woocommerce-checkout .wpc-co__grid { grid-template-columns: 1fr !important; }
	.wpc-co__right .checkout-order-review { position: static; }
	/* 🔴 3E: เดิมเป็น `margin: 0 -16px` เพื่อให้แถบ sticky เต็มขอบการ์ด แต่พอ #payment
	   ไม่มี padding ข้างแล้ว (กฎ card-in-card ด้านบน) ค่าลบนี้จะดันปุ่ม+ข้อความ privacy
	   ล้นออกนอกการ์ดจริง ๆ — วัดบน staging: แถวอื่นอยู่ 47–328.5 แต่แถบปุ่มกาง 31–344.5
	   = "หลุดขอบ" ที่ลูกค้าวงลูกศรมาให้ · ให้แถบกว้างเท่าเนื้อหาแทน */
	.wpc-checkout #payment .place-order,
	.wpc-checkout .form-row.place-order {
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: #fff;
		margin: 0 !important;
		padding: 12px 0 !important;
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
	}
}

/* การ์ด/ช่องกรอกบนจอเล็ก */
@media (max-width: 768px) {
	/* ⚠️ 3F: เอา #payment ออกจากลิสต์นี้ — มันไม่ใช่การ์ดแล้ว (การ์ดคือ .wpc-co-pay ที่ครอบอยู่)
	   ถ้าปล่อยไว้จะได้ padding ซ้อน padding แล้วชื่อช่องทางจ่ายเงินตัด 2 บรรทัดบนมือถือ */
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout .woocommerce-additional-fields,
	body.woocommerce-checkout #order_review,
	body.woocommerce-checkout .wpc-co-box,
	body.woocommerce-checkout .wpc-tax-invoice {
		padding: 18px 16px !important;
		border-radius: 12px !important;
	}
	body.woocommerce-checkout input.input-text,
	body.woocommerce-checkout input[type="text"],
	body.woocommerce-checkout input[type="email"],
	body.woocommerce-checkout input[type="tel"],
	body.woocommerce-checkout select,
	body.woocommerce-checkout .select2-container--default .select2-selection--single {
		height: 50px !important;
		font-size: 16px !important;
		line-height: 48px !important;
	}
	body.woocommerce-checkout .form-row label { font-size: 14px !important; }
	body.woocommerce-checkout #place_order { height: 52px !important; font-size: 16px !important; line-height: 52px !important; }
	body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 48px !important;
		font-size: 16px !important;
	}
}

/* ==================================================================
 * E2. มือถือ — ฟอร์มที่อยู่ + การ์ดช่องทางจ่ายเงิน (3E)
 * จุดตัด 768.98px ให้ตรงกับธีม (woo-mod-shop-table.min.css)
 * ================================================================== */
@media (max-width: 768.98px) {

	body.woocommerce-checkout form.wpc-checkout .woocommerce-billing-fields__field-wrapper {
		column-gap: 10px !important;
	}

	/* เหลือคู่กันแค่ 2 คู่ที่ปลอดภัยจริงบนจอ 375px:
	   ชื่อ|นามสกุล (คำสั้น) และ จังหวัด|รหัสไปรษณีย์ (4:2 — จังหวัดต้องกว้างกว่า)
	   ที่เหลือเต็มบรรทัด เพราะ "แขวง/ตำบล" คือช่องที่ autocomplete เด้ง suggestion
	   (ต้องกว้างพอโชว์ "ตำบล » อำเภอ » จังหวัด » รหัส") และชื่อเขต/อำเภอไทยยาว */
	body.woocommerce-checkout #billing_first_name_field,
	body.woocommerce-checkout #billing_phone_field,
	body.woocommerce-checkout #billing_email_field,
	body.woocommerce-checkout #billing_address_2_field,
	body.woocommerce-checkout #billing_city_field {
		grid-column: 1 / -1 !important;
	}
	body.woocommerce-checkout #billing_state_field { grid-column: span 8 !important; }
	body.woocommerce-checkout #billing_postcode_field { grid-column: span 4 !important; }
	/* มือถือ: ช่องกว้างพออยู่แล้ว ไม่ต้องดันเมนู autocomplete ให้ล้นจอ */
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .tt-menu {
		min-width: 0 !important;
	}

	/* การ์ดจ่ายเงินบนจอเล็ก: บีบ padding + ย่อโลโก้อีกนิด (กฎหลักอยู่นอก media query ด้านบน) */
	body.woocommerce-checkout #payment .wpc-pay-item {
		padding: 12px !important;
		gap: 8px !important;
	}
	body.woocommerce-checkout #payment .wpc-pay-title { font-size: 14px !important; }
	body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo,
	body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img {
		height: 20px !important;
		max-width: 58px !important;
	}
	body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo-pp,
	body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img.real-logo-pp {
		height: 22px !important;
		max-width: 74px !important;
	}
}

@media (max-width: 480px) {
	body.woocommerce-checkout h3 { font-size: 15px !important; }
	body.woocommerce-checkout #place_order { font-size: 15px !important; }
}

/* ==================================================================
 * F. หน้าขอบคุณ (order-received) — Phase 3D
 * ================================================================== */
.wpc-ty { max-width: 860px; margin: 0 auto; }
.wpc-ty .woocommerce-order { margin-top: 8px; }
.wpc-ty .woocommerce-thankyou-order-received,
.wpc-ty .woocommerce-notice--success {
	padding: 16px 18px;
	border: 1px solid #d8efd8;
	border-radius: 12px;
	background: #f4fbf4;
	font-size: 16px;
	font-weight: 600;
}
.wpc-ty .woocommerce-order-overview,
.wpc-ty .woocommerce-order-details,
.wpc-ty .woocommerce-customer-details,
.wpc-ty .wd-order-info {
	margin-top: 18px;
	padding: 18px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
}
/* ร้านส่งไปที่อยู่เดียว (3B ปิด ship-to-different) → ออเดอร์ไม่มี shipping address
   Woo เลยพิมพ์บล็อก "Shipping address: N/A" ทิ้งไว้ · ซ่อนเฉพาะในหน้าขอบคุณ
   (ที่อยู่ billing ถูกตั้งชื่อเป็น "ที่อยู่จัดส่ง" แล้วใน wpc_checkout_thankyou_strings) */
.wpc-ty .woocommerce-column--shipping-address { display: none !important; }

.wpc-ty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
.wpc-ty-actions__line,
.wpc-ty-actions__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.wpc-ty-actions__line { background: #06c755; color: #fff; }
.wpc-ty-actions__line:hover { background: #05b34c; color: #fff; }
.wpc-ty-actions__shop { border: 1px solid #ddd; color: #333; background: #fff; }
.wpc-ty-actions__shop:hover { border-color: #e8420b; color: #e8420b; }

@media (max-width: 768.98px) {
	.wpc-ty-actions { flex-direction: column; }
	.wpc-ty-actions__line,
	.wpc-ty-actions__shop { width: 100%; }
}

/* ==================================================================
 * G. ตารางสรุปคำสั่งซื้อบนหน้า checkout — ทุกขนาดจอ
 *
 * ของเดิม: ตารางยัง render เป็น <table> จริง → th พื้นส้มกินครึ่งจอ + ช่องขวาล้น
 * ต้องเลื่อนซ้าย-ขวาอ่าน · แก้เป็นบล็อกซ้อนกัน ป้ายซ้าย/ค่าขวา และแถวค่าจัดส่ง
 * ให้ป้ายอยู่บรรทัดบน ตัวเลือกวิธีส่งเต็มความกว้าง
 *
 * [25 ก.ค. รอบ 4] เดิมกฎชุดนี้อยู่ใน @media (max-width: 768.98px) → จอคอมยังเป็น
 * <table> จริงในคอลัมน์ขวากว้าง 360px · th 156 + td 174 = 330px ล้นกล่อง 262px
 * → มี scrollbar แนวนอนซ่อนอยู่ในการ์ด อ่านยอดไม่ครบ ("โดนบีบ")
 * ปลด media query ออก ใช้ชุดเดียวกันทั้งสองจอ (โครงป้ายซ้าย/ค่าขวาเป็นภาษาเดียว
 * กับ Shopee/Lazada อยู่แล้ว และคอลัมน์ขวา 360px ก็แคบพอ ๆ กับจอมือถือ)
 * ส่วนที่ต่างกันจริงระหว่างคอม/มือถืออยู่ที่ H (คอม) กับ E (มือถือ)
 * ⚠️ กฎในบล็อกนี้ไม่เปลี่ยนเลยแม้แต่บรรทัดเดียว → มือถือที่เทสผ่านแล้วเหมือนเดิม 100%
 * ================================================================== */
	body.woocommerce-checkout .wd-table-wrapper {
		overflow-x: visible !important;
		padding: 0 !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none !important; }

	/* แถวสินค้า: รูปซ้าย 60px + ชื่อ/จำนวน/ราคา ขวา · ปุ่มลบมุมขวาบน */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item > td.wd-checkout-prod {
		position: relative !important;
		display: grid !important;
		grid-template-columns: 60px minmax(0, 1fr) !important;
		grid-template-areas: "img cont" !important;
		gap: 10px !important;
		width: 100% !important;
		padding: 14px 26px 14px 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #eee !important;
	}
	body.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-img { grid-area: img !important; }
	body.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-img img { width: 60px !important; height: auto !important; }
	body.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-cont {
		grid-area: cont !important;
		min-width: 0 !important;
	}
	body.woocommerce-checkout td.wd-checkout-prod .wd-checkout-remove-btn-wrapp {
		position: absolute !important;
		top: 10px !important;
		right: 0 !important;
		width: 22px !important;
		height: 22px !important;
	}
	/* ช่องจำนวนในสรุป: กะทัดรัด ไม่ยืดเต็มแถว และไม่สูงผิดปกติ (กฎ input 50px ของ B ไม่ควรโดน) */
	body.woocommerce-checkout td.wd-checkout-prod .quantity {
		display: inline-flex !important;
		width: auto !important;
		max-width: 120px !important;
		margin: 6px 0 !important;
	}
	body.woocommerce-checkout td.wd-checkout-prod .quantity input.qty,
	body.woocommerce-checkout #order_review input.qty {
		width: 46px !important;
		min-width: 0 !important;
		height: 36px !important;
		line-height: 34px !important;
		font-size: 15px !important;
	}
	body.woocommerce-checkout td.wd-checkout-prod .quantity input.minus,
	body.woocommerce-checkout td.wd-checkout-prod .quantity input.plus {
		width: 34px !important;
		height: 36px !important;
	}

	/* แถวยอด: ป้ายซ้าย ค่าขวา ไม่มีพื้นส้ม */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		justify-content: space-between !important;
		gap: 4px 10px !important;
		padding: 10px 0 !important;
		border-bottom: 1px solid #f0f0f0 !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		background: transparent !important;
		color: #333 !important;
		border: 0 !important;
		text-align: left !important;
		font-size: 14px !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right !important; }

	/* ค่าจัดส่ง: ป้ายบรรทัดบน ตัวเลือกเต็มความกว้าง (การ์ด 2 ใบ + กล่อง LINE) */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
		width: 100% !important;
		margin-bottom: 6px !important;
		font-weight: 600 !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
		width: 100% !important;
		text-align: left !important;
	}

	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total { border-bottom: 0 !important; }
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
		font-size: 16px !important;
		font-weight: 700 !important;
	}

/* ==================================================================
 * H. กล่องสรุปคำสั่งซื้อบนจอคอม — ให้ต่างจากมือถือ (Phase 3D รอบ 4)
 *
 * ภาษาภาพอ้างอิง marketplace ที่คนไทยคุ้น (Shopee/Lazada): คอลัมน์ขวาเป็น
 * "การ์ดสรุป" ที่ลอยตามตอนเลื่อน · รายการสินค้าอยู่บนสุดและเลื่อนในตัวเองได้
 * ถ้าของเยอะ · ปิดท้ายด้วยยอดรวมตัวใหญ่สีส้มคั่นด้วยเส้นหนา
 *
 * จุดตัด 992px ให้ตรงกับกริด (กฎ E ยุบเหลือคอลัมน์เดียวที่ <= 991px
 * และปลด sticky ที่นั่นแล้ว — ที่นี่จึงไม่ต้องตั้ง position ซ้ำ)
 * ================================================================== */
@media (min-width: 992px) {

	/* รายการสินค้า: ของเยอะแค่ไหนการ์ดก็ไม่ยาวเกินจอ เลื่อนอ่านในกล่องแทน */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
		max-height: 300px !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar { width: 6px; }
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 3px;
	}

	/* ยอดรวมทั้งหมด: เด่นกว่ามือถือ + เส้นคั่นหนาให้สายตาหยุด */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
		margin-top: 4px !important;
		padding-top: 14px !important;
		border-top: 2px solid #f0f0f0 !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
		font-size: 15px !important;
	}
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
		font-size: 20px !important;
		font-weight: 700 !important;
		color: #e8420b !important;
	}

	/* ป้ายฝั่งซ้ายให้อ่านเป็นชุดเดียวกัน ไม่ตัวหนาแข่งกับยอดรวม */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th {
		color: #666 !important;
		font-weight: 400 !important;
	}
}

/* [31 ส.ค.] เคยก๊อปกฎกริดมาไว้ท้ายไฟล์เพราะกฎแรกของไฟล์ "หายไปเฉย ๆ"
   ตอนนี้รู้เหตุแล้ว (`*` ติด `/` ในคอมเมนต์หัวไฟล์ปิดคอมเมนต์ก่อนกำหนด) และแก้ที่ต้นเหตุแล้ว
   จึงถอดตัวซ้ำออก เหลือแหล่งเดียวที่หัวไฟล์ — กฎ media 991px ตัวจริงอยู่ที่บรรทัด ~1274 */

/* ==================================================================
 * L. เส้นคั่นในกล่องสรุปฝั่งขวา — ต้องอยู่ "ท้ายไฟล์" (27 ก.ค.)
 *
 * ลูกค้าแจ้ง "เส้นขั้นดูรก" · เดิมมี 4 เส้นในกล่องเดียว:
 *   1) เส้นใต้ "ยอดรวมสินค้า"        (กฎ tfoot tr border-bottom)
 *   2) เส้นใต้ "ค่าจัดส่ง"            (กฎเดียวกัน)
 *   3) เส้นเหนือ "ยอดรวมทั้งหมด" 2px — ใส่ทั้ง th และ td แยกกัน จึงขาดเป็น 2 ท่อน
 *   4) เส้นเหนือข้อความนโยบายใต้ปุ่ม
 *
 * ⚠️ ทำไมต้องวางท้ายไฟล์: กฎที่วาดเส้นอยู่บรรทัด ~1511 และ ~1572 ซึ่งอยู่หลังหมวด J
 *    specificity เท่ากันเป๊ะ → ตัวที่มาทีหลังชนะ · เคยวางไว้ในหมวด J แล้วไม่ติด
 *    (แพตเทิร์นเดียวกับกฎกริด 2 คอลัมน์ที่ไฟล์นี้ก็วางซ้ำท้ายไฟล์ด้วยเหตุผลเดียวกัน)
 * ================================================================== */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td {
	border: 0 !important;
}
/* เหลือเส้นเดียว วางบน tr เพื่อให้ลากยาวต่อเนื่อง ไม่ขาดเป็นท่อนแบบใส่ที่ th+td */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
	border-top: 1px solid #eee !important;
	margin-top: 8px !important;
	padding-top: 14px !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* ==================================================================
 * M. เก็บงานจากที่ตะวันเทสจอคอม 27 ก.ค. (5 จุด)
 * ================================================================== */

/* 🔴 1) .wd-table-wrapper ของ WoodMart เป็นการ์ดขาว+เงา+มุมโค้ง "ซ้อน" อยู่ใน #order_review
 *    ซึ่งเป็นการ์ดอยู่แล้ว · วัดจริง: ตัวเลข "ยอดรวมสินค้า/ค่าจัดส่ง" ห่างขอบขวาของมัน = 0px
 *    = "ตัวเลขชิดขอบขวา" ที่ลูกค้าแจ้ง · เคสที่ 3 ของบั๊กตระกูลเดียวกัน (การ์ดซ้อนการ์ด)
 *    ⚠️ บทเรียนซ้ำ: ก่อนสรุปว่า "ไม่ชิด" ต้องหา ancestor ตัวแรกที่มี background จริง
 *       ไม่ใช่วัดเทียบ element ที่หยิบมาสะดวก — พลาดมาแล้ว 2 รอบ */
body.woocommerce-checkout #order_review .wd-table-wrapper {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border: 0 !important;
}

@media (min-width: 769px) {

	/* 2) ช่องกรอกสูงเกินบนจอคอม — 50px เป็นค่าที่ตั้งไว้เผื่อนิ้วบนมือถือ
	      จอคอมใช้เมาส์ 44px กำลังดี (select2 ต้องตามให้เท่ากัน ไม่งั้นแถวเหลื่อม) */
	body.woocommerce-checkout .wpc-checkout input.input-text,
	body.woocommerce-checkout .wpc-checkout input[type="text"],
	body.woocommerce-checkout .wpc-checkout input[type="email"],
	body.woocommerce-checkout .wpc-checkout input[type="tel"],
	body.woocommerce-checkout .wpc-checkout select,
	body.woocommerce-checkout .wpc-checkout .select2-container--default .select2-selection--single {
		height: 44px !important;
	}
	body.woocommerce-checkout .wpc-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 42px !important;
	}
	body.woocommerce-checkout .wpc-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 42px !important;
	}

	/* 3) ป้ายชื่อช่องชิดของแถวบนเกิน — เดิมช่องว่างระหว่างแถว = 0px
	      (margin-bottom ของ .form-row ถูกกฎอื่นล้างเป็น 0 → สู้ด้วย row-gap ของกริดแทน
	       ซึ่งไม่มีใครทับ และไม่ต้องไล่หาว่ากฎไหนล้าง) */
	body.woocommerce-checkout form.wpc-checkout .woocommerce-billing-fields__field-wrapper {
		row-gap: 18px !important;
	}

	/* 4) เพิ่มอากาศในการ์ดตามที่ขอ — ของเดิม 24px ทุกใบ (ไม่ได้พัง แต่ยังดูอึดอัด) */
	body.woocommerce-checkout #order_review,
	body.woocommerce-checkout .wpc-co-box,
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout .wpc-tax-invoice {
		padding: 28px !important;
	}
}

/* ==================================================================
 * N. เก็บงานรอบสุดท้าย (ตะวันเทสจอคอม 27 ก.ค.)
 * ================================================================== */

/* 🔴 กล่อง "ชำระเงินออนไลน์" = label + .payment_box ประกอบกันเป็นกรอบเดียว
 *    (label = ครึ่งบน radius 12px 12px 0 0 · .payment_box = ครึ่งล่าง 0 0 12px 12px)
 *    เดิมเราตั้ง .payment_box { padding: 0 } ตั้งแต่ 3C เพื่อล้าง padding ของ WooCommerce
 *    ผลคือของข้างในแนบขอบกรอบ 1px ทุกด้าน: "ชำระด้วย" ชิดซ้าย · การ์ด 3 ใบชิดซ้าย-ขวา
 *    · การ์ดใบท้ายชิดขอบล่าง (วัดจริง: กล่อง 103→863 ของข้างใน 104→862, ล่างห่าง 1px)
 *    → คืน padding ให้กรอบ ทั้ง 3 อาการหายพร้อมกัน และการ์ดแคบลงเองตามที่ขอ */
body.woocommerce-checkout #payment .payment_box {
	padding: 16px 18px 18px !important;
}

/* เช็คบ็อก "สมัครสมาชิกไว้ติดตามคำสั่งซื้อ" อยู่ใน .woocommerce-account-fields
   ซึ่งอยู่ "นอก" กริดที่อยู่ → row-gap ไม่ถึง เลยติดแถวรหัสไปรษณีย์สนิท (วัดได้ 0px) */
body.woocommerce-checkout .woocommerce-account-fields {
	margin-top: 18px !important;
}

@media (max-width: 768.98px) {
	body.woocommerce-checkout #payment .payment_box {
		padding: 14px !important;
	}
	body.woocommerce-checkout .woocommerce-account-fields {
		margin-top: 14px !important;
	}
}

/* ---- วงกลมเลือก (radio) บนการ์ดช่องทางจ่ายเงิน ----
   JS สลับคลาส .wpc-pay-item--selected ให้อยู่แล้ว (checkout.js › bindPayment)
   จึงทำด้วย CSS ล้วน ไม่ต้องแตะ JS · วางเป็น ::before ของ .wpc-pay-item-left
   เพื่อให้อยู่หน้าไอคอนในแถวเดียวกัน (ถ้าใส่ที่ .wpc-pay-item จะกลายเป็นแถวของตัวเอง
   ตอนจอคอมที่การ์ดเรียงเนื้อในแนวตั้ง)
   ⚠️ ไม่ใช่แค่ตกแต่ง — ค่าที่เลือกไปอยู่ใน #wpc_payment_channel และมี guard
   กันกดสั่งซื้อถ้ายังไม่เลือก (checkout_place_order.wpcpay) */
body.woocommerce-checkout #payment .wpc-pay-item-left::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #ccc;
	background: #fff;
	box-shadow: inset 0 0 0 3px #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}
body.woocommerce-checkout #payment .wpc-pay-item:hover .wpc-pay-item-left::before {
	border-color: #f0a58c;
}
body.woocommerce-checkout #payment .wpc-pay-item--selected .wpc-pay-item-left::before {
	border-color: #e8430a;
	background: #e8430a;
}

/* 🔴 สถานะ "เลือกแล้ว" ของการ์ดจ่ายเงิน — เดิมมองไม่เห็นเลย
 *
 * กฎ .wpc-pay-item--selected ของเรา (หมวด C) เขียนไว้แบบไม่มี !important แต่ Customizer CSS
 * (wp-custom-css ใน DB) ตั้ง `.wpc-pay-item { border:1.5px solid #e8e8e8 !important;
 * background:#fff !important }` ซึ่งมี !important และพิมพ์ทีหลัง → ทับสถานะเลือกทั้งหมด
 * ผล: กดเลือกแล้วหน้าตาไม่เปลี่ยน ลูกค้าเลยไม่รู้ว่ากดได้ (= ที่ตะวันแจ้ง 27 ก.ค.)
 * ⚠️ Customizer มีกฎของ `.wpc-pay-item.selected` ด้วย แต่คนละชื่อคลาสกับที่ JS เราใช้จริง
 *    (`wpc-pay-item--selected`) จึงไม่เคยยิงโดน
 */
body.woocommerce-checkout #payment .wpc-pay-item--selected {
	border-color: #e8430a !important;
	background: #fff8f5 !important;
	box-shadow: 0 2px 10px rgba(232, 67, 10, 0.14) !important;
}
body.woocommerce-checkout #payment .wpc-pay-item--selected .wpc-pay-title {
	color: #e8430a !important;
}
body.woocommerce-checkout #payment .wpc-pay-item--selected .wpc-pay-item-left::before {
	border-color: #e8430a !important;
	background: #e8430a !important;
}

/* มือถือ: วงกลมเลือกกินที่ไป ~30px (18px + gap) ทำให้ "บัตรเครดิต-เดบิต" ตัด 2 บรรทัดอีก
   → ย่อวงกลม/ระยะ/โลโก้ ชดเชยคืนให้ข้อความ */
@media (max-width: 768.98px) {
	body.woocommerce-checkout #payment .wpc-pay-item-left::before {
		width: 16px !important;
		height: 16px !important;
		box-shadow: inset 0 0 0 2.5px #fff !important;
	}
	body.woocommerce-checkout #payment .wpc-pay-item-left { gap: 8px !important; }
	body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo,
	body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img { max-width: 50px !important; }
	body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo-pp,
	body.woocommerce-checkout #payment .wpc-pay-logos .real-logo-img.real-logo-pp { max-width: 64px !important; }
	/* มีวงกลมเลือกแล้ว ลูกศร ">" ซ้ำหน้าที่ และกินที่ ~20px ที่ข้อความต้องการพอดี */
	body.woocommerce-checkout #payment .wpc-pay-arrow { display: none !important; }
}

/* ==================================================================
 * O. [3G ข้อ 8] แถบขั้นตอนบนมือถือ — บรรทัดเดียว
 *
 * เดิมตกเป็น 2 บรรทัดเพราะ .wpc-co-steps ตั้ง flex-wrap: wrap และมีปุ่ม
 * "ติดต่อ LINE" กินที่ท้ายแถบ · ข้อ 7 ตัดปุ่มออกแล้ว เหลือแค่บีบขนาดลง
 *
 * งบพื้นที่จอ 360px: padding 24 + วงกลม 3×22=66 + ป้าย ~202 + gap 6×6=36
 * ≈ 328 → พอดี · เส้นคั่นตั้ง flex: 1 1 6px ให้ยืด/หดกินที่เหลือแทนการดันตกบรรทัด
 * ================================================================== */
@media (max-width: 768.98px) {
	.wpc-co-steps {
		flex-wrap: nowrap !important;
		gap: 6px !important;
		padding: 10px 12px !important;
	}
	.wpc-co-step {
		gap: 5px !important;
		font-size: 12px !important;
		flex: 0 0 auto !important;
	}
	.wpc-co-step__num {
		width: 22px !important;
		height: 22px !important;
		font-size: 12px !important;
	}
	.wpc-co-step__label { white-space: nowrap !important; }
	.wpc-co-step__sep {
		width: auto !important;
		flex: 1 1 6px !important;
		min-width: 6px !important;
	}
}

/* ==================================================================
 * P. [3G ข้อ 10] ช่องทางจ่ายเงิน — เรียงลง 2 กลุ่มตาม mockup
 *
 * mockup: กล่องพื้นเทาใบบน = จ่ายออนไลน์ (บัตร + QR) · กล่องแยกใบล่าง = วอลเล็ท
 * วงกลม radio มีอยู่แล้วเป็น ::before ของ .wpc-pay-item-left (หมวดท้ายไฟล์)
 * → ข้อนี้ไม่ต้องแตะ JS เรื่องวงกลม แค่จัดกลุ่ม + สไตล์
 *
 * ⚠️ Customizer CSS ตั้ง .wpc-pay-item { border/background/radius !important }
 * ไว้ 8 จุด → กฎที่ต้องชนะต้องมี !important + specificity สูงกว่า (1,2,1)
 * ================================================================== */

/* [3 ส.ค. 3H ข้อ 2] กรอบเดียวพื้นเทาอ่อนครอบทุกช่องทาง (3G เคยแยก 2 กล่อง) */
body.woocommerce-checkout #payment .wpc-pay-list--all {
	padding: 0 !important;
	background: #f7f7f7 !important;
	border-radius: 12px !important;
	gap: 0 !important;
	overflow: hidden !important;
}
/* แถวในกรอบ: ไม่มีกรอบ/พื้นของตัวเอง เหลือแค่เส้นคั่น */
body.woocommerce-checkout #payment .wpc-pay-list--all .wpc-pay-item {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 14px 16px !important;
}
body.woocommerce-checkout #payment .wpc-pay-list--all .wpc-pay-item:not(:last-child) {
	border-bottom: 1px solid #e5e5e5 !important;
}
/* แถวที่เลือก: เน้นด้วยพื้นอ่อน ไม่ใช่กรอบ (กรอบจะตัดเส้นคั่นขาด) */
body.woocommerce-checkout #payment .wpc-pay-list--all .wpc-pay-item--selected {
	background: #fff4f0 !important;
	box-shadow: none !important;
}
/* ลูกศร ">" โชว์เฉพาะแถววอลเล็ทตาม mockup — แถวอื่นมีวงกลม radio สื่ออยู่แล้ว
   ⚠️ ผูกกับ data-channel ไม่ใช่ชื่อกลุ่ม เพราะกลุ่มเหลือกลุ่มเดียวแล้ว */
body.woocommerce-checkout #payment .wpc-pay-item .wpc-pay-arrow {
	display: none !important;
}
body.woocommerce-checkout #payment .wpc-pay-item[data-channel="wallet"] .wpc-pay-arrow {
	display: inline-block !important;
	color: #9ca3af !important;
}
/* ชื่อกับคำอธิบายเรียงลง (ลูกค้า: "คำอธิบายย่อยอยู่ด้านล่าง")
   ⚠️ ของเดิมเป็น flex แนวนอน + flex-wrap ซึ่งจะ "ลงบรรทัด" ก็ต่อเมื่อที่ไม่พอ
      = ไม่การันตี ต้องสั่ง column ตรง ๆ */
body.woocommerce-checkout #payment .wpc-pay-text {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px !important;
}
/* แถวเดียวจบทั้ง 2 กลุ่ม: ข้อความซ้าย โลโก้ขวา ไม่ตัดบรรทัด */
body.woocommerce-checkout #payment .wpc-pay-item {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
}
body.woocommerce-checkout #payment .wpc-pay-item-left {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
body.woocommerce-checkout #payment .wpc-pay-item-right {
	flex: 0 0 auto !important;
	justify-content: flex-end !important;
}
body.woocommerce-checkout #payment .wpc-pay-title { white-space: nowrap !important; }

/* [3G ข้อ 11] โลโก้ TrueMoney เกือบจัตุรัส (270×205) ต่างจากโลโก้อื่นที่เป็นแนวนอนยาว
   → คุมด้วย max-height ไม่ใช่ max-width ไม่งั้นจะสูงเด่นกว่าเพื่อนในแถวเดียวกัน */
body.woocommerce-checkout #payment .wpc-pay-logos img.real-logo-tm {
	max-height: 30px !important;
	max-width: none !important;
	width: auto !important;
}

/* ==================================================================
 * Q. [3G ข้อ 1+2] หน้าตะกร้า — แถบแจ้งเตือน + หัวตาราง
 * ================================================================== */

/* ---- ข้อ 1: แถบ "เพิ่มสินค้าในตะกร้าแล้ว" เขียวเข้ม → เขียวอ่อน ----
 * พื้นเขียวเข้มมาจากธีม (woo-mod-block-notices.min.css)
 * Customizer แตะแค่ `.woocommerce-message { color:#333 !important }` = (0,1,0)
 * ของเรา (0,2,1) + !important จึงชนะทั้งธีมและ Customizer
 *
 * ⚠️ ข้อความไม่ต้องแก้ — ของเดิมตรงกับที่ลูกค้าขออยู่แล้ว
 * (`เพิ่ม "<ชื่อสินค้า>" ในตะกร้าเรียบร้อย` + ลิงก์ `เลือกซื้อสินค้าต่อ`)
 * ลูกค้าเขียนว่า "ข้อความประมาณ:" ซึ่งตรงของเดิม → งานเหลือแค่สี
 */
body.woocommerce-cart .woocommerce-message {
	background: #eaf7ef !important;
	border: 1px solid #b7e4c7 !important;
	color: #1f7a45 !important;
	border-radius: 10px !important;
}
body.woocommerce-cart .woocommerce-message::before {
	color: #1f7a45 !important;
	background: transparent !important;
}
body.woocommerce-cart .woocommerce-message a {
	color: #157347 !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

/* ---- ข้อ 2: หัวตารางสินค้า ส้ม → เทาอ่อน + ไม่ตัดคำ ----
 * 🔴 ต้นเหตุสีส้ม = Customizer CSS (wp-custom-css ใน DB) กฎเหมารวม:
 *     .woocommerce-orders-table thead th, .shop_table thead th {
 *         background: var(--wpc) !important; color:#fff !important; }
 *   (--wpc = #ec5a31) specificity (0,2,1) + !important และ WordPress พิมพ์
 *   wp-custom-css ท้ายสุดใน <head> → ชนะไฟล์เราเสมอถ้าไม่ยกระดับ
 *
 * ⚠️ กฎเหมารวมตัวนั้นกิน .woocommerce-orders-table (ประวัติออเดอร์ใน My Account)
 *   ด้วย → **ต้องผูก .woocommerce-cart-form เสมอ** ไม่งั้นหน้า My Account เปลี่ยนตาม
 *   ของเรา = (0,4,1) ชนะ (0,2,1) — ไม่แตะ DB
 */
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead th {
	background: #f5f5f5 !important;
	color: #333 !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

/* ==================================================================
 * R. [3G ข้อ 6] ซ่อน accordion "การจัดส่ง & การคืนสินค้า" ออกจากหน้า cart
 *
 * ลูกค้าขอย้ายไปไว้หน้าชำระเงินแทน (ทำแล้ว = .wpc-co-sr ในหมวดต้นไฟล์)
 * ตัวบนหน้า cart มาจาก Elementor DB (layout 1625) → ซ่อนด้วย CSS ไม่แตะ DB
 *
 * 🔴 โครงจริงที่วัดบน staging (31 ก.ค.) — ห้ามเดา:
 *     .e-con-inner
 *      └ .elementor-element-51504b5 (คอลัมน์ขวา, e-con)
 *         ├ กล่องสรุปยอด
 *         └ .elementor-element-49d0e5d (e-con)      ← ตัวที่ต้องซ่อน
 *            ├ widget หัวข้อ "การจัดส่ง & การคืนสินค้า"
 *            └ widget accordion (.elementor-widget-wd_accordion)
 *
 * ⚠️ selector ที่ร่างไว้ตอนแรก (`.e-con-inner > .elementor-element:has(.wd-accordion)`)
 *   **จับผิดตัว** — ไปโดนคอลัมน์ขวาทั้งคอลัมน์ = ซ่อนกล่องสรุปยอดหายไปด้วย
 *   ต้องใช้ `:has(> …)` ผูกกับ **พ่อโดยตรง** ของ widget เท่านั้น
 *
 * ผูกกับชื่อ widget ของธีม ไม่ผูก Elementor element id → ถ้าลูกค้าแก้หน้าใน
 * Elementor แล้ว id เปลี่ยน กฎนี้ยังทำงาน และขึ้น prod ไม่ต้องทำอะไรเพิ่ม
 * ================================================================== */
body.woocommerce-cart .e-con:has( > .elementor-widget-wd_accordion ) {
	display: none !important;
}

/* ==================================================================
 * S. [3G ข้อ 4] การ์ดตะกร้ามือถือ compact — พื้นที่แตะของปุ่มที่ต้องกดง่าย
 *
 * ลูกค้าเขียนไว้ชัดว่า "ปุ่ม + / − และ checkbox ยังต้องกดง่าย" → ย่อการ์ดได้
 * แต่พื้นที่แตะห้ามต่ำกว่า 36px (เกณฑ์เดียวกับที่ใช้มาตั้งแต่ 3D)
 *
 * วัดก่อนแก้บน staging 390px: ปุ่ม −/+ กว้าง 34 (เตี้ยกว่าเกณฑ์) · ปุ่มลบ 32×32
 * → ทั้งคู่ต่ำกว่าเกณฑ์อยู่แล้วตั้งแต่ก่อน 3G ไม่ใช่ผลจากการย่อการ์ด
 * ================================================================== */
@media (max-width: 768.98px) {
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item .quantity input.minus,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item .quantity input.plus,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item .quantity .wd-plus,
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item .quantity .wd-minus {
		min-width: 36px !important;
		min-height: 36px !important;
	}

	/* 🔴 padding ของเซลล์ = ตัวที่ทำให้การ์ดสูงจริง (ไม่ใช่ขนาดรูป)
	 *
	 * กฎ D2 สั่ง `> td { padding: 0 !important }` มาตั้งแต่ 3D แต่ **ไม่เคยชนะ**
	 * เพราะ Customizer CSS มี `.woocommerce-cart table.cart tbody td { padding: 12px 16px !important }`
	 * ซึ่ง specificity **(0,2,3) เท่ากับของเราเป๊ะ** → ตัวที่พิมพ์ทีหลังชนะ
	 * และ WordPress พิมพ์ wp-custom-css ท้ายสุดใน <head> เสมอ
	 * ผล: ทุกเซลล์บวก 24px (บน+ล่าง) → 4 เซลล์ = ~96px ที่มองไม่เห็นว่ามาจากไหน
	 *
	 * แก้: เติม `table.cart` เข้า selector ฝั่งเรา → (0,3,4) ชนะขาด
	 * ⚠️ อย่าลดต่ำกว่านี้ — เว้นช่องไฟแนวตั้งด้วย gap ของกริดแทน จะคุมง่ายกว่า
	 */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item > td {
		padding: 0 !important;
	}

	/* รูปสินค้า: ธีมตั้ง min-width ทับ width อยู่ 2 ชั้น (min-width ชนะ width เสมอ
	   ไม่ว่าจะมี !important หรือไม่ — เป็นกฎของ box model ไม่ใช่เรื่อง specificity)
	     woo-mod-shop-table.min.css  →  td.product-thumbnail img { min-width: 80px }
	     @media(≤768.98)             →  .shop-table-with-img td.product-thumbnail img { min-width: 100px }
	   🔴 นี่คือเหตุผลที่รูปกว้าง 100px มาตลอดตั้งแต่ 3D ทั้งที่โค้ดเราตั้ง 96px
	      = รูปเสียสัดส่วน 1:1 มาตลอด · ลูกค้าขอ "ยังเป็นสัดส่วน 1:1" จึงต้องแก้ */
	body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
		min-width: 72px !important;
	}
}

/* ==================================================================
 * T. [3G ข้อ 12] การ์ดสรุปที่อยู่ — **ทุกขนาดจอ** (รอบ 3 ขยายมาจอคอมด้วย)
 *
 * [31 ก.ค. รอบ 3] ตะวันสั่ง: จอคอมก็ต้องเริ่มเป็นกล่องเล็กเหมือนมือถือ
 * เหตุผล: เฟสหน้าจะเปลี่ยนเป็น "เลือกที่อยู่จากสมุดที่อยู่" → การ์ดนี้คือที่ทาง
 * ของ "ที่อยู่ที่เลือกอยู่" อยู่แล้ว ทำโครงให้ถูกตั้งแต่ตอนนี้จะได้ไม่ต้องรื้อ
 * (รอบแรกจำกัดไว้แค่ ≤768.98px เพราะ mockup หน้า 7 เป็นมือถือ)
 *
 * โครงที่ออกแบบไว้รองรับสมุดที่อยู่:
 *   .wpc-addr-card       = การ์ด "ที่อยู่ที่เลือกอยู่"  ← เฟสหน้าเพิ่มปุ่ม "เลือกจากสมุด" ข้าง ๆ ปุ่มแก้ไข
 *   .wpc-addr-card__head = ป้ายหัวข้อ                  ← เฟสหน้าใส่ชื่อป้าย เช่น "บ้าน / ที่ทำงาน"
 *   .wpc-addr-card.is-empty = ยังไม่มีที่อยู่           ← เฟสหน้า = "ยังไม่มีที่อยู่ในสมุด"
 *
 * 🔴 ซ่อนฟอร์มด้วย display:none เท่านั้น — **ห้ามถอดออกจาก DOM**
 *    country_to_state ของ WooCommerce + การคิดค่าส่ง อ่านค่าจาก element พวกนี้
 *    (บทเรียน 3E: ช่องประเทศที่ซ่อนไว้ก็ใช้กติกาเดียวกัน)
 * ================================================================== */
.wpc-addr-card { display: none; }

body.wpc-addr-collapsed .wpc-addr-card {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 16px 18px !important;
	margin: 0 0 18px !important;
	background: #fff !important;
	border: 1px solid #ececec !important;
	border-radius: 12px !important;
}
body.wpc-addr-collapsed .woocommerce-billing-fields { display: none !important; }

.wpc-addr-card__body { min-width: 0 !important; }
.wpc-addr-card__head {
	font-size: 13px;
	font-weight: 700;
	color: #e8430a;
	margin-bottom: 6px;
}
.wpc-addr-card__name {
	font-size: 15px;
	font-weight: 600;
	color: #222;
}
.wpc-addr-card__line {
	font-size: 13px;
	line-height: 1.6;
	color: #666;
	margin-top: 3px;
}
body.woocommerce-checkout .wpc-addr-card__edit {
	flex: 0 0 auto !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	color: #333 !important;
	background: #fff !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 8px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}
body.woocommerce-checkout .wpc-addr-card__edit:hover {
	border-color: #e8430a !important;
	color: #e8430a !important;
}

/* การ์ดตอนยังไม่ได้กรอก — ขอบประ + ปุ่มสีแบรนด์ ให้เห็นชัดว่ายังต้องทำอะไรต่อ */
body.wpc-addr-collapsed .wpc-addr-card.is-empty {
	border-style: dashed !important;
	border-color: #f0b9a5 !important;
}
body.wpc-addr-collapsed .wpc-addr-card.is-empty .wpc-addr-card__edit {
	color: #fff !important;
	background: #e8430a !important;
	border-color: #e8430a !important;
	font-weight: 700 !important;
}

/* ปุ่ม "บันทึกที่อยู่" ท้ายฟอร์ม — โชว์ทุกจอ (เป็นทางเดียวที่จะยุบกลับเป็นการ์ด)
   จอคอมไม่ต้องเต็มความกว้าง ให้พอดีตัวหนังสือ */
body.woocommerce-checkout .wpc-addr-save {
	display: inline-block !important;
	min-height: 44px !important;
	margin: 8px 0 0 !important;
	padding: 0 24px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: #e8430a !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer !important;
}

@media (max-width: 768.98px) {
	body.wpc-addr-collapsed .wpc-addr-card {
		gap: 10px !important;
		padding: 12px 14px !important;
		margin: 0 0 16px !important;
	}
	.wpc-addr-card__head { font-size: 12px; margin-bottom: 4px; }
	.wpc-addr-card__name { font-size: 13px; }
	.wpc-addr-card__line { font-size: 12px; line-height: 1.55; margin-top: 2px; }
	body.woocommerce-checkout .wpc-addr-save { display: block !important; width: 100% !important; padding: 0 !important; }
	.wpc-addr-card__edit {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 0 12px;
		font-size: 12px;
		color: #333;
		background: #fff;
		border: 1px solid #d9d9d9;
		border-radius: 8px;
		cursor: pointer;
	}
}

/* ==================================================================
 * U. [3G ข้อ 3] ติ๊กเลือกสินค้าในตะกร้า — checkbox · แถวที่พักไว้ · บรรทัดสรุป
 *
 * คลาส .wpc-cart-* เป็นของใหม่ทั้งหมด → Customizer CSS (wp-custom-css ใน DB)
 * ไม่มีกฎแตะเลย (เช็คแล้ว) จึงไม่ต้องยกระดับ specificity สู้เหมือนหมวดอื่น
 * แต่ยังต้อง !important ตรงที่ทับกฎ "> td" ของหมวด D2 ซึ่งเป็น !important อยู่
 * ================================================================== */

/* ---- checkbox ต่อแถว ---- */
.wpc-cart-pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
}
.wpc-cart-pick input.wpc-cart-check {
	/* 18px คือขนาดที่ตาเห็น — พื้นที่แตะจริงขยายด้วย ::after ข้างล่าง
	   (ลูกค้าย้ำว่า checkbox ต้องกดง่าย แต่กล่องใหญ่ ๆ จะดูเทอะทะบนการ์ด compact) */
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #e8430a;
	cursor: pointer;
}
.wpc-cart-pick input.wpc-cart-check:disabled { opacity: 0.45; cursor: wait; }

/* ---- แถวสินค้าที่พักไว้ ---- */
tr.wpc-cart-saved-item { opacity: 0.62; }
tr.wpc-cart-saved-item td.product-name { color: #777 !important; }
.wpc-cart-saved-flag {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.4;
	color: #9a9a9a;
}
.wpc-cart-saved-qty { font-size: 13px; color: #8a8a8a; }

/* ---- บรรทัดสรุปใต้รายการสินค้า ---- */
tr.wpc-cart-sum > td {
	padding: 12px 14px !important;
	border: 1px solid #ececec !important;
	border-radius: 12px !important;
	background: #fff !important;
}
.wpc-cart-sum__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	color: #333;
	cursor: pointer;
}
.wpc-cart-sum__all input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #e8430a;
	cursor: pointer;
}
.wpc-cart-sum__count { font-size: 13px; color: #777; }
.wpc-cart-sum__label { font-size: 13px; color: #666; }
.wpc-cart-sum__amount {
	font-size: 18px;
	font-weight: 700;
	color: #e8430a;
	white-space: nowrap;
}

/* 🔴 layout ทั้งหมดอยู่ที่ .wpc-cart-sum__inner **ไม่ใช่ที่ <td>**
   td ที่ถูกสั่ง display:flex จะหลุดออกจากอัลกอริทึมตารางของเบราว์เซอร์
   → วัดจริงบน staging จอ 1400: บรรทัดสรุปเหลือกว้าง 309px สูง 175px
     และลากคอลัมน์ "ปุ่มลบ" ไปกว้าง 310px จนคอลัมน์ชื่อสินค้าเหลือ 127px */
.wpc-cart-sum__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* จอคอม: บรรทัดสรุปเป็นแถวเดียว ซ้าย = เลือกทั้งหมด/จำนวน · ขวา = ยอด */
@media (min-width: 769px) {
	.wpc-cart-sum__total {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin-left: auto;
	}
}

@media (max-width: 768.98px) {
	/* มือถือ: บรรทัดสรุปเป็นบล็อกเต็มความกว้าง (หมวด D2 ทำ tr ที่ไม่ใช่ cart-item
	   เป็น display:block ไว้แล้ว — ที่นี่จัดเนื้อในอย่างเดียว) */
	tr.wpc-cart-sum > td {
		display: block !important;
		margin: 0 0 8px !important;
	}
	/* มือถือวางซ้อนลงมา: แถวบน = เลือกทั้งหมด + จำนวน · แถวล่าง = ยอด */
	.wpc-cart-sum__inner {
		display: block !important;
	}
	.wpc-cart-sum__count {
		margin-left: 8px;
		padding-left: 8px;
		border-left: 1px solid #e6e6e6;
	}
	.wpc-cart-sum__total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid #f0f0f0;
	}

	/* พื้นที่แตะ checkbox ให้ถึง 36px โดยไม่ขยายกล่องที่ตาเห็น
	   (::after ยืดออกนอกตัวเอง — ไม่ดันกริดการ์ดให้บวม) */
	.wpc-cart-pick { position: relative; }
	.wpc-cart-pick::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 36px;
		height: 36px;
		transform: translate(-50%, -50%);
	}

	/* แถวที่พักไว้ไม่มีตัวปรับจำนวน/ยอดรวม → ยุบช่องว่างที่กริดกันไว้ */
	tr.wpc-cart-saved-item td.product-subtotal { display: none !important; }
}

/* ==================================================================
 * V. [3G ข้อ 13] แถบสรุป + ปุ่มสั่งซื้อ ตรึงล่างจอ — หน้า cart มือถือ
 *
 * 🔴 ค่าที่ใช้มาจากการวัดจริงบน staging 31 ก.ค. (390x844):
 *      #mobile-bottom-nav  → position:fixed · z-index 9999 · สูง 56px · ชิดล่างสุด
 *      .wd-toolbar         → position:fixed · z-index 350  · สูง 55px · ชิดล่างสุด
 *      .scrollToTop        → z-index 350 · ลอยอยู่ 67px จากล่าง
 *      ปุ่มแชท Chaty       → **ไม่มีบนหน้านี้** (element มีใน DOM แต่ display:none)
 *   → แถบเราต้องอยู่ **เหนือ** แถบเมนู 56px และ z ต่ำกว่า 9999 (ห้ามทับเมนูธีม)
 *
 * ใช้ position:fixed ไม่ใช่ sticky — mockup ให้เห็นแถบตลอดขณะเลื่อนดูสินค้า
 * ================================================================== */
.wpc-cart-bar { display: none; }

@media (max-width: 768.98px) {
	body.woocommerce-cart .wpc-cart-bar {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 56px !important;   /* = ความสูงแถบเมนูล่างของธีมที่วัดได้ */
		z-index: 998 !important;   /* เหนือเนื้อหา แต่ต่ำกว่าเมนูธีม (9999) */
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding: 8px 14px !important;
		background: #fff !important;
		border-top: 1px solid #ececec !important;
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08) !important;
	}
	body.woocommerce-cart .wpc-cart-bar__info {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;   /* ดูเหตุผลที่กฎปุ่มข้างล่าง */
		min-width: 0 !important;
		line-height: 1.25 !important;
	}
	.wpc-cart-bar__label { font-size: 12px; color: #666; }
	.wpc-cart-bar__total { font-size: 18px; font-weight: 700; color: #e8430a; }
	.wpc-cart-bar__note  { font-size: 11px; color: #9a9a9a; }

	/* 🔴 Customizer CSS (wp-custom-css ใน DB) มีกฎ:
	 *      .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	 *      .checkout… { width: 100% !important }
	 *   ปุ่มของเรา **จำเป็นต้องมีคลาส .checkout-button** (ไม่งั้น initExpressLine
	 *   ดักส่งด่วน→LINE ไม่เจอ) จึงโดนกฎนี้เต็ม ๆ → ปุ่มกินความกว้างทั้งแถบ
	 *   บีบ .wpc-cart-bar__info เหลือ **กว้าง 0** ตัวหนังสือตกบรรทัดละตัว
	 *   ทำให้แถบสูง **196px** แทนที่จะเป็น ~68px (วัดจริงบน staging 31 ก.ค.)
	 *   → ต้องคืน width ด้วย !important ที่ specificity สูงกว่า ห้ามแก้ DB */
	body.woocommerce-cart a.wpc-cart-bar__btn {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 58% !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 20px !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #fff !important;
		background: #e8430a !important;
		border: 0 !important;
		border-radius: 22px !important;
		white-space: nowrap !important;
	}

	/* ปุ่ม scroll-to-top ของธีมลอยอยู่ 67px จากล่าง = ทับแถบเรา → ดันขึ้นไปเหนือแถบ */
	body.woocommerce-cart.wpc-has-cart-bar .scrollToTop { bottom: 136px !important; }

	/* ปุ่ม "ดำเนินการสั่งซื้อ" เดิมในกล่องสรุปยอด ซ้ำหน้าที่กับแถบล่างแล้ว
	   🔴 ซ่อนเฉพาะเมื่อแถบล่างเรนเดอร์จริง (คลาส wpc-has-cart-bar มาจาก PHP)
	      ไม่งั้นถ้าแถบพัง จะไม่เหลือปุ่มสั่งซื้อทั้งหน้า = สั่งซื้อไม่ได้เลย */
	body.woocommerce-cart.wpc-has-cart-bar .wc-proceed-to-checkout { display: none !important; }

	/* กันแถบบังเนื้อหาท้ายหน้า (แถบ ~60 + เมนูธีม 56 + หายใจ 16) */
	body.woocommerce-cart.wpc-has-cart-bar { padding-bottom: 132px !important; }
}

/* ==================================================================
 * W. [3G ข้อ 5] เก็บพื้นที่ว่างบนมือถือ 2 จุด
 *
 * 🔴 วัดจริงบน staging 31 ก.ค. (390px) — ต้นเหตุคือ margin-bottom: 80px 2 ตัว:
 *    จุดที่ 1  ตารางสินค้าจบที่ 345 → หัวข้อ "สรุปคำสั่งซื้อ" เริ่ม 485 = ว่าง 140px
 *              (form.woocommerce-cart-form margin-bottom 80 + padding widget 20
 *               + ช่องไฟ Elementor 20 + padding container 20)
 *    จุดที่ 2  ปุ่มสั่งซื้อจบที่ 1060 → "สินค้าแนะนำ" เริ่ม 1180 = ว่าง 120px
 *              (.wc-proceed-to-checkout margin-bottom 80 + 20 + 20)
 *
 * ตัดเฉพาะ 80px ที่เป็นของ WooCommerce/ธีม — padding ของ Elementor ปล่อยไว้
 * (เป็นช่องไฟระหว่างบล็อกที่ทำให้การ์ดไม่ติดกันจนอ่านยาก)
 * ================================================================== */
@media (max-width: 768.98px) {
	body.woocommerce-cart form.woocommerce-cart-form { margin-bottom: 8px !important; }
	body.woocommerce-cart .wc-proceed-to-checkout { margin-bottom: 8px !important; }
}

/* ==================================================================
 * X. [3G ข้อ 12 รอบ 2] ปุ่มบันทึกที่อยู่ + snackbar
 *
 * รอบ 2 (ตะวันสั่ง 31 ก.ค.): เริ่มต้นหุบไว้เลย · เลิกยุบอัตโนมัติ ให้กดบันทึกเอง ·
 * กดสั่งซื้อทั้งที่ที่อยู่ไม่ครบ → snackbar เตือน + กางฟอร์มให้เห็นว่าต้องแก้อะไร
 * ================================================================== */

/* ⚠️ สไตล์ปุ่มบันทึก + การ์ดตอนว่าง ย้ายไปรวมที่ **หมวด T** แล้ว (รอบ 3)
   เพราะการ์ดไม่ได้จำกัดแค่มือถืออีกต่อไป — เก็บไว้ที่เดียวกันจะได้ไม่หลุดกัน */

/* ---- snackbar (ใช้ร่วมกันทั้ง cart และ checkout) ----
   ตั้ง bottom สูงพอไม่ให้ทับแถบเมนูล่างของธีม (56px) และแถบสั่งซื้อของเรา

   🔴 [31 ก.ค. รอบ 4] ตะวันเจอ "พื้นหลังกับตัวหนังสือดำทั้งคู่ อ่านไม่ออก"
      ตรวจบน staging แล้ว **ไม่มีกฎไหนในเว็บทับสีเลย** (ไล่ครบ 103 stylesheet)
      → สาเหตุที่เหลือคือ **เบราว์เซอร์บังคับโหมดมืดเอง** (Android Chrome force-dark
        / WebView auto-dark) ซึ่งจะกลับสีตัวหนังสือขาวให้เป็นสีเข้ม แต่พื้นที่เข้มอยู่แล้ว
        ไม่ถูกกลับ → เข้มทั้งคู่ · เป็นสิ่งที่ specificity สู้ไม่ได้ ต้องสั่งปิดตรง ๆ

   วิธีกัน 4 ชั้น (เอาให้จบ ไม่ต้องกลับมาแก้อีก):
     1. color-scheme: only light   → บอกเบราว์เซอร์ว่ากล่องนี้ห้ามแปลงเป็นโหมดมืด
     2. -webkit-text-fill-color    → ทับสีตัวอักษรชั้นที่ force-dark เข้าไม่ถึง
     3. !important + body นำหน้า   → กันธีม/Customizer ในอนาคต (บทเรียนข้อ 8)
     4. พื้นทึบ ไม่ใช่ rgba        → ถ้าพื้นหลังหลังกล่องสว่าง จะได้ไม่ซีดจนอ่านยาก */
body .wpc-snackbar {
	position: fixed;
	left: 50%;
	bottom: 132px;
	z-index: 10000;
	max-width: 420px;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.5;
	color-scheme: only light;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: #1f2024 !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transform: translate(-50%, 10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
body .wpc-snackbar.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* เผื่อเบราว์เซอร์ที่ผู้ใช้ตั้งโหมดมืดไว้จริง ๆ — สลับเป็นพื้นสว่างตัวหนังสือเข้มแทน
   (คู่สีนี้ force-dark ไม่ทำให้อ่านไม่ออก เพราะมันกลับทั้งคู่พร้อมกัน) */
@media (prefers-color-scheme: dark) {
	body .wpc-snackbar {
		color: #16171a !important;
		-webkit-text-fill-color: #16171a !important;
		background: #f2f3f5 !important;
		border-color: rgba(0, 0, 0, 0.18) !important;
	}
}

/* ==================================================================
 * Y. [3G รอบ 3] เก็บงานจาก feedback ตะวัน 31 ก.ค.
 * ================================================================== */

/* ---- ระหว่างรอเซิร์ฟเวอร์ตอบ (ติ๊กเลือกสินค้า) ----
   หรี่ลงนิดเดียวพอให้รู้ว่ากำลังทำงาน — ไม่ใช้ spinner เต็มจอเพราะรอบนี้เร็วมาก
   (ไม่โหลดหน้าใหม่แล้ว) การขึ้น overlay จะกลายเป็นแฟลชกวนตาแทน */
.woocommerce-cart-form.wpc-cart-busy,
.cart_totals.wpc-cart-busy {
	opacity: 0.55;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

/* แถวที่เพิ่งกด — หรี่ทันทีให้รู้ว่ารับคำสั่งแล้ว ไม่ต้องรอเซิร์ฟเวอร์ตอบ
   (เซิร์ฟเวอร์ใช้เวลาเรนเดอร์ ~2 วิ · ของจริงถูกทับด้วย HTML จากเซิร์ฟเวอร์เสมอ) */
tr.wpc-row-pending {
	opacity: 0.4 !important;
	transition: opacity 0.1s ease;
}

/* ------------------------------------------------------------------
 * [3 ส.ค. 3H ข้อ 3] รูปสินค้าหน้าตะกร้าเป็นจัตุรัส เห็นภาพครบ — จอคอม/แท็บเล็ต
 *
 * ลูกค้า: "รูปสินค้าให้เป็นจัตุรัสเต็มภาพพอดีกรอบ" (สไลด์หน้าตะกร้า)
 * มือถือเป็นจัตุรัส 72px + contain อยู่แล้วตั้งแต่ 3D/3G — จอคอมต่างหากที่
 * **ไม่เคยมีกฎเลย** จึงตกไปใช้ของธีม (สัดส่วนธรรมชาติ = ผืนผ้า)
 *
 * 🔴 min-width ของธีมชนะ width เสมอ (กฎ box model ไม่เกี่ยวกับ specificity
 *    หรือ !important ฝั่งเรา) — ต้องล้าง min-width ตรง ๆ
 *      woo-mod-shop-table.min.css → td.product-thumbnail img { min-width: 80px }
 *
 * object-fit: contain = ภาพแบนเนอร์กว้างจะมีขอบขาวบน-ล่าง ซึ่งคือสิ่งที่ลูกค้า
 * ขอ ("เห็นภาพสินค้าครบ") ไม่ใช่ cover ที่ครอบตัดข้างทิ้ง
 *
 * ⚠️ ห้ามแตะ .woocommerce-checkout-review-order-table .product-thumbnail img
 *    (บรรทัด ~474) — นั่นเป็นตารางสรุปคำสั่งซื้อบนหน้า checkout คนละที่กัน
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
		box-sizing: border-box !important;
		width: 80px !important;
		height: 80px !important;
		min-width: 80px !important;
		max-width: 80px !important;
		object-fit: contain !important;
		background: #fff !important;
		border: 1px solid #ececec !important;
		/* [3 ส.ค. รอบ 2] ตะวันสั่ง: ขอบเหลี่ยม ไม่เอาขอบมน (มือถือแก้ให้ตรงกันแล้วเหมือนกัน) */
		border-radius: 0 !important;
	}
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail a {
		display: block !important;
		width: 80px !important;
		max-width: 80px !important;
		overflow: visible !important;
	}
}

/* ------------------------------------------------------------------
 * [3 ส.ค. 3H ข้อ 4] ปุ่มกากบาทมุมขวาบน — ทุกจอ
 *
 * ลูกค้าขอกลับมาเป็นลายลักษณ์อักษร (สไลด์ระบุ Windows/Tablet/Phone)
 * ปุ่มออกที่ท้าย td.product-subtotal (ดู wpc_cart_inject_remove_button)
 * จึงยึด td ใบนั้นเป็นกรอบอ้างอิง = มุมขวาบนของแถวพอดี ทั้งตารางจอคอม
 * และการ์ดมือถือ ด้วยกฎชุดเดียว
 *
 * 🔴 ทำไมไม่ยึด <tr> เป็นกรอบอ้างอิง:
 *    บนมือถือ tr ถูกตั้ง display:grid + position:relative อยู่แล้ว (หมวด D2)
 *    ซึ่งใช้ได้ปกติ — แต่**บนจอคอม tr ยังเป็น display:table-row** ที่การรองรับ
 *    position:relative ไม่เท่ากันทุกเบราว์เซอร์ และการไปแตะ position/display
 *    ของ tr/td บนตารางจริงเคยลากความกว้างคอลัมน์อื่นเพี้ยนมาแล้ว (บทเรียน 3G ข้อ 7)
 *    → ยึด td ที่เป็น table-cell ปกติ ปลอดภัยกว่าและได้ผลเดียวกันทั้ง 2 จอ
 *
 * ⚠️ ธีมใส่ทั้งตัวอักษร × และไอคอน ::before (woodmart-font) ให้ a.remove
 *    → เห็นกากบาทซ้อน 2 อัน · รอบนี้เลือก **โชว์ตัวอักษร ปิดไอคอน** (ไม่ผูกกับ
 *    ฟอนต์ของธีม) ต่างจากของเดิมที่ทำกลับกัน (font-size:0 + โชว์ ::before)
 * ------------------------------------------------------------------ */
body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal {
	position: relative !important;
}
body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .wpc-cart-remove {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px !important;
	min-height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #9ca3af !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 2 !important;
}
body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .wpc-cart-remove:hover {
	color: #e8430a !important;
}
/* ธีมยัดไอคอนซ้ำผ่าน ::before — ปิดทิ้ง เหลือ × ตัวเดียว */
body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .wpc-cart-remove::before {
	content: none !important;
}
/* มือถือ: พื้นที่แตะ >= 36px ตามเกณฑ์เดิมตั้งแต่ 3D + ย้ายกรอบอ้างอิงไปที่การ์ด
 *
 * 🔴 [3 ส.ค. รอบ 2 — ตะวันแจ้ง: บนมือถือปุ่มไปอยู่ขวา**ล่าง**]
 *    เพราะการ์ดมือถือเป็น grid ที่วาง `total` (= td.product-subtotal) ไว้ **แถวล่างสุด**
 *        "pick thumb name" / "pick thumb price" / "pick thumb qty" / "pick thumb total"
 *    → ยึด td ใบนั้นเป็นกรอบอ้างอิงแบบจอคอม = ได้มุมขวาบน "ของแถวล่างสุด" = ขวาล่างของการ์ด
 *
 *    แก้: บนมือถือคืน td.product-subtotal เป็น static แล้วให้ปุ่มไปเกาะ <tr> แทน
 *    (tr ตั้ง position:relative + display:grid ไว้อยู่แล้วในหมวด D2) = มุมขวาบนของการ์ดจริง
 *
 * ⚠️ บทเรียนซ้ำจากหัวข้อ 13: **วัดตำแหน่งต้องเทียบกล่องที่ตาเห็น** ไม่ใช่ ancestor
 *    ที่หยิบมาสะดวก · รอบแรกวัดเทียบ td ได้ (4,4) เลยผ่าน ทั้งที่ตัว td อยู่ล่างการ์ด
 */
@media (max-width: 768.98px) {
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal {
		position: static !important;
	}
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item .wpc-cart-remove {
		min-width: 36px !important;
		min-height: 36px !important;
		top: 4px !important;
		right: 4px !important;
	}
}

/* ==================================================================
 * Q. Phase 3I — feedback คุณกานต์รอบ 4 (PDF 04/08/2569)
 *    C1 หัวข้อหน้าตะกร้า · C3 ลบ "จัดส่งไปที่" · P3 หมายเหตุในกล่องที่อยู่
 * ================================================================== */

/* [C1] หัวข้อ "ตะกร้าสินค้า" — render ผ่าน wpc_cart_render_title (before_cart_table) */
body.woocommerce-cart .wpc-cart-title {
	font-size: 22px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 14px;
	line-height: 1.3;
}
@media (max-width: 768.98px) {
	body.woocommerce-cart .wpc-cart-title { font-size: 19px; margin: 0 0 12px; }
}

/* [C3] ซ่อนบรรทัด "จัดส่งไปที่ …" ใต้ตัวเลือกจัดส่งใน cart totals
   (ลิงก์ "เปลี่ยนที่อยู่"/กล่องคำนวณ ปิดที่ PHP แล้ว — filter ใน cart-select-items.php
   บรรทัดนี้เป็น <p> ที่ template core พิมพ์เสมอบน cart จึงต้องซ่อนฝั่ง CSS
   ⚠️ ต้องผูก body class + !important ให้ชนะจริง — บทเรียน 3G ข้อ 1/8) */
body.woocommerce-cart .woocommerce-shipping-destination {
	display: none !important;
}

/* [P3] หมายเหตุเพิ่มเติม — ย้ายมาท้ายกล่องที่อยู่ ก่อนปุ่ม "บันทึกที่อยู่"
   หัวข้อหน้าตาชุดเดียวกับหัวข้อการ์ด (ส้ม + เส้นใต้) ตาม mockup หน้า 3 */
body.woocommerce-checkout .wpc-co-notes {
	margin-top: 24px;
}
body.woocommerce-checkout .wpc-co-notes__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	padding: 0 0 12px 0 !important;
	margin: 0 0 14px 0 !important;
	border-bottom: 2px solid #e8430a !important;
	background: none !important;
	text-transform: none !important;
}
/* แถวช่องหมายเหตุเป็น form-row ปกติ — บังคับเต็มความกว้าง กันโดนกริด/float อื่นลาก */
body.woocommerce-checkout .wpc-co-notes .form-row {
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==================================================================
 * [C1.1] เลือกที่อยู่จากสมุด — ปุ่มบนการ์ดที่อยู่ + แผงเลือก
 *
 * 🔴 namespace `wpc-abook-*` เท่านั้น — การ์ดที่อยู่บนหน้านี้เป็นของ Phase 3G
 *    (`wpc-addr-*`) ถ้าใช้ชื่อเดียวกันสไตล์ 2 เฟสจะทับกันโดยไม่มีใครเห็น
 *
 * 🔴 z-index 9999 = ระดับเดียวกับเมนูล่างของธีม (#mobile-bottom-nav) เพื่อให้แผงคลุมได้จริง
 *    แต่ยังต่ำกว่า snackbar (10000) เพราะข้อความแจ้งผลต้องอ่านออกตอนแผงเปิดอยู่
 *
 * ⚠️ ทุกกฎที่แข่งกับธีม/Customizer ต้อง `!important` + ผูก body.woocommerce-checkout
 *    (บทเรียน §15 ข้อ 1: specificity เท่ากัน = แพ้ เพราะ wp-custom-css พิมพ์ท้าย <head>)
 * ================================================================== */
/* [รื้อ UX 20 ส.ค.] กฎของปุ่ม `.wpc-abook-pick-open` ถูกลบทิ้ง — ปุ่มนั้นเกาะอยู่บนการ์ด
   ซึ่งถูกซ่อนทั้งใบตอนกางฟอร์ม = ต้นตอ "ออกจากโหมดกรอกไม่ได้" ที่ตะวันแจ้ง
   ทางเข้าสมุดตอนนี้มี 2 ทางที่ไม่ทับกัน: ปุ่มเดียวบนการ์ด และปุ่มถอยบนแถบหัวฟอร์ม */

/* ปิดไว้ก่อนเสมอ — กันแผงกางค้างทับหน้าจอตอน JS ยังไม่ทำงาน/โหลดไม่ทัน */
.wpc-abook-pick[hidden] { display: none !important; }

.wpc-abook-pick {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
}
.wpc-abook-pick__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .45 );
}
.wpc-abook-pick__sheet {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba( 0, 0, 0, .18 );
	/* 🔴 กล่องพื้นสว่างที่ต้องรอดจาก force-dark ของ Android Chrome (บทเรียน §15 ข้อ 9) */
	color-scheme: only light;
}
.wpc-abook-pick__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #ececec;
}
.wpc-abook-pick__title {
	font-size: 15px;
	font-weight: 700;
	color: #222;
	-webkit-text-fill-color: #222;
}
body.woocommerce-checkout .wpc-abook-pick__close {
	flex: 0 0 auto !important;
	width: 32px !important;
	min-height: 32px !important;
	padding: 0 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	color: #888 !important;
	background: none !important;
	border: 0 !important;
	cursor: pointer !important;
}
.wpc-abook-pick__list {
	overflow-y: auto;
	padding: 8px 0;
	-webkit-overflow-scrolling: touch;
}

/* แถว = ปุ่ม "ใช้ใบนี้" เต็มความกว้าง + ปุ่ม "แก้ไข" ลอยมุมขวาบน
   🔴 เว้นที่ให้ปุ่มแก้ไขด้วย padding-right ของปุ่มหลัก ไม่ใช่ margin ของตัวมันเอง
      ไม่งั้นข้อความที่อยู่ยาว ๆ จะลอดไปใต้ปุ่มแก้ไข (ตัวอักษรทับกันแบบบทเรียน §15 ข้อ 3) */
.wpc-abook-pick__row {
	position: relative;
}

body.woocommerce-checkout .wpc-abook-pick__edit {
	position: absolute !important;
	top: 10px !important;
	right: 12px !important;
	z-index: 1 !important;
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 4px 8px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #e8430a !important;
	background: #fff !important;
	border: 1px solid #f0cfc2 !important;
	border-radius: 6px !important;
	min-height: 0 !important;
	cursor: pointer !important;
}

/* สถานะว่าง — คนที่ยังไม่เคยบันทึกที่อยู่ต้องรู้ว่าต้องทำอะไรต่อ */
.wpc-abook-pick__empty {
	display: block;
	padding: 26px 18px 18px;
	text-align: center;
}
.wpc-abook-pick__empty-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}
.wpc-abook-pick__empty-text {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #777;
}

/* แต่ละใบเป็นปุ่มเต็มความกว้าง — เนื้อในเรียงลง อ่านง่ายบนมือถือ */
body.woocommerce-checkout .wpc-abook-pick__item {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding: 14px 74px 14px 18px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #444 !important;
	background: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid #f2f2f2 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	cursor: pointer !important;
}
body.woocommerce-checkout .wpc-abook-pick__item:hover {
	background: #fff8f5 !important;
}
.wpc-abook-pick__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}
.wpc-abook-pick__chip {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	line-height: 1.7;
	color: #666;
	background: #f4f4f4;
	border-radius: 4px;
}
.wpc-abook-pick__chip--main {
	color: #e8430a;
	background: #fdeee8;
	font-weight: 700;
}
.wpc-abook-pick__who {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 3px;
}
.wpc-abook-pick__name {
	font-size: 14px;
	font-weight: 600;
	color: #222;
}
.wpc-abook-pick__phone { color: #666; }
.wpc-abook-pick__text {
	display: block;
	line-height: 1.6;
	color: #666;
}
.wpc-abook-pick__manage {
	display: block;
	padding: 14px 18px;
	font-size: 13px;
	font-weight: 700;
	color: #e8430a;
	text-align: center;
	border-top: 1px solid #ececec;
}

/* ------------------------------------------------------------------
 * [20 ส.ค.] ปุ่ม "กรอกที่อยู่ใหม่" ในแผง + ช่องติ๊ก "บันทึกไว้ในสมุด"
 *
 * 🔴 ผูก body.woocommerce-checkout + !important ตามกฎเดิมของบล็อกนี้
 *    (Customizer CSS 45KB พิมพ์ท้าย <head> เสมอ — specificity เท่ากัน = แพ้ §15)
 * ------------------------------------------------------------------ */
body.woocommerce-checkout .wpc-abook-pick__new {
	display: block !important;
	width: calc(100% - 36px) !important;
	margin: 12px 18px 0 !important;
	padding: 11px 12px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #e8430a !important;
	background: #fff !important;
	border: 1px dashed #e8430a !important;
	border-radius: 8px !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
}

/* ------------------------------------------------------------------
 * [รื้อ UX 20 ส.ค.] แถบหัวของโหมดกรอกฟอร์ม + ปุ่มถอย = ตัวปิดทางตัน
 *
 * 🔴 render จาก PHP ที่ `woocommerce_before_checkout_billing_form` ซึ่งอยู่ **ข้างใน**
 *    `.woocommerce-billing-fields` → ถูกซ่อน/แสดงพร้อมฟอร์มโดยกฎที่มีอยู่แล้ว
 *    (`body.wpc-addr-collapsed .woocommerce-billing-fields { display:none }`)
 *    **ไม่ต้องเขียนกฎสลับโหมดใหม่เลย** และไม่ต้องกลัวโดน AJAX เขียนทับ
 *
 * ⚠️ อยู่นอก `__field-wrapper` จึงไม่โดนกริดฟอร์ม 12 คอลัมน์ของ 3E
 * ------------------------------------------------------------------ */
.wpc-addr-mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ececec;
}

.wpc-addr-mode__title {
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

body.woocommerce-checkout .wpc-addr-back {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 6px 10px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #e8430a !important;
	background: #fff5f1 !important;
	border: 1px solid #f0cfc2 !important;
	border-radius: 8px !important;
	min-height: 0 !important;
	cursor: pointer !important;
}

/* กำลังยิงบันทึกลงสมุด — ปุ่มต้องบอกว่าระบบรับเรื่องแล้ว กันกดซ้ำ */
body.woocommerce-checkout .wpc-addr-save.is-busy {
	opacity: 0.7 !important;
	cursor: default !important;
}

/* แผงเปิดอยู่ = ล็อกไม่ให้หน้าข้างหลังเลื่อนตาม */
body.wpc-abook-pick-lock { overflow: hidden !important; }

/* 🔴 แผงเป็น bottom sheet ชิดขอบล่าง — ธีมมีแถบล่าง (#mobile-bottom-nav สูง 56px)
   และมือถือมี safe-area อีกชั้น ถ้าไม่เผื่อ แถวล่างสุด ("จัดการสมุดที่อยู่") จะถูกบัง */
.wpc-abook-pick__sheet {
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* จอคอม: กลางจอแทนแผ่นล่าง */
@media (min-width: 769px) {
	.wpc-abook-pick { align-items: center !important; }
	.wpc-abook-pick__sheet {
		border-radius: 14px;
		max-height: 76vh;
		box-shadow: 0 12px 40px rgba( 0, 0, 0, .22 );
	}
}

/* เบราว์เซอร์บังคับโหมดมืดเองได้ — specificity สู้ไม่ได้ ต้องมีชุดสำรอง (บทเรียน §15 ข้อ 9) */
@media ( prefers-color-scheme: dark ) {
	.wpc-abook-pick__sheet { background: #fff !important; }
	.wpc-abook-pick__title,
	.wpc-abook-pick__name {
		color: #222 !important;
		-webkit-text-fill-color: #222 !important;
	}
	body.woocommerce-checkout .wpc-abook-pick__item {
		background: #fff !important;
		color: #444 !important;
		-webkit-text-fill-color: #444 !important;
	}
}